阅读了《webkit技术内幕》,对浏览器渲染引擎的工作流程有了新的认识。
1.浏览器解析流程
用户访问一个网页浏览器要经过以下两个流程。
(1)加载
- **资源加载器**开启http线程,获取html页面。
- 获取页面之后,交由**html解释器**解析称dom节点,并构建成**dom树**。
- 在构建dom树的时候,如果遇到script标签,则调用**javascript引擎**进行解析。
- 在构建dom树的时候,如果遇到css,图片,音频,则调用**资源加载器**进行资源的下载
- 注:这里面script文件的下载是阻塞dom树生成的,而css,图片,音频文件的下载是和dom树的创建并行的。
从url到构建一棵完整的dom树,就是加载阶段的整个流程。
在dom树构建完毕时,会触发Domcontent事件
在资源全部加载完毕时,会触发onload事件。
(2) 渲染
- css文件下载之后,调用**css解释器**解释css文件,并依赖dom树生成**renderObject树**
- renderObject树再根据网页的层次结构,构建**renderLayer树**和**绘图上下文**
- 最后由绘图上下文绘制最终的图像。
从dom树到renderlayer树就是渲染阶段的整个流程。
加载阶段和渲染阶段有可能重叠,交叉。(我现在举不出例子)
2.例子
用户输入www.baidu.com会经历什么过程捏
- 根据url进行缓存查找IP地址,如果缓存没有,寻找DNS服务器。最终找到url对应的IP地址。
- 调用资源管理器,开启http线程,http GET baidu的网页。传输层三次握手。
- 获取网页之后,交友html解释器解析成DOM树
- 遇到了css资源和图片资源,异步下载
- 遇到script标签,阻塞下载并解析
- 发现js代码改变了dom结构,引起dom树的改变
- dom树构建完毕,开始调用css解析器解析css文件,生成renderobject树
- 根据层次结构生成renderlayer树和绘图上下文。
- 根据绘图上下文调用操作系统的绘制工具绘制网页。
3.重绘和重排
(1)重绘(repaint):
颜色等变化,尺寸没有发生变化
(1)重排(reflow):
尺寸发生了变化。代价昂贵。
浏览器会把这些动作放入一个flush队列,如果重回和重排的次数很多,flush队列一次性操作。
所以为了减少重绘和重排
尽量使用className的更替来进行css改变。
4.为什么script文件最好放在底部,css文件在顶部
script文件阻塞dom树的建立。
如果script放在底部,在dom树建立基本上结束的时候再来加载script文件。
也防止没有dom树,script无法操作dom树。
如果css文件在头部,就先加载css文件喽。更快的解释css文件,声称后面的render树,绘制图形。