HTML parsing principles

Standard Web Front-end engineers need to know ◎Rendering/repainting principles of browsers (or corresponding players)

I have to work harder. I am not very clear about what I really said. I just wrote down G, but there were not many results. If I found one, I wrote it down...

The following blogs are from handawei-javaeye:
Web pages run in various browsers, the speed at which browsers load and render pages directly affects user experience
simply put, page rendering is the process in which the browser displays the HTML Code in the browser window according to the CSS-defined rules. Let's take a rough 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 tag contains a tag that references an external CSS file.
3. the browser sends a CSS file request again, and the server returns the CSS file.
4. the browser continues to load the part of the HTML code, and the CSS file is ready to render the page.
5. 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;
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

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 such a group of people in the world --Page reconstruction EngineerIt is very inconspicuous at ordinary times, and it helps visual designers cut pictures and change words. In fact, they have done a lot of practical work in the back.

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.Reflow is almost unavoidable. Some popular effects on the interface, such as the folding and expansion of tree directories (essentially the display and hiding of elements), will cause the Reflow of the browser. Move the mouse over, click ...... As long as these actions cause changes in attributes such as the placeholder area, positioning method, and margin of some elements on the page, they will cause internal, surrounding, and even whole page re-rendering. Generally, we cannot predict which part of the Code the browser will reflow. They affect each other.

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 ).