我正在参加「掘金·启航计划」
一.更新DOM
更新DOM的时候导致子节点卸载重新创建操作有：
1.节点类型不一致，解决方式直接卸载类型发生变化的节点，避免递归查看，浪费性能。
2.结构不稳定，解决方案为添加空节点，保持更新前后的结构保持一致。
3.未添加key，通过添加唯一的key， 使旧节点和新节点对比，提高复用率。
二.条件语句渲染
在进行条件语句渲染的时候官方推荐的做法：
1.控制style：visibility来控制显示隐藏。
2.在隐藏时给一个空节点来保证对比前后能找到同一位置。不影响后续兄弟节点的比较。
3.js控制内容展示的时候，利用修改DOM来实现内容变化的功能，需要把数据修改为reactive。
//添加响应式API， DOW渲染更迅速。
const items = reactive([
{
question: 'who i am?',
isShow: false,
answer: "i don't know",
},
{
question: 'can you speak english?',
isShow: true,
answer: "my english is poor",
},
])
三.Reflow & Repaint
1.回流必将引起重绘，重绘不一定会引起回流。
2.当Render Tree中部分或全部元素的尺寸、结构、或某些属性发生改变时，浏览器重新渲染部分或全部文档的过程称为回流。
- 会导致回流的操作：
- 页面首次渲染
- 浏览器窗口大小发生改变
- 元素尺寸或位置发生改变
- 元素内容变化（文字数量或图片大小等等）
- 元素字体大小变化
- 添加或者删除可见的DOM元素
- 激活CSS伪类（例如：:hover）
- 查询某些属性或调用某些方法
三. 重绘 (Repaint)
1.当页面中元素样式的改变并不影响它在文档流中的位置时（例如：color、background-color、visibility等），浏览器会将新样式赋予给元素并重新绘制它，这个过程称为重绘。
深层理解：
1.回流就是部分布局变动引起父类以及后续元素的回流，类似于响应式布局，部分变动导致全部布局改变的形式。
2.重绘指的是位置不变，只改变外观。
避免回流的操作：
1.尽可能在DOM的末端改变class
2.避免设置多层内联样式。
3.动画样式应用到position的absolute或者fixed样式元素上面。
4.牺牲平滑换取速度
5.避免使用table布局
