美文网首页
重绘和重排

重绘和重排

作者: 爱忽悠的唐唐在晃悠 | 来源:发表于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)

相关文章

  • 浏览器重排(回流)重绘以及优化方案

    一、什么是重排和重绘 要说清重排(reflow)和重绘(repaint),首先要理解排列和绘制,浏览器渲染页面时,...

  • 浏览器的重绘和重排

    重绘和重排 重排是因为元素的几何属性改变,导致渲染树中的节点发生改变,从而影响到其它节点发生重绘。重排对性能影响极...

  • 浏览器页面的重绘和重排

    对于页面,我们经常有CSS对网页进行呈现样式效果,这就涉及到了页面的重绘和重排 重绘(repaints)与重排(r...

  • 重排和重绘

    1.重排和重绘的概念 重排: 部分渲染树(或者整个渲染树)需要重新分析并且节点尺寸需要重新计算。这被称为重排,注意...

  • 重绘和重排

    什么引发重绘?改变元素的外观,例如颜色等(无尺寸变化)。 什么引发重排? 页面初始化渲染 添加或者删除dom节点 ...

  • 重绘和重排

    DOM树:表示页面结构。渲染树:表示DOM节点如何显示。 定义 当DOM元素影响了元素的几何属性(例如宽和高),浏...

  • 重绘和重排

    1.重绘和重排 重排当DOM变化影响了元素的几何属性,浏览器需要重新计算元素的几何属性,其他元素的几何属性和位置也...

  • 重排和重绘

    重排(Reflow) 当 render tree 中的 node 的几何属性发生变化的时候,浏览器会使 rende...

  • 重绘和重排

    参考 浏览器渲染机制 浏览器采用流式布局模型(Flow Based Layout)。 浏览器会把 HTML 解析成...

  • 重排和重绘

    重排(回流):当我们对 DOM 的修改引发了 DOM 几何尺寸的变化(比如修改了元素的宽、高或隐藏元素等)时,浏览...

网友评论

      本文标题:重绘和重排

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