细谈页面回流与重绘

你将了解到:

什么是回流
什么是重绘
回流何时发生
重绘何时发生
如何避免回流和重绘
复制代码

带着上面的问题,我们一探究竟

什么是回流

回流:英文是reflow

当render tree中的一部分(或全部),因为元素的规模尺寸、布局、隐藏等改变
而需要重新构建,这就是回流(reflow)
复制代码
  • 每个页面至少回流一次,即页面首次加载
  • 回流时,浏览器会使渲染树中受到影响的部分失效,并重新构造这部分渲染树
  • 回流完成后,浏览器会重新绘制受影响的部分,是重绘过程

什么是重绘

重绘:英文是repaints

当render tree中的一些元素需要更新属性,而这些属性只是影响元素的外
观、风格,而不影响布局(例如:background-color),则称为重绘(repaints)
复制代码

特点:回流必将引起重绘,重绘不一定引起回流 回流比重绘的代价更高

回流何时发生

当页面布局和几何属性改变时就需要回流

下述情况会发生浏览器回流:

(1)添加或者删除可见的DOM元素;
(2)元素位置改变;
(3)元素尺寸改变——边距、填充、边框、宽度和高度
(4)内容改变——比如文本改变或者图片大小改变而引起的计算值宽度和高度改变;
(5)页面渲染初始化;
(6)浏览器窗口尺寸改变——resize事件发生时;
复制代码
let box = document.getElementById("box").style;
box.padding = "2px";   // 回流+重绘
box.border = "1px solid red";  // 再一次 回流+重绘
box.fontSize = "14px";    // 回流+重绘
document.getElementById("box").appendChild(document.createTextNode('abc!'));
复制代码

重绘何时发生

元素的属性或者样式发生变化。

let box = document.getElementById("box").style;
box.color = "red";    // 重绘
box.backgroud-color = "blue";    // 重绘
document.getElementById("box").appendChild(document.createTextNode('abc!'));
复制代码

因回流的开销较大,如果每个操作都去回流重绘的话,浏览器可能就会受不了。所以很多浏览器都会优化这些操作。

多次的回流、重绘变成一次回流重绘:

浏览器会维护1个队列,把所有会引起回流、重绘的操作放入这个队列,等
队列中的操作到了一定的数量或者到了一定的时间间隔,浏览器就会flush
队列,进行一个批处理。
复制代码

但是有时上面的方法会失效,原因是:

有些情况,当请求向浏览器请求一些style信息的时候,就会让浏览器强制flush队列,比如:(1)offsetTop, offsetLeft, offsetWidth, offsetHeight
(2) scrollTop/Left/Width/Height
(3)clientTop/Left/Width/Height
(4)width,height
(5)请求了getComputedStyle(), 或者 IE的 currentStyle
复制代码

当你请求上面的一些属性的时候,浏览器为了给你最精确的值,需要flush队列,因为队列中可能会有影响到这些值的操作。即使你获取元素的布局和样式信息跟最近发生或改变的布局信息无关,浏览器都会强行刷新渲染队列。

这样以来,浏览器的优化就显得力不从心,所以我们需要一些方法,尽可能的避免或减少浏览器的回流、重绘

如何避免、减少回流和重绘

  • 减少对render tree的操作【合并多次多DOM和样式的修改】
  • 减少对一些style信息的请求,尽量利用好浏览器的优化策略
(1)添加css样式,而不是利用js控制样式
(2)让要操作的元素进行“离线处理”,处理完后一起更新当用DocumentFragment进行缓存操作,引发一次回流和重绘使用display:none技术,只引发两次回流和重绘使用cloneNode(true or false)和replaceChild技术,引发一次回流和重绘
(3)直接改变className,如果动态改变样式,则使用cssText(考虑没有优化的浏览器)// badelem.style.left = x + "px";elem.style.top = y + "px";// goodelem.style.cssText += ";left: " + x + "px;top: " + y + "px;";
(4)不要经常访问会引起浏览器flush队列的属性,如果你确实要访问,利用缓存// badfor (var i = 0; i < len; i++) {el.style.left = el.offsetLeft + x + "px";el.style.top = el.offsetTop + y + "px";}// goodvar x = el.offsetLeft,y = el.offsetTop;for (var i = 0; i < len; i++) {x += 10;y += 10;el.style = x + "px";el.style = y + "px";}
(5)让元素脱离动画流,减少回流的Render Tree的规模$("#block1").animate({left:50});$("#block2").animate({marginLeft:50});
(6)将需要多次重排的元素,position属性设为absolute或fixed,这样此元素就脱离了文档流,它的变化不会影响到其他元素。例如有动画效果的元素就最好设置为绝对定位;
(7)避免使用table布局:尽量不要使用表格布局,如果没有定宽表格一列的宽度由最宽的一列决定,那么很可能在最后一行的宽度超出之前的列宽,引起整体回流造成table可能需要多次计算才能确定好其在渲染树中节点的属性,通常要花3倍于同等元素的时间。
(8)尽量将需要改变DOM的操作一次完成let box = document.getElementById("box").style;// badbox.color = "red";    // 重绘box.size = "14px";    // 回流、重绘// goodbox.bord = '1px solid red'
(9)尽可能在DOM树的最末端改变class,尽可能在DOM树的里面改变class(可以限制回流的范围)
(10)IE中避免使用JavaScript表达式
复制代码

参考资料:

  • 前端进阶(二)重绘和回流
  • 重绘与回流
  • 页面的重绘与回流,以及如何优化

转载于:https://juejin.im/post/5c87bd375188257e3e47fdc5

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/536827.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

安卓 java中改布局_android-选项卡布局中的地图视图throwing,java....

我创建了一个具有选项卡布局的应用程序,单击选项卡后,我将打开一个使用Web视图的新活动.另外另一个选项卡使用地图视图,列表视图,图像视图.现在,我在Samsung Galaxy Y上安装了我的应用程序-运行正常.当我在Samsung Galaxy Tab 2上安装相同的应用程序时,当我第一次打开地图视图,…

怎么样修改PuTTY的默认字体和字符集

1.在窗口标题上点击右键&#xff0c;选择 Change Settings...2.在打开的配置窗口左边选择 Appearance&#xff0c;在右边点 Font settings 里面的 Change 按钮&#xff0c;选择好中文字体&#xff0c;比如&#xff1a;宋体、新宋体之类的3.选择配置窗口左边的 Translation&…

python 元组比较大小_为什么元组比列表更快?

所报道的“build设速度”比率只适用于常量元组(项目用文字表示)。 仔细观察(并在机器上重复 – 只需在shell /命令窗口input命令&#xff01;)…&#xff1a;$ python3.1 -mtimeit -sx,y,z1,2,3 [x,y,z] 1000000 loops, best of 3: 0.379 usec per loop $ python3.1 -mtimeit […

windows软链接的建立及删除

2019独角兽企业重金招聘Python工程师标准>>> 1.建立举例 # 建立d:develop链接目录&#xff0c;指向远程的目标服务器上的e盘的对应目录。 mklink /d d:\develop \\138.20.1.141\e$\develop# 建立d:develop链接目录&#xff0c;指向远程的目标服务器上的e盘的对应目录…

php原生类,反序列化之PHP原生类的利用

正文文章围绕着一个问题&#xff0c;如果在代码审计中有反序列化点&#xff0c;但是在原本的代码中找不到pop链该如何?N1CTF有一个无pop链的反序列化的题目&#xff0c;其中就是找到php内置类来进行反序列化。基础知识首先还是来回顾一下序列化中的魔术方法&#xff0c;下面也…

Spectral Bounds for Sparse PCA: Exact and Greedy Algorithms[贪婪算法选特征]

目录 概括Sparse PCA Formulation非常普遍的问题Optimality ConditionsEigenvalue Bounds算法代码概括 这篇论文&#xff0c;不像以往的那些论文&#xff0c;构造优化问题&#xff0c;然后再求解这个问题&#xff08;一般都是凸化&#xff09;。而是&#xff0c;直接选择某些特…

js php调用webservice,php调用web services两种方法soap和curl

以http://www.webxml.com.cn/zh_cn/index.aspx一、使用soap调用//服务器支持soap扩展:/*Example 1:$client new SoapClient("http://fy.webxml.com.cn/webservices/EnglishChinese.asmx?wsdl");$parameters array("wordKey">"test");//中英…

JS基础-3

1.for in 对象中有多少组键值对,我们的FOR IN 循环就遍历多少次(不一定) 每一次循环KEY这个变量存储的都是当前循环这组键对值的属性名 1、KEY存储的值都是字符串格式的(不管属性名是否为数字) 2、在FOR IN 循环遍历的时候&#xff0c;大部分浏览器都是先把对象中的键值对进行排…

Python常用的几个函数

print()函数&#xff1a;用于打印输出信息到控制台。 input()函数&#xff1a;用于从控制台获取用户输入。 len()函数&#xff1a;用于获取字符串、列表、元组、字典等对象的长度。 range()函数&#xff1a;用于生成一个整数序列&#xff0c;常用于循环中。 type()函数&…

数据结构——常见的定义

问题答案Ο标记法&#xff08;大Ο标记法&#xff09;是一种用于衡量算法时间复杂度的表示方法。它描述了算法在最坏情况下的运行时间增长率。当我们使用Ο标记法时&#xff0c;我们关注的是算法的上界&#xff0c;即算法的运行时间不会超过Ο(f(n))&#xff0c;其中 f(n) 是输…

TikTok与环保:短视频如何引领可持续生活方式?

在数字时代&#xff0c;社交媒体平台扮演着塑造文化和价值观的关键角色。而TikTok&#xff0c;作为一款全球短视频平台&#xff0c;不仅塑造着用户的娱乐方式&#xff0c;还在悄然地引领着可持续生活方式的潮流。本文将深入探讨TikTok与环保之间的关系&#xff0c;分析短视频如…

Spring源码分析---Bean 的生命周期 03

来源&#xff1a;Spring 3. Bean 的生命周期 自定义一个 SpringBoot 的主启动类&#xff1a; SpringBootApplication public class A03Application {public static void main(String[] args) {ConfigurableApplicationContext context SpringApplication.run(A03Applicatio…

go-carbon v2.3.0 圣诞特别版发布,轻量级、语义化、对开发者友好的 Golang 时间处理库

go-carbon v2.3.0 圣诞节特别版发布&#xff0c;这应该是 2023 年的最后一个版本&#xff0c;祝大家圣诞节快乐&#xff01; carbon 是一个轻量级、语义化、对开发者友好的 golang 时间处理库&#xff0c;支持链式调用。 目前已被 awesome-go 收录&#xff0c;如果您觉得不错…

pytorch 实现 Restormer 主要模块(多头通道自注意力机制和门控制结构)

前面的博文读论文&#xff1a;Restormer: Efficient Transformer for High-Resolution Image Restoration 介绍了 Restormer 网络结构的网络技术特点&#xff0c;本文用 pytorch 实现其中的主要网络结构模块。 1. MDTA(Multi-Dconv Head Transposed Attention&#xff1a;多头…

选择免费的SSL证书,还是付费的?

作为一个互联网文章作者&#xff0c;我会根据具体的使用场景和需求来选择SSL证书。通常情况下&#xff0c;如果是用于个人网站或者小型项目&#xff0c;我会倾向于选择免费的SSL证书&#xff0c;比如 JoySSL提供的免费证书。这样可以在不增加额外费用的情况下为网站提供安全的加…

静态HTTP与CDN:如何优化内容分发

大家好&#xff0c;今天我们来聊聊静态HTTP和CDN这对“黄金搭档”。没错&#xff0c;就是那个让你的网站内容像闪电一样传遍全球的CDN&#xff01; 首先&#xff0c;我们来了解一下静态HTTP。它就像是那个老实可靠的邮差&#xff0c;每次都按时按点地把你的内容送到用户手中。…

第二十一章博客

计算机应用实现了多台计算机间的互联&#xff0c;使得它们彼此之间能够进行数据交流。网络应用程序就是在已连接的不同计算机上运行的程序&#xff0c;这些程序借助于网络协议&#xff0c;相互之间可以交换数据。编写网络应用程序前&#xff0c;首先必须明确所要使用的网络协议…

Node.js中处理特殊字符的文件名,安全稳妥的方案

在Node.js中&#xff0c;通过path模块提供的basename方法&#xff0c;我们可以轻松地从文件路径中提取文件名。然而&#xff0c;这个方法在处理特殊字符时存在一些问题&#xff0c;因为它会对这些字符进行转义&#xff0c;导致在不同操作系统上的兼容性问题。在这篇文章中&…

C++ boost planner_cond_.wait(lock) 报错1225

1.如下程序段 boost unique_lock doesn’t own the mutex: Operation not permitted 问题&#xff1a; 其中makePlan是一个线程。这里的unlock导致错误这个报错 boost unique_lock doesn’t own the mutex: Operation not permitted bool navigation::makePlan(){ //cv::named…

MySQL中如何快速定位占用CPU过高的SQL

作为DBA工作中都会遇到过数据库服务器CPU飙升的场景&#xff0c;我们该如何快速定位问题&#xff1f;又该如何快速找到具体是哪个SQL引发的CPU异常呢&#xff1f;下面我们说两个方法。聊聊MySQL中如何快速定位占用CPU过高的SQL。 技术人人都可以磨炼&#xff0c;但处理问题的思…