一个简单的网页性能收集平台

 

 

根据需求我们需要对公司网站进行性能的收集，来为我们优化页面提供支持

我们的目标是通过该平台查询公司开发的页面性能是否达到标准。

初步的标准是页面需满足： ready < 800、 readyTTFB < 600、 load < 3000、 loadTTFB < 2000

相关的性能数据是通过window.performance进行收集的

 

 

浏览器支持情况

IE9和chrome6以上的版本都支持：

•window.performance : ie9

•window.webkitPerformance : chrome6-9

•window.performance : chrome10+

 

window.performance.timing property  

 

（其属性的相关描述摘自官网https://developer.mozilla.org/en-US/docs/Web/API/PerformanceTiming）

此处篇幅略长，博主觉得作为前端人员理解这个是非常有必要的

 

PerformanceTiming.navigationStartRead only

Is an unsigned long long representing the moment, in milliseconds since the UNIX epoch, right after the prompt for unload terminates on the previous document in the same browsing context. If there is no previous document, this value will be the same as PerformanceTiming.fetchStart.

初始化页面，在同一个浏览器上下文中前一个页面unload的时间戳，如果没有前一个页面的unload,则与fetchStart值相等

 

PerformanceTiming.unloadEventStartRead only

Is an unsigned long long representing the moment, in milliseconds since the UNIX epoch, theunload event has been thrown, indicating the time at which the previous document in the window began to unload. If there is no previous document, or if the previous document or one of the needed redirects is not of the same origin, the value returned is0.

unloadEventStart 前一个页面的unload的时间戳 如果没有则为0、

 

PerformanceTiming.unloadEventEndRead only

Is an unsigned long long representing the moment, in milliseconds since the UNIX epoch, theunload event handler finishes. If there is no previous document, or if the previous document, or one of the needed redirects, is not of the same origin, the value returned is0.

unloadEventEnd 与unloadEventStart 相对应，返回的是unload函数执行完成的时间戳

 

PerformanceTiming.redirectStartRead only

Is an unsigned long long representing the moment, in milliseconds since the UNIX epoch, the first HTTP redirect starts. If there is no redirect, or if one of the redirects is not of the same origin, the value returned is 0.

第一个http重定向发生的时间 有跳转且是同域的重定向 否则为0

 

PerformanceTiming.redirectEndRead only

Is an unsigned long long representing the moment, in milliseconds since the UNIX epoch, the last HTTP redirect is completed, that is when the last byte of the HTTP response has been received. If there is no redirect, or if one of the redirects is not of the same origin, the value returned is0.

redirectEnd 最后一个重定向完成时的时间，否则为0

 

PerformanceTiming.fetchStartRead only

Is an unsigned long long representing the moment, in milliseconds since the UNIX epoch, the browser is ready to fetch the document using an HTTP request. This moment isbefore the check to any application cache.

fetchStart 浏览器准备好使用http请求抓取文档的时间，这发生在检查缓存之前

 

PerformanceTiming.domainLookupStartRead only

Is an unsigned long long representing the moment, in milliseconds since the UNIX epoch, where the domain lookup starts. If a persistent connection is used, or the information is stored in a cache or a local resource, the value will be the same as PerformanceTiming.fetchStart.

domainLookupStart DNS域名开始查询的时间，如果是持久性链接或者本地的缓存则值与fetchstart相同

 

PerformanceTiming.domainLookupEndRead only

Is an unsigned long long representing the moment, in milliseconds since the UNIX epoch, where the domain lookup is finished. If a persistent connection is used, or the information is stored in a cache or a local resource, the value will be the same as PerformanceTiming.fetchStart.

域名查询完成时间

 

PerformanceTiming.connectStartRead only

Is an unsigned long long representing the moment, in milliseconds since the UNIX epoch, where the request to open a connection is sent to the network. If the transport layer reports an error and the connection establishment is started again, the last connection establishment start time is given. If a persistent connection is used, the value will be the same asPerformanceTiming.fetchStart.

connectStart Http(TCP) 开始建立连接的时间，如果是持久连接，则与fecthStart 值相等。  （注意 如果在传输层发生了错误且重新建立了连接，则这里显示的是新建立的连接开始时间）

 

PerformanceTiming.connectEndRead only

Is an unsigned long long representing the moment, in milliseconds since the UNIX epoch, where the connection is opened network. If the transport layer reports an error and the connection establishment is started again, the last connection establishment end time is given. If a persistent connection is used, the value will be the same asPerformanceTiming.fetchStart. A connection is considered as opened when all secure connection handshake, or SOCKS authentication, is terminated.

connectEnd  Http(Tcp) 完成握手的时间，如果是持久连接则与fecthStart 值相等。（注意 如果在传输层发生了错误且重新建立了连接，则这里显示的是新连接完成的时间。 这里包括ssl等授权通过）

 

PerformanceTiming.secureConnectionStartRead only

Is an unsigned long long representing the moment, in milliseconds since the UNIX epoch, where the secure connection handshake starts. If no such connection is requested, it returns0.

安全链接握手开始时间， 如果不存在这样的链接则值为零

PerformanceTiming.requestStartRead only

Is an unsigned long long representing the moment, in milliseconds since the UNIX epoch, when the browser sent the request to obtain the actual document, from the server or from a cache. If the transport layer fails after the start of the request and the connection is reopened, this property will be set to the time corresponding to the new request.

requestStart http请求读取真实文档开始的时间（完成建立连接），包括从本地缓存读取。 连接错误时这里也显示重新建立连接的时间。

PerformanceTiming.responseStartRead only

Is an unsigned long long representing the moment, in milliseconds since the UNIX epoch, when the browser received the first byte of the response, from the server from a cache, or from a local resource.

浏览器开始接受响应值的时间

PerformanceTiming.responseEndRead only

Is an unsigned long long representing the moment, in milliseconds since the UNIX epoch, when the browser received the last byte of the response, or when the connection is closed if this happened first, from the server, the cache, or from a local resource.

响应结束时间

 

PerformanceTiming.domLoadingRead only

Is an unsigned long long representing the moment, in milliseconds since the UNIX epoch, when the parser started its work, that is when itsDocument.readyState changes to 'loading' and the correspondingreadystatechange event is thrown.

domloading 开始解析渲染dom树的时间，此时Document.readyState 变成loading ，并将抛出readyStateChange 事件

 

PerformanceTiming.domInteractiveRead only

Is an unsigned long long representing the moment, in milliseconds since the UNIX epoch, when the parser finished its work on the main document, that is when itsDocument.readyState changes to 'interactive' and the correspondingreadystatechange event is thrown.

dominteractive 完成解析DOM树的时间，Document.readyState 变成interactive，并将抛出readyStateChange事件（注意 只是DOM树解析完成，这时候并没有开始加载网页内的资源）

 

PerformanceTiming.domContentLoadedEventStartRead only

Is an unsigned long long representing the moment, in milliseconds since the UNIX epoch, right before the parser sent theDOMContentLoaded event, that is right after all the scripts that need to be executed right after parsing has been executed.

domContentLoadedEventStart  在DOM树解析完成后，网页内资源加载开始的时间。在DOMcontentLoaded事件抛出前发生

（当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded事件被触发，而无需等待样式表、图像和子框架的完成加载）

 

PerformanceTiming.domContentLoadedEventEndRead only

Is an unsigned long long representing the moment, in milliseconds since the UNIX epoch, right after all the scripts that need to be executed as soon as possible, in order or not, has been executed.

domContentLoadedEventEnd   DOM树解析完成后，网页内资源加载完成时间（如JS脚本加载执行完成）

 

PerformanceTiming.domCompleteRead only

Is an unsigned long long representing the moment, in milliseconds since the UNIX epoch, when the parser finished its work on the main document, that is when itsDocument.readyState changes to 'complete' and the correspondingreadystatechange event is thrown.

domCompelete Dom树解析完成，且资源也准备就绪的时间

 

一个document 的Document.readyState 属性描述了文档的加载状态。

一个文档的 readyState 可以是以下之一：

loading / 加载

document 仍在加载。

interactive / 互动

文档已经完成加载，文档已被解析，但是诸如图像，样式表和框架之类的子资源仍在加载。

 

 

complete / 完成

T文档和所有子资源已完成加载。状态表示 load 事件即将被触发。

当这个属性的值变化时，document 对象上的readystatechange 事件将被触发。

 

 

PerformanceTiming.loadEventStartRead only

Is an unsigned long long representing the moment, in milliseconds since the UNIX epoch, when theload event was sent for the current document. If this event has not yet been sent, it returns0.

loadEventStart load 事件发送给文档，也即load回调函数开始执行的时间

 

 

PerformanceTiming.loadEventEndRead only

Is an unsigned long long representing the moment, in milliseconds since the UNIX epoch, when theload event handler terminated, that is when the load event is completed. If this event has not yet been sent, or is not yet completed, it returns0.

loadEventEnd load回调函数执行完成的时间 

 

 

数据库设计

第一阶段初步分析主要展示ready、ready TTFB、load、load TTFB这四个字段

 

 

 

 

ready:即为dom_content_loaded_event_star开始的时间 在DOM树解析完成后，网页内资源加载开始的时间

 

 

ready TTFB：dom_content_loaded_event_start - response_start  作为前端性能分析我们更多的关注点页面载入耗时，这个字段是忽略服务器请求时间

 

load:   load_event_start 即为load回调函数开始执行的时间

 

loadTTFB:  load_event_start - response_start  load回调函数减去服务器开始请求时间的差值

考虑到数据量的问题，查询时仅提供一天的数据量信息，默认时间为当前时间的前一天

随着数据的增多，发现查询的速度慢了好多， 主要是相同的URL进行合并查询占用大量时间。

真的该问题增设一临时表，每天定时跑一下任务将前天合并查询后的数据进行导入

 

 

后台egg架构

 

 

controller: 用于请求响应以及返回结果

                 a.获取HTTP的请求参数

    b.对相关参数进行校验以及各式化的相关处理，

                  例如在此：将驼峰式的参数转化成下划线以便于存入数据库、将其他的参数字段        与 navigationStart进行差值处理、异常数据监测等等

                c.通过HTTP将结果响应给用户

service:    按照官方文档 简单来说，Service 就是在复杂业务场景下用于做业务逻辑封装的一个抽象层。由于我们的业务目前来说比较简单，在此用于进行相关的SQL操作

 

router： 主要用来描述请求 URL 和具体承担执行动作的 Controller 的对应关系， 框架约定了 app/router.js 文件用于统一所有路由规则

 

datasql: 用于存放数据库设计的文档

 

utils: 用于存放一些涉及到的工具类

 

antx.properties：本地开发时，对服务器、端口、数据库进行相关配置

 

 

总结

 该项目的实现方案：根据window.performance进行时间收集，传入后台存储到数据库中；然后对数据库进行相关的查询操作（简单到我都不知道该说些什么了(⊙﹏⊙)b，不过后期还会对该平台进行改进丰富的）。