javascriptで処理の進捗を表示

公開 : 2025年06月23日

問題

javascriptで重たい処理を実行すると、処理が終了するまで描画が行われません（フリーズしたように見える）。
DOMの変更やcanvasの描画は負荷がかかるためなのか、ブラウザは最後に結果のみを表示します。
たとえプログラムの途中にinnerHTML = “50％”;と記述したとしても、実際に実行すると50％と表示されることはなく、処理が全て終わってから100％と表示されるだけです。
これでは意味がありません。なんとかして進捗を表示したい。

結論

こちらの記事に方法がありました。

[JavaScript] 画面の再描画を待つ・画面を強制的に再描画する – Qiita

requestAnimationFrameを2回呼ぶのがカギです。

方法

まず以下の定数repaintを定義します。

次に再描画をしたい場所をasyncをかけた関数で囲い、await付きでrepaintを呼び出すことで再描画がかかります。

やりすぎない

LED方向幕の再現でdrawImageを1000回超行う処理があり、1回ごとにrepaintをかけ％表示をしたことがありましたが、何もしないときと比べて5倍以上時間がかかりました。
そもそもrequestAnimationFrameはアニメーションを行うためのものであり再描画の間隔が1/60秒以下なら待機時間が発生するわけです。描画の負荷もかかります。基本的に再描画をかけないのが一番速いです。
処理を始める前に”処理しています…”と出すだけにするか、途中3、4回進捗を表示する位がいいのかもしれません。