你了解雅虎前端优化的35条军规吗？你能说上几条？

我知道雅虎前端优化的35条军规（实际上后来扩展到36条，也有人说是34条，核心内容相似）。我能说上几条，并解释其背后的原理：

  1. 减少 HTTP 请求: 这是最重要的一条。每次请求都会产生网络延迟，包括 DNS 查询、建立连接、SSL 握手等。减少请求次数可以显著提高页面加载速度。合并CSS和JS文件，使用CSS Sprites，内联图片（Data URI）等都是减少HTTP请求的有效方法。

  2. 使用内容分发网络 (CDN): CDN 将静态资源缓存到全球各地的服务器上，用户可以从离他们最近的服务器获取资源，从而减少延迟。

  3. 添加 Expires 头: 通过设置 Expires 头，告诉浏览器可以将静态资源缓存到本地，避免重复下载。Cache-Control: max-age 也是类似的机制，更推荐使用这种方式。

  4. 压缩组件: 使用 Gzip 压缩 HTML、CSS、JavaScript 等文本资源，可以显著减少文件大小，从而加快下载速度。

  5. 将样式表放在顶部: 将 CSS 放在 <head> 中，可以使页面逐步渲染，避免出现“白屏”现象。

  6. 将脚本放在底部: JavaScript 会阻塞页面渲染，因此应将脚本放在 <body> 的底部，或者使用 defer 或 async 属性，避免阻塞页面加载。

  7. 避免 CSS 表达式: CSS 表达式会降低渲染性能，应该尽量避免使用。

  8. 使用外部 JavaScript 和 CSS: 外部文件可以被浏览器缓存，从而减少后续页面加载时间。

  9. 减少 DNS 查找: 减少域名可以减少 DNS 查询次数，从而提高页面加载速度。

  10. 精简 JavaScript: 移除不必要的空格、注释等，可以减小文件大小，提高下载速度。可以使用工具例如UglifyJS或Terser来完成。

  11. 避免重定向: 重定向会增加一次额外的 HTTP 请求，应该尽量避免。

  12. 移除重复脚本: 重复的脚本会增加下载时间和解析时间，应该确保页面中没有重复的脚本。

  13. 配置 ETag: ETag (Entity Tag) 是一个资源的唯一标识符。浏览器可以使用 ETag 来判断资源是否已缓存，避免重复下载。

这只是其中一部分，还有其他优化策略，例如避免 404 错误，使用 GET 请求 Ajax，减少 DOM 元素数量，避免使用 iframe 等。 需要根据具体情况选择合适的优化策略。 现在的前端优化手段也在不断发展，有些规则的优先级有所变化，但其核心思想仍然适用。

posted @ 2024-11-25 09:18  王铁柱6  阅读(36)  评论(0)    收藏  举报