如何利用烛龙和谷歌插件优化 CLS(累积布局偏移) | 京东云技术团队

2023-12-18
北京
本文字数：1773 字
阅读完需：约 6 分钟

简介

CLS 衡量的是页面的整个生命周期内发生的每次意外布局偏移的最大突发性_布局偏移分数_。布局变化的发生是因为浏览器倾向于异步加载页面元素。更重要的是，您的页面上可能存在一些初始尺寸未知的媒体元素。这种组合意味着浏览器在加载完成之前无法确定单个元素将占用多少空间。因此，这种不确定性带来的剧烈布局转变就会导致一个高的 CLS 分数，也就说明用户体验将会很糟糕。

累积布局偏移的计算公式 = 影响比例*距离比例（参考：https://web.dev/articles/cls?hl=zh-cn）

影响比例：上一帧的所有不稳定元素与当前帧的可见区域（占视口总面积的比例）的并集就是当前帧的影响比例。

距离比例：距离比例是任何_不稳定元素_在框架内的移动距离（水平或垂直方向）的最大距离除以视口的最大尺寸（宽度或高度，以较大者为准）

解决方案

找到可能导致累积布局偏移的所有因素
确定是什么因素导致了如此大的累计布局偏移？我们需要找到一个靠谱的工具辅助我们确认，并定位到具体原因。
导致出现这些原因的问题代码有哪些？找到代码后，我们应该如何解决。

方案执行

1 导致累积布局偏移的因素

导致 CLS 不佳的最常见原因包括：

没有尺寸的图片
无尺寸的广告、嵌入内容和 iframe
动态注入的内容，例如没有尺寸的广告、嵌入内容和 iframe
网页字体

2 使用辅助工具，确认是哪几种因素

可以先利用内部监控平台找到用户最常访问的页面，利用 lighthouse 逐个分析每个页面的性能

（注意：站外的小伙伴可以根据自己的系统的了解，找出用户的常用页面～）

案例--以我们的项目 A 为例

在性能业务概览中，我们通过比对访问量 Top10Url 性能对比和页面性能上报量 top100 列表，发现用户访问最多的是两个页面——首页 A 列表和 B 详情页。
使用 lighthouse 在本地分别分析两个页面的性能(点击 analyze page load 按钮即可触发检测，为保证整体性能偏向真实场景，推荐大家在检测中进行一些当前页面的常规操作)

性能截图分别如下：

A 列表

2. B 详情页

3 解决方案

根据以上报告中给出的造成 CLS 数值极大的原因，逐条修改

其中，造成首页 A 列表数据 CLS 异常的主要原因有两个：一是 excel 图片没有尺寸；二是 table 表格的高度没有明确设置，导致接口返回数据后直接在屏幕中动态填充，造成累积布局偏移较大。造成 B 详情页 CLS 异常的主要原因也同首页一样，table 高度未设置，导致 CLS 偏大。

针对以上两种原因，分别做如下修改：

根据图片原尺寸指定 aspect-ratio，改动后使得 CLS 从 0.425 下降至 0.422。可见主要影响因素还在于表格高度。

<template>...<el-table-column label="自己的label" min-width="140">        <template slot-scope="scope">          <img            class="monitor-link"            :src="excelIcon"            width="40"            @click="(e) => handleDownload(scope.row)"          />        </template>      </el-table-column></template><style lang="scss" scoped>.monitor-link {  cursor: pointer;  aspect-ratio: 40/42;}
</style>

复制代码

2. 根据当前页面布局，重新设置表格高度。改动后使得 CLS 从 0.422 下降至 0.041。优化效果显著。

<template>  <div class="table-wrap">   <!-- 使用max-height，而不是height : 为了解决增减展示列造成的固定列高度错位展示问题，方法参考https://github.com/ElemeFE/element/issues/4976-->    <el-table      class="fixed-head-table"      :data="data"      width="100%"      :max-height="tableHeight" //设置高度表格       header-row-class-name="table-header-row"    >    ...  </el-table>  </div></template><script>export default {  data() {    return {      tableHeight: 0,      ...    };  },  mounted() {    this.$nextTick(() => {      // 后面344一般是根据你上下导航栏、表单等的高度来减掉即可      this.tableHeight = window.innerHeight - 344;    })  },}</script>