缓存HTML输出

Question

我非常确定我已经知道这个答案了，但我很想看看有没有人有其他想法。我们正在一个网站上进行大型菜单重新设计。我重新设计的一个重要事情就是尽可能减少页面下载时间。我所有的图像，CSS和JavaScript都被缓存，这很好。但是，我试图通过的部分是菜单的html编码，并且如果有方法可以在合理范围内在本地缓存。

作为一个方面说明，我喜欢以尽可能纯的CSS（对于SEO）做事情，因此这将包括将超级菜单直接输出到HTML页面。但同时，我知道如果页面需要几秒钟的时间才能下载顶部的html内容，那么我们可能也会在那里运行一些客户。也许最好的方法是让JavaScript输出菜单，但是然后遇到几个未启用Javascript的客户。

现在，菜单的页面大约为30K，我预计在重新设计时会翻一番，甚至更多。

你对这个问题有一些想法吗？你认为最好的解决方法是什么？

谢谢！

JMAX

Answer 1

老实说，一个元素的30K在这个时代是没有任何东西的，高速连接是常见的，浏览器根据需要有效地缓存。人们不会因为一两次而离开。这是当你有Flash电影预先加载或疯狂的自动启动视频，让人们匆匆恼火。

我有一个类似的应用程序，菜单可能是现在的双倍......让我补充说，这不是选择，它是我继承和必须保持的暂时。该菜单只是在无序列表中输出，然后使用Superfish和CSS根据需要进行样式设置。有一个初步的打击，但在此之后，缓存开始，我们很好去。即使这样疯狂，负载也不是过高。然而，导航它是一团糟。我强烈建议您不要让用户感到困惑，因为有太多的选择，特别是对于禁用和老用户而言，可能是UI障碍的大型菜单。当你贬低它时，“Web 2.0运动”背后的整个基础（我讨厌这个术语）是为了减少或掩盖复杂性。

如果您真的关心性能，请从您加载的内容开始。通过合并文件限制您的Javascript，特别是那些倾向于堆叠的小型Jquery文件。 HTTP请求会严重影响站点，尤其是因为它们最初独占了负载。同样，结合小型CSS文件并通过online tool优化其余部分。为减少图像加载，为图形创建精灵，以便加载一个文件而不是多个文件。 Here's a tut on Sprites和一个简单的谷歌搜索会给你几十个网站，将自动构建精灵和CSS。加载任何你可以从CDN中获得的东西，比如Jquery，Prototype等（希望每个站点只有一个框架，因为两个或者更多是不必要的）

如果你仍然失控，再看看你的图形。你可以利用纯CSS或通过CSS重复图片来进一步减少负载吗？你有没有优化所有的图形？你能调整设计来利用这些技巧吗？

毕竟，如果你根本无法改变菜单更友好，开始调查选项。但是，我怀疑在前几步中你会发现比在菜单上采取极端措施时更好的收益。

Answer 2

您既可以设置HTTP缓存生成菜单中的JavaScript代码的文件，或使用AJAX从另一个文件（具有长到期日期缓存设置一次）插入预先生成的HTML菜单。

这两个解决方案都需要javascript通过。除了IFRAME（yuck）外，我无法想象从HTTP流量中删除菜单的另一种方式。

虽然30k对于普通的HTML是巨大的 - 你真的需要这么庞大的导航结构吗？