前端优化---回流 (reflow)与 重绘(repaint)
回流(reflow):指的是网络浏览器为了重新渲染部分或全部的文档而重新计算文档中元素的位置和几何结构的过程。
页面上节点是以树的形式展现的,我们通过js将页面上的一个节点删除,此时为了不让剩下的节点脱节,将断点结合起来重新形成一棵树。而这个重新结合过程就是回流。就是由于某些修改,要将元素回过头来重新“流”一遍。
重绘(repaints):是一个元素外观的改变所触发的浏览器行为,例如改变vidibility、outline、背景色等属性。浏览器会根据元素的新属性重新绘制,使元素呈现新的外观。
重绘不会带来重新布局,并不一定伴随回流。回流是更明显的一种改变,渲染树需要重新计算;回流的危害在于重新对DOM树进行渲染,那么,脱离文档流之后,进行的任何操作,都不会造成回流了!如果没有对页面进行优化,减少大量回流,那么页面因为回流所花费的时间,导致用户体验感大打折扣;只要修改DOM或修改了元素的形状或大小,就会触发Reflow,单纯修改元素的颜色只需Repaint一下(调用操作系统Native GUI的API绘制)。
减少回流的几点建议:
1. 减少不必要的DOM深度。因为无论你改变DOM节点树上任何一个层级都会影响节点树的每个层级——从根结点一直到修改的子节点。不必要的节点深度将导致执行回流时花费更多的时间。
2. 精简css,去除没有用处的css
3. 如果你想让复杂的表现发生改变,例如动画效果,那么请在这个流动线之外实现它。使用position-absolute或position-fixed来实现它,也即是让其脱离文档流,不影响父级;现代浏览器也可以使用CSS3 transition实现动画效果,比改变像素值来的高性能。
4. 避免不必要的复杂的css选择符,尤其是使用子选择器,或消耗更多的CPU去做选择器匹配。
5.页面的元素适当定高,例如如果div内容可能有高度差异的动态内容载入; 页面刷新载入的时候,应避免页面元素的晃动、位移等,这些都是额外的重绘,会让你的CPU和风扇兴奋的
6.图片设定不响应重绘的尺寸,如果你的<img>
不设定尺寸、同时外部容器没有定死高宽,则图片在首次载入时候,占据空间会从0到完全出现,左右上下都可能位移,发生大规模的重绘。可以参见新浪微博载入时候页面高度随着图片显示不断变高的问题,这些都让浏览器重绘了,一是体验可能不好,二是烧CPU的。
html页面的加载理解
浏览器接收到html代码,可能是一份完整的文档,也可能是一个chunk,即开始解析。解析过程是先构建dom树,再根据dom树构建渲染树,最后浏览器将渲染树绘制到页面上。
构建dom树的过程即根据html代码自上而下进行构建,当遇到script文件加载/执行会阻塞后面dom树的构建(javascript可能会改变dom树),而遇到css文件则会阻塞渲染树的构建,即dom树依然继续构建(除非遇到script标签并且css文件依旧未加载完成),但不会渲染绘制到页面上。而无论哪个阻塞,该加载的文件还是会加载,例如html文档中的其他css/js/图片文件。
另外javascript被加载后就会被执行,执行的过程也阻塞树的构建。是执行完了才解析其他内容,而不是执行完了才加载其他内容。
一篇关于页面资源加载很好的文章:
前端优化---回流 (reflow)与 重绘(repaint)的更多相关文章
- 回流(reflow)与重绘(repaint)
回流(reflow)与重绘(repaint) 很早之前就听说过回流与重绘这两个名词,但是并不理解它们的含义,也没有深究过,今天看了一套网易的题目,涉及到了这两个概念,于是想要把它们俩弄清楚... 一. ...
- 页面优化,谈谈重绘(repaint)和回流(reflow)
一.前言 偶尔在面试过程中遇到过重汇与回流reflow的问题,毕竟页面优化也是考核一个开发者能力的关键之一,上篇文章聊了下documentfragment也是为了减轻回流问题,那么本篇文章好好介绍下重 ...
- 页面重绘(repaint)和回流(reflow)
前言 页面显示到浏览器上的过程: 1.1.生成一个DOM树. 浏览器将获取到的HTML代码解析成1个DOM树,包含了所有标签,包括display:none和动态添加的节点. 1.2.生成样式结构体. ...
- 什么是回流(重排 reflow)?什么是重绘(repaint)?如何减少回流、重绘?
什么是回流(重排 reflow)? 回流(重排 reflow):对DOM树进行渲染,只要修改DOM或修改元素的形状大小,就会触发reflow,reflow的时候,浏览器会使已渲染好受到影响的部分失效, ...
- 前端性能优化--回流(reflow)和重绘(repaint)
HTML加载时发生了什么 在页面加载时,浏览器把获取到的HTML代码解析成1个DOM树,DOM树里包含了所有HTML标签,包括display:none隐藏,还有用JS动态添加的元素等. 浏览器把所有样 ...
- web前端优化之reflow(减少页面的回流)
1.什么是reflow? reflow(回流)是指浏览器为了重新渲染部分或者全部的文档,重新计算文档中的元素的位置和几何构造的过程. 因为回流可能导致整个Dom树的重新构造,所以是性能的一大杀手. 以 ...
- 【笔记】web 的回流与重绘及优化
最近看了幕课网 web 前端性能优化的课程,其中说到了浏览器的回流(reflow) 及 重绘(repaint).觉得以后面试或许会被问到所以做一下笔记: 课程从回流及重绘这两个点延伸出了一个知识点就是 ...
- DOM 操作成本究竟有多高,HTML、CSS构建过程 ,从什么方向出发避免重绘重排)
前言: 2019年!我准备好了 正文:从我接触前端到现在,一直听到的一句话:操作DOM的成本很高,不要轻易去操作DOM.尤其是React.vue等MV*框架的出现,数据驱动视图的模式越发深入人心,jQ ...
- CSS重排和重绘
一.什么是重绘Repaint和重排 (回流 reflow) 重绘:当元素的一部分属性发生改变,如外观.背景.颜色等不会引起布局变化,只需要浏览器根据元素的新属性重新绘制 ,使元素呈现新的外观叫做重绘. ...
随机推荐
- 关于keil警告/错误问题的解释和修正
- 版权声明:本文为博主 **乔勇刚-** 一字一句敲出来的原创作品,未经博主允许不得转载,多谢支持.- 本系列博客仅做经验交流分享,不能用作任何商业用途.本文中如有不足之处,请您留言,本人将及时更改 ...
- HTML5-新增语义化结构标签
总结目录结构: 1.简洁的DOCTYPE声明 2.新的布局结构标签 header,article,section,aside,footer 3.新的其它常用标签: nav,hgroup,figure, ...
- HTTP_3_HTTP报文
用户HTTP协议交互的信息被称为HTTP报文 简单的请求报文和响应报文实例 HTTP传输过程中常用设置 提升传输速率 编码压缩传输 (常见压缩格式:gzip compress deflate ) 分块 ...
- mybatis动态插入数据库
<insert id="dynamicAddUser"> insert into t_user <!-- trim 对所有的表中列名 进行动态处理 --> ...
- Code blocks返回错误代码:Process returned -1073741819 (0xC0000005)
循环语句访问链表时,返回了错误代码: 逐项排查后,发现是由while循环引起的: 附上出错代码: do{ L=L->post; printf("%05d %d %05d\n" ...
- c#小灶——数据类型
C#中有许多数据类型,存储不同的数据要用不同的数据类型.我们这里面向初学只介绍值类型,引用类型和指针类型在后续的学习中会有接触. 整型 int是最常用的整型,用来存储整数.除了int之外,还有其他不常 ...
- Netty学习(三)-Netty重要接口讲解
上一节我们写了一个HelloWorld,对于Netty的运行有了一定的了解,知道Netty是如何启动客户端和服务器端.这一节我们简要的讲解一下几个重要的接口,初步探讨Netty的运行机制,当然刚学Ne ...
- OSGi Bundle之Hello World
开发一个简单的Hello World的OSGi Bundle(OSGi绑定包) 在OSGi中,软件是以Bundle的形式发布的.一个Bundle由Java类和其它资源构成,它可为其它的Bundle提供 ...
- java web 加载Spring --web.xml 篇
spring是目前最流行的框架.今天谈谈对spring的认识 起步 javaweb中我们首先会遇到的配置文件就是web.xml,这是javaweb为我们封装的逻辑,不在今天的研究中.略过,下面是一个标 ...
- Codeforces 343D Water Tree
题意简述 维护一棵树,支持以下操作: 0 v:将以v为跟的子树赋值为1 1 v:将v到根节点的路径赋值为0 2 v:询问v的值 题解思路 树剖+珂朵莉树 代码 #include <set> ...