JS延迟加载的几种方式小结

更新时间：2024年08月20日 11:51:56 作者：meijory

JS延迟加载,也就是等页面加载完成之后再加载 JavaScript 文件,JS延迟加载有助于提高页面加载速度,本文小编给大家介绍了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() {  
       varelement = 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",downloadJSAtOnload);  
   else 
      window.onload =downloadJSAtOnload;  
</script>

4.使用jQuery的getScript()方法

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

5.使用setTimeout延迟方法

setTimeout(function() {
  // 执行延迟加载的代码或加载资源
}, 2000); // 在 2000 毫秒（2 秒）后执行

6.让JS最后加载

把js外部引入的文件放到页面底部，来让js最后引入，从而加快页面加载速度

到此这篇关于JS延迟加载的几种方式小结的文章就介绍到这了,更多相关JS延迟加载内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

教学演示-UBB,剪贴板,textRange及其他
[红色]教学演示-UBB,剪贴板,textRange及其他...
2006-11-11
js中什么时候不能使用箭头函数
箭头函数是和我们工作密切相关的东西，本文主要介绍了js中什么时候不能使用箭头函数，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-06-06
JS完成代码前最好对其做5件事
我们不得面对这样一个事实：许多程序员不会规划他们的JS代码。我们经常快速写完代码、运行、提交。但当我们继续开发遇到变量和函数时不得不再次回头查看它们代表的含义，麻烦就从这里开始了。
2013-04-04
JavaScript下载后端返回的文件流的三种方法
本文主要介绍了JavaScript下载后端返回的文件流的三种方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-07-07
JavaScript实现瀑布流图片效果
这篇文章主要为大家详细介绍了JavaScript实现瀑布流图片效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-06-06
Postman的下载及安装教程详解
这篇文章主要介绍了Postman的下载及安装教程详解,今天给大家介绍的这款网页调试工具不仅可以调试简单的css、html、脚本等简单的网页基本信息，它还可以发送几乎所有类型的HTTP请求！需要的朋友可以参考下
2018-10-10
js 获取元素在页面上的偏移量的方法汇总
javascript可以通过四个属性可以获得元素的偏移量，分别是1、offsetHeight，2、offsetWidth，3、offsetLeft，4、offsetTop，今天我们就来具体谈一下获取页面元素偏移量的最佳方法。
2015-04-04
Yii2使用Bootbox插件实现自定义弹窗
Bootbox.js 是一个小型的 JavaScript 库用来创建简单的可编程对话框，基于 Twitter 的 Bootstrap 开发。今天我们就来研究下，如何使用bootbox插件来实现自定义弹窗。
2015-04-04
小程序实现tab标签页
这篇文章主要为大家详细介绍了小程序实现tab标签页，可点击切换，滑动切换页面,文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-11-11
JavaScript避免嵌套代码浅析
这篇文章主要介绍了JavaScript避免嵌套代码，很多时候需要编写的逻辑本身就很恶心, 乍看之下, 堆页岩般的判定嵌套里似乎每一层都是必要的, 也只能说尽量让它看起来不那么恶心
2023-02-02