前端性能优化

前端性能统计的数据大致有以下几个：

• 白屏时间：从打开网站到有内容渲染出来的时间节点；
• 首屏时间：首屏内容渲染完毕的时间节点；
• 用户可操作时间节点：domready触发节点；
• 总下载时间：window.onload的触发节点。

 

• 白屏时间

白屏时间节点指的是从用户进入网站（输入url、刷新、跳转等方式）的时刻开始计算，一直到页面有内容展示出来的时间节点。这个过程包括dns查询、建立tcp连接、发送首个http请求（如果使用https还要介入TLS的验证时间）、返回html文档、html文档head解析完毕。

使用注入代码监控无法获取解析html文档之前的时间信息，目前普遍使用的白屏时间统计方案是在html文档的head中所有的静态资源以及内嵌脚本/样式之前记录一个时间点，在head最底部记录另一个时间点，两者的差值作为白屏时间。

 

• 首屏时间

首屏时间的统计比较复杂，目前应用比较广的方案是将首屏的图片、iframe等资源添加onload事件，获取最慢的一个。

这种方案比较适合首屏元素数量固定的页面，比如移动端首屏不论屏幕大小都展示相同数量的内容，响应式得改变内容的字体、尺寸等。但是对于首屏元素不固定的页面，这种方案并不适用，最典型的就是PC端页面，不同屏幕尺寸下展示的首屏内容不同。上述方案便不适用于此场景。

 

• 可操作时间

用户可操作的时间节点即dom ready触发的时间，使用jquery可以通过$(document).ready()获取此数据，如果不使用jQuery可以参考这里通过原生方法实现dom ready。

 

• 总下载时间

总下载时间即window.onload触发的时间节点。

 

参考文章：

前端性能监控方案window.performance 调研(转)

window.performance API

前端性能优化之白屏时间