yahoo开发的网页评分插件YSlow的评分规则

YSlow是Yahoo开发的一款网页性能分析插件，它主要用于评估网页性能以及提供具体优化建议，包括缓存利用、JS和CSS的压缩、并发连接等方面。下面我们来详细讲解“YSlow评分规则”的完整攻略。

YSlow的评分规则

YSlow对网页性能评分基于34个规则进行评估，可以根据评分结果给出不同的建议，具体规则如下：

1. 通过内容分发网络（CDN）提供静态资源
2. 为每个域名设置一个不同的资源
3. 为静态组件设置Expires或Cache-Control头
4. Gzip压缩组件
5. 把CSS和JS放到外部文件中
6. 把JS引用放到页面底部
7. 避免使用CSS表达式
8. 将CSS和JS文件压缩
9. 避免使用重定向
10. 移除重复的脚本和样式表
11. 配置ETag
12. 使Ajax可缓存
13. 针对未来的请求使用长期缓存
14. 通过域名划分页面组件
15. 最小化DNS查找
16. 减少JavaScript和CSS的请求数量
17. 避免使用AlphaImageLoader滤镜
18. 减少第三方JavaScript和CSS
19. 前端组件使用无cookie域
20. 减少DOM元素数量
21. 将外部JavaScript和CSS合并
22. 压缩HTML和CSS
23. 在前端使用缓存
24. 避免使用动态脚本
25. 最小化IFrames数量
26. 减少图片数量
27. 减少HTML请求数量
28. 引入favicon.ico
29. 禁止使用Image maps
30. 使用GET进行AJAX请求
31. 避免404错误
32. 减少Cookie大小
33. 对于不需延迟加载的组件使用HTTP请求
34. 分析HTTP请求

评分说明

YSlow基于34个规则对网页进行评分，得分范围从F到A，分别表示最差、次差、普通、较好和最好。YSlow使用不同的颜色标识不同的得分等级，具体解释如下：

• A级得分（90分及以上），标识为绿色，表示网页性能优秀，其中的规则可被用来优化当前网页，也可以用于其他网页。
• B级得分（80分-89分），标识为黄色，表示网页性能尚可，其中的规则可以被用于网页优化。
• C级得分（70分-79分），标识为橙色，表示网页性能较差，其中的规则可以被用于网页优化，同时也需要考虑其他一些方面。
• D级得分（60分-69分），标识为红色，表示网页性能非常差，需要进行大量优化。
• F级得分（60分及以下），标识为灰色，表示网页非常糟糕，需要进行极大的优化。

示例说明

假设我们的网页得分为C级，其中规则12和13需要针对未来的请求使用长期缓存，即将静态资源的到期时间设置为未来某个时间点。我们可以在服务器的配置文件中增加以下代码来实现该功能：

<FilesMatch "\.(js|css|jpg|jpeg|png|gif|swf)$">
    Header set Cache-Control "max-age=86400, public"
</FilesMatch>

以上代码把文档头中的Cache-Control属性设置为max-age=86400，也就是缓存的到期时间为当前时间 + 86400秒，即1天后。同时将public属性添加到Cache-Control中以使缓存程序能够正确识别缓存对象的共享状态。

另外，假设我们的网页还存在过多的JavaScript和CSS请求，可以考虑在前端将这些文件合并减少请求次数。假设我们使用了一些CSS和JS文件，可以通过以下方式将这些文件压缩合并：

<!-- CSS合并 -->
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/font-awesome.min.css">
<link rel="stylesheet" href="assets/css/style.css">

<!-- JS合并 -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/main.js"></script>

通过以上方式可以将所有的CSS合并为一个文件，并将所有JS合并为一个文件，这样可以减少请求次数提高页面性能。

以上是YSlow的评分规则的完整攻略，通过遵循这些规则可以大大提升我们网页的性能。