第 15 题:谈谈你对回流和重绘的理解?_谈谈你对回流、重绘的理解。他们的区别是什么?-程序员宅基地

什么是回流?

  • 当一个元素自身的宽高,布局,显示或隐藏,或元素内部的文字结构发生变化,导致需要重新构建页面的时候,就产生了回流

什么是重绘?

  • 当一个元素自身的宽高,布局,及显示或隐藏没有改变,而只是改变了元素的外观风格的时候,就产生了重绘

什么时候会进行回流?

  • 添加或者删除可见的 DOM 元素的时候

  • 元素的位置发生改变

  • 元素的尺寸发生改变

  • 内容改变

  • 页面第一次渲染的时候

  • 列举一些相关的 CSS 样式:width、height、line-height、padding、margin、diaplay、border、top、position、float、font-size、overflow 等

什么时候会进行重绘?

  • 列举一些相关的 CSS 样式:color、background、background-size、visibility、box-shadow

如何进行性能优化?

  • 用 transform 代替 top,left ,margin-top, margin-left… 这些位移属性

  • 不要使用 js 代码对 dom 元素设置多条样式,选择用一个 className 代替之

  • 不要在循环内获取 dom 的样式例如:offsetWidth, offsetHeight, clientWidth, clientHeight 等。浏览器有一个回流的缓冲机制,获取这些属性时会产生回流

  • 避免设置多层内联样式,写个外部类这样只回流一次

  • 让多次回流的元素脱离文档流比如动画,使用 position 属性的 fixed 值或 absolute 值

  • 一起变化(同时修改所有需要变化的属性)

#

文章的内容/灵感都从下方内容中借鉴

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_21774317/article/details/119530168

智能推荐

sed替换换行符-程序员宅基地

sed ':label;N;s/\n/:/;b label' filename sed ':label;N;s/\n/:/;t label' filename 上面的两条命令可以实现将文件中的所有换行符替换为指定的字串,如命令中的冒号。命令的解释: :label; 这是一个标签,用来实现跳转处理,名字可以随便取(label),后面的b label就是跳转...

蓝桥杯练习--试题 基础练习 十六进制转八进制(python进制转换)-程序员宅基地

***题目****试题 基础练习 十六进制转八进制资源限制时间限制:1.0s 内存限制:512.0MB问题描述  给定n个十六进制正整数,输出它们对应的八进制数。输入格式  输入的第一行为一个正整数n (1<=n<=10)。  接下来n行,每行一个由09、大写字母AF组成的字符串,表示要转换的十六进制正整数,每个十六进制数长度不超过100000。输出格式  输出n行,每行为输入对应的八进制正整数。【注意】  输入的十六...

国外程序员整理的 C++ 资源大全-程序员宅基地

原文:http://www.csdn.net/article/2014-10-24/2822269-c++摘要:C++是在C语言的基础上开发的一种集面向对象编程、泛型编程和过程化编程于一体的编程语言。应用较为广泛,是一种静态数据类型检查的,支持多重编程的通用程序设计语言。关于 C++ 框架、库和资源的一些汇总列表,由 fffaraz发起和维护。内容包括:标准库、Web应

卡尔曼滤波算法的五大核心公式含义_卡尔曼滤波器五个公式-程序员宅基地

简单记录卡尔曼滤波算法五大核心公式的含义_卡尔曼滤波器五个公式

自定义带箭头圆圈,自定义点击事件可以加减速,暂停继续,自动旋转-程序员宅基地

public class MyCricleView extends View { private int borderColor;//圆圈的颜色 private int defaultColor;//保存圆圈或切换圆圈的颜色 private float r = 100;//半径 private float paintX;//圆心X private floa

【Emgu】一起学EmguCV(一)配置与使用-程序员宅基地

首先先介绍一下OpenCV,OpenCV的全称是:Open Source Computer Vision Library,OpenCV是一个基于(开源)发行的跨平台计算机视觉库,可以运行在Linux、Windows和Mac OS操作系统上。它轻量级而且高效——由一系列 C 函数和少量 C++ 类构成,同时提供了Python、Ruby、MATLAB等语言的接口,实现了图像处理和计算机视觉方面的很多通

随便推点

SQL92、SQL99中的多表连接查询区别_sql多表链接的差异-程序员宅基地

SQL99多表连接查询1. cross join(交叉连接)交叉连接会产生一个笛卡尔积select * from emp cross join dept; 在笛卡尔积中, 有很多数据是无意义的, 所以需要消除, 可以通过 where 子句来消除select * from emp cross join dept where emp.deptno=dept.deptno; ..._sql多表链接的差异

zabbix 如何监控mysql 出错的查询数量_MON-DB-MySQL 通过 zabbix 监控 processlist 数量_踏歌西行的博客-程序员宅基地

MON-DB-MySQL 通过 zabbix 监控 processlist 数量本方案基本思路为先通过脚本将 MySQL 的 processlist 数量输出至文本文件, 之后通过 zabbix_agent 的自定义参数方式获取文件内的值并传输至 zabbix 的服务器端1.MySQL 主从复制及同步延迟输出至文本文件脚本以及状态文本文件的存放路径:/data/myscript (可按需配置)..._processlist.count

Oracle Spatial空间函数_oracle spatial函数-程序员宅基地

Oracle Spatial提高了几何体处理函数,即空间函数。与空间操作符不同的是空间函数计算不需要有空间索引,功能比前者更丰富,可以出现在SELECT语句中(前者只能在WHERE子句中)。 Oracle Spatial空间函数分为几大类: 缓冲函数(Buffering functions): 关系分析函数(Relationship analysis functions):这类函数测_oracle spatial函数

word文档加密破解方法,实测有效-程序员宅基地

其他方法也可以,如下:http://www.360doc.com/content/13/1227/10/8726682_340474327.shtml

MKMapView用法-程序员宅基地

1.MKMapView的显示 (1)创建MKMapView CGRect rect = CGRectMake(0, 20, 320, 460); MKMapView *mapView = [[MKMapView alloc] initWithFrame:rect]; (2)设定经纬度 CLLocationCoordinate2D theCoordinate; theCoor

CPU的工作过程_顺其自然~的博客-程序员宅基地

CPU的工作过程CPU的基本工作是执行存储的指令序列,即程序。程序的执行过程实际上是不断地取出指令、分析指令、执行指令的过程。CPU从存放程序的主存储器里取出一条指令,译码并执行这条指令,保存执行结果,紧接着又去取指令,译码,执行指令……,如此周而复始,反复循环,使得计算机能够自动地工作。除非遇到停机指令,否则这个循环将一直进行下去。其过程如图3-3所示图3-3 程序的执行过程3.2.1 指令的执行过程几乎所有的冯•诺伊曼型计算机的CPU,其工作都可以分为5个阶段:取指令、指令译码、_cpu的工作过程