美文网首页前端
JS里的重绘和回流

JS里的重绘和回流

作者: 行不离书 | 来源:发表于2016-11-24 22:06 被阅读181次

对于重绘和回流的概念不是很清晰,查看了许多博文,在这里说一下自己的理解!!
欢迎同学们与我交流。
1、重绘概念

重绘:对元素的背景颜色,字体样式样式进行设置,如:font-weight、
color、background-color.回流一定是重绘,重绘不一定是回流

2、回流的概念

回流:因为元素的尺寸,布局,隐藏等改变而需要重新对其进行构建的操作(重构页面)。
包括:
1、对font-size,margin,padding 等可以改变宽高和布局的style属性(尺寸、内容、距离)的改变。
2、添加、删除(可见元素)的dom操作。
3、用户操作 改变浏览器窗口大小或是字体等
4、对offset**** 、scroll***、client***、width/height的改变(***=Top/Left/Width/Height)

3、如何减少重绘和回流

1、想要改变元素样式,通过改变元素的 class 名 (尽可能在 DOM 树的最末端改变class)
2、避免设置多项内联样式,因为每个都会造成回流,样式应该合并在一个外部类,这样当该元素的class属性可被操控时仅会产生一个reflow。
3、在操作offset**** 、scroll***、client***、width/height等属性时,先用变量先进行存储,在进行操作。

重绘和回流也是为什么要减少dom操作的原因之一。

相关文章

  • JS里的重绘和回流

    对于重绘和回流的概念不是很清晰,查看了许多博文,在这里说一下自己的理解!!欢迎同学们与我交流。1、重绘概念 2、回...

  • 面经 之 Browser浏览器读后感

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

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

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

  • 前端一些细节

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

  • 22,重绘、回流

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

  • 浏览器渲染回流重绘与性能优化

    我们根据渲染的流程可知, 回流一定会触发重绘,而重绘不一定会回流。 渲染性能优化 回流和重绘的代价是比较昂贵的,渲...

  • DOM树 CSS树 render树 以及JS的加载

    回流和重绘回流一定会引起重绘而重绘可以单独触发 例如修改背景颜色 字体颜色等...引起回流的因素:1.DOM节点 ...

  • 怎样区分页面的回流和重绘

    一、什么是回流和重绘 引起DOM树结构变化,页面布局变化的行为叫回流,且回流一定伴随重绘。只是样式的变化,不会引起...

  • 前端性能优化(HTML、CSS、JS)

    1.HTML优化篇 1.减少重绘和回流 不了解重绘和回流请点击我要了解 回流这一阶段主要是计算节点的位置和几何信息...

  • 回流与重绘

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

网友评论

    本文标题:JS里的重绘和回流

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