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