js延迟加载的几种方法（性能优化defer、async）

这是一个面试经常问到的问题：js的延迟加载方法 (js的延迟加载有助于提高页面的加载速度)

主要考察对程序的性能方面是否有研究，程序的性能是一个项目不断地追求的，通常也是项目完成后需要长期做的一件事情，像腾讯QQ依然对程序的性能不断地做优化，让用户的体验更好，性能优化的核心思想就是快，可以预先准备数据（如缓存的使用），可以按需获取，可以分段获取等都是常见的优化手段。

解题思路 :

1.defer属性

浏览器会并行下载 file.js和其它有 defer 属性的script，而不会阻塞页面后续处理。defer属性在IE 4.0中就实现了，超过10多年了！Firefox从 3.5 开始支持defer属性 。

浏览器会异步的下载该文件并且不会影响到后续DOM的渲染；

defer脚本会在文档渲染完毕后，DOMContentLoaded事件调用前执行。

文档解析时，遇到设置了defer的脚本，就会在后台进行下载，但是并不会阻止文档的渲染，当页面解析&渲染完毕后。
会等到所有的defer脚本加载完毕并按照顺序执行，执行完毕后会触发DOMContentLoaded事件。

注：所有的defer脚本保证是按顺序依次执行的。

2.async属性

async属性是HTML5新增的。作用和defer类似，但是它将在加载完成后立即执行，不能保证脚本会按顺序执行。它们将在onload 事件之前完成。

async脚本会在加载完毕后执行。

Firefox3.6、Opera 10.5、IE 9和 最新的Chrome 和 Safari 都支持 async 属性。可以同时使用 async 和 defer，这样IE 4之后的所有IE 都支持异步加载。

注释：有多种执行外部脚本的方法：

• 如果 async="async"：脚本相对于页面的其余部分异步地执行（当页面继续进行解析时，脚本加载完将被执行）
• 如果不使用 async 且 defer="defer"：脚本将在页面完成解析时执行
• 如果既不使用 async 也不使用 defer：在浏览器继续解析页面之前，立即读取并执行脚本会阻断页面的解析

推荐的应用场景

defer

如果你的脚本代码依赖于页面中的DOM元素（文档是否解析完毕），或者被其他脚本文件依赖。
例：

1. 评论框
2. 代码语法高亮
3. polyfill.js

async

如果你的脚本并不关心页面中的DOM元素（文档是否解析完毕），并且也不会产生其他脚本需要的数据。
例：

1. 百度统计

如果不太能确定的话，用defer总是会比async稳定。。。

3.动态创建DOM方式 (使用的最多)

PS： 这里插一句 addEventListener() 也是常考的知识点之一：

    addEventListener() 方法用于向指定元素添加事件句柄。

    使用 removeEventListener() 方法来移除 addEventListener() 方法添加的事件句柄。

    语法：element.addEventListener(event, function, useCapture)
        event （必须）字符串，指定事件名。注意: 不要使用 “on” 前缀。 例如，使用 “click” ,而不是使用 “onclick”。
        function （必须）指定要事件触发时执行的函数。当事件对象会作为第一个参数传入函数。 事件对象的类型取决于特定的事件。例如， “click” 事件属于 MouseEvent(鼠标事件) 对象。
        useCapture （可选）布尔值，指定事件是否在捕获或冒泡阶段执行。【true：事件句柄在捕获阶段执行； false：默认，事件句柄在冒泡阶段执行】

该实例使用 addEventListener() 方法来向按钮添加点击事件。
 
点我 
 

效果如图：

4.使用Jquery的getScript()方法

$.getScript("outer.js",function(){//回调函数，成功获取文件后执行的函数
     console.log("脚本加载完成")
});

从源码可以看出，这个方法最后还是调用了jQuery.ajax()来请求了js文件的。

5.使用setTimeout延迟方法的加载时间

延迟加载js代码，给网页加载留出时间

6.让js最后加载

例如引入外部js脚本文件时，如果放入html的head中,则页面加载前该js脚本就会被加载入页面，而放入body中，则会按照页面从上倒下的加载顺序来运行javascript的代码~~~ 所以我们可以把js外部引入的文件放到页面底部，来让js最后引入，从而加快页面加载速度。

 

上述方法5,6也会偶尔让你收到Google页面速度测试工具的“延迟加载javascript”警告。所以这里的解决方案将是来自Google帮助页面的推荐方案。

//这些代码应被放置在标签前(接近HTML文件底部) 

这段代码意思是等到整个文档加载完后，再加载外部文件“defer.js”。

使用此段代码的步骤：

    复制上面代码
    粘贴代码到HTML的标签前 (靠近HTML文件底部)
    修改“defer.js”为你的外部JS文件名
    确保你文件路径是正确的。例如：如果你仅输入“defer.js”，那么“defer.js”文件一定与HTML文件在同一文件夹下。

注意：这段代码直到文档加载完才会加载指定的外部js文件。因此，不应该把那些页面正常加载需要依赖的javascript代码放在这里。而应该将JavaScript代码分成两组。一组是因页面需要而立即加载的javascript代码，另外一组是在页面加载后进行操作的javascript代码(例如添加click事件或其他东西)。这些需等到页面加载后再执行的JavaScript代码，应放在一个外部文件，然后再引进来。
 

 

若有不足请多多指教！希望给您带来帮助！