美文网首页
浏览器渲染机制

浏览器渲染机制

作者: Marting424 | 来源:发表于2021-09-02 11:25 被阅读0次

为深入了解vue mvvm模式的优劣  现从浏览器渲染机制开始从头梳理

首先,浏览器将域名通过网络通信从服务器上拿到html文件,接下来简介拿到html文件后浏览器的渲染流程。

1、根据html构建DOM树和CSSOM树,在构建期间如果遇到JS,则阻塞构建,优先加载JS,之后继续构建。

2、浏览器引擎渲染构建好的DOM树和CSSOM树

3、根据后续的操作,页面进行重绘(repaint)以及重排(reflow)

接下来详细介绍个流程

一、构建DOM树

HTML 文档中的所有内容皆是节点,各节点之间拥有层级关系,如父子关系、兄弟关系等,彼此相连,构成DOM树。

最常见的几种节点有:文档节点、元素节点、文本节点、属性节点、注释节点

DOM节点树中节点与HTML文档中内容一一对应,DOM树构建过程:读取html文档,将字节转换成字符,确定tokens(标签),再将tokens转换成节点,以节点构建 DOM 树。如下图所示:

二、构建CSSOM树

CSS文档中,所有元素皆是节点,与HTML文件中的标签节点一一对应。CSS中各节点之间同样拥有层级关系,如父子关系、兄弟关系等,彼此相连,构成CSSOM树。

在构建DOM树的过程中,在 HTML 文档的 head 标签中遇到 link 标签,该标签引用了一个外部CSS样式表。由于预见到需要利用该CSS资源来渲染页面,浏览器会立即发出对该CSS资源的请求,并进行CSSDOM树的构建。

CSSOM树构建过程与DOM树构建流程一致:读取CSS文档,将字节转换成字符,确定tokens(标签),再将tokens转换成节点,以节点构建 CSSOM 树。如下图所示:

.CSS文件,又名层叠样式表。当CSSOM树生成节点时,每一个节点首先会继承其父节点的所有样式,层叠覆盖,然后再以"向下级联"的规则,为该节点应用更具体的样式,递归生成CSSOM树。譬如,上右图中第二层的p节点,有父节点body,因此该p将继承body节点的样式:"font-size: 16px;"。然后再应用该p节点自身的样式:"font-weight: bold;"。所以最终该p节点的样式为:"font-size: 16px;font-weight: bold;"。

三,JS加载

若在构建DOM树的过程中,当 HTML 解析器遇到一个 script 标记时,即遇到了js,将立即阻塞DOM树的构建,将控制权移交给 JavaScript 引擎,等到 JavaScript 引擎运行完毕,浏览器才会从中断的地方恢复DOM树的构建。

其根本原因在于,JS会对DOM节点进行操作,浏览器无法预测未来的DOM节点的具体内容,为了防止无效操作,节省资源,只能阻塞DOM树的构建。譬如,若不阻塞DOM树的构建,若JS删除了某个DOM节点A,那么浏览器为构建此节点A花费的资源就是无效的。

若在HTML头部加载JS文件,由于JS阻塞,会推迟页面的首绘。为了加快页面渲染,一般将JS文件放到HTML底部进行加载,或是对JS文件执行async或defer加载。

四、构建渲染树

渲染树(Render Tree)由DOM树、CSSOM树合并而成,但并不是必须等DOM树及CSSOM树加载完成后才开始合并构建渲染树。三者的构建并无先后条件,亦非完全独立,而是会有交叉,并行构建。因此会形成一边加载,一边解析,一边渲染的工作现象。

构建渲染树,根据渲染树计算每个可见元素的布局,并输出到绘制流程,将像素渲染到屏幕上。

五、重绘(repaint)

屏幕的一部分要重绘。渲染树节点发生改变,但不影响该节点在页面当中的空间位置及大小。譬如某个div标签节点的背景颜色、字体颜色等等发生改变,但是该div标签节点的宽、高、内外边距并不发生变化,此时触发浏览器重绘(repaint)。像visibility: hidden;

六、重排(reflow)

也有称回流,当渲染树节点发生改变,影响了节点的几何属性(如宽、高、内边距、外边距、或是float、position、display:none;等等),导致节点位置发生变化,此时触发浏览器重排(reflow),需要重新生成渲染树。譬如JS为某个p标签节点添加新的样式:"display:none;"。导致该p标签被隐藏起来,该p标签之后的所有节点位置都会发生改变。此时浏览器需要重新生成渲染树,重新布局,即重排(reflow)。

注意:重排必将引起重绘,而重绘不一定会引起重排。

当页面布局和几何属性改变时就需要重排。下述情况会发生浏览器重排:

1、添加或者删除可见的DOM元素;

2、元素位置改变——display、float、position、overflow等等;

3、元素尺寸改变——边距、填充、边框、宽度和高度

4、内容改变——比如文本改变或者图片大小改变而引起的计算值宽度和高度改变;

5、页面渲染初始化;

6、浏览器窗口尺寸改变——resize事件发生时;

七、后续:如何减少或避免重绘或者重排(浏览器性能优化)

Reflow 的成本比 Repaint 的成本高得多的多。一个节点的 Reflow 很有可能导致子节点,甚至父节点以及兄弟节点的 Reflow 。在一些高性能的电脑上也许还没什么,但是如果 Reflow 发生在手机上,那么这个过程是延慢加载和耗电的。----浏览器的渲染原理简介

1. 直接改变className,如果动态改变样式,则使用cssText(考虑没有优化的浏览器);

2. 让要操作的元素进行”离线处理”,处理完后一起更新;

a) 使用DocumentFragment进行缓存操作,引发一次回流和重绘;

b) 使用display:none技术,只引发两次回流和重绘;

c) 使用cloneNode(true or false) 和 replaceChild 技术,引发一次回流和重绘;

3.不要经常访问会引起浏览器flush队列的属性,如果你确实要访问,利用缓存;

4. 让元素脱离动画流,减少回流的Render Tree的规模;

相关文章

  • 略知一二之浏览器渲染原理

    浏览器渲染原理 推荐相关阅读文章 浏览器页面渲染机制,你真的弄懂了吗? 关键渲染路径 深入浅出浏览器渲染原理 [译...

  • 前端渲染机制及重绘/回流

    渲染机制 渲染步骤 浏览器的渲染机制一般分为以下几个步骤: 1. 处理 HTML 并构建 DOM 树。2. 处...

  • 浏览器原理相关视频课程

    大话浏览器渲染原理浏览器渲染原理和打开网页机制HTTPS 网络协议原理解析从零开始,彻底掌握浏览器渲染原理深入V8...

  • 重绘(redraw或repaint),重排(reflow)

    浏览器运行机制图: 浏览器的运行机制:layout:布局; 1、构建DOM树(parse):渲染引擎解析HTML文...

  • 网页的渲染机制

    网页的渲染机制 参考文章:ScriptJava——了解HTML页面的渲染过程浏览器加载,解析,渲染的过程HTML渲...

  • 网页的渲染机制

    网页的渲染机制 参考文章:ScriptJava——了解HTML页面的渲染过程浏览器加载,解析,渲染的过程HTML渲...

  • 2020-07-23 18课 CSS动画+浏览器渲染原理

    浏览器渲染原理 渲染机制 浏览器加载HTML代码后解析HTML代码来构建HTML树(DOM) 加载CSS代码后解析...

  • 重绘和重排

    参考 浏览器渲染机制 浏览器采用流式布局模型(Flow Based Layout)。 浏览器会把 HTML 解析成...

  • 网页渲染机制

    网页通过浏览器展示在我们面前,说网页的渲染机制就是说浏览器怎么渲染页面的。市面上浏览器主流浏览器chrome,fi...

  • 重绘(redraw或repaint),重排(reflow)

    浏览器运行机制图: 浏览器的运行机制: 1、构建DOM树(parse):渲染引擎解析HTML文档,首先将标签转换成...

网友评论

      本文标题:浏览器渲染机制

      本文链接:https://www.haomeiwen.com/subject/tzmqwltx.html