当前位置：网站首页>Browser rendering principle analysis suggestions collection

Browser rendering principle analysis suggestions collection

2022-07-27 19:08:00 【Full stack programmer webmaster】

Hello everyone , I meet you again , I'm the king of the whole stack

Web Pages run in all kinds of browsers , Browser load 、 The speed of rendering a page directly affects the user experience , Page rendering means that the browser will html The code is based on CSS The defined rules are displayed in the browser window . Let's first get a general idea of how browsers work ： 　　1. User input web address （ Suppose it's a html page , And for the first time ）, The browser makes a request to the server , Server return html file ; 　　2. Browser starts loading html Code , Find out <head> There is a... In the label <link> Tag references external CSS file ; 　　3. The browser sends out CSS File request , The server returns this CSS file ; 　　4. The browser continues to load html in <body> Part of the code , also CSS The documents are in hand , You can start rendering the page ; 　　5. The browser found a... In the code <img> The tag quotes a picture , Make a request to the server . The browser will not wait for the picture to download , Instead, continue to render the following code ; 　　6. The server returns the image file , Because the picture takes up a certain area , It affects the arrangement of the following paragraphs , So the browser needs to go back and re render this part of the code ; 　　7. The browser found a line containing Javascript Code <script> label , Run it quickly ; 　　8. Javascript The script executed the statement , It commands the browser to hide one of the code <div> （style.display=”none”）. Cup set , All of a sudden, there is no such element , The browser has to re render this part of the code ; 　　9. Finally, here we are. </html> The arrival of the , The browser is full of tears …… 　　10. wait , It's not over yet. , The user clicks “ Skin peeler ” Button ,Javascript Let the browser change <link> Labeled CSS route ; 　　11. The browser brings together all of you <div><span><ul><li> People ,“ Pack up, guys , I have to go back to ……”, The browser asks the server 　　 Asked for a new CSS file , Re render the page .

Why is the page slow ？ That's because browsers take time 、 Take the effort to render , Especially when it finds that there's a little change in a part that affects the layout , Need to go back To render , Experts call this retreat process reflow.

reflow The problem can be optimized , We can minimize unnecessary reflow. For example, in the example at the beginning <img> Image loading problem , This is actually an avoidable reflow—— Just set the width and height of the picture . In this way, the browser will know the footprint of the image , The position is reserved before loading the image .

in addition , There is a sum reflow Terms that look similar ：repaint, It is called redrawing in Chinese . If you just change the background color of an element 、 writing Word color 、 Border color and so on do not affect the properties of its surrounding or internal layout , Will only cause the browser repaint.repaint It's obviously faster than reflow（ stay IE I need to change my words ,reflow than repaint More slowly ）.

Publisher ： Full stack programmer stack length , Reprint please indicate the source ：https://javaforall.cn/120702.html Link to the original text ：https://javaforall.cn

原网站

版权声明
本文为[Full stack programmer webmaster]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/199/202207151435274054.html

边栏推荐

猜你喜欢

随机推荐