JS延迟加载的几种方式

柔光的暖阳◎ 2022-05-15 00:08 309阅读 0赞

JS延迟加载，也就是等页面加载完成之后再加载 JavaScript 文件。  
JS延迟加载有助于提高页面加载速度。  
一般的几种方法如下：

defer 属性
    async 属性
    动态创建DOM方式
    使用jQuery的getScript方法
    使用setTimeout延迟方法
    让JS最后加载

**1.defer属性**  
HTML 4.01 为 `<script>`标签定义了 defer属性。  
用途：表明脚本在执行时不会影响页面的构造。也就是说，脚本会被延迟到整个页面都解析完毕之后再执行。

在`<script>` 元素中设置 `defer` 属性，等于告诉浏览器立即下载，但延迟执行。

<!DOCTYPE html>
    <html>
    <head>
        <script src="test1.js" defer="defer"></script>
        <script src="test2.js" defer="defer"></script>
    </head>
    <body>
    
    </body>
    </html>

说明：虽然`<script>` 元素放在了`<head>`元素中，但包含的脚本将延迟浏览器遇到`</html>`标签后再执行。

HTML5规范要求脚本按照它们出现的先后顺序执行。在现实当中，延迟脚本并不一定会按照顺序执行。

defer属性只适用于外部脚本文件。支持 HTML5 的实现会忽略嵌入脚本设置的 defer属性。

--------------------

**2.async属性**  
HTML5 为 `<script>`标签定义了 `async`属性。与 `defer`属性类似，都用于改变处理脚本的行为。同样， **只适用于外部脚本文件。**  
目的：不让页面等待脚本下载和执行，从而 **异步加载页面其他内容。**

异步脚本一定会在页面 load 事件前执行。  
不能保证脚本会按顺序执行。

<!DOCTYPE html>
    <html>
    <head>
        <script src="test1.js" async></script>
        <script src="test2.js" async></script>
    </head>
    <body>
    
    </body>
    </html>

async和defer一样，都不会阻塞其他资源下载，所以不会影响页面的加载。  
**缺点：不能控制加载的顺序**

--------------------

**3.动态创建DOM方式**

//这些代码应被放置在</body>标签前（接近HTML文件的底部）
    <script type="text/javascript"> function downloadJSAtOnload() { var element = document.createElement("script"); element.src = "defer.js"; document.body.appendChild(element); } if(window.addEventListener) window.addEventListener("load",downloadJSAtOnload,false); else if(window.attachEvent) window.attachEvent("onload",downloadJAAtOnload); else window.onload = downloadJSAtload; </script>

--------------------

**4.使用jQuery的getScript()方法**

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

--------------------

**5.使用setTimeout延迟方法**

**6.让JS最后加载**