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

【问题标题】：Can you store JavaScript and CSS files in localStorage to improve the performance of an online web app?您可以将 JavaScript 和 CSS 文件存储在 localStorage 中以提高在线 Web 应用程序的性能吗？
【发布时间】：2011-08-29 01:53:16
【问题描述】：

我正在开发一个 Web 应用程序，它的行为非常类似于适用于 iOS 和 Android 的本机应用程序。但是 Javascript 文件（jQuery + 我自己的）和 css 文件对于移动使用来说相当大，如果用户没有启用 3G，这会使应用程序加载缓慢。

因此我开始考虑离线存储这些文件。然而，除了 cache.manifest （据我所知，只有在没有互联网连接以启用离线使用时才会启动），我没有找到解决办法。理想情况下，我希望检查文件是否已被缓存/存储，如果没有，请使用它们，然后将它们存储以备下次使用。

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

编辑：

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

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

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

似乎从主屏幕打开和关闭和打开网络应用程序就像刷新一样，因此每次都会加载文件，即使它们是通过 cache.manifest 存储以供离线使用，并且文件'到期日期设定在遥远的未来。

编辑 2：

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

缓存控制 max-age=31536000，公共
有效期至格林威治标准时间 2012 年 5 月 18 日星期五 17:34:20
改变接受编码，用户代理
Content-Encoding gzip Keep-Alive timeout=2, max=98

【问题讨论】：

您仍然需要传输文件一次。它不是在很远的将来设置正确的缓存头并让服务器正确响应请求吗？
将可以被浏览器缓存的文件副本冗余地保存在存储中似乎是一个糟糕的设计理念——不是很干燥。
如果使用 javascript 可以做到这一点，我可以设置它，这样它只适用于从主屏幕打开应用程序时。在这种情况下，缓存似乎不起作用，因此我需要一个解决方案，因为我想加快用户的初始加载速度。
@kennebec：当然，但从 Marcus 的说法来看，听起来浏览器没有缓存这些文件。理想情况下，当然可以，但如果没有在 Apple/Google 找到工作，Marcus 对此无能为力。

标签： jquery ios local-storage offline web-applications

【解决方案1】：

应该有可能让浏览器缓存资产，如 javascript 包含（尽管最终这些指令可以被用户覆盖，可能不用担心）。有关缓存的速成课程，请参阅 here。特别看HTTP头：

Cache-Control: public

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

同时确保您的 javascript 包含已最小化，请参阅 here 了解有关加快速度的一般提示。

【讨论】：

与桌面浏览器相比，移动浏览器在缓存方面可能有点吝啬。例如，我认为原始 iPhone 的 Mobile Safari 在未压缩时不会缓存任何大小超过 20 KB 的文件。
我要读一下，谢谢。但是，我以仅加载索引页面的方式制作了 webapp，其余的全部通过 jQuery 和 AJAX 调用完成，没有任何后续页面。即 AJAX 调用，它加载用户配置文件数据并显示它。问题在于第一次初始加载。在 3G 和 Wifi 上，页面加载相对较快（仍然希望它更快，但主要需要通过优化来完成），但没有它会很慢。我还提供要保存在主屏幕上的应用程序，因此这种缓存必须以类似于 localstorage 用于存储用户登录信息的方式工作。
@MarcusJoe：我不明白。静态资产的请求方式无关紧要，如果它是相同的资产，那么它可以被缓存。另一方面，动态数据必须从服务器加载。没有缓存策略可以帮助您。
抱歉，我快速按下了回车键。对不起，如果这听起来令人困惑。我只想缓存静态的 js 和 css 文件。随后的 AJAX 调用当然都是动态的，不能/不会被缓存。这是关于 js 和 css 文件在 web 浏览器或主屏幕中加载时的初始加载。
@MarcusJoe：好吧。无论缓存策略是什么，您的资产都必须至少加载一次。缓存控制应该会有所帮助。

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案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 是不值得的。您不妨内联所有内容并将其保留在那里以获得最佳性能。

【讨论】：