前端性能统计

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

首屏时间。指一个网站被浏览器如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中去了。