Js延迟加载的方法

为什么要js延迟加载？

js延迟加载，就是等页面加载完成后，再加载js文件。这样有利于提高页面的加载速度。提高用户体验。

 

Js延迟加载有以下的几种方法：

1、利用defer属性

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

作用：js脚本会立即下载，但要在页面加载之后才会运行脚本

 

2、利用async属性

<script type="text/javascript" src='index.js' async></script>

作用：不让页面等待脚本的下载和执行，而是异步地去加载页面的其他内容。

 

defer与async的异同：

相同点：

          1、加载文件时不阻塞页面渲染

          2、在onload事件之前执行

          3、只对外部脚本有效

不同点：

         1、defer属性的脚本都是在html解析完毕之后，按照原本的顺序执行

         2、async属性的脚本都在它下载结束之后立刻执行（下载时不阻塞页面渲染），但执行顺序不能控制，先下载完的先执行 

 

3、动态创建Dom

      创建script标签，然后引入对相应的js

4、使用jq的getScript（）方法

      使用jq的getScript方法来加载js文件