我很确定我已经知道这个问题的答案，但我很想看看是否有人有其他想法。我们正在开发一个网站，以包括大型菜单的重大重新设计。我在重新设计中最重要的事情之一是尽可能减少页面下载时间。我所有的图像、css 和 javascript 都被缓存了，这很好。但是，我正在尝试解决的部分是菜单的 html 编码，以及是否有办法在合理的范围内进行本地缓存。
附带说明，我喜欢尽可能使用纯 CSS（用于 SEO），因此包括将大型菜单直接输出到 HTML 页面。但同时，我知道如果页面下载顶部的 html 内容需要几秒钟的时间，那么，我们可能也会在那里运行一些客户。也许最好的办法是让 JavaScript 输出菜单，但随后你会遇到几个没有启用 Javascript 的客户。
目前，菜单页面约为 30K，我预计在重新设计时会翻倍甚至更多。
您对这个问题有什么想法吗？您认为解决此问题的最佳方法是什么？
谢谢！！
JMax
【问题讨论】：
标签： javascript html css caching
老实说，在当今时代，一个元素 30K 根本不算什么，高速连接很常见，浏览器会根据需要进行有效缓存。人们不会因为一两秒钟而离开。当您有预加载的 Flash 电影或疯狂的自动启动视频时，人们会急忙感到恼火。
我有一个类似的应用程序，其菜单可能是现在的两倍...让我补充一下，这不是自愿的，它是我继承的，必须暂时维护。菜单以无序列表的形式简单地输出，然后我根据需要使用 Superfish 和 CSS 进行样式设置。有一个初步的成功，但在那之后，缓存开始了，我们就可以开始了。即使它很疯狂，负载也不会令人望而却步。然而，导航它是一团糟。我强烈建议不要将您的用户与如此多的选择混淆，尤其是在可能成为残疾和老年用户的 UI 障碍的大型菜单上。归根结底，“Web 2.0 运动”（我讨厌这个词）背后的全部基础就是尽量减少或掩盖复杂性。
如果您真的很关心性能，请从您正在加载的内容开始。通过组合文件来限制你的 Javascript，尤其是那些容易堆积起来的小型 Jquery 文件。 HTTP 请求会严重影响站点，尤其是因为它们最初垄断了负载。同样，合并小的 CSS 文件并通过online tool 优化其余文件。为了减少图像负载，为您的图形创建精灵，这样您就可以加载一个文件而不是多个文件。 Here's a tut on Sprites 和一个简单的谷歌搜索将为您提供数十个站点，这些站点将自动构建 sprite 和 css。可以从 CDN 加载任何内容，例如 Jquery、Prototype 等（希望每个站点只有一个框架，因为不需要两个或更多）
如果您仍然无法控制，请再看一遍您的图形。您能否利用纯 CSS 或通过 CSS 重复图像来进一步减少负载？你优化了所有的图形吗？您能否调整设计以利用这些技巧？
毕竟，如果您根本无法将菜单更改为更友好，请开始研究选项。不过，我怀疑与在菜单上采取极端措施相比，您会在前几个步骤中找到更好的收益。
【讨论】：
您可以为生成菜单的 javascript 代码文件设置 HTTP 缓存，或使用 ajax 从另一个文件插入预先生成的 HTML 菜单（同样在缓存中设置长到期日期）。
这两种解决方案都需要通过 javascript。除了 IFRAME（糟糕）之外，我想不出另一种从 HTTP 流量中删除菜单的方法。
30k 对于纯 HTML 来说是巨大的——你真的需要这么大的导航结构吗？
【讨论】：