LoginSignup
14
14

More than 5 years have passed since last update.

JavaScript配信の二流派:大Script主義と小Script主義

Posted at

複数のJavaScriptファイルを高速化のためにまとめることがよく行われていますが、突き詰めていけば大きく2つの方向性に分かれていきます。

事前案内

タイトルにもしている「大Script主義」と「小Script主義」ですが、百科事典の「大項目主義・小項目主義」になぞらえてたった今付けた用語ですので、言葉で探しても確実に見つかりません。また、説明を読んでいけばわかると思いますが、SPAに代表されるような、「フロントフレームワークを駆使して、そもそもあまりページ遷移しないWebサイト」にはあまり当てはまらない内容です。

牧歌的だった時代

まだInternet ExplorerのライバルがNetscapeだった頃、それぞれのブラウザは独自にJavaScriptを拡張していっていました。クロスブラウザで動くコードなど望むべくもなく、JavaScriptは業務用途に使うには向かないものでした。当然ながら、膨大な量のJavaScriptを実行する必要も薄く、ファイル直書きでも問題とならないような分量でした。

その後、DOMとしてブラウザ上のオブジェクト操作もある程度安定してきたこと、それでも生まれる隙間を埋めるように各種のライブラリが普及してきたこと、XMLHTTPRequestによってJavaScript独自で通信が可能となったことなどを受けて、徐々にWebサイトのビジネスロジックにもJavaScriptが組み込まれるようになって行きました。

ファイル数の削減の行き先

回避する技術があるとは言え、本来のHTTPで言えばファイルごとに3Wayハンドシェークが必要となり、さらには1ブラウザあたりのセッション数も限られているため、内容の多寡にかかわらずファイル数が増えれば負荷となります。そこで、ファイルをつなぐことで数を減らす、という手法が取られるようになってきましたが、これを推し進めると、行きつく先は2つに分かれています。

大Script主義

1つの考え方としては、「サイト全体で1つのスクリプトファイルにしてしまえば、どのページでも同じファイルをキャッシュから取ってこれるのでダウンロードが一度で済む」、という考え方です。便宜上、「大Script主義」と名づけます。

小Script主義

逆に、「表示に必要十分なスクリプトだけ読みこめば、余計なロード時間がかからずに済む」という方向性に進むこともできて、これを「小Script主義」と名付けてみました。もっと推し進めるならば、Googleでも推奨しているように、「最初にはファーストビューに必要なものだけ読み込んでしまって、あとは人間が見ている間にロードする」という戦略もあって、これは「極小Script主義」とでもしておきましょう。

利害得失

もちろん複数の流儀があるわけですから、それぞれにメリットデメリットがもちろんあります。

ファーストビュー

最初に表示するまでの時間は、極小Script主義<小Script主義<大Script主義となります。もちろん、遅延ロードなど工夫の余地もあるのですが、そこまで施しているのが極小Script主義です。

遷移速度

一方、ページ遷移の速度では、(キャッシュが効いていれば)大Script主義<極小Script主義<小Script主義となります。全部読み込んであるので、ページ遷移後にスクリプトを読む必要がなくなってしまいます。

通信量

1ページしか読み込まなかった場合の通信量は大Script主義>小Script主義ですが、複数ページを渡り歩いていくと逆転します。極小Script主義の場合は、遅延ロードで読み込むものをサイト全体のスクリプトにするか、ページごとのにするかで違ってきます。

組みやすさ

小Script主義の場合は、そのページで何が起きるかだけ考えておけばいいのに対して、大Script主義では関係ないページにスクリプトが当たるのを防いでおく必要があります。さらに、極小Script主義を取るには、ページごとの最小限の抽出や遅延ロードさせる仕組みなど、考えることはかなり増えてしまいます。

具体例

上で触れたように、Googleは極小Script主義を推進しています。一方で、Rails標準では大Script主義を採用し、さらに読み込みすら省略するTurbolinksを取り入れています

まとめ

ファーストビューの速さを取るのか遷移速度を取るのか、はたまた両方狙う代わりに実装の手間をかけるのか。二兎を追うには、相応の技術が必要となります。

14
14
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
14
14