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

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

作者：互联网

浏览器从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