性能优化并不是很复杂，它讲的就是如何让代码跑得更快、更流畅。这篇文章，我会用一些简单易懂的方法，从以下几方面提升 JavaScript 的性能：减少重绘和重排、使用节流和防抖技术，以及借助性能分析工具找问题。
减少重绘和重排：尽量减少浏览器的工作量
浏览器在显示网页的时候，会经过以下几个步骤：
- 重绘：当元素的颜色或者背景改变时触发。
- 重排：当元素的大小或位置改变时触发。
重排比重绘更耗时间，因为它需要重新计算布局和位置。比如每次调整一个表格的宽度，浏览器都得重新整理页面的布局。如果频繁触发这些操作，页面肯定会卡顿。
怎么减少重绘和重排？
-
合并 DOM 操作：
不要每次修改一个 DOM 都让它立即更新，可以用一个变量存起来，最后一次性更新。比如，先把 HTML 内容拼好，再插入页面：javascript 复制代码 let html = ''; for (let i = 0; i < 100; i++) { html += `<li>项目 ${i}</li>`; } document.getElementById('list').innerHTML = html; -
减少样式查询：
像offsetHeight、clientWidth这些属性，会强制浏览器重新计算布局。如果你用这些属性，一定要记得缓存结果，不要每次用都去算一次。
我的小经验：
以前在一个项目中，我在循环里不断获取 offsetHeight 来调整其他元素的位置，结果页面一直卡顿。后来，我把值缓存起来，最后统一调整，性能好了很多。所以，小细节真的很重要！
节流和防抖：解决频繁触发的问题
在页面上，有些操作会频繁触发，比如：
- 滚动条滚动：你一滚动，事件就触发无数次。
- 搜索框输入：每敲一个字母就触发一次搜索。
如果直接处理每一次事件，CPU 肯定忙不过来。这时候，我们可以用节流和防抖技术。
节流
节流的意思是：我规定一个时间间隔，比如 200 毫秒，间隔时间内只执行一次操作。
javascript
复制代码
function throttle(func, delay) {
let last = 0;
return function(...args) {
const now = Date.now();
if (now - last > delay) {
last = now;
func.apply(this, args);
}
};
}
防抖
防抖的意思是：如果事件一直触发，我就一直等，等到最后一次结束后再执行。
javascript
复制代码
function debounce(func, delay) {
let timer;
return function(...args) {
clearTimeout(timer);
timer = setTimeout(() => {
func.apply(this, args);
}, delay);
};
}
实际应用：
- 滚动事件可以用节流，让处理函数每隔一段时间运行一次。
- 搜索框可以用防抖，让搜索请求只在用户停止输入一段时间后再发起。
性能分析工具：找问题的“显微镜”
如果你想知道页面到底卡在哪了，可以用工具来分析。推荐用浏览器自带的 Google Chrome DevTools。
使用方法很简单：
- 打开网页，按下
F12或右键选择“检查”打开开发者工具。 - 选择
Performance面板，点击“开始录制”。 - 操作页面，比如滑动、点击，最后停止录制。
- 你会看到每一部分操作的耗时，找到耗时最多的部分，就能知道问题出在哪。
我的小心得：
有一次，我的页面加载特别慢，用 Performance 一看，发现是加载了几张大图片，拖慢了速度。我用图片压缩工具压缩了图片，页面速度马上提升了。这让我意识到，性能优化真的需要工具帮忙看“细节”。
总结
性能优化听起来可能很专业，但只要抓住几个重点，其实并不复杂：
- 减少 DOM 操作，优化页面重绘和重排。
- 用节流和防抖优化高频触发的事件。
- 善用性能分析工具，精准找到问题。
