博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
重绘与回流——影响浏览器加载速度
阅读量:6121 次
发布时间:2019-06-21

本文共 677 字,大约阅读时间需要 2 分钟。

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

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操作的原因之一,在本博客文章《dom tree和render tree》中会有详解。

转载于:https://www.cnblogs.com/chris-oil/p/6159598.html

你可能感兴趣的文章
Mindjet MindManager 2019使用教程:
查看>>
游戏设计的基本构成要素有哪些?
查看>>
详解 CSS 绝对定位
查看>>
AOP
查看>>
我的友情链接
查看>>
NGUI Label Color Code
查看>>
.NET Core微服务之基于Polly+AspectCore实现熔断与降级机制
查看>>
vue组件开发练习--焦点图切换
查看>>
浅谈OSI七层模型
查看>>
Webpack 2 中一些常见的优化措施
查看>>
移动端响应式
查看>>
python实现牛顿法求解求解最小值(包括拟牛顿法)【最优化课程笔记】
查看>>
js中var、let、const的区别
查看>>
腾讯云加入LoRa联盟成为发起成员,加速推动物联网到智联网的进化
查看>>
从Python2到Python3:超百万行代码迁移实践
查看>>
Windows Server已可安装Docker,Azure开始支持Mesosphere
查看>>
简洁优雅地实现夜间模式
查看>>
react学习总结
查看>>
微软正式发布PowerShell Core 6.0
查看>>
Amazon发布新的会话管理器
查看>>