渲染优化（CRP、回流重绘）

2023-11-24 10:59
文章标签 优化 渲染 回流 crp 重绘

本文主要是介绍渲染优化（CRP、回流重绘），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

关键渲染路径

前端性能优化之关键路径渲染优化

浏览器怎么把页面渲染出来，渲染过程分很多环节，就是 关键渲染路径（CRP）

  • CRP：Critical Rendering Path

浏览器渲染过程：

JavaScript（触发视觉变化） -> Style（浏览器对样式重新进行计算） -> Layout（布局） -> Paint（绘制） -> Composite（合成）

  • JavaScript：可以通过 JavaScript 实现一些页面上视觉上的变化，例如：添加 DOM 元素、jQuery实现动画、CSS 动画
  • Style：浏览器对样式重新计算，这个过程会根据选择器进行重新匹配，计算哪些元素 CSS 受到影响，新的规则是什么样的，应该绘制成什么样子
  • Layout：布局就是把元素按照样式绘制到页面上，实际上是几何问题，需要知道元素的大小、位置
  • Paint：真正把内容绘制到页面上：文字、图片、颜色、阴影等
  • Composite：合成，绘制会和这个合成联系，浏览器为了提高效率，并不是把所有东西都画在一个层里，会建多个图层，最后再把它们组合起来

DOM 树

  1. 浏览器下载完 HTML 文档，就要把代码读进去，读进去的是文本，它先把这些文本转换成单个的字符
  2. HTML 有很多标签，标签是通过一对尖括号标记出来的，这个尖括号就可以用作于识别，就可以把一些字符串理解成有含义的标记，这些标记最终被换成节点对象，放在链形数据结构里，如下图

CSS 树

  • 当解释器遇到引用的 CSS，会先把资源下载下来，下载完成后对这个资源进行文本处理，把里面的标记全部识别出来，看样式是哪个节点的样式，然后用树形结构把这个关系存储起来，如下图

浏览器构建渲染树

DOM 和 CSSOM 合并成 Render Tree，把内容和样式合在一起，让浏览器理解最终要把什么画在页面上。合并的时候会把需要显示的留下，不需要显示的删除，比如：span 节点的样式是 display: none，不需要显示在页面上，构造成渲染树后，span 节点就会被去掉

回流与重绘

布局（layouts）与绘制（paint）

  • 渲染树只包含网页需要的节点
  • 布局计算节点精确的 位置和大小——“盒模型”
  • 绘制是像素画每个节点的过程

影响回流的操作

布局也叫回流。布局：通常页面第一次加载完成之后，把东西放在页面上。回流：由于页面上发生了视觉上的变化又再次导致重新布局

  • 添加/删除元素
  • display: none
  • 移动元素位置
  • 操作 styles
  • offsetLeft、scrollTop、clientWidth
  • 修改浏览器大小、字体大小

避免布局抖动

  • 避免回流

    比如想改变元素位置，千万不要修改 top、left 这样的值，可以使用 transform 或 translate 来进行位移

  • 读写分离

    批量的读操作再进行批量写操作

let cards = document.getElementsByClassName('card')
const update = timestamp => {for (let i = 0; i < cards.length; i++) {cards[i].style.width = Math.sin(cards[i].offsetTop + timestamp / 1000 + 1) * 500 + 'px'}window.requestAnimationFrame(update)
}
window.addEventListener('load', update)

性能分析里右上角红色三角形表示长任务提示了强制回流（Forced reflow）

  • 浏览器为了提高布局性能，会尽量把修改布局相关属性推迟操作
  • 但是当你获取布局属性（比如：offsetTop）时是无法推迟操作，不得不立即进行最新计算，以保证取到的是最新结果
  • 如果有连续的读写，就会导致有连续不断的回流发生，导致页面抖动

使用 FastDom（防止布局抖动）

FastDom

<script src="https://cdn.bootcdn.net/ajax/libs/fastdom/1.0.10/fastdom.min.js"></script>
<script>let cards = document.getElementsByClassName('card')const update = timestamp => {for (let i = 0; i < cards.length; i++) {fastdom.measure(() => {let top = cards[i].offsetTopfastdom.mutate(() => {cards[i].style.width = Math.sin(top + timestamp / 1000 + 1) * 500 + 'px'})})}window.requestAnimationFrame(update)}window.addEventListener('load', update)
</script>

运行之后发现 load 之后没有再出现红色三角形的长任务警告了，也没有出现有问题的 layout

复合线程与图层

复合线程

复合线程（compositor thread）

  • 将页面拆分图层进行绘制再进行复合
  • 利用 DevTools 了解网页的图层拆分情况

页面是怎么拆成不同图层的：

  • 默认情况下它是由浏览器决定的，浏览器会根据一些规则来判断是否将页面拆分成多个图层，又把哪些元素拆分成一个单独的图层（依据元素与元素之间是否有相互影响）
  • 主动的把一些元素提取成一个单独的图层（知道元素会影响其他部分，可以提取出去）

Position、Scale、Rotation、Opacity

High Performance Animations

减少重绘

  • 利用 DevTools 识别 paint 的瓶颈
  • 利用 will-change 创建新的图层
@keyframes rotate {0% {transform: rotate(0deg);}100% {transform: rotate(360deg);}
}
.cardSpinning {width: 300px;animation: 3s linear infinite running rotate;
}

在 Performance 里录制动画并进行分析，放大后随便看一组，首先会重新计算样式（Recalculate Style）、更新图层数（Update Layer Tree），并没发生布局和重绘（Paint），直接触发复合（Composite Layers）

@keyframes rotate {0% {width: 300px;}100% {width: 600px;}
}

在 Network 里，键入 Ctrl + Shift + P，输入 Show Rendering，勾选 Paint flashing，所重绘的区域会用绿色标记出来

可以利用 willChange 属性，这样浏览器就知道这个元素应当被提取到一个单独的图层里

  • will-change
will-change: transform;

高频事件防抖

有一些事件触发频率非常高，甚至会超过帧的刷新速率，比如：scroll、touchstart、touchmove、mousemove。这些函数触发频率非常快，在 Main 函数里，可以看到事件处理函数消耗比较高，但实际上并没有必要在一帧里处理很多次，比如滚动，并不关心中心过程，只关心最后滚动到哪里，这样就可能会出现卡顿也就是抖动

// 修改图片宽度
function changeWidth(rand) {let cards = document.getElementsByClassName('card')for (let i = 0; i < cards.length; i++) {cards[i].style.width = (Math.sin(rand / 1000) + 1) * 500 + 'px'}
}
// 利用DevTools打开时可以复现抖动的问题
window.addEventListener('pointermove', e => {let pos = e.clientXchangeWidth(pos)
})

先看一下下一帧的生命周期

  • 事件（touch、wheel）开始触发，JS 触发视觉上的变化
  • 一帧开始，rAF （requestAnimationFrame）调用，Layout （重新计算样式，更新图层）布局，Paint （合并图层）重绘
  • rAF 是在布局和重绘之前调用，这样可以利用 rAF 先把我们做的处理做完，之后再去进行布局和绘制，极大提高效率
  • rAF 本身是由 JavaScript 进行调度的，会尽量让你能够在每一次绘制之前去触发这个 rAF，尽量达到 60fps 的效果

// 修改图片宽度
function changeWidth(rand) {let cards = document.getElementsByClassName('card')for (let i = 0; i < cards.length; i++) {cards[i].style.width = (Math.sin(rand / 1000) + 1) * 500 + 'px'}
}
let ticking = false
// 利用DevTools打开时可以复现抖动的问题
window.addEventListener('pointermove', e => {let pos = e.clientXif (ticking) returnticking = truewindow.requestAnimationFrame(() => {changeWidth(pos)ticking = false})
})

React 时间调度实现

熟悉requestidlecallback到了解react ric polyfill实现

基本原理

  • requestIdleCallback 的问题

    requestIdleCallback 官方给出的标准：它的执行希望在 16ms 时间内，如果还有空余时间，它可以让它做些事情，但是这个函数并没有被浏览器进行很好的支持，React 考虑到这点，是通过 rAF 模拟实现 rIC

  • 通过 rAF 模拟 rIC

requestIdleCallback 在一帧关键渲染周期内，都做的事情：

  • requestAnimationFrame 是在 Layout 和 Paint 之前触发。在这一阵开始渲染之前执行
  • requestIdleCallback 是在 Layout 和 Paint 之后触发。在一帧之内，如果所有事情都做完了还有剩余时间，就可以做一些其他的事情。但是这个事要有个度，因为要给主线程留更多的空余时间，因为一旦有交互过来，至少要留 50ms 给每一次交互去处理

requestIdleCallback React 里的实现：

  • 当用户不再看这个页面或页面不可见，requestAnimationFrame 是不会运行，React 需要借用这个函数即使在后台状态也要继续完成，所以需要找到替代方案能保证任务做完，用 setTimeout 来实现
  • 作为调度函数，最关心的是所有任务，所以会给这些任务安排优先级，React 这边安排了 5个优先级，从立即可以执行到有空闲执行，另外这些任务都有过期时间，这些任务的存储肯定有一个队列，把这些队列排到队列里，然后等待 requestIdleCallback 有空闲时去执行，底层实现是双向环形链表

这篇关于渲染优化（CRP、回流重绘）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/421813。

相关文章

Vue3 的 shallowRef 和 shallowReactive：优化性能

Vue3 的 shallowRef 和 shallowReactive：优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉，那么对 shallowRef 和 shallowReactive 是否了解呢？ 在编程和数据结构中，“shallow”（浅层）通常指对数据结构的最外层进行操作，而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素，而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层（Shallow） 定义
阅读更多...
HDFS—存储优化（纠删码）

HDFS—存储优化（纠删码）

纠删码原理 HDFS 默认情况下，一个文件有3个副本，这样提高了数据的可靠性，但也带来了2倍的冗余开销。 Hadoop3.x 引入了纠删码，采用计算的方式，可以节省约50％左右的存储空间。 此种方式节约了空间，但是会增加 cpu 的计算。 纠删码策略是给具体一个路径设置。所有往此路径下存储的文件，都会执行此策略。 默认只开启对 RS-6-3-1024k
阅读更多...
使用opencv优化图片（画面变清晰）

使用opencv优化图片（画面变清晰）

文章目录 需求影响照片清晰度的因素 实现降噪测试代码 锐化空间锐化Unsharp Masking频率域锐化对比测试 对比度增强常用算法对比测试 需求 对图像进行优化，使其看起来更清晰，同时保持尺寸不变，通常涉及到图像处理技术如锐化、降噪、对比度增强等 影响照片清晰度的因素 影响照片清晰度的因素有很多，主要可以从以下几个方面来分析 1. 拍摄设备 相机传感器：相机传
阅读更多...
MySQL高性能优化规范

MySQL高性能优化规范

前言：      笔者最近上班途中突然想丰富下自己的数据库优化技能。于是在查阅了多篇文章后，总结出了这篇！ 数据库命令规范 所有数据库对象名称必须使用小写字母并用下划线分割 所有数据库对象名称禁止使用mysql保留关键字（如果表名中包含关键字查询时，需要将其用单引号括起来） 数据库对象的命名要能做到见名识意，并且最后不要超过32个字符 临时库表必须以tmp_为前缀并以日期为后缀，备份
阅读更多...
SWAP作物生长模型安装教程、数据制备、敏感性分析、气候变化影响、R模型敏感性分析与贝叶斯优化、Fortran源代码分析、气候数据降尺度与变化影响分析

SWAP作物生长模型安装教程、数据制备、敏感性分析、气候变化影响、R模型敏感性分析与贝叶斯优化、Fortran源代码分析、气候数据降尺度与变化影响分析

查看原文>>>全流程SWAP农业模型数据制备、敏感性分析及气候变化影响实践技术应用 SWAP模型是由荷兰瓦赫宁根大学开发的先进农作物模型，它综合考虑了土壤-水分-大气以及植被间的相互作用；是一种描述作物生长过程的一种机理性作物生长模型。它不但运用Richard方程，使其能够精确的模拟土壤中水分的运动，而且耦合了WOFOST作物模型使作物的生长描述更为科学。 本文让更多的科研人员和农业工作者
阅读更多...
从状态管理到性能优化：全面解析 Android Compose

从状态管理到性能优化：全面解析 Android Compose

文章目录 引言一、Android Compose基本概念1.1 什么是Android Compose?1.2 Compose的优势1.3 如何在项目中使用Compose 二、Compose中的状态管理2.1 状态管理的重要性2.2 Compose中的状态和数据流2.3 使用State和MutableState处理状态2.4 通过ViewModel进行状态管理 三、Compose中的列表和滚动
阅读更多...
构建高性能WEB之HTTP首部优化

构建高性能WEB之HTTP首部优化

0x00 前言 在讨论浏览器优化之前，首先我们先分析下从客户端发起一个HTTP请求到用户接收到响应之间，都发生了什么？知己知彼，才能百战不殆。这也是作为一个WEB开发者，为什么一定要深入学习TCP/IP等网络知识。 0x01 到底发生什么了？ 当用户发起一个HTTP请求时，首先客户端将与服务端之间建立TCP连接，成功建立连接后，服务端将对请求进行处理，并对客户端做出响应，响应内容一般包括响应
阅读更多...
DAY16：什么是慢查询，导致的原因，优化方法 | undo log、redo log、binlog的用处 | MySQL有哪些锁

DAY16：什么是慢查询，导致的原因，优化方法 | undo log、redo log、binlog的用处 | MySQL有哪些锁

目录 什么是慢查询，导致的原因，优化方法 undo log、redo log、binlog的用处  MySQL有哪些锁   什么是慢查询，导致的原因，优化方法 数据库查询的执行时间超过指定的超时时间时，就被称为慢查询。 导致的原因： 查询语句比较复杂：查询涉及多个表，包含复杂的连接和子查询，可能导致执行时间较长。查询数据量大：当查询的数据量庞大时，即使查询本身并不复杂，也可能导致
阅读更多...
MySQL 数据优化

MySQL 数据优化

MySQL 数据优化的指南 MySQL 数据库优化是一个复杂且重要的过程，它直接影响到系统的性能、可靠性和可扩展性。在处理大量数据或高并发请求时，数据库的优化尤为关键。通过合理的数据库设计、索引使用、查询优化和硬件调优，可以大幅提高 MySQL 的运行效率。本文将从几个主要方面详细介绍 MySQL 的优化技巧，帮助你在实际应用中提升数据库性能。 一、数据库设计优化 1. 数据库的规范化与反规
阅读更多...
MFC 控件重绘(2) NM_CUSTOMDRAW, WM_DRAWITEM, 虚函数DrawItem

MFC 控件重绘(2) NM_CUSTOMDRAW, WM_DRAWITEM, 虚函数DrawItem

控件重绘有三种方法： 1 设定界面属性 2 利用Windows的消息机制，通过Windows消息映射(Message Mapping)和反映射(Message Reflecting)，在合适的时机修改控件的状态和行为。此方式涉及NM_CUSTOMDRAW和WM_DRAWITEM 3 利用虚函数机制，重载虚函数。即DrawItem虚函数。 对于NM_CUSTOMDRAW,某些支持此消息的控件
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2