♫【网站优化】Reflow / Repaint
浏览器的回流与重绘 by 张盛志
其中一个跟浏览器有关的原因,那就是浏览器需要花时间、花精力去渲染。当它发现某个部分发生了变化影响了布局,需要倒回去重新渲染,我们就称这个回退的过程叫Reflow。
只要某些行为引起了页面上某些元素的占位面积、定位方式、边距等属性的变化,都会引起这些元素内部、周围甚至整个页面的重新渲染。Repaint比较好理解,其实就是浏览器根据重新计算的各个属性值对页面的部分元素进行重新绘制。
如果只是改变某个元素的背景色、文字颜色、边框颜色等等不影响它周围或内部布局的属性,将只会引起浏览器Repaint。Repaint的速度明显快于Reflow(在IE下需要换一下说法,Reflow要比Repaint更缓慢-0-)。引起 Reflow 和 Repaint 的因素
- Resize浏览器窗口、滚动页面
- 字体的改变(大小,颜色,行高等)
- 添加/删除一个样式表
- 应用新的样式或者修改任何影响元素外观的属性
- 伪类(例如:hover)
- DOM元素的添加、修改(内容)、删除
- 读取元素的某些属性(offsetLeft、offsetTop、offsetHeight、offsetWidth、 scrollTop/Left/Width/Height、clientTop/Left/Width/Height、 getComputedStyle()、currentStyle(in IE))
如何尽量减少Reflow 和Repaint
- 尽可能限制reflow的影响范围。
- 如果通过设置style属性改变结点样式,每设置一次都会导致一次reflow。所以最好通过设置class的方式。
- 实现元素的动画,它的position属性应当设为fixed或absolute,这样不会影响其它元素的布局。
- 在效果和性能上取得平衡。
- 不要用tables进行布局。Table的子元素只要有一个触发了reflow,会导致整个表格的其他元素都发生reflow,而且它产生reflow的时间,是其他block元素的reflow的3倍。在适合使用table的场合,定义table-layout的属性值为auto或fixed,让其一行一行输出。
- 避免在CSS中使用表达式。如果CSS里有expression,每个expression都会导致CSS重新计算一遍。很多情况下都会触发reflow。
- 页面上尺寸可以确定的元素,例如图片,文本框等等,最好为其定义高度和宽度。
- 避免在document上直接进行频繁的DOM操作,如果确实需要可以采用off-document的方式进行。
(1). 先将元素从document中删除,完成修改后再把元素放回原来的位置
(2). 将元素的display设置为”none”,完成修改后再把display修改为原来的值
(3). 如果需要创建多个DOM节点,可以使用DocumentFragment创建完后一次性的加入document- 集中修改样式。
(1). 尽可能少的修改元素style上的属性
(2). 尽量通过修改className来修改样式- 缓存Layout属性值。这样可以避免每次读取属性时造成浏览器的渲染。
♫【网站优化】Reflow / Repaint的更多相关文章
- 如何优化你的JS脚本来减少reflow/repaint?
如何优化你的脚本来减少reflow/repaint?1. 避免在document上直接进行频繁的DOM操作,如果确实需要可以采用off-document的方式进行,具体的方法包括但不完全包括以下几种: ...
- 前端性能优化 —— reflow(回流)和repaint(重绘)
简要:整个在浏览器的渲染过程中(页面初始化,用户行为改变界面样式,动画改变界面样式等)reflow(回流)和repaint(重绘) 会大大影响web性能,尤其是手机页面.因此我们在页面设计的时候要尽量 ...
- 前端性能优化 —— reflow(回流/重排)和repaint(重绘)
简要:整个在浏览器的渲染过程中(页面初始化,用户行为改变界面样式,动画改变界面样式等)reflow(回流)和repaint(重绘) 会大大影响web性能,尤其是手机页面.因此我们在页面设计的时候要尽量 ...
- 前端性能优化----reflow(回流)和repaint(重绘)
什么是reflow和repaint(原文链接:http://www.cnblogs.com/Peng2014/p/4687218.html) reflow:例如某个子元素样式发生改变,直接影响到了其父 ...
- 关于web前端网站优化
不知道是哪位大牛的文章,转过来嘻嘻. 作者:斯迪链接:https://www.zhihu.com/question/21658448/answer/18903129来源:知乎著作权归作者所有.商业转载 ...
- ASP.NET MVC 3 网站优化总结(三)Specify Vary: Accept-Encoding header
继续进行 ASP.NET MVC 3 网站优化工作,使用 Google Page 检测发现提示 You should Specify Vary: Accept-Encoding header,The ...
- ASP.NET MVC 3 网站优化总结(一) 使用 Gzip 压缩
网站开启 Gzip 压缩的好处相信很多人都已经清楚,这样做可以提高网站的性能.那么为什么很多网站没有开启 Gzip 压缩功能呢?原因有4点:防病毒软件.浏览器 bug.网站代理和服务器未配置. 使用 ...
- ASP.NET MVC 3 网站优化总结(六)压缩 HTML
压缩 html 可以去除代码中无用的空格等,这样可提高网站的加载速度并节省带宽.今天就让我们看看在 ASP.NET MVC 3 怎么实现 html 压缩,我们可通过实现 ActionFilter 来完 ...
- ASP.NET网站优化(转自一位博友的文章,写的非常好)
不修改代码就能优化ASP.NET网站性能的一些方法 阅读目录 开始 配置OutputCache 启用内容过期 解决资源文件升级问题 启用压缩 删除无用的HttpModule 其它优化选项 本文将介绍一 ...
- 网站优化之PHPCMS如何开启伪静态
做为一名网站优化方面的工作,那么选择CMS系统的时候,有良好的网站优化功能就是一个好的CMS的标准之一,而系统是否支持伪静态,则是URL优化的工作之一,而PHPCMS是一款网站优化方面做得比较成功的C ...
随机推荐
- python模块与包
模块是包括python定义和声明的文件.文件名=模块名+".py".模块名保存在全局变量__name__中. 1.模块中的执行语句,只是在导入时执行一次.这些语句通常用于初始化模块 ...
- css层叠顺序
优先级: 1.添加!important规则的分组享有最高优先级:会将所有不带!important的规则 例如:#id{border:6px solid black!important}高于#id{bo ...
- PHP学习笔记(五)
关于Response header 的一些小知识: Host :address url, host 是浏览器给服务器提供的address标识.由于http协议是无状态的,服务器需要根据host的这个 ...
- 2014年12月23日00:42:54——PS4
http://tieba.baidu.com/p/3415598015?see_lz=1&pn=1 http://tieba.baidu.com/p/3188981817 http://tie ...
- Codevs 4600 [NOI2015]程序自动分析
4600 [NOI2015]程序自动分析 时间限制: 1 s 空间限制: 256000 KB 题目等级 : 黄金 Gold 传送门 题目描述 Description 在实现程序自动分析的过程中,常常需 ...
- (转) IOS用CGContextRef画各种图形(文字、圆、直线、弧线、矩形、扇形、椭圆、三角形、圆角矩形、贝塞尔曲线、图片)
首先了解一下CGContextRef: An opaque type that represents a Quartz 2D drawing environment. Graphics Context ...
- 安装centos 6.7
安装centos 6.7 系统 首先系统安装引导,本次系统安装是通过虚拟机安装,与真是环境十分接近 系统引导后第一步是询问是否检测硬盘,选择不检测(Skip) 然后等待系统引导进入安装界面,进入后我们 ...
- winform 两个TreeView间拖拽节点
/// <summary> /// 正在拖拽的节点 /// </summary> private TreeNode DragNode = null; /// <summa ...
- Sqlserver 原生 MD5 函数(转)
--创建md5函数CREATE FUNCTION [dbo].[MD5](@src varchar(255) )RETURNS varchar(255)ASBEGIN DECLARE @md5 ...
- 关于 jquery.showLoading 中 出现的 图标不在页面中间的问题
很多人喜欢 showLoading 因为 这个实在是太简单了直接 showLoading() hideLoading() 就可以解决这个问题. 今天我们就来看一下 这个插件里面的一个错误 或者说 ...