1

我正在研究性能极其受限的设备。由于 AJAX 请求的开销，我打算在浏览器中积极缓存文本和图像资源，但我需要将每个设备的缓存大小配置为低至1MB文本和9MB图像的大小——对于多设备来说是一个很大的挑战。屏幕，图形应用程序。

因为设备很容易达到内存限制，所以我必须非常谨慎地管理应用程序的大小：代码文件大小、并发 HTTP 请求数、事件调度时的 JS 处理器周期数、限制 CSS 回流等。我今天的问题是如何为文本资产和图像开发大小受限的缓存。

对于文本，我使用对象和近似大小滚动了自己的缓存。应用程序手动获取/设置缓存条目。在达到可配置的上限时，类垃圾会自行收集 from to大小，为最后访问的属性赋予权重（即，如果最近访问过某些内容，则第一次跳过收集该对象）。JSON.encode().length'string'.lengthgcLimitgcTarget

对于图像，我打算预加载界面元素，让浏览器通过删除 DOM 元素并从不持久存储Image()对象来处理垃圾收集本身。对于预加载，我可能会再次推出自己的预加载 - 我有示例可以模仿，例如 FiNGAHOLiC 的 ImgPreloader 和this。我需要记住诸如“下载窗口大小”和“最大缓存请求”之类的功能，以确保我不会无意中使设备过载。

在如此受限的环境中工作是一个巨大的挑战，并且像 Backbone 这样的常见框架不支持“最大集合大小”。在 SO 的其他地方，用户引用5MB了 HTML5 localStorage 的限制，但我的目标不是会话持久性，所以我看不到好处。

我不禁觉得可能有更好的解决方案。想法？

编辑：@Xotic750：感谢您对 IndexedDB 的认可。遗憾的是，这个应用程序是基于 Opera/Presto 构建的标准网页。更好的是，该平台不提供持久性。岩石和坚硬的地方：-/。

4

2 回答 2

1

如果应用程序是浏览器扩展（您没有提及您的应用程序是什么），则localStorage 和 sessionStorage ( DOM Storage ) 限制不适用（或可以被覆盖）。

localStorage 是持久的

sessionStorage 是会话的

主意

看一下IndexedDB，虽然还没有得到广泛支持，但它更加灵活。

此外，对 Chrome 存储的一些参考

管理 HTML5 离线存储

chrome.storage

于 2013-05-17T00:04:44.960 回答
0

对于大多数应用程序（游戏、繁重的动画或闪存除外）而言，即使在低功率设备上，使用现代 javascript 引擎 cpu/gpu 性能也不是问题，所以我怀疑您的主要问题是内存和 io。优化一个通常会损害另一个，但我怀疑以下问题将是您的主要关注点。

我不确定您是否可以控制浏览器的缓存使用情况。您可以使用您建议的方法限制 javascript 应用程序占用的内存，但浏览器仍然会自己做，这可能是内存方面的主要问题。通过创建自己的缓存，您实际上可能会复制已经被浏览器缓存的数据，从而加剧内存问题。浏览器（除非您使用一些晦涩难懂的东西）通常会比 javascript 更好地完成缓存工作。无论如何，我强烈建议让浏览器处理垃圾收集，因为 javascript 中没有办法真正强制浏览器释放内存（它们在需要时进行垃圾收集，而不是在您告诉它们时）。您可以控制设备上使用的浏览器吗？如果你这样做了，那么改变它可能是减少内存使用的最佳方法（你也可以限制浏览器缓存的大小吗？）。

对于 ajax 请求，请确保您完全理解 GET 和 POST 之间的区别，因为这对浏览器上的缓存和在网络上路由消息的代理有很大影响（因此也会影响您的应用程序的逻辑）。看看你是否可以通过将它们组合在一起来最小化请求的数量（JSON 在这里有帮助）。AJAX 请求的问题通常是延迟而不是带宽（但不要走得太远，因为大多数浏览器可以同时执行多个请求）。确保您构建您的 ajax 管理器以允许对请求进行优先级排序（即，影响用户所见内容的内容优先于预加载，而预加载优先于分析 - 一半的网络有一个谷歌分析调用，这是在页面加载之后发生的第一件事，甚至在广告之前和其他内容已加载）。

除此之外，我建议图像可能是内存问题的主要贡献者（我怀疑代码大小甚至寄存器，但您应该确保代码最小化，例如 google 关闭）。将图像分辨率降低到最低限度并尝试使用文件格式（例如，对于某些图像（卡通、徽标、图标），gif 或 png 可能比 jpeg 小得多，但对于其他图像（照片、渐变）则要大得多。

您的应用程序中 10MB 的缓存可能听起来很小，但与大多数应用程序相比，它实际上是巨大的。大多数将缓存留给浏览器（无论如何，无论您是否愿意，浏览器都可能仍会缓存数据）。

您提到 Image 对象，这表明您正在使用画布。如果您创建一个新的画布来存储图像（之后您可以丢弃 Image 对象），则会显着提高速度。您可以将此画布用作以后需要复制到画布的任何图像数据的源，并且由于不需要在数据类型之间进行转换，因此速度要快得多。鉴于画布操作通常在一帧中发生多次，这可能是一个显着的提升。

最后一点 - 不要使用为桌面环境开发的框架/库。要优化性能（无论是速度还是内存），您需要了解每一行代码。查看库的源代码（许多库有一些非常聪明的优化代码），但假设一般来说，您是他们未优化的特殊情况。

于 2013-05-17T00:19:36.240 回答