顺风强烈反应 - Javascript

什么是顺风强烈反应？

顺风强烈反应（俗称顺丰反应）是指在前端开发中，当我们使用类似 jQuery 或者 Vue 这样的框架/库进行DOM操作时，由于其很好的封装性，常常不需要手动处理DOM元素的变化，而导致我们忘记DOM操作的本质——DOM的变化会触发浏览器的一系列重排和重绘操作。而当操作过多或者操作链过长时，这些操作的触发可能会引起浏览器的性能负担和卡顿。

如何解决顺风强烈反应？

1. 减少 DOM 操作

尽量减少 DOM 操作，这样能够减少触发浏览器的重排和重绘。原则上我们应该在JavaScript中对 DOM 进行更改，而不是写 HTML 并且发送到浏览器中。

2. 批量处理 DOM 操作

将多次 DOM 操作合并成一次，尽可能减少不必要的 DOM 操作。比如一个新建元素并向其中追加内容比将整个DOM完整拼接起来要快，因为DOM操作开销很大。

3. 使用虚拟DOM

虚拟DOM将原本 DOM 操作直接映射到 JavaScript 对象，通过对 DOM 的计算和比对得出每次的更新并最小化更新范围，有效减少 DOM 操作的成本。Vue 和 React 等框架都使用了虚拟DOM，但并不是所有情况下虚拟DOM都是优于直接 DOM 操作的。

4. 使用 CSS3 动画

尽量使用 CSS3 实现动画效果而非 JavaScript 实现，因为动画本身触发页面的重绘和重排过程。但需要注意的是，仅在 CSS3 动画对应的元素不频繁发生布局和绘制变化的情况下才适用。

5. 使用 requestAnimationFrame

requestAnimationFrame 将会在浏览器重绘之前调用指定的回调函数，从而避免了一些不必要的浏览器重排和重绘。该API可提高动画、滚动等方面的性能。

结语

顺风强烈反应的解决方案并不是固定的，而是需要根据实际情景进行选择。我们应该始终明确一点，在开发过程中，我们不仅要关注代码的正确性和易维护性，还需要关注其对浏览器性能的影响。