文档章节

repaint和reflow

spademan
 spademan
发布于 2013/11/01 14:00
字数 584
阅读 19
收藏 2

repaint(重绘) ,repaint发生更改时,元素的外观被改变,且在没有改变布局的情况下发生,如改变outline,visibility,background color,不会影响到dom结构渲染。

reflow(渲染),与repaint区别就是他会影响到dom的结构渲染,同时他会触发repaint,他会改变他本身与所有父辈元素(祖先),这种开销是非常昂贵的,导致性能下降是必然的,页面元素越多效果越明显。

何时发生:

1. DOM元素的添加、修改(内容)、删除( Reflow + Repaint)
2. 仅修改DOM元素的字体颜色(只有Repaint,因为不需要调整布局)
3. 应用新的样式或者修改任何影响元素外观的属性
4. Resize浏览器窗口、滚动页面
5. 读取元素的某些属性(offsetLeft、offsetTop、offsetHeight、offsetWidth、 scrollTop/Left/Width/Height、clientTop/Left/Width/Height、 getComputedStyle()、currentStyle(in IE)) 

如何避免:

1. 先将元素从document中删除,完成修改后再把元素放回原来的位置
2. 将元素的display设置为”none”,完成修改后再把display修改为原来的值
3. 如果需要创建多个DOM节点,可以使用DocumentFragment创建完后一次性的加入document   

var fragment = document.createDocumentFragment();
fragment.appendChild(document.createTextNode('keenboy test 111'));
fragment.appendChild(document.createElement('br'));
fragment.appendChild(document.createTextNode('keenboy test 222'));
document.body.appendChild(fragment);

4. 集中修改样式 
  4.1尽可能少的修改元素style上的属性 
  4.2尽量通过修改className来修改样式
  4.3通过cssText属性来设置样式值
    element.style.width=”80px”;  //reflow
    element.style.height=”90px”; //reflow
    element.style.border=”solid 1px red”; //reflow
    以上就产生多次reflow,调用的越多产生就越多
    element.style.cssText=”width:80px;height:80px;border:solid 1px red;”; //reflow 
  4.4缓存Layout属性值 
    var left=elem.offsetLeft; 多次使用left也就产生一次reflow
  4.5设置元素的position为absolute或fixed
    元素脱离标准流,也从DOM树结构中脱离出来,在需要reflow时只需要reflow自身与下级元素
  4.6尽量不要用table布局
    table元素一旦触发reflow就会导致table里所有的其它元素 reflow。在适合用table的场合,可以设置table-layout为auto或fixed,这样可以让table一行一行的渲染,这种做法也是为了限制reflow的影响范围
  4.7避免使用expression,他会每次调用都会重新计算一遍(包括加载页面)

本文转载自:http://hi.baidu.com/kooboy/item/f8e73203540d71d21ff046b2

spademan
粉丝 8
博文 92
码字总数 39247
作品 0
广州
前端工程师
私信 提问
【前端词典】几个有益的 CSS 小知识

前言 今天偷个懒,不长篇大论,分享几个你可能不知道的 CSS 小知识。 样式的顺序 CSS 代码: HTML 代码: 记得之前这是一道比较火的 CSS 考题,当时好像是有不少的人答错(30% 以上) 答案你...

小生方勤
06/28
0
0
浏览器渲染那些事

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

jia林
2017/11/08
0
0
CSS的reflow和repaint

CSS的reflow和repaint 什么是reflow 浏览器为了重新渲染部分或整个页面,重新计算页面元素位置和几何结构的进程叫做. 通俗点说就是当开发人员定义好了样式后(也包括浏览器的默认样式),浏览器...

一个胖子的我
2016/10/27
0
0
HTML的解析和css的回流与重绘的自己初略理解

在别人的博客上看到了一篇讲的很生动的网页解析HTML的原理,并且还初步的说了一下css在渲染时候出现的reflow(回流)和repaint(重绘)。以下为引用他人博客中的内容。渲染就是浏览器把HTML代...

德拉费尔
2013/06/01
0
2
简述浏览器的渲染原理

首先,看一张图片: 图1 首先是解析: 1)这是一个解析的过程,浏览器会解析三个东西: 一个是HTML/SVG/XHTML,事实上,Webkit有三个C++的类对应这三类文档。解析这三种文件会产生一个DOM Tre...

唐正汉
2017/01/19
0
0

没有更多内容

加载失败,请刷新页面

加载更多

使用navicat连接mysql8.0出现1251异常提示

如标题所示,出现如下图场景: 解决方案: 使用管理员权限打开cmd执行以下命令: use mysql alter user 'root'@'localhost' modified with mysql_native_password by 'root' flush privileg......

貔貅叔
9分钟前
0
0
原子操作组合与线程安全

除了操作原子性之外,还有一个比较容易引起线程不安全的原因:安全方法组合。使用多个线程安全的方法组合成一个方法,也有可能导致线程不安全的情况出现。 以ConcurrentHashMap类为例,Concu...

八音弦
9分钟前
0
0
耦合的形式(对以往思路的纠正)

耦合的形式 不透明耦合(或者叫浑浊耦合) 部件A直接驱动部件C,C对A不透明 透明耦合 部件A驱动代理B,代理B驱动部件C,C对A透明 纠正 曾经我将耦合的形式区分为:不透明耦合,单边透明耦合,...

wanxiangming
10分钟前
0
0
bash:yum:command not found 解决办法

最近在学rhel7,不知道怎么回事,今天突然yum不能用了, 提示: bash:yum:command not found 在度娘搜了半天,真不好说啥了. 自己研究了半天 步骤如下 第一步: http://mirrors.163.com/cen...

寰宇01
12分钟前
1
0
弘康人寿基于 RocketMQ 构建微服务边界总线的实践

随着互联网+和平台化战略的兴起,各个行业的 IT 系统都在向互联网架构发展,涉及的主要技术包括微服务、消息和弹性计算等,采用微服务架构实现服务高内聚、低耦合,通过异步消息完成交易快速...

阿里云官方博客
12分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部