h5性能监控

H5性能监控用来跟踪和分析H5页面的性能表现，通过监控H5页面中的轻量级指标和安装简单的插件等方法来收集页面性能数据，并将数据发回到我们的服务器，从而帮助我们及时了解H5页面的性能问题，做出适当的优化措施。

在实际应用中，H5性能监控系统通常会采集以下几个方面的数据：

1. 页面加载时间：监控页面从发起请求到渲染完毕的整个过程，包括DNS解析、TCP连接、请求时间、响应时间和渲染时间等。

2. 资源加载时间：监控页面中各个资源的加载时间，如图片、CSS、JavaScript文件等。

3. 错误日志输出：监控页面中的JavaScript异常和网络请求错误，以便及时发现和解决问题。

那么接下来我们来实现一个简单版的H5性能监控系统。

首先，我们需要安装一个叫做performance.js的轻量级插件，该插件有良好的兼容性，可以帮助我们在不同浏览器中轻松实现H5性能监控。

<script type="text/javascript" src="./performance.js"></script>

然后在我们的页面代码中加入以下代码即可实现简单的H5性能监控。

window.onload = function(){
  // 页面加载完成后，获取相关性能数据
  var performanceData = window.performance.timing;
  
  // 计算页面的总加载时间
  var pageLoadTime = performanceData.loadEventEnd - performanceData.navigationStart;
  
  // 计算资源的加载时间
  var resourceLoadTime = performanceData.responseEnd - performanceData.requestStart;
  
  // 输出性能数据
  console.log("页面加载时间：" + pageLoadTime + "ms");
  console.log("资源加载时间：" + resourceLoadTime + "ms");
}

在上述代码中，我们利用window.performance.timing对象获取了浏览器加载页面的各个阶段的时间点数据，并计算出了页面的总加载时间和资源的加载时间。我们还可以使用try-catch语句来捕获异常，或者使用window.onerror来捕获JS错误。

另外，当需要使用