Record and share some interview questions I have encountered and keep updating

    1. Let’s talk about HTML semantic tags

HTML semantic tags include Header, Nav, Article, Section, aside, Footer, etc.

  1. HTML structure is clear
  2. Good code readability
  3. Easy for team maintenance and development
  4. Accessible reading
  5. Search engine friendly, context weights can be determined based on tags
  6. Mobile devices display the web better
    1. Talk about the box model
  1. The box model includes content areas, inner margins, borders, and margins
  2. There are two types of box models one is the standard box model, width and height only refer to the height of the content area; There is also an IE box model where width and height refer to the width of content+padding+border
  3. Box-sizing: content-box and box-sizing: border-box can be used to set both box models
  4. JS gets the width and height of the box model

Window. GetComputedStyle (dom). Width: for even the style of the computing dom. The offsetWidth/dom offsetHeight: returns the actual size of the element

    1. Achieve a fixed width on the left, adaptive right two column layout
  1. Left float, right margin-left
.left {
    width: 100px;
    float: left;
}
.right {
    margin-left: 100px;
}
Copy the code
  1. Left absolute, right margin-left
.left {
    width: 100px;
    position: absolute;
}
.right {
    margin-left: 100px;
}
Copy the code
  1. Flex layout
.container {
    display: flex;
}
.left {
    width: 100px;
}
.right {
    flex: 1 0 auto;
}
Copy the code
  1. Float + landing approach
.left {
    width: 100px;
    float: left;
}
.right {
    overflow: hidden;
}
Copy the code
  1. Double float solution
.left {
    width: 100px;
    float: left;
}
.right {
    float: right;
    width: calc(100% - 120px);
}
Copy the code
    1. Talk about the prototype chain
  1. Each object has a proto attribute pointing to the prototype object of its constructor
  2. If the object is a function object, there is a Prototype attribute pointing to its prototype object
  3. The constructor’s prototype object has a constructor property pointing to the constructor
    1. How do you implement prototype chain inheritance
  1. Makes the prototype object of a subclass’s constructor an instance of its parent class.

Disadvantages: 1. Instances of all subclasses share instance attributes and methods of their parent class. 2. Cannot pass arguments to the parent class constructor when creating a subclass instance. 3

    1. Say promise and async and await
  1. Both were used to implement asynchronous operations, and Promises were invented to solve the code readability problem caused by callback hell. Chain calls can be made via promise.then.
  2. Promises still have some drawbacks: once executed, they can’t be canceled, they can’t get execution progress, and errors thrown internally can’t be obtained externally without setting callbacks.
  3. Await is essentially the syntactic sugar of promise, with the advantage of clearer structure, almost the same as synchronous code. You can use try catch to catch errors. Intermediate values are more convenient for parameter transmission.
    1. The async and defer properties of the script tag
  1. Both make script tags load asynchronously, which does not block parsing of the page DOM.
  2. Defer causes the script to delay running until the entire page has been parsed
  3. Async suspends DOM parsing and runs immediately after script tags are loaded.
    1. XSS, CSRF
  1. XSS: Cross-site scripting attacks, which inject and run illegal HTML tags or JavaScript codes on websites with security vulnerabilities to steal user information and cookies and send malicious requests

Defense methods: 1. Enable the Content Security Policy (CSP), which essentially creates a whitelist to tell the browser which external resources can be loaded and executed. 2. Escape characters, escaping input and output content. 2. CSRF: cross-site request forgery, using the identity of the user has logged in, without the user’s knowledge, in the name of the user to complete illegal operations.

Defense methods: 1. Token. 2. Verification code. 3. Check the Referer. 4. Set the SameSite attribute for cookies to indicate that cookies cannot be sent with cross-domain requests.

    1. Talk about browser caching
  1. Browser cache locations include service worker, Memory cache, Disk cache, and push cache
  2. The browser cache process is divided into strong cache and negotiation cache. Strong cache does not send a request to the browser and uses the content in the cache directly. Whether to use strong cache depends on whether a certain point in time has passed. When the strong cache fails, the negotiation cache is used, and the client sends a request to the server with the cache id. It is up to the server to decide whether to use the cache according to the cache identifier. If the negotiated cache takes effect, 304 is returned; otherwise, 200 and the requested content are returned