前端性能优化—回流与重绘
前端性能优化—回流与重绘
一、回流
当渲染树中部分或者全部元素的尺寸、结构或者属性发生变化时,浏览器会重新渲染部分或者全部文档的过程就称为回流。
下面这些操作会导致回流:
- 页面的首次渲染
- 浏览器的窗口大小发生变化
- 元素的内容发生变化
- 元素的尺寸或者位置发生变化
- 元素的字体大小发生变化
- 激活CSS伪类
- 查询某些属性或者调用某些方法
- 添加或者删除可见的DOM元素
在触发回流(重排)的时候,由于浏览器渲染页面是基于流式布局的,所以当触发回流时,会导致周围的DOM元素重新排列,它的影响范围有两种:
全局范围:从根节点开始,对整个渲染树进行重新布局
局部范围:对渲染树的某部分或者一个渲染对象进行重新布局
二、重绘
当页面中某些元素的样式发生变化,但是不会影响其在文档流中的位置时,浏览器就会对元素进行重新绘制,这个过程就是重绘。
下面这些操作会导致回流:
- color、background 相关属性:background-color、background-image 等
- outline 相关属性:outline-color、outline-width 、text-decoration
- border-radius、visibility、box-shadow
注意: 当触发回流时,一定会触发重绘,但是重绘不一定会引发回流。
三、 如何避免回流与重绘?
减少回流与重绘的措施:
- 操作DOM时,尽量在低层级的DOM节点进行操作
- 不要使用
table
布局, 一个小的改动可能会使整个table
进行重新布局 - 使用CSS的表达式
- 不要频繁操作元素的样式,对于静态页面,可以修改类名,而不是样式。
- 使用absolute或者fixed,使元素脱离文档流,这样他们发生变化就不会影响其他元素
- 避免频繁操作DOM,可以创建一个文档片段
documentFragment
,在它上面应用所有DOM操作,最后再把它添加到文档中 - 将元素先设置
display: none
,操作结束后再把它显示出来。因为在display属性为none的元素上进行的DOM操作不会引发回流和重绘。 - 将DOM的多个读操作(或者写操作)放在一起,而不是读写操作穿插着写。这得益于浏览器的渲染队列机制。
浏览器针对页面的回流与重绘,进行了自身的优化——渲染队列
浏览器会将所有的回流、重绘的操作放在一个队列中,当队列中的操作到了一定的数量或者到了一定的时间间隔,浏览器就会对队列进行批处理。这样就会让多次的回流、重绘变成一次回流重绘。
上面,将多个读操作(或者写操作)放在一起,就会等所有的读操作进入队列之后执行,这样,原本应该是触发多次回流,变成了只触发一次回流。
前端性能优化—回流与重绘相关推荐
- 前端性能之回流与重绘(reflow repaint)
写在金三银四之际. 因为种种原因想要谋求新的发展,不得已翻起了尘封已久的高程书:写起了各种经典CSS布局:回顾起记忆略显模糊的几个项目.感慨着太多太多的知识点自己都不够深入甚至缺乏认识,却又不能急功近 ...
- javascript --- [读书笔记] 回流与重绘 前端优化小结
1. 浏览器渲染原理 请说出: 从用户在浏览器地址输入网址,到看整个页面,中间都发生了哪些事情? HTTP请求阶段 HTTP响应阶段 浏览器渲染阶段 1.1 可能用到的知识 1.1.1 进程 Proc ...
- 前端性能优化常用代码
前端性能优化常用代码 为什么要做性能优化?性能优化到底有多重要? 网站的性能优化对于用户的留存率.转化率有很大的影响,所以对于前端开发来说性能优化能力也是重要的考察点. 性能优化的点非常的多,有的小伙 ...
- 暴肝!7000 字的前端性能优化总结 | 干货建议收藏
为什么要做性能优化?性能优化到底有多重要? 网站的性能优化对于用户的留存率.转化率有很大的影响,所以对于前端开发来说性能优化能力也是重要的考察点. 性能优化的点非常的多,有的小伙伴觉得记起来非常的麻烦 ...
- 讲武德,你们要的7000字前端性能优化干货 ,来了
为什么要做性能优化?性能优化到底有多重要? 网站的性能优化对于用户的留存率.转化率有很大的影响,所以对于前端开发来说性能优化能力也是重要的考察点. 性能优化的点非常的多,有的小伙伴觉得记起来非常的麻烦 ...
- 性能优化之回流_重绘
回流与重绘 当render树中的元素发生尺寸.布局.隐藏等变化时就需要重新构建.当页面布局和几何属性发生变化时就需要回流. 当render树中的一些元素更新属性,而属性只是影响外观风格时,不会影响布局 ...
- 提高网站的性能----回流与重绘
2019独角兽企业重金招聘Python工程师标准>>> 以前在写网页的时候很少关注到网站的性能,时间进入今天,一个网站不在是单纯几张图片或者几段文字,组成一个网站,今天的用户更加注重 ...
- 前端面试中浏览器相关问题(二):回流与重绘
前端面试中浏览器相关问题(二):回流与重绘 文章目录 前端面试中浏览器相关问题(二):回流与重绘 浏览器的渲染过程 生成渲染树 回流 重绘 何时发生回流重绘 浏览器的优化机制 减少回流和重绘 最小化重 ...
- 回流和重绘的介绍以及优化方法
文章目录 一.浏览器的渲染机制 1.生成渲染树的过程 二.回流和重绘 1.回流(reflow) 2.重绘(repaint) 3.何时发生回流.重绘 三.减少回流和重绘 1.浏览器的优化机制 2.使用浏 ...
最新文章
- 前端错误信息收集(errorEruda)解析
- mysql 修改时间段内_详解mysql数据库MyISAM存储引擎如何转为Innodb及其中的注意点...
- vi 技巧和诀窍:令人刮目相看的 10 个超酷命令
- 什么是串口服务器?串口服务器都用在哪些领域?
- bootstraptable导出excel独立使用_JavaWeb系列之-一小时搞定POI导出Excel
- PHP和MySQL的交互实验注意事项,PHP 和 MySQL 开发中要注意的8个技巧
- C#.Net工作笔记016---C#中使用反射对两个对象copy复制内容
- PostgreSQL 的 window函数
- 计算机2.0培训心得,信息技术应用能力提升培训心得体会两篇
- 智能窗帘传感器c语言程序,单片机智能家居电路控制程序+Proteus仿真+视频(光烟雾传感器与自动窗帘)...
- python批量处理word格式_用python批量处理word文档
- maven发布SNAPSHOT版本到私服仓库
- win2d 渐变颜色
- linux gzip 4G,Linux gzip命令
- EndNote参考文献格式_国标
- T61迅盘无法正常工作
- NSDI'17-论文阅读[CherryPick:Adaptively Unearthing the Best Cloud Configurations for Big Data Analytics]
- Android中读写权限申请
- interpersonal skill training
- e3是合法浮点数吗_下面四个选项中,均是不合法的浮点数的选项是
热门文章
- linux-优化内核参数 /etc/sysctl.conf
- Chrome firefox ie等浏览器空格(nbsp;)兼容问题
- Integer的自动拆装箱的陷阱(整型数-128到127的值比较问题)
- java 实现二分法
- long long _int64使用总结
- 去掉 RHEL AS 3 内存检测达不到256MB的警告
- linux m25p80 dts,OpenWrt添加开发板RT5350-EVB,并成功设置pppoe
- linux gvim 列编辑,Linux——vim编辑器
- python进行谱曲_python进行曲——迭代生成
- git常用命令与常见问题解决办法