延迟脚本的方式

昨晚‘今日头条’笔试题中遇到这道题，今天专门查了一下。

从 IE 8、Firefox 3.5、Safari 4 和 Chrome 2 开始都允许并行下载 JavaScript 文件。

<script>标签在下载外部资源时不会阻塞其他<script>标签。遗憾的是，JavaScript 下载过程仍然会阻塞其他资源的下载，比如样式文件和图片。尽管脚本的下载过程不会互相影响，但页面仍然必须等待所有 JavaScript 代码下载并执行完成才能继续。

实现延迟加载的方式有：

方式一：标签放在底部

将<script>节点放置在</body>之前，这样js脚本会在页面显示出来之后再加载。

方式二：Defer和Async属性

使用script标签的defer和async属性

Defer属性

defer是在html4.0中定义的

html5规范要求脚本按照出现的顺序执行，对应的js文件在页面解析到<script>标签时开始下载，但不会执行，直到DOM加载完成，即onload事件触发前才会执行

当一个带有 defer 属性的 JavaScript 文件下载时，它不会阻塞浏览器的其他进程，因此这类文件可以与其他资源文件一起并行下载。

<script type="text/javascript" defer="defer" src="example.js">
<script type="text/javascript" defer="defer" src="example.js">

缺点：并不是所有浏览器支持该属性

async属性

async是html5新增的属性，IE10和其他浏览器都支持该属性

同defer一样，不会阻塞其余资源的加载，也不会影响页面的加载，但js一旦加载好了就会执行，所以很有可能不是按照原本的顺序来执行

方式三：动态脚本元素

DOM动态创建<script>

var script = document.createElement('script');
script.type = "text/javascript";
script.src = "script.js";
document.getElementByTagName('head')[0].appendChild(script);

可以监听脚本是否加载成功

script.onload = function(){
    alert('script loaded!');
};
/*IE中的监听方式不一样*/
script.onreadystatechange = function(){
    if(script.readyState == 'load' || script.readyState == 'complete'){
        script.onreadystatechange = null;
        alert('script loaded');
    }
};

方法四：使用XMLHttpRequest(XHR)

var xhr = new XMLHttpRequest();
xhr.open('get', 'script.js', true);
xhr.onreadystatechange = function(){
    if(xhr.readyState == 4){
        if(xhr.status >= 200 && xhr.status < 300 || xhr.status == 304){
            var script = document.createElement('script');
            script.type = "text/javascript";
            script.text = xhr.responseText;
            document.body.appendChild(script);
         }
     }
};
xhr.send(null);

优点：
可以下载不立即执行的javascript代码；
同样的代码在所有现代浏览器中都可以正常运行。

缺点：
javasript文件必须和页面放置在同一个域中，不能从CDN下载，所以大型网页通常都不采取XHR脚本注入技术。

总结

减少 JavaScript 对性能的影响有以下几种方法：

将所有的<script>标签放到页面底部，也就是</body>闭合标签之前，这能确保在脚本执行前页面已经完成了渲染。

尽可能地合并脚本。页面中的<script>标签越少，加载也就越快，响应也越迅速。无论是外链脚本还是内嵌脚本都是如此。

采用无阻塞下载 JavaScript 脚本的方法：
使用<script>标签的 defer 属性（仅适用于 IE 和 Firefox 3.5 以上版本）；
使用动态创建的<script>元素来下载并执行代码；
使用 XHR 对象下载 JavaScript 代码并注入页面中。