理解同步,异步和延迟脚本

理解同步,异步和延迟脚本

浏览器加载JavaScript脚本,主要通过<script>标签完成。正常的网页加载流程是这样的。

1.浏览器一边下载HTML网页,一边开始解析
2.解析过程中,发现<script>标签
3.暂停解析,网页渲染的控制权转交给JavaScript引擎
4.如果<script>标签引用了外部脚本,就下载该脚本,否则就直接执行
5.执行完毕,控制权交还渲染引擎,恢复往下解析HTML网页

加载外部脚本时,浏览器会暂停页面渲染,等待脚本下载并执行完成后,再继续渲染。原因是JavaScript可以修改DOM(比如使用document.write方法),所以必须把控制权让给它

阻塞效应(假死状态)

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

为了避免这种情况,较好的做法是将<script>标签都放在页面底部,而不是头部。

defer属性

为了解决脚本文件下载阻塞网页渲染的问题,一个方法是加入defer属性。

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

上面代码中,只有等到DOM加载完成后,才会执行a.js和b.js。

defer的运行流程如下。

浏览器开始解析HTML网页
解析过程中,发现带有defer属性的script标签
浏览器继续往下解析HTML网页,同时并行下载script标签中的外部脚本
浏览器完成解析HTML网页,此时再执行下载的脚本

有了defer属性,浏览器下载脚本文件的时候,不会阻塞页面渲染。下载的脚本文件在DOMContentLoaded事件触发前执行(即刚刚读取完</html>标签),而且可以保证执行顺序就是它们在页面上出现的顺序。

async属性

解决“阻塞效应”的另一个方法是加入async属性。

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

async属性的作用是,使用另一个进程下载脚本,下载时不会阻塞渲染。

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

async属性可以保证脚本下载的同时,浏览器继续渲染。需要注意的是,一旦采用这个属性,就无法保证脚本的执行顺序。哪个脚本先下载结束,就先执行那个脚本。如果同时使用async和defer属性,后者不起作用,浏览器行为由async属性决定。

原文:浏览器环境概述

posted @ 2017-01-23 03:39  叶子陪你玩  阅读(1354)  评论(0编辑  收藏  举报