顺义区建设委员会网站首页网店推广运营
思路： 网页渲染HTML文件到浏览器的过程->定义->如何优化
网页渲染HTML文件到浏览器的过程
HTML 文件通过HTML解析器解析生成DOM树；
CSS文件通过CSS解析器生成CSSOM树；
DOM树和CSSOM树生成渲染树（render tree）；
生成布局，浏览器根据render tree进行布局，并计算各个节点的几何信息；（排列）
将节点绘制到屏幕上；（绘制）
什么是重排和重绘？
重绘：元素的外观改变，如：文字颜色透明度，背景颜色等；
重排：重新生成布局，重新排列元素。分为局部范围重排和全局范围重排
局部重排：对渲染树的某个部分或者某个渲染对象进行重新布局。 如：一个dom的宽高等几何信息定死，在dom内触发了重排，就只会重排该dom内部的元素而不影响到外界。
全局重排：从根节点html对整个渲染树进行重新布局。
优化：
1. 减少重排的次数
①不要频繁的操作样式，而是统一的在变量中编辑
//bad
var top = 10;
var left = 10;
// 第一次重排
el.style.top = top + "px"; //el就是获取dom节点，详细的可看如何获取dom节点的方法
// 第二次重排
el.style.left = left + "px";
// good
el.style.cssText += ";top:" + top + "px;left:" + left + "px";
// 因为cssText会覆盖之前的样式，所以需要采用叠加的方式②离线操作元素：
1>使用display:none。(先拿掉再操作最后显示，两次重排)
个人理解:对这个节点进行操作时，先添加display:none样式（重排第一次）；再进行一些操作；移除display:none样式（重排第二次）
2>通过document.Fragment先创建一个dom节点，对这个节点进行操作，再把这个元素添进去（重排一次）
document.createDocumentFragment(); //返回一个 documentFragment 类型的对象
//documentFragment 不是真实 DOM 树的一部分，
//它的变化不会触发 DOM 树的重新渲染，且不会导致性能等问题。③使用fixed和 absolute将节点脱离文档流。这样子元素的重排的开销较小。
④分离读写操作
2.减小重排的范围
①尽量以局部布局的形组织HTML，使各个元素相互独立
②尽可能在底部元素上设置样式，削弱修改样式时的影响
③尽量不使用table布局
附加题：css的隐藏方式，至少说出三种，是否导致了重排？
1.display:none ; 导致重排，因为涉及到了dom的创建和销毁
2.visibility: hidden; 不会导致重排，因为这个dom节点还是存在
3.opacity:0 不会导致重排，相当于只是改变了字体颜色，只会引起重绘
4.width:0;heigth:0;overflow:hidden; 导致重排，改变了dom节点的几何信息
5.把这个元素移动到不可见区域等
6.。。。