美文网首页
重绘和重排

重绘和重排

作者: 爱忽悠的唐唐在晃悠 | 来源:发表于2018-04-03 11:26 被阅读0次
    1. 什么引发重绘?
      改变元素的外观,例如颜色等(无尺寸变化)。
    2. 什么引发重排?
    • 页面初始化渲染
    • 添加或者删除dom节点
    • 改变元素位置
    • 改变元素尺寸(如padding、margin)等
    • 改变元素内容(文本或者图片)
    • 改变窗口尺寸
    1. 开发中如何减少重排次数和缩小重排范围?
      1、改变元素的样式合并成一次操作,即样式集中改变(可以将每次的style改成添加class,或者用cssText)
      2、将元素的display设置成‘none'或者position:absolute,脱离文档流
      3、异步获取的数据如果需要append,我们需要将这些内容先拼接成html片段,再一次性append到文档中。或者使用documentFragment(如ul中循环添加大量li )
      4、读写分离。(渲染队列)
      5、将会触发重排的属性进行缓存。
      offsetTop, offsetLeft, offsetWidth, offsetHeight
      scrollTop, scrollLeft, scrollWidth, scrollHeight
      clientTop, clientLeft, clientWidth, clientHeight
      getComputedStyle() (currentStyle in IE)

    相关文章

      网友评论

          本文标题:重绘和重排

          本文链接:https://www.haomeiwen.com/subject/lxsqhftx.html