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 网页。
一旦采用这个属性,就无法保证脚本的执行顺序。
哪个脚本先下载结束,就先执行那个脚本