页面优化——重绘和回流[通俗易懂]

页面优化——重绘和回流[通俗易懂]一、写在前面页面优化在面试的过程中经常遇到的问题,今天就来总计一下重绘和回流的问题。二、重绘和回流是什么我们都知道一个页面从加载到完成,首先是构建DOM树,然后根据DOM节点进行几何布局形成render树(渲染树),当渲染树构建完成后,页面就根据DOM树开始布局,渲染树也根据设置的样式渲染这些节点。在这一过程中,比如我们删除DOM节点,修改一个元素的宽高,页面布局发生变化,DOM树也发生变化,那么肯定要重新构建DOm树,而DOM树和渲染树紧密相连,DOM树渲染完了,渲染树也会随之进行渲染,这个过程就

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全家桶1年46,售后保障稳定

一、写在前面
页面优化在面试的过程中经常遇到的问题,今天就来总计一下重绘和回流的问题。
二、重绘和回流是什么
我们都知道一个页面从加载到完成,首先是构建DOM树,然后根据DOM节点进行几何布局形成render树(渲染树),当渲染树构建完成后,页面就根据DOM树开始布局,渲染树也根据设置的样式渲染这些节点。
在这一过程中,比如我们删除DOM节点,修改一个元素的宽高,页面布局发生变化,DOM树也发生变化,那么肯定要重新构建DOm树,而DOM树和渲染树紧密相连,DOM树渲染完了,渲染树也会随之进行渲染,这个过程就称为回流
在比如说,我们给一个元素修改颜色,这样的行为是不会影响页面的布局的,DOM树不会发生改变,但是颜色变了,渲染树得重新绘制,这就是重绘
所以说回流一定会触发重绘,重绘不一定触发回流。
题外话:
1、由于display:none的元素不在页面渲染,渲染树的构建不包含这些节点。但是visibilityhidden的元素会在渲染树中。因为displaynone会脱离文档流,visibility为hidden虽然看不到,但类似与透明度为0,其实还在文档流中,还是有渲染的过程。
2、尽量避免使用表格布局,当我们不给表格的td设置固定的宽度的时,一列的td的宽度会以最宽的td的宽作为渲染的标准,假设前几行的td在渲染时都渲染好了,结果下面的某行特别宽,table为了统一宽度,前几行的td会回流重新计算宽度,这是一个比较耗时的操作。
三、怎么样减少回流
回流会重构DOM树,渲染树也得重新渲染,比较麻烦,哪些行为可以引发回流,如何去避免呢?
1、DOM的删除行为
比如删除某个节点,或者给父元素插入子节点,这类操作都会触发回流。如果我们插入多个子节点的话,可以使用documentfragment
2、几何属性的变化
比如说元素的宽度变了,border变了,字体大小变了,这种直接会引发页面的布局的改变,也会触发回流。如果我们需要改变多个属性,做好的是将这些改变定义在一个class中,直接修改class名,这样只会触发一次回流。
3、元素的位置发生改变
修改一个元素的左右margin,padding之类的操作,所以在元素位移的动画,不要更改margin之类的值,使用定位脱离文档流后进行改变位置。
4、获取文章的偏移量之类的属性
例如我们需要获取scrollTop、scrollLeft、scrollWidth、offsetTop、offsetLeft、offsetWidth、offsetHeight之类的属性的时候,浏览器为了保证值的正确性也会回流进行获取,所以如果你要不多次操作,最好取完进行缓存。
5、页面初次渲染触发回流
页面的初次渲染触发回流这样无法避免。
6、浏览器窗口尺寸的改变
resize事件的发生也会触发回流。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/219131.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 猴子摘香蕉_猴子香蕉游戏下载

    猴子摘香蕉_猴子香蕉游戏下载注意:不是严格按照一阶谓词逻辑写法,仅供参考题目:房内有一个猴子,一个箱子,天花板挂了一串香蕉,其位置如图所示。猴子为了拿到香蕉,它必须把箱子搬到香蕉下面,然后再爬到箱子上。请定义必要的谓词,列出问题的初始化状态(即下图所示状态),目标状态(猴子拿到了香蕉,站在箱子上,箱子位于位置b)步骤:1、定义描述环境状态的谓词AT(x,y)x在y处x={monke…

  • Spring+Struts+Hibernate 简介(转)

    Spring+Struts+Hibernate 简介(转)

  • android一键 iphone,安卓手机一键变“iPhone”,这种App太过分了

    android一键 iphone,安卓手机一键变“iPhone”,这种App太过分了原标题:安卓手机一键变“iPhone”,这种App太过分了最近有小伙伴问小雷,如何才能在安卓手机上使用iOS的桌面。让整个手机看起来更加清爽整洁。想让苹果手机变得“卓里卓气”可能有点麻烦,但是如果是安卓手机想变成iOS风格,那是分分钟就能搞定的事情。今天小雷就给大家推荐一款能够随意更换主题UI的实用软件——【XLauncherPro】。这是一款模仿iPhone手机界面的应用,有了它可以让手机界…

  • WOL(Wake On LAN – 局域网唤醒)外网唤醒 配置教程 远程开机「建议收藏」

    WOL(Wake On LAN – 局域网唤醒)外网唤醒 配置教程 远程开机「建议收藏」前言(也叫废话):虽然这个功能叫局域网唤醒,但配合路由器的端口映射功能,广域网唤醒也是可以的。只要有一台能上网的电脑或手机,就能把家中电脑打开,需要用电脑又不在家的时候很方便。一、开启WOL功能进BIOS进入BIOS后找一下有没有WakeOnLAN、网卡唤醒、WOL等字样的选项,找到后启用。二、注册花生壳账号传送门:https://console.oray.com/passport…

  • AngularJS所有版本下载地址

    AngularJS所有版本下载地址AngularJS官网本身采用AngularJS库构建,页面中的AngularJS库通过Google的CDN(内容分发网络)引入,所以国内访问会有问题。大家可以从下面地址获取AngularJS所以版本:https://code.angularjs.org/各种版本应有尽有,上图为证:补充说明:每个目录下有对应版本的压缩包,下载压缩包即可

  • navicat premium使用教程详解_navicat premium怎么用

    navicat premium使用教程详解_navicat premium怎么用NavicatPremium基本使用Navicat是一套数据库管理工具,专为简化数据库的管理及降低系统管理成本而设。Navicat是以直觉化的图形用户界面而建的,可以安全和简单地创建、组织、访问并共用信息。NavicatPremium是Navicat的产品成员之一,能简单并快速地在各种数据库系统间传输数据,或传输一份指定SQL格式及编码的纯文本文件。其他功能包括导入向导、导……

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号