什么是回流(重排 reflow)?什么是重绘(repaint)?如何减少回流、重绘?
什么是回流(重排 reflow)?
回流(重排 reflow):对DOM树进行渲染,只要修改DOM或修改元素的形状大小,就会触发reflow,reflow的时候,浏览器会使已渲染好受到影响的部分失效,并重新构造这部分,完成reflow后,浏览器会重新绘制受影响的部分到屏幕中
(继昨日每日一题:display:none和visibility:hidden 当display显示及隐藏元素时,显示时占据空间,隐藏时不占空间,隐藏前后DOM结构发生变化,所以需要重新渲染 当visibility显示及隐藏元素时,不论是显示还是隐藏,都占据空间,因此隐藏前后DOM结构未发生变化,所以不需要重新渲染。)
什么是重绘(repaint)?
重绘(repaint):当我们对DOM的修改导致的样式变化,但未影响几何属性时,浏览器不需要重新计算元素的几何属性,直接可以为该元素绘制新的样式,跳过了回流环节,这个过程就叫重绘。
结论:回流必定会发生重绘,重绘不一定发生回流
在页面交互中存在频繁的回流与重绘,这个过程,会很大程度的影响性能,因为回流所需成本比重绘高的多,so,能用重绘就不要用回流了。
如何减少回流、重绘?
减少回流、重绘就是减少对DOM的操作
1.直接改变className,如果动态改变样式,则使用cssText(减少设置多项内联样式)
2.让要操作的元素进行“离线处理”,处理完后一起更新
当使用DocumentFragment进行缓存操作,引发一次回流和重绘
使用display:none 技术,只引发两次回流和重绘
使用cloneNode(true or false)和replaceChild技术,引发一次回流和重绘
3.不要经常访问会引起浏览器flush队列的属性,如果你确实要访问,利用缓存
4.让元素脱离动画流,减少render 树的规模
5.牺牲平滑度换取速度
6.避免使用table布局
7.IE中避免使用javascript表达式
什么是回流(重排 reflow)?什么是重绘(repaint)?如何减少回流、重绘?的更多相关文章
- 前端性能优化 —— reflow(回流/重排)和repaint(重绘)
简要:整个在浏览器的渲染过程中(页面初始化,用户行为改变界面样式,动画改变界面样式等)reflow(回流)和repaint(重绘) 会大大影响web性能,尤其是手机页面.因此我们在页面设计的时候要尽量 ...
- 回流(reflow)与重绘(repaint)
最近项目排期不紧,于是看了一下之前看了好久也没看明白的chrome调试工具的timeline.但是很遗憾,虽然大概懂了每一项是做什么的,但是用起来并不能得心应手.所以今天的重点不是timeline,而 ...
- 页面优化,谈谈重绘(repaint)和回流(reflow)
一.前言 偶尔在面试过程中遇到过重汇与回流reflow的问题,毕竟页面优化也是考核一个开发者能力的关键之一,上篇文章聊了下documentfragment也是为了减轻回流问题,那么本篇文章好好介绍下重 ...
- 前端性能优化--回流(reflow)和重绘(repaint)
HTML加载时发生了什么 在页面加载时,浏览器把获取到的HTML代码解析成1个DOM树,DOM树里包含了所有HTML标签,包括display:none隐藏,还有用JS动态添加的元素等. 浏览器把所有样 ...
- 页面重绘(repaint)和回流(reflow)
前言 页面显示到浏览器上的过程: 1.1.生成一个DOM树. 浏览器将获取到的HTML代码解析成1个DOM树,包含了所有标签,包括display:none和动态添加的节点. 1.2.生成样式结构体. ...
- 回流(reflow)与重绘(repaint)
回流(reflow)与重绘(repaint) 很早之前就听说过回流与重绘这两个名词,但是并不理解它们的含义,也没有深究过,今天看了一套网易的题目,涉及到了这两个概念,于是想要把它们俩弄清楚... 一. ...
- 重绘(Repaint)和回流(Reflow)
重绘(Repaint)和回流(Reflow) 1.回流和重绘只是渲染步骤的一小节,是怎么做到影响性能的? css 会影响 javascrip 执行时间导致 javascript 脚本变慢 浏览器渲染一 ...
- 前端优化---回流 (reflow)与 重绘(repaint)
回流(reflow):指的是网络浏览器为了重新渲染部分或全部的文档而重新计算文档中元素的位置和几何结构的过程. 页面上节点是以树的形式展现的,我们通过js将页面上的一个节点删除,此时为了不让剩下的节点 ...
- 【JavaScript】回流(reflow)与重绘(repaint)
重绘与回流 首先要了解页面是如何呈现的: HTML文档加载后生成DOM树(包括display:none;元素): 在DOM树的基础上配合css样式结构体生成render树(不包含display:non ...
随机推荐
- PAT 天梯杯 L2-024 部落 dfs,连通块
L2-024. 部落 时间限制 120 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 陈越 在一个社区里,每个人都有自己的小圈子,还可能同时属于很多不 ...
- 解决hql无法使用mysql方法的问题——以date_add()为例
一.前言 最近在做一个定时任务,具体为定时清理掉mysql中存储的,一个月前的数据.而在hql语句中,就需要调用mysql的date_add()方法. 但是在hibernate中,是不允许使用各个SQ ...
- SpringCloud学习笔记(3):使用Feign实现声明式服务调用
简介 Feign是一个声明式的Web Service客户端,它简化了Web服务客户端的编写操作,相对于Ribbon+RestTemplate的方式,开发者只需通过简单的接口和注解来调用HTTP API ...
- spring boot项目后台运行
spring boot项目后台运行 Spring Boot应用的几种运行方式: (1)运行Spring Boot的应用主类 (2)使用Maven的Spring Boot插件mvn spring-boo ...
- jps虚拟机进程状态工具
jps(JVM Process Status Tool) jps工具可以列出正在运行的虚拟机进程,并显示虚拟机执行主类名称以及这些进程的本地虚拟机唯一ID(Local Virtual Machine ...
- 让API实现版本管理的实践
API版本管理的重要性不言而喻,对于API的设计者和使用者而言,版本管理都有着非常重要的意义.下面会从WEB API 版本管理的角度提供几种常见办法: 首先,对于API的设计和实现者而言,需要考虑向后 ...
- 迥异和诡异的SendMessage和PostMessage
1 故障现象 故障现象1:能够收到SendMessage()发出的消息,但收不到PostMessage()发出的消息. 故障现象2:能够收到PostMessage()发出的消息,但收不到S ...
- springcloud config配置读取优先级
情景描述 最近在修复Eureka的静态页面加载不出的缺陷时,最终发现是远程GIT仓库将静态资源访问方式配置给禁用了(spring.resources.add-mappings=false).虽然最后直 ...
- Java连载34-对象的内存分析、对象之间建立关系
一.内存分析 代码:引用可以是局部变量也可以是成员变量 public class Test1{ public static void main(String[] args){ User u = new ...
- 认识Airflow的DAG
前文Airflow的第一个DAG已经跑起来了我们的第一个任务. 本文就来丰富这个任务. 回顾我们的任务内容 我们定义了DAG的名称为Hello-World, 这个叫dag_id, 补充说明descri ...