web移动开发最佳实践之js篇

浏览器的回流与重绘 by 张盛志

DOM性能瓶颈与Javascript性能优化

浏览器的渲染原理简介

其中一个跟浏览器有关的原因,那就是浏览器需要花时间、花精力去渲染。当它发现某个部分发生了变化影响了布局,需要倒回去重新渲染,我们就称这个回退的过程叫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的更多相关文章

  1. 如何优化你的JS脚本来减少reflow/repaint?

    如何优化你的脚本来减少reflow/repaint?1. 避免在document上直接进行频繁的DOM操作,如果确实需要可以采用off-document的方式进行,具体的方法包括但不完全包括以下几种: ...

  2. 前端性能优化 —— reflow(回流)和repaint(重绘)

    简要:整个在浏览器的渲染过程中(页面初始化,用户行为改变界面样式,动画改变界面样式等)reflow(回流)和repaint(重绘) 会大大影响web性能,尤其是手机页面.因此我们在页面设计的时候要尽量 ...

  3. 前端性能优化 —— reflow(回流/重排)和repaint(重绘)

    简要:整个在浏览器的渲染过程中(页面初始化,用户行为改变界面样式,动画改变界面样式等)reflow(回流)和repaint(重绘) 会大大影响web性能,尤其是手机页面.因此我们在页面设计的时候要尽量 ...

  4. 前端性能优化----reflow(回流)和repaint(重绘)

    什么是reflow和repaint(原文链接:http://www.cnblogs.com/Peng2014/p/4687218.html) reflow:例如某个子元素样式发生改变,直接影响到了其父 ...

  5. 关于web前端网站优化

    不知道是哪位大牛的文章,转过来嘻嘻. 作者:斯迪链接:https://www.zhihu.com/question/21658448/answer/18903129来源:知乎著作权归作者所有.商业转载 ...

  6. ASP.NET MVC 3 网站优化总结(三)Specify Vary: Accept-Encoding header

    继续进行 ASP.NET MVC 3 网站优化工作,使用 Google Page 检测发现提示 You should Specify Vary: Accept-Encoding header,The ...

  7. ASP.NET MVC 3 网站优化总结(一) 使用 Gzip 压缩

    网站开启 Gzip 压缩的好处相信很多人都已经清楚,这样做可以提高网站的性能.那么为什么很多网站没有开启 Gzip 压缩功能呢?原因有4点:防病毒软件.浏览器 bug.网站代理和服务器未配置. 使用 ...

  8. ASP.NET MVC 3 网站优化总结(六)压缩 HTML

    压缩 html 可以去除代码中无用的空格等,这样可提高网站的加载速度并节省带宽.今天就让我们看看在 ASP.NET MVC 3 怎么实现 html 压缩,我们可通过实现 ActionFilter 来完 ...

  9. ASP.NET网站优化(转自一位博友的文章,写的非常好)

    不修改代码就能优化ASP.NET网站性能的一些方法 阅读目录 开始 配置OutputCache 启用内容过期 解决资源文件升级问题 启用压缩 删除无用的HttpModule 其它优化选项 本文将介绍一 ...

  10. 网站优化之PHPCMS如何开启伪静态

    做为一名网站优化方面的工作,那么选择CMS系统的时候,有良好的网站优化功能就是一个好的CMS的标准之一,而系统是否支持伪静态,则是URL优化的工作之一,而PHPCMS是一款网站优化方面做得比较成功的C ...

随机推荐

  1. (转)C#中的Dictionary字典类介绍

    关键字:C# Dictionary 字典 作者:txw1958原文:http://www.cnblogs.com/txw1958/archive/2012/11/07/csharp-dictionar ...

  2. Java线程间通信-回调的实现方式

    Java线程间通信-回调的实现方式   Java线程间通信是非常复杂的问题的.线程间通信问题本质上是如何将与线程相关的变量或者对象传递给别的线程,从而实现交互.   比如举一个简单例子,有一个多线程的 ...

  3. Angularjs2——TypeScript学习网站

    https://zhongsp.gitbooks.io/typescript-handbook/content/index.html

  4. webstorm 快捷键

    Ctrl+/ 或 Ctrl+Shift+/ 注释(// 或者/*-*/ ) Shift+F6 重构-重命名 Ctrl+X 删除行 Ctrl+D 复制行 Ctrl+G 查找行 Ctrl+Shift+Up ...

  5. Python3 高级特性

    切片 L[0:3]表示,从索引0开始取,直到索引3为止,但不包括索引3.即索引0,1,2,正好是3个元素. 如果第一个索引是0,还可以省略: >>> L =['Michael', ' ...

  6. Java RMI(远程方法调用)开发

    参考 https://docs.oracle.com/javase/7/docs/platform/rmi/spec/rmi-arch2.html http://www.cnblogs.com/wxi ...

  7. hadoop1中mapreduce原理详解

    剖析Mapreduce作业运行机制:原理如下图: 原理图的解释的可以分为以下几个部分 1.客户端提交一个mapreduce的jar包给JobClient 2.JocClient通过RPC和JobTra ...

  8. Python学习笔记——几种数据类型

    1. 列表list: Python内置的一种数据类型是列表:list,用中括号[]表示.list是一种有序的集合,可以随时添加和删除其中的元素,而且元素的类型不必相同.list可以通过下标来访问,范围 ...

  9. 十分钟了解MVVMLight

    十分钟了解MVVMLight   前言: 最近看了看开源框架MVVMLight,一直想写一点笔记,但是文笔欠佳,索性就放弃了.那就来翻译一点文章吧. 由于英文水平和技术水平有限,凡是不妥之处,请大家指 ...

  10. HttpContext.Current.Session=null问题

    启用asp.net状态服务,可以让Session持久化!