[算法 | 性能] 课程笔记：《浏览器工作原理及在网页性能优化中的应用》

未完待续，当前为草稿版本

布局-> 绘制重新到屏幕

1. 实际情况下，布局和绘制到屏幕会多次发生，涉及chonghuihechongpai reflow：布局阶段重新发生 重排 repaint：绘制阶段重新发生 chonghui

哪些行为导致reflow 和 repaint？

1. JS 行为
   1. 修改 DOM，增减dom节点，渲染书发生变化，计算渲染书上节点的信息
   2. 修改 css
2. 用户行为
3. 滚动页面
4. resize/浏览器窗口变化
5. 输入框内容变化
6. hover 变化

浏览器缓存dom修改操作

var foo = document.getElementById('foo')
foo.style.color = 'blue'
foo.style.marginTop = '30px'
``

```JavaScript
var foo = document.getElementById('foo')
foo.style.color = 'blue'

var margin = parseInt(style.margin.marginTop)

foo.style.marginTop = (margin + 10) + 'px'

读取脏节点的属性：立刻执行一次reflow 或 repaint，来获取元素最近的信息 常见优化手段

1. 避免对同一个DOM节点的read 和write 操作交叉进行
2. 在DOM 树外操作DOM，使用 document fragment
3. 使用 position：absolute 或 fixed 的元素创建动画 脱离文档流，在此类元素上进行修改，不会触发普通文档流中 dom节点的reflow 和repaint，减少了reflow 和 repaint 的范围
4. requestAnimationFrame ？？
5. Virtual DOM

st=>start: Start
op=>operation: Your Operation
cond=>condition: Yes or No?
e=>end
st->op->cond
cond(yes)->e
cond(no)->op