Web 前端性能优化

根据yahoo的经验,web前端性能的优化,应该有下面几条:

1、减少http请求
(1)尽量将图片放在一个大图片里面。
(2)使用3-4个js脚本和1-2个样式表,全部集合在一个文件的话,不方便管理。

2、使用内容发布网络(CDN)
CDN是指一组分布在多个不同地理位置的web服务器,用于更加快速有效的向用户发布内容。


3、添加expires头
(1)expires的局限
因为他使用了一个特定的时间,它要求服务器和客户端的时间严格同步,过期时间也需要经常检查,所以http1.1引入了cache-control头来克服以上问题,由于可能有不支持http1.1的浏览器访问(也许没有),所以推荐两个都设置,好像apache的ExpiresDefault支持这个功能

(2)缓存时间
Html文档不应该使用长久的缓存时间,因为它包括动态内容,推荐一个星期以内的时间;
图片,css,脚本推荐缓存30天以上
(3)缓存后的更新问题
假设您已经设置了缓存,你很快会发觉,你假设上传了一个css样式,刷新后没有变化……高手也许会ctrl+F5,像我这样的菜鸟也许狂按F5都没有用……这个时候,您应该在您的css文件后面加上一段版本号,像这样www.heshengfang.com/css/common2.2.1.css或者www.heshengfang.com/css/common.css?2.2.1就能轻松解决,也能实现版本控制(建议css,js路径用php变量保存)。
(4)如果没有缓存
如果您没有一个长久的expires头,浏览器仍然会存储在它的缓存里面,只是在后续的请求中,它会发送一个get请求,如果没有变化,服务器会发送一个很小的头(304 Not Modified),告诉浏览器仍然可以使用它自己缓存的文件,这些请求加起来,其实也是蛮可观的,我们还是能省就省


4、压缩
(1)开启地球人都知道的gzip,我个人不是很推荐压缩图片,因为图片基本上都是已经压缩过的,尤其是jpg格式,这种已经是严重损失压缩方式保存。
(2)考虑使用一个打包工具发布js和css,输出的css和js是删除换行,注释后的,本地代码是未格式化的(我有个java版,代码还未研究,有待跟进)。


5、样式表放在页面顶部
使用css时,页面逐步呈现会被阻止,直到css下载完毕,所以推荐把css放在页面顶部,这样能够使浏览器的内容逐步显示,而不是白屏,然后突然全部都显示出来了。


6、js脚本推荐放在页面底部    js跟css刚好相反,使用js时,对于js以下的内容,逐步呈现都会被阻止,js越靠下,意味着越多的内容能够逐步显示。


7、并行下载    对响应时间影响比较大的是页面中请求的数量,浏览器不能一次将所有的请求都下载下来,这个问题是http1.1规范规定的……这个规范建议浏览器从每个主机名并行地下载两个请求。
不过并不是过多的命名域名就能加快速度,过多的域名会增加dns查找的负担。一般推荐2个不同的域名即可。


8、不要使用css的e­xpression
这个东西看起来好像能在css里面写js,实质是当鼠标移动的时候都要求值,这个求值的频率太高,浏览器很容易死掉。


9、减少DNS查找    浏览器查找一个给定主机名的ip地址大概要花费20-120毫秒(web资料),响应时间依赖DNS解析器所承担的请求压力。


10、避免重定向    重定向是指将用户从一个url重新路由到另外一个url
    下面是一个例子
    1请求初始url:http://www.qq.com/
    2收到302重定向,地址为http://www.qq.com/index.html/(假设)
    3请求http://www.qq.com/index.html/
    4然后才开始下载图片,html等
    我事实想说的是缺少结尾的斜线
    url的结尾必须出现斜线/,当你请求了http://www.qq.com,这个时候其实包括了一个301的响应,它请求了http://www.qq.com/。
许多浏览器会帮你自动加上/,但是页面写上的链接,我觉得要注意这个问题。


11、Etag    
(1)概念
这个也是用在缓存上面,用来检测缓存跟服务器的是否匹配,用唯一标识来确定,例如ETag:”10c1s222dd-d13-d113313”,浏览器会将etag传回服务器,如果etag是匹配的,那么服务器就会返回304状态码,直接通知浏览器使用缓存
(2)问题
    通常使用某些固定的东西来构造它(例如文件大小,权限,时间戳),它对于一台服务器来说是唯一的,当浏览器从一台服务器获得了一个原始的etag后,它又向另外一个不同的服务器发起get请求的时候,etag是不会匹配的,对于多台服务器,使用etag不是一个好主意,也许apache能够通过一些复杂的设置,比如文件大小,权限,时间戳等,从一台到另外一台服务器,但是我仍然觉得这个有风险,不可靠,最好是别用。

 

阅读更多
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭