2022年1月 – 追少普通的前端生涯

可以量化提高用户体验的行为

CLS页面视觉稳定分析

aHR0cHM6Ly9wNi1qdWVqaW4uYnl0ZWltZy5jb20vdG9zLWNuLWktazN1MWZicGZjcC82MGFjOWU5M2ZhOWI0OGZmYjNjNmMzMzI2NGI4OGFlNX50cGx2LWszdTFmYnBmY3Atem9vbS0xLmltYWdl 1024x290 - 页面性能如何判断

计算方式

CLS=距离分数*影响分数

影响分数 = 发生抖动的元素在可视区域中占据的百分比

距离分数 = 发生抖动的元素抖动距离占据可视区域的百分比

分数越低越稳定

FCP首次内容绘制时间

标记浏览器渲染来自DOM第一位内容的时间点

LCP视窗最大内容渲染时间

代表页面可视区域接近完整渲染

加载进度条时间

onload事件启动时间

合成层（CompositingLayer）

合成层带来的好处

合成层的位图会交由GPU合成，比CPU处理要快得多
当需要repaint时，只需要repaint本身，不会影响其他层
元素提升为合成层后，transform和opacity不会触发repaint，如果不是合成层则依旧会触发repaint

合成层可能会带来的坏处

绘制的图层必须传输到GPU，这些层的数量和大小达到一定量级后会导致传输非常慢，进而导致一些低端或中端设备上出现闪烁
隐式合成，每个合成层都会占用额外的内存，使用过多内存会导致浏览器崩溃，从而导致性能优化适得其反

Chrome Devtools如何查看合成层

合成层与层叠上下文的关系及如何产生

合成层在层叠上下文的基础上创建

隐式创建的合成层-造成内存爆炸的原因

当元素交叠，处在下方的元素成为了合成层，上方的元素隐式变成了合成层

20220111 170814 - 合成层（CompositingLayer） — safari浏览器合成层现状，chrome浏览器会进行层压缩优化

 .x {
        width: 100px;
        height: 100px;
        background-color: red;
        position: absolute;
        will-change: opacity;
      }
      .y {
        width: 100px;
        height: 100px;
        margin: 50px 0 0 50px;
        background-color: blue;
        position: absolute;
        z-index: 1;
      }
<body>
  <div class="x"></div>
  <div class="y"></div>
      ...
  <div class="y"></div>
</body>

合成层优化

动画使用transform实现

一方面如果不涉及到translateZ则不会创建合成层，一方面生成层叠上下文不会影响到别的层叠上下文渲染

减少隐式合成创建

可以将必须合成层的层级提升至较高层级，则其他交叠层级没有该层级高就不会隐式创建合成层

减小合成层大小

通过减少宽高再进行scale放大的方式可以有效减少合成层使用的内存

Light House

无法量化，但可以提高用户体验的行为