JavaScript高级 网页的解析
一、网页的解析过程
解析一
HTML解析过程
- 因为默认情况下服务器会给浏览器返回
index.html
文件,所以解析html是所有步骤的开始。 - 解析html,会构建
DOM Tree
。
解析二
生成CSS规则
- 在解析的过程中,遇到css的link元素,会由浏览器负责下载对应的css文件。注意:下载css文件不会影响DOM的解析。
- 浏览器下载完css文件之后,就会对css文件进行解析,解析出对应的规则树。称之为
CSSOM
(CSS Object Model, css对象模型)。
解析三
构建Render Tree
当有了 DOM Tree 和 CSSOM Tree,就可以两个结合来构建Render Tree
。
注意:
- link元素不会阻塞DOM Tree的构建过程,但是会阻塞Render Tree的构建过程。因为Render Tree在构建时,需要对应的CSSOM Tree。
- Render Tree 和DOM Tree并不是一一对应的关系,比如对于display为none的元素,压根不会出现在Render Tree中。
解析四
布局和绘制
第四步是在Render Tree上运行布局(Layout)以计算每个节点的几何体
- Render Tree会表示显示哪些节点以及其他样式,但是不表示每个节点的尺寸和信息等位置
- 布局是确定Render Tree中所有节点的宽度、高度、位置等信息
第五步是将每个节点绘制(Paint)到屏幕上
- 在绘制阶段,浏览器会将布局阶段计算的每个frame转为屏幕上实际的像素点
- 包括将元素的可见部分进行绘制,比如文本、颜色、边框、阴影、替换元素(img)
二、回流和重绘
回流reflow(重排)
- 第一次确定节点的大小和位置,称之为布局(layout)
- 之后对节点的大小、位置修改重新计算称之为回流
什么情况会引起回流:
- DOM结构发生改变(添加新的节点或者移除节点)
- 改变了布局(修改了width、height、padding、font-size等值)
- 窗口resize(修改了窗口的尺寸等)
- 调用getComputedStyle方法获取尺寸、位置信息
重绘repaint
- 第一次渲染内容称之为绘制(paint)
- 之后重新渲染称之为重绘
什么情况会引起重绘:
- 比如修改背景色、文字颜色、边框颜色、样式等
注意:
- 回流一定会引起重绘,所以回流很消耗性能
- 如何在开发者避免回流:
- 修改样式时尽量一次性修改,比如通过cssText、class修改
- 尽量避免频繁操作DOM,可以在一个DocumentFragment或者父元素中将要操作的DOM操作完成,再一次性操作
- 尽量避免通过getComputedStyle获取尺寸、位置等信息
- 对某些元素使用position的absolute或者fixed,并不是不会引起回流,而是开销相对较小,不会对其他元素造成影响
三、特殊解析
composite合成
绘制的过程中,可以将布局后的元素绘制到多个合成图层中,这是浏览器的一种优化手段。
默认情况下,标准流中的内容都是会被绘制到同一个图层(Layer)中的。
而一些特殊的属性,会创建一个新的合成层(CompositingLayer),并且新的图层可以利用GPU来加速绘制。因为每个合成层都是单独渲染的。 _
哪些属性可以生成新的合成层?常见的属性有:
- 3D transforms
- video、canvas、iframe
- opacity 动画转换时
- position:fixed
- will-change:一个实验性的属性,提前告诉浏览器元素可能发生哪些变化
- animation或transition设置了opacity、transform
注意:
分层确实可以提高性能,但是它是以内存管理为代价的,因此不应作为web性能优化策略的一部分过度使用
四、script和页面解析的关系
关系
- 浏览器在解析html的过程中,遇到了script元素是不能继续构建DOM树的
- 它会停止继续构建,首先下载JavaScript代码,并且执行JavaScript的脚本
- 只有等到JavaScript脚本执行结束之后,才会继续解析html,构建DOM树
原因
- 因为JavaScript的作用之一就是操作DOM,并且可以修改DOM
- 如果等到DOM树构建完成并且渲染在执行JavaScript,会造成严重回流和重绘,影响页面的性能
- 所以会在遇到script元素时,优先下载和执行JavaScript代码,再继续构建DOM树
这个问题也往往会带来新的问题,特别是现代页面开发中
- 在目前的开发模式中(比如vue,react),脚本往往比html页面更重,处理时间需要更长
- 所以会造成页面的解析阻塞,在脚本下载、执行完成之前,用户在界面上什么都看不到
为了解决这个问题,script元素提供了两个属性:defer和async
defer属性
defer属性告诉浏览器不要等待脚本下载,而是继续解析html,构建DOM Tree
- 脚本会有浏览器来进行下载,但是不会阻塞DOM Tree的构建过程
- 如果脚本提前下载好了,它会等待DOM Tree构建完成,在DOMContentLoaded(内容加载完毕)事件之前先执行defer中的代码
- 多个defer脚本是可以保证正确的顺序执行的
- defer可以提高页面的性能,并且推荐放到head元素中
- 注意defer仅适用于外部脚本,对script默认内容会被忽略
async属性
async与defer有些类似,它也能够让脚本不阻塞页面
async是让一个脚本完全独立的
- 浏览器不会因asyn脚本而阻塞
- async脚本不能保证顺序,它是独立下载、独立运行、不会等待其他脚本
- anync不能保证在DOMContentLoaded之前或者之后执行
defer和async怎么用
- defer通常用于需要在文档解析后操作DOM的JavaScript代码,并且对多个script文件有顺序要求
- async通常用于独立的脚本,对其他脚本,甚至DOM没有依赖
- 原文作者:Gmi_61
- 原文链接:https://www.huangzhishou.com/post/JavaScript%E9%AB%98%E7%BA%A7-%E7%BD%91%E9%A1%B5%E7%9A%84%E8%A7%A3%E6%9E%90.html
- 版权声明:本作品采用知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议进行许可,非商业转载请注明出处(作者,原文链接),商业转载请联系作者获得授权。