What happens from entering the URL in the browser to rendering the page? (below)

As we said in the last article, the browser, through the web, gets the resources we need to load pages.

So what does our browser do with these resources?

Parsing of resources

Generate DOM trees and render trees

When the browser takes our resources, it parses index.html into a DOM tree

It also parses CSS resources into render trees.

Finally, the DOM tree is merged with the render tree to generate the LayoutTree LayoutTree

The browser with the layout tree starts drawing the page, while drawing. There are two important concepts: redraw and rearrange (reflux)

redraw

Redraw refers to changing the style of the element, which goes back to the second rendering step and regenerates the render tree.

Changing the color, font, and other elements that affect style will cause redrawing.

rearrangement

Rearrangement is when the tree structure of an element changes. We need to go back to step one.

At this point, the entire rendering process is reflow again. Therefore, reordering can be very costly to browser performance.

The size of an element, the creation of a new element, and changes in text all cause rearrangements.

Rearrangement always causes redrawing, but redrawing does not necessarily cause rearrangement!

Performance optimization

Rearrangements have a significant impact on performance, and reducing the number of rearrangements is the main way we optimize performance

So how do you tweak your pages in a way that makes them look good but doesn’t affect performance?

Native JS

The DOM is usually retrieved from native JS, so it is best to cache the retrieved DOM elements with a variable. Avoid multiple DOM queries

Native JS has an API called createDocumentFragment(). Create a document fragment through this API by inserting most of the DOM elements into the document fragment. Insert it into the DOM, creating multiple operations, the purpose of one insert. Optimize performance.

vDom

The virtual DOM is an essential mechanism for mainstream frameworks today.

The principle of vDom is to use JS to simulate the DOM tree, and the performance of js operations is much better than browser operations.

Therefore, combining a large number of operations into JS operations, comparing the two vDOM trees, and updating the different parts can provide a significant performance improvement.

VDOM optimization

The virtual DOM, while good, still has its problems. So the contrast between two DOM trees is the contrast between two DOM trees, n to the second time.

This complexity can’t be put into production, so we need to optimize the comparison operation.

The savvy front-end engineers came up with a solution: We walked through each node, comparing the nodes by key and tag

  • If not, replace the node without comparing down
  • If they are the same, keep going down.
Throttling and anti-shaking

  • Throttling is when the user performs an operation on an element (such as drag and drop) that, if triggered all the time, will cause the browser to stall. We can set the timer, so that all operations in this period of time do not respond, until the timer ends, and then the response. This may optimize hundreds of operations per second to one per second.

  • Anti-shock means that when the user performs an operation on an element (such as a form input response), we need to open a network request each time the user enters.

This is obviously not realistic, so you can take a shake-out action on the user’s actions, that is, the user inputs, cancels the last event, and sets the callback event again. This way, some time after the user finishes typing, a network request is made to validate the form.

  • Combination of throttling and anti-shake

One problem with anti-shake is that if the user keeps typing, the action will never be triggered. At this time, the combination with throttling method, in a specified time trigger, improve user experience.

requestAnimationFrame

Is called at the end of every frame in the render process to prevent animation from stalling.

CSS optimization

The previous optimization is js level, in CSS, can also be optimized.

Css3 provides several properties that allow the GPU to accelerate and optimize rendering. Enable GPU acceleration GPU hardware acceleration refers to using the GRAPHICS performance of the GPU to perform some graphics operations in the browser.

The following attributes can trigger GPU acceleration

  • transform
  • opacity
  • filter
  • will-change

Elements of display: None do not cause reordering during operation of elements.

Js parsing

Js parsing and rendering engines share a thread, focusing on the event loop mechanism.

Refer to my other article: juejin.cn/post/699919…

Image and CSS parsing does not affect page loading.

A supplement to the previous article

Cross domain

The same origin policy of the browser

Pages under the same protocol, domain name, and port are of the same origin.

All three must be consistent, or they need to cross domains

To prevent information from being stolen.

jsonp

The same origin policy is bypassed by the

CORS

Set http-headers on the server to allow access to our address

Browser storage

cookie

Cookies are designed not to store, but to transmit information. The size is about 4K, and it is not safe.

localStorage

The value is 5M for each domain name and cannot be deleted unless manually deleted

sessionStorage

The value is 5M for each domain name and exists in the current session

Both sessionStorage and loaclStorage can be set and retrieved via API setItem (), and getItem () can be set directly to window.loaclStorage. To set or get

IndexDB

IndexedDB uses an object Store internally to store data. All types of data can be stored directly, including JavaScript objects