前面说过,用户感受的响应时间是取决于诸多因素的,我们几乎不能得到真实的用户响应时间。对于Web应用前端性能的研究也不是为了准备得到一个响应时间,其性能一部分取决于Web服务器和应用服务器(下载资源,执行等),另一部分取决于浏览器的实现机制、界面JS文件的执行等,所以我们讨论前端性能的目的是减少总的响应时间,或者说让用户“感觉很快”。
一、与前端性能相关的头信息
a)Accept-Encoding:编码方式。是否支持压缩,支持何种格式的压缩;
b)Connetion:连接。是否持久连接;
c)Expires:返回数据的到期时间。与浏览器的缓存机制有关,此处不细说,详情请看http相关的头域说明;
二、浏览器从输入URL开始到页面完全可用的大致过程
a)连接到URL所在服务器;
b)获取页面对应的HTML文档;
c)解析文档并获取所需要的资源;
d)页面上的JS文件与CSS文件;
e)onload事件。
三、提高前端性能的常用方法
从第二点的过程来看,主要有两大思路:
①减少页面加载所需要的时间:从请求的数据、请求的并发度以及网络传输时间等方面着手;
②提升用户的观感,让用户觉得页面很快:让页面尽快开始显示着手。
3.1 减少网络时间
①.使用DNS缓存技术
②.减少需要传输文件的尺寸
③.加快文件传输速度
3.2 减少发送的请求数量
①.利用浏览器缓存
②.使用合并的图片文件
3.3 提高浏览器下载的并发度
①.JS文件放在HTML文档的最后
②.使用多个域名
3.4 让页面尽早开始显示
①.将样式表的引用放在HTML文档的开头(如放在<Head>标签中)
②.将JS的引用放在HTML文档的最后
--------------------------------------------------------------分割线--------------------------------------------------------------
对于协助测试前端性能的工具,有HttpWatch、Chrome自带的开发者工具(F12)、Page Speed工具、YSlow等。我用过一段时间的YSlow,操作很简单,而且也会给出优化前端性能的建议,有兴趣的看客不凡去试试。安装包大概需要点百度功底,教程的话,百度即可,看一遍就懂了。对于性能测试,我们平时更多的还是针对服务器、数据库等,此文记录纯为了解,开拓自身眼界。
____江湖没什么好,也就酒还行