浏览器渲染网页的过程

2023-12-20 16:20:38

核心:浏览器软件有渲染引擎

1.先将网页中的标签及标签之间的布局关系渲染成DOM树

2.将网页中的样式单独渲染成样式规则

3.根据DOM树和样式规则,生成渲染树(Render Tree)

4.根据生成的渲染树,得到节点的元素的位置(回流/重排)

5.根据生成的渲染树,将整个页面的标签样式部分进行渲染显示(文字颜色、背景颜色……)重绘

6.最后出现最终的页面效果

回流(重排):如果页面中标签的结构、大小、位置、布局等发生了改变,那么浏览器就会重新渲染部分或全部文档,这个过程称为回流。

会导致回流的操作:

? ? ? ? 1.页面的首次刷新

? ? ? ? 2.浏览器的窗口大小发生变化

? ? ? ? 3.元素的大小或位置发生改变

? ? ? ? 4.改变字体的大小

? ? ? ? 5.内容的变化(如:图片的大小,input框的输入)

? ? ? ? 6.激活css伪类

? ? ? ? 7.脚本操作DOM(添加或者删除课件的DOM元素)

重绘:如果页面中的节点(元素)的样式的改变并不影响它在文档流中的位置和文档布局时(如:与颜色相关的部分发生了改变),那么浏览器就会进行重绘

注意:重绘不一定引起回流,但回流一起引起重绘。

文章来源:https://blog.csdn.net/weixin_59017683/article/details/135106716
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。