JavaScript 延迟加载的艺术：按需加载的最佳实践

在这里插入图片描述

🤍 前端开发工程师（主业）、技术博主（副业）、已过CET6
🍨 阿珊和她的猫_CSDN个人主页
🕠 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》
🍚 蓝桥云课签约作者、已在蓝桥云课上架的前后端实战课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》

文章目录

  • 一、引言
    • 延迟加载的概念和背景
    • 为什么需要延迟加载 JavaScript
  • 二、延迟加载的原理和方法
    • 使用`<script>`标签的`defer`属性
    • 使用`<script>`标签的`async`属性
    • 动态创建和插入`<script>`标签
    • 使用 JavaScript 模块加载器
  • 三、延迟加载的优点
  • 四、延迟加载的应用场景
  • 五、延迟加载的注意事项和最佳实践
  • 六、实际案例分析
    • 加载第三方 JavaScript 库
    • 单页应用（SPA）中的模块加载

一、引言

延迟加载的概念和背景

在网页开发中，延迟加载是一种技术，用于优化网页的性能和用户体验。它的基本思想是在网页加载时，只加载当前用户可见或即将可见的内容，而不是一次性加载整个网页的所有内容。

延迟加载的背景是随着网页内容的不断丰富和用户对网页性能的要求不断提高，传统的网页加载方式可能会导致网页加载速度过慢，影响用户体验。因此，延迟加载技术应运而生，它可以有效地减少网页加载时间，提高网页的响应速度。

通过延迟加载，网页可以更快地加载，减少用户等待时间，提高用户满意度。同时，延迟加载还可以减少服务器的负载，提高服务器的性能和效率。因此，延迟加载已经成为现代网页开发中常用的技术之一。

为什么需要延迟加载 JavaScript

在网页开发中，需要延迟加载 JavaScript 的主要原因是为了提高网页的加载速度和用户体验。

JavaScript 是一种解释型语言，它需要在浏览器中解析和执行。如果在网页加载时一次性加载所有的 JavaScript 文件，可能会导致网页的加载速度变慢，特别是当 JavaScript 文件较大或者包含多个文件时。这会导致用户需要等待更长的时间才能看到网页的内容，从而降低用户体验。

通过延迟加载 JavaScript，可以只加载当前用户可见或即将可见的 JavaScript 文件，从而减少网页的加载时间。这可以通过使用 JavaScript 加载器或动态加载 JavaScript 文件等技术来实现。

此外，延迟加载 JavaScript 还可以减少服务器的负载，因为它只需要加载用户实际需要的 JavaScript 文件，而不是一次性加载所有文件。这可以提高服务器的性能和效率。

因此，延迟加载 JavaScript 是提高网页性能和用户体验的重要技术之一，它可以帮助网页更快地加载，减少用户等待时间，提高用户满意度。

二、延迟加载的原理和方法

使用<script>标签的defer属性

<script> 标签的 defer 属性是一种常用的延迟加载 JavaScript 的方式。它的作用是告诉浏览器在解析 HTML 文档时，先不要执行包含在 <script> 标签中的 JavaScript 代码，而是等到 HTML 文档完全加载完成后再执行。

使用 defer 属性的语法如下：

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

在上面的代码中，defer 属性告诉浏览器延迟执行 script.js 文件中的 JavaScript 代码，直到 HTML 文档完全加载完成后再执行。

使用 defer 属性的优点是它可以在 HTML 文档加载完成后一次性执行所有延迟加载的 JavaScript 文件，从而减少浏览器的请求次数，提高网页的加载速度。此外，使用 defer 属性还可以确保 JavaScript 代码按照它们在 HTML 文档中的顺序执行，避免了代码的顺序问题。

需要注意的是，使用 defer 属性时，浏览器仍然会在解析 HTML 文档时下载包含在 <script> 标签中的 JavaScript 文件，因此它并不能完全避免对网页性能的影响。如果需要进一步优化网页的性能，可以考虑使用其他延迟加载技术，例如动态加载 JavaScript 文件或使用 JavaScript 加载器。

使用<script>标签的async属性

<script> 标签的 async 属性是另一种常用的延迟加载 JavaScript 的方式。它的作用是告诉浏览器在解析 HTML 文档时，异步加载包含在 <script> 标签中的 JavaScript 文件，而不会阻塞 HTML 文档的解析。

使用 async 属性的语法如下：

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

在上面的代码中，async 属性告诉浏览器异步加载 script.js 文件中的 JavaScript 代码，不会阻塞 HTML 文档的解析。

使用 async 属性的优点是它可以在不影响 HTML 文档解析的情况下异步加载 JavaScript 文件，从而提高网页的加载速度。此外，使用 async 属性还可以确保 JavaScript 代码按照它们在 HTML 文档中的顺序执行，避免了代码的顺序问题。

需要注意的是，使用 async 属性时，浏览器会在下载和执行 JavaScript 文件时与 HTML 文档的解析同时进行，因此可能会导致网页的内容在 JavaScript 文件加载完成之前显示出来。如果需要确保 JavaScript 代码在网页内容加载完成后再执行，可以考虑使用其他延迟加载技术，例如动态加载 JavaScript 文件或使用 JavaScript 加载器。

总之，<script> 标签的 defer 属性和 async 属性都是常用的延迟加载 JavaScript 的方式，它们可以帮助提高网页的加载速度和用户体验。根据具体的需求和场景，可以选择合适的属性来实现延迟加载。

动态创建和插入<script>标签

动态创建和插入 <script> 标签是一种常见的延迟加载 JavaScript 的方式。它的基本思想是在网页加载完成后，根据需要动态创建 <script> 标签，并将其插入到 HTML 文档中，从而实现延迟加载 JavaScript 文件。

下面是一个使用 JavaScript 动态创建和插入 <script> 标签的示例代码：

// 创建一个新的 <script> 标签
var script = document.createElement('script');// 设置 <script> 标签的属性
script.setAttribute('src', 'script.js');// 将 <script> 标签插入到 HTML 文档的 body 元素中
document.body.appendChild(script);

在上面的代码中，我们首先使用 document.createElement('script') 方法创建一个新的 <script> 标签。然后，我们使用 setAttribute('src', 'script.js') 方法设置 <script> 标签的 src 属性，指定要加载的 JavaScript 文件。最后，我们使用 document.body.appendChild(script) 方法将 <script> 标签插入到 HTML 文档的 body 元素中，从而实现延迟加载 JavaScript 文件。

需要注意的是，在实际应用中，需要根据具体的需求和场景来选择合适的延迟加载技术。动态创建和插入 <script> 标签的方式可以实现更精细的控制和优化，但需要在代码中处理一些细节问题，例如确保 JavaScript 文件加载完成后再执行相关的代码逻辑。

使用 JavaScript 模块加载器

JavaScript 模块加载器是一种用于动态加载 JavaScript 模块的工具。它可以在需要时加载模块，而不是在网页加载时一次性加载所有的 JavaScript 文件。这样可以减少网页的加载时间，提高网页的性能和用户体验。

下面是一个使用 JavaScript 模块加载器的示例代码：

// 定义模块加载器函数
function loadModule(moduleId, callback) {// 创建一个新的 <script> 标签var script = document.createElement('script');// 设置 <script> 标签的属性script.setAttribute('src', moduleId);// 监听 script 标签的加载完成事件script.addEventListener('load', function() {// 执行回调函数callback();});// 将 <script> 标签插入到 HTML 文档的 body 元素中document.body.appendChild(script);
}// 调用模块加载器函数加载模块
loadModule('module.js', function() {// 在模块加载完成后执行的代码逻辑console.log('Module loaded!');
});

在上面的代码中，我们定义了一个名为 loadModule 的函数，它接受两个参数：模块的 ID（moduleId）和加载完成后的回调函数（callback）。在函数内部，我们创建了一个新的 <script> 标签，并设置其 src 属性为指定的模块 ID。然后，我们监听 <script> 标签的 load 事件，当模块加载完成后，执行回调函数。最后，我们将 <script> 标签插入到 HTML 文档的 body 元素中，从而实现模块的动态加载。

在实际应用中，你可以根据需要定义多个模块，并在需要时使用 loadModule 函数加载它们。这样可以实现延迟加载 JavaScript 模块，提高网页的性能和用户体验。

三、延迟加载的优点

  • 提高页面加载速度
  • 减少 JavaScript 对页面渲染的影响
  • 优化用户体验

在这里插入图片描述

四、延迟加载的应用场景

  • 按需加载功能模块
  • 第三方脚本的延迟加载
  • A/B 测试和个性化内容加载

在这里插入图片描述

五、延迟加载的注意事项和最佳实践

  • 处理依赖关系
  • 错误处理
  • 性能优化

六、实际案例分析

加载第三方 JavaScript 库

加载第三方 JavaScript 库是指在网页中引入外部的 JavaScript 文件，以使用其中提供的功能和代码。下面是加载第三方 JavaScript 库的一般步骤：

  1. 获取第三方库的文件：首先，你需要从第三方库的官方网站或其他可靠来源获取 JavaScript 文件。通常，这些库都会提供一个下载链接或 CDN 链接，你可以根据需要选择合适的版本。
  2. 在 HTML 文件中引入库文件：在 HTML 文件的 <script> 标签中引入第三方库文件。可以将 <script> 标签放在 HTML 文件的 <head> 部分或 <body> 部分，具体位置取决于库文件的使用方式。
  3. 设置库文件的路径：在 <script> 标签的 src 属性中指定第三方库文件的路径。可以使用相对路径或绝对路径。如果使用相对路径，它将相对于 HTML 文件的位置。
  4. 等待库文件加载完成：在引入第三方库文件后，你需要等待它加载完成后才能使用其中的功能。这可以通过在库文件的回调函数中进行操作来实现。
  5. 使用库文件：一旦库文件加载完成，你就可以在 JavaScript 代码中使用其中提供的功能和方法。

下面是一个示例，演示如何加载 jQuery 库：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

在上面的代码中，我们使用 <script> 标签引入了 jQuery 库文件，其路径为 “https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js”。你可以根据实际情况替换为你所需要的库文件路径。

需要注意的是，不同的第三方库可能有不同的加载方式和使用方法。在使用特定的库时，建议参考该库的官方文档，以了解正确的加载和使用方式。

单页应用（SPA）中的模块加载

在单页应用（SPA）中，模块加载是指在单个页面中动态加载和渲染不同的模块或组件。这种方式可以提高应用的性能和用户体验，因为它减少了页面的刷新和重新加载。

在 SPA 中，模块通常是通过 JavaScript 加载器或模块系统来加载的。这些加载器或系统可以实现按需加载模块，只在需要时加载它们，而不是在页面加载时一次性加载所有模块。

下面是一些常见的 SPA 模块加载方式：

  1. 异步模块定义（AMD）：AMD 是一种异步模块加载方式，其中模块的定义和加载是分开的。AMD 加载器会在需要时异步加载模块，并将其注册到模块系统中。
  2. CommonJS：CommonJS 是一种同步模块加载方式，其中模块的定义和加载是在同一时间进行的。CommonJS 模块系统通常用于服务器端 JavaScript 开发。
  3. ES6 模块：ES6 模块是一种新的模块定义方式，它在 ECMAScript 6 中引入。ES6 模块可以通过 import 和 export 关键字来定义和加载模块。
  4. 基于 Webpack 的模块加载：Webpack 是一种流行的模块打包工具，它可以将多个模块打包成一个单独的文件，并提供了一种基于配置的模块加载方式。

在这里插入图片描述

无论使用哪种模块加载方式，在 SPA 中，模块通常是在需要时通过 JavaScript 加载器或模块系统来加载的。这可以提高应用的性能和用户体验，因为它减少了页面的刷新和重新加载。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/191350.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

React Native 更换淘宝镜像提升包下载速度

React Native 更换淘宝镜像提升包下载速度

React Native 更换淘宝镜像提升包下载速度 每次运行项目的时候都是卡在包下载的命令上&#xff0c;每次一等就要 1h20m 极度崩溃&#xff0c;那是因maven镜像源为Google导致无法正常下载。 那么我们就可以切换maven镜像源&#xff0c;方法如下&#xff1a; 找到项目下的**/an…
阅读更多...
逻辑回归与正则化 逻辑回归、激活函数及其代价函数

逻辑回归与正则化 逻辑回归、激活函数及其代价函数

逻辑回归、激活函数及其代价函数 线性回归的可行性 对分类算法&#xff0c;其输出结果y只有两种结果{0&#xff0c;1}&#xff0c;分别表示负类和正类&#xff0c;代表没有目标和有目标。 在这种情况下&#xff0c;如果用传统的方法以线性拟合 &#xff08; h θ ( x ) θ T…
阅读更多...
医疗器械设备模组的具体应用

医疗器械设备模组的具体应用

直线模组是一种高精度、高速度的精密传动元件&#xff0c;目前被广泛应用在各种工业自动化领域&#xff1b;尤其是在激光加工、电子制造、医疗设备、物流设备和机器人等行业中&#xff0c;都发挥着重要作用&#xff0c;接下来我们看看医疗器械设备模组的具体应用吧&#xff01;…
阅读更多...
多模块下MyBatis官方生成器

多模块下MyBatis官方生成器

MyBatis官方生成器 1. 依赖插件 创建generator模块 在父模块中进行版本管理 <dependency><groupId>org.mybatis</groupId><artifactId>mybatis</artifactId><version>3.5.6</version> </dependency><dependency><g…
阅读更多...
Swin Transformer实战图像分类(Windows下，无需用到Conda，亲测有效)

Swin Transformer实战图像分类(Windows下，无需用到Conda，亲测有效)

目录 前言 一、从官网拿到源码&#xff0c;然后配置自己缺少的环境。 针对可能遇到的错误&#xff1a; 二、数据集获取与处理 2.1 数据集下载 2.2 数据集处理 三、下载预训练权重 四、修改部分参数配置 4.1 修改config.py 4.2 修改build.py 4.3 修改units.py 4.4 修…
阅读更多...
Linux 基础认识

Linux 基础认识

文章目录 前言Linux历史window历史Linux地位发行版本 前言 建议只看概述 Linux历史 概述&#xff1a; 由一个研究生受Minix操作系统启发编写的&#xff0c;因为功能实用&#xff0c;代码开源被世界人接收和开发 &#xff0c;最终正式发布 。 详情&#xff1a; 1991年10月5日…
阅读更多...
模式识别与机器学习（七）：集成学习

模式识别与机器学习（七）：集成学习

集成学习 1.概念1.1 类型1.2 集成策略1.3 优势 2. 代码实例2.1boosting2.2 bagging2.3 集成 1.概念 集成学习是一种机器学习方法&#xff0c;旨在通过组合多个个体学习器的预测结果来提高整体的预测性能。它通过将多个弱学习器&#xff08;个体学习器&#xff09;组合成一个强学…
阅读更多...
docker安装卸载使用全教程

docker安装卸载使用全教程

docker安装卸载使用全教程 1.确定你是Centos7及以上版本 cat /etc/redhat-release2.yum安装gcc相关依赖 yum install -y gcc Yum install -y gcc-c3.安装需要的软件包 sudo yum install -y yum-utils4.设置stable镜像仓库 这里设置的是国内阿里云的镜像库&#xff0c;国外的…
阅读更多...
SQL Server 2016（为数据表Porducts添加数据）

SQL Server 2016（为数据表Porducts添加数据）

1、实验环境。 某公司有一台已经安装了SQL Server 2016的服务器&#xff0c;并已经创建了数据库PM。 2、需求描述。 在数据库PM中创建表products&#xff0c;"编号"列的值自动增长并为主键。然后使用T-SQL语句为表格插入如下数据。 3、实验步骤。 1、使用SSMS管理工…
阅读更多...
欧洲各国及发达国家经济支柱和第一出口商品是什么

欧洲各国及发达国家经济支柱和第一出口商品是什么

工业在欧洲各国经济支柱中的表现 一般发达国家&#xff0c;像西欧的国家第三产业即服务业占GDP70%甚至更高&#xff0c;从业人数比重也最大&#xff0c;只是越发达的国家服务业的知识性和科技含量会更高&#xff0c;如商业咨询、律师、医疗卫生、科技服务、商业服务。服务业的…
阅读更多...
PVE系列-CT容器安装openwrt X86的极简方法

PVE系列-CT容器安装openwrt X86的极简方法

下载推荐&#xff1a;https://openwrt.ai/ 使用环境PVE8.0&#xff0c;openwrt是以上网址的最新版&#xff0c;内涵及其丰富组件。 问题来源&#xff1a; 在PVE虚拟机可以很方便的使用img文件&#xff0c;转换qm 成一个硬盘文件&#xff0c;加入到虚拟机也就完成了&#xff0c…
阅读更多...
jQuery的使用

jQuery的使用

目录 jquery对象&#xff1a; jquery作为一般函数调用参数: jquery事件机制 jquery dom操作 jquery对象&#xff1a; <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" cont…
阅读更多...
Linux下配置邮箱客户端MUTT，整合msmtp + procmail + fetchmail

Linux下配置邮箱客户端MUTT，整合msmtp + procmail + fetchmail

一、背景 在向 Linux kernel 社区提交patch补丁步骤总结&#xff08;已验证成功&#xff09;_kernel补丁-CSDN博客文章中提到如何向kernel社区以及其他类似如qemu、libvirt社区提交patch的详细步骤&#xff0c;但还有一点不足的是通过git send-email这种方法基本是只能发送patc…
阅读更多...
七、三台虚拟机JDK环境安装

七、三台虚拟机JDK环境安装

目录 1、在三台机器上分别创建安装目录
阅读更多...
Ext4文件系统解析（二）

Ext4文件系统解析（二）

1、前言 想要了解EXT文件系统的工作原理&#xff0c;那了解文件系统在磁盘上的分布就是必不可少的。这一节主要介绍EXT文件系统硬盘存储的物理结构。 由于当前主流的CPU架构均采用小端模式&#xff0c;因此下文介绍均已小端模式为准。 2、超级块 2.1 属性 下表列举出超级块…
阅读更多...
Unity Canvas、Canvas Scaler、Graphic Raycaster、EventSystem 组件详解

Unity Canvas、Canvas Scaler、Graphic Raycaster、EventSystem 组件详解

文章目录 0. 参考文章1. Canvas1.1 Screen Space-Overlay —— 屏幕空间覆盖模式1.2 Screen Space-Camera —— 相机模式1.3 World Space —— 世界模式 2. Canvas Scaler&#xff1a;控制UI画布的放大缩放的比例2.1 Constant Pixer Size —— 恒定像素2.2 Scale With Screen S…
阅读更多...
牛客算法题【HJ96 表示数字】golang实现

牛客算法题【HJ96 表示数字】golang实现

题目 HJ96 表示数字 golang实现 package mainimport ("fmt""unicode" )func main() {s : ""var s_o stringvar char_pre, r runefor {n, _ : fmt.Scan(&s)if n 0 {break} else {for _, r range s {if unicode.IsDigit(r) {if !unicode.…
阅读更多...
renpy-renpy对话内容汉化

renpy-renpy对话内容汉化

文章目录 前言思路实现1,提取对话内容2,汉化对话内容文件3,修改gui文件,使得renpy游戏支持中文显示 前言 最近下载了一些renpy视觉小说内容,发现对话都为英文,因此我在想能否提取出这些对话然后汉化后再封装回原文件,将其汉化 当然汉化过程是机器翻译,汉化其他语言同理,大概5分…
阅读更多...
一文了解工业互联网是什么，和传统互联网的区别有哪些

一文了解工业互联网是什么，和传统互联网的区别有哪些

几个问题 工业互联网和传统互联网有什么区别 1 业务方面&#xff0c;传统的互联网企业更多是toC的业务&#xff0c;直接面对的是一个个的个体&#xff0c;而工业互联网离消费者更远一点&#xff0c;往往是toB或者toG的&#xff1b; 个人认为这也是最根本的区别&#xff0c;由…
阅读更多...
Linux expect命令详解

Linux expect命令详解

在Linux系统中&#xff0c;expect 是一款非常有用的工具&#xff0c;它允许用户自动化与需要用户输入进行交互的程序。本文将深入探讨expect命令的基本语法、使用方法以及一些最佳实践。 什么是Expect命令&#xff1f; expect 是一个用于自动化交互式进程的工具。它的主要功能…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023