频繁使用 localStorage 会减慢我的网站速度吗？答案

【问题标题】：Can localStorage slow down my website when used frequently?频繁使用 localStorage 会减慢我的网站速度吗？
【发布时间】：2014-07-03 20:23:30
【问题描述】：

我正在开发一个 HTML5 游戏，我需要知道频繁更新 localStorage 属性是否会降低页面速度。

我实际上将我的英雄位置存储在四个 localStorage 属性中（两个用于实际位置，两个用于在碰撞检测系统中使用的过去位置）并每隔 1 秒更新一次，但我想以 60 fps 更新它以保存每个英雄动作。

在该频率下使用 localStorage 会导致性能问题吗？

【问题讨论】：

jsperf 是您的解决方案
你在存储字符串吗？因为否则您将不得不额外执行 JSON.parse 或 stringify。我认为你也应该被考虑在内。此外，如果您的播放器位置变化太快，您可以跳过此步骤并存储下一个。

标签： javascript html canvas local-storage

【解决方案1】：

本地存储将数据存储在用户的硬盘上。读取和写入硬盘的时间比写入 RAM 的时间长。

从中得出的结论是，您可以通过在启动时从本地存储读取并仅在用户注销时写入来优化性能。

现在，这种优化是否会显着影响您的项目是您必须弄清楚的事情，正如 R3tep 所说，http://jsperf.com/ 是一个很好的解决方案。

不过，我的建议是无论如何都要进行优化，只是因为它不太“令人满意”，我猜，让程序运行得比它没有充分理由的速度慢。

【讨论】：

大多数时候用户不会注销而是关闭标签或浏览器。此解决方案不适用于 web，标签是 js 和 html 不是移动应用程序。
“过早的优化是万恶之源”。我建议不要仅仅因为它“令人满意”而优化。
盲目听从建议更糟糕。如果微优化真的很容易且可预测，那么忽略该优化有什么逻辑？我认为这里的一个更好的短语是“视情况而定”。

【解决方案2】：

将您的数据保存到对象 {} 并将其保存到 locatlStorage 然后使用 I/O 不活动或当用户离开时（onunload 事件）：

var DATA = {},
    syncTimer;

function syncFunction () {
    localStorage.set('myData',JSON.stringify(DATA));
}


function someHandler() {
    // some handler that change your DATA
    // which can be called many times per second

    //if calling many times, data will not sync
    if (syncTimer) {
        clearTimeout(syncTimer);
    }

    //change data
    DATA.somefield = 'some data';

    //set timer if data not changed - save it
    syncTimer = setTimeout(syncFunction, 100)
}

window.onunload = syncFunction;

附： Test 保存到 var 并保存到存储。存储同步更昂贵。

【讨论】：

我投了反对票，因为问题是关于性能，而不是策略。此答案侧重于策略。