在构建高性能网站时，JavaScript 可能是你的好朋友，也可能是你的噩梦。一些精心选择的优化技术可以显著加快你的网站速度，从而带来更流畅的用户体验。
以下 10 条提示深入探讨了性能提升实践，分解了每条实践背后的“原因”和“方式”：
1. 尽量减少 DOM 操作
修改 DOM 就像每次需要一双袜子时重新整理整个衣柜一样，非常耗时！每次 DOM 操作都会触发重新渲染，这会降低你的应用速度，尤其是当你一次进行多项更改时。
相反，请尝试批量更新 DOM。
如果你必须操作 DOM，请尽量以尽量减少重排和重绘的方式进行，例如，使用 DocumentFragment 或在将其插入 DOM 之前构建 UI 结构。你的用户会感谢你多花几秒钟的注意力。
示例：
const fragment = document.createDocumentFragment();
data.forEach(item => {
const element = document.createElement('div');
element.textContent = item.name;
fragment.appendChild(element);
});
document.body.appendChild(fragment);2. 防抖和节流用户事件
你是否曾看到过网站在您尝试滚动时变得非常慢？这可能是因为每次您移动时，网站都会触发大量事件侦听器。
防抖和节流通过限制函数调用的频率来防止这种过载。节流允许操作以指定的间隔发生，而防抖则确保函数仅在上次事件发生后经过一定时间后触发。
节流示例：
const throttle = (fn, limit) => {
let lastFunc, lastRan;
return function(...args) {
if (!lastRan) {
fn.apply(this, args);
lastRan = Date.now();
} else {
clearTimeout(lastFunc);
lastFunc = setTimeout(function() {
if ((Date.now() - lastRan) >= limit) {
fn.apply(this, args);
lastRan = Date.now();
}
}, limit - (Date.now() - lastRan));
}
};
};
// Usage with a scroll event
window.addEventListener('scroll', throttle(handleScroll, 200));3. 延迟加载资源
Web 性能的一个关键方面是确保用户仅在需要时加载他们需要的内容。
延迟加载就是针对图像、脚本和其他重资源的。
例如，对屏幕外图像实施延迟加载不仅可以加快页面加载时间，还可以改善移动数据使用情况。
大多数浏览器现在都支持使用 loading="lazy" 实现图像的原生延迟加载，但您也可以使用 JavaScript 来实现此目的，以获得更多控制。
示例：
<img src="image.jpg" loading="lazy" alt="Lazy loaded image">4. 使用 Web Workers 进行繁重计算
JavaScript 通常在主线程上运行，如果与繁重计算有关，则可能意味着用户的性能会很差。
Web Workers 允许您在主线程之外运行代码，让用户感觉繁重的任务变得轻松很多。
使用 Web Workers 的示例：
const worker = new Worker('worker.js');
worker.postMessage('start');
worker.onmessage = (e) => {
console.log(`Worker said: ${e.data}`);
};5. 选择原生 JavaScript 而非库
虽然像 jQuery 这样的库让 JavaScript 更容易访问，但它们也有自己的负担。如今的原生 JavaScript 拥有库曾经添加的大部分功能。
这意味着您可以跳过加载整个库的过程，只需进行基本的 DOM 操作即可。
代码越少，加载时间越快 — — 这对用户来说是一种胜利。
// Instead of jQuery's $('#myElement').addClass('active')
document.getElementById('myElement').classList.add('active');6. 使用异步和延迟加载脚本
如果处理不当，JavaScript 文件可能会阻止网页的呈现。async 和 defer 属性可以通过加载 JavaScript 而不占用整个页面来防止这种情况。
async 在下载脚本后立即执行，而 defer 则等到 HTML 文档完全解析后再执行。
<script src="script.js" async></script>
<script src="script.js" defer></script>7. 使用动态导入实现代码拆分
如果用户可能根本不需要，为什么要预先加载所有内容？代码拆分可让您将代码拆分为多个包，仅加载特定页面或组件所需的内容。
动态导入使此操作更加容易，允许您仅在需要时有条件地导入模块。
// Importing a module only when needed
if (condition) {
import('./module.js').then(module => {
module.someFunction();
});
}8. 减少对全局变量的依赖
全局变量就像一个不断插话的家庭成员——它们可能会通过相互冲突和霸占主范围而导致意外问题。
使用局部变量或将功能封装在函数内以限制全局范围内的混乱，从而减少出错的机会并使您的代码更快。
function scopedFunction() {
let localVariable = 'This stays here';
}9. 优化循环和迭代
如果不进行优化，循环很快就会成为性能瓶颈。例如，如果您反复访问大型数组或对象的长度或其他属性，则循环速度会很慢。
通过缓存长度并避免在循环内进行过多的 DOM 查找，您可以节省宝贵的处理时间。
const array = [1, 2, 3, 4];
for (let i = 0, len = array.length; i < len; i++) {
console.log(array[i]);
}10. 利用缓存的力量
Web 浏览器带有一个称为缓存的便捷功能。通过设置 HTTP 标头以鼓励缓存，您可以允许用户在本地存储您网站的部分内容。
这意味着后续访问的加载时间更快，对服务器的请求更少。这就像为用户提供您网站的 VIP 通行证，让他们无需排队。
Cache-Control: public, max-age=31536000总结
以上就是今天这篇文章跟您分享的全部内容，希望对你有所帮助。
