Web pages run in a variety of browsers. The speed at which browsers load and render pages directly affects the user experience, 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:
1. 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;
2. the browser starts loading html code and finds that the 3. the browser sends a CSS file request again, and the server returns the CSS file;
4. the browser continues to load the <body> part of the html code, and the CSS file is ready to render the page;
5. the browser finds a tag in the code that references 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;
6. 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;
7. the browser finds a <script> tag containing a line of Javascript code and runs it quickly;
8. 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;
9. the browser burst into tears after the arrival of 10. 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;
11. The browser called <div> <span> <ul> <li> and said, "Everybody is packing up and we have to come back ......", Request from the browser to the server
Find a new CSS file and re-render the page.
Why is the page slow? This is because the browser needs to spend time and energy rendering, especially when it finds that some changes have affected the layout, it needs to go back.Re-renderingThe expert called the rollback ProcessReflow.
Http://www.cnblogs.com/roucheng/
Reflow problems can be optimized.We can minimize unnecessary reflow. For example, the image loading problem in the example at the beginning is an unavoidable reflow. You can set the width and height for the image. In this way, the browser will know the placeholder area of the image and reserve the position before loading the image.
In addition, there is a term that looks similar to reflow:Repaint: repaint.. If you only change the background color, text color, border color of an element without affecting its surrounding or internal layout attributes, it will only cause the browser to repaint. Repaint is much faster than reflow (in IE, reflow is much slower than repaint ).
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
