JavaScript 延迟加载与预加载实战指南

作者：青柠时间：2026-10-24 07:24:48浏览：609

本文详细解析 JavaScript 中延迟加载（懒加载）与预加载的核心原理及具体实现方式。涵盖 defer、async 等脚本加载属性的区别，动态 DOM 创建、jQuery getScript 及 setTimeout 等延迟加载技巧，以及图片懒加载实现。同时介绍 CSS 背景图、JS 函数及 Ajax 等预加载手段，并对比两者在性能与用户体验上的差异，帮助开发者根据场景选择最优方案。

延迟加载（懒加载）和预加载是常用的 web 优化的手段。

一、延迟加载（懒加载）

原理：当真正需要数据时，才执行数据加载操作。目的：延迟加载机制旨在避免无谓的性能开销。

实现延迟加载的几种方法

1. 让 js 最后加载

使用方法：将外部引入的 js 文件放置在页面底部。用途：通过最后引入 js 文件来加快页面加载速度。说明：浏览器通常采用同步模式加载 js 文件，且 <script> 标签多置于结构最后，这是因为它会阻止浏览器后续操作。将其放在页面结构和样式全部渲染完成后再执行 js，可提升用户体验。

2. 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> 标签后再执行。
当浏览器解析到带有 defer 属性的 script 脚本时，会并行下载这些脚本，而不会阻塞页面后续处理。
所有带有 defer 属性的脚本保证按顺序依次执行。（但实际上延迟脚本并不一定会按照顺序执行，因此最好只包含一个延迟脚本）
defer 属性仅适用于外部脚本文件。

3. async 属性

使用方法：为 <script> 标签定义 async 属性。用途：不让页面等待脚本下载和执行，从而异步加载页面其他内容。


<!DOCTYPE html>
<html>
<head>
  <script src="test1.js" async></script>
  <script src="test2.js" async></script>
</head>
<body>
<!-- 这里放内容 -->
</body>
</html>

浏览器会立即下载脚本，但不妨碍页面中的其他操作，比如下载其他资源或等待加载其他脚本。加载和渲染后续文档元素的过程和 main.js 的加载与执行并行进行，这个过程是异步的。它们将在 onload 事件之前完成。

说明：

浏览器会立即下载脚本，但不妨碍页面中的其他操作，加载和渲染后续文档元素的过程和脚本的加载与执行并行进行。
这个过程是异步的，它们将在 onload 事件之前完成。
所有的 async 脚本不能控制加载的顺序。
async 属性仅适用于外部脚本文件。

4. 动态创建 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>

5. 使用 jquery 的 getScript 方法

使用方法：


Query.getScript(url,success(response,status))

url（必写）：将要请求的 URL 字符串
success(response,status)（可选）：规定请求成功后执行的回调函数。

其中的参数 response - 包含来自请求的结果数据 status - 包含请求的状态（"success", "notmodified", "error", "timeout" 或 "parsererror"）

用途：通过 HTTP GET 请求载入并执行 JavaScript 文件。


//加载并执行 test.js：
$.getScript("test.js");
//加载并执行 test.js ，成功后显示信息
$.getScript("test.js", function(){
 alert("Script loaded and executed.");
});

6.使用 setTimeout 延迟方法的加载时间

用途：延迟加载 js 代码，给网页加载留出时间


<script type="text/javascript">
 function A(){
  $.post("/lord/login",{name:username,pwd:password},function(){
   alert("Hello World!");
  })
 }
 $(function (){
  setTimeout("A()",1000); //延迟1秒
 })
</script>

常用实例 - 图片懒加载

原理：一张图片就是一个 <img> 标签，浏览器是否发起请求图片是根据 <img> 的 src 属性，所以实现懒加载的关键就是，在图片没有进入可视区域时，先不给 <img> 的 src 赋值，这样浏览器就不会发送请求了，等到图片进入可视区域再给 src 赋值。


<img class="lazy" src="img/loading.gif" lazy-src="img/pic1.jpg" >
<img class="lazy" src="img/loading.gif" lazy-src="img/pic2.jpg" >


function lazyload(){
 var visible;
 $('img').each(function () {
 if( typeof($(this).attr("lazy-src"))!="undefined" ){ // 判断图片是否需要懒加载
  visible = $(this).offset().top - $(window).scrollTop(); //图片距离顶部的距离
  if ((visible > 0) && (visible < $(window).height())) {// 判断图片是否在可视区域
    visible = true;// 图片在可视区域
  } else {
    visible = false;// 图片不在可视区域
  }
  if (visible) {
    $(this).attr('src', $(this).attr('lazy-src'));
  }
 }
 });
}
 // 打开页面触发函数
 lazyload();
 // 滚屏时触发函数
 window.onscroll =function(){
 lazyload(imgs);
 }

二、预加载

原理：提前加载图片，当用户需要查看时可直接从本地缓存中渲染。目的：牺牲前端性能，换取用户体验，使用户的操作得到最快的反映。

实现预加载的几种方法

1. css 实现

原理：可通过 CSS 的 background 属性将图片预加载到屏幕外的背景上。只要这些图片的路径保持不变，当它们在 Web 页面的其他地方被调用时，浏览器就会在渲染过程中使用预加载（缓存）的图片。简单、高效，不需要任何 JavaScript。


#preload-01 { background: url(http://domain.tld/image-01.png) no-repeat -9999px -9999px; }

#preload-02 { background: url(http://domain.tld/image-02.png) no-repeat -9999px -9999px; }

#preload-03 { background: url(http://domain.tld/image-03.png) no-repeat -9999px -9999px; }

2. js 预加载图片

原理：通过写函数进行预加载。将该脚本封装入一个函数中，并使用 addLoadEvent（），延迟预加载时间，直到页面加载完毕。


function preloader() {
  if (document.images) {
    var img1 = new Image();
    var img2 = new Image();
    var img3 = new Image();
    img1.src = "http://domain.tld/path/to/image-001.gif";
    img2.src = "http://domain.tld/path/to/image-002.gif";
    img3.src = "http://domain.tld/path/to/image-003.gif";
  }
}
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}
addLoadEvent(preloader);

3. 使用 ajax 实现预加载

原理：使用 Ajax 实现图片预加载的方法，利用 DOM，不仅仅预加载图片，还会预加载 CSS、JavaScript 等相关的东西


window.onload = function() {
  setTimeout(function() {
    // XHR to request a JS and a CSS
    var xhr = new XMLHttpRequest();
    xhr.open('GET', 'http://domain.tld/preload.js');
    xhr.send('');
    xhr = new XMLHttpRequest();
    xhr.open('GET', 'http://domain.tld/preload.css');
    xhr.send('');
    // preload image
    new Image().src = "http://domain.tld/preload.png";
  }, 1000);
};

上面代码预加载了“preload.js”、“preload.css”和“preload.png”。1000 毫秒的超时是为了防止脚本挂起，而导致正常页面出现功能问题。

三、懒加载与预加载的对比

1、概念

延迟加载也叫懒加载：当在真正需要数据的时候，才真正执行数据加载操作。预加载：提前加载，当用户需要查看时可直接从本地缓存中渲染

2、区别

两种技术的本质：两者的行为相反，一个是提前加载，一个是迟缓甚至不加载。
懒加载会对前端有一定的缓解压力作用，预加载则会增加前端的压力。

3、意义

懒加载的主要目的是优化前端性能，减少请求数或延迟请求数。预加载是牺牲前端性能，换取用户体验，使用户的操作得到最快的反映。

四、参考资料

【1】https://www.jb51.net/article/154930.htm 【2】https://www.jb51.net/article/57579.htm

到此这篇关于js中延迟加载和预加载的具体使用的文章就介绍到这了,更多相关js中延迟加载和预加载内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！

作者最新文章

ES6模块化中js文件怎么用import和export交互

2026-11-05 17:00:48

JS读取本地文件时报错或无响应的常见原因

2026-11-05 16:32:31

let、const与var的区别：JavaScript变量声明最佳实践

2026-11-05 14:16:38

JS中直接定义静态二维数组的字面量写法

2026-11-05 14:16:08

JS 怎么查找字符串中所有匹配项的位置

2026-11-05 14:15:53