[软技能] 第1411天 如何更好的避免重绘和回流？

避免回流

• 避免频繁操作DOM元素的布局属性。最好的方法是在JavaScript中缓存DOM元素的引用，然后一次性修改多个布局属性。
• 避免在JavaScript中频繁读取DOM元素的布局属性。最好的方法是将需要多次访问的布局属性存储在一个变量中，然后在需要使用时直接访问变量。
• 避免使用table布局。因为table布局会强制浏览器对整个表格进行回流，即使只改变一个单元格的布局属性。
• 使用position属性和float属性代替margin属性来对元素进行定位。因为margin属性会影响元素的布局，从而引起回流。
• 使用绝对定位的元素来覆盖其他元素，而不是改变其他元素的布局属性。这样可以避免其他元素的布局属性发生改变。
• 避免频繁修改文档的字体大小。因为字体大小的改变会影响到整个文档的布局。
• 避免使用脚本来修改元素的样式。因为脚本会在DOM元素加载完成之前就执行，这会导致多次回流。
• 避免在页面加载时执行复杂的计算。最好的方法是将计算放在一个Web Worker中，以避免阻塞页面的渲染过程。
• 使用CSS3的transform属性来改变元素的位置、大小和旋转角度。transform不会引起回流，可以减少回流的次数。
• 将需要多次访问的DOM元素缓存到变量中，这样可以避免频繁地访问DOM元素，减少回流的次数。

避免重绘

• 避免使用CSS表达式。CSS表达式是一种JavaScript表达式，它可以在样式中动态计算属性值。由于每次计算都会导致重绘，因此应该避免使用CSS表达式。
• 使用CSS3的transform属性来改变元素的位置、大小和旋转角度。transform只会引起重绘，不会引起回流，因此可以减少重绘的次数。
• 避免在JavaScript中频繁操作样式属性。最好的方法是使用一个class来改变元素的样式，而不是直接操作样式属性。这样做可以减少重绘的次数。
• 避免在JavaScript中频繁访问DOM元素的属性。最好的方法是在一个变量中缓存DOM元素的引用，然后操作变量。这样做可以避免不必要的重绘。
• 避免在页面加载时执行复杂的计算。最好的方法是将计算放在一个Web Worker中，以避免阻塞页面的渲染过程。
• 使用CSS3的will-change属性来告诉浏览器哪些元素将要被改变。这个属性可以让浏览器提前为这些元素做好准备，以减少重绘的次数。
• 避免使用透明度和滤镜。透明度和滤镜会导致元素的像素值发生变化，从而引起重绘。
• 避免在页面中使用大量的阴影效果。阴影效果会导致元素的像素值发生变化，从而引起重绘。
• 避免在页面中使用大量的渐变效果。渐变效果会导致元素的像素值发生变化，从而引起重绘。
• 避免在页面中使用大量的动画效果。动画效果会导致元素的像素值发生变化，从而引起重绘。如果必须使用动画效果，最好使用requestAnimationFrame()方法来执行动画。这个方法可以确保动画在下一次重绘时执行，从而避免不必要的重绘。

更多题目：

github.com/haizlin/fe-…