Web前端性能杂记

  前面说过,用户感受的响应时间是取决于诸多因素的,我们几乎不能得到真实的用户响应时间。对于Web应用前端性能的研究也不是为了准备得到一个响应时间,其性能一部分取决于Web服务器和应用服务器(下载资源,执行等),另一部分取决于浏览器的实现机制、界面JS文件的执行等,所以我们讨论前端性能的目的是减少总的响应时间,或者说让用户“感觉很快”。

一、与前端性能相关的头信息

a)Accept-Encoding:编码方式。是否支持压缩,支持何种格式的压缩;

b)Connetion:连接。是否持久连接;

c)Expires:返回数据的到期时间。与浏览器的缓存机制有关,此处不细说,详情请看http相关的头域说明;

二、浏览器从输入URL开始到页面完全可用的大致过程

a)连接到URL所在服务器;

b)获取页面对应的HTML文档;

c)解析文档并获取所需要的资源;

d)页面上的JS文件与CSS文件;

扫描二维码关注公众号,回复: 4674801 查看本文章

e)onload事件。

三、提高前端性能的常用方法

  从第二点的过程来看,主要有两大思路:

①减少页面加载所需要的时间:从请求的数据、请求的并发度以及网络传输时间等方面着手;

②提升用户的观感,让用户觉得页面很快:让页面尽快开始显示着手。

3.1  减少网络时间

①.使用DNS缓存技术

②.减少需要传输文件的尺寸

③.加快文件传输速度

3.2  减少发送的请求数量

①.利用浏览器缓存

②.使用合并的图片文件

3.3  提高浏览器下载的并发度

①.JS文件放在HTML文档的最后

②.使用多个域名

3.4  让页面尽早开始显示

①.将样式表的引用放在HTML文档的开头(如放在<Head>标签中)

②.将JS的引用放在HTML文档的最后

--------------------------------------------------------------分割线--------------------------------------------------------------

  对于协助测试前端性能的工具,有HttpWatch、Chrome自带的开发者工具(F12)、Page Speed工具、YSlow等。我用过一段时间的YSlow,操作很简单,而且也会给出优化前端性能的建议,有兴趣的看客不凡去试试。安装包大概需要点百度功底,教程的话,百度即可,看一遍就懂了。对于性能测试,我们平时更多的还是针对服务器、数据库等,此文记录纯为了解,开拓自身眼界。

____江湖没什么好,也就酒还行

猜你喜欢

转载自www.cnblogs.com/zichuan/p/10187496.html