你能否在localStorage中存储JavaScript和CSS文件来提高在线Web应用程序的性能?

我正在开发一个Web应用程序,这个应用程序非常像iOS和Android的原生应用程序。 然而,JavaScript文件(jQuery +我自己的)和css文件一起移动使用相当大,这使得应用程序加载速度缓慢,如果用户没有启用3G。

因此,我开始考虑离线存储这些文件。 然而,除了cache.manifest(在我的知识中只有在没有互联网连接才能脱机使用时才会使用)我找不到这个方法。 我最想要的是检查文件是否已经被caching/存储,如果没有,使用它们,然后将它们存储下一次。

这可能吗? 由于索引文件本身非常小,这将减less加载我的应用程序的时间。 我还在努力通过优化来减less文件的数量,但这同时会有很大的帮助。

编辑:

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

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

但是,似乎从iOS主屏幕打开应用程序每次加载.js和.css文件,就像他们没有被caching时一样。 在桌面上甚至在iOS Safari浏览器上打开网站似乎都以正确的方式caching文件,因为只有在手动刷新页面之后,才会显示Javascript和CSS的更改。

似乎打开和closures,并从主屏幕上打开Web应用程序充当刷新,因此,每次加载文件,即使他们通过caching.manifest离线使用,文件的到期date是远未来。

编辑2:

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

Cache-Control max-age = 31536000,public
有效期至2012年5月18日星期五17:34:20 GMT
不同的接受编码,用户代理
内容编码gzip Keep-Alive超时= 2,最大= 98

您应该调查此选项,然后: http : //developer.apple.com/library/safari/#documentation/iPhone/Conceptual/SafariJSDatabaseGuide/OfflineApplicationCache/OfflineApplicationCache.html

应该有可能让浏览器caching像javascript包括的资产(尽pipe这些指令可能会被用户覆盖,可能不需要担心)。 在这里看到关于caching的崩溃过程。 特别是看到HTTP头:

Cache-Control: public 

这应该强制浏览器caching资产。 不知道这是否可以在会话中使用,例如,如果浏览器closures并重新打开,但是当用户第一次访问您的网站时,至less只有一个请求会被创build,并且在随后的页面浏览中不会被重新请求。

还要确保你的JavaScript包括最小化,并在这里看到有关加快速度的一般技巧。

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

我也一直在试图完成这个没有任何运气。 这似乎是唯一的方法来做到这一点如下:

  • 仅将AppCache用于图像
  • 让所有的CSS和JS内联在第一页上
  • 一旦所有东西都加载完毕,运行一个JS脚本将每个脚本拖入localStorage
  • 您可以通过Cookie对其进行版本控制,以确保用户拥有最新的副本

请参阅http://sunpig.com/martin/archives/2011/05/21/considerations-for-caching-resources-in-localstorage.html了解实施的想法!

我只是一半,但它已经比取决于appCache更好的工作。

编辑:请记住,这只适用于多页面的应用程序。 如果你正在构build一个单一的JS应用程序,我不认为这是值得努力存储在localStorage。 你可能只是内联一切,并保持在那里以获得最佳性能。