【JavaScript】延迟加载 js 脚本

原创已于 2024-10-08 16:10:15 修改 · 434 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言 #ecmascript

于 2024-07-23 11:04:02 首次发布

JavaScript 专栏收录该内容

135 篇文章

订阅专栏

延迟加载 js 脚本

defer 属性：在 HTML 中通过设置 script 标签的 defer 属性来实现脚本的延迟加载，即脚本的下载与 HTML 的解析不会阻塞彼此，脚本会在 HTML 解析完成后才执⾏。defer是“渲染完再执行”，async是“下载完就执行”。
async 属性：在 HTML 中通过设置 script 标签的 async 属性来实现脚本的异步加载，即脚本的下载与 HTML 的解析不会阻塞彼此，脚本下载完成后会⽴即执⾏，但脚本执⾏时可能会阻塞 HTML 解析。<script src="test.js" async></script>

在这里插入图片描述

动态加载脚本：通过 JavaScript 动态创建 script 标签，并设置其 src 属性来实现脚本的异步加载，这种⽅式需要在脚本加载完成后⼿动执⾏脚本。

var script = document.createElement('script');
script.src = 'test.js';
document.body.appendChild(script);

懒加载模式：在需要时再加载脚本，可以使⽤ jQuery 等库实现，或者通过⾃⼰编写的函数来实现。
让 JS 最后加载：将 <script> 放在⻚⾯内容的底部（即</body>前），也就是让浏览器从上到下解析完 HTML 后再加载 JS 脚本⽂件，从⽽起到延迟加载的作⽤。
使⽤ Intersectionobserver API：可以在元素进⼊视窗时再加载脚本，实现延迟加载。

var observer = new IntersectionObserver(
  function (entries) {
    if (entries[0].isIntersecting) {
      var script = document.createElement("script");
      script.src = "test.js";
      document.body.appendChild(script);
    }
  },
  { threshold: 0.5 }
);
var target = document.querySelector("#target");
observer.observe(target);

setTimeout ：设置⼀个定时器来延迟加载 JS 脚本⽂件。但是不好控制时间，不推荐使用。如果时间设置过⻓，会延迟⻚⾯的加载速度；如果时间设置过短，可能会在⻚⾯还没有完全加载完成时执⾏脚本，导致错误。

为什么 html 要在 body 的最后面

将 HTML 中的 <script> 标签放在 <body> 标签的末尾是为了提升网页的加载性能。原因主要有以下几点：

避免阻塞页面渲染：当浏览器解析 HTML 时，如果遇到位于页面顶部的 <script> 标签，浏览器会暂停解析和渲染，直到脚本加载并执行完毕。把脚本放在 <body> 的末尾，可以让页面的其他内容（如 HTML 和 CSS）先加载并渲染，提升用户的体验。
页面元素的可访问性：有时脚本会操作页面中的 DOM 元素。如果脚本在 HTML 的头部或内容之前执行，页面的 DOM 还未完全构建，可能导致脚本无法正确找到或操作这些元素。将脚本放在页面底部可以确保 DOM 在脚本执行时已经完全加载。
减少感知延迟：如果脚本加载时间较长，放在头部会让用户觉得页面加载缓慢甚至卡住。而放在底部，用户至少可以先看到内容，减少等待的感知。

当然，使用 defer 或 async 属性也可以让脚本在不阻塞 HTML 渲染的情况下加载和执行。这些属性的区别在于：