雅虎“YSlow - 23 条规则”详尽阐释
myzbx 2025-06-13 15:35 6 浏览
以下乃是雅虎“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）进行检测，并具有针对性地优化。
相关推荐
- vue 基础-组件中事件的触发和监听
-
前言《vue基础》系列是再次回炉vue记的笔记，除了官网那部分知识点外，还会加入自己的一些理解。（里面会有部分和官网相同的文案，有经验的同学择感兴趣的阅读）vue中单纯的事件调用，你一定不陌生...
- JMH基准测试和JMH-Visual-chart可视化
-
原文地址：https://github.com/Sayi/sayi.github.com/issues/68如何度量一段代码的性能，换种实现方式会有更佳的性能表现吗？你或许想知道fastjson是否正...
- 一文轻松看懂丰田汽车的电路图（丰田车电路图识读技巧）
-
丰田汽车电路图符号、含义丰田汽车电路图识读说明电路图中字母是注释标号，其各部分的含义如下：注释标号A：表示系统标题，在电路图上方用横线划分，区域内用文字和系统符号表示下方电路系统的名称。注释标号B：表...
- 杭州高级中学发文言文版校庆公告引热议——全文932字，74处注释
-
阅读提示校方回应：我们期待以这种‘复古’的方式引起公众注意，也算是为树立起大众的文化自信、唤起大众对传统文化的关注作出一点贡献。5月14日，杭州高级中学官方微信发布了一篇文言文版的校庆公告。几个小...
- Python 和 JS 有什么相似?（python和js哪个快）
-
Python是一门运用很广泛的语言，自动化脚本、爬虫，甚至在深度学习领域也都有Python的身影。作为一名前端开发者，也了解ES6中的很多特性借鉴自Python(比如默认参数、解构赋值、...
- 阿里卖家 Flutter for Web 工程实践
-
作者：马坤乐(坤吾)Flutter自2015年初次亮相以来，经过了多年的发展已经相当成熟，在阿里、美团、拼多多等互联网公司都有广泛的应用。在ICBU阿里卖家上90+%的新业务使用Flu...
- 诗经275思文押韵、注释、古音、今韵
-
诗经275-1思文押韵（备注：□=非韵、■=i韵、●=o/u韵、◆=ng韵、=i/o二象性）「」1.思文后稷，克配彼天。立我烝民，莫菲尔极。贻我来牟，帝命率育。无此疆尔界，陈常于时夏。□□□■，...
- SolidWorks中常用命令快捷键（solidworks有哪些快捷键）
-
1.A：中心线2.B：镜向3.C：画圆4.D：智能标柱尺寸5.E：删除6.F：草图倒圆角7.G：画直线8.H：从装配制作工程9.I：等距实体10.J：从装配制作装配11.K：多边形12.L：延伸13....
- 第一章、TS语言简介（tsl语言）
-
TypeScript（简称TS）是微软公司开发的一种基于JavaScript（简称JS）语言的编程语言。它的目的并不是创造一种全新语言，而是增强JavaScript的功能，使其更适合多人合...
- 为什么要用JMH?何时应该用?（日本jmh地面分析图网站）
-
if快还是switch快？HashMap的初始化size要不要指定，指定之后性能可以提高多少？各种序列化方法哪个耗时更短？无论出自何种原因需要进行性能评估，量化指标总是必要的。在大部分场合...
- 雅虎“YSlow - 23 条规则”详尽阐释
-
以下乃是雅虎“YSlow-23条规则”的详尽阐释，旨在优化网页之性能以及用户之体验，乃是结合技术之原理与实践之方法梳理而成：1.减少HTTP请求次数说明：每一次HTTP请求皆会增添延迟...
- JavaScript 运算符（js ~运算符）
-
JavaScript运算符JS变量JS算数JavaScript运算符实例向变量赋值，并把它们相加：varx=7;//向x赋值5vary=8;//向y赋值2...
- 在Notebook中使用Sublime Text 快捷键
-
编程派微信号：codingpy前几天，我在公众号上发布了两篇译文，对JupyterNotebook做了一些基础性的介绍。虽然说比较基础，而且第二篇阅读量并不高，但是我认为对于其他对于Noteb...
- 晨光静好时!2 道 JS 与 TS 面试题解析，开启惬意学习日
-
当第一缕晨光温柔地唤醒窗台的绿植，泡上一杯清香四溢的茉莉花茶，坐在洒满阳光的角落。此刻，放下对面试的焦虑，让我们像聊生活趣事般，轻松拆解两道JavaScript和TypeScript的高频面试...
- 2024年CSPJ题目解析，语法基本功>算法!
-
前言：每次有家长来找我们咨询报课，说孩子学了一年了，竞赛成绩不理想，问怎么才能强化，提升，我们经过一番询问，发现这类孩子普遍都是在算法上已经花了非常多的时间了，但是语法根本不过关。对这种孩子我们普遍建...
- 一周热门
- 最近发表
- 标签列表
-
- HTML 简介 (30)
- HTML 响应式设计 (31)
- HTML URL 编码 (32)
- HTML Web 服务器 (31)
- HTML 表单属性 (32)
- HTML 音频 (31)
- HTML5 支持 (33)
- HTML API (36)
- HTML 总结 (32)
- HTML 全局属性 (32)
- HTML 事件 (31)
- HTML 画布 (32)
- HTTP 方法 (30)
- 键盘快捷键 (30)
- CSS 语法 (35)
- CSS 选择器 (30)
- CSS 轮廓宽度 (31)
- CSS 谷歌字体 (33)
- CSS 链接 (31)
- CSS 定位 (31)
- CSS 图片库 (32)
- CSS 图像精灵 (31)
- SVG 文本 (32)
- 时钟启动 (33)
- HTML 游戏 (34)