深入浅出浏览器渲染原理

  • 时间:
  • 浏览:1

后面 这段HTML会解析成原来:

defer 属性表示延迟执行引入的 JavaScript,即这段 JavaScript 加载时 HTML 并未停止解析,你一种生活个 过程是并行的。整个 document 解析完毕且 defer-script 也加载完成事先(这两件事情的顺序无关),会执行所有由 defer-script 加载的 JavaScript 代码,或者触发 DOMContentLoaded 事件。

DOM会捕获页面的内容,但浏览器还越来越知道页面如何展示,刚刚 我越来越构建CSSOM。

事实上,构建DOM的过程中,都有等所有Token都转换完成后再去生成节点对象,刚刚 我一边生成Token一边消耗Token来生成节点对象。换句话说,每个Token被生成后,会立刻消耗你一种生活Token创建出节点对象。注意:饱含刚开始英文标签标识的Token不必创建节点对象。

肯能浏览器的渲染机制不同,在渲染页面都有另好哪几个 劲出现一种生活 常见的不良大问題----白屏大问題和FOUS(无样式内容闪烁)

以上亲戚亲戚当当我们 歌词 全部介绍了浏览器工作流程中的重要步骤,接下来亲戚亲戚当当我们 歌词 讨论有哪几个相关的大问題:

在你一种生活过程中,浏览器会选者下每另好哪几个 节点的样式到底是哪有哪几个,或者你一种生活过程真是 是很消耗资源的。肯能样式我就自行设置给某个节点,也还还可以 通过继承获得。在你一种生活过程中,浏览器得递归 CSSOM 树,或者选者具体的元素到底是哪有哪几个样式。

JS文件不刚刚 我阻塞DOM的构建,它会意味着CSSOM也阻塞DOM的构建。

原来DOM和CSSOM的构建是互不影响,井水不犯河水,或者一旦引入了JavaScript,CSSOM也刚开始英文阻塞DOM的构建,越来越CSSOM构建完毕后,DOM再恢复DOM构建。

浏览器工作流程大体分为如下三帕累托图:

这是哪有哪几个情况?

注意:CSS匹配HTML元素是另好哪几个 相当多样化和有性能大问題的事情。刚刚 我,DOM树要小,CSS尽量用id和class,千万太大过渡层叠下去

接下来亲戚亲戚当当我们 歌词 举个例子,假设有段HTML文本:

回流必定会处于重绘,重绘不都有引发回流。重绘和回流会在亲戚亲戚当当我们 歌词 设置节点样式时频繁另好哪几个 劲出现,同去也会很大程度上影响性能。回流所需的成本比重绘高的多,改变父节点里的子节点很肯能会意味着父节点的一系列回流。

在网络中传输的内容真是 都有 0 和 1 哪有哪几个字节数据。当浏览器接收到哪有哪几个字节数据事先,它会将哪有哪几个字节数据转换为字符串,也刚刚 我亲戚亲戚当当我们 歌词 写的代码。

在你一种生活过程中,都有简单的将两者合并就行了。渲染树只会包括越来越显示的节点和哪有哪几个节点的样式信息,肯能某个节点是 display: none 的,越来越就不必在渲染树中显示。

肯能 DOM 是属于渲染引擎中的东西,而 JS 又是 JS 引擎中的东西。当亲戚亲戚当当我们 歌词 通过 JS 操作 DOM 的事先,真是 你一种生活操作涉及到了另好哪几个 应用tcp连接之间的通信,越来越势必会带来其他性能上的损耗。操作 DOM 次数一多,也就等同于另好哪几个 劲在进行应用tcp连接之间的通信,或者操作 DOM 肯能都有带来重绘回流的情况,刚刚 我也就意味着了性能上的大问題。

FOUC:肯能浏览器渲染机制(比如firefox),再CSS加载事先,先呈现了HTML,就会意味着展示出无样式内容,或者样式另好哪几个 劲呈现的大问題;

白屏:其他浏览器渲染机制(比如chrome)要先构建DOM树和CSSOM树,构建完成后再进行渲染,肯能CSS帕累托图中放HTML尾部,肯能CSS未加载完成,浏览器迟迟未渲染,从而意味着白屏;也肯能是把js文件中放头部,脚本会阻塞后面 内容的呈现,脚本会阻塞其后组件的下载,另好哪几个 劲出现白屏大问題。

浏览器会遵守一套步骤将HTML 文件转换为 DOM 树。宏观上,还还可以 分为有哪几个步骤:

事实上,这刚刚 我Token要标识“起始标签”和“刚开始英文标签”等标识的作用。之类于“title”Token的起始标签和刚开始英文标签之间的节点肯定是属于“head”的子节点。

defer 与相比普通 script,有两点区别:**载入 JavaScript 文件时不阻塞 HTML 的解析,执行阶段被中放 HTML 标签解析完成事先。

转载时请注明作者Fundebug以及本文地址:

https://blog.fundebug.com/2019/01/03/understand-browser-rendering/

async 属性表示异步执行引入的 JavaScript,与 defer 的区别在于,肯能肯能加载好,就会刚开始英文执行——无论此刻是 HTML 解析阶段还是 DOMContentLoaded 触发事先。越来越注意的是,你一种生活法律法律依据加载的 JavaScript 依然会阻塞 load 事件。换句话说,async-script 肯能在 DOMContentLoaded 触发事先或事先执行,但一定在 load 触发事先执行。

Fundebug专注于JavaScript、微信小应用tcp连接、微信小游戏、支付宝小应用tcp连接、React Native、Node.js和Java线上应用实时BUG监控。 自从2016年双十一正式上线,Fundebug累计防止了9亿+错误事件,付费客户有Google、380、金山软件、百姓网等众多品牌企业。欢迎亲戚亲戚当当我们 歌词 [免费试用]

任何会改变元素几何信息(元素的位置和尺寸大小)的操作,都有触发回流,

亲戚亲戚当当我们 歌词 知道,当网页生成的事先,最少 会渲染一次。在用户访问的过程中,都有不断重新渲染。重新渲染会重复上图中的第四步(回流)+第五步(重绘)肯能越来越第3个步(重绘)。

下面例子中,触发了有哪几个回流和重绘?

越来越 defer 或 async,浏览器会立即加载并执行指定的脚本,也刚刚 我说不等待歌曲后续载入的文档元素,读到就加载并执行。

如需获取思维导图请猛戳GitHub博客

接下来亲戚亲戚当当我们 歌词 针对这其中所经历的重要步骤,一一全部阐述。

JavaScript的加载、解析与执行会阻塞DOM的构建,也刚刚 我说,在构建DOM时,HTML解析器若遇到了JavaScript,越来越它会暂停构建DOM,将控制权移交给JavaScript引擎,等JavaScript引擎运行完毕,浏览器再从中断的地方恢复DOM构建。

构建CSSOM的过程与构建DOM的过程非常之类于,当浏览器接收到一段CSS,浏览器首好难做的是识别出Token,或者构建节点并生成CSSOM。

浏览器的内核是指支持浏览器运行的最核心的应用tcp连接,分为另好哪几个 帕累托图的,一是渲染引擎,原来是JS引擎。渲染引擎在不同的浏览器中也都有都相同的。比如在 Firefox 中叫做 Gecko,在 Chrome 和 Safari 中都有基于 WebKit 开发的。本文亲戚亲戚当当我们 歌词 主要介绍关于 WebKit 的这帕累托图渲染引擎内容以及有哪几个相关的大问題。

布局完成后,浏览器会立即发出“Paint Setup”和“Paint”事件,将渲染树转加在屏幕上的像素。

这是肯能JavaScript不刚刚 我还还可以 改DOM,它还还还可以 更改样式,也刚刚 我它还还可以 更改CSSOM。前面亲戚亲戚当当我们 歌词 介绍,不全部的CSSOM是无法使用的,但JavaScript中想访问CSSOM并更改它,越来越在执行JavaScript时,必越来越能拿到全部的CSSOM。刚刚 我就意味着了另好哪几个 大问題,肯能浏览器尚未完成CSSOM的下载和构建,而亲戚亲戚当当我们 歌词 却想在此时运行脚本,越来越浏览器将延迟脚本执行和DOM构建,直至其完成CSSOM的下载和构建。也刚刚 我说,在你一种生活情况下,浏览器会先下载和构建CSSOM,或者再执行JavaScript,最后在继续构建DOM

其中暗蓝色线代表JavaScript加载;红色线代表JavaScript执行;绿色线代表 HTML 解析。

接下来亲戚亲戚当当我们 歌词 对比下 defer 和 async 属性的区别:

当亲戚亲戚当当我们 歌词 生成 DOM 树和 CSSOM 树事先,就越来越将这两棵树组合为渲染树。

在加载多个JS脚本的事先,async是无顺序的加载,而defer是有顺序的加载。**

当浏览器生成渲染树事先,就会根据渲染树来进行布局(也还还可以 叫做回流)。你一种生活阶段浏览器要做的事情是要弄清楚各个节点在页面中的确切位置和大小。通常你一种生活行为也被称为“自动重排”。

布局流程的输出是另好哪几个 “盒模型”,它会精确地捕获每个元素在视口内的确切位置和尺寸,所有相对测量值都将转换为屏幕上的绝对像素。

这事先你都有有大问題,节点与节点之间的关系如何维护?

也刚刚 我说,肯能你想首屏渲染的太快了 了 ,就越不应该在首屏就加载 JS 文件,这也是都建议将 script 标签中放 body 标签底部的意味着。当然在当下,并都有说 script 标签越来越中放底部,肯能我就给 script 标签加在 defer 肯能 async 属性(下文会介绍这两者的区别)。

上图给出了节点之间的关系,之类于:“Hello”Token处于“title”刚开始英文标签与“title”刚开始英文标签之间,表明“Hello”Token是“title”Token的子节点。同理“title”Token是“head”Token的子节点。