什么是 spem
Spem（简称 Simple Performance Evaluation Model）是一个基于浏览器前端性能评估树模型的 npm 包。通过使用 Spem，您可以方便地对您的网站进行性能评估，并依据评估结果来改进网站性能。
安装
为了安装 Spem，您可以使用 npm 包管理器进行安装。在终端内，输入以下命令即可完成安装：
npm install spem
如何使用
导入 spem
在您的 JavaScript 文件内，您需要首先导入 Spem：
const spem = require('spem');或者使用 ES6 模块：
import spem from 'spem';
进行性能评估
现在，您可以开始进行性能评估。您只需要调用 spem() 方法，并且传入您要测试的 URL 地址即可：
spem('https://www.example.com/')
.then((result) => {
console.log(result);
})
.catch((error) => {
console.error(error);
});在这个例子中，您将会对 https://www.example.com/ 进行性能评估，并且将评估结果打印在控制台上。
获取评估结果
在完成了性能评估之后，您将会得到一个包含评估结果的对象。该对象会包含以下字段：
html，代表网站 HTML 的加载情况；css，代表网站 CSS 的加载情况；javascript，代表网站 JavaScript 的加载情况；resources，代表其他资源（例如图片）的加载情况；time，代表整个网站的加载时间。
如果您只需要获取某一个字段的值，可以直接访问该字段，例如：
const { time } = await spem('https://www.example.com/');
console.log(`The page loaded in ${time} milliseconds.`);源码分析
通过 Spem，您还可以获取更为详细的性能评估信息。您可以使用 analyze() 方法来对 HTML、CSS、JavaScript、图片等资源进行分析。
在下面的例子中，我们将对 HTML 进行分析，并且计算出 HTML 内所有图片的总大小：
-- -------------------- ---- -------
--------------------------------
-------------- -- -
------ -------------------- ------- -
-------------- -----
---
--
-------------------- -- -
----- -------------- - ---------------------------------- ------ -- -
------ ----- - -----------
-- ---
---------------- ----- ----- ---- -- ---- ---- -- ----------------- ---------
--
-------------- -- -
---------------------
---在这个例子中，我们使用 analyze() 方法对 HTML 进行分析，并且开启了对图片的分析。我们通过 images 字段获取所有图片的信息，并且进行统计计算。
支持的选项
在 Spem 中，您可以使用以下选项来控制行为：
timeout，代表页面加载的超时时间（默认值为 10 秒）；simulateNetworkConditions，代表是否模拟网络条件进行评估（默认值为 false）；networkSpeed，代表模拟网络条件下的速度（默认值为 "regular"，可选值为 "good2g"、"2g"、"3gfast"、"3gslow" 和 "regular"）；networkLatency，代表模拟网络条件下的延迟（默认值为 "regular"，可选值为 "low"、"regular" 和 "high"）；analyzeImages，代表是否要对图片进行分析（默认值为 false）；analyzeJavaScript，代表是否要对 JavaScript 进行分析（默认值为 false）；analyzeCss，代表是否要对 CSS 进行分析（默认值为 false）。
示例代码
下面是一个完整的使用示例：
-- -------------------- ---- -------
----- ---- - ----------------
-------------------------------- -
-------------------------- -----
------------- -----
--------------- -------
--
-------------- -- -
----------------- ------ ---- ------------ ------
------------------- -------------
------------------ ------------
------------------------- -------------------
------------------------ ------------------
------ -------------------- ------- -
-------------- -----
---
--
-------------------- -- -
----- -------------- - ---------------------------------- ------ -- -
------ ----- - -----------
-- ---
------------------ ----- ------ --------------- ---------
--
-------------- -- -
---------------------
---总结
Spem 是一个非常方便的 npm 包，可以帮助您对前端网站进行性能评估。无论您是一个前端开发者，还是一个网站管理员，Spem 都可以为您提供有力的支持。在使用 Spem 时，请注意相关选项的设置，以保证评估结果的准确性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600670a48ccae46eb111f12e