Web pages run in a variety of browsers, browser loading, rendering the speed of the page directly affect the user experience. Unfortunately, the least efficient IE browser still occupies the majority of the market share, which has seriously restricted the development of the Internet (sigh: "Mosaic and ie--hinder the development of human civilization stumbling block!" ）。
Simply put, page rendering is the process that browsers display HTML code in the browser window based on the rules defined by CSS. Let's get a general idea of how browsers work:
- The user enters the URL (assuming it is an HTML page and is the first visit), the browser sends a request to the server, and the server returns the HTML file;
- The browser starts loading the HTML code and finds that there is a <link> tag inside the
- The browser also issued a CSS file request, the server returned to this CSS file;
- The browser continues to load the HTML <body> part of the code, and the CSS file has been handed, you can start rendering the page;
- The browser finds a tag in the code that references a picture and makes a request to the server. At this point the browser will not wait until the picture is downloaded, but continue to render the following code;
- The server returns the picture file, because the picture occupies a certain area, affected the layout of the following paragraphs, so the browser needs to go back to render this part of the code;
- The browser finds a <script> tag that contains a line of JavaScript code and runs it quickly;
- The JavaScript script executes this statement, which commands the browser to hide a <div> (style.display= "None") in the code. Cup, Ah, suddenly less such an element, the browser has to recreate this part of the code;
- Finally waiting for the arrival of
- Wait, not finished, the user click on the interface of the "Skin" button, JavaScript let the browser change the <link> label CSS Path;
- The browser has assembled all the <div><span><ul><li> in this room, "Everyone pack up, we have to start again ...", the browser to the server request a new CSS file, to render the page again.
Browsers are running back and forth every day, knowing that different people are writing HTML and CSS code that is so uneven that they might run and die one day. Fortunately this world still has such a group of people--page reconfiguration engineer, usually quite inconspicuous, also help the visual designers to correct the picture and change the word, in fact secretly still did a lot of practical things.
Speaking of pages, why is it slow? That's because the browser takes time and effort to render, especially when it finds that a certain part of the change has affected the layout and needs to be reflow back, which insiders call the retreat process.
Reflow is almost inevitable. Now some of the popular effects on the interface, such as the collapse of the tree directory, expansion (essentially the display and hidden elements), and so on, will cause the browser's reflow. Mouse slide over, click ... As long as these behaviors cause some elements on the page of the placeholder area, positioning, margin and other attributes of the changes, will cause it inside, around or even the entire page of the rendering. Usually we can't predict which part of the code the browser will reflow, they all affect each other.
The reflow problem can be optimized and we can minimize unnecessary reflow. For example, in the beginning of the example of the picture loading problem, which is actually a can be avoided reflow--to the picture set width and height can be. So the browser will know the size of the picture, in the picture before loading set aside the position.
In addition, there is a term that looks similar to reflow: Repaint, Chinese is called redrawing. If you just change the background color of an element, text color, border color, and so on that do not affect the surrounding or internal layout of the property, will only cause the browser repaint. Repaint speed is significantly faster than reflow (under IE need to change the argument, reflow more slowly than repaint). The next will be through a series of experiments in Firefox, IE and other browsers under the Reflow optimization.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
