我是如何把性能优化的颗粒度做的更细

❝

已通过作者授权

❞

前言

之前我也研究过很多性能相关的文档和博客，发现现在的性能相关的文章 90% 都是之前有过的东西，但是目前的性能优化只能做到如今的样子了吗？

很显然，肯定不是的，技术本来就是个逐渐进步的过程，但是现在更多的是把当前的内容去翻来覆去的卷，我表示卷不动了，所以我准备寻找新的出路了

想法的诞生

其实我们现在的性能优化的检测及性能优化的方案已经有了很多了，从开发到用户体验的各个角度来说，都有不同的检测和处理方案，目前市面上流传最多的就是以下这些：

• 开发阶段（公共变量、公共样式、组件提取、数据处理算法、影响页面渲染速度和用户响应的使用worker（元素除外）等）

• 打包构建（gzip 压缩、去log、去 sourcemap、按需引入、按需加载、图片样式合并、减少打包时间和打包体积、添加缓存等）

• 发布阶段（CI、CD）

• 资源优化（强缓存、协商缓存、资源预加载、异步加载、service-worker等）

当然了不止这么多东西，我只是把常用的一些东西列了一下，比如我之前写过的一个实战篇 - 如何实现和淘宝移动端一样的模块化加载 （task-silce）和 解析篇 - Task-slice实现淘宝移动端方式加载这就是在开发阶段比较细节的用户体验方面的性能优化，当然我们还可以基于 performance api 来做性能优化前的检测，这方面正好之前我也整理过部分内容性能优化篇 - Performance（工具 & api）

基于这些东西我想了想，我还是觉得性能优化做的不够细不够具体，这样有很多的弊端：

• 伪性能优化（这样就代表着性能优化做的不够彻底）

• 不能完全的掌握页面dom渲染相关的数据（火焰图看的太复杂，没有数据化）

• 通过 performance.mark 植入的方式，可能对于项目来说是个很大的成本，会在业务里面植入很多无效代码来做用户体验的检测，而且可能在某些情况下会影响到业务，或者业务的某些条件导致 performance.mark 无法准确抓取，这样整体来说就无法真正达到完美的目的了

这时候我就考虑要如何可以规避这些问题，还能准确的捕捉到有关当前元素的渲染时间呢，baidu、google 查了一段时间后发现了一个api好像可以解决这个问题，于是我开始入手了

timg.gif

想法的实现

实现上述想法时，我们需要梳理一下我们的需求：

• 捕捉当前元素的渲染时间（何时开始、渲染多久、渲染位置）

• 不把性能检测相关的代码植入到业务当中，实现上述需求

• 捕捉到的这些信息在何处预览（在公司没有性能检测平台的情况下，我们是否要为了这种做优化相关的需求去在搭建一个性能检测平台）

• 是否可以通过浏览器插件来展示这些数据（这样方便预览，还不影响各个方向的业务）

有了想法，剩下的就是实现即可了

捕捉当前元素的渲染时间

其实本文所述的功能，最主要就是基于这个 api 来实现的，它就是元素的 elementtiming 属性

使用方法也很简单就是给当前要检测的元素添加该属性：

   <div elementtiming="text">
       测试text
   </div>

然后在通过 PerformanceObserver对象获取相应的数据：

    const observer = new PerformanceObserver((list) => {
      console.log(list.getEntries())
    });
    observer.observe({ entryTypes: ["element"] });

log 里面就可以获取到 elementtiming 值为 text 的元素的相关信息：loadTime（加载时间）、 renderTime（渲染时间）等，这里简单介绍一下不做过多的详解，大家知道我用它做了什么就好

当然，这个 api 在该元素只包含其他元素（无文本），就不会生成 PerformanceEntry，这个问题是我在网上百度不到，但是看了 MDN 的案例发现效果不准确，在给 chromium 提了 issue后，官方回复给的答案

issue 链接：vue or react local server, new PerformanceObserver().obserbe({ entryTypes: ['element'] }) Incomplete acquisition, but build after the project unstable

这个过程是很复杂的，在了解到官方的答复后，我觉得这样的 api 它是不完善的，本来还想继续在上面链接的评论区继续讨论，但是抵不住老外手快直接把 bug 给关了

好吧，那我只能重新起一个需求出来&#x