浏览器渲染与脚本加载

浏览器内核

Webkit: safari,移动端浏览器

Blink: (Webkit 分支) Chrome,Edge

浏览器内核又称排版引擎(layout engine)、浏览器引擎(browser engine)、页面渲染引擎（rendering engine）

输入网址后浏览的操作

1. link元素不会阻塞dom tree的解析过程，但会阻塞render tree的生成，因为需要domtree和cssom合成render tree，具体取决于浏览器的优化
2. Render tree 和dom tree不是一一对应的关系，因为display：none的元素不会出现在render tree上
3. 渲染树会表示显示哪些节点，但不包含每个节点的尺寸、位置信息
4. 布局确定呈现树中的所有节点的宽高、和位置信息
5. 绘制，把布局阶段的结果转换成屏幕上的实际像素点，对可见部分进行绘制

推荐阅读 浏览器如何工作

回流/重排 （reflow）与 重绘

回流：

🍞 提示

dom元素大小位置等修改后，会重新进行布局（layout）生成新的render tree

• dom结构修改
• 改变了布局，如（width、height、pading等）
• 窗口resize（修改了窗口尺寸）
• 调用getComputedStyle 方法获取尺寸、位置信息（取决于浏览器实现）

重绘

🌅 提示

从render tree重新绘制的成像素点的过程

• 修改背景颜色、文字颜色、边框颜色、样式等不影响布局的属性（不触发layout）

总结

回流的性能消耗比较大，重绘小一点

重绘不一定回流，回流一定会重绘

合成图层 layers

生成图层的时候，某些属性会生成新的图层，从而可以利用GPU硬件加速，提升性能

• position：fixed
• 3D Transform
• video、canvas、iframe元素
• animation 或 transition 设置了opacity或者transform；不会引起回流，性能更高

解析dom的过程，遇到script标签，会阻塞dom tree构建，等待script下载完成后执行（浏览器会做优化，script以前的内容会被渲染）

defer

script标签属性，异步下载

• 不阻塞dom tree构建，异步下载
• 下载完成不会立即执行，而是等dom tree构建完成，DOMContentLoaded事件回调之前执行
• 多个script标签，可以保证执行顺序和书写顺序一致

Async

script标签，也是异步加载

• 完全独立，不阻塞dom tree构建
• 下载完成立即执行
• 不能保证执行顺序

V8引擎代码执行原理

抽象语法树（AST Abstract Syntax Tree）

由blink解析html获得源代码

词法分析： 把代码语句中的语句token化，生成各类token

语法分析： 把上面的token分类，分析语句的作用，对应的语法规则