简介
@deployable/timer 是一个用于前端测速的 npm 包，可以帮助前端工程师快速测量网页的加载时间和运行时间。它基于 performance API，能够准确测量每个阶段的时间，并作为一个详细的 JSON 对象输出。
安装
使用 npm 安装：
$ npm install @deployable/timer --save-dev
使用
-- -------------------- ---- ------- ----- ----- - ---------------------------- -- ---- ----- -- ----- ----- - --- ------- -- ---- ------------- -- ------------ ------------- -- - -- ---- ------------ -- ------ --------------------------- -- -----
返回值
Timer 实例有一个 toJSON 方法，用于将测量结果输出为一个 JSON 对象。
测量结果包括三个部分：时间轴、资源加载时间和各阶段耗时。例如：
-- -------------------- ---- -------
-
----------- -
- ------- -------- ------------ -- ---------- ----------------- --
- ------- ---------- ------------ ------------------- ---------- ----------------- --
- ------- -------------- ------------ ------------------- ---------- ----------------- --
- ------- ----------- ------------ ------------------ ---------- ----------------- -
--
--------- -
-------------- -------------------
---------------- -------------------
-------------- ------------------
----------------- -----------------
------------- -----------------
------------------ -------------------
-------------------- ------------------
------------- -------------------
--------------- ------------------
--------------- ------------------
------------------------ --
--------------- ------------------
----------------- ------------------
----------------- --
------------------- --
-------------- --
---------------- --
------------- ------------------
------------------ ------------------
--------------- ------------------
----------- ------------------
-
-其中：
- timeline：时间轴，用于描述网页的加载过程，包括 start、loading、interactive、complete 等阶段；
- timing：各阶段的耗时，以及资源加载时间。
示例
-- -------------------- ---- -------
----- ----- - ----------------------------
----- ----- - --- -------
-------------
-- ------
------------------------------------------------- -- -
---------------- ---------
--
-- -- - -
--- - - -
----- -------- - -------------- -- -
---
-- -- -- -- -
-----------------------
-------------------- -----------
------------
---------------------------
- ---- -
-------------------- - - - - -----
-
-- -----输出如下：
-- -------------------- ---- -------
-
----------- -
- ------- -------- ------------ -- ---------- ----------------- --
- ------- ---------- ------------ -- ---------- ------------------ --
- ------- ------ -------- ------------ ------------------ ---------- ----------------- --
- ------- ---------- ---- ------------ ------------------- ---------- ------------------ --
- ------- ---------- ---------- ------------ ------------------- ---------- ----------------- --
- ------- ----------- ------------ ------------------ ---------- ----------------- -
--
--------- -
-------------- ------------------
---------------- ------------------
-------------- ------------------
----------------- -------------------
------------- -------------------
------------------ ------------------
-------------------- ------------------
------------- ------------------
--------------- ------------------
--------------- ------------------
------------------------ --
--------------- ------------------
----------------- ------------------
----------------- --
------------------- --
-------------- --
---------------- --
------------- ------------------
------------------ ------------------
--------------- -------------------
----------- ------------------
-
-指导意义
前端性能测试是每个前端开发人员必备的技能之一，而测量网页的加载时间和运行时间，则是性能测试工作的重要一环。
通过使用 @deployable/timer，可以方便地测量每个阶段的时间，并作为一个详细的 JSON 对象输出。这样，我们就可以根据测量结果，针对性地进行优化，提高网页的性能。
此外，@deployable/timer 也为我们提供了一个清晰的时间轴和各阶段的耗时，让我们能够更好地了解网页的加载过程，从而更好地为用户提供优质的体验。
结论
在前端性能测试中，@deployable/timer 是一个非常有用的工具。通过它，我们可以更方便地测量网页的加载时间和运行时间，并对之进行针对性优化。同时，它也能帮助我们更好地了解网页的加载过程，从而更好地为用户提供优质的体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005554381e8991b448d278b