Perfmap:前端性能热点图

介绍

Perfmap是一个可以调用浏览器的Resource Timing API来根据页面前端资源(如图片)的加载时间生成性能热点图js插件。需要浏览器支持Resource Timing API

使用

在书签栏上把以下js代码添加为书签(即替换网址)

javascript:(function(){var el=document.createElement(‘script‘);el.src=‘https://zeman.github.io/perfmap/perfmap.js‘;document.body.appendChild(el);})();

效果

方框内的第一个数字表示页面显示该图片所耗时间，第二个数字表示浏览器加载该图片所耗时间.

Github

zeman/Perfmap

Enjoy.