老师observeCLS 中对于 animation keyframes 会导致大量的数据上传，这个是有意为之的吗？

[baixjian]

[woai3c]

有示例吗，可能是个 bug。

[baixjian]

在example/performance/form.html中加入如下代码

      .aaa {
        width: 100px;
        height: 100px;
        background-color: red;
        position: relative;
        animation-name: example;
        animation-duration: 4s;
        animation-iteration-count: 1;
      }

      @keyframes example {
        0%   {background-color:red; left:0px; top:0px;}
        25%  {background-color:yellow; left:200px; top:0px;}
        50%  {background-color:rgb(66, 66, 93); left:200px; top:200px;}
        75%  {background-color:green; left:0px; top:200px;}
        100% {background-color:red; left:0px; top:0px;}
      }

    <div class="aaa"></div>

[woai3c]

了解了，可以从前端监控 SDK 的一些技术要点原理分析里看一下关于 CLS 的描述，它是计算你页面抖动情况用的。因为你的 DOM 元素不停的发生位移，所以触发了这个事件。

[baixjian]

前端监控 SDK 的一些技术要点原理分析
感谢老师回复，取所有会话窗口中的最大值 是最优方式，从数据上报维度来看，是否可以选取所有偏移量中最大值进行上报，还是全部数据上报后，再进行筛选，哪种是最佳方式？

[woai3c]

前端监控 SDK 的一些技术要点原理分析
感谢老师回复，取所有会话窗口中的最大值 是最优方式，从数据上报维度来看，是否可以选取所有偏移量中最大值进行上报，还是全部数据上报后，再进行筛选，哪种是最佳方式？

可以用第二种方式，后端数据清洗，前端上报是有延迟，有时间间隔不好做筛选。

[baixjian]

老师，还有个问题，sdk 基于性能监控相关的， 需要在路由钩子中再次调用，才能实现SPA的每个页面的监控，还是有其他的方式？

[woai3c]

老师，还有个问题，sdk 基于性能监控相关的， 需要在路由钩子中再次调用，才能实现SPA的每个页面的监控，还是有其他的方式？

这块我没深入研究，可以尝试一下能不能在每个页面加载前记录一个时间，页面结束后记录一个时间。例如 vue2 可以用 minix 的方法注入到路由钩子和 mounted 钩子。还有一个方法是尝试一下监听 pushstate replacestate 事件，在这里试试能不能收集到相关信息。