延迟加载JS的方式

会说法语的猪

已于 2023-04-24 17:54:01 修改

阅读量4.4k

点赞数 5

分类专栏： javascript 前端文章标签： javascript 前端

于 2022-07-16 13:37:07 首次发布

本文链接：https://blog.csdn.net/m0_51431448/article/details/125818681

版权

前端同时被 2 个专栏收录

108 篇文章 3 订阅 ¥29.90 ¥99.00

订阅专栏

超级会员免费看

javascript

81 篇文章 2 订阅 ¥29.90 ¥99.00

订阅专栏

超级会员免费看

本文详细介绍了JS延迟加载的概念及其对网页性能的提升，重点讨论了`defer`和`async`属性的区别和应用场景。`defer`保证脚本按顺序执行，适合依赖DOM的脚本；`async`则不保证顺序，适用于独立脚本。正确使用这两个属性能有效优化页面加载速度，提供更好的用户体验。

摘要由CSDN通过智能技术生成

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

一般延迟加载js方式有：

① defer属性

② async属性

③ 动态创建DOM

④ 使用jq的getScript方法

⑤ 使用setTimeout延迟加载脚本

⑥ 将script引入放在最后（底部）加载

其中比较重要的就是 defer 和 async方式

这里举个栗子：

a.js

console.log(document.getElementById('myDiv'), '----->>>')

test.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewpo

了解本专栏

订阅专栏解锁全文

超级会员免费看

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

会说法语的猪

关注关注

5
点赞
踩
25

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

订阅专栏

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.让

Javascript延迟加载

最新发布

警警的博客

07-24

584

JS（JavaScript）延迟加载是一种优化网页加载速度的技术，它允许在页面的主要内容加载完成后，再加载和执行JavaScript脚本。

参与评论您还未登录，请先登录后发表或查看评论

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延迟加载的方式有哪些

子玉的博客

11-02

710

3. 使用 Intersection Observer API：Intersection Observer API 可以观察元素是否进入视口，并在满足条件时执行相关代码或加载资源。4. 使用异步加载脚本：可以通过创建 `` 标签并将 `async` 或 `defer` 属性设置为 true，来实现异步加载脚本。5. 使用动态创建的 `` 元素：可以通过创建新的 `` 元素，并将 `src` 属性设置为要加载的图片路径，来实现延迟加载。当图片加载完成后，可以执行相关代码。

js延迟加载的六种方式

青山不改，绿水长流。

12-28

7864

把js外部引入的文件放到页面底部，来让js最后引入，从而加快页面加载速度例如引入外部js脚本文件时，如果放入html的head中,则页面加载前该js脚本就会被加载入页面，而放入body中，则会按照页面从上倒下的加载顺序来运行JavaScript的代码所以我们可以把js外部引入的文件放到页面底部，来让js最后引入，从而加快页面加载速度3.上述方法2也会偶尔让你收到Google页面速度测试工具的“延迟加载javascript”警告。所以这里的解决方案将是来自Google帮助页面的推荐方案。

关于延迟加载JavaScript

10-24

3. 将"defer.js"替换为实际需要延迟加载的外部JavaScript文件名。 4. 确保外部JavaScript文件的路径是正确的，避免因路径错误导致JavaScript文件无法加载。需要注意的是，延迟加载并不适用于页面加载时就需要执行...

jquery延迟加载外部js实现代码

10-27

"jQuery延迟加载外部js"是一种优化策略，它允许我们推迟非关键JavaScript资源的加载，直到它们真正需要时才进行加载。这样可以减少初始页面加载时间，加快页面渲染速度，尤其是对于那些包含大量脚本的复杂网页。在...

浅析js预加载/延迟加载

10-25

2. **动态插入节点**：通过创建新的`<script>`标签并将其插入DOM中来加载JS文件。这种方法简单易行，但缺点是加载后的脚本会立即执行，可能影响页面结构和性能。预加载的优缺点： - 优点：提前获取资源，减少用户...

JS都有哪些延迟加载的方式？

zy1992As的博客

09-18

706

把js外部引入的文件放到页面底部，来让js最后引入，从而加快页面加载速度例如引入外部js脚本文件时，如果放入html的head中,则页面加载前该js脚本就会被加载入页面，而放入body中，则会按照页面从上倒下的加载顺序来运行JavaScript的代码。所以我们可以把js外部引入的文件放到页面底部，来让js最后引入，从而加快页面加载速度。上述方法2也会偶尔让你收到Google页面速度测试工具的“延迟加载javascript”警告。所以这里的解决方案将是来自Google帮助页面的推荐方案。

JavaScript中实现延迟加载的技术

u013951056的专栏

08-21

529

在JavaScript中，可以通过不同的方法实现延迟加载。然而，两种广泛使用的技术是使用Intersection Observer API来延迟加载图像，以及在滚动事件中实现内容的延迟加载。

js延迟加载的几种方法

Wopelo的博客

02-21

4533

众所周知，在一个HTML页面加载的时候，如果遇到script标签，一般情况下会停止页面渲染，转而加载并执行脚本，等到脚本执行结束后才继续渲染页面。但世界上存在可以使js延迟加载的方法，这些方法有助于提高页面加载速度 1.defer属性作用脚本会立即下载，但要在页面已加载之后才运行脚本使用 &amp;lt;script type=&quot;text/javascript&quot; src=&quot;demo_d...

js延迟加载，懒加载实现

qq_41537593的博客

06-21

484

在 JavaScript 中，可以使用一些方法来实现延迟加载，延迟加载的核心思想是在用户需要数据时才进行加载，从而提高网页的响应速度。

JavaScript脚本延迟加载的方式有哪些？（笔记）

qq_42533666的博客

02-16

1131

笔记，延迟加载就是等页面加载完成之后再加载 JavaScript 文件。 js 延迟加载有助于提高页面加载速度。

面试：js 延迟加载方式

热门推荐

qq_43592064的博客

05-26

4万+

js 延迟加载方式

JavaScript之延迟加载

抚首

11-15

1054

什么是js延迟加载 js延迟加载有什么好处 js延迟加载的几种常见方式 1.什么是js延迟加载？ js延迟加载就是页面加载完之后在加载JavaScript文件这里有一张图外部引用了js文件，这个时候加载完整个网页大概流程就是：从上往下一个一个加载 2.js延迟加载有什么好处？ js延迟加载可以提高网页加载的效率，利于优化网页 3.js延迟加载的几种常见方式？ 1.async属性如何使用：在<script>标签上添加asyns属性这个时候网页加载就是加载网页的时.

JS 延迟加载方法

-ELZ-

09-29

1038

文章目录1 JS 延迟加载2 JS 延迟加载方式2.1 defer2.2 async2.3 defer 和 async 异同点2.4 setTimeout2.5 动态创建 DOM 方式2.6 将脚本元素放在文档的底部3 DOMContentLoaded4 load 1 JS 延迟加载 『什么是 JS 延迟加载』简单来说，JS 延迟加载就是等 HTML 文档解析完成后再执行 JS 脚本。『JS 延迟加载有什么作用』 1️⃣ 有助于提高页面加载速度。因为外联普通 JavaScript 脚本的加载和执行都.

JS延迟加载（async、defer）

m0_49202939的博客

05-28

178

首先来看没有任何属性的 <script>标签：当html文件在解析时遇到<script>标签，则会暂停解析html，然后开始下载<script>标签链接进来的js脚本，并且执行下载好的js脚本。以上动作完成后才会继续解析未完成的html。带有async的<script>标签，则会将解析html和下载js脚本同时进行，但js脚本下载完成后会暂停html的解析并立即执行下载好的js脚本。等js脚本执行完毕将会继续解析未完成的html。（如果是多个js脚本，那么执行顺序不分先后，谁先下载完成谁先执行）

JS为什么要延迟加载，有哪些方法可以实现延迟加载?

王春燕的博客

06-05

3515

对于js的优化（关于js的延迟加载）的好处是有助于提高页面加载速度，js延迟加载就是等页面加载完成之后在加载js文件. HTML元素是按其在页面中出现的次序调用的，如果用javascript来管理页面上的元素（使用文档对象模型dom），并且js加载于欲操作的HTML元素之前，则代码将出错。也就是说，我们写了js语句来获取DOM对象，但由于DOM结构还没有加载完成，因此获取到的是空对象。...