preface

This series started with preparing yourself for an interview. Later found more and more sorting, almost 120,000 characters, finally decided to share to everyone.

In order to share the sorting out, I spent a lot of time, at least three times as much time as ONLY myself. If you like, welcome to collect, follow me! Thank you very much!

The article links

  • Front – end interview check and fill gaps -(1) tremble and throttling
  • (2) Garbage collection mechanism
  • (3) Cross-domain and common solutions
  • (4) Front-end local storage
  • (5) Rendering mechanism and redraw and backflow
  • Front – end interview -(six) browser cache
  • (7) XSS attack and CSRF attack
  • (8) Front-end encryption
  • (9) HTTP and HTTPS
  • Check and fill gaps in front interview –(10) Front authentication
  • (11) Front-end software architecture pattern MVC/MVP/MVVM
  • (12) From the input URL to the page to see the whole process (including three handshake, four wave detailed explanation)
  • Front – end interview leak -(13) memory leak
  • Front – end interview omission and filling -(xiv) algorithm and sorting
  • (15) Event Loop

Collection of articles:

The Index (120,000 character collection) contains more than a dozen other articles in the series written so far. The following new value-added articles will not be added in each link, strongly suggest that the comments like, pay attention to the collection!!!! , thank you! ~

Follow-up Update Plan

Design pattern, front-end engineering, project process, deployment, closed loop, vUE often test knowledge and other contents will be added in the future. If you think the content is good, welcome to collect, follow me! Thank you very much!

Ask for an extrapolation

At present, I am also preparing for job-hopping. I hope you and HR sister can promote a reliable front-end position in Wuhan! Email :[email protected]. Thanks! ~

Apply colours to a drawing mechanism

Render step

The browser rendering mechanism is generally divided into the following steps:

    1. Work with the HTML and build the DOM tree.
    1. Handle CSS to build the CSSOM tree.
    1. Merge the DOM and CSSOM into a render tree.
    1. The layout is based on the render tree and the position of each node is calculated.
    1. Call GPU draw, composite layer, display on the screen.

Note:

  • When the CSSOM tree is built, rendering is blocked until the CSSOM tree is built. And building a CSSOM tree is a very performance consuming process, so try to keep the hierarchy as flat as possible and reduce excessive cascading. The more specific the CSS selector, the slower the execution.
  • When the HTML parses to the Script tag, the DOM is paused, and when it is finished, it is restarted from where it was paused. In other words, the faster you want to render the first screen, the less you should load the JS file on the first screen. CSS also affects the execution of JS, which is executed only after the stylesheet is parsed, so it can be assumed that CSS also suspends DOM construction in this case.

The difference between Load and DOMContentLoaded

  • When the Load event is triggered, the DOM, CSS, JS, and images in the page have all been loaded.
  • The DOMContentLoaded event is triggered to mean that the original HTML is fully loaded and parsed, without waiting for CSS, JS, or images to load.

The layer

In general, you can think of a normal document flow as a layer. A new layer can be created with certain properties. Different layers render each other, so it is recommended to create a separate layer for frequent renderings to improve performance. But don’t create too many layers, it will cause a reaction.

The following common properties allow you to create new layers

  • 3 d transform:translate3d,translateZ
  • will-change
  • video,iframeThe label
  • This is done by animationopacityThe animation transformation
  • position: fixed

Repaint and Reflow

concept

Redraw and backflow are a section of the render step, but these two steps have a significant impact on performance.

  • Redraw is when the node needs to change the appearance without affecting the layout, such as changing color, background-color, visibility, etc., is called redraw
  • Backflow is a layout or geometric property that needs to be changed and is called backflow.

Note: Backflow must be redrawn, and redrawing does not necessarily cause backflow. The cost ratio of backflow is much higher, and changing the deep node is likely to lead to a series of backflow of the parent node.

Operations that cause reflux:

  • First page rendering
  • The browser window size has changed
  • Element size or position changes
  • Element content changes (amount of text or image size, etc.)
  • Element font size changes
  • Add or RemovevisibletheDOMThe element
  • The activationCSSPseudo-classes (e.g.:hover)
  • Query certain properties or call certain methods

Some common properties and methods that cause reflux:

  • clientWidth,clientHeight,clientTop,clientLeft
  • offsetWidth,offsetHeight,offsetTop,offsetLeft
  • scrollWidth,scrollHeight,scrollTop,scrollLeft
  • scrollIntoView(),scrollIntoViewIfNeeded()
  • getComputedStyle()
  • getBoundingClientRect()
  • scrollTo()

Redraw and backflow relationship with Event loop

What many people don’t know is that redrawing and backflow are actually related to Event loops.

  1. When the Event Loop finishes executing Microtasks, it determines whether the Document needs to be updated. Because the browser has a 60Hz refresh rate, it only updates every 16ms.
  2. And see if there isresizeorscrollIf there is, it will trigger an event, soresize 和 scrollThe event is also triggered at least 16ms and has its own throttling function.
  3. Determine whether the Media Query is triggered
  4. Update the animation and send the event
  5. Check whether full-screen operation events exist
  6. performrequestAnimationFrameThe callback
  7. performIntersectionObserverCallback, which determines whether an element is visible, can be used on lazy loads, but is not compatible
  8. Update the interface
  9. So that’s what you might do in one frame. If there is idle time in a frame, it will executerequestIdleCallbackThe callback.

Reduce redrawing and backflow

  • usetranslatealternativetop

  • Use visibility instead of display: None, as the former will only cause a redraw and the latter will cause backflow (layout changes)

  • Take the DOM offline and change it. For example, give it display: None (once Reflow) and then change it 100 times before displaying it

  • Do not put property values of DOM nodes in a loop as variables in the loop

  • Do not use a table layout. A small change may cause the entire table to be rearranged

  • Select the speed of the animation implementation, the faster the animation speed, the more times of backflow, you can also choose to use requestAnimationFrame

  • CSS selectors match search from right to left to avoid deep DOM

  • Turns a frequently running animation into a layer that prevents the node from backflow and affecting other elements. For example, in the case of the video TAB, the browser automatically turns the node into a layer.

CSS

  • Avoid the use oftableLayout.
  • As far as possible inDOMThe end of the tree changesclass.
  • Avoid setting multiple inline styles.
  • Apply the animation effect topositionProperties forabsoluteorfixedOn the elements of.
  • Avoid the use ofCSSExpressions (e.g.calc()).

JavaScript

  • Avoid frequent manipulation of styles. It is better to rewrite them all at oncestyleProperty, or define the style list asclassAnd change it onceclassProperties.
  • Avoid frequent operationsDOM, create adocumentFragment, apply allDOM manipulation, and then add it to the document.
  • You can also set it for the element firstdisplay: noneAnd then display it after the operation is over. Because in thedisplayProperties fornoneOn the elements ofDOMOperation does not cause reflux and redraw.
  • Avoid reading properties that cause reflow/redraw too often, and if you do need to use them more than once, cache them with a single variable.
  • Use absolute positioning for elements with complex animations to take them out of the document stream, otherwise causing frequent backflow of the parent and subsequent elements.

Thanks and Reference

The whole article is basically from the following article, thank you!

  • Front end interview Map — rendering mechanism