前端性能统计

网站的速度影响了用户访问网站最初的体验。试想,如果一个用户,在等待了若干秒后,还是停留在白屏的状态,那么他的选择将是离开这个网站。性能统计有助于帮我们检测网站的用户体验。
那么网站都有哪些指标?

  • 首屏时间。指一个网站被浏览器如IE窗口上的区域被充满所需时间。其实就是网页刚进入时,渲染完整个浏览器屏幕的时间。关于是否包含首屏所有的图片下载完成。这个网上有些争议,另一种说法是只要DOM+样式 都渲染完了,就算完成了。Chrome的Network可以清晰看到这个过程。
  • 白屏时间,页面处于空白的时间,通常影响白屏时间的多数是:DNS解析耗时+服务端耗时+网络传输耗时。(当然可能因为头部js阻塞页面影响)
  • 用户可操作时间。一般来讲domready时间,便是我们的用户可操作时间了。
  • 总下载时间, 页面总体的下载时间,所有的页面资源都下载完成。(window.onload)

如何统计这些指标

当然我们可以自己打开控制台,在页面的各个阶段,将时间打印出来,或者使用HTML5新增的接口:performance来进行评估。正常我们需要一个监控程序,去时刻提醒,现在网站的速度处于什么状况。所以,在代码中,增加统计,并把统计结果发送到服务器。在服务器采集这些日志,并产生一个监控的网站。

如何统计首屏时间

对于网页高度小于屏幕的网站来说,统计首屏时间非常的简单,因为我们已经可以从performance中得到渲染开始时performance.timing.navigationStart,只要在页面底部加上脚本打印当前时间即可(比如http://localhost:8091/?action=speedlog)。    

使用缓存优化

除了304缓存之外,如果html/css/js一直不变,可以考虑直接缓存到客户端。我们把不变的js/css/html存储到localstorage中去,下次加载首页的时候。在特定的位置,不必再从服务端请求。我们在写入localstorage的时候,同时在cookie中种下当前所有要缓存的内容的版本(MD5戳)就可以。如果cookie中有version,证明种过cookie,写过local,所以,不用传内容了,直接传script就好了,如果没有就要传输并且写入。

使用iconfont

如果有一些业务不需要多彩色图的时候,iconfont就派上了用场,在满足UE高清的需求下,可以节省大量的资源。

极小的图片base64化

对于小于1k的图片,我们将其变为base64编码,并融入到css中,一起换存到localstorage中去,这样即节省了网络请求,同时使图片也可以缓存到local中去了。