前端开发操作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次重排

  

 

posted on 2018-12-03 20:18  苏荷酒吧  阅读(294)  评论(0编辑  收藏  举报