Web front end interview question collection


Tiankeng began to look for internships. I'm not good enough. I'll sum up relevant knowledge while looking at other people's experience.



2.1 there are many li tags and the order is not fixed. How to change the last li with class b to red

    <li class="a" />
    <li class="b" />
    <li class="b" />
    <li class="a" />

Idea 1: use pseudo class: last child

: last child , represents the last child element of the parent element.

li:last-child {
  background-color: xxx;

Extension 1: what other common pseudo classes are there

//a label exclusive
:link /*The state when the hyperlink is not accessed. When the mouse is up */
:visited /*Status after hyperlink access */
:hover  /*When the mouse is hovering and the mouse is up */
:active /*Activation status: the moment when the mouse clicks */
:focus  /* Triggered when the element gets the focus */

//Other pseudo classes
:first-child //Represents the first element in a set of sibling elements
:first-of-type //Represents the first element of a specified type in a set of sibling elements
:last-child //Represents the last element in a set of sibling elements
:last-of-type //Represents the last element of a specified type in a set of sibling elements
:not(selector) //A negative pseudo class used to match elements that do not match the parameter selector
:nth-child //This CSS pseudo class will first find the sibling elements of the current element, and then sort from 1 according to the sequence of positions. The selection result is the collection of the (an+b) th element (n=0, 1, 2, 3...). If an+b is 0, no element can be selected
:nth-of-type //Similar to nth child, except that it only matches elements of a specific type
:nth-last-child(an+b) //Similar to nth child, it counts from the last child element
:nth-last-of-type //Similar to nth of type, except that it starts counting from the last child element

//Pseudo element selector
/* Add content to the text content attribute */
::before {
            content: "before";
            color: teal;
            margin-right: 20px;
 /* Add content to the text content attribute */       
::after {
            content: "123456";
            color: sienna;
::first-letter //Select the first letter of the first line of a block level element, and there is no other content before the line where the text is located
::first-line //Apply a style to the first line of a block level element.
::selection //Used for the highlighted part of the document

2.2 there is a layout similar to a table. The border of each cell is 1px, and the border in the middle of adjacent cells is also 1px. How to achieve this? How to select a cell to highlight?

A: Starting from the second column, margin left: - 1px, starting from the second row, maigin top: - 1px; Add z-index = 999.

III JavaScript/ECMAScript

3.1 realize multi parameter addition without changing the original api

If the addition function cannot be realized locally, there are APIs provided by other teams:

await asyncAdd = (a, b, (err, res) => {
    Using network request a+b, Result returned successfully res

Now we need to improve the api and use it to implement an add method to enable it to add multiple arrays.

Idea 1: use arguments to decompose multiple incoming parameters, and use reduce to send them into the api in turn for calculation and return the results.

function asyncAdd(a, b){
    return new Promise((resolve, reject) => {
    setTimeout(() => {
    }, 1000)

async function add(){
    let arr = Array.prototype.slice.call(arguments)
    const res = await arr.reduce((s, v) => {return s.then((res) => asyncAdd(res, v))}
    , Promise.resolve(0))
    return res;

add(1, 2, 3).then((res) => {

IV Basic knowledge of network planning

4.1 front end performance optimization, (which can be realized in practice)

1. Reduce the number of HTTP requests and the size of transmission message: svg diagram, delayed (lazy) loading of pictures, and merging page css/js files.

2. Set up various caching, preprocessing and long connection mechanisms: establish DNS cache, do CDN distribution, and use HTTP2 protocol to realize the coexistence of multiple TCP channels.

3. Performance optimization in Code: reduce closures, avoid using iframe, reduce direct operation on DOM, low coupling and high cohesion, use event delegation, function anti shake throttling, reduce the level of selector and table layout as much as possible

It's too late to see for the time being. Save it first.

Web front-end performance optimization, what should be done- Zhihu Abstract: This paper will share some common methods of front-end performance optimization, including reducing the number of requests, reducing the size of resources, various caching, preprocessing and long connection mechanisms, as well as performance optimization in code. base64: especially on the mobile terminal, small icons can be base64 (webpack), and large pictures can be cautioushttps://zhuanlan.zhihu.com/p/181275749

Function anti chattering throttling:

Example: prevent the mouse scroll bar from triggering events multiple times (anti shake) and automatically triggering events after a certain time (throttling)


4.2 how to judge that the DOM has been operated when js is used to operate the DOM

Idea 1: HTML5 new API

MutationObserver - Web API interface reference the MDNMutationObserver interface provides the ability to monitor changes to the DOM tree. It is designed as a replacement for the old Mutation Events feature, which is part of the DOM3 Events specification.https://developer.mozilla.org/zh-CN/docs/Web/API/MutationObserver

Idea 2: use the browser queue feature

How do I monitor that DOM objects have been loaded_ Gan Huan's blog - CSDN blog_ How does vue judge the completion of DOM loading? In the process of using third-party plug-ins, we often need DOM to perform some operations after loading. If the plug-in provides such an event interface, everything is relatively simple, but in most cases, either the designer does not consider such a problem or does not design such an interface, what should we do at this time? One mistake that team members often make is to use if judgment, as follows: let DOM = document Getelementbyid ('yiifaa ') / / after DOM loading, execute the operation if(dom){https://blog.csdn.net/yiifaa/article/details/75040858

4.3 browser rendering principle and process

Browser rendering principle and process - how to render web pages? To understand the process of browser rendering pages, you must first know a noun - key rendering path. Critical rendering path refers to the resources such as HTML, CSS and javascript that the browser receives from the initial request, and then https://www.jianshu.com/p/e6252dc9be32

V React, axios, koa2 and other related frameworks

Vi Node.js, sql, mongodb and other backend are related to the database

VII Algorithms are related to data structures

VIII Python related (Django and so on?)

Keywords: Front-end Interview

Added by Emir on Thu, 24 Feb 2022 16:28:11 +0200