您可以在localStorage中存储JavaScript和CSS文件，以提高在线Web应用程序的性能吗？

Question

我正在开发一个Web应用程序，它的行为非常类似于iOS和Android的本机应用程序。然而，Javascript文件（jQuery +我自己的）和css文件一起用于移动使用，如果用户没有启用3G，这会使应用程序加载速度变慢。

因此我开始考虑离线存储这些文件。然而，除了cache.manifest（据我所知，只有当没有互联网连接启用离线使用时才开始），我找不到这个。理想情况下，我想检查文件是否已经缓存/存储，如果没有，请使用它们，然后再存储它们。

这可能吗？这将减少加载我的应用程序的时间，因为索引文件本身非常小。我仍在努力通过优化减少文件，但在此期间这将有很大帮助。

EDIT:

只是为了提供更多的细节，对不起我以前不清楚。

我已经开始使用HTML5样板构建这个webapp，我的.htaccess文件包含所有JS和CSS文件头，有效期为1年。

但似乎从iOS主屏幕打开应用程序每次都会加载.js和.css文件，就像没有缓存时一样。在桌面或甚至iOS Safari Web浏览器上打开网站似乎确实以正确的方式缓存文件，因为Javascript和CSS中的更改仅在手动刷新页面后显示。

看起来打开和关闭以及从主屏幕打开网络应用程序充当刷新，因此每次加载文件，即使它们是通过cache.manifest存储以供离线使用，文件的到期日期是远远落后于未来。

EDIT 2:

以为我会包含文件的缓存标头。这些似乎没问题。

Cache-Control max-age = 31536000，public 2012年5月18日星期五17:34:20 GMT到期 改变接受编码，用户代理 Content-Encoding gzip Keep-Alive timeout = 2，max = 98

Answer 1

您应该调查此选项：https://developer.apple.com/library/archive/documentation/iPhone/Conceptual/SafariJSDatabaseGuide/OfflineApplicationCache/OfflineApplicationCache.html

Answer 2

应该可以让浏览器缓存像javascript包含的资产（虽然这些指令可能被用户覆盖，但可能不用担心）。有关缓存的崩溃课程，请参阅here。特别是看HTTP标头：

Cache-Control: public

这应该强制浏览器缓存资产。不确定这是否适用于会话，例如，如果浏览器已关闭并重新打开，但在用户首次访问您的站点时至少只会发出一个请求，并且在后续页面查看时不会再次请求。

另外，请确保您的javascript包含最小化，并查看here有关加快速度的一般提示。

Answer 3

iOS不会将资源缓存超过25k。 localStorage应该工作。

Answer 4

我也试图在没有运气的情况下完成这项工作。似乎唯一的方法是：

• 仅将AppCache用于图像
• 将所有CSS和JS内联到第一页
• 加载完所有内容后，运行一个JS脚本将每个脚本拉入localStorage
• 您可以通过cookie对其进行版本化，以确保用户拥有最新的副本

看看http://sunpig.com/martin/archives/2011/05/21/considerations-for-caching-resources-in-localstorage.html的实施想法！

我只有一半，但它已经比取决于appCache好多了。

编辑：请记住，这仅适用于多页面应用。如果您正在构建单页JS应用程序，我认为将其存储在localStorage中是不值得的。您也可以只是内联所有内容并将其保留在那里以获得最佳性能。