HTML elementtiming属性初体验记录

这篇文章发布于 2023年09月15日,星期五,23:58,归类于 HTML相关。 阅读 8131 次, 今日 12 次 2 条评论

 

夕阳午休

一、开场总要有个标题

上个月有好好研究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高度这个月底要通车了,去奉贤钓鱼更方便了。

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

🌟 ✨ 🌟 ✨

(本篇完)

分享到:


发表评论(目前2 条评论)

  1. hanhan说道:

    单个元素渲染导致页面渲染卡顿的情况应该也少吧。现在多半是 react、vue 框架计算耗时长导致卡顿。例如长列表啥的

  2. 北海封爵说道:

    图片的渲染时间124,文本的渲染的时间108,应该是图片比文本渲染慢吧