网页性能优化是提升用户体验和搜索引擎排名的关键，Yslow 作为一款老牌的网页性能分析工具，至今仍被广泛使用。它到底是怎么检测网页性能的？那 23 项性能规则又该怎么理解和应用？别急，咱们慢慢聊。
? Yslow 的检测原理和流程
Yslow 的核心是基于雅虎提出的网页性能优化规则，通过分析网页加载过程中的各项数据来评估性能。它的检测流程其实挺清晰的。首先，它会抓取网页的 DOM 结构，也就是网页的骨架。然后，它会遍历 Firebug 的 Net Panel 组件，把页面中的各种资源，像图片、CSS、JS 文件等都找出来。接着，它会获取每个组件的详细信息，比如大小、是否使用 gzip 压缩、Expires 头信息等。最后，它会根据这些数据，为每个规则生成一个等级，从而得出总体成绩。
Yslow 的检测结果会以报告的形式呈现，里面有等级视图、组件视图、统计视图等。等级视图会根据 23 条规则给网页打分，从 A 到 F，A 是最高等级。组件视图能让你看到每个资源的具体情况，比如 URL、大小、读取时间等。统计视图则会展示页面元素在空缓存和使用缓存后的加载情况。通过这些信息，你就能清楚地知道网页在哪些方面存在性能问题。
? Yslow 的 23 项性能规则与优化建议
Yslow 的 23 条规则涵盖了网页性能优化的各个方面，咱们一条一条来看。
? 减少 HTTP 请求次数
这是提升网页性能的关键。一个页面如果有很多 HTTP 请求，用户第一次访问时就会等很久。怎么减少呢？可以合并图片、CSS、JS 文件。比如把多个 CSS 文件合成一个，这样就只需要一次 HTTP 请求。还有 CSS Sprites 技术，把多张背景图片整合到一张图片中，通过 CSS 的 background-position 属性来显示不同部分，也能减少请求次数。
? 使用 CDN
CDN 就是内容分发网络，它能把你的网站内容分散到多个地理位置的服务器上，让用户就近获取内容，加快加载速度。像网站上的静态资源，CSS、JS、图片等，都可以放到 CDN 上。不过要注意，CDN 的选择很重要，要选那些节点多、速度快的服务商。
? 避免空的 src 和 href
当 link 标签的 href 属性为空、script 标签的 src 属性为空时，浏览器会把当前页面的 URL 作为它们的属性值，这可能会导致页面内容被重复加载，浪费资源。所以在写代码的时候，一定要检查这些属性是否正确设置。
? 为文件头指定 Expires
Expires 头可以设置文件的过期时间，让浏览器缓存这些文件。下次访问时，就可以直接从缓存中读取，不用再发送 HTTP 请求。一般来说，CSS、JS、图片等静态资源都可以设置较长的过期时间。比如新浪微博的一个 CSS 文件，Expires 时间设置到了 2016 年，这样用户再次访问时就能快速加载。
? 使用 gzip 压缩内容
gzip 能压缩文本类型的响应，像 HTML、XML、JSON 等，大大减少数据量。服务器开启 gzip 压缩后，浏览器会自动解压，用户几乎感觉不到压缩和解压的过程，但加载速度却能提升很多。不过要注意，不是所有文件都适合 gzip 压缩，像图片、视频等二进制文件压缩效果可能不明显。
? 把 CSS 放到顶部
网页资源是从上往下加载的，把 CSS 放在顶部可以优先渲染页面，让用户感觉页面加载很快。如果 CSS 放在底部，页面可能会先显示无样式的内容，然后再突然变得美观，这会影响用户体验。
? 把 JS 放到底部
JS 加载时会阻塞后续资源的加载，所以把 JS 放在页面底部最后加载，可以减少对页面渲染的影响。现在很多框架都支持异步加载 JS，比如使用 async 或 defer 属性，这样可以进一步提高页面性能。
? 避免使用 CSS 表达式
CSS 表达式虽然功能强大，但会持续在页面上计算样式，影响性能。而且它只被 IE 支持，现在 IE 的使用率已经很低了，所以尽量不要使用。如果需要动态设置样式，可以考虑用 JavaScript 来实现。
? 将 CSS 和 JS 放到外部文件中
把 CSS 和 JS 放到外部文件中可以让浏览器缓存这些文件，提高后续页面的加载速度。不过，有时候为了减少 HTTP 请求，也会把一些小的 CSS 或 JS 代码直接写在页面里，这需要根据 PV 和 IP 的比例来权衡。
? 权衡 DNS 查找次数
DNS 查找次数过多会增加页面加载时间，但减少主机名又会减少并行下载的数量。IE 浏览器同一时刻只能从同一域名下载两个文件，所以像新浪这样的网站会使用多个二级域名来放图片，以提高下载速度。但域名过多也会增加 DNS 查找时间，一般建议使用 2 到 4 个域名。
? 精简 CSS 和 JS
精简 CSS 和 JS 可以减少文件大小，加快下载速度。可以使用压缩工具，去掉空格、回车等不必要的字符。现在很多前端构建工具，如 grunt、gulp 等，都能自动进行 CSS 和 JS 的压缩。
? 避免跳转
跳转，尤其是 301 和 302 跳转，会增加 HTTP 请求次数，延长页面加载时间。比如当 URL 本该有斜杠却被忽略时，服务器会返回 301 跳转。在服务器配置中，可以通过设置 rewrite 规则来避免这种情况。另外，跨域跳转可以使用 Alias 或 mod_rewrite 建立 CNAME 来替代。
? 删除重复的 JS 和 CSS
重复调用脚本或 CSS 不仅会增加 HTTP 请求，还会浪费服务器资源。在 IE 和 Firefox 中，不管脚本是否可缓存，重复运算 JavaScript 都会影响性能。所以在开发过程中，要仔细检查代码，避免重复引用。
? 配置 ETags
ETags 用来判断浏览器缓存里的元素是否和服务器上的一致，比 last-modified date 更精准。它综合了 Inode、MTime 和 Size 等参数，能更准确地判断文件是否有变化。在服务器集群中，可取后两个参数，使用 ETags 可以减少 Web 应用的带宽和负载。
? 可缓存的 AJAX
AJAX 请求虽然是异步的，但也会造成用户等待。在使用 AJAX 时，可以设置 cache:true，让浏览器缓存响应内容，这样下次请求相同数据时就可以直接从缓存中读取。
? 使用 GET 来完成 AJAX 请求
使用 XMLHttpRequest 时，POST 方法是两步走，先发送文件头，再发送数据，而 GET 方法更高效。所以在不需要提交大量数据的情况下，尽量使用 GET 方法来完成 AJAX 请求。
? 减少 DOM 元素数量
DOM 元素过多会增加浏览器的解析负担，影响页面性能。可以通过优化 HTML 结构，减少不必要的标签，使用更合适的标签来替代，比如用语义化标签代替 div。
? 避免 404 错误
404 错误不仅会浪费服务器资源，还会破坏浏览器的并行加载。比如外链的 CSS、JS 文件出现 404 时，浏览器会尝试在返回的内容中执行代码，这可能会导致页面崩溃。所以要定期检查网站的链接，及时修复失效的链接。
? 减少 Cookie 的大小
Cookie 会随着每个请求发送到服务器，所以 Cookie 越大，传输时间越长。要尽量减少 Cookie 中存储的数据，只存储必要的信息。
? 使用无 cookie 的域
静态资源，如 CSS、JS、图片等，可以放在无 cookie 的域下，这样客户端请求这些资源时就不会携带主域名的 Cookie，减少传输的数据量。
? 不要使用滤镜
IE 独有的 AlphaImageLoader 滤镜用于修正 PNG 图片的半透明效果，但它会终止内容的呈现，冻结浏览器，增加内存开支。现在可以使用 PNG8 格式来代替，或者在 IE7 以上版本中使用其他方法。
? 不要在 HTML 中缩放图片
如果需要的图片尺寸是 5050，就不要用一张 500500 的大图片，然后在 HTML 中缩放。这样会增加图片的下载时间，影响性能。应该提前将图片处理成合适的尺寸。
? 缩小 favicon.ico 并缓存
favicon.ico 虽然小，但如果处理不好也会影响性能。要尽量缩小它的尺寸，建议小于 1K，并且为它设置 Expires 头，让浏览器缓存它。
Yslow 的 23 条规则是网页性能优化的经典指南，虽然现在网页技术不断发展，但这些规则依然具有很强的指导意义。通过合理应用这些规则，可以显著提升网页的加载速度和用户体验。记住，优化是一个持续的过程，要不断关注网站的性能数据，根据实际情况进行调整。该文章由dudu123.com嘟嘟 ai 导航整理，嘟嘟 AI 导航汇集全网优质网址资源和最新优质 AI 工具。
