web前端优化之reflow(减少页面的回流)

1、什么是reflow?

reflow(回流)是指浏览器为了重新渲染部分或者全部的文档,重新计算文档中的元素的位置和几何构造的过程。

因为回流可能导致整个Dom树的重新构造,所以是性能的一大杀手。

以下操作会引起回流:

① 改变窗口大小

② font-size大小改变

③ 增加或者移除样式表

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

⑤ 激活CSS伪类(:hover)

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

⑦ js操作dom

⑧ offset相关属性计算

⑨ 设置style的值

......

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

<style type="text/css">
     .changeStyle { width: 100px; height: 100px; }
</style>
<script type="text/javascript">
     $(document).ready(function () {
         var el = $('id');
         //1
         el.css('width', '100px');
         el.css('height', '100px');
         //2
         el.css({ 'width': '100px;', 'height': '100px;' });
         //3 
         el.addClass('changeStyle');
 
     });
</script>

推荐第三种,避免第一种

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

② 具有动画效果请使用absolute

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

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

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

⑤ 在最末改变元素

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

⑥ 动画移动时候,要控制

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏数据派THU

独家 | Tableau使用窍门:轻松学会设计仪表板

如果你参加过仪表板大全(Big Book of Dashboards)的专题会、发表会、或网络研讨会,那么你肯定已经听作者们(包括我自己)谈论到网格设计的重要性...

2502
来自专栏项勇

笔记46 | Android性能优化之优化layout的层级(一)

2487
来自专栏数据小魔方

Xcelsius(水晶易表)系列6——统计图钻取功能

今天跟大家分享的是水晶易表系列6——统计图的钻取功能。 统计图通过启用钻取功能之后,可以通过鼠标单击该图表的单一序列,使图表序列成为动态选择器,鼠标单击之后会将...

5107
来自专栏腾讯社交用户体验设计

[ISUX译]iOS 9人机界面指南(四):UI元素(下)- 腾讯ISUX

1533
来自专栏向治洪

css模块化及CSS Modules使用详解

什么是css模块化? 为了理解css模块化思想,我们首先了解下,什么是模块化,在百度百科上的解释是,在系统的结构中,模块是可组合、分解和更换的单元。模块化是一种...

1.4K10
来自专栏程序员互动联盟

【专业文章】六种常见的HTML5写法误用(一)

一、不要使用section作为div的替代品 人们在标签使用中最常见到的错误之一就是随意将HTML5的<section>等价于<div>——具体地说,就是直接用...

3435
来自专栏理论坞

那些你不知道的Ps冷知识③——完结

本条是针对PSCC及以上版本的技巧(在PSCC发布之初本是没有这个功能的,后续的更新中才加上),第一次使用CC时相信很多人在使用路径选择工具时都有一些不适感——...

681
来自专栏QQ音乐技术团队的专栏

iOS 视图,动画渲染机制探究

终端的开发,首当其冲的就是视图、动画的渲染,切换等等。用户使用 App 时最直接的体验就是这个界面好不好看,动画炫不炫,滑动流不流畅。UI就是 App 的门面,...

4479
来自专栏逍遥剑客的游戏开发

Flash在DirectX中的绘制

1743
来自专栏菩提树下的杨过

silverlight 相册雏型

这篇应该是"silverlight3的"伪"3D续--图片横向轮换"的后续篇章,代码基本上从上篇代码修改而来,界面则抄袭了nasa的相册,自己一直做数据库相关的...

26010

扫码关注云+社区

领取腾讯云代金券