対象: CreateJSやり始めました的なひと。ロード遅いよねと思ってるひと
です。
目標: 速くロードできるようになります
です。
試したバージョンはPreloadJS 0.3.1
です。
PreloadJSの現状 = 驚愕の「1つずつロード」
びっくりすることにPreloadJSはデフォルトでは
- 1つずつ
ロードされる。なぜかはわからない。
追記 setMaxConnectionがあると教えてもらいました！
LoadQueueクラスの最大接続数のデフォルトが1でした。
なので、1つずつしかロードしてませんでした。
ブラウザは一つずつ画像をロードしてたらチンタラすぎるので、普通は6つのリクエストを同時に扱えるものである。(適当なサイトを開いてDevToolsのNetworkを見ればわかる)
(HTTP1.1の仕様では同時接続は2つらしいが、そんなの守ってるブラウザはない。最近のブラウザは「6」だそうだ。)
身につけておきたいWebサイト高速化テクニック #2｜検証ツールとそもそもHTTPって何だ編 ｜ Developers.IO
スマホでの同時リクエスト数は4か6
調べたらここに書いてあった
Why Domain Sharding is Bad News for Mobile Performance and Users | Mobify
| browser | connection |
|---|---|
| Safari mobile | 6 |
| Android browser | 4 |
| Chrome mobile | 6 |
| Firefox mobile | 4 |
どれがAndroidなのかよくわからないけど、まあこんな感じなのだろう。
Toolkit for CreateJSでの吐き出されるソース
var manifest = [
{src:"hoge1.png", id:"hoge1"},
{src:"hoge2.png", id:"hoge2"},
{src:"hoge3.png", id:"hoge3"},
{src:"hoge4.png", id:"hoge4"}
];
var loader = new createjs.LoadQueue(true);
loader.addEventListener("fileload", handleFileLoad);
loader.addEventListener("complete", handleComplete);
loader.loadManifest(manifest);
これだと1つずつしかロードできない。
コメントで教えてもらった loader.setMaxConnectionsを追加してみる。
loader.setMaxConnections(6);
とすると、ちゃんと並列ロードしてくれました！ヤッター！
というお話でした！わーい！
でもまあ、最終的にSpriteSheetにするんだけどね！←Base64にするかも！