JavaScript による入力項目無効設定の高速化
仕事で、JavaScript を使用して画面内の入力項目を無効にする処理を書きました。最初は以下のような感じです。
※説明を簡単にするために input タグのみを処理対象としています。
var tags = document.all.tags("input"); for (i=0; i<tags.length; i++) { tags[i].disabled = true; }
ためしに動かしたときは、上記内容で特に問題なく動作していました。
が、対象となる input タグの個数が増えると、急激に処理に時間がかかるようになってしまいました。
入力タグを無効にしているだけなのですが、300個ぐらいで40秒〜1分近く時間がかかってしまいます。
どうやら、type="text" や type="password" の入力タグの有効・無効を切り替えるのが遅いようです。なので、切り替えずに、無効状態の入力タグと入れ替えてみました。
var elements = document.getElementsByTagName("input"); for (i=0; i<elements.length; i++) { var oldElement = elements[i]; var parent = oldElement.parentNode; var newElement = oldElement.cloneNode(true); newElement.setAttribute("disabled", true); parent.replaceChild(newElement, oldElement); }
たったコレだけのことなのですが、劇的に速くなり、3秒ぐらいで処理が終わるようになりました。
フォーム部品として存在している状態のタグに対して、有効・無効を切り替える場合は、何らかのチェック処理が都度行なわれてしまって遅いのではないかと思います。
そこで、DOM の要素としてあらかじめ disable="true" の属性を持つ要素を作っておき、それを document に追加することで高速化できたのではないかと。
裏付けが何もないので、推測でしかありませんが。
JavaScript は、何気ないコードでものすごい速度差が出ることを実感。