浏览器渲染原理，重绘与重排

前端开发操作DOM会引起浏览的重绘和重排

浏览器向服务器发送请求，然后解析html生成DOM（文档对象模型），css生成CSSOM（css对象模型），2者生成渲染树，渲染树上的节点有了样式。当渲染树构建完成，渲染树的节点就放置到了正确位置。根据渲染树上的样式绘制出页面

重绘是元素外观的改变，不会改变元素在文档流的位置 列入color visibility 

重排则是渲染树重新计算 

　　引起重排的因素

　　DOM的属性变化

　　DOM的增删改

　　查询某些属性，比如offsetTop、offsetLeft、 offsetWidth、offsetHeight、scrollTop、scrollLeft、scrollWidth、scrollHeight、clientTop、clientLeft、clientWidth、clientHeight

优化方案

　　将重排元素设置absolute或者fixed脱离文档流

　　缓存引起浏览器重排的属性值

　　设置display :none 不在渲染树中，对隐藏元素不会引起重排，这样只在隐藏和显示2次重排

　　

 

转载于:https://www.cnblogs.com/sonwrain/p/10060620.html