雅虎“YSlow - 23 条规则”详尽阐释

myzbx 2025-06-13 15:35 30 浏览

以下乃是雅虎“YSlow - 23 条规则”的详尽阐释，旨在优化网页之性能以及用户之体验，乃是结合技术之原理与实践之方法梳理而成：

1. 减少 HTTP 请求次数

说明：每一次 HTTP 请求皆会增添延迟以及资源之消耗。将图片（CSS Sprites）、脚本（JS）与样式表（CSS）予以合并，能够显著降低请求之次数。譬如，将众多小图标合并成为一张雪碧图，借由 background-position 进行定位展示。

2. 使用 CDN（内容分发网络）

说明：CDN 凭借就近缓存、智能路由以及负载均衡来加速内容之传输。例如，将静态资源（JS/CSS/图片）托管至 CDN 节点（诸如 Google CDN），以削减用户与源站点之间的物理距离所导致的延迟。

3. 避免空的 src 和 href

说明：空的 src（诸如 <img src="">）或者 href（诸如 <link href="">）将会触发浏览器加载当前页面之 URL，致使无效之请求。解决之方法涵盖填充占位符或者运用 javascript:void(0)。

4. 为文件头指定 Expires

说明：通过设定 HTTP 头 Expires 或者 Cache-Control，使得静态资源能够被缓存，减少重复之请求。例如，将图片设定为永不过期，对 CSS/JS 设定合理的缓存时间。

5. 使用 Gzip 压缩内容

说明：对文本类文件（HTML/CSS/JS/JSON）进行压缩能够减少 70% 以上的传输体积。需要在服务器配置当中启用 Gzip 模块（例如 Apache 的 mod_deflate）。

6. 把 CSS 放到顶部

说明：将 CSS 放置于 <head> 之中能够避免浏览器渲染之阻塞，防止出现无样式内容的“白屏”之现象。浏览器需首先加载 CSS 而后逐步进行页面之渲染。

7. 把 JS 放到底部

说明：JS 之加载会阻塞其他资源之下载，导致页面渲染产生延迟。将 <script> 标签放置于 <body> 之末尾或者使用 defer 属性能够优化加载之顺序。

8. 避免使用 CSS 表达式

说明：CSS 表达式（如 expression(document.body.clientWidth)）会频繁触发重绘，致使性能降低。宜改用 JavaScript 来掌控动态样式。

9. 将 CSS 和 JS 放到外部文件

说明：外部文件能够被浏览器缓存，从而减少重复下载。然而，需权衡 HTTP 请求次数，高 PV 页面可将关键的 CSS/JS 进行内联。

10. 权衡 DNS 查找次数

说明：减少域名的数量能够降低 DNS 解析的时间，但需平衡并行下载的限制（例如 IE 每个域名仅支持 2 个并发）。通常采用二级域名来拆分静态资源。

11. 精简 CSS 和 JS

说明：删除注释、空格以及冗余代码，运用工具（诸如 UglifyJS、CSSNano）对文件进行压缩，以缩减文件的体积。

12. 避免跳转

说明：URL 重定向（如 http://example.com → http://www.example.com）会增加延迟。采用 CNAME 或者服务器配置（例如 Apache mod_rewrite）直接指向目标地址。

13. 删除重复的 JS 和 CSS

说明：重复的脚本会增加解析的时间，甚至引发逻辑错误。通过模块化管理和构建工具（例如 Webpack）来去除重复。

14. 配置 ETags

说明：ETag 凭借文件的唯一标识（例如 Inode 和修改时间）来验证缓存的有效性，适用于集群环境。但在多服务器场景下需谨慎配置，以规避校验冲突。

15. 可缓存的 AJAX

说明：为 AJAX 响应添加缓存头，避免重复请求相同的数据。例如，GET 请求的结果可缓存，而 POST 请求默认不可缓存。

16. 使用 GET 完成 AJAX 请求

说明：GET 请求可被缓存且为单次传输，而 POST 需先发送 Header 再发送 Body，从而增加延迟。

17. 减少 DOM 元素数量

说明：过多的 DOM 元素（例如嵌套的 <div>）会拖慢渲染和脚本的执行。使用语义化标签（例如 <article>、<section>）来简化结构。

18. 避免 404 错误

说明：无效的请求（诸如缺失的 JS 文件）会破坏页面的功能，而且浏览器或许会尝试将 404 响应解析为脚本，进而引发错误。

19. 减少 Cookie 大小

说明：Cookie 会随每一个请求进行发送，若其过大则会增添传输的开销。对于静态资源，使用无 Cookie 的域名（例如 static.example.com）予以隔离。

20. 使用无 Cookie 的域

说明：静态资源服务器（例如 CDN）不携带 Cookie，从而减少请求头的体积。例如，Yahoo! 运用 yimg.com 来托管图片。

21. 不要使用滤镜

说明：IE 的 AlphaImageLoader 滤镜（例如 PNG 透明）会阻塞渲染，并且增加内存的消耗。改以 PNG8 或者 SVG 来替代。

22. 不要在 HTML 中缩放图片

说明：通过 <img width="100"> 来缩放大图会浪费带宽以及处理的时间。直接提供适配尺寸的图片。

23. 缩小 favicon.ico 并缓存

说明：favicon 默认为会被请求，需要压缩为小文件（例如 1KB 以下），并设置长期缓存，以避免重复下载。

总结

YSlow - 23 条规则从“请求优化”、“缓存策略”、“资源管理”这三个维度提升网页的性能。开发者能够结合工具（例如 YSlow 插件、PageSpeed Insights）进行检测，并具有针对性地优化。

JS 注释

上一篇：JavaScript 运算符（js ~运算符）
下一篇：为什么要用JMH?何时应该用?（日本jmh地面分析图网站）

雅虎“YSlow - 23 条规则”详尽阐释

1. 减少 HTTP 请求次数

2. 使用 CDN（内容分发网络）

3. 避免空的 src 和 href

4. 为文件头指定 Expires

5. 使用 Gzip 压缩内容

6. 把 CSS 放到顶部

7. 把 JS 放到底部

8. 避免使用 CSS 表达式

9. 将 CSS 和 JS 放到外部文件

10. 权衡 DNS 查找次数

11. 精简 CSS 和 JS

12. 避免跳转

13. 删除重复的 JS 和 CSS

14. 配置 ETags

15. 可缓存的 AJAX

16. 使用 GET 完成 AJAX 请求

17. 减少 DOM 元素数量

18. 避免 404 错误

19. 减少 Cookie 大小

20. 使用无 Cookie 的域

21. 不要使用滤镜

22. 不要在 HTML 中缩放图片

23. 缩小 favicon.ico 并缓存

总结

相关推荐

使用VSCode模板提高Vue开发效率（vscode开发vue3）

吃透 Vue 项目开发实践|16个方面深入前端工程化开发技巧【下】

移动前端重构实战系列:5-7章（前端移动端主要技术有哪些）

说下你的vue项目的目录结构，该怎么划分?

这么牛逼的cursor功能，赶紧用起来

用上Vue3，你真的变了吗?（vue3 key）

8.7k star，一款超炫酷的动态可视化大屏项目

20个免费音乐音效下载网站，无版权素材商业影片也可用

comfyui安装MimicMotion扩展，AI跳舞动作模仿

什么是“恒定光圈”，什么是“浮动光圈”?-摄影早自习第331