前言
前端开发中，我们经常需要对网页进行监控，统计数据等等操作。wentto 是一款功能强大的监控工具，可以监控页面资源加载情况、AJAX 请求、错误异常等信息。在这篇文章中，我们将会详细讲解 wentto 的使用，以及实现监控页面资源加载速度的功能。
wentto 的安装
首先，我们需要在工程目录下使用 npm 命令安装 wentto，命令如下：
npm install wentto --save-dev
安装完毕后，我们可以在项目的 node_modules 目录下找到 wentto 的相关文件。
wentto 的使用
使用 wentto 之前，我们需要在我们的项目中引入它。方式有两种：
- 可以使用直接在页面里引入
<script>标签的方式，例如：
<script src="node_modules/wentto/dist/wentto.js"></script>
- 也可以使用 ES6 的方式 import 引入，例如：
import Wentto from 'wentto';
wentto 的配置
引入 wentto 后，我们需要对它进行配置以实现我们所需要的监控功能。
基础配置
我们需要使用如下的代码进行基础配置：
Wentto.init({
// 配置项
});其中，Wentto.init() 函数的参数是一个对象，包含了 wentto 的基础配置项。下面是可配置项的列表：
-- -------------------- ---- -------
-
---------- ----------
----- -
--- --
----- --
--
------------- --
---- ------------
-reportUrl是我们上报数据的 URL 地址。user对象包括了用户 ID 和用户名信息，供上报数据使用。samplingRate表示数据采样率，范围是 0-1，即采集数据的概率，越小采集的数据就越少。env表示当前代码运行的环境。默认情况下，wentto 发送数据的环境为 'production'。
监控页面资源加载速度
下面我们将以监控页面资源加载速度为例，介绍 wentto 如何实现监控功能。
首先，我们需要编写相应的代码来监控资源的加载情况，如下所示：
window.onload = function() {
var duration = Date.now() - performance.timing.fetchStart;
Wentto.record('load_time', duration);
};在这段代码中，我们使用 Date.now() 函数获取当前时间戳，然后用该时间戳减去页面资源加载开始的时间戳 performance.timing.fetchStart，以获得页面资源加载的时间。接着，我们使用 Wentto.record() 函数记录该时间，供后续查询、分析和统计使用。
示例
下面是一个简单的 HTML 示例，演示了如何使用在 window.onload() 事件上进行简单的 wentto 监控：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
------------- ----------
-------
------
------- --------------------------------------------------
--------
-------------
---------- ----------
----- -
--- ----
----- ----
--
------------- --
---- -----
---
------------- - ---------- -
--- -------- - ---------- - ------------------------------
-------------------------- ----------
--
---------
-------
-------总结
在本文中，我们学习了 wentto 的使用方法，以及如何实现监控页面资源加载速度的功能。wentto 不仅拥有丰富的监控功能，还能够方便高效的上报数据，帮助我们更好地了解我们的应用程序，以及解决问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006710a8dd3466f61ffe0bd
