js延迟加载的几种方式

最新推荐文章于 2024-06-24 20:51:09 发布
原创 最新推荐文章于 2024-06-24 20:51:09 发布 · 1.3k 阅读 · 4 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了JavaScript延迟加载的六种方法，包括defer属性、async属性、动态创建DOM、JQuery的getScript、setTimeout延迟和让JS最后加载，以提升页面加载速度。

  面试的时候遇到的，所以整理出来，方便记忆。

  js延迟加载有助于提高页面加载速度，一般有以下几种：defer属性、async属性、动态创建DOM方式、使用JQuery的getScript、使用setTimeout延迟方法、让js最后加载。

1.defer属性：

HTML 4.01 为 <script>标签定义了 defer属性。

用途：表明脚本在执行时不会影响页面的构造。也就是说，脚本会被延迟到整个页面都解析完毕之后再执行。

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

1

2

3

4

<head>

    <script src="test1.js" defer="defer"></script>

    <script src="test2.js" defer="defer"></script>

</head>

 2.async属性：

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

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

1

2

3

4

5

<head>

    <script src="test1.js" async></script>

    <script src="test2.js" async></script>

</head>

<body>

3.动态创建DOM方式

1

2

3

4

5

6

7

8

9

10

11

12

13

14

//这些代码应被放置在</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()方法 

1

2

3

 

$.getScript("outer.js",function(){//回调函数，成功获取文件后执行的函数

    console.log("脚本加载完成")

});

 

5. 使用setTimeout延迟方法

6.让js最后加载

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

 

 

 

延迟加载JS的方式
专注于技术，分享实战经验，探索技术边界，用代码构建更美的数字世界。
07-16 4585
JS延迟加载就是等dom（页面）加载完成之后再加载js文件，这样有助于提高页面加载速度，用户体验更好一般延迟加载js方式有①defer属性②async属性③动态创建DOM④使用jq的getScript方法⑤使用setTimeout延迟加载脚本⑥将script引入放在最后（底部）加载其中比较重要的就是defer和async方式这里举个栗子a.jstest.html这时候会正常打印出div元素，这也就是我们上面说的放在底部最后执行。......
js 延迟加载的方式有哪些
weixin_47450807的博客
01-24 1万+
js延迟加载就是当页面全部加载完毕，然后再加载js文件，这样做有助于提高页面加载的速度。 下面将总结js中延迟加载的几种方式。 1、defer属性 在script标签上，设置defer属性，可以达到异步加载js文件，延迟执行js脚本文件的目的。 1、defer属性只对外部文件有效，对本地js文件没有效果。 2、defer属性是在遇到scirpt标签时，浏览器开始异步下载，当遇到</html>标签时，表名页面加载完毕，开始执行js文件。 3、并且js文件是按顺序执行的。 2、async属性 在
js实现延迟加载的几种方法
12-01
js的延迟加载有助与提高页面的加载速度，以下是延迟加载的几种方法： 1.使用setTimeout延迟方法的加载时间 延迟加载js代码，给网页加载留出更多时间 [removed] function A(){ $.post("/lord/login",{name:username,pwd:password},function(){ alert("Hello"); }); } $(function (){ setTimeout('A()', 1000); //延迟1秒 }) [removed] 2.让
JS延迟加载的几种方式
热门推荐
meijory的博客
07-30 9万+
JS延迟加载，也就是等页面加载完成之后再加载 JavaScript 文件。一般有以下几种方式：1. defer 属性HTML 4.01 为 <script>标签定义了 defer属性。 用途：表明脚本在执行时不会影响页面的构造。也就是说，脚本会被延迟到整个页面都解析完毕之后再执行。在<script> 元素中设置 defer 属性，等于告诉浏览器立即下载，但延迟执行。<!DOCTYPE html>
js延迟加载的方式有哪些
子玉的博客
11-02 1080
3. 使用 Intersection Observer API：Intersection Observer API 可以观察元素是否进入视口，并在满足条件时执行相关代码或加载资源。4. 使用异步加载脚本：可以通过创建 `` 标签并将 `async` 或 `defer` 属性设置为 true，来实现异步加载脚本。5. 使用动态创建的 `` 元素：可以通过创建新的 `` 元素，并将 `src` 属性设置为要加载的图片路径，来实现延迟加载。当图片加载完成后，可以执行相关代码。
js实现延迟加载的几种方法详解
10-17
本文将详细解析三种常用的JavaScript延迟加载方法。 1. **`defer`属性** `defer`属性适用于外部JavaScript文件。当`defer`属性被设置时，浏览器会并行下载所有带`defer`属性的脚本，但不会阻塞DOM解析。这些脚本会...
几种延迟加载JS代码的方法加快网页的访问速度
10-26
JavaScript代码的加载往往占据了页面加载时间的相当部分，因此，延迟加载JavaScript代码成为优化网页性能的一种有效策略。本文将介绍三种延迟加载JS代码的方法，以帮助加快网页的访问速度。 1. **延迟加载JS代码** ...
js延迟加载的方式有哪些？
高先生的猫
03-10 470
1、defer 属性 在<script>元素中设置defer属性，等于告诉浏览器立即下载，但延迟执行 2、async 属性HTML5为<script>标签定义了async属性。与defer属性类似。 3、JS动态创建DOM方式 4、使用jQuery的getScript()方法 5、让JS最后加载 6、Ajax eval 用ajax下载代码，然后用eval执行 ...
js延迟加载的几种方法
夏悠桥沐的专栏
08-31 3万+
js的延迟加载有助与提高页面的加载速度，以下是延迟加载的几种方法： 1.使用setTimeout延迟方法的加载时间延迟加载js代码，给网页加载留出更多时间 <script type="text/javascript" > function A(){ $.post("/lord/login",{name:username,pwd:password},function(){
JS延迟加载的方式有哪些
最新发布
求职大学生
06-24 526
JavaScript延迟加载（也称为懒加载）是一种优化网页性能的技术，它允许脚本在页面加载完成后再执行，从而加快页面初始加载速度。选择哪种延迟加载方式取决于你的具体需求和使用场景。例如，对于简单的脚本加载，可以使用。对于复杂的应用程序，可能需要使用模块加载器或打包工具的代码分割功能。
js 延迟加载的方式
qq_45805423的博客
05-10 416
js 延迟加载的方式有哪些 js 延迟加载，也就是等页面加载完成之后再加载 JavaScript 文件。 js 延迟加载有助于提高页面加载速度。 一般有以下几种方式： defer 属性 async 属性 动态创建 DOM 方式 使用 setTimeout 延迟方法 让 JS 最后加载 js 脚本 defer 和 async 的区别 defer 属性表示延迟执行引入的 JavaScript，即这段 JavaScript 加载时 HTML 并未停止解析，这两个过程是并行的。当整个 document
延迟加载js有哪些方式
qq_53701739的博客
02-27 690
1.正常情况下: <script type="text/javascript"></script> html解析->（遇到js脚本）html解析暂停（此处开始：js下载->js执行）->html解析 2.加async情况下: <script async type="text/javascript"></script> html解析（遇到js脚本）（继续html解析，并且此处开始：js下载） -> （js下载完后）html解
JS中延迟加载的方式有哪些
weixin_56187723的博客
05-31 546
2. 懒加载插件：使用一些懒加载的JavaScript插件，如LazyLoad、Echo等，这些插件会自动检测页面中的图片和其他资源，并在需要的时候进行加载。5. 分页加载：对于需要加载大量数据的页面，可以采用分页加载的方式，只加载当前显示的数据，当用户滚动到页面底部时，再加载下一页的数据。3. 视频延迟加载：对视频的加载也可以采用延迟加载的方式，当视频播放器出现在可视区域时，再进行视频的加载。4. AJAX动态加载：将页面上的一些内容通过AJAX技术动态获取并加载，可以减少初始页面的加载大小。
JavaScript 实现图片延迟加载的三种方法详解
javascript实现图片延迟加载方法有多种，以下是三种常见的方法： 1. 使用javascript动态加载图片 可以使用javascript动态加载图片，即在页面加载时，不加载图片，而是使用javascript动态加载图片。当用户滚动到...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值