博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
【web前端优化之reflow】减少页面的回流
阅读量:6484 次
发布时间:2019-06-23

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

前言

今天白天的时候我们一起学习了块级元素,晚上的时候本来想继续学习CSS,但是发现还是有一点累,所以我们还是来研究点大家都感兴趣的东西,前端优化。

什么是reflow?

这个单词字面意思就是回流,这里举一个例子:

我们这里有个dom树:

1 

2 3 7 11 15

我们如果删除了其中一个节点,比如第四行的节点,这棵树肯定不会就这么倒了,所以会形成一个新的dom树,这就是回流:

回流是指浏览器为了重新渲染部分或者全部的文档而重新计算文档中元素的位置和几何构造的过程。 因为回流可能导致整个dom树的重新构造,所以是性能的一大杀手

以下操作会引起回流:

① 改变窗口大小

② font-size大小改变

③ 增加或者移除样式表

④ 内容变化(input中输入文字会导致)

⑤ 激活CSS伪类(:hover)

⑥ 操作class属性,新增或者减少

⑦ js操作dom

⑧ offset相关属性计算

⑨ 设置style的值

......

reflow与repaint是减缓js的几大主要原因,尤其是reflow更是性能杀手,所以我们应该想法避免。

减少页面回流

① 一起变化

如果要改变一个元素的样式,可以将所有样式集中在一个class上面一次变化,而不是变化几次:

1  4 

以上几种做法,我这里弱弱的推荐第三种,避免第一种。

② 具有动画效果请使用absolute

因为absolute元素的改变对其它元素的回流影响不大,所以我们的动画效果的元素还是将他搞成absolute吧。

③ 避免使用表格布局(记住只是布局哦,我们数据还是应该用表格的)

④ 请绝对不要使用CSS表达式,性能杀手啊,特别是IE

⑤ 在最末改变元素

因为回流是自上而下的,所以下不及上,我们在最后面修改信息对全局影响越少。

⑥ 动画移动时候,要控制

比如我们拖动元素时候,我是在他x或者y坐标改变5px才操作,这样虽说降低了平滑度,但是对性能有提高。

结语

好了,今天就到这里啦,后面点我们再看看CSS中一些细节的地方。

转载地址:http://heiuo.baihongyu.com/

你可能感兴趣的文章
js if语句多个条件判断
查看>>
AVPacketList结构体和AVPacketQueue结构体
查看>>
PHP操作redis详细讲解
查看>>
Android学习笔记(一)
查看>>
Java 提高篇(一)
查看>>
虚拟化学习笔记
查看>>
浏览器的兼容性问题
查看>>
我的友情链接
查看>>
今天真的搬走了
查看>>
PC散热风扇之研究一:风扇种类介绍
查看>>
关于Session和Cookie简单实例
查看>>
App框架实现———dagger2
查看>>
zabbix 微信报警
查看>>
通过SQL Server 2008数据库复制实现数据库同步备份
查看>>
HttpClient做接口测试时自定义参数长度
查看>>
PyCharm2017激活方法
查看>>
正则表达式
查看>>
Exchange企业实战技巧(27)邮件中使用数字签名和邮件加密功能
查看>>
mysql-5.6.27源码安装及错误解决办法
查看>>
Shell 函数、数组与正则表达式
查看>>