一、减少重绘和重排
（一）理解重绘和重排
- 重排（reflow）是指当DOM的几何属性（如宽度、高度、位置等）发生变化时，浏览器需要重新计算元素的几何属性和位置，这个过程会导致整个文档的布局重新构建。例如，改变元素的宽度、高度、添加或删除可见的DOM元素等操作都会引起重排。
- 重绘（repaint）是指当元素的外观（如颜色、背景等）发生变化时，浏览器会重新绘制该元素。重绘的成本比重排要低，因为它不涉及布局的重新计算。
（二）优化策略
- 合并样式修改：尽量避免频繁地修改单个元素的样式属性。例如，不要多次修改一个元素的 width 、 height 等属性，而是将这些修改合并到一个操作中。可以使用 class 来一次性修改多个样式属性。比如：
javascript
// 不推荐 element.style.width = '100px'; element.style.height = '100px'; element.style.backgroundColor = 'red';
// 推荐 element.classList.add('new-style');
其中 .new - style 的CSS定义如下：
css
.new-style { width: 100px; height: 100px; background - color: red; }
- 脱离文档流：对于一些需要频繁修改样式的元素，可以将其从文档流中脱离出来，这样它的样式修改就不会引起父元素和其他元素的重排。例如，使用 absolute 或 fixed 定位将元素脱离文档流，修改样式后再将其放回。不过，这种方法需要谨慎使用，因为脱离文档流可能会影响页面的布局结构。
二、使用节流和防抖技术
（一）节流（throttle）
- 概念：节流是指在一定时间内，只允许函数执行一次。例如，在用户滚动页面时，可能会触发大量的事件，如果不进行节流，可能会导致性能问题。通过节流，可以限制函数在一段时间内只执行一次，比如每100毫秒执行一次，这样可以有效减少函数的执行次数。
- 实现示例：
javascript
function throttle(func, delay) { let timer = null; return function() { if (!timer) { func.apply(this, arguments); timer = setTimeout(() => { timer = null; }, delay); } }; }
可以这样使用：
javascript
const throttledFunction = throttle(() => { console.log('函数被执行'); }, 1000); window.addEventListener('scroll', throttledFunction);
在这个例子中，当用户滚动页面时， throttledFunction 最多每1000毫秒执行一次。
（二）防抖（debounce）
- 概念：防抖是指在事件被触发后，延迟一段时间执行函数，如果在这段延迟时间内事件又被触发，则重新计算延迟时间。比如，在用户在搜索框中输入内容时，我们希望在用户停止输入一段时间后再发送搜索请求，这时就可以使用防抖。
- 实现示例：
javascript
function debounce(func, delay) { let timer = null; return function() { if (timer) { clearTimeout(timer); } timer = setTimeout(() => { func.apply(this, arguments); timer = null; }, delay); }; }
使用方式如下：
javascript
const debouncedFunction = debounce(() => { console.log('函数被执行'); }, 500); document.getElementById('input').addEventListener('input', debouncedFunction);
当用户在 id 为 input 的输入框中输入内容时， debouncedFunction 会在用户停止输入500毫秒后执行。
三、使用性能分析工具
（一）浏览器开发者工具
- 大多数现代浏览器（如Chrome、Firefox等）都提供了强大的开发者工具来分析JavaScript性能。在Chrome中，可以通过按 F12 打开开发者工具，然后切换到 Performance （性能）选项卡。
- 在这里，可以记录页面加载和运行过程中的各种性能指标，如脚本执行时间、重绘和重排次数、函数调用栈等。通过分析这些数据，可以找出性能瓶颈所在。例如，如果发现某个函数占用了大量的执行时间，可以考虑对其进行优化。
（二）第三方性能分析工具
- Lighthouse：这是一个开源的自动化工具，用于提高网页质量。它可以对网页进行性能、可访问性、最佳实践等多个方面的评估。可以作为Chrome扩展程序安装，也可以通过命令行使用。Lighthouse会给出详细的报告和改进建议，帮助开发者优化网页性能。
- WebPageTest：这是一个在线工具，它可以从多个地点和浏览器配置来测试网页的性能。它提供了详细的性能数据，包括页面加载时间、首次字节时间（TTFB）、资源加载情况等。通过这些数据，可以比较不同优化策略的效果，从而找到最佳的优化方案。
