性能优化工具之YSlow
2018-06-06 本文已影响0人
tency小七
YSlow:
YSlow的使用
https://devework.com/yslow.html
点击YSlow按钮,启动插件,点击Run Test 测试当前页面。在新弹出的界面中按照重要性显示了影响此页面效率的元素,其中A类评分为最高,F为最低.
点击【Components】菜单
这个视图是一个页面所有部件的信息列表。从中我们可以得知每个部件的
各种详细信息。如:类型、URL、Expires数据、状态、大小、读取时间、ETag信息等等。通过对这个列表的分析,我们就可以知道到底是什么东西最耗费我们的资源,从而有针对性的进行优化
点击【Statistics】菜单
这个视图会告诉你页面的总体统计信息。包括页面大小、css样式表大小、脚本文件大小、总体图片大小、flash文件大小和css中用到的图片文件大小。还会告诉你,哪些东西被缓存了,缓存了多少等等。
影响页面性能的几个因素:
- Make Fewer HTTP Requests 尽可能的减少HTTP的Request请求数。
- 用一张大图片来代替许多小图片,雪碧图
- 合并CSS文件
- 合并js文件
- 启用Gzip压缩
- 将脚本放在底部,脚本是用来和用户交互的,如果完整的页面没有出来,交互也没有什么意义了。
- Make JavaScript and CSS External
将javascript和css独立成外部文件,虽然看起来和第一点有些矛盾,在某种程度上也是降低了效率,但是外部的引用文件会被浏览器缓存,所以这些比较大的文件只要用户浏览过一次网页后就能缓存在浏览器,第二次就不用再去下载了,提高效率 - Reduce DNS Lookups 减少DNS查询
1:如果不是必须,请不要把网站放到两台服务器上。
2:网页中的图片、css文件、js文件、flash文件等等,不要太多的分散在不同的网络空间中。这就是为什么那种只发一个网站中的壁纸图片的帖子,要比壁纸图片来源于不同网站的帖子显示要快得多的原因。 - Minify JavaScript and CSS 减少JavaScript和CSS文件的体积
把没有必要的空行、空格和注释全部去掉。显然手工去处理效率太低,可以利用压缩JavaScript代码体积的工具。