Js affects DOM tree building

  • Js execution and download block DOM parsing

    // If there is no DOM related operation in js, it can be loaded asynchronously

    // Async executes immediately after loading

    // defer before DOMContentLoaded

  • CSS blocks JS execution (CSSOM)

The stage from the initiation of the request to the first display

  • Requests issued, data submitted (network, server optimization)

  • White screen parsing: After loading CSS and JS, CSSOM and DOM are generated, and the layout tree is synthesized for the first rendering

  • Inline JS, CSS remove both downloads, get the HTML and start rendering directly

  • Minimize file size, Webpack removes comments, and compresses JS

  • Js that are not used to parse HTML, tag async, defer

  • Split CSS, or media query loading

  • After the first rendering is complete -> Full page generation

Graphics card: compose new images, update the contents of the back buffer to the front buffer every 60 seconds

Generate a frame of image:

  • rearrangement

  • redraw

  • synthetic

  • Layer: Layer Tree

  • Block: to improve the rendering efficiency at the micro level, give priority to the image block near the viewport, synthesize the low-resolution image display for the first time, and replace it after the normal scale drawing is completed

  • Compositing: Compositing threads, non-main threads,

    Will-change will layer the elements to be changed independently, but also increase memory. Box {will-change: transform, transform; }

Round Trip Time (RTT) : the Round Trip Time of data request. An HTTP packet is about 14kb. A 0.1m page needs to be split into eight packets for transmission, which requires eight RTT