浏览器加载解析页面:把HTML解析为DOM树,解析CSS生成CSSOM树,HTML DOM树和CSSOM树组合构建render树,首次触发回流和重绘后将页面结构信息发送给GPU进行绘制渲染。

回流:当元素尺寸、布局、显隐等发生变化,及其他影响了DOM树结构的变化会触发DOM树的重新构建称为回流,当树完成回流后浏览器会将回流后的内容重绘在屏幕中。

重绘:当元素更新属性eg:color、background-color等等,但这些属性只影响元素的外观风格,不影响结构布局时称为重绘。

回流一定会触发重绘,但重绘不一定触发回流。回流的性能消耗大于重绘。

浏览器自身优化性能:浏览器会维护一个队列,将回流重绘操作放入队列,等队列中的操作到一定数量或一定时间时或者我们通过代码访问最新的布局信息时浏览器会执行这个队列,对回流重绘批处理,避免了回流重绘的频繁性影响性能。

作为网页性能优化,应该尽可能减少回流和重绘:

代码中改变元素样式的多个属性时:

el.style.padding = '10px';el.style.borderWidth = '2px';

虽然浏览器会把两次回流合并为一次,但确实引起了两次回流,可以将多次的修改处理合并为一次,减少回流次数

el.style.cssText += 'padding: 10px;border-width: 2px;'

元素脱离文档流使这些元素的修改不会引发回流重绘,因为它们已经脱离了渲染树独立一层存在。

CSS3中通过transform: scale、translate等动画或opacity、filter等操作元素不会引起回流重绘,属于CSS3的硬件加速,对于CSS3的其它操作也能最大化的提升回流重绘的性能

回流&重绘的更多相关文章

  1. 回流(reflow)与重绘(repaint)

    最近项目排期不紧,于是看了一下之前看了好久也没看明白的chrome调试工具的timeline.但是很遗憾,虽然大概懂了每一项是做什么的,但是用起来并不能得心应手.所以今天的重点不是timeline,而 ...

  2. 【web性能】页面呈现、重绘、回流

    在讨论页面重绘.回流之前.需要对页面的呈现流程有些了解,页面是怎么把html结合css等显示到浏览器上的,下面的流程图显示了浏览器对页面的呈现的处理流程.可能不同的浏览器略微会有些不同.但基本上都是类 ...

  3. 页面重绘(repaint)和回流(reflow)

    前言 页面显示到浏览器上的过程: 1.1.生成一个DOM树. 浏览器将获取到的HTML代码解析成1个DOM树,包含了所有标签,包括display:none和动态添加的节点. 1.2.生成样式结构体. ...

  4. 回流(reflow)与重绘(repaint)

    回流(reflow)与重绘(repaint) 很早之前就听说过回流与重绘这两个名词,但是并不理解它们的含义,也没有深究过,今天看了一套网易的题目,涉及到了这两个概念,于是想要把它们俩弄清楚... 一. ...

  5. 重绘(Repaint)和回流(Reflow)

    重绘(Repaint)和回流(Reflow) 1.回流和重绘只是渲染步骤的一小节,是怎么做到影响性能的? css 会影响 javascrip 执行时间导致 javascript 脚本变慢 浏览器渲染一 ...

  6. 高性能WEB开发:深入理解页面呈现、重绘、回流

    在讨论页面重绘.回流之前.需要对页面的呈现流程有些了解,页面是怎么把html结合css等显示到浏览器上的,下面的流程图显示了浏览器对页面的呈现的处理流程.可能不同的浏览器略微会有些不同.但基本上都是类 ...

  7. 【JS】313- 复习 回流和重绘

    点击上方"前端自习课"关注,学习起来~ 原文地址:我不是陈纪庚 segmentfault.com/a/1190000017329980 回流和重绘可以说是每一个web开发者都经常听 ...

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

    HTML加载时发生了什么 在页面加载时,浏览器把获取到的HTML代码解析成1个DOM树,DOM树里包含了所有HTML标签,包括display:none隐藏,还有用JS动态添加的元素等. 浏览器把所有样 ...

  9. 浏览器的重绘与回流(Reflow & Repaint)介绍

    重绘 当页面元素样式改变不影响元素在文档流中的位置时(如background-color,border-color,visibility),浏览器只会将新样式赋予元素并进行重新绘制操作. 回流 当改变 ...

随机推荐

  1. 分库分表实现方式Client和Proxy,性能和维护性该怎么选?

    大家好,我是[架构摆渡人],一只十年的程序猿.这是分库分表系列的第一篇文章,这个系列会给大家分享很多在实际工作中有用的经验,如果有收获,还请分享给更多的朋友. 其实这个系列有录过视频给大家学习,但很多 ...

  2. kafka快速入门到精通

    目录 1. 消息队列两种模式 1.1 消息队列作用 1.2 点对点模式(一对一,消费者主动拉取数据,消息收到后消息删除) 1.3 发布/订阅模式(一对多,消费数据之后不会删除消息) 1.4 kafka ...

  3. Hadoop-Hive组件部署

    一.基础环境 Hive 组件需要基于之前已部署完毕的 Hadoop 全分布系统,在 master 节点上实现 Hive 组件安装. 1.Hadoop-全分布式配置(全部配置) 2.Hadoop-集群运 ...

  4. SIP信令跟踪工具HOMER

    概述 HOMER是一款100%开源的针对SIP/VOIP/RTC的抓包工具和监控工具. HOMER是一款强大的.运营商级.可扩展的数据包和事件捕获系统,是基于HEP/EEP协议的VoIP/RTC监控应 ...

  5. alipay 当面付扫码支付实战开发

    alipay 当面付扫码支付开发 参考官网地址:https://opendocs.alipay.com/open/194/105072 1.当面付介绍: 当面付包括付款码支付和扫码支付两种收款方式.适 ...

  6. ArcGIS使用技巧(四)——山体阴影

    新手,若有错误还请指正! 最近在制图的时候出现如下的情况(图1),怎么调整Display的三个参数都没用. 图 1 查看其信息,发现dem的像元大小为0.00027(图2),是未投影的 图 2 查看A ...

  7. Python paho-mqtt使用心得

    一.概述 一)基本概念 使用回调处理从MQTT代理返回的数据,要使用回调需要先定义回调函数然后将其指派给客户端实例(client). 例如: # 定义一个回调函数 def on_connect(cli ...

  8. 深入了解 TiDB SQL 优化器

    分享嘉宾:张建 PingCAP TiDB优化器与执行引擎技术负责人 编辑整理:Druid中国用户组第6次大数据MeetUp 出品平台:DataFunTalk 导读: 本次报告张老师主要从原理上带大家深 ...

  9. Mysql 计算地址经纬度距离实时位置

    前言 最近在做项目时候,遇到一个这样子的需求, 点到卡包里面卡券使用使用,需要展示卡券使用附近门店, 思路 数据库地址表设计 通用的区域街道地址表tz_sys_area 字段名称 类型 备注 area ...

  10. 龙智被评估为CMMI [3] 级

    2022年3月,龙智宣布已被评估为CMMI研究所的能力成熟度模型集成(CMMI)的 [3] 级. CMMI 是一个能力改进框架,它为组织提供有效流程的基本要素,最终提高其绩效. 成熟度级别 3 的评估 ...