掌握回流与重绘面试回答:优化网页加载与响应速度

news2024/9/21 14:46:28

在这里插入图片描述

认识回流reflow和重绘repaint

理解回流reflow:(也可以称之为重排)

第一次确定节点的大小和位置,称之为布局(layout)。
之后对节点的大小、位置修改重新计算称之为回流

什么情况下引起回流呢?

比如DOM结构发生改变(添加新的节点或者移除节点)

比如改变了布局(修改了width、height、padding、font-size等值)

比如窗口resize(修改了窗口的尺寸等)

比如调用getcomputedstyle方法获取尺寸、位置信息

理解重绘repaint

第一次渲染内容称之为绘制(paint)之后重新渲染称之为重绘

什么情况下会引起重绘呢?

比如修改背景色、文字颜色、 边框颜色、样式等;

回流和重绘的性能优化

回流一定会引起重绘,所以回流是一件很消耗性能的事情

所以在开发中要尽量避免发生回流:
  1. 修改样式时尽量一次性修改
    比如通过cssText修改,比如通过添加class修改
  2. 尽量避免频繁的操作DOM
    我们可以在一个DocumentFragment或者父元素中将要操作的DOM操作完成,再一次性的操作
  3. 尽量避免通过getcomputedstyle获取尺寸、位置等信息
    频繁调用getcomputedstyle会导致回流,因为浏览器需要提供准确的计算值
  4. 对某些元素使用position的absolute或者fixed
    并不是不会引起回流,而是开销相对较小,不会对其他元素造成影响
    额外的方法
    新的合成层(compositingLayer):在特定情况下,可以创建新的合成层,并且新的图层可以利用GPU来加速绘制也可以提供性能
特殊解析-composite合成
绘制的过程,可以将布局后的元素绘制到多个合成图层中

这是浏览器的一种优化手段;

默认情况下,标准流中的内容都是被绘制在同一个图层(Layer)中的;

而一些特殊的属性,会创建一个新的合成层(compositinglayer),并且新的图层可以利用GPU来加速绘制

因为每个合成层都是单独染的;

那么哪些属性可以形成新的合成层呢?常见的一些属性

  1. 3Dtransforms
  2. video、 canvas、 iframe
  3. opacity动画转换时;
  4. position:fixed
  5. will-change:一个实验性的属性,提前告诉浏览器元素可能发生哪些变化;
  6. animation或transition设置了opacity、transform
    分层确实可以提高性能,但是它以内存管理为代价,因此不应作为web性能优化策略的一部分过度使用。

面试回答

定义回流(Reflow)在浏览器染过程中的意义,并解释何时回触发回流?

回流是器染过程中的一个阶 涉及计算所有元素的位置和大小

当DOM的结构发生任何改变时(例如元素的添加、 移除、移动或大小变化) 浏览器需要重新计算元素的几何属性 然后确定它们在页面上的确切位置文个过程是必需的 因为页面布局是动态的元素的变化可能影响它元的布局。
但是我们要尽量避免或者减少回流的发生,因为这个过程也是非常消耗性能的。

什么情况下引起回流呢?

比如DOM结构发生改变(添加新的节点或者移除节点);
比如改变了布局(修改了width、height、padding、font-size等值
比如窗口resize(修改了窗口的尺寸等)
比如调用getcomputedstyle方法获取尺寸、位置信息
等等

回流是一个计算密集的过程,可能会影响到网页的性能,特别是在复杂的页面布局中。

因此,优化网页以减少不必要的回流是提高性能的重要策略和手段。

这包括尽量减少在一个操作过程中对DOM的多次修改 用CSS的类进行样式变更等

这也是现代框架Vue、Reac的源码内部经常会涉及到的优化手段.(这里可能引出进一步问你Vue、Rect源码的问题)

解释什么是重绘(Repaint儿以及它在浏览器染网页时的作用

绘是浏览器染过程中的个步骤,它涉及到更新页面中元素的视觉表现 但不涉及这些元条的布局位置
重绘发生在元素的外观变化时,如改变颜色、阴影或者透明度等
这些变化不会影响到元素的几何结构(即位置和形状).

什么情况下会引起重绘呢?

比如修改背景色、文字颜色、边框颜色、样式等
⭐⭐⭐ 回流一定会引起重绘,所以回流是一件很消耗性能的事
虽然重绘不涉及布局的变化,因此比回流成本低,但是也会对性能造成负面影响。我们开发中可以通过下面的方案来进行优化
合并视觉变更:尽可能在一次操作中合并多个视觉变更,以减少绘的次数

新的合成层 (CompositingLayer):在特定情况,可以创建新的合成层,并新的图层可以利用GPU来加速绘制也可以提供性能

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

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

相关文章

Cortex-A7的GIC(通用中断控制器):边沿触发和电平触发中断的区别

0 资料 ARM Generic Interrupt Controller Architecture version 2.0 Architecture Specification1 边沿触发和电平触发中断的区别 1.1 边沿触发和电平触发中断官方解释 边沿触发(Edge-triggered) This is an interrupt that is asserted on detectio…

架构设计——概念和基础

🏠1 架构基础 想要搞清楚架构到底指什么,架构与框架的区别,就需要了解梳理系统、子系统、模块、组件、框架和架构 1.1系统与子系统 1.1.1系统 wiki:系统泛指由一群有关联的个体组成,根据某种规则运作,能完成个别元…

无限制使用OpenAI最新o1-mini、o1-preview模型:经济高效的AI推理模型

OpenAI 最新推出的 o1 模型是该公司推理模型家族的首位成员,它通过创新的“思维链”训练模式,显著提升了逻辑推理和问题解决的能力。o1 模型在编程竞赛问题、数学奥林匹克资格赛以及物理、生物和化学问题的基准测试中表现出色,甚至在某些领域…

数据爬虫中遇到验证码的解决方法

在数据爬虫中遇到验证码是一个常见且复杂的问题,验证码的存在主要是为了阻止自动化工具(如爬虫)对网站进行过度访问或数据抓取,以保护网站的安全性和数据的准确性。 一、验证码的基本概念与类型 验证码(CAPTCHA&…

PointNet++改进策略 :模块改进 | LFA | RandLA-Net,通过随机采样与局部特征聚合提升大规模3D点云处理效率

论文题目:RandLA-Net: Efficient Semantic Segmentation of Large-Scale Point Clouds发布期刊:CVPR作者地址:1牛津大学、2中山大学、3国防科学技术大学代码地址:https://github.com/QingyongHu/RandLA-Net介绍 这篇论文题为《RandLA-Net: Efficient Semantic Segmentatio…

我又做了一个国标GB28181设备模拟器的Windows版本,让国标28181开发更简单,不用再费劲弄个摄像机来调试国标GB28181开发了

之前我搞过一个《EasyGBD国标GB28181设备端模拟器帮助测试国标GB28181平台(EasyGBD->EasyGBS)》,当时,主要是在安卓手机上,用摄像机的本地摄像头来做为视频源、用摄像机的麦克风做为音频源,对外…

基于windows的mysql5.7安装配置教程

目录 0.写在前面的话 1.下载安装包 2.进行目录选择和解压操作 3.配置环境变量 4.创建my.ini文件 5.管理员运行终端 6.安装mysqld 7.初始化数据库 8.启动mysql服务 9.进入mysql管理终端 10.修改root密码 11.刷新权限 12.注销内容 13.重启mysql 14.输入密码测试 1…

Node.js 安装及项目实践

node.js安装 node安装,选择版本 一直next,或者自己修改路径,添加两个包 选择自己的安装的node的路径,cmd或者winr cmd 显示node与npm的版本号 node -vnpm -v可以跟着这个博客将node安装 2024最新版Node.js下载安装及环境配…

云原生信息安全:筑牢数字化时代的安全防线

云原生信息安全:筑牢数字化时代的安全防线 一、云原生信息安全概述 云原生安全包含两层重要含义。一方面,面向云原生环境的安全,目标是防护云原生环境中的基础设施、编排系统和微服务等系统的安全。在云原生内部,安全机制多以云原…

Java--String类(StringBuilder与StringBuffer)

String类的特征: String类的特点: 1. String 类在设计时就是不可改变的, String 类实现描述中已经说明了 String部分源码如下: 2. 所有涉及到可能修改字符串内容的操作都是创建一个新对象,改变的是新对象 例如…

string的模拟实现and友元

一、引言 “知所从来,方知其往。”只有了解一个物体的构造才能更好的使用它。正所谓“不入虎穴,焉得虎子。”那我们学会使用一个类了,可不可以建造一个简易的类和对象出来呢?答案显而易见。因为这是C的内容,所以我们用…

C++八股文之STL篇

🤖个人主页:晚风相伴-CSDN博客 思维导图链接:STL 持续更新中…… 💖如果觉得内容对你有帮助的话,还请给博主一键三连(点赞💜、收藏🧡、关注💚)吧 &#x1f64…

找搭子是什么意思?有没有找搭子的平台?靠谱找搭子软件推荐!

“找搭子” 指寻找在特定活动或兴趣方面有共同爱好的伙伴。比如饭搭子一起吃饭,运动搭子共同健身。它满足人们在特定场景下的社交需求,让生活更丰富有趣,是一种新型社交方式。以下是国内排名靠前的找搭子平台 1. 咕哇找搭子小程序&#xff1a…

Mac下nvm无法安装node问题

背景 最近换用mac开发,然后使用nvm(版本0.40.1)进行node安装的时候出现了一些问题 使用 nvm ls-remote发现只有 iojs 版本 原因可能是nodejs升级了某个协议导致的 解决方案 可以使用 NVM_NODEJS_ORG_MIRRORhttp://nodejs.org/dist nvm ls-re…

Cartographer源码理解

一、前言 最近一个半月,利用空余时间对Cartographer源码进行了简单的阅读,在这里做了个简单梳理,和大家分享交流。 cartographer源码量其实是有点大的,逐行逐句去解释实在是有心无力了,而且已经有大佬做了类似的事情…

分治算法归并排序

分治算法 基本概念 把一个复杂的问题分成两个或更多的相同或相似的子问题,再把子问题分成更小的子问题…直到最后子问题可以简单的直接求解,原问题的解即子问题的解的合并。 分治法的基本步骤 分治法在每一层递归上都有三个步骤: step1分…

单细胞CCA整合流程学习(SeuratV5/V4)

CCA(Canonical Correlation Analysis)和 Harmony 是两种常用于单细胞 RNA 测序(scRNA-seq)数据整合和批次效应校正的方法。 CCA 通过计算两个(或多个)数据集的线性组合,使这些组合之间的相关性…

1、vectorCast单元测试常用操作

一、自动创建测试工程 1、设置工作目录 进入软件主页面,点击file,选择set working directory,随便选择一个保存该项目的目录即可。 2、创建一个空工程 编译器选择vector自带的编译器,vectorCast MinGW C。 此时项目工程就创建好了 2.1、配置编译器节点 点击编译器节点…

JAVA毕业设计173—基于Java+Springboot+vue3的酒店民宿管理系统(源代码+数据库)

毕设所有选题: https://blog.csdn.net/2303_76227485/article/details/131104075 基于JavaSpringbootvue3的酒店民宿管理系统(源代码数据库)173 一、系统介绍 本项目前后端分离(可以改为ssm版本),分为用户、员工、管理员三种角色 1、用户&#xff1a…

Nowcoder—链表的回文结构

题目描述 题目分析 1.回文结构是指一个序列或字符串从前往后读或从后往前读都是相同的。 2.时间复杂度为O(n),说明循环只能有一层;空间复杂度为O(1),说明不能额外的申请空间。 3.链表的结点最多不会超过900个。 思路 1 思路1:…