摘要：参考链接初探监控网页与程序性能使用简洁的测试网页加载速度前端性能统计前端性能监控起步使用性能快速分析前端性能通过以上几篇文章，可以对前端性能相关的概念和有一个整体的认识。但在我们这次的前端性能监控方案中，并不将其作为主要的监控指标。
参考链接
初探 performance – 监控网页与程序性能
使用简洁的 Navigation Timing API 测试网页加载速度
前端性能统计
前端性能——监控起步
使用性能API快速分析web前端性能
Page Visibility
通过以上几篇文章，可以对前端性能相关的概念和 API 有一个整体的认识。
简要说明前段时间和同事一起对网页性能监控方面的知识做了些探讨和实践，期望可以对用户的网络情况、程序的性能状况等做个统计分析，从而对程序进行有针对性的优化。为此我们做了个简单的试验项目，主要对 页面加载 和 ajax请求 两个方面进行了分析。（本文的方案主要是出于技术探讨的目的，只是一个 Demo，而非完整的性能监控方案）
这个图是最初的方案图，我们初级版本的程序设计基本上就是按照图上这个思路来的。
我们的实现思路是，在页面初始化完成后，将本次页面加载的信息和用户上次页面操作过程中发出的ajax请求信息上报给服务器，由服务端进行进一步统计分析。
页面加载信息，主要指css样式表、js脚本和图片等外部资源加载用时和初始化完成的时间（全部完成用时）。
用户上次页面操作过程中发出的ajax请求，主要是指用户上一次在这个页面上进行的查询、自定义设置等操作过程中，触发的ajax请求相关的信息，比如方法名称、服务器处理时间、客户端下载时间等。
为什么是用户上次操作的ajax相关信息？
主要是出于减少请求的目的，以避免监控程序本身对程序主体性能的影响，因此不会将每个请求的信息都实时的上报服务器，而是先存储在客户端。我们会将用户在这个页面进行的各种操作触发的异步请求信息，以一定格式存储在客户端 localstorage，当用户再次打开这个页面的时候，我们会从 localstorage 中取出存储的ajax信息，将其上报服务器，然后清空 localstorage 中这些旧的数据，以便重新进行记录。
因此，用户在打开这个页面时，我们上报的是用户上次的使用信息。（如果有用户只打开过一次这个页面，后面就再没使用过，那么这是一个低频使用客户，不在我们统计范围内。）
而用户的页面加载信息，每次用户打开页面时，我们都会将其上传至服务器，不需要在客户端进行存储。
服务端收到前端上报的数据后，会进行相应的分析处理，这里不对这部分进行说明。
相关知识 一、影响网页性能的因素HTML 的解析和渲染（参见文档 《浏览器解析渲染HTML页面的过程》）
服务端处理的速度（负载均衡，缓存策略）
客户端带宽（网络状况）
我们要对网页的性能进行统计分析，首先应当确定哪些因素会对网页的性能带来影响。一般来说，前端HTML文档的结构是否合理，外部资源是否进行了压缩合并，静态内容是否使用了CDN加速，服务端是否配置了负载均衡，是否采取了缓存策略，以及客户端带宽状况等，都会对网页的性能造成影响。
二、浏览器解析渲染HTML页面的过程参考资料： 浏览器的工作原理
上面这篇文章会帮助我们了解浏览器解析和渲染HTML文档的过程。具体的可以参见另一篇文档： 《浏览器解析渲染HTML页面的过程》
这里对以下几点进行着重说明：
HTML 文档的解析和渲染是一个渐进的过程。为达到更好的用户体验，呈现引擎会力求尽快将内容显示在屏幕上。它不必等到整个 HTML 文档解析完毕，就会开始构建呈现树和设置布局。在不断接收和处理来自网络的其余内容的同时，呈现引擎会将部分内容解析并显示出来。
浏览器的预解析机制。
HTML 文档的解析和渲染过程中，外部样式表和脚本顺序执行、并发加载。
JS 脚本会阻塞 HTML 文档的解析，包括 DOM 树的构建和渲染树的构建；CSS 样式表会阻塞渲染树的构建，但 DOM 树依然继续构建（除非遇到 script 标签且 css 文件此时仍未加载完成），但不会渲染绘制到页面上。
在 HTML 文档的解析过程中，解析器遇到
在页面初始化完成之后，每次ajax请求的信息都会实时添加到调试页面，就像这样：
在控制台控制调试页面的开闭：
传输大小
performance.timing.transferSize 可以用来获取传输大小，但是公司产品WebKit版本不支持，所以前端对于css、js文件的大小暂时没办法提供。而对于ajax的传输内容大小，我们使用 Content-Length 的值。
如何准确定义页面初始化完成的时机
对于图片加载，我们可以通过 window 对象的 load 事件获取图片等外部资源加载完成的时间，也可以通过一些方法去获取首屏图片加载完成的时间，但是对于页面初始化过程中发起的多个异步请求完成时机的判断，会相对麻烦一些，主要是由于异步请求返回结果的先后顺序不定。
我们设想在页面初始化完成的时候，在业务代码中调用方法上报信息到服务器，那么怎么确定页面初始化完成了？
比如页面初始化完成应当包括 关键词查询接口返回、表格内数据查询接口返回这两个ajax请求完成，此时我们才认为页面初始化完成了（对于这个页面来讲，也可以说是首屏加载完成）。但是异步请求的返回顺序是不定的，也许查询关键字的请求先返回，也许查询表格数据的接口先返回，如果需要准确定义初始化完成的时机，就要判断是否所有初始化涉及的请求均已成功，特别是有些页面的初始加载可能会调用很多个ajax请求，这就不太好确定什么时候是初始化完成的时候。
对于试验项目中的这个页面，因为初始化只涉及两个请求，相对来说作为主体内容的表格数据是主要的请求，而关键词的请求相对来说不太重要，因此我们可以粗略的将请求表格数据成功的时间，认为是页面初始化完成的时机，我们可以在请求表格数据的成功回调中进行信息的上报。
但是这样显然是不够精确的，并且这个页面的初始化过程涉及的异步请求比较少，但是如果是请求数量比较多的情况呢？
我们的解决方案是：$.when() + $.Deferred()
我们使用变量接收初始化过程中调用的 ajax 请求所返回的 jqXHR 对象，在 jQuery1.5 版本之后，$.ajax() 方法返回的 jqXHR 对象都是 Deferred 对象，因此我们可以将这些 jqXHR 对象放在 $.when() 方法中，为它们指定回调函数（即上报服务器的操作），这样就可以保证页面初始化时机的准确性。
代码示例如下：
// 页面初始化
$(function () {
// 表格初始化
var dtd = tableSection.showTable();
// 设置关键字
var dtd2 = integratedQuery.setHotKeyWords();
$.when(dtd, dtd2)
.done(function () {
// 将页面性能数据上报服务器
try {
WebPerformance.sendPerformanceInfoToServer();
} catch (e) {
throw e;
}
})
.fail(function () {
console.log("fail: send performance info")
});
// 其他初始化操作
// ...
});
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/102960.html
摘要：虽然有着各种各样的不同，但是相同的是，他们前端优化不完全指南前端掘金篇幅可能有点长，我想先聊一聊阅读的方式，我希望你阅读的时候，能够把我当作你的竞争对手，你的梦想是超越我。 如何提升页面渲染效率 - 前端 - 掘金Web页面的性能 我们每天都会浏览很多的Web页面，使用很多基于Web的应用。这些站点看起来既不一样，用途也都各有不同，有在线视频，Social Media，新闻，邮件客户端...
摘要：特意对前端学习资源做一个汇总，方便自己学习查阅参考，和好友们共同进步。 特意对前端学习资源做一个汇总，方便自己学习查阅参考，和好友们共同进步。 本以为自己收藏的站点多，可以很快搞定，没想到一入汇总深似海。还有很多不足&遗漏的地方，欢迎补充。有错误的地方，还请斧正... 托管: welcome to git，欢迎交流，感谢star 有好友反应和斧正，会及时更新，平时业务工作时也会不定期更...
摘要：前端每周清单专注前端领域内容，以对外文资料的搜集为主，帮助开发者了解一周前端热点分为新闻热点开发教程工程实践深度阅读开源项目巅峰人生等栏目。 前端每周清单专注前端领域内容，以对外文资料的搜集为主，帮助开发者了解一周前端热点；分为新闻热点、开发教程、工程实践、深度阅读、开源项目、巅峰人生等栏目。欢迎关注【前端之巅】微信公众号（ID：frontshow），及时获取前端每周清单；本文则是对于...
摘要：我从没有听到有人问如何做一名优秀甚至卓越的前端工程师。作为一个优秀的前端工程师还需要深入了解以及学会处理的这些缺陷。再者，优秀的前端工程师需要具备良好的沟通能力，因为前端工程师至少都要满足四类客户的需求。 我所遇到的前端程序员分两种： 第一种一直在问：如何学习前端？ 第二种总说：前端很简单，就那么一点东西。 我从没有听到有人问：如何做一名优秀、甚至卓越的WEB前端工程师...
阅读 3168·2021-11-23 09:51
阅读 680·2021-10-14 09:43
阅读 3203·2021-09-06 15:00
阅读 2406·2019-08-30 15:54
阅读 2560·2019-08-30 13:58
阅读 1841·2019-08-29 13:18
阅读 1373·2019-08-27 10:58
阅读 506·2019-08-27 10:53
