update: reflow

2021-01-19 21:23:49 +08:00
parent 0c3df74022
commit a06e66c726
2 changed files with 51 additions and 25 deletions
--- a/13-前端面试/02-前端性能优化/02-渲染优化.md
+++ b/13-前端面试/02-前端性能优化/02-渲染优化.md
@@ -11,3 +11,17 @@
 关于浏览器的渲染机制，可以看本教程的另外一篇文章：

 > 《前端面试/面试必看/浏览器渲染机制.md》
+
+
+## 避免布局抖动（layout thrashing）
+
+1、尽量避免 reflow：
+
+比如说，如果想改变一个元素的位置，很多人可能会使用相对布局的left、top属性，但是这个属性会引起 reflow。我们可以使用 `transfrom:translate`让元素做位移，这个属性既不会触发 reflow，也不会触发 repaint，只会触发 conmposite。
+
+再比如说，vue、react这样的框架，采用了虚拟DOM，它会把涉及到DOM修改的操作积攒起来，然后统一计算，批量处理，最后应用到真正的DOM上。
+
+2、读写分离。
+## 使用FastDom 做防抖
+
+