This is the third day of my participation in the August Challenge. For details, see:August is more challenging

preface

As a qualified front-end engineer, browser-related principles are the cornerstone of our performance optimization. So, in the interview, browser related knowledge is also unavoidable point. This article covers event mechanisms, cross-domain issues, browser rendering processes, browser local storage, and browser caching mechanisms.

The body of the

Event mechanism

Event triggering process

  1. Propagating from the window to the event trigger is called the capture phase
  2. In the target phase, the event is triggered
  3. Propagating from the event trigger to the window is the bubbling phase

What are some ways to prevent events from being triggered?

  • The third argument is addEventListener

This parameter can be a Boolean value or an object:

  1. If Boolean: useCapture. The default value is false, indicating that the capture phase is disabled and the bubble phase is enabled by default. Change to true and the capture phase is turned on and the bubble phase is turned off.
  2. If it is an object, the object can use the following properties:
    • Capture: A Boolean value, similar to useCapture
    • Once: a Boolean value. A value of true means that the callback will be called only once and the listener will be removed
    • Passive: a Boolean value, indicating that it is never invokedpreventDefault.

    Note: e.preventdefault () prevents the occurrence of default events such as href default jump events

  • throughe.stopPropagation 和 e.stopImmediatePropagationMethod to block an event

    Both methods can be used to block events (both capture and bubble)

  • E.s topPropagation and e.s topImmediatePropagation difference

E.s topImmediatePropagation in addition to being able to stop the capture or bubbling phase of the event, can also prevent other registered event goal of the same type of event (generally speaking, if an element is registered multiple click event, it should have been according to the order of event registration is triggered; When this method is used, subsequent events that have not yet been executed do not respond.

What is an event proxy?

If the children of a node are dynamically generated, then the children should register events with the parent node, which is called event brokering

The example code is as follows:

<ul id="ul"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> <script> let ul = document.querySelector('#ul') ul.addEventListener('click', (event) => { console.log(event.target); }) </script>Copy the code
  • The benefits of doing this kind of event proxy?
    1. Save memory
    2. You do not need to deregister events for child nodes

Cross-domain problem

What is cross-domain?

Cross-domain means that browsers cannot execute scripts from other sites. This is caused by the browser’s same-origin policy, which is a security restriction imposed by the browser on JavaScript

Cross-domain solutions

  • jsonp

    With the script tag’s lack of cross-domain limitations, the client sends a script request with a callback function that handles the returned data. The server receives the request and helps execute the callback function

    • Disadvantages:
      1. Because this is a script request, it is only applicable to GET requests
      2. The various HTTP status codes are not returned when the call fails
      3. Security is not high, jSONP service has page injection vulnerability

  • Cors (Cross-domain Resource Sharing)

    The browser prechecks the request and determines whether it is simple or complexCopy the code

    • Client precheck:

      1. Access-control-request-method // Request Method
      2. Access-control-request-headers // Specifies the Request header
      3. Origin // The domain from which the request was issued

    • Server reply:

      1. Access-control-allow-origin // Specifies the domain that can make this request
      2. Access-control-allow-methods // List of Methods that Allow requests
      3. Access-control-allow-headers // Allows the header field of the request
      4. Accrss-control-allow-age // The maximum amount of time that a precheck request can be cached, during which the same request will not be prechecked again

    • A simple request

      If it is a simple request, the request carries Origin, and if the Origin is not in the access-control-allow-Origin on the server, the browser intercepts the response

    • Complex request

      The difference from simple requests is mainly reflected in the precheck and response phases

  • webScoket

    Another protocol full duplex once the link is not broken

  • nignx

    As a server proxy, the server directly does not exist across domains

  • postMessage

    Typically used to get third-party page data embedded in a page

  • document.domain

    The secondary domain name

Browser Rendering process

The browser takes all the components of the page (HTML, CSS, JS, images) and parses them to generate two internal data structures — the DOM tree and the render tree

  1. Parse the HTML and generate a DOM tree

  2. Parse the CSS and generate the cssOM tree

  3. Generate the render tree

    1. Each visible node is traversed from the root node of the DOM tree.
    2. For each visible node, find the corresponding rules in the CSSOM tree and apply them.
    3. According to each visible node and its corresponding style, the combination generates the render tree.

  4. Backflow: re-traverse the render tree and calculate their exact location and size (geometric information) in the device viewport based on the visible render tree nodes.

  5. Redraw: Based on the visible nodes of the rendered tree after the reflux operation (obtaining the geometry information), the absolute pixels of the nodes are obtained and drawn on the browser

Reflux (rearrangement)

  • 1. What is reflux? — Iterate through the render tree and calculate the exact location and size of the visible render tree nodes in the device viewport.
  • 2, trigger reflux: When the page layout and geometry changes, backflow – adding or removing visible DOM elements – element position changes – element size changes (margin, inner border, border size, height and width, etc.) – content changes, For example, text changes or an image is replaced by another image of a different size. – When the page is first rendered (which is inevitable) – the browser window size changes (because reflux calculates the position and size of elements based on viewport size)

redraw

  • 1. What is redrawing? Draw the browser with the absolute pixels of the visible nodes in the rendered tree after the reflux operation
  • 2. Trigger redraw: When a non-geometric element changes

Note: The occurrence of backflow will always trigger redraw, redraw does not necessarily occur backflow

Browser Local storage

Cookie localStorage sessionStorage indexDB Life Cycle Server generated unless manually cleared Page closed clean unless manually cleared Storage memory 4K 5m 5M unlimited (depending on computer memory) Back-end communication carried every time communication Non-participation In back-end communication Non-participation in the headerCopy the code

cookie

Four configuration parameters:

  • Value: indicates the stored value. Encryption is usually required
  • Http-only: The cookie cannot be accessed through JS and can only be accessed through HTTP requests. It is usually enabled to avoid XSS attacks
  • Secure: Restricted values can only be accessed in HTTPS requests
  • Same-site: indicates that the browser cannot carry cookies in cross-domain requests to avoid CSRF attacks

Browser caching mechanism

www.jianshu.com/p/54cc04190…

conclusion