前端浏览器渲染的5大步骤分别是什么

小编给大家分享一下前端浏览器渲染的5大步骤分别是什么，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

创新互联建站自成立以来，一直致力于为企业提供从网站策划、网站设计、成都网站设计、成都网站制作、电子商务、网站推广、网站优化到为企业提供个性化软件开发等基于互联网的全面整合营销服务。公司拥有丰富的网站建设和互联网应用系统开发管理经验、成熟的应用系统解决方案、优秀的网站开发工程师团队及专业的网站设计师团队。

浏览器渲染一共有五步

• 处理 HTML 并构建 DOM 树

• 处理 CSS构建 CSSOM 树

• 将 DOM 与 CSSOM 合并成一个渲染树

• 根据渲染树来布局，计算每个节点的位置

• 调用 GPU 绘制，合成图层，显示在屏幕上

第四步和第五步是最耗时的部分，这两步合起来，就是我们通常所说的渲染

重绘和回流是渲染步骤中的一小节，但是这两个步骤对于性能影响很大

重绘（Repaint）

重绘是当节点需要更改外观而不会影响布局的，比如改变 color 就叫称为重绘。

常见的引起重绘的属性:

color
border-style
visibility
background
text-decoration
outline
box-shadow

回流（Reflow）

回流是布局或者几何属性需要改变就称为回流。

回流必定会发生重绘，重绘不一定会引发回流。回流所需的成本比重绘高的多，改变深层次的节点很可能导致父节点的一系列回流

常见引起回流属性和方法:

添加或者删除可见的DOM元素；
元素尺寸改变——边距、填充、边框、宽度和高度
内容变化，比如用户在input框中输入文字
浏览器窗口尺寸改变——resize事件发生时
计算 offsetWidth 和 offsetHeight 属性
设置 style 属性的值

回流影响的范围

全局范围：从根节点html开始对整个渲染树进行重新布局。
局部范围：对渲染树的某部分或某一个渲染对象进行重新布局

以上是“前端浏览器渲染的5大步骤分别是什么”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！