This is my second article on getting started

Browser Rendering process

  1. Parse HTML, if encounter script tag, immediately execute JS, continue to execute downward, if script tag has async keyword, immediately initiate the network request, if script tag has defer keyword, then delay the script execution until the page load. Continue to execute the HTML tags down to form the htmlDom tree
  2. Parse the CSS and generate the CSSOM tree
  3. Combine the generated DOM tree with the produced CSSOM tree to generate a render tree.

Because JavaScript can modify both DOM and CSSOM. Since the browser is not sure what a particular JavaScript will do, the precaution it takes is to stop the entire DOM construction. Normally we’ll put JavaScript at the bottom of the page and bring it in when the page is ready to render. JavaScript is the key to reflow and redraw, right

Reflux (reflow)

  • The process by which the browser rerenders part or all of the DOM when part or all of the render tree changes due to the size, layout, hiding, etc of the element.
  • The browser needs to be recalculated, and the page layout needs to be rearranged after the computation, so this is a heavy operation.
  • Reflux is also known as rearrangement, and it’s literally easier to rearrange (i.e. rearrange an entire page)

Conditions that trigger backflow

  • Resize the window
  • Changing font size
  • Add or remove style sheets
  • Content changes, such as user input text in the input box, CSS3 animation, etc
  • Change the CSS display, for example, display:none
  • Operates on some attributes of class
  • Scripting the DOM
  • Calculate the offsetWidth and offsetHeight attributes
  • Sets the value of some properties of style

redraw

  • When some elements in the Render tree need to update attributes that only affect the appearance and style of the element, not the layout, for example
  • The visibility, outline, background color and other properties are changed.
  • At this point, because only re-pixel drawing at the UI level is required, the loss is less.
  • Redraw is a representation of the appearance of the Render tree. It does not change its size.

Backflow inevitably causes redrawing, but redrawing does not necessarily cause backflow.

Backflow will cause the tree to be recalculated, which is expensive to draw, so we should avoid backflow as much as possible.

Avoid reflux and redrawing

Avoid backflow and redraw in the CSS

  1. Change classes as far as possible at the end of the DOM tree
  2. Avoid setting multiple inline styles
  3. The animation effect is applied to an element whose position attribute is Absolute or fixed
  4. Avoid the table layout
  5. With CSS3 hardware acceleration, animation effects such as Transform, opacity, and filters do not cause backflow redraw

JS operation to avoid reflux, redraw

It’s better to change the CSS style at once, or define the style list as the name of the class to avoid frequent DOM manipulation, create a subtree using the document fragment, and then copy it into the document to avoid looping through properties like offsetLeft. Save them before you loop. For complex animation effects, use absolute positioning to keep them out of the document stream, otherwise it will cause a lot of backflow of the parent and subsequent elements

Image stabilization (debounce)

  • For events that are triggered continuously in a short period of time, shaking is to allow the event handler to execute only once in a certain period of time.
  • The idea is to maintain a timer that fires after a delay, but if it fires again during a delay, the previous timer will be canceled and reset. This way, only the last operation can be triggered.

The code analysis

// Scrollbar loading // Requirement: listen for browser scroll events and return the current scrollbar distance from the top // If you want to calculate the distance from the top with each swipe, the frequency of the calculation function is too high /* method: When the event is first fired, instead of executing the function immediately, it is given a period value such as 200ms, and then: if the event is not fired again within 200ms, the function is executed. If the event is fired again within 200ms, the current timing is cancelled and the timing starts again. */ function showTop() { var scrollTop = document.body.scrollTop || document.documentElement.scrollTop; Console. log(' scrollbar position: '+ scrollTop); } function debounce(fn, delay) {//delay let timer = null; Return function () {if (timer) {return function () {if (timer) {return function () {if (timer) { ClearTimeout (timer); } // Start a new timer timer = setTimeout(fn, delay); }; } debounce(showTop, 200); The showTop function is executed 200ms after the last scroll.Copy the code

The throttle (throttle)

  • For events that are fired continuously over a short period of time (the scroll event above), the idea is that the event handler is executed only once in a certain period of time.
  • The principle is to determine whether there is a delayed call function not executed.

The code analysis

function throttle(fn,delay){ let notPass= true return function() { if(! NotPass){return false return false -> return false return false} Execute the function and set the status bits to invalid during the interval notPass = false setTimeout(() => {fn() notPass = true; // Set notPass to unpassable}, delay)}} /* Note that there is more to the throttling function than this. For example, you can replace the status bit with a timestamp without using setTimeout at all. It then determines whether the timestamp difference is greater than the specified interval. You can also use the mark returned by setTimeout as a criterion to determine whether the current timer exists. If it exists, it is still cooling, and eliminating the timer after fn means it is active. The principle is the same */Copy the code

The difference between shaking and throttling

  • Function throttling guarantees that the actual event handler will be executed once within a specified period of time, no matter how frequently the event is fired.
  • Function stabilization fires the function only once after the last event.
  • For example, in an infinite page load scenario, we want the user to make Ajax requests every once in a while while scrolling the page, rather than requesting data when the user has stopped scrolling. In such a scenario, throttling technology is suitable for implementation
  • Throttling is performed once. Shaking is performed a finite number of times

remarks

If you think it will help you, give it a like.