其他分享
首页 > 其他分享> > 浏览器是如何渲染页面的?

浏览器是如何渲染页面的?

作者:互联网

浏览器从HTTP服务器获取html文档,到呈现页面给用户,经过以下步骤

1、解析文档构建dom树

  • HTML/XHTML/SVG:解析这三种文件后,会生成DOM树(DOM Tree)
  • CSS:解析样式表,生成CSS规则树(CSS Rule Tree)
  • JavaScript:解析脚本,通过DOM API和CSSOM API操作DOM Tree和CSS Rule Tree,与用户进行交互

2、构建渲染树

解析文档完成后,浏览器引擎会将 CSS Rule Tree 附着到DOM Tree 上,并根据DOM Tree 和 CSS Rule Tree构造 Rendering Tree(渲染树)。此处需要注意:

  • Render Tree和DOM Tree的区别在于,类似Head或display:node之类的东西不会放在渲染树中; 将CSS Rule
  • Tree匹配到DOM Tree需要解析CSS的选择器,为了提高该过程的性能,DOM树应该尽量小,CSS Selector应该尽量使用id和class,避免过度层叠。

3、布局与绘制渲染树

解析position, overflow, z-index等等属性,计算每一个渲染树节点的位置和大小,此过程被称为reflow。最后调用操作系统的Native GUI API完成绘制(repain)。

脚本和样式文件对页面渲染的影响

浏览器从服务器获取文档并从上到下进行解析,在脚本文件标签不包含defer和async属性的情况下,会按照如下规则执行文档内容:

  • 解析html文档,遇到HTML标签时,构建DOM树
  • 在构建DOM的过程中,如果遇到外联的样式声明或脚本声明,则暂停文档解析,创建新的网络连接,开始下载样式文件和脚本文件
  • 样式文件下载完成后,构建CSS Rule DOM,脚本文件下载完成后,解释并立即执行。
  • 构建DOM的同时,结合CSS规则树完成页面渲染。
  • 如果DOM树先于CSS规则树构建完成,则在CSS规则树构建完成后,页面会发生一次重绘,将新构建的CSS规则应用于渲染树。

CSS对页面渲染的影响

前端页面渲染时会根据DOM结构生成一个DOM树,然后加上CSS样式生成渲染树。
如果CSS文件放在<head>标签中,则CSS Rule Tree会先于DOM树完成构建,之后浏览器就可以边构建DOM树边完成渲染;
反之,CSS文件放在所有页面标签之后,比如<body/>之前,那么当DOM树构建完成了,渲染树才构建,浏览器不得不再重新渲染整个页面,这样造成了资源的浪费。而且页面还可能会出现闪跳的感觉,或者白屏或者布局混乱或者样式很丑,直到CSS加载完成,页面重绘才能恢复正常。
因此,一般来讲,css标签应放在<head>标签之间。但如果css文件较大,会让首页白屏时间更长,所以并不是说把css都放顶部是一个完美的方法。权衡利弊,应该把必须的css(js)放顶部,把不那么重要的css(js)放底部。

回流和重绘

reflow(回流)

DOM结构中的各个元素都有自己的盒子模型,浏览器根据各样式计算元素的尺寸和位置,构建渲染树的过程称之为reflow。当渲染树节点的尺寸,布局,隐藏属性发生改变时,会触发reflow操作,重新构建Render Tree。每个页面在第一次加载的时候,会发生一次回流。
完成回流后,浏览器会重新绘制受影响的部分到屏幕中,因此,回流必定会导致重绘。

repain(重绘)

当各种盒子的位置、大小以及其他属性,例如颜色、字体大小等都确定下来后,浏览器便把这些元素都按照各自的特性进行绘制,于是页面的内容出现了,这个过程称之为repaint。

会触发reflow的操作

Reflow 的成本比 Repaint 的成本高得多。DOM Tree 里的每个结点都会有 reflow 方法,一个结点的 reflow 很有可能导致子结点,甚至父点以及同级结点的 reflow。在一些高性能的电脑上也许还没什么,但是如果 reflow 发生在手机上,那么这个过程是非常痛苦和耗电的。所以,下面这些动作会触发reflow操作,有很大可能会是成本比较高的。

onload事件和DOMContentLoaded事件

DOMContentLoaded事件是当初始HTML文档完全被加载和解析(即所有的DOM完全解析)时触发的,无需要等待样式表,图片,子框架完成加载。
而onload事件要等页面所有元素,包括图片以及脚本等全部加载完成才触发,因此它比DOMContentLoaded要更晚执行。
在页面的图片很多,网络不好的情况下,从用户访问到onload触发可能需要很长的时间,此时如果在onload中加入许多初始化的动作,必然会影响用户的体验。这时使用DOMContentLoaded事件代替onload事件是更合适的。

标签:浏览器,reflow,DOM,渲染,Tree,CSS,页面
来源: https://blog.csdn.net/weixin_44490057/article/details/121862642