理解回流 和 重绘
参考文章：前端10个灵魂拷问 吃透这些你就能摆脱初级前端工程师！
概念
回流(Reflow): —— 影响页面布局 当Render Tree中部分或全部元素的尺寸、结构、或某些属性发生改变时，浏览器重新渲染部分或全部文档的过程称为回流。
重绘(Repaint): —— 只影响页面样式 当页面中元素样式的改变并不影响它在文档流中的位置时（例如：color、background-color、visibility等），浏览器会将新样式赋予给元素并重新绘制它，这个过程称为重绘。
会导致回流的操作:
* 页面首次渲染
* 浏览器窗口大小发生改变
* 元素尺寸或位置发生改变
* 元素内容变化（文字数量或图片大小等等）
* 元素字体大小变化
* 添加或者删除可见的DOM元素
* 激活CSS伪类（例如：:hover）
* 查询某些属性或调用某些方法
* 一些常用且会导致回流的属性和方法：
* clientWidth、clientHeight、clientTop、clientLeft
* offsetWidth、offsetHeight、offsetTop、offsetLeft
* scrollWidth、scrollHeight、scrollTop、scrollLeft
* scrollIntoView()、scrollIntoViewIfNeeded()
* getComputedStyle()
* getBoundingClientRect()
* scrollTo()
简单理解： 回流是会更改到 渲染树结构的，重绘只是对样式的简单更改，如背景色、字体颜色等而已。
如何减少重绘和回流的次数
