CSS回流(Reflow)与重绘(Repaint)
一、介绍
CSS中的回流与重绘是指当HTML或CSS节点发生变化时,浏览器重新绘制和展示页面的过程。回流和重绘会导致浏览器性能降低,应尽量减少。
二、浏览器解析页面的流程
浏览器解析页面主要分为以下的流程:
1.解析HTML,形成HTML DOM树
2.解析CSS,生成CSS规则树
3.将HTML DOM树与CSS规则树结合(attachment),生成Render树
4.布局Render树(layout/reflow),负责各元素大小、位置的计算
5.绘制Render树(painting),绘制页面像素信息
6.浏览器将各层信息发送给GPU,GPU将各层合成,显示在屏幕上
三、回流与重绘的发生阶段
当HTML或CSS发生变化的时候,就会导致浏览器重新解析HTML DOM树和CSS状态树,导致了重新布局(layout)和渲染(repaint)。
· 回流:即为layout或reflow,指重新进行布局。一般意味着元素的大小、位置、结构、内容、字体大小等发生了变化,需要重新解析。
· 重绘:即为repaint,指重新进行绘制,当页面元素样式的改变不影响元素在文档流中的位置时。一般是元素的颜色、背景颜色等外观发生变化,需要重新解析。
回流的成本高于重绘,因为只要是回流就意味着必须重绘。
四、一些优化方案
1.避免逐项更改样式,使用class类对样式进行统一更改,减少回流。
2.避免循环操作DOM。
3.尽量避免多次获取offsetXXX、scrollXXX、clientXXX等属性,如果不能避免则用变量保存来尽量减少回流。
4.动画效果应用于position为absolute或fixed的元素上,动画因为脱离文档流,减少回流与重绘。
5.为动画开启GPU加速,开启css3动画加速的本质是渲染元素图层在GPU中 transform 属性不会触发重绘。所以尽量使用 transform: translate() 代替left与top进行动画。
CSS回流(Reflow)与重绘(Repaint)相关推荐
- 回流(reflow)和重绘(repaint)
回流(reflow)与重绘(repaint) 一.概念 首先我们要明白的是,页面的显示过程分为以下几个阶段: 生成DOM树(包括display:none的节点) 在DOM树的基础上根据节点的集合属性( ...
- 回流Reflow和重绘Repaint
在了解回流和重绘之前,我们先来了解一下浏览器是如何进行解析的 我将它归纳为四个步骤: 解析html(或者是js通过createElement)生成DOM树 解析css,绘制上面是DOM树(注意!此时还 ...
- 重排 (reflow) 与重绘 (repaint)
前言 本文依旧是日常学习总结篇,主要是要理解浏览器的重排与重绘. 一.浏览器解析渲染页面过程 当浏览器获得一个 html 文件时,会 "自上而下" 加载,并在加载过程中进行解析渲染 ...
- 关于重绘repaint和重排reflow
一.什么是重绘,重排 渲染树转换为网页布局,称为"布局流"(flow) ,布局显示到页面的这个过程,称为"绘制"(paint) . 它们都具有阻塞效应,并且会耗 ...
- 什么是重绘repaint?什么是回流reflow?
什么是重绘? 重绘(repaint): 当我们对Dom的修改,导致了样式的变化比如:颜色.font-weight等属性的时候,却并未影响到几何属性(:比如盒子的weidth/height/positi ...
- 重排(reflow) 重绘(repaint)
在页面的生命周期中:至少会发生一次渲染,在用户访问的过程中,还会不断的触发重排(reflow)重绘(repaint) 重绘和重排都会影响性能,尤其是重排,会使我们付出高昂的性能代价. 页面生成的过程( ...
- asp.net ajax 怎么获取前端ul li_字节前端提前批面试题:触发了几次回流几次重绘...
一道字节面试题刷新了我的认知,又学到了新知识,开心. 刚开始我说了答案是各3次,因为获取一次offsetWidth一次,然后改变样式一次. 但是后来发现之所以offsetWidth会触发重排是因为刷新 ...
- 前端性能之回流与重绘(reflow repaint)
写在金三银四之际. 因为种种原因想要谋求新的发展,不得已翻起了尘封已久的高程书:写起了各种经典CSS布局:回顾起记忆略显模糊的几个项目.感慨着太多太多的知识点自己都不够深入甚至缺乏认识,却又不能急功近 ...
- 如何减少页面的重绘和回流(14)
一.减少页面重绘和回流的方法 1.尽量使用css属性简写:如:用boder代替boder-width,boder-style,boder-color 2.批量修改元素样式 elem.className ...
- 浏览器的回流与重绘 (Reflow Repaint)
参考<极客学院--浏览器工作原理与实践> 渲染流程大致可总结为如下: 1. 渲染进程将 HTML 内容转换为能够读懂的 DOM 树结构. 2. 渲染进程将 CSS 样式表转化为浏览器可以理 ...
最新文章
- Python_note1
- python turtle循环图案-Python内置模块turtle绘图详解
- ArrayList源码分析(基于JDK1.6)
- 邮件列表统计(网站推广)
- 会员制的cd出租销售java_模式|酒店改造养老会员制盈利模式及交易结构深度探讨...
- 阿里巴巴牵手上汽集团:成立汽车科技公司
- 程序员菜鸟到高手的11个阶段,你处于哪个阶段?
- Atitit webdav的使用与配置总结attilax总结 目录 1. 支持的协议	2 1.1. http File unc	2 2. 应用场景	2 2.1. 远程文件管理实现功能 文件建立
- 电商系统如何实现订单超时自动取消?
- MotoSimEG-VRC软件:安川机器人弧焊焊接离线编程与虚拟仿真
- 阿里云短信验证码发送类
- 手把手教你用 Keras 实现 LSTM 预测英语单词发音
- 面经(2022 美团暑期实习 -一面)
- 刻意练习:Python基础 -- Task07. 文件与文件系统
- 令人拍案叫绝的Wasserstein GAN 及代码(WGAN两篇论文的中文详细介绍)
- python定时发送qq消息_自动给qq好友发消息
- quick-cocos 3.5 lua banding c++
- 技术分享 | Goby IP库初探
- 浅析私有化即时通讯软件的用处有哪些
- Android Camera了解一下