回流Reflow和重绘Repaint

在了解回流和重绘之前，我们先来了解一下浏览器是如何进行解析的
我将它归纳为四个步骤：

解析html(或者是js通过createElement)生成DOM树
解析css，绘制上面是DOM树（注意！此时还未挂载到浏览器上）
将DOM树挂载在浏览器上，计算各个DOM具体点的坐标，以及布局和大小（回流）
在浏览器上绘制已经生成的DOM树（重绘）

回流的成本比重绘的成本高很多很多！！！一个节点的重流，可能会导致子节点或者父节点以及同级节点的重流如果电脑低的话会造成卡顿和更耗电

那说到现在，我们该如何去优化，使得回流和重绘对性能的影响减低到最小
我给出以下几点建议：

不要一行行的代码对DOM的样式进行修改，我们可以预先定义好某一个类的样式，直接给DOM新的类名
我们将DocumentFragment作为一个暂时的DOM节点存储器，在里面进行修改DOM(下面有关于DocumentFragment详细描述)
先将DOM变成display：none 再进行修改这个过程只有一次重绘
尽量为动画的DOM设置固定定位或者绝对定位，那么修改他们的样式会大大减少回流
尽量少用table布局因为这种布局很可能小小改动，造成重新布局

DocumentFragment 表示一个没有父级文件的最小文档对象。
它被当做一个轻量版的 Document使用，
用于存储已排好版的或尚未打理好格式的XML片段。
最大的区别是因为DocumentFragment不是真实DOM树的一部分，
它的变化不会引起DOM树的重新渲染的操作(reflow)
且不会导致性能等问题。
使用DocumentFragment能解决直接操作DOM引发大量回流的问题，

time是直接添加DOM time1是利用DocumentFragment

回流Reflow和重绘Repaint相关推荐

回流(reflow)和重绘(repaint)
回流(reflow)与重绘(repaint) 一.概念首先我们要明白的是,页面的显示过程分为以下几个阶段: 生成DOM树(包括display:none的节点) 在DOM树的基础上根据节点的集合属性( ...
重排 (reflow) 与重绘 (repaint)
前言本文依旧是日常学习总结篇,主要是要理解浏览器的重排与重绘. 一.浏览器解析渲染页面过程当浏览器获得一个 html 文件时,会 "自上而下" 加载,并在加载过程中进行解析渲染 ...
关于重绘repaint和重排reflow
一.什么是重绘,重排渲染树转换为网页布局,称为"布局流"(flow) ,布局显示到页面的这个过程,称为"绘制"(paint) . 它们都具有阻塞效应,并且会耗 ...
什么是重绘repaint?什么是回流reflow?
什么是重绘? 重绘(repaint): 当我们对Dom的修改,导致了样式的变化比如:颜色.font-weight等属性的时候,却并未影响到几何属性(:比如盒子的weidth/height/positi ...
重排(reflow) 重绘(repaint)
在页面的生命周期中:至少会发生一次渲染,在用户访问的过程中,还会不断的触发重排(reflow)重绘(repaint) 重绘和重排都会影响性能,尤其是重排,会使我们付出高昂的性能代价. 页面生成的过程( ...
asp.net ajax 怎么获取前端ul li_字节前端提前批面试题：触发了几次回流几次重绘...
一道字节面试题刷新了我的认知,又学到了新知识,开心. 刚开始我说了答案是各3次,因为获取一次offsetWidth一次,然后改变样式一次. 但是后来发现之所以offsetWidth会触发重排是因为刷新 ...
前端性能之回流与重绘(reflow repaint)
写在金三银四之际. 因为种种原因想要谋求新的发展,不得已翻起了尘封已久的高程书:写起了各种经典CSS布局:回顾起记忆略显模糊的几个项目.感慨着太多太多的知识点自己都不够深入甚至缺乏认识,却又不能急功近 ...
如何减少页面的重绘和回流(14)
一.减少页面重绘和回流的方法 1.尽量使用css属性简写:如:用boder代替boder-width,boder-style,boder-color 2.批量修改元素样式 elem.className ...
浏览器的回流与重绘 (Reflow Repaint)
参考<极客学院--浏览器工作原理与实践> 渲染流程大致可总结为如下: 1. 渲染进程将 HTML 内容转换为能够读懂的 DOM 树结构. 2. 渲染进程将 CSS 样式表转化为浏览器可以理 ...

回流Reflow和重绘Repaint

回流Reflow和重绘Repaint相关推荐

最新文章

热门文章