This is the fourth day of my participation in the August More text Challenge. For details, see: August More Text Challenge

Briefly talk about the browser rendering process

  • Parse the HTML and generate a DOM tree.
  • Parse CSS to generate CSSOM (CSS Object Model). It’s like building a dictionary tree based on descendant selectors or something like that. Also note that the browser will provide the default style (User Agent) as the base.
  • DOM tree and CSSOM tree are synthesized to create a render tree.The specific approach is to traverse the visible node from the DOM root node, that is, to exclude the settingdisplay: none;And do not render (e.g<head>). And find appropriate CSSOM rules for each visible node, taking into account “style inheritance” (e.gfont-sizeAttributes affect child elements) and “style cascading” (that is, precedence, such as the ID selector taking precedence over the class selector).
  • [Rearrangement] Enter the “Layout” stage to calculate the geometric information of visible nodes.Calculate the element’s geometric information (such as position and size) and style information (such as background color). Such aswidth: 50%;This relative value results in an absolute pixel value based on the width of the parent element.
  • Layered. Overlapping contexts in the document (such as absolutely positioned elements) and nodes that need to be trimmed (such as text that doesn’t fit in a container) create separate layers.
  • Redraw draw. Or rasterization, which draws the information from the rendered tree onto the screen.

PS: Rearrangement is also called reflux.

rearrangement

The conditions under which rearrangements occur

  • First page rendering
  • Add, delete, or replace visible DOM elements
  • The browser window changes
  • Element position or size change

Except for the first rendering, all the other cases have changed the geometric attributes of the elements, which may have a huge impact on the layout, so the geometric information of the nodes needs to be re-calculated, that is, rearranged, and then drawn.

After rearranging, it’s all redrawn. That’s the process.

A redraw operation that does not trigger a rearrangement

  • An operation on an element that does not change the element’s geometry. For example, modify the background color, font color.

How to reduce rearrangement redraw

Because reordering is performance intensive, the browser optimizes it by caching multiple changes in a queue and reordering them when appropriate, which is asynchronous. But if you run into code that needs to get the layout information (like getBoundingClientRect, scrollHeight, etc.), chances are you’ll immediately clear the queue and reorder it. Because if you re-render, you won’t get the latest layout information.

Ways to reduce rearrangements are:

  • Minimize DOM manipulation and use appropriate algorithms. For example, when updating an item in a new list, do not destroy all the elements and create a new list item from the array. The Diff algorithm optimization of React and Vue’s virtual DOM is to reduce DOM modification operations.
  • To add an element, you first create all its children and then add them to the DOM.
  • Cache the layout information appropriately. Avoid getting layout information too often in a loop, resulting in repeated rearrangements.
  • Put elements that change frequently on a separate layer. Let’s say I settransformWill use a separate layer for the elementGPURendering, hardware acceleration, will not cause a redraw. I think it’s probably a stand-alone animation system. Absolute positioning these ways out of the document will also create layers that will only backflow in parts of themselves, reducing work.

JS blocked

First, look at the functions of the script tag’s two attributes:

  • defer: Execute the script after the DOM tree is parsed;
  • async: Execute the script immediately after it is downloaded. There is no guarantee that the JS scripts will execute sequentially

A blocking condition:

  • JS blocks DOM parsing. Because JS can manipulate the DOM, the browser decides to put the DOM parsing aside for now and let the script download and execute before proceeding, in order not to do any unnecessary work. Think about why we recommend putting the script tag for business code at the end. This is because scripts placed at the end can wait until the DOM tree is parsed, and business code often needs to access the node element so it doesn’t get null. Some third-party libraries don’t need to access nodes, so it’s ok to put them at the beginning.

The CSS block

To build a CSSOM tree, you first need to get the CSS content, and usually we use CSS files that are linked outside. There will be a request process, and the block will occur.

  • CSS blocking does not affect DOM tree parsing generation.(can be<script defer>And a delayed return CSS resource to test,deferYou can execute the script after the DOM tree is parsed. The result is that the script is executed first and the page is rendered later.)
  • **CSS blocks page rendering. ** refers to blocking the generation of the CSSOM tree because the information is incomplete,
  • CSS blocking may block the subsequent JS script from runningThere is no setting behind itasync 或 deferScript tag). Effect isCSS blocking -> JS blocking -> DOM parsing blockingSo we seeThe CSS blocks DOM parsingThe occurrence of phenomenon. My guess is that the browser thinks there might be something in the script that needs to get the height of the container, and this has to be marked up when the page is renderedasync 或 deferThe script does not.

Vue loading white screen for the first time

To build a SPA (single page application), Vue needs to put all the components into a JS script in advance and download it all at once. If there are many components and the JS is too large, it will cause DOM rendering to be slow, which will cause the white screen to load slowly.

The optimization scheme is as follows:

Use lazy route loading properly

Here is the route configuration that vue-CLI scaffolding created for us after enabling routing options.

{
  path: '/about'.name: 'About'.// route level code-splitting
  // this generates a separate chunk (about.[hash].js) for this route
  // which is lazy-loaded when the route is visited.

  / / look here
  component: () = > import(/* webpackChunkName: "about" */ '.. /views/About.vue')},Copy the code

The About component is loaded only when the route is accessed. That is, the About component is not loaded the first time you access the home page or other routes. This reduces the size of the first js load and reduces the white screen time. In addition, the webpackChunkName in the comment specifies the name of the script to be loaded. If multiple lazily loaded components use the same webpackChunkName, they will be placed in the same script. That is, for multiple components in the same script, when a route matched by one of the routing components is accessed, the other components will also be downloaded in advance.

Static resources are accelerated using CDN

The CDN distributes the resources of the source site to each network node through the cache proxy to construct a private network. This private network is cross-carrier, cross-region, a true high-speed network. Through load balancing (using DNS), users can access the resources closest to them, thus increasing resource loading speed. It’s definitely faster to get water from close to home than it is to travel mountains and rivers to a remote source.

In this way, the JS script can be loaded quickly, thus reducing the white screen time.

While this is an optimization to increase load speed, we can also use http2, compress scripts, and turn on GZIP compression for HTTP to reduce resource size and speed up resource requests.

Analyze the code to see if any code has been reused

This is especially true if multiple versions of third-party libraries are used. You can use Webpack-bundle-Analyzer to view the dependency graph of your code.

Let’s show you the loading animation

The screen has been white is not good, some loading animation to let users know that the site is normal, just loading, to eliminate user unease. While not optimized for speed, being able to inform users about what the site is doing can improve the user experience.

reference

  • Building an object Model
  • Do you really know anything about backflow and redrawing? – Nuggets
  • This is how CSS and JS block DOM parsing and rendering
  • Using hardware acceleration in CSS animations – Nuggets
  • Vue project first screen loading speed optimization – Nuggets