Understand the rendering process of html pages in order to learn the performance optimization of the front-end _ HTML/Xhtml _ web page creation

Source: Internet
Author: User
Recently I am studying performance optimization at the front end. It is necessary to understand the page rendering process so as to remedy the problem and find out the performance bottleneck. page rendering has the following features: if you are interested in the definition, continuity, and Operation Sequence of Single-thread event polling, you can learn about the performance optimization of the front-end recently. It is necessary to understand the page rendering process to suit your needs, find out the performance bottleneck. Here are some of the things I have seen.
Reference: Understanding the renderer
Page rendering has the following features::
• Single-thread event polling
• Well-defined, continuous, and orderly operations (HTML5)
• Word segmentation and DOM tree construction
• Request and pre-load Resources
• Build a rendering tree and draw pages
Specifically:
When we get the corresponding HTML bytes from the network, the DOM tree is built. The browser is responsible for updating the UI. DOM tree construction is blocked in the following situations:
• The HTML response stream is blocked in the network.
• There are unfinished scripts
• A script node is encountered, but there are still unfinished style files
The rendering tree is built from the DOM tree and is blocked by style files.
Because it is based on single-threaded event polling, even if there is no blocking of scripts and styles, when these scripts or styles are parsed, executed, and applied, page rendering will also be blocked.
Some situations that do not block page rendering:
• Defined defer attributes and async attributes
• Style files with no matching media types
• The script node or style node is not inserted through the parser
The following is an example (complete code):

The Code is as follows:




  
  

Hi there!


Script
Document. write ('

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.