本文将探讨如何通过优化JavaScript代码来提高前端应用的性能。我们将重点讨论减少重绘和重排、使用节流和防抖技术以及使用性能分析工具等方面的技巧和方法。
🎃 1. 减少重绘和重排
在理解如何优化JavaScript代码之前，我们首先需要了解什么是重绘和重排(也叫回流)。
- 重绘（Repaint）是指当元素样式改变，但并不影响其在文档流中的位置时，浏览器会重新绘制该元素。
- 重排（Reflow）则是指当元素的尺寸、位置或布局发生变化时，浏览器需要重新计算并重新布局整个文档。
简要概括: 重绘是样式变化,重排是几何尺寸变化,回流一定引发重绘，重绘不一定引发回流。
以下是一些修改会导致重绘的常见样式：
| color | border-style | visibility | background |
| outline | border-radius | box-shadow | text-decoration |
以下是一些修改会导致重排的常见样式：
- 添加或者删除可见的DOM元素；
- 修改元素的尺寸，包括宽度、高度、内外边距等。
- 内容变化，比如用户在input框中输入文字
- 浏览器窗口尺寸改变——resize事件发生时
- 计算 offsetWidth 和 offsetHeight 属性
为了减少重绘和重排，我们可以采取以下措施：
- 使用CSS动画代替JavaScript动画，因为CSS动画通常由浏览器进行优化，不会引起重排。
- 使用
transform(替代top)和opacity(替换display:none)等属性进行动画效果，因为它们不会引起重排。
🎨 2. 使用节流和防抖技术
节流（Throttling）和防抖（Debouncing）是两种常见的优化技术，用于控制事件触发的频率，从而减少不必要的计算和网络请求。
- 节流,是指在一定时间间隔内只执行一次操作。例如，当用户频繁滚动页面时，我们可以使用节流来限制滚动事件的触发频率，避免过多的计算和渲染操作。
- 防抖,是指在一定时间间隔内，只有在事件停止触发后才执行操作。例如，当用户连续输入时，我们可以使用防抖来延迟请求数据的操作，只在用户停止输入后才发送请求，避免频繁的网络请求。
简单的例子:
- 节流相当于技能的 CD,CD 转好了才能用.
- 防抖相当于回城,被打断了需要重新读秒.
以下是简单实现节流和防抖的代码示例(闭包的应用)：
// 节流
function throttle(func, delay) {
let timer = null;
return function(...args) {
if (!timer) {
timer = setTimeout(() => {
func.apply(this, args);
timer = null;
}, delay);
}
};
}
// 防抖
function debounce(func, delay) {
let timer = null;
return function(...args) {
clearTimeout(timer);
timer = setTimeout(() => {
func.apply(this, args);
}, delay);
};
}
⚙️ 3. 使用性能分析工具等
性能分析工具可以帮助我们深入了解应用的性能瓶颈，从而进行有针对性的优化。其中，Lighthouse是一款常用的性能分析工具，它可以提供关于网页性能的各种指标和建议。
以下是使用 Lighthouse 进行性能分析的简要步骤：
- 在Chrome浏览器中打开开发者工具（F12）。
- 切换到"Lighthouse"选项卡。
- 选择要分析的设备类型和网络条件。
- 点击"Generate report"按钮，Lighthouse将自动运行分析，并生成性能报告。
常见的几个性能指标包括：
- First Contentful Paint (FCP)：首次内容绘制的时间，表示页面开始显示内容的时间点。
- Largest Contentful Paint (LCP)：最大内容绘制的时间，表示页面主要内容绘制完成的时间点。
- Cumulative Layout Shift (CLS)：累计布局偏移，表示页面上元素发生意外移动的程度。
通过分析这些指标，我们可以了解页面加载和渲染的性能情况，并根据建议进行优化。
