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');
//
el.css('width', '100px');
el.css('height', '100px');
//
el.css({ 'width': '100px;', 'height': '100px;' });
//3
el.addClass('changeStyle'); });
</script>

推荐第三种,避免第一种

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

② 具有动画效果请使用absolute

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

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

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

⑤ 在最末改变元素

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

⑥ 动画移动时候,要控制

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

web前端优化之reflow(减少页面的回流)的更多相关文章

  1. web前端优化手段

    web前端优化手段有很多,同种的优化方式或许在不同的网络协议会南辕北辙,下面就自己结合工作经验和学习总结的一些手段总结 1.合并文件减小请求数:sprite图片的合成.合并脚本与样式. 2.减小文件的 ...

  2. 关于大型网站技术演进的思考(二十一)--网站静态化处理—web前端优化—下【终篇】(13)

    本篇继续web前端优化的讨论,开始我先讲个我所知道的一个故事,有家大型的企业顺应时代发展的潮流开始投身于互联网行业了,它们为此专门设立了一个事业部,不过该企业把这个事业部里的人事成本,系统运维成本特别 ...

  3. 关于大型网站技术演进的思考(二十)--网站静态化处理—web前端优化—中(12)

    Web前端很多优化原则都是从如何提升网络通讯效率的角度提出的,但是这些原则使用的时候还是有很多陷阱在里面,如果我们不能深入理解这些优化原则背后所隐藏的技术原理,很有可能掉进这些陷阱里,最终没有达到最佳 ...

  4. Web前端优化最佳实践及工具集锦

    Web前端优化最佳实践及工具集锦 发表于2013-09-23 19:47| 21315次阅读| 来源Googe & Yahoo| 118 条评论| 作者王果 编译 Web优化Google雅虎P ...

  5. [转] Web 前端优化最佳实践之 Mobile(iPhone) 篇

    原文链接:http://dbanotes.net/web/best_practices_for_speeding_up_your_web_site_server_mobile.html Web 前端优 ...

  6. [转] Web前端优化之 图片篇

    原文链接: http://lunax.info/archives/3101.html Web 前端优化最佳实践第六部分面向 图片(Image),这部分目前有 4 条规则.在最近的 Velocity 2 ...

  7. [转] Web前端优化之 Javascript篇

    原文链接: http://lunax.info/archives/3099.html Web 前端优化最佳实践之 JavaScript 篇,这部分有 6 条规则,和 CSS 篇 重复的有几条.前端优化 ...

  8. web前端优化-温故知新系列(1)

    有关web前端优化的博文,博客园中有许多网友的博客中都有介绍,而且详细.精准.楼主打算写这个博客,算是对自己一年工作来的一个总结和积累有些知识从别的地方拷贝过来的,但是都审查过. 引言: 1. 慢的页 ...

  9. 网站静态化处理—web前端优化—下【终篇】(13)

    网站静态化处理—web前端优化—下[终篇](13) 本篇继续web前端优化的讨论,开始我先讲个我所知道的一个故事,有家大型的企业顺应时代发展的潮流开始投身于互联网行业了,它们为此专门设立了一个事业部, ...

随机推荐

  1. mysql event 入门

    delimiter | CREATE EVENT statistics_event ON SCHEDULE EVERY DAY STARTS CONCAT(CURRENT_DATE(), ' 00:0 ...

  2. 看图说说Sun HotSpot虚拟机对象

  3. int *a[] 与(int *)a【5】的区别

    *a[5] 是指针数组  可以指向5个值 (*a)[5]  是一个指针,但这个指针只能指向包含5个元素的一维数组 a是一个数组,每个元素都是个指针. b是一个指针,指向一个数组 1.int *a[5] ...

  4. Oracle EBS应用笔记整理 (转自IT++ flyingkite)

    ***************************************************** Author: Flyingkite Blog:   http://space.itpub. ...

  5. 自己从0开始学习Unity的笔记 VIII (C#中类继承练习 II)

    自己写了一个关于兵种的,因为一直在测试,到底面向对象是个什么玩意...然后就做了这个 namespace 兵种 { class Role //作为父类,构建一个普通角色属性用于继承 { protect ...

  6. Asp.NetCore安全验证之JWT

    本文只是介绍了下基于AspNetCore自带的System.IdentityModel.Tokens.Jwt.dll工具在项目中Token的应用. 我这里谈到的很浅显就两点: 一,超时时间 二,数据的 ...

  7. how to trace the error log

    Executed as user: WTC\Ebw.Admin. Transaction (Process ID 95) was deadlocked on lock resources with a ...

  8. 九、基础正则表达式BRE

    1.重要性:简单的说正则表达式就是处理一套字符串的规则和方法,以行为单位对字符串进行处理. 运维工作中,会有大量的访问日志,错误日志,大数据学习正则表达式是不可少的. 2.linux正则表达式,主要是 ...

  9. 【Oracle 12c】CUUG OCP认证071考试原题解析(29)

    29.choose the best answer Evaluate the following query: SQL> SELECT promo_name || q'{'s start dat ...

  10. css如何去掉select原始样式

    css代码: select { /*将默认的select选择框样式清除*/ appearance: none; -moz-appearance: none; -webkit-appearance: n ...