The browser makes a request to the server

  • The browser obtains the IP address corresponding to the domain name from the DNS server
  • The browser sends a request to the server corresponding to this IP address
  • The server receives, processes the request, and returns the content (response)
  • The browser downloads the response

Browser rendering process

  • Building an HTML tree (DOM) from HTML
  • Building a CSS Tree from CSS (CSSOM)
  • Merge DOM and CSSOM into a Render Tree

  • According to Render Tree to Layout, calculate document flow, box model, size and position, etc
  • Paint each node on the screen. (Text, colors, images, borders, shadows, etc.)
  • Composite display screen according to cascade relationship

Browsing the Web may seem simple, but the browser actually does quite a bit of work. If the DOM or CSSOM is modified, the browser can only perform all of the above steps once more to determine which pixels need to be rerendered on the screen.

Use the Browser developer tools to view the browser drawing status

  1. Click on the Developer tools arbitrary Tag
  2. Press ESC to bring up another toolbar
  3. Left menu bar addRendring
  4. Check thePaint Flashing

How to update styles

JS updates are generally used, for example:

div.style.background ='red'
div.style.display ='none'
div.classList.add ('red') div. Remove () and so onCopy the code





Browsers typically implement visual changes in one of three ways: [1] All go

JS/CSS > Styles > Layout > Draw > Composition

Example: div.remove() triggers the current element to disappear, changing the Layout and rearranging all other elements. Any affected parts need to be redrawn, and the final drawn elements need to be composited. 【2】 Skip Layout

JS/CSS > Styles > Draw > Composition

For example, modifying the background color, text color, or shadow does not affect the Layout of the page. The browser skips the Layout and uses Paint + Composite instead.

【3】 Skip Layout and Paint

JS/CSS > Styles > Composition

Example: Change transform, etc., and the browser jumps straight to Composite. Of the above three methods, the third method consumes the least performance. To find out what properties of CSS trigger what processes, go to CSS Triggers