一直对页面重排（reflow）和重绘有一个模糊的概念，今天就来梳理一下。请看下图，我们知道当页面加载时，浏览器解析html并构建DOM树。解析样式表并构建Css树。两者合并成一个渲染树。Render树构建完成后，浏览器开始布局和绘制，最终显示页面。布局和绘画也是渲染过程。以下三种情况都会导致网页重新渲染。修改DOM来修改样式表。用户事件（如鼠标悬停、页面滚动、输入框中文本输入、窗口大小改变等）重新渲染，需要重新生成布局并重绘。前者称为“回流/回流”（reflow），后者称为“重绘”。回流一定会触发重绘，重绘不一定会触发回流（比如元素背景发生变化）。什么情况会触发重排？显示和隐藏元素；改变元素大小和位置；元素含量的变化；更改浏览器窗口；页面初始化；如何避免重排？（前端性能优化部分）1.多个样式修改合并为一个；//错误的写法vardom=document.getElementById('div')dom.style.width='100px'dom.style.height='100px'//这样会导致页面重新排列两次//正确的写法//css.class{宽度:100px;height:100px;}vardom=document.getElementById('div')dom.className='class'//正确的写法vardom=document.getElementById('div')dom.style.cssText='width:100px;高度：100px；'2.文档流外vardom=document.getElementById('div')dom.style。display='none'dom.style.width='100px'dom.style.height='100px'dom.style.padding='5px';dom.style.display='block'3.使用createElementFragment一次性插入vardom=document.getElementById('div')varfragment=document.createDocumentFragment()//将元素添加到片段中，并将它们添加到一次真正的DOMdom.appendChild(fragment)4.缓存布局信息current=div.向左偏移；div.style.left=1+current+'px';div.style.top=1+current+'px';5.使用虚拟DOM框架vue/react等6.使用window.requestAnimationFrame()和window.requestIdleCallback()优化渲染。参考：https://segmentfault.com/a/1190000016990089
