浏览器的渲染分为五个步骤:
- 处理HTML标记并构建DOM树
- 处理CSS标记并构建 CSSOM树(CSS Object Model)
- 将CSSOM和DOM合并成一个渲染树
- 根据渲染树来布局,以计算每个节点的几何信息
- 将各个节点绘制到屏幕上
这五个步骤不一定一次性顺序完成。如果DOM或者CSSOM被修改,以上过程需要重复执行,这样才能计算出哪些像素需要在屏幕上进行重新渲染。实际页面中,CSS与JavaScript往往会多次修改DOM和CSSOM。
阻塞渲染:
现代浏览器总是并行加载资源。比如,当HTML解析器被脚本阻塞时,解析器虽然会停止构建DOM,但仍会识别该脚本后的资源,并进行预加载。
- 默认情况下,CSS被视为阻塞渲染的资源,这意味着浏览器将不会渲染任何已处理的内容,直至CSSOM构建完毕。
- JavaScript不仅可以读取和修改DOM属性,还可以读取和修改CSSOM属性。
也就是说,存在阻塞的CSS资源时,浏览器会延迟JavaScript的执行和DOM构建。另外:
- 当浏览器遇到一个script标签时,DOM构建将暂停,直至脚本执行完成。
- JavaScript可以查询和修改DOM与CSSOM。
- CSSOM构建时,JavaScript执行将暂停,直至CSSOM就绪。
所以,script标签的位置很重要。实际使用中可以遵循下面的原则:
- CSS优先:引入顺序上,CSS资源优先于JavaScript资源。
- JavaScript应尽量减少影响DOM的构建。