在构建高性能网站时，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 eventwindow.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 neededif (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

优网科技秉承"专业团队、品质服务" 的经营理念，诚信务实的服务了近万家客户，成为众多世界500强、集团和上市公司的长期合作伙伴！

优网科技成立于2001年，擅长网站建设、网站与各类业务系统深度整合，致力于提供完善的企业互联网解决方案。优网科技提供PC端网站建设（品牌展示型、官方门户型、营销商务型、电子商务型、信息门户型、DIY体验、720全景展厅及3D虚拟仿真）、移动端应用（手机站、APP开发）、微信定制开发（微信官网、微信商城、企业微信）、微信小程序定制开发等一系列互联网应用服务。