了解repaint与reflow的触发场景
感兴趣的可以看看哦~
体现：
repaint是某个DOM元素进行重绘；
reflow是整个页面进行重排，也就是页面所有DOM元素渲染。（可能造成页面原来的规划打乱）
如何触发：
style变动造成repaint和reflow。
不涉及任何DOM元素的排版问题的变动为repaint，例如元素的color/text-align/text-decoration等等属性的变动。
除上面所提到的DOM元素style的修改基本为reflow。例如元素的任何涉及长、宽、行高、边框、display等style的修改。
（即改变了元素在文档流中的大小，从而影响了其它元素的排版）
常见触发场景：
- 触发repaint：
- color的修改，如color=#ddd；
- text-align的修改，如text-align=center；
- a:hover也会造成重绘。
- :hover引起的颜色等不导致页面回流的style变动。
- 等等太多，一时间写出来也太难想了。
- 触发reflow：
- width/height/border/margin/padding的修改，如width=778px；
- 动画，:hover等伪类引起的元素表现改动，display=none等造成页面回流；
- appendChild等DOM元素操作；
- font类style的修改；
- background的修改，注意着字面上可能以为是重绘，但是浏览器确实回流了，经过浏览器厂家的优化，部分background的修改只触发repaint，当然IE不用考虑；
- scroll页面，这个不可避免；
- resize页面，桌面版本的进行浏览器大小的缩放，移动端的话，还没玩过能拖动程序，resize程序窗口大小的多窗口操作系统。
- 读取元素的属性（这个无法理解，但是技术达人是这么说的，那就把它当做定理吧）：读取元素的某些属性（offsetLeft、offsetTop、offsetHeight、offsetWidth、scrollTop/Left/Width/Height、clientTop/Left/Width/Height、getComputedStyle()、currentStyle(in IE))；
注意：visibility:hidden 让元素隐藏起来，虽然元素隐藏起来了但是在文档流还是占据一定的位置，并不会触发reflow
了解repaint与reflow的触发场景相关推荐
- 探讨css中repaint和reflow
前言: 页面设计中,不可避免的需要浏览器进行repaint和reflow.那到底什么是repaint和reflow呢.下面谈谈自己对repaint和reflow的理解,以及结合其他技术牛的讲解,谈谈如 ...
- css的repaint和reflow
css的repaint和reflow 浏览器为了重新渲染部分或整个页面,重新计算页面元素位置和几何结构(geometries)的进程叫做 reflow. 由于 reflow 是一种浏览器中的用户拦截( ...
- [ JS 进阶 ] Repaint 、Reflow 的基本认识和优化 (2)
你是不是经常听师兄或一些前端前辈说不能用CSS通配符 *,CSS选择器层叠不能超过三层,CSS尽量使用类选择器,书写HTML少使用table,结构要尽量简单-DOM树要小....等这些忠告,以前我就大 ...
- JavaScript中的Repaint和Reflow
开发一个页面时,不可避免的需要进行repaint和reflow.也就只有以前的静态页面才会不存在repaint和reflow.repaint主要是针对某一个DOM元素进行的重绘,reflow则是回流, ...
- 典型的AEB误触发场景
AEB(自动紧急制动)为一项重要的主动安全功能,在危险时刻通过触发报警及主动制动保证车辆安全.但AEB如果在正常情况下也被触发了,反而会导致驾驶性降低.驾驶员受惊.后车追尾等负面影响.因此,针对AEB ...
- 【修真院pm小课堂】登录注册的触发场景
大家好,我是IT修真院深圳分院第七期的学员,一枚正直纯洁善良pm, 今天给大家分享一下,修真院官网pm任务五,深度思考中的知识点--在什么样的时间点里去做登录操作比较好 一.登录注册 注册登录系统对于 ...
- Full GC触发场景及详解
前一阵被同学问到Full GC的触发场景,一时只想到了 "老年代空间不足" 的场景.事后自己检索了一些资料,这边把这个问题整理一下. Major GC / Full GC 基于分代 ...
- javascript性能优化-repaint和reflow
repaint(重绘) ,repaint发生更改时,元素的外观被改变,且在没有改变布局的情况下发生,如改变outline,visibility,background color,不会影响到dom结构渲 ...
- 如何减少浏览器repaint和reflow（下）
四.如何优化你的脚本来减少reflow/repaint? 1. 避免在document上直接进行频繁的DOM操作,如果确实需要可以采用off-document的方式进行,具体的方法包括但不完全包括以下 ...
最新文章
- 部分手机配置信息及价格
- dockerfile php环境变量,docker - 在Dockerfile中，如何更新PATH环境变量？
- 喜马拉雅xm格式转化mp3_怎样让mp3录音转文字？
- java实验楼使用说明_Java 方法
- jsf集成spring_Spring和JSF集成：分页
- mysql简单外连接查询
- Oracle 控制文件管理
- python随机生成k个不重复的随机数_使用Python生成不重复的随机值
- keepalived+lvs基于http检测
- 抗光幕布哪个牌子好？
- Android 从零开始实现微信支付
- 2020年最新计算机二级考试题库资料大全！
- codeforces869EThe Untended Antiquity（二维树状数组）
- 树莓派基础实验24：超声波测距传感器实验
- 中年转行，拥抱互联网（上）
- 程序设计所遵循的一般步骤
- 机械臂6D姿态检测（RGB、RGBD、雷达）综述
- Python包 - networkx
- 学计算机u盘多少g合适,装系统的u盘需要多大-大白菜装win7的系统一般要多少G的U？大 – 手机爱问...
- ks 曲线_模型算法基础——KS曲线