美文网首页
回流与重绘

回流与重绘

作者: FConfidence | 来源:发表于2017-09-09 12:03 被阅读8次
  1. 回流一定会触发重绘

    • 回流: DOM结构的增删改
    • 重绘: 颜色,背景, 字体等视觉上页面的改变
  2. 重绘不一定触发回流

  • 如何避免?
    1. Display: 会影响布局,从而影响整个页面元素的位置变化, 所以会更改render树的结构
    2. 现将元素从document中删除, 完成修改后再把元素放回原来的位置
    3. 如果需要创建多个DOM节点, 可以使用documentFragment, 完成创建后一次性加入document
  1. 如何分辨重绘
    1. 改变字体
    2. 增加或者删除样式表
    3. 内容变化, 比如input框中输入文字
    4. 激活CSS伪类, 比如 :hover
    5. 脚本操作DOM (回流->重绘都会发生)
    6. 计算offsetWidth和offsetHeight属性
    7. 设置style属性的值回流

相关文章

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

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

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

    回流必将引起重绘,重绘不一定会引起回流 在讨论回流与重绘之前,我们要知道:浏览器使用流式布局模型 (Flow Ba...

  • 页面回流

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

  • 22,重绘、回流

    1,浏览器渲染机制 2,重绘 3,回流 > 重绘。 4,浏览器优化 5,减少重绘和回流

  • 2020前端面试问题及答案整理

    css的重绘与回流 重绘:当节点需要更改外观而不会影响布局。 回流:DOM结构的修改引发DOM几何尺寸变化的时候,...

  • 回流与重绘

    回流一定会触发重绘回流: DOM结构的增删改重绘: 颜色,背景, 字体等视觉上页面的改变 重绘不一定触发回流 如何...

  • 面试

    1. css的重绘与回流 重绘:当节点需要更改外观而不会影响布局。回流:DOM结构的修改引发DOM几何尺寸变化的时...

  • 面经 之 Browser浏览器读后感

    浏览器,原文请移步Browser | InterviewMap 回流和重绘 回流和重绘 - 掘金 存储 cooki...

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

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

  • 前端一些细节

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

网友评论

      本文标题:回流与重绘

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