回流&重绘
layout布局 attachment结合 painting绘制 display展示
回流：重新布局 （每个页面至少1次）
添加或删除可见的DOM元素
元素的位置发生变化
元素的尺寸发生变化（包括外边距、内边框、边框大小、高度和宽度等）
内容发生变化，比如文本变化或图片被另一个不同尺寸的图片所替代。
页面一开始渲染的时候（这肯定避免不了）
浏览器的窗口尺寸变化（因为回流是根据视口的大小来计算元素的位置和大小的）
width
height
padding
margin
display
border-width
border
min-height
top
bottom
left
right
position
float
clear
text-align
overflow-y
font-weight
overflow
font-family
line-height
vertival-align
white-space
font-size
重绘：重新布局影响元素外观、风格、不影响布局
color
border-style
border-radius
visibility
text-decoration
background
background-image
background-position
background-repeat
background-size
outline-color
outline
outline-style
outline-width
box-shadow
优化方案
一个个设置样式，统一设置class
批量修改DOM：1-隐藏修改，2-虚拟DOM等
避免触发同步布局事件
1. qsa.li
2. forEach this.style.width =
对于复杂动画效果,使用绝对定位让其脱离文档流
等
虚拟DOM（Virtual DOM）
真实DOM：HTML页面中任意一个标签或者是文本都是
虚拟DOM：就是使用javascript的对象来描述了DOM结构
思考：为什么要有虚拟DOM？
回答：性能（导致原因回流&重绘）
Virtual DOM Diff算法
算法规则
1 步骤一：用JS对象模拟DOM树
2 步骤二：比较两棵虚拟DOM树的差异
3 步骤三：把差异应用到真正的DOM树上
虚拟DOM介绍
如何实现一个Virtual DOM 算法：https://github.com/livoras/blog/issues/13
##小总结
什么是虚拟DOM：就是使用javascript的对象来描述了DOM结构
为什么要虚拟DOM：提升性能（因为回流、重绘 浏览器工作机制）
如果更新DOM数据：通过diff算法（同层比较）
1 步骤一：用JS对象模拟DOM树
2 步骤二：比较两棵虚拟DOM树的差异
3 步骤三：把差异应用到真正的DOM树上
切记：当遍历数据的时候要写key 提升性能
