延迟加载JS的方式

JavaScript 延迟加载就是等DOM（页面）加载完成之后再加载js文件，这样有助于提高页面加载速度，用户体验更好

 

常用延迟加载js方式有： 

• 将JS放在页面底部,html页面内容从上到下按顺序加载。
• window.onload()=function(){}，window全局函数
• 使用setTimeout，增加延时处理，异常线程，延时时间要自己预估。
• HTML4新增的script标签属性：defer, 基本等同于在window.onload时执行
• HTML5新增的script标签属性：async， 在DOM完成加载之后，window.onload之前执行

 常用defer , async。

示例：

script.js

console.log(  document.getElementById('box')   );

 index.html

    
    
    


我一只小小盒子：box

效果：如下，在不加defer 或者 async放在页面顶部是获取不到这个div元素的，因为页面还没有加载出来。 

 调用的地方加上defer

    
    
    


我一只小小盒子：box

async 

同样的我们把在header的引入，上面的defer换成async，如下： 

执行效果同上面defer一样，是拿到DOM元素：div的。

defer async区别 

示例：

a1.js

console.log('执行a1.js')

b2.js 

console.log('执行b2.js')

c3.js 

console.log('执行c3.js')

    
    


我一只小小盒子：box

使用async

 上面放在底部下的调用3个js，使用async, defer执行效果都是一样如图：

延迟加载3个脚本，如果使用的是defer，加载脚本的时候，一定会是按照以下顺序执行：

1. a1.js
2. b2.js
3. c3.js

使用async，也是延迟加载js脚本，但是这3个脚本执行顺序是不确定的，先完成加载先执行，如果这3个脚本有依赖关系，使用是async是不合适的。

如果无法判断用defer,async,优先使用 defer.