对Web应用进行静态性能的评估

概念:开发Web应用时,基于一系列Web应用页面性能优化的最佳实践对Web应用的页面进行静态分析,被给出评估结果的性能分析方法。即通过分析页面的代码来评估页面的情况

工具:YSlow(雅虎)、PageSpeed(谷歌)

 

以chrom为列

1、打开chrom浏览器

2、打开扩展程序

3、在扩展程序中进行搜索这两款软件,或下载插件导入

4、chrom-工具-打开yslow,点击runtest按钮,就会进行网页的静态性能分析,并给出分数和级别

以Firefox为列

1、打开Firefox浏览器

2、打开扩展程序

3、在扩展程序中进行搜索yslow,或下载插件导入

4、在扩展程序中进行搜索firebug,或下载插件导入

5​、F12-打开firebug-切换到yslow,点击runtest按钮,就会进行网页的静态性能分析,并给出分数和级别

分数和级别的解释

ABCDEF A为最好,依次分数降低 评估标准有23条,解释如下:

1)尽量减少http的请求  Make fewer HTTP requests

2)页面有没有CDN,内容分发网络  Use a Content Delivery Network(CDN)

3)避免空的src和href这样的编码,渲染的时候会有影响  Avoid empty src or href

4)为文件头指定过期标签  Add Expires headers

5)有没有使用gzip对内容进行压缩  Compress components with gzip

6)将css样式表尽量放在页面代码的顶部 Put CSS at top

7)将JS脚本放在底部,这样用户在访问的时候能够尽早的呈现内容 Put JavaScript at bottom

8)使用CSS样式表的时候尽量避免CSS表达式的使用   Avoid CSS expressions

9)使用JS和CSS样式表的时候尽量使用外部文件,这样可以进行缓存  Make JavaScript and CSS external

10)减少DNS的查找次数  Reduce DNS lookups

11)精简JS和CSS样式表  Minify JavaScript and CSS

12)避免URL的跳转  Avoid URL redirects

13)删除重复的JS和CSS脚本  Remove duplicate JavaScript and CSS

14)配置Etags,使用此技术可以提升性能  Configure entity tags(ETags)

15)使AJAX可以缓存,加快响应  Make AJAX cacheable

16)使用GET完成AJAX请求  Use GET for AJAX requests

17)减少DOM元素的数量  Reduce the number of DOM elements

18)避免404错误  Avoid HTTP 404(NOT Found)error

19)减少cookie大小  Reduce cookie size

20)使用没有cookie的域 Use cookie-free domains

21)避免滤镜的使用(低版本IE中会导致大的性能问题)  Avoid AIphaImageLoader filter

22)HTML里面不要使用缩放图片的方式来处理我们的图片  Do not scale images in HTML

23)小图标尽量使它的文件大小变小,而且文件是可以缓存的 Make favicon small and cacheable

PageSpeed与YSlow的功能差不多,通过这样的静态分析,我们可以知道web应用的基本性能情况。Goodbye~~

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注