浏览器的核心是两部分:渲染引擎和 JavaScript 解释器(又称 JavaScript 引擎)。
js脚本加载
浏览器加载 JavaScript 脚本,主要通过<script>元素完成。正常的网页加载流程是这样的。
- 浏览器一边下载 HTML 网页,一边开始解析。也就是说,不等到下载完,就开始解析。
- 解析过程中,浏览器发现 <script>元素,就暂停解析,把网页渲染的控制权转交给 JavaScript 引擎。
- 如果<script>元素引用了外部脚本,就下载该脚本再执行,否则就直接执行代码。
- JavaScript 引擎执行完毕,控制权交还渲染引擎,恢复往下解析 HTML 网页。
如果外部脚本加载时间很长(一直无法完成下载),那么浏览器就会一直等待脚本下载完成,造成网页长时间失去响应,浏览器就会呈现“假死”状态,这被称为“阻塞效应”。
为了避免这种情况,较好的做法是将<script>标签都放在页面底部,而不是头部。这样即使遇到脚本失去响应,网页主体的渲染也已经完成了,用户至少可以看到内容,而不是面对一张空白的页面。如果某些脚本代码非常重要,一定要放在页面头部的话,最好直接将代码写入页面,而不是连接外部脚本文件,这样能缩短加载时间.
此外,对于来自同一个域名的资源,比如脚本文件、样式表文件、图片文件等,浏览器一般有限制,同时最多下载6~20个资源,即最多同时打开的 TCP 连接有限制,这是为了防止对服务器造成太大压力。如果是来自不同域名的资源,就没有这个限制。所以,通常把静态文件放在不同的域名之下,以加快下载速度。
defer属性
为了解决脚本文件下载阻塞网页渲染的问题,一个方法是对<script>元素加入defer属性。它的作用是延迟脚本的执行,等到 DOM 加载生成后,再执行脚本
<script src="a.js" defer></script>
<script src="b.js" defer></script>
defer属性的运行流程如下:
1. 浏览器开始解析 HTML 网页。
2.解析过程中,发现带有defer属性的<script>元素。
3.浏览器继续往下解析 HTML 网页,同时并行下载<script>元素加载的外部脚本。
4.浏览器完成解析 HTML 网页,此时再回过头执行已经下载完成的脚本。
有了defer属性,浏览器下载脚本文件的时候,不会阻塞页面渲染。下载的脚本文件在DOMContentLoaded事件触发前执行(即刚刚读取完标签),而且可以保证执行顺序就是它们在页面上出现的顺序。
async属性
解决“阻塞效应”的另一个方法是对<script>元素加入async属性
<script src="a.js" async></script>
<script src="b.js" async></script>
async属性的作用是,使用另一个进程下载脚本,下载时不会阻塞渲染。
1.浏览器开始解析 HTML 网页。
2.解析过程中,发现带有async属性的script标签。
3.浏览器继续往下解析 HTML 网页,同时并行下载<script>标签中的外部脚本。
4.脚本下载完成,浏览器暂停解析 HTML 网页,开始执行下载的脚本。
5.脚本执行完毕,浏览器恢复解析 HTML 网页。
async属性可以保证脚本下载的同时,浏览器继续渲染。需要注意的是,一旦采用这个属性,就无法保证脚本的执行顺序。哪个脚本先下载结束,就先执行那个脚本。另外,使用async属性的脚本文件里面的代码,不应该使用document.write方法
defer属性和async属性到底应该使用哪一个?
一般来说,如果脚本之间没有依赖关系,就使用async属性,如果脚本之间有依赖关系,就使用defer属性。如果同时使用async和defer属性,后者不起作用,浏览器行为由async属性决定。
加载使用的协议
如果不指定协议,浏览器默认采用 HTTP 协议下载。
<script src="example.js"></script>
上面的example.js默认就是采用 HTTP 协议下载,如果要采用 HTTPS 协议下载,必需写明。
<script src="https://example.js"></script>
但是有时我们会希望,根据页面本身的协议来决定加载协议,这时可以采用下面的写法。
<script src="//example.js"></script>
转载: https://wangdoc.com/javascript/bom/engine.html#%E5%B7%A5%E4%BD%9C%E5%8E%9F%E7%90%86