Help us understand the problem. What is going on with this article?

CreateJSのPreloadJSが1つずつしかロードしない爆遅仕様なので、並列ロードさせて速くさせる(maxConnection追記あり)

More than 5 years have passed since last update.

対象: 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にするかも!

katapad
バスキュールでフロントやってます。 Unity, WebGL, VR, IoT
http://unko.me
bascule
DATA × TECHNOLOGY × DESIGN
http://www.bascule.co.jp
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away