概括
- 无论当前JavaScript代码是内嵌还是在外链文件中,页面的下载和渲染都必须停下来等待脚本执行完成。
- 如果出现了下面的情况:
<p>
<script type="text/javascript">
document.write('test');
</script>
</p>
当浏览器遇到< script>时,当前HTML页面无从获知JavaScript是否会向< p> 标签添加内容,或引入其他元素,或甚至移除该标签。因此此时,浏览器会停止处理页面,先执行JavaScript中的代码,然后再继续解析和渲染页面。同样,如果有src属性加载JavaScript时,浏览器必须先花时间下载外链里的代码,然后解析并执行它。整个过程中,页面渲染和用户交互被完全阻塞了。
脚本位置
HTML4规范指出script标签可以放在head或body里, 并允许出现多次。
以前,web开发者喜欢这么放:
<head>
<script type="text/javascript" src="s1.js"></script>
<script type="text/javascript" src="s2.js"></script>
<script type="text/javascript" src="s3.js"></script>
<link ref="stylesheet" type="css/text" href="style.css">
</head>
html页面,从上往下的执行过程是这样的:
下载s1, 执行s1
下载s2, 执行s2
下载s3,执行s3
下载style
因此,整个下载执行的过程中,用户看到的是一片空白。
从IE8、Firefox3.5、Safari4和chrome2开始允许 并行 下载JavaScript文件。遗憾的是,JavaScript的下载依然会阻碍其他资源的下载,比如样式和图片。虽然JavaScript可以并行下载,但是页面仍然必须等待所有JavaScript代码下载并执行完成后才能继续。
所以推荐将Scirpt脚本放置与body的底部, 这是优化JavaScript的首要规则。
组织脚本
减少script标签数量有助于改善情况。这是因为:
- 浏览器在解析HTML页面的过程中每遇到一个script标签,都会因执行脚本而导致一定的延时。
- HTTP请求会带来额外的开销,所以下载单个100kb比下载5个20kb的文件要更快。
- 通常,一个大的网站通过打包工具或者CDN来实现。
需要特别注意的是,把内嵌script标签放在link后面会导致页面阻塞去等待样式表的下载。这么做是为了确保内嵌脚本在执行时能获得最精确的样式信息。因此,建议不要将内嵌的script标签紧跟在link标签后面。
无阻塞的脚本
减少JavaScript文件的大小并不总是可行,因为下载一个较大的JavaScript文件只产生一次HTTP请求,却会锁死浏览器的一大段时间。为了避免这种情况,需要通过一些特定的技术向页面中逐渐加载JavaScript文件,这样做在某种程度上不会阻塞浏览器。
延迟加载脚本
HTML4定义了defer属性,HTML5定义了async属性。它们的作用差不多,区别是浏览器支持不一样,如果浏览器支持async属性, 那么它会忽略defer属性。
<body>
<script type="text/javascript" async>
console.log('async');
</script>
<script type="text/javascript">
console.log('script');
</script>
<script type="text/javascript" async>
window.onload = function() {
console.log('load');
}
</script>
</body>
如果是上面这样的话,最后输出的顺序是:async, script, load。
但是如果下面的代码:
<script type="text/javascript" src="s1.js" async></script>
<script type="text/javascript" src="s2.js"></script>
<script type="text/javascript" src="s3.js"></script>
// s1
console.log("async");
// s2
console.log("script");
// s3
window.onload = function() {
console.log("load");
};
那么最后输出的顺序可能是async, script, load。也有可能是script, async, load。
因为带有async属性的外链script,它会立即被下载(和其他外链script一起下载),但是不会马上执行,它一定会在onload被调用前执行。
动态脚本元素
也就是通过创建script标签来加载外链script, 此文件当元素添加到页面之后 立即 开始下载。此技术的重点是:无论在何处启动下载,文件的下载和运行都不会阻塞其他页面处理过程。
总结一下:
- 放在body之前
- 减少script标签
- 使用defer/async属性
- 使用动态脚本技术