「ハイパフォーマンスJavaScript」には新鮮な情報が詰まっています。
現在のWebはJavaScript無しには存在できないのではと思えるほど多くのJavaScripが使用されています。
最初のポイントはいかに素早くscriptを読込み実行するかになります。
教訓1
JavaScriptコードの実行はほかのフィルの読み込みをブロックする
HTMLにリンクされたJavaScriptのロードが開始されダウンロードが完了しその実行コードが完了するまで次のダウンロードが開始しない、という事実は驚きでした。
ダウンロード時間を短くするためにファイルサイズをできるだけコンパクトにすることは理解していましたが、その他のファイルのロードをブロックすることまでは恥ずかしながら知りませんでした。
<!DOCTYPE html> <html> <head> <title>Page Title</title> <script type="text/javascript" src='script1.js'></script> <script type="text/javascript" src='script2.js'></script> <script type="text/javascript" src='script3.js'></script> </head> <body> <div id='page'> <header> Logo </header> <article> Contents </article> </div> </body> </html> |
このようなHTMLソースの場合
script1.jsのダウンロードが完了しコードを実行するまで次のscript2.jsのダウンロードは始まりません。
当たり前ですが、script1.js以下のHTMLも読込まれず表示されません。
表示遅延が発生してしまいます。
何らかの対策が必要になります。
教訓2
ノンブロッキングパターン
ノンブロッキングなScriptロード方法が「ハイパフォーマンスJavaScript」には書かれています。
オリジナルコードの他にサードパーティのライブラリの紹介されていました。
LasyLoad
https://github.com/rgrove/lazyload
LABjs
LABjs : Loading And Blocking JavaScript
https://github.com/getify/LABjs
どれも動的にscriptタグを作成し外部JavaScriptのロードしています。
さらにダウンロード完了を待って初期関数を実行させることが可能です。
このアプローチをとることで読込みをブロックすることは無くなるようです。
教訓3
httpアクセスを最小限にする
「ノンブロッキングパターン」でブロック問題は解決できました。
ただ大量のJavaScriptファイルをロードすると同量の「httpアクセス」は発生します。
サーバーへのアクセスを最小にし過度の「httpアクセス」が起きないようにする配慮も必要になります。
地味なんですがファイルをまとめるのが有効な手段です。
jQueryとかprototype.jsも開発段階は複数のJavaScriptファイルに分かれています。
その方が開発管理がしやすいですから。
リリース時に1つのファイルにまとめられています。
同じことをしましょうね、って話です。
ピンバック: 超個人的メモ, JavaScriptの投稿リンクをまとめておく - イナヅマtvログ