每天一个js小技巧 - 加快网站加载时间
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 属性，允许它独立于页面的其余部分下载和执行。
下一篇：
java如何实现跨平台的