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的优化规则

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

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创建起的链接数是有限的，因此为了加大下载的并行链接，一个常见作法是将一个页面的资源放在不一样的服务器上
3、最小化请求开支
1）最小化请求到一个包装载：确保Cookie和 HEAD最小化
2）请求获取静态资源时，去除Cookie冗余
静态资源如： images, JS 、CSS files
不须要和Cookies放到一块儿
4、最小化负载——减小下载流量
1) 用gzip或deflate压缩
2）去除无用的CSS （制做页面时，避免直接从其余类似页面直接拷贝CSS,而引起CSS冗余）
3) 压缩精简javascript、html、CSS
4) 推迟javascript加载
5) 应用等比例缩放图片
6）URL惟一化
5、优化展示
1）精炼CSS标记(CSS Selector)
2) 避免使用CSS表达式（CSS expression）
3) 将CSS放置在head而非body
4) 明确图片尺寸
5）明确字符集于head
6、手机端优化
1）推迟script解析
2）cache重定向页面(专为手机浏览用)