美文网首页
回流与重绘(reflow/repaint)

回流与重绘(reflow/repaint)

作者: Indomi | 来源:发表于2019-10-24 15:59 被阅读0次
  • reflow:当render树的一部分或者全部因为大小边距等问题发生改变而需要重建的过程,叫做回流
  • repaint:当诸如颜色背景等不会引起页面布局变化,而只需要重新渲染的过程叫做重绘
  • 回流一定伴随着重绘,而重绘却可以单独出现
  • 什么情况下会引起回流:
    • 初次生成render
    • DOM结构变化
    • render树变化,比如更改了某个定位值,边距值
    • resize事件触发
    • 获取某些属性:比如scrollTop/Bottom/Left/Right,获取getComputedStyle()clientHeight/Widthwidth/heightoffsetWidth/Height
  • 改变font-size也会引起回流
  • display: none引起回流加重绘,visibility: none引起重绘

相关文章

  • 前端总结(后续继续更新)

    1,reflow和repaint:回流和重绘。回流:renderTree 重建。重绘:外观样式风格进行更新。(co...

  • 前端一些细节

    1,reflow和repaint:回流和重绘。回流:renderTree 重建。重绘:外观样式风格进行更新。(co...

  • 浏览器的回流与重绘 (Reflow & Repaint)

    浏览器的回流与重绘 (Reflow & Repaint) 写在前面 在讨论回流与重绘之前,我们要知道: 浏览器使用...

  • 浏览器的渲染机制

    reflow(回流) 和 repaint(重绘):http://blog.csdn.net/ClaireKe/ar...

  • 页面回流

    理解浏览器的重绘与回流(repaint&&reflow) 今天在做练习的时候,遇到了重绘与回流这个词,表示连个毛都...

  • css中的repaint和reflow

    页面设计中,不可避免的存在浏览器重绘repaint和回流reflow 介绍 repaint:针对某个元素进行重绘。...

  • 回流和重绘——周分享

    浏览器的回流与重绘 (Reflow & Repaint) 浏览器使用流式布局模型 (Flow Based Layo...

  • 浏览器原理

    介绍下重绘和回流(Repaint & & Reflow ),以及如何进行优化 参考文档: https://mp.w...

  • 回流(reflow)与重绘(repaint)

    回流(reflow) 当渲染树(render Tree)中的一部分(或全部)因为元素的规模尺寸,布局,隐藏等改变而...

  • 回流与重绘 (Reflow & Repaint)

    https://juejin.im/post/5a9923e9518825558251c96a 浏览器使用流式布局...

网友评论

      本文标题:回流与重绘(reflow/repaint)

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