一、开场总要有个标题

上个月有好好研究PerformanceObserver这个性能监控相关的API。

不过，玩了一圈下来，没有找到统计某个图片加载时长，或者某个元素渲染时间的入口，难道是自己错过了什么了吗？

嘿，还真是错过了！

有些出乎意料，明明是PerformanceObserver API明明是个JS API，里面的方法啥的，也都是JS驱动的，结果统计元素的渲染和加载时长却靠的是一个HTML属性------elementtiming。

二、了解elementtiming属性

elementtiming属性可以设置在任何有图文内容的元素上，包括background-image背景图，对了，还有视频元素。

相对于告诉浏览器：

"喂，浏览器酱，这几个人老子很感兴趣，你帮我看紧了，多多关注下！"

此时，浏览器就会记住这些元素的加载时长，渲染时长等各种信息。

配合PerformanceObserver API，我们就可以获得这些信息了。

案例说明

假设页面上有下面两个HTML元素。

<img src="../202305/book.jpg" elementtiming="image">
<p elementtiming="text">我是一段内容。</p>

此时，浏览器就会重点关注标志量为image和text的两个元素的元素时长相关信息。

于是，通过执行下面的代码，我们就可以获得。

const observer = new PerformanceObserver(list => {
  let entries = list.getEntries().forEach(function (entry) {
     console.log(entry);
  });
});
observer.observe({ 
  entryTypes: ['element'] 
});

比方说，可能就会是如下图所示的 Chrome 控制台输出，可以看到，不仅显示了元素的尺寸和位置信息，什么时候开始渲染，以及加载时长（图片元素有）都显示了。

真棒！

以后，遇到页面渲染卡顿，我们就可以精确知道究竟是哪个元素的渲染拖了后腿了。

上面的案例有演示页面，您可以狠狠地点击这里：HTML elementtiming属性基本使用demo

兼容性

elementtiming属性虽好，但是目前Safari浏览器并不支持，哦，no~

不过细细一想，性能检测与排查这个事情，只要有一个浏览器支持，其实就足够了。

在Chrome下性能差的，一般在Safari下性能也差。

这么一想，也就释然了，用起来！

三、总是需要个结语的

说啥呢。

没什么好说的。

9月份开始，已经慢慢进入之前那种高强度创作状态了。

事儿还挺多，国庆必须要好好利用起来了。

上海S3高度这个月底要通车了，去奉贤钓鱼更方便了。

好了，最后，祝大家周末快乐吧。

? ✨ ? ✨

（本篇完）