[TROUBLE 67] JavaScriptライブラリを多用したらなかなかページが表示されない | デザインってオモシロイ -MdN Design Interactive-

[TROUBLE 67] JavaScriptライブラリを多用したらなかなかページが表示されない

2019.1.19 SAT

日々のデザイン現場で発生する問題・難題を解決します!

WEB制作トラブル速戦即決術! 第13回


[TROUBLE 67]
CSSトラブル
JavaScriptライブラリを多用したら
なかなかページが表示されない

文=こもりまさあき

A. JavaScriptの読み込みを最後にする

JavaScriptライブラリを用いて構築したWebページがなかなか表示されない問題は、head要素内でのライブラリの読み込み指示がその一因となる。ブロードバンド環境だけで確認していると気づきにくいが、script要素を使った複数のライブラリを読み込む指示はデータの並列ダウンロードの妨げになり、それ以降のページ構成要素の読み込みが遅くなる結果を引き起こす。それを解消するには、</body>の直前で読み込ませるとよい。

head要素内でのライブラリの読み込み指示はこのような感じだ。この例でそれぞれ約126k、約3k、約40k、約18kとなり、合計170k近いデータを順次ダウンロードさせることになる
head要素内でのライブラリの読み込み指示はこのような感じだ。この例でそれぞれ約126k、約3k、約40k、約18kとなり、合計170k近いデータを順次ダウンロードさせることになる

必ずしもhead要素内で読み込ませる必要がなければ</body>の直前にscript要素を配置し、それ以前のページの構成要素を先にダウンロードさせたほうがよい。回線はブロードバンド環境ばかりではない
必ずしもhead要素内で読み込ませる必要がなければ</body>の直前にscript要素を配置し、それ以前のページの構成要素を先にダウンロードさせたほうがよい。回線はブロードバンド環境ばかりではない

JavaScriptライブラリの中には、余分な改行やスペースをとり除き(Minify化)データサイズを小さくしたファイルが公開されているものも多い。また、既存のスクリプトをMinify化するツールも多く公開されている
JavaScriptライブラリの中には、余分な改行やスペースをとり除き(Minify化)データサイズを小さくしたファイルが公開されているものも多い。また、既存のスクリプトをMinify化するツールも多く公開されている
JavaScriptライブラリの中には、余分な改行やスペースをとり除き(Minify化)データサイズを小さくしたファイルが公開されているものも多い。また、既存のスクリプトをMinify化するツールも多く公開されている

[INDEX]
>>> [TROUBLE 67] JavaScriptライブラリを多用したらなかなかページが表示されない
>>> [TROUBLE 68] DisplayObjectがStageインスタンスを取得できない
>>> [TROUBLE 69] 古いInternet Explorerで確認したいが入れられない
>>> [TROUBLE 70] 大きいディスプレイで見ると水平方向が切れてしまった
>>> [TROUBLE 71] クライアントの要望があとからどんどん増えてきた
>>> [TROUBLE 72] ビットマップの画像がぼやけてしまう



『web creators』の情報はこちら!>>>

twitter facebook このエントリーをはてなブックマークに追加 RSS

こんな記事も読まれています

この連載のすべての記事

MdN 最新刊

MdN BOOKS|デザインの本

週間アクセスランキング

1.7-1.13