JavaScriptのパフォーマンスを改善するベストプラクティス7

現代のウェブページにおいて、JavaScriptはもはや欠かせないパーツとなっています。ウェブをより動的に仕上げてくれますが、一方でユーザー側のブラウザや環境に依存するという点が問題となります。JavaScript次第で、ユーザー体験を損なってしまうことがあるのです。今回はJavaScriptのパフォーマンスを改善するベストプラクティスを7個ご紹介します。より速く快適なページ作りに、お役立てください。

1. HTTP/2を使う

HTTP/2は最新のHTTPプロトコルで、JavaScriptだけでなくサイト全体のパフォーマンス改善に効果的です。複数のリクエストとレスポンスを一度に送受信できるという強力な機能を備えています。

2. ポインタの参照を使う

インスタンス化中にブラウザ内オブジェクトをポインタ参照で保持することにより、DOMの処理を削減できます。DOMに変更が起こらない場合、必要なDOMもしくはjQueryオブジェクトへの参照を保持しておくことで、スピードアップが図れます。

3. HTMLを小さくする

DOMオブジェクトの変更にかかる時間は、HTMLの複雑さに大きく左右されます。もしアプリのHTMLを半分にできれば、DOMのスピードが2倍になります。ここまで削減するのは大変ですが、まずは不要な<div>や<span>タグを削除するところから始めましょう。

4. document.getElementById()を使用する

jQueryを使えば、タグやクラスを元に特定のセレクタを作成できます。しかしこのアプローチでは、jQueryが何度かDOMの要素をループして、条件に合うものを見つける処理が必要です。かわりに、document.getElementById()を使うことで処理が高速化されます。

// With JQuery
var button = jQuery('body div.window > div.minimize-button:nth-child(3)')[0];

// With document.getElementById()
var button = document.getElementById('window-minimize-button');

5. DOMの変更をまとめる

DOMに施す変更をまとめることで、レンダリング速度を改善できます。スタイルの変更を行う場合には、一度にすべての変更を適用するよう仕上げてみましょう。

6. バッファーを使う

スクロール可能なDIVがある場合、バッファーを使って見えなくなっている部分をDOMから逃がすことができます。メモリ削減にもつながる技です。

7. ファイルを圧縮する

GzipやBrotliなどで、JavaScriptファイルを圧縮しましょう。ファイルが小さければ、それだけダウンロード時間が早くなり、パフォーマンスの向上が期待できます。

まとめ

今回ご紹介した7つのベストプラクティスは、それぞれがもたらす効果は小さいですが、集まれば大きな改善をもたらします。納期に追われながらでは全てを実践するのは難しいかもしれませんが、少しずつ実践していけば、パフォーマンス問題に直面することは減っていくでしょう。知識を蓄積し、ベストプラクティスが自然に行えるよう訓練していきましょう。

※この記事は20 Best Practices for Improving JavaScript Performanceを翻訳・再構成したものです。