BOM 浏览器对象模型_渲染引擎_JavaScript 引擎_网页加载流程

1. 浏览器核心的两个组成部分

渲染引擎

将网页代码渲染为用户视觉可以感知的平面文档

• 分类：

• Firefox        Gecko 引擎
• Safari        WebKit 引擎
• Chrome        Blink 引擎
• IE        Trident 引擎
• Edge        EdgeHTML 引擎

• 渲染引擎处理网页，通常分成四个阶段

1. 解析代码：HTML 代码解析为 DOM，CSS 代码解析为 CSSOM（CSS Object Model）。
2. 对象合成：将 DOM 和 CSSOM 合成一棵渲染树（render tree）。
3. 布局：计算出渲染树的布局（layout）。   
4. 绘制：将 渲染树 绘制到屏幕

往往第一步还没完成，第二步和第三步就已经开始了。

所以，会看到这种情况：网页的 HTML 代码还没下载完，但浏览器已经显示出内容了

• 渲染树转换为网页布局，称为“布局流”（flow）

• 布局显示到页面的这个过程，称为“绘制”（paint）

重流 和 重绘并不一定一起发生，

重流必然导致重绘，重绘不一定需要重流。

比如

• 改变元素颜色，只会导致重绘，而不会导致重流；
• 改变元素的布局，则会导致重绘和重流
• 作为开发者，应该尽量设法降低重绘的次数和成本

比如，重绘 table 布局 和 flex 布局，开销都会比较大

尽量不要变动高层的 DOM 元素

不要一项一项地改变样式，而是使用 CSS class 一次性改变样式

JavaScript 引擎

主要作用是，读取网页中的 JavaScript 代码，对其处理后运行

• 解释型语言，也就是说，它不需要编译，由解释器实时运行

缺点： 是每次运行都要调用解释器，系统开销较大，运行速度慢于编译型语言

早期解决：

进行一定程度的编译，生成类似字节码（bytecode）的中间代码，以提高运行速度

逐行解释将字节码转为机器码，还是很低效的

• 读取代码，进行词法分析（Lexical analysis），将代码分解成词元（token）。
• 对词元进行语法分析（parsing），将代码整理成“语法树”（syntax tree）。
• 使用“翻译器”（translator），将代码转为字节码（bytecode）。
• 使用“字节码解释器”（bytecode interpreter），将字节码转为机器码。

如今：

采用“即时编译”（Just In Time compiler，缩写 JIT）

即字节码只在运行时编译，用到哪一行就编译哪一行，并且把编译结果缓存（inline cache）。

通常，一个程序被经常用到的，只是其中一小部分代码，有了缓存的编译结果，整个程序的运行速度就会显著提升

• 字节码不能直接运行，而是运行在一个虚拟机（Virtual Machine）之上，一般也把虚拟机称为 JavaScript 引擎
• 并非所有的 JavaScript 虚拟机运行时都有字节码

有的 JavaScript 虚拟机基于源码，即只要有可能，就通过 JIT（just in time

编译器直接把源码编译成机器码运行，省略字节码步骤。

• 常见 JavaScript 虚拟机

• [Chakra](http://en.wikipedia.org/wiki/Chakra_(JScript_engine))(Microsoft Internet Explorer)
• Nitro/JavaScript Core (Safari)
• Carakan (Opera)
• SpiderMonkey (Firefox)
• [V8](http://en.wikipedia.org/wiki/V8_(JavaScript_engine)) (Chrome, Chromium)

2. 一般的网页加载流程

• 浏览器一边下载 HTML 网页，一边开始解析。也就是说，不等到下载完，就开始解析。
• 解析过程中，浏览器发现 <script> 元素，就暂停解析，把网页渲染的控制权转交给 JavaScript 引擎。

原因是 JavaScript 代码可以修改 DOM，所以必须把控制权让给它，否则会导致复杂的线程竞赛的问题。

如果外部脚本加载时间很长（一直无法完成下载），那么浏览器就会一直等待脚本下载完成，造成网页长时间失去响应，浏览器就会呈现“假死”状态，这被称为“阻塞效应”。

• 如果 <script> 元素引用了外部脚本，就下载该脚本再执行，否则就直接执行代码。
• JavaScript 引擎执行完毕，控制权交还渲染引擎，恢复往下解析 HTML 网页

此外，对于来自同一个域名的资源，比如脚本文件、样式表文件、图片文件等，浏览器一般有限制，同时最多下载6～20个资源，

即最多同时打开的 TCP 连接有限制，这是为了防止对服务器造成太大压力。

如果是来自不同域名的资源，就没有这个限制。所以，通常把 静态文件 放在 不同的域名之下，以加快下载速度

2. 解决“阻塞效应” ，而 defer、async 关键字的 <script>，都不应该使用 document.write

<script src="a.js" defer></script>
<script src="b.js" defer></script>

defer 属性 的运行流程如下：

浏览器开始解析 HTML 网页。
解析过程中，发现带有 defer 属性的 <script> 元素。
浏览器继续往下解析 HTML 网页，同时并行下载 <script> 元素加载的外部脚本。
浏览器完成解析 HTML 网页，此时再回过头执行已经下载完成的脚本。

优点：

有了defer属性，浏览器下载脚本文件的时候，不会阻塞页面渲染。

下载的脚本文件在 DOMContentLoaded 事件触发前执行（即刚刚读取完</html>标签），

而且可以保证执行顺序就是它们在页面上出现的顺序。

<script src="a.js" async></script>
<script src="b.js" async></script>

使用另一个进程下载脚本，下载时不会阻塞渲染

浏览器开始解析 HTML 网页。
解析过程中，发现带有 async 属性的 script 标签。
浏览器继续往下解析 HTML 网页，同时并行下载 <script> 标签中的外部脚本。
脚本下载完成，浏览器暂停解析 HTML 网页，开始执行下载的脚本。
脚本执行完毕，浏览器恢复解析 HTML 网页。

一旦采用这个属性，就无法保证脚本的执行顺序。

哪个脚本先下载结束，就先执行那个脚本