引言
本篇实践记录将探讨如何通过优化JavaScript代码来提高性能，包括减少重绘和重排、使用节流和防抖技术以及使用性能分析工具。这些技巧可以帮助我们优化Web应用程序，提高用户体验。
一 减少重绘和重排
重绘和重排（回流）是导致页面性能下降的常见原因。通过优化JavaScript代码，可以减少重绘和重排的次数，提高页面的渲染性能。
1.使用样式类替代直接修改样式属性：通过添加或移除样式类，可以减少重绘和重排的次数。相比直接修改样式属性，使用样式类的方式更高效。 比如：
// 添加样式类
element.classList.add('my-style');
// 移除样式类
element.classList.remove('my-style');
2.批量更新DOM：当需要修改多个DOM元素的样式时，可以将这些修改封装在一个函数中，一次性进行更新。这样可以减少浏览器的重绘和重排次数。比如：
function updateStyles() {
element1.style.color = 'red';
element2.style.backgroundColor = 'blue';
// ...
elementN.style.display = 'none';
}
3.使用requestAnimationFrame：使用requestAnimationFrame方法可以让浏览器在下一次重绘之前执行指定的函数。这样可以将多个DOM操作合并到一次重绘中，提高性能。比如：
function updateDOM() {
requestAnimationFrame(() => {
element.style.width = '100px';
element.style.height = '100px';
element.style.opacity = '0.5';
// ...
});
}
4.避免强制同步布局：在获取某些属性（如offsetWidth、offsetHeight等）时，会触发强制同步布局，导致重绘和重排。尽量避免频繁获取这些属性，或者使用缓存来减少获取次数。比如：
// 获取宽度
let width = element.offsetWidth;
// 获取高度
let height = element.offsetHeight;
二 使用节流和防抖技术
在处理一些频繁触发的事件，如窗口resize、滚动事件或输入框输入事件时，使用节流（throttling）和防抖（debouncing）技术可以减少函数的执行次数，提高性能。
1.节流（Throttling）：节流是指在一段时间内只触发一次函数执行。例如，在处理窗口resize事件时，可以使用节流来限制函数的执行频率，避免过于频繁的执行。
function throttle(func, delay) {
let timer;
return function() {
if (!timer) {
timer = setTimeout(() => {
func.apply(this, arguments);
timer = null;
}, delay);
}
};
}
// 使用节流
window.addEventListener('resize', throttle(handleResize, 200));
2.防抖（Debouncing）：防抖是指在一定时间内没有再次触发事件时才执行函数。例如，在处理输入框的输入事件时，可以使用防抖来限制函数的执行频率，避免每次输入都触发函数执行。
function debounce(func, delay) {
let timer;
return function() {
clearTimeout(timer);
timer = setTimeout(() => {
func.apply(this, arguments);
}, delay);
};
}
// 使用防抖
input.addEventListener('input', debounce(handleInput, 300));
ps：使用节流和防抖可以有效地减少函数的执行次数，提高性能。可以使用Lodash等库来方便地实现这些技术。
三 使用性能分析工具
性能分析工具可以帮助我们深入了解Web应用的性能表现，并找出性能瓶颈和优化的点。
1.Chrome开发者工具：Chrome浏览器提供了强大的开发者工具，其中包含了性能分析工具。通过打开开发者工具的Performance面板，可以记录网页在加载和运行过程中的性能数据，帮助我们找出性能瓶颈和优化的点。
2.Lighthouse：Lighthouse是一个开源的性能分析工具，在Chrome浏览器中可用。它提供了一系列的性能指标和建议，可以评估网页的性能并提供优化建议。
3.WebPageTest：WebPageTest是一个在线性能测试工具，可以模拟不同的网络条件和设备来测试网页的加载速度和性能。它提供了详细的性能报告和分析，帮助我们了解页面的加载过程，并提供改进建议。
4.DevTools Performance Tab：DevTools Performance Tab是Chrome开发者工具的一个功能，用于分析网页的性能问题。它可以记录和分析页面的渲染过程、JavaScript执行情况、样式计算和布局等信息，以便我们找到性能瓶颈并进行优化。
通过使用这些性能分析工具，我们可以获得详尽的性能数据和分析报告，了解网页的加载过程、JavaScript执行情况以及各个阶段的性能瓶颈。根据这些数据和建议，我们可以针对性地优化JavaScript代码，从而提高页面的性能和响应速度。
总结
通过优化JavaScript代码来提高性能是一个重要的任务，它可以提升用户体验并减少页面的加载时间。在这篇笔记中，我们讨论了减少重绘和重排的技巧，包括使用样式类、批量更新DOM、使用requestAnimationFrame和避免强制同步布局。我们还介绍了使用节流和防抖技术来优化频繁触发的事件处理。最后，我们探讨了使用性能分析工具来深入了解网页性能，并给出了常用的性能分析工具。
通过应用这些技巧和利用性能分析工具，我们可以有效地优化JavaScript代码，提高页面的性能和用户体验。
今天的笔记就写到这里啦~ 学习之路任重而道远，下次见啦~
