Skip to main content

performance

性能指标​

FPS(frame per second)​

概念： 每秒钟画面更新的次数。一般来说，FPS 越高，动画会越流畅。 目前大多数设备(浏览器)支持的 fps 为 60(1s 60 帧, 也就是 1000ms / 60 = 16.67ms 一帧) 一般来说，帧率在 30 以下，人眼会分辨的出来卡顿，30-50 的话，看人~ 50 以上的话，人眼基本感知不出卡顿。

计算方法​

方案 1： requestAnimationFrame:

一般来说，requestAnimationFrame 这个方法在 1s 内会执行 60 次(不卡帧的情况)。


✨✨✨ 方案 2：rendering tools 实时查看页面帧率 & GPU 使用率 直接快捷键调出命令行工具，输入 fps 就行，超方便。

JS heap size​

run show performance

Memory​

强制回收内存 按时间线来记录 allocation

图片优化​

加载机制​

图片的加载可以分为懒加载和预加载。 这两种加载方式优化的场景也不太一样。 如果不做这些处理，图片默认的加载机制为：

  1. 如果img标签设置了display: none，它虽然不会展示，但还是会加载图片。
  2. 如果父级div标签设置了 display: none， 那它里面的子元素，背景图不会被加载，img还是会加载。
tip

同一张图片只会被加载一次 伪类的背景图，在伪类状态被触发的时候才会加载。

哎呀，图破了…
Preview

懒加载​

懒加载的方式，常见的有 3 种：

  1. 可视区域的加载。利用 scroll 或者说 Observer 来判定可视区域。
  2. 使用定时器，延迟去加载非当前可视区必须的图片。
  3. 设定一些样式。比如是 display: none 下的 background。

预加载​

根据我们刚才说过的图片加载机制方式，可以这些方法来实现图片的预加载：

  1. css 设置 display: none 的 img 标签。
  2. link 标签
<link rel="preload" href="https://gd-hbimg.huaban.com/2d5b0a2d8d67cf77c97f4de5c1be447f5f7d890c7664-32DO5U" />
note

要注意一下 preload 和 prefetch 的区别和表现

渲染机制​

图片转为 webp 后，所占用的资源更少。 一般一个 png 或 jpeg 图片转为 webp 后，大小压缩有的甚至能高达 97%左右~

假如有 gif 图的话，可以转成 webp，但还有个更好的方式是，转成 mp4。 转成 mp4 在有些实际场景下，大小更低，而且清晰度，兼容性也有更好的保障。

gif 转 mp4 的方法​

<video src="source" autoplay muted loop playsinline></video>

渲染优化​

请求优化​

cancel​

竞态请求的处理​

React 中的优化​

代码优化​

Diff 策略： 尽量减少对子组件信息量的传递，SCU 优化 Observable: 尽量减少数据访问, 使数据更新通知更精准。

反例​

避免过度优化​

在 React 中，将一个数组的长度传递给子组件与将整个数组传递给子组件的性能差异并不大

因为 js 中，数组的长度的读取是一个非常快速和低成本的计算。 只有对该数组进行深克隆或遍历时才会对性能造成显著影响。

就假如为了避免向子组件传递整个数组，而去单独维护一个数组长度的状态，很有可能在数组变更时遗漏对该长度的状态维护（虽然不该，但事实就是有可能存在这种现象，不能假定所有人的代码都完全考虑了所有边界。要尽量减少犯错误的可能）

总之，在性能上，将数组长度传递给子组件与将整个数组传递给子组件之间没有明显的区别。 但在代码设计上，我们可以根据组件的特定需求来做不同的选择。

名词&概念解释​

SCU​

Synchronize JavaScript Execution and Update the DOM, Cluster DOM operations and Use requestAnimationFrame

SCU 优化是一种前端性能优化技术，它通过减少浏览器的解析和渲染时间来提高网页加载速度，提高网页加载速度和用户体验。

优化方向：

  1. 同步 JavaScript 执行和更新 DOM：JavaScript 会阻止浏览器进行其他操作，因此当 JavaScript 运行时，浏览器就不能同时更新页面上的元素。为了最大限度地减少 JavaScript 对页面渲染的影响，应该尽可能使用异步 JavaScript 和 Web Worker 等技术来避免阻塞页面更新
  2. cluster DOM 操作：更新 DOM 的操作会导致页面重新渲染，因此在修改多个元素的属性时，可以将这些操作批量处理，并将它们放在单个 DOM 更新中完成。这样可以减少浏览器进行多次页面渲染的开销。
  3. 使用 requestAnimationFrame：requestAnimationFrame 是一种用于动画效果的 API，它可以确保动画在下一帧绘制之前运行，从而使浏览器能够更有效地使用 CPU 资源。requestAnimationFrame 可以平滑地处理动画效果，并且可以减少浏览器的卡顿和抖动现象。