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能够通过一些复杂的设置，比如文件大小，权限，时间戳等，从一台到另外一台服务器，但是我仍然觉得这个有风险，不可靠，最好是别用。