每天一个js小技巧 - 加快网站加载时间

最新推荐文章于 2024-07-30 10:56:44 发布

Adelbert 1002@

最新推荐文章于 2024-07-30 10:56:44 发布

阅读量474

点赞数 1

分类专栏： js 文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/qq_40946635/article/details/131069700

版权

js 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

tip：一个快速、响应迅速且用户友好的网站不仅可以吸引和留住访问者，还有助于提高搜索引擎排名、提高转化率和改善用户体验 (UX)，作为软件工程师或 Web 开发人员，必须在项目中优先考虑性能优化技术。

以下是一些日常开发中能常用的优化方法：

1、捆绑网络请求

捆绑是将多个 JavaScript 文件组合成一个文件的过程。这减少了浏览器需要发出的 HTTP 请求的数量，从而加快了加载过程，最小化的请求数量，可以减少浏览器下载和处理必要资源所需的时间，从而缩短加载时间并提供更灵敏的用户体验。捆绑可以显着提高网站性能，尤其是对于具有大量较小 JavaScript 文件的网站。
常用工具：Webpack、Rollup等

假设有三个独立的 JavaScript 文件：

// main.js
import { greet } from './greeting.js';
import { calculate } from './math.js';
console.log(greet('John'));
console.log(calculate(5, 3));

// greeting.js
export function greet(name) {
  return `Hello, ${name}!`;
}

// math.js
export function calculate(x, y) {
  return x * y;
}

使用 Webpack 或 Rollup 等捆绑工具，可以将这些文件组合成一个捆绑文件。输出可能看起来像这样：

(function () {
  'use strict';
  function greet(name) {
    return `Hello, ${name}!`;
  }
  function calculate(x, y) {
    return x * y;
  }
  console.log(greet('John'));
  console.log(calculate(5, 3));
})();

捆绑文件将原始文件中的所有必要代码包含在一个独立的单元中，从而减少了加载脚本所需的网络请求数。

2、延迟加载

一般用在视口中的图像加载，可以使用 IntersectionObserver API 来实现。常见的使用方法是向图像元素添加一个 data-src 属性，其中包含实际的图像源。使用这种简单的延迟加载技术，可以确保只加载当前查看的图像，减少网络请求的数量并缩短网站的初始加载时间。

<img data-src="path/to/image.jpg" class="lazy-load" alt="An example image">

然后，创建一个脚本来设置 IntersectionObserver 以在图像进入视口时加载图像。

document.addEventListener('DOMContentLoaded', function () {
  const lazyImages = [].slice.call(document.querySelectorAll('.lazy-load'));
  if ('IntersectionObserver' in window) {
    const lazyImageObserver = new IntersectionObserver(function (entries, observer) {
      entries.forEach(function (entry) {
        if (entry.isIntersecting) {
          const lazyImage = entry.target;
          lazyImage.src = lazyImage.dataset.src;
          lazyImage.classList.remove('lazy-load');
          lazyImageObserver.unobserve(lazyImage);
        }
      });
    });
    lazyImages.forEach(function (lazyImage) {
      lazyImageObserver.observe(lazyImage);
    });
  }
});

在此示例中，IntersectionObserver 监视 .lazy-load 图像是否进入视口。检测到图像时，会将其 data-src 属性分配给 src 属性，从而触发实际的图像下载。加载图像后，将删除延迟加载类，并且不会观察到图像。

3、 js 文件的异步加载

异步加载允许浏览器下载和执行 js 文件，而不会阻止页面其余部分的呈现。通过使用 async 和 defer 属性，可以控制 js 文件的加载和执行行为。可以最大限度地减少渲染阻塞资源并提高网站的性能和用户体验。

在 HTML 文件中使用 async 和 defer 属性的例子：

<!DOCTYPE html>
<html>
<head>
  <!-- Using the defer attribute -->
  <script src="main.js" defer></script>
</head>
<body>
  <!-- Using the async attribute -->
  <script src="analytics.js" async></script>
</body>
</html>

在此示例中，main.js 加载了 defer 属性，确保它不会阻塞渲染，并在 DOM 完全解析后执行。同时，analytics.js 加载了 async 属性，允许它独立于页面的其余部分下载和执行。

Adelbert 1002@

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
每天一个js小技巧 - 加快网站加载时间

这减少了浏览器需要发出的 HTTP 请求的数量，从而加快了加载过程，最小化的请求数量，可以减少浏览器下载和处理必要资源所需的时间，从而缩短加载时间并提供更灵敏的用户体验。使用这种简单的延迟加载技术，可以确保只加载当前查看的图像，减少网络请求的数量并缩短网站的初始加载时间。在此示例中，main.js 加载了 defer 属性，确保它不会阻塞渲染，并在 DOM 完全解析后执行。捆绑文件将原始文件中的所有必要代码包含在一个独立的单元中，从而减少了加载脚本所需的网络请求数。Webpack、Rollup等。
复制链接

扫一扫