前言
Web 作为一个充满互动的平台，各式各样的交互元素、复杂的页面结构以及海量的媒体资源无一不增加了网页的加载时间，直接影响着用户的体验。性能优化是前端工程化中必不可少的环节，本文主要介绍使用 JavaScript 异步加载和延迟加载资源的常见技巧，以帮助开发者提升页面性能和用户体验。
什么是异步加载和延迟加载资源？
异步加载和延迟加载资源是两种常见的性能优化方式。异步加载资源是在页面创建过程中，通过 JavaScript 动态地添加需要异步加载的资源，可以分为并行加载和串行加载两种方式。延迟加载资源是当页面加载完成后，通过 JavaScript 延迟需要加载的资源，以达到优化页面性能的目的。
异步加载资源
异步加载资源是让网页在浏览器的下载程度允许的情况下，尽早地展示，增加页面的响应速度和用户体验。
并行加载资源
并行加载资源是指将需要加载的资源按照并列的方式同时加载，从而减少加载时间。以下代码展示了一种通过动态创建 script 标签实现并行加载外部 JavaScript 的方式：
var addScript = function(url) {
var script = document.createElement('script');
script.type = 'text/javascript';
script.async = true;
script.src = url;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(script, s);
};串行加载资源
串行加载资源是指将需要加载的资源逐一加载，保证加载时的稳定性和资源的可用性。以下代码展示了一种通过动态创建 script 标签以依次加载外部 JavaScript 的方式：
-- -------------------- ---- -------
--- --------- - -------------- -
--------------- -- --------- ---- - ------- ------
--- - - -------------------------------------------
--- ---- - ---------- -
----------------- -
--- --- - -------------
--- ------ - ---------------------------------
----------- - ------------------
------------- - ------------------------- - ---------- -
-------
--
---------- - ----
--------------------------------- ---
-
--
-------
--延迟加载资源
延迟加载资源是根据网页内容，在页面下载完成后才去下载自己所需的一些组件和内容，达到节省带宽和提高加载速度的目的。
延迟图片加载
延迟加载图片是优化页面性能和用户体验的常见手段之一，以下代码展示了一种基于 lazyload.js 程序模块实现的延迟加载图片的方式：
-- -------------------- ---- -------
----------------- --------- ---------- -
--- -- - ----------- ---- -
-- --------------------------- -
--- - -----------------------------
- ---- -
--- - - --------- - - ---------------- -- ---------------------
------------ -------
------- - - ------ - - -- - - --- - - --------- - - -- ---- -
------------------- -- -------------
-
----------------
--- - --
-
------ ----
--
---------------- - ------------- --- -
----------------------- - -------------------------- --- ------ - -------------------- - --------------------- - ---- --- - --------- - ---- - ---
--
---- - ------------- ---- -
------ ----------------------------------------- -----
--
-------- ------------- --- -
--- --- - --- --------
--- - ----------------------------
---------- - ---------- -
-- --- ---------- -
--------------------------- ---
- ---- -
------ - ----
-
-- - ---- - -----
-
------- - ----
-
-------- --------------------- -
--- ---- - --------------------------
------ -
-------- -- -
-- --------- -- -
-- -------- -- ------------------- -- --------------------------------------
-
-
--- ------ - --- --------
----- - ---------------
------------- - ---------- -
--- ---- - - -- - - -------------- ---- -
-- ------------------------------ -
-------------------- -------- -- -
---------------- ---
---
-
--
--
--- ---- - - -- - - ------------- ---- -
----------------------
-
----------------
-----------------------------------------
---------- ----------延迟加载视频和音频
延迟加载视频和音频可以通过一些 jQuery 插件实现，比较常用的是 lazyYT，以下为使用 lazyYT 插件加在视频的示例代码：
jQuery(function() {
jQuery("div.lazyYt").lazyYT();
});小结
通过以上介绍可以看到，使用 JavaScript 异步加载和延迟加载资源是前端性能优化的重要手段之一。在实际项目中，我们可以根据具体情况选择使用并行加载、串行加载、延迟加载图片、延迟加载视频、音频等优化方式，提升页面性能和用户体验，更好的展示网页内容。
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/67cdc950e46428fe9e782371