Perfmap: frontend performance hotspot Diagram

Introduction

Perfmap is a JS plug-in that can call the browser's resource timing API to generate a performance hotspot Graph Based on the loading time of the page's front-end resources (slices. The browser must support the resource timing API

Use

Add the following JS Code as a bookmark (that is, replace the URL) on the Bookmarks Bar)

Javascript :( function () {var El = document. createelement ('script'); El. src = 'https: // Zeman. gitHub. IO/perfmap. js'; document. body. appendchild (EL );})();

Effect

The first number in the box indicates that the page shows the time consumed by the image, and the second number indicates the time consumed by the browser to load the image.

GitHub

Zeman/perfmap

Enjoy.

Perfmap: frontend performance hotspot Diagram