スマホが熱くなる？
メモリ管理と最適化の話

Canvas は「メモリ食い」だった

高画質な写真を Canvas に展開すると、想像以上にメモリを消費します。インフラのサーバーチューニングでは馴染みのあった「リソース管理」ですが、フロントエンドでも同じ問題が起きました。何度も写真を変更すると、ブラウザが重くなり、最悪クラッシュしてしまいます。

使い終わったら「URLを破棄」する

一番効いた対策は、画像を表示するために作った一時的なURL（Object URL）を、使い終わった瞬間に手動で削除することでした。

// 以前のURLがあれば、メモリから解放する
if (oldUrl) {
    URL.revokeObjectURL(oldUrl);
}

この revokeObjectURL を徹底することで、スマホのメモリ消費を劇的に抑えることができました。フロントエンドはユーザーの端末の力を借りて動くもの。そのリソースを大切に使うマナーこそが、プログラミングの基本なんだと再確認しました。