假设游览器已经获取到了html文件。
一、基本流程
解析html以构建dom树 ->
构建render树 ->
布局render树 ->
绘制render树
所以,浏览器会解析三个东西:
(1) HTML/SVG/XHTML
,解析这三种文件会产生一个 DOM Tree
。
(2) CSS
,解析 CSS
会产生 CSS
规则树。
(3) js脚本,主要是通过 DOM API 和 CSSOM API 来操作 DOM Tree 和 CSS Rule Tree.
二、渲染过程
当浏览器获得一个html文件时,会“自上而下”加载,并在加载过程中进行解析渲染
解析:
HTML
解析成一个DOM
树,DOM
树的构建过程是一个深度遍历过程:当前节点的所有子节点都构建好后才会去构建当前节点的下一个兄弟节点。CSS
解析成 CSS Rule Tree
。DOM
树和CSSOM
来构造Rendering Tree
。注意:Rendering Tree
渲染树并不等同于 DOM 树,因为一些像 Header
或 display:none
的东西就没必要放在渲染树中了。再下一步就是绘制,即遍历render树,并使用UI后端层绘制每个节点。
image
重点:上述这个过程是逐步完成的,为了更好的用户体验,渲染引擎将会尽可能早的将内容呈现到屏幕上,并不会等到所有的html都解析完成之后再去构建和布局render树。它是解析完一部分内容就显示一部分内容,同时,可能还在通过网络下载其余内容。
三、渲染过程的概念
Reflow要比Repaint更花费时间,也就更影响性能。要尽量避免过多的Reflow。
reflow的原因:
所以再优化页面渲染性能的时候,减少 reflow/repaint就是基本出发点
js的加载和执行的特点:
链接:https://www.jianshu.com/p/fd3493345f8f 来源:简书