web前端性能优化建议

业界最著名的web前端性能分析工具，非Yahoo的YSlow和Google的PageSpeed莫属。不过遗憾的是yslow的FF插件已经不能正常运行，google也被墙了，pagespeed无法正常使用了。但是他们的优化规则还是可以给我们以指导滴。简单翻译一下，供大家参考。

YSlow的23个优化规则

1. 减少HTTP请求次数
   合并图片、CSS、JS，改进首次访问用户等待时间。
2. 使用CDN
   就近缓存==>智能路由==>负载均衡==>WSA全站动态加速
3. 避免空的src和href
   当link标签的href属性为空、script标签的src属性为空的时候，浏览器渲染的时候会把当前页面的URL作为它们的属性值，从而把页面的内容加载进来作为它们的值。
4. 为文件头指定Expires
   使内容具有缓存性。避免了接下来的页面访问中不必要的HTTP请求。
5. 使用gzip压缩内容
   压缩任何一个文本类型的响应，包括XML和JSON，都是值得的。旧文章
6. 把CSS放到顶部
7. 把JS放到底部
   防止js加载对之后资源造成阻塞。
8. 避免使用CSS表达式
9. 将CSS和JS放到外部文件中
   目的是缓存，但有时候为了减少请求，也会直接写到页面里，需根据PV和IP的比例权衡。
10. 权衡DNS查找次数
    减少主机名可以节省响应时间。但同时，需要注意，减少主机会减少页面中并行下载的数量。
    IE浏览器在同一时刻只能从同一域名下载两个文件。当在一个页面显示多张图片时，IE 用户的图片下载速度就会受到影响。所以新浪会搞N个二级域名来放图片。
11. 精简CSS和JS
12. 避免跳转
    同域：注意避免反斜杠 “/” 的跳转；
    跨域：使用Alias或者mod_rewirte建立CNAME（保存域名与域名之间关系的DNS记录）
13. 删除重复的JS和CSS
    重复调用脚本，除了增加额外的HTTP请求外，多次运算也会浪费时间。在IE和Firefox中不管脚本是否可缓存，它们都存在重复运算JavaScript的问题。
14. 配置ETags
    它用来判断浏览器缓存里的元素是否和原来服务器上的一致。比last-modified date更具有弹性，例如某个文件在1秒内修改了10次，Etag可以综合Inode(文件的索引节点(inode)数)，MTime(修改时间)和Size来精准的进行判断，避开UNIX记录MTime只能精确到秒的问题。 服务器集群使用，可取后两个参数。使用ETags减少Web应用带宽和负载
15. 可缓存的AJAX
    “异步”并不意味着“即时”：Ajax并不能保证用户不会在等待异步的JavaScript和XML响应上花费时间。
16. 使用GET来完成AJAX请求
    当使用XMLHttpRequest时，浏览器中的POST方法是一个“两步走”的过程：首先发送文件头，然后才发送数据。因此使用GET获取数据时更加有意义。
17. 减少DOM元素数量
    是否存在一个是更贴切的标签可以使用？人生不仅仅是DIV+CSS
18. 避免404
    有些站点把404错误响应页面改为“你是不是要找*”，这虽然改进了用户体验但是同样也会浪费服务器资源（如数据库等）。最糟糕的情况是指向外部 JavaScript的链接出现问题并返回404代码。首先，这种加载会破坏并行加载；其次浏览器会把试图在返回的404响应内容中找到可能有用的部分当作JavaScript代码来执行。
19. 减少Cookie的大小
20. 使用无cookie的域
    比如图片 CSS 等，Yahoo! 的静态文件都在主域名以外，客户端请求静态文件的时候，减少了 Cookie 的反复传输对主域名的影响。
21. 不要使用滤镜
    png24的在IE6半透明那种东西，别乱使，淡定的切成PNG8+jpg
22. 不要在HTML中缩放图片
23. 缩小favicon.ico并缓存

PageSpeed的优化规则

一、Cache优化
1）加大浏览器缓存
HEAD : Expires
引用CSS、JS, 以求需要较多更新次数的页面加载，不会连带请求相对固定的CSS,JS信息
固定URI，少用动态的，这样可以使缓存的URI信息更有效
2）加大代理服务器缓存

二、最小化往返时间——减少请求->回复的次数
1）最小化DNS检索（DNS缓存）
2）最小化重定向请求
1XX 信息相应类，接受到请求&继续处理
2XX 处理成功相应类
3XX 重定向
4XX 客户端错误
5XX 服务端错误从PageSpeed浅析Web前端性能
3) 去除坏链
4）整合外部script、CSS文件，减少文件数
5）用CSS精灵(CSS Sprites)整合image文件，减少图片文件数
从PageSpeed浅析Web前端性能
6）优化CSS与script的下载排序（并行）
7) 去除document.write() 改成直接定义
8）去除CSS @import 使用link引入
9）使用异步资源 （Script Dom 元素）
10）在多个Host之间并行下载：由于服务器和每个IP建立起的连接数是有限的，所以为了加大下载的并行连接，一个常见做法是将一个页面的资源放在不同的服务器上
三、最小化请求开支
1）最小化请求到一个包装载：确保Cookie和 HEAD最小化
2）请求获取静态资源时，去除Cookie冗余
静态资源如： images, JS 、CSS files
不需要和Cookies放到一起
四、最小化负载——减少下载流量
1) 用gzip或deflate压缩
2）去除无用的CSS （制作页面时，避免直接从其他相似页面直接拷贝CSS,而引发CSS冗余）
3) 压缩精简javascript、html、CSS
4) 推迟javascript加载
5) 应用等比例缩放图片
6）URL唯一化
五、优化展现
1）精炼CSS标记(CSS Selector)
2) 避免使用CSS表达式（CSS expression）
3) 将CSS放置在head而非body
4) 明确图片尺寸
5）明确字符集于head
六、手机端优化
1）推迟script解析
2）cache重定向页面(专为手机浏览用)