文档章节

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

 恐空控
发布于 2013/06/13 23:09
字数 629
阅读 21
收藏 0


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

我们这里有个dom树:

 1 <p>  2 <span class="title"></span>  3 <label class="checkbox">  4 <input type="checkbox" value="足球" />  5  red  6 </label>  7 <label class="checkbox">  8 <input type="checkbox" value="篮球" />  9  black 10 </label> 11 <label class="checkbox"> 12 <input type="checkbox" value="乒乓" /> 13  english中文 14 </label> 15 </p>

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

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

以下操作会引起回流:

① 改变窗口大小

② font-size大小改变

③ 增加或者移除样式表

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

⑤ 激活CSS伪类(:hover)

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

⑦ js操作dom

⑧ offset相关属性计算

⑨ 设置style的值

......

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


① 一起变化

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

 1 <style type="text/css">  2  .changeStyle { width: 100px; height: 100px; }  3 </style>  4 <script type="text/javascript">  5  $(document).ready(function () {  6 var el = $('id');  7 //1  8  el.css('width', '100px');  9  el.css('height', '100px'); 10 //2 11  el.css({ 'width': '100px;', 'height': '100px;' }); 12 //3  13  el.addClass('changeStyle'); 14 15  }); 16 </script>

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

② 具有动画效果请使用absolute

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

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

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

⑤ 在最末改变元素

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

⑥ 动画移动时候,要控制

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

本文转载自:http://www.cnblogs.com/yexiaochai/archive/2013/06/10/3131158.html

粉丝 10
博文 22
码字总数 7160
作品 0
成都
私信 提问
前端页面优化,减少reflow的方法

也就是 重排或者回流 由DOM或者布局的变动而触发。 如你改变了一个的位置,或者是改变了这个div的width, height, position 或者布局类的样式。 利用不渲染的特点 通过一次完整的web请求和渲染...

极度狂热
06/23
0
0
浏览器渲染原理 (三)repaint(重绘)和reflow(回流)详解

知足则不辱,知止则不殆。——老子 浏览器渲染原理 (一)在网址中输入一个网站后面都做了什么 浏览器渲染原理 (二)css、javascript、dom 阻塞关系 浏览器渲染原理 (三) repaint(重绘)和...

asyncnode
09/05
0
0
浏览器渲染HTML过程(页面重构师的存在所在原因)

WEB 页面运行在各种各样的浏览器当中,浏览器载入、渲染页面的速度直接影响着用户体验简单地说,页面渲染就是浏览器将 HTML 代码根据 CSS 定义的规则显示在浏览器窗口中的这个过程。 渲染过程...

SubinY
2016/11/30
28
0
前端基本功(四):性能优化之你真的懂回流、重绘与合成层吗?

1. 页面的呈现流程 浏览器把获取到的HTML代码解析成1个DOM树,HTML中的每个tag都是DOM树中的1个节点,根节点就是我们常用的document对象。DOM树里包含了所有HTML标签,包括display:none隐藏,...

大家都叫我四姨
06/04
0
0
前端性能优化:细说浏览器渲染的重排与重绘

前端性能优化因为涉及到计算机网络、数据算法、图形图像处理、浏览器渲染等多方面计算机知识,常作为前端工程师乐此不疲的技术讨论话题,也正因如此,它也是面试时容易被问及的面试题之一。 ...

小白师兄
2018/07/23
0
0

没有更多内容

加载失败,请刷新页面

加载更多

CSS--列表

一、列表标识项 list-style-type none:去掉标识项 disc:默认实心圆 circle:空心圆 squire:矩形 二、列表项图片 list-style-img: 取值:url(路径) 三、列表项位置 list-style-position:...

wytao1995
今天
4
0
linux 命令-文本比较comm、diff、patch

本文原创首发于公众号:编程三分钟 今天学了三个文本比较的命令分享给大家。 comm comm 命令比较相同的文本 $ cat charabc$ cat chardiffadc 比如,我有两个文件char和chardiff如上,...

编程三分钟
今天
7
0
QML教程

https://blog.csdn.net/qq_40194498/article/category/7580030 https://blog.csdn.net/LaineGates/article/details/50887765...

shzwork
今天
5
0
HA Cluster之5

对于使用heartbeat v2版的CRM配置的集群信息都是保存在一个名为cib.xml的配置文件中,存放在/var/lib/heartbeat/crm/下。CIB:Cluster Information Base,由于xml文件配置不是那么方便,所以...

lhdzw
今天
6
0
玩转Redis-Redis基础数据结构及核心命令

  《玩转Redis》系列文章主要讲述Redis的基础及中高级应用,文章基于Redis5.0.4+。本文主要讲述Redis的数据结构String,《玩转Redis-Redis基础数据结构及核心命令》相关操作命令为方便对比...

zxiaofan666
今天
11
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部