HTML parsing principle: Making pages faster

Source: Internet
Author: User

Web pages run in a variety of browsers. The speed at which browsers load and render pages directly affects the user experience. Unfortunately, the most efficient IE browser is still the market share of the majority, which has severely restricted the development of the Internet (SIGHS: "mosaic and IE-a stumbling block to the development of human civilization! ").

Simply put, page rendering is the process in which the browser displays html code in the browser window according to the CSS-defined rules. Let's take a general look at how browsers work:

The user enters the URL (assuming it is an html page and is accessed for the first time), the browser sends a request to the server, and the server returns the html file;
The browser starts loading html code and finds that the The browser sends a CSS file request again, and the server returns the CSS file;
The browser continues to load the <body> part of the html code, and the CSS file is ready to render the page;
In the code, the browser finds a tag referencing an image and sends a request to the server. In this case, the browser will not wait until the image is downloaded, but will continue to render the subsequent code;
The server returns the image file. Because the image occupies a certain area and affects the layout of the subsequent sections, the browser needs to go back and re-render the Code;
The browser finds a <script> tag containing a line of Javascript code and runs it quickly;
The Javascript script executes this statement, which instructs the browser to hide a <div> (style. display = "none") in the code "). Cup, suddenly such an element is missing, and the browser has to re-render this part of code;

Finally, when the arrival of

Wait a moment. The user clicks the "skin change" button on the interface, and Javascript changes the CSS path of the <link> label for the browser;
The browser has gathered <div> <span> <ul> <li>, "Everybody is packing up and we have to come back ......", The browser requests a new CSS file from the server to re-render the page.
Every day, browsers come and go back and forth. You need to know that the quality of html and css code written by different people is uneven. Maybe they will run and then run. Fortunately, there is still such a group of people in this world-page reconstruction engineers, which are very inconspicuous at ordinary times. They also help visual designers cut down their pictures and change their words. In fact, they have done a lot of practical work in their back.
Why is the page slow? This is because the browser needs to spend time and energy rendering, especially when it finds that a certain part of the page changes and affects the layout, it needs to reverse the page and re-render it, the expert called the rollback process reflow.

Related Article

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.