repaint就是重绘,reflow就是回流

严重性:

在性能优先的前提下,reflow的性能消耗要比repaint的大。

体现:

repaint是某个dom元素进行重绘,reflow是整个页面进行重排,也就是对页面所有的dom元素渲染。

如何触发reflow和repaint

repaint的触发:

1)不涉及任何dom元素的排版问题的变动为repaint,例如元素的color、text-align等改变。

2)color的修改,text-align的修改,a:hover也会造成重绘,伪类引起的颜色等变化不会导致页面的回流,仅仅会触发重绘。

reflow的触发:

1)width、height、border、margin、padding的修改

2)通过hover造成元素表现的改动,如display:none会导致回流

3)appendChild等dom元素操作。

4)font类style 的修改。

5)background的修改,现在经过浏览器厂家的优化,部分background的修改只会触发repaint。

如何尽量避免回流reflow:

a、尽可能在dom末稍通过修改class来修改元素的style属性,尽可能减少受影响的dom元素。

b、避免设置多项内联样式,使用常用的class方式进行设置样式,以避免设置样式时访问dom的低效率。

c、设置动画元素position属性为fixed或absolute:由于当前元素从dom流中独立出来,因此受影响的只有当前元素。

d、牺牲平滑度满足性能:动画精度太强,会造成更多的repaint/reflow,牺牲精度,能满足性能的损耗,获取性能和平滑度的平衡。

f、避免使用table进行布局,table每个元素的大小以及内容的改变,都会导致整个table进行重新计算,造成大幅度的repaint或者reflow。改用div则可以针对性的repaint和避免不必要的reflow。

g、避免在css中使用运算式

reflow和repaint理解总结的更多相关文章

  1. reflow和repaint(摘录自张鑫旭的翻译)

    //正文开始 关于回流(reflows)与重绘(repaints),我已经在twitter和delicious上发布,但是并没有在演讲中提到或是以文章形式发布. 第一次让我开始思考关于回流(reflo ...

  2. 简述reflow和repaint

    今天在看面试题的时候遇到reflow和repaint的问题,以前并没有接触过,所以拿来学习一下~ reflow 和 repaint 会拖慢浏览器的速度,而且用户和Web页面都不能在 reflow 和 ...

  3. 关于页面 reflow 和 repaint

    什么是 reflow 和 repaint 浏览器为了重新渲染部分或整个页面,重新计算页面元素位置和几何结构(geometries)的进程叫做 reflow. 当确定了元素位置.大小以及其他属性,例如颜 ...

  4. 性能优化之reflow和repaint

    本文主要介绍一下什么是reflow,repaint, 怎样避免它们造成的不良影响, 怎么通过工具查看分析它们. 一.首先对浏览器渲染引擎下网页呈现过程简要说一下: 浏览器的渲染引擎开始解析html构建 ...

  5. 浏览器渲染页面原理,reflow、repaint及其优化

    浏览器的主要组件包括: 1.      用户界面 - 包括地址栏.前进/后退按钮.书签菜单等.除了浏览器主窗口显示的你请求的页面外,其他显示的各个部分都属于用户界面. 2.      浏览器引擎 - ...

  6. Reflow、Repaint 性能优化

    涉及到操作大量Dom节点及其样式时,有时感觉画面不顺畅,殊不知浏览器亚历山大了.所以我们心里面一定得清楚 Reflow(回流).Repaint(重绘). 浏览器根据每个Dom节点的样式,包括(大小,颜 ...

  7. reflow和repaint

    Web页面运行在各种各样的浏览器当中,浏览器载入.渲染页面的速度直接影响着用户体验 简单地说,页面渲染就是浏览器将html代码根据CSS定义的规则显示在浏览器窗口中的这个过程.先来大致了解一下浏览器都 ...

  8. reflow和repaint区别?

    作者:zccst 重绘和重排之前也知道,但也没有可以详细了解他们的机制,区别,以及对性能的影响. A repaint occurs when changes are made to an elemen ...

  9. reflow 和 repaint

    Reflow(渲染):对于DOM结构中的各个元素都有自己的盒模型,浏览器根据各种样式(浏览器的.开发人员定义的等)来计算,并根据计算结果将元素放到它该出现的位置,这个过程称之为reflow. refl ...

随机推荐

  1. 【转帖】 PM RD QA OP

    From 百度知道 一.PM: Product Manager,产品经理,又称品牌经理(Brand Manager).举凡产品从创意到上市,所有相关的研发.调研.生产.编预算.广告.促销活动等等,都由 ...

  2. 62 网络编程(三)——UDP编程

    UDP编程标准步骤 服务器端 使用DatagramSocket创建服务端:DatagramSocket server = new DatagramSocket(port);//参数为自定义端口号 准备 ...

  3. LINUX 下.NET Core 微服务部署实战

    前言 最近一直在开发部署.也没有总结一下.从5月份开始出差到现在基本没有发过博客,哎,惭愧. 一直在弄微服务,后续会慢慢更新下面这个系列.欢迎各位大佬交流指点. 分布式理论专题 1..net core ...

  4. 【8】学习C++之this指针

    在学习类的时候,我们可以考虑到一种情况: class Array { public: Array(int len); ~Array(); void setLen(int len) { len=len; ...

  5. kafka安装和简单测试

    kafka安装和简单测试 # 安装zookeeper(apache-zookeeper-3.5.6-bin)https://archive.apache.org/dist/zookeeper/zook ...

  6. nodejs vue的安装

    1.https://nodejs.org/en/ 下载最新版nodejs 2.安装好后win+R输入cmd(管理员权限键入):node -v(node版本)npm -v(npm版本)查看版本号,如图所 ...

  7. 17、在vue中引用移动端框架Vux:

    1:使用vue-cli创建好项目(此处省略步骤)2:在项目中安装vux:npm install vux --save3:​安装vux-loader:npm install vux-loader --s ...

  8. redis-启用命令

    一.redis后端启动: 1.将redis源码包中的redis.conf配置文件复制到redis/bin/下 # cd /root/redis-3.0.0 # cp redis.conf /usr/l ...

  9. C# 如何提前结束 Sleep ?

    好久没有更新博客了,都有点对不起这个账号了.这次跟大家分享的是一种编程思路,没什么技术含量,但也许能帮得到你. 我们经常会在程序程序中用到 Sleep 这个方法.Sleep 方法用起来非常简单,但是有 ...

  10. MyBatis面试题整理

    MyBatis面试题整理 1.什么是MyBatis? 答:MyBatis是一个可以自定义SQL.存储过程和高级映射的持久层框架. 2.讲下MyBatis的缓存 答:MyBatis的缓存分为一级缓存和二 ...