Web页面性能测试与优化

一.　　有两种方式来提升你的web 应用程序的速度：一是减少请求和响应的往返次数，二是减少请求和响应的往返字节大小。以下几种优化点即围绕以上两种方式来展开。

1. 尽量减少 HTTP 请求 (Make Fewer HTTP Requests) 　  
2. 减少 DNS 查找 (Reduce DNS Lookups) 
3. 避免重定向 (Avoid Redirects)
4. 使得 Ajax 可缓存 (Make Ajax Cacheable)
5. 延迟载入组件 (Post-load Components)
6. 预载入组件 (Preload Components) 
7. 减少 DOM 元素数量 (Reduce the Number of DOM Elements)
8. 添加 Expires 或 Cache-Control 信息头 (Add an Expires or a Cache-Control Header) 
9. 设置 Etags (Configure ETags)
10. 尽早刷新 Buffer (Flush the Buffer Early)
11. 对 AJAX 请求使用 GET 方法 (Use GET for AJAX Requests) 
12. 缩小 Cookie (Reduce Cookie Size)
13. 针对 Web 组件使用域名无关性的 Cookie (Use Cookie-free Domains for Components) 
14. 将CSS放在页面顶端，JS文件放在页面底端。避免 CSS 表达式 (Avoid CSS Expressions)
15. 压缩css和js代码,从页面中剥离 JavaScript 与 CSS (Make JavaScript and CSS External) 
16. 使用CDN(内容分发网络): Content Delivery Network 
17. 使用 <link> 而不是@importChoose <link> over @import 
18. 避免使用Filter (Avoid Filters) 
19. 减少 DOM 访问 (Minimize DOM Access) 
20. 优化图片 (Optimize Images),尽可能的使用 PNG 格式的图片: 1) 使用 CSS Sprites 技巧对图片优化; 2) 不要在 HTML 中使用缩放图片 (Don't Scale Images in HTML) ; 3) 用更小的并且可缓存的 favicon.ico (Make favicon.ico Small and Cacheable) 

 二.       Web性能测试工具推荐如下：

        http://www.blogjava.net/BearRui/archive/2010/04/28/web_performance_tools.html

        简单归纳的测试点如下所示：

 

 

 三. 工具试用

      1. 参照http://wenku.baidu.com/link?url=a9Ix2zSd4wsfQRcQTbYQAUME969GbJXJon3wYU3Mf4evjA4iYuB6-yt28LE3eaRu2UoPhGIhwUj5xv3-1B4T-h_dqw6LAux7j8m5FbdfwwO及http://www.cnblogs.com/fnng/archive/2011/09/24/2186708.html搭建了show slow和yslow的环境，yslow的评分具体标准参见官方文档http://developer.yahoo.com/performance/rules.html,主要有35条评分标准。是在FF的firebug中运行的。

       2. 另外几款工具可以参照http://blog.csdn.net/zhangren07/article/details/6883617， 其中试验了dynatraceAjax Edition，它有以下几个优势：

           1) 支持IE

           2) 支持JS函数级的分析

           3) 对每条细则的建议更祥尽

      3. firebug教程参照：http://blog.csdn.net/tianxiaode/article/details/1769152

      4. Fiddler教程：http://www.cnblogs.com/TankXiao/archive/2012/02/06/2337728.html ，官网参考：http://www.telerik.com/fiddler

 

四。 补充：

      1. 参照工具一：http://www.blogjava.net/BearRui/archive/2010/04/28/web_performance_tools.html

      2. 参照工具二： http://www.oschina.net/news/21033/12-free-online-tools-for-website-testing/