Reflow(回流)和Repaint(重绘) (转)
原文地址:http://blog.csdn.net/qq_18826911/article/details/68924255
首先我们要明白的是,页面的显示过程分为以下几个阶段:
1、生成DOM树(包括display:none的节点)
2、在DOM树的基础上根据节点的集合属性(margin,padding,width,height等)生成render树(不包括display:none,head节点,但是包括visibility:hidden的节点)
3、在render树的基础上继续渲染颜色背景色等样式
Reflow:当render树的一部分或者全部因为大小边距等问题发生改变而需要重建的过程,叫做回流。
reflow会影响到dom的结构渲染,同时会触发repaint,他会改变他本身与所有父辈元素(祖先),这种开销是非常昂贵的,导致性能下降是必然的,页面元素越多效果越明显。
Repaint(重绘):当诸如颜色背景等不会引起页面布局变化,而只需要重新渲染的过程叫做重绘。
repaint发生更改时,元素的外观被改变,且在没有改变布局的情况下发生,如改变outline,visibility,background color,不会影响到dom结构渲染。
通过上述定义,可以很明显看出,重绘的代价要比回流小,毕竟重绘只涉及样式的改变,不涉及到布局。
什么情况下会触发浏览器的repaint/reflow?
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))
6.改变字体大小
7.添加、删除样式表
8.内容的改变,如用户在输入框中写字
9.激活伪类
10.设置style属性
如何避免repaint/reflow?
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.集中修改样式**
(1)尽可能少的修改元素style上的属性
(2)尽量通过修改className来修改样式
(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)缓存Layout属性值
var left=elem.offsetLeft; 多次使用left也就产生一次reflow
(5)设置元素的position为absolute或fixed
元素脱离标准流,也从DOM树结构中脱离出来,在需要reflow时只需要reflow自身与下级元素
(6)避免使用expression,他会每次调用都会重新计算一遍(包括加载页面)
(7)尽量不要用table布局
table元素一旦触发reflow就会导致table里所有的其它元素 reflow。在适合用table的场合,可以设置table-layout为auto或fixed,这样可以让table一行一行的渲染,这种做法也是为了限制reflow的影响范围
- 顶
- 1
- 踩
- 0
Reflow(回流)和Repaint(重绘) (转)的更多相关文章
- 前端性能优化 —— reflow(回流)和repaint(重绘)
简要:整个在浏览器的渲染过程中(页面初始化,用户行为改变界面样式,动画改变界面样式等)reflow(回流)和repaint(重绘) 会大大影响web性能,尤其是手机页面.因此我们在页面设计的时候要尽量 ...
- 前端性能优化----reflow(回流)和repaint(重绘)
什么是reflow和repaint(原文链接:http://www.cnblogs.com/Peng2014/p/4687218.html) reflow:例如某个子元素样式发生改变,直接影响到了其父 ...
- Reflow(渲染)和Repaint(重绘)
Reflow(渲染):对于DOM结构中的各个元素都有自己的盒模型,浏览器根据各种样式(浏览器的.开发人员定义的等)来计算,并根据计算结果将元素放到它该出现的位置,这个过程称之为reflow. refl ...
- 前端性能优化 —— reflow(回流/重排)和repaint(重绘)
简要:整个在浏览器的渲染过程中(页面初始化,用户行为改变界面样式,动画改变界面样式等)reflow(回流)和repaint(重绘) 会大大影响web性能,尤其是手机页面.因此我们在页面设计的时候要尽量 ...
- 什么是回流(重排 reflow)?什么是重绘(repaint)?如何减少回流、重绘?
什么是回流(重排 reflow)? 回流(重排 reflow):对DOM树进行渲染,只要修改DOM或修改元素的形状大小,就会触发reflow,reflow的时候,浏览器会使已渲染好受到影响的部分失效, ...
- 关于repaint(重绘)和reflow( 回流)
repaint就是重绘,reflow就是回流.repaint主要是针对某一个DOM元素进行的重绘,reflow则是回流,针对整个页面的重排 严重性: 在性能优先的前提下,性能消耗 reflow大于re ...
- 页面优化,谈谈重绘(repaint)和回流(reflow)
一.前言 偶尔在面试过程中遇到过重汇与回流reflow的问题,毕竟页面优化也是考核一个开发者能力的关键之一,上篇文章聊了下documentfragment也是为了减轻回流问题,那么本篇文章好好介绍下重 ...
- 重绘(Repaint)和回流(Reflow)
重绘(Repaint)和回流(Reflow) 1.回流和重绘只是渲染步骤的一小节,是怎么做到影响性能的? css 会影响 javascrip 执行时间导致 javascript 脚本变慢 浏览器渲染一 ...
- 理解浏览器的重绘与回流(repaint&&reflow)
今天在做练习的时候,遇到了重绘与回流这个词,表示连个毛都没有听过.遂查之,首先将网上的(http://blog.sina.com.cn/s/blog_8dace7290102wezv.html)关于这 ...
随机推荐
- tomcat8 的 websocket 支持
使用 tomcat8 开发 WebSocket 服务端非常简单,大致有如下两种方式. 1.使用注解方式开发,被 @ServerEndpoint 修饰的 Java 类即可作为 WebSocket 服务端 ...
- win32/linux 线程 log
原文 #include <stdio.h> #include <stdlib.h> #include <string.h> #ifdef WIN32 #includ ...
- Kubernetes - Deploy Guestbook example on Kubernetes
This scenario explains how to launch a simple, multi-tier web application using Kubernetes and Docke ...
- MakeDown的使用
Makedown的使用 之前有用博客园来写博客,但是因为它的界面不好看,所以中途就放弃了.后来也使用过"有道云笔记",发现其写的笔记的界面很简洁工整.有道云笔记的书写原理和Make ...
- SQL Server 2008过期导致MSSQLSERVER服务无法启动现象
SQL Server 2008过期导致MSSQLSERVER服务无法启动现象:安装的是SQL Server 2008评估版,180天的试用期后,MSSQLSERVER服务就无法启动,手动启动就报告17 ...
- jQuery面向对象的写法
定义的写法 //构造函数 function test(){ //construct code } //初始化方法 test.prototype.init = function(){ //init co ...
- iOS数据存取---iOS-Apple苹果官方文档翻译
CHENYILONG Blog iOS数据存取---iOS-Apple苹果官方文档翻译 数据存取/*技术博客http://www.cnblogs.com/ChenYilong/ 新浪微博http:// ...
- LintCode之二叉树的最大节点
分治问题,可以把整棵树看做是由一颗颗只有三个节点组成的小树,一颗树的构成是根节点.左子树.右子树,这样只需要从左子树找出一个最大的节点,从右子树找出一个最大的节点,然后与根节点三个取个最大的,就是最终 ...
- c语言学习笔记.关键字.存储类型关键字等
关键字const 1.修饰变量. 修饰的对象为常量,只读. 2.修饰指针. const 也可以和指针变量一起使用,这样可以限制指针变量本身,也可以限制指针指向的数据. const 离变量名近就是用来修 ...
- linux驱动开发:用户空间操作LCD显示简单的图片【转】
转自:http://blog.csdn.net/changliang7731/article/details/53074616 上一章我们简单介绍了LCD的一些基本原理.当然更深奥的还有,比如gamm ...