Load流程是整個資源載入管線的最後一棒，由Loader這個pipe負責（loader.js）。通過Download流程拿到內容之後，需要對內容做一些“載入”處理。使得這些內容可以在遊戲中使用。這裡並不是所有的資源都需要進行一個載入處理，目前只有圖片、Json、Plist、Uuid（Prefab、場景）等資源才會執行載入的流程，其他的資源在Download流程之後就可以在遊戲中使用了。

• Loader處理

Loader的handle接收一個item和callback，根據item的type在this.extMap中獲取對應的loadFunc。

Loader.prototype.addHandlers = function (extMap) {
    this.extMap = JS.mixin(this.extMap, extMap);
};

Loader.prototype.handle = function (item, callback) {
    var loadFunc = this.extMap[item.type] || this.extMap['default'];
    return loadFunc.call(this, item, callback);
};
 

• 資源的載入方式

Loader的this.extMap記錄了各種資源型別的下載方式，所有的型別最終都對應這5個載入方法，loadNothing、loadJSON、loadImage、loadPlist、loadUuid，它們對應實現了各種型別資源的載入，通過Loader.addHandlers可以新增或修改任意資源的載入方式。載入結束後將可用的內容返回。

// 無需載入，即經過前面的下載已經可用了，例如font、script等資源
function loadNothing (item, callback) {
    return null;
}

// 使用JSON.parse進行解析並返回
function loadJSON (item, callback) {
    if (typeof item.content !== 'string') {
        return new Error('JSON Loader: Input item doesn\'t contain string content');
    }

    try {
        var result = JSON.parse(item.content);
        return result;
    }
    catch (e) {
        return new Error('JSON Loader: Parse json [' + item.id + '] failed : ' + e);
    }
}

// 建立Texture2D，並根據圖片的內容初始化Texture2D，最後新增到cc.textureCache中
function loadImage (item, callback) {
    if (sys.platform !== sys.WECHAT_GAME && !(item.content instanceof Image)) {
        return new Error('Image Loader: Input item doesn\'t contain Image content');
    }
    var rawUrl = item.rawUrl;
    var tex = cc.textureCache.getTextureForKey(rawUrl) || new Texture2D();
    tex.url = rawUrl;
    tex.initWithElement(item.content);
    tex.handleLoadedTexture();
    cc.textureCache.cacheImage(rawUrl, tex);
    return tex;
}

// 使用cc.plistParser進行解析並返回
function loadPlist (item, callback) {
    if (typeof item.content !== 'string') {
        return new Error('Plist Loader: Input item doesn\'t contain string content');
    }
    var result = cc.plistParser.parse(item.content);
    if (result) {
        return result;
    }
    else {
        return new Error('Plist Loader: Parse [' + item.id + '] failed');
    }
}
 

• loadUuid

loadUuid用於載入creator內部統一規劃的資源，每個uuid都會對應一個json物件，可能是prefab、spriteFrame，等等。在loadUuid這個方法中，最關鍵的操作就是cc.deserialize反序列化把資源物件建立了出來，其次就是載入依賴資源。

uuid的解析首先需要一個json物件，如果item的content是string型別，則進行解析，如果是object型別，則直接使用item.content，如果既不是string也不是object則直接報錯。

function loadUuid (item, callback) {
    if (CC_EDITOR) {
        MissingClass = MissingClass || Editor.require('app://editor/page/scene-utils/missing-class-reporter').MissingClass;
    }

    // 獲取json物件，如果是string則進行解析，如果是object則直接使用，報錯則返回Error物件
    var json;
    if (typeof item.content === 'string') {
        try {
            json = JSON.parse(item.content);
        } catch (e) {
            return new Error('Uuid Loader: Parse asset [' + item.id + '] failed : ' + e.stack);
        }
    } else if (typeof item.content === 'object') {
        json = item.content;
    } else {
        return new Error('JSON Loader: Input item doesn\'t contain string content');
    }

    // 根據是否場景物件、編輯器環境來決定classFinder的實現。
    var classFinder;
    var isScene = isSceneObj(json);
    if (isScene) {
        if (CC_EDITOR) {
            // 編輯器 + 場景的模式下，使用MissingClass.classFinder作為包裹函式
            MissingClass.hasMissingClass = false;
            classFinder = function (type, data, owner, propName) {
                var res = MissingClass.classFinder(type, data, owner, propName);
                if (res) {
                    return res;
                }
                return cc._MissingScript.getMissingWrapper(type, data);
            };
            classFinder.onDereferenced = MissingClass.classFinder.onDereferenced;
        } else {
            // 非編輯器下，使用cc._MissingScript.safeFindClass，也是呼叫了JS._getClassById
            // 區別是在解析失敗後會呼叫cc.deserialize.reportMissingClass(id);
            classFinder = cc._MissingScript.safeFindClass;
        }
    } else {
        classFinder = function (id) {
            // JS為引擎的platform\js.js，而_getClassById方法從_idToClass[classId]中返回Class
            // _idToClass為id到類的一個註冊map，key為id，value為class
            // 使用CCClass定義繼承自cc.Component的類會被自動註冊到_idToClass中
            // platform\CCClass.js中的var cls = define(name, base, mixins, options);
            // 最終呼叫了JS.setClassName，Creator的類的實現細節是另外一個大話題
            // 這裡只需要瞭解，所有可拖拽到prefab上的類都會被註冊到JS._idToClass中，這裡的id就是類名
            var cls = JS._getClassById(id);
            if (cls) {
                return cls;
            }
            cc.warnID(4903, id);
            return Object;
        };
    }

    // 進行反序列化，反序列化出asset
    var tdInfo = cc.deserialize.Details.pool.get();
    var asset;
    try {
        // deserialize的實現位於platform\deserialize.js
        // 具體的實現非常複雜，大致可以理解為new出對應的類，並從json物件中反序列化該類的所有屬性
        // 所以返回的asset是這個json最頂層object對應的類，比如cc.SpriteFrame或者自定義的元件
        // 該資源所依賴的所有資源會被反序列化到tdInfo中，在tdInfo.uuidList中。
        asset = cc.deserialize(json, tdInfo, {
            classFinder: classFinder,
            target: item.existingAsset,
            customEnv: item
        });
    } catch (e) {
        cc.deserialize.Details.pool.put(tdInfo);
        var err = CC_JSB ? (e + '\n' + e.stack) : e.stack;
        return new Error('Uuid Loader: Deserialize asset [' + item.id + '] failed : ' + err);
    }

    // 如果是在編輯器下的場景存在類丟失，進行報告（應該是報紅）
    asset._uuid = item.uuid;
    if (CC_EDITOR && isScene && MissingClass.hasMissingClass) {
        MissingClass.reportMissingClass(asset);
    }

    // 判斷是否可延遲載入，並呼叫loadDepends
    var deferredLoad = canDeferredLoad(asset, item, isScene);
    loadDepends(this.pipeline, item, asset, tdInfo, deferredLoad, callback);
}
 

canDeferredLoad方法會根據資源型別監測是否可以延遲載入，當item的deferredLoadRaw為true且該資源支援延遲載入（在程式碼中搜索preventDeferredLoadDependents可以發現除了TileMap、DragonBones、Spine等資源外，都不支援延遲載入），或是設定了延遲載入的場景才可以延遲載入。

// can deferred load raw assets in runtime
// 檢查是否延遲載入Raw Assets
function canDeferredLoad (asset, item, isScene) {
    if (CC_EDITOR || CC_JSB) {
        return false;
    }
    var res = item.deferredLoadRaw;
    if (res) {
        // check if asset support deferred
        // 檢查該資源是否支援延遲載入
        if (asset instanceof cc.Asset && asset.constructor.preventDeferredLoadDependents) {
            res = false;
        }
    } else if (isScene) {
        // 如果是prefab或scene，取其asyncLoadAssets屬性
        if (asset instanceof cc.SceneAsset || asset instanceof cc.Prefab) {
            res = asset.asyncLoadAssets;
        }
    }
    return res;
}

loadDepends方法會載入依賴，主要做了2個事情，延遲載入和依賴載入。

延遲載入指的是資源A依賴了B、C、D，其中資源D延遲載入了，那麼BC載入完成即算這個資源載入完成，並執行回撥，D也會進行載入，但什麼時候載入完這裡並不關心。在實際應用中的表現就是載入一個場景，基礎部分的內容載入完成了，進入了該場景之後再陸續看到其他內容載入完成。

根據deferredLoadRawAssetsInRuntime，對raw型別資源進行延遲載入，延遲載入的內容會進入dependKeys陣列，而不延遲載入的內容進入depends陣列。

depends陣列是該資源所依賴的資源陣列，loadDepends會呼叫pipeline.flowInDeps進行載入，如果該陣列為空則不載入依賴，執行完成回撥。dependKeys陣列是item的屬性，記錄了該資源依賴的所有資源，在做資源釋放的時候會用到。預載入的內容會直接進入dependKeys，而正常載入的資源在載入完成後才會被新增到dependKeys中。

最後呼叫pipeline.flowInDeps載入depends陣列，flowInDeps的完成回撥中，如果item載入完成且沒有報錯，呼叫loadCallback，如果未載入完成，插入到item的queue的 _callbackTable[dependSrc]中或新增queue的監聽（這兩個操作的意義都是在item載入完成後執行loadCallback），loadCallback將依賴物件的依賴屬性進行賦值，並新增該資源的id到dependKeys中。

當反序列化出來的asset._preloadRawFiles有值時，會將callback進行包裹，在非同步載入完RawFiles才執行最終的callback。實際並沒有什麼作用。

function loadDepends (pipeline, item, asset, tdInfo, deferredLoadRawAssetsInRuntime, callback) {
    // tdInfo.uuidList為這個prefab或場景所依賴的uuid型別的資源
    var uuidList = tdInfo.uuidList;
    var objList, propList, depends;
    var i, dependUuid;
    // cache dependencies for auto release
    // dependKeys用於快取該資源的依賴，在資源釋放的時候會用到
    var dependKeys = item.dependKeys = [];

    /******************************* 過濾決定哪些資源要載入，哪些要延遲，得出depends陣列 **********************************/
    // 如果支援延遲載入
    if (deferredLoadRawAssetsInRuntime) {
        objList = [];
        propList = [];
        depends = [];
        // parse depends assets
        for (i = 0; i < uuidList.length; i++) {
            dependUuid = uuidList[i];
            var obj = tdInfo.uuidObjList[i];
            var prop = tdInfo.uuidPropList[i];
            var info = cc.AssetLibrary._getAssetInfoInRuntime(dependUuid);
            if (info.raw) {
                // skip preloading raw assets
                // 對於raw型別的資源不進行載入，tdInfo.uuidObjList[i][prop] = url
                var url = info.url;
                obj[prop] = url;
                dependKeys.push(url);
            } else {
                objList.push(obj);
                propList.push(prop);
                // declare depends assets
                // 對於非raw型別的資源，進入depends進行載入，但帶上deferredLoadRaw標記
                // 意為該uuid引用的其他raw型別的資源進行延遲載入
                depends.push({
                    type: 'uuid',
                    uuid: dependUuid,
                    deferredLoadRaw: true,
                });
            }
        }
    } else {
        objList = tdInfo.uuidObjList;
        propList = tdInfo.uuidPropList;
        depends = new Array(uuidList.length);
        // declare depends assets
        // 不支援延遲載入則直接進入depends陣列，這裡沒有deferredLoadRaw標記
        for (i = 0; i < uuidList.length; i++) {
            dependUuid = uuidList[i];
            depends[i] = {
                type: 'uuid',
                uuid: dependUuid
            };
        }
    }
    
    /******************************* tdInfo.rawProp和asset._preloadRawFiles的處理 **********************************/
    // declare raw
    // 有些json檔案包含了一些raw屬性，以$_$rawType結尾，這裡會直接載入item.url，但目前還未碰到過這樣型別的資源。
    // 下面2個說法是錯誤的。
    // 如果這個uuid資源本身就是一個raw資源，載入自己？
    // 如果這個uuid資源存在raw屬性，例如一個指令碼拖拽了一個Texture2D型別的資源作為它的成員變數？
    if (tdInfo.rawProp) {
        objList.push(asset);
        propList.push(tdInfo.rawProp);
        depends.push(item.url);
    }
    // preload raw files
    // 預載入它的raw檔案，這裡是asset的屬性，但從引擎程式碼沒有看到哪裡對這個屬性賦值過
    // 不過prefab等檔案倒是有一個_rawFiles的屬性，但從程式碼上看也與這個方法無關，看上去倒像是預留的一個介面
    // 提供給開發者做某種資源型別的完成回撥包裝。
    if (asset._preloadRawFiles) {
        var finalCallback = callback;
        callback = function () {
            asset._preloadRawFiles(function (err) {
                finalCallback(err || null, asset);
            });
        };
    }
    // fast path
    // 如果沒有資源要載入就直接返回
    if (depends.length === 0) {
        cc.deserialize.Details.pool.put(tdInfo);
        return callback(null, asset);
    }

    /******************************* 呼叫pipeline.flowInDeps進行依賴載入，資源載入完成後呼叫loadCallback **********************************/
    // Predefine content for dependencies usage
    // 載入depends，載入完成後註冊到item.dependKeys中，並賦值給this.obj[this.prop]
    item.content = asset;
    pipeline.flowInDeps(item, depends, function (errors, items) {
        // 這個回撥在所有的item都載入完成後執行，所以item都是有的，但有可能有報錯
        var item, missingAssetReporter;
        for (var src in items.map) {
            item = items.map[src];
            if (item.uuid && item.content) {
                item.content._uuid = item.uuid;
            }
        }
        for (var i = 0; i < depends.length; i++) {
            var dependSrc = depends[i].uuid;
            var dependUrl = depends[i].url;
            var dependObj = objList[i];
            var dependProp = propList[i];
            item = items.map[dependUrl];
            if (item) {
                var thisOfLoadCallback = {
                    obj: dependObj,
                    prop: dependProp
                };
                
                // 資源載入完成的回撥，關聯依賴物件obj的prop為item的value
                function loadCallback (item) {
                    var value = item.isRawAsset ? item.rawUrl : item.content;
                    this.obj[this.prop] = value;
                    if (item.uuid !== asset._uuid && dependKeys.indexOf(item.id) < 0) {
                        dependKeys.push(item.id);
                    }
                }
                
                // 如果資源已經載入完了，且沒有報錯，則執行loadCallback回撥
                if (item.complete || item.content) {
                    if (item.error) {
                        if (CC_EDITOR && item.error.errorCode === 'db.NOTFOUND') {
                            if (!missingAssetReporter) {
                                var MissingObjectReporter = Editor.require('app://editor/page/scene-utils/missing-object-reporter');
                                missingAssetReporter = new MissingObjectReporter(asset);
                            }
                            missingAssetReporter.stashByOwner(dependObj, dependProp, Editor.serialize.asAsset(dependSrc));
                        } else {
                            cc._throw(item.error);
                        }
                    } else {
                        loadCallback.call(thisOfLoadCallback, item);
                    }
                } else {
                    // item was removed from cache, but ready in pipeline actually
                    // 該item從cache中移除了？但在pipeline中？
                    // 這裡監聽了該item的載入完成事件，在載入完成時呼叫loadCallback
                    var queue = LoadingItems.getQueue(item);
                    // Hack to get a better behavior
                    // 這個behavior非常的bad，_callbackTable是CallbacksHandler的成員變數
                    // 兩個操作都是新增監聽，但前者是直接拿到監聽該事件的回撥陣列，強行插入
                    var list = queue._callbackTable[dependSrc];
                    if (list) {
                        list.unshift(loadCallback, thisOfLoadCallback);
                    } else {
                        queue.addListener(dependSrc, loadCallback, thisOfLoadCallback);
                    }
                }
            }
        }
        if (CC_EDITOR && missingAssetReporter) {
            missingAssetReporter.reportByOwner();
        }
        cc.deserialize.Details.pool.put(tdInfo);
        callback(null, asset);
    });
}

CCLoader的flowInDeps，實現如下，傳入資源的owner，依賴列表urlList，以及urlList的回撥。當一個依賴又有依賴的時候，queue的append又會走到這個新資源的loadUuid，去載入那一層所依賴的資源。而flowInDeps開頭的var item = this._cache[res.url] 也確保了資源不會被重複載入。

proto.flowInDeps = function (owner, urlList, callback) {
    // 準備_sharedList，已載入或正在載入的資源push item，未載入的push res
    _sharedList.length = 0;
    for (var i = 0; i < urlList.length; ++i) {
        var res = getResWithUrl(urlList[i]);
        if (!res.url && ! res.uuid)
            continue;
        var item = this._cache[res.url];
        if (item) {
            _sharedList.push(item);
        } else {
            _sharedList.push(res);
        }
    }

    // 建立一個新的佇列，當有owner時，將子佇列的進度同步到ownerQueue
    var queue = LoadingItems.create(this, owner ? function (completedCount, totalCount, item) {
        if (this._ownerQueue && this._ownerQueue.onProgress) {
            this._ownerQueue._childOnProgress(item);
        }
    } : null, function (errors, items) {
        callback(errors, items);
        // Clear deps because it's already done
        // Each item will only flowInDeps once, so it's still safe here
        // 載入完成後清除owner.deps陣列
        owner && owner.deps && (owner.deps.length = 0);
        items.destroy();
    });
    if (owner) {
        var ownerQueue = LoadingItems.getQueue(owner);
        // Set the root ownerQueue, if no ownerQueue defined in ownerQueue, it's the root
        // 設定queue的ownerQueue
        queue._ownerQueue = ownerQueue._ownerQueue || ownerQueue;
    }
    var accepted = queue.append(_sharedList, owner);
    _sharedList.length = 0;
    return accepted;
};

• 延遲載入

• 延遲載入的作用

在creator編輯器中可以設定場景和prefab的延遲載入，設定了延遲載入之後，場景或prefab所引用的一些Raw型別資源如cc.Texture2D、cc.AudioClip等會延遲載入，同時，玩家進入場景後可能會看到一些資源陸續顯示出來，並且啟用新介面時也可能會看到介面中的元素陸續顯示出來，因此這種載入方式更適合網頁遊戲。

具體的實現是在loadUuid中執行canDeferredLoad時，它的asset.asyncLoadAssets為一個Object。在後面的loadDepends方法中會執行deferredLoadRawAssetsInRuntime的判斷。所有Raw型別的資源會被延遲載入，而非Raw型別的資源會被新增到depends陣列中進行載入。最終載入完成時我們可以得到一個不完整的資源（因為它有一部分依賴被延遲載入了）。

• 延遲載入的資源在什麼時候載入？

從整個Pipeline的載入流程來看，並沒有任何地方去載入這些被延遲的Raw型別資源，而在底層載入圖片的地方進行斷點，可以發現當場景或Prefab被啟用時（新增到場景中），會有一個ensureLoadTexture方法被呼叫，在這裡會執行這些延遲資源的載入流程。所以延遲載入的資源在節點被啟用時會自動載入。下圖是一個延遲載入圖片的呼叫堆疊。

ensureLoadTexture的實現如下所示，AudioClip也類似，在呼叫play播放聲音時會執行preload，檢測到聲音沒有被載入時會執行cc.loader.load方法載入聲音。

    /**
     * !#en If a loading scene (or prefab) is marked as `asyncLoadAssets`, all the textures of the SpriteFrame which
     * associated by user's custom Components in the scene, will not preload automatically.
     * These textures will be load when Sprite component is going to render the SpriteFrames.
     * You can call this method if you want to load the texture early.
     * !#zh 當載入中的場景或 Prefab 被標記為 `asyncLoadAssets` 時，使用者在場景中由自定義元件關聯到的所有 SpriteFrame 的貼圖都不會被提前載入。
     * 只有當 Sprite 元件要渲染這些 SpriteFrame 時，才會檢查貼圖是否載入。如果你希望載入過程提前，你可以手工呼叫這個方法。
     */
    ensureLoadTexture: function () {
        if (!this._texture) {
            this._loadTexture();
        }
    },
    
    _loadTexture: function () {
        if (this._textureFilename) {
            // 這裡返回的tex可能是一個未載入完成的紋理，如紋理未載入完成，可監聽其載入完成回撥
            var texture = cc.textureCache.addImage(this._textureFilename);
            this._refreshTexture(texture);
        }
    },
    
    _refreshTexture: function (texture) {
        var self = this;
        if (self._texture !== texture) {
            var locLoaded = texture.loaded;
            this._textureLoaded = locLoaded;
            this._texture = texture;
            function textureLoadedCallback () {
                if (!self._texture) {
                    // clearTexture called while loading texture...
                    // 在載入紋理的時候呼叫了clearTexture方法
                    return;
                }
                self._textureLoaded = true;
                var w = texture.width, h = texture.height;
                // 如果在Canvas模式下，圖片有旋轉，需要進行旋轉的特殊處理（_cutRotateImageToCanvas）
                if (self._rotated && cc._renderType === cc.game.RENDER_TYPE_CANVAS) {
                    var tempElement = texture.getHtmlElementObj();
                    tempElement = _ccsg.Sprite.CanvasRenderCmd._cutRotateImageToCanvas(tempElement, self.getRect());
                    var tempTexture = new cc.Texture2D();
                    tempTexture.initWithElement(tempElement);
                    tempTexture.handleLoadedTexture();
                    self._texture = tempTexture;
                    self._rotated = false;
                    w = self._texture.width;
                    h = self._texture.height;
                    self.setRect(cc.rect(0, 0, w, h));
                }
    
                if (self._rect) {
                    self._checkRect(self._texture);
                } else {
                    self.setRect(cc.rect(0, 0, w, h));
                }
    
                if (!self._originalSize) {
                    self.setOriginalSize(cc.size(w, h));
                }
    
                if (!self._offset) {
                    self.setOffset(cc.v2(0, 0));
                }
    
                // dispatch 'load' event of cc.SpriteFrame
                // cc.SpriteFrame的觸發load事件
                self.emit("load");
            }
    
            // 如果圖片已載入完，則直接執行回撥，否則監聽texture的load方法
            if (locLoaded) {
                textureLoadedCallback();
            } else {
                texture.once("load", textureLoadedCallback);
            }
        }
    },

• 禁止延遲載入

在Creator的官方文件中介紹到“Spine 和 TiledMap 依賴的資源永遠都不會被延遲載入”，這主要是因為它們對Raw資源是一個強依賴，也就是說節點被啟用時就必須使用到它們的紋理，所以不能延遲載入。那麼它們是如何實現禁止延遲載入的呢？

在canDeferredLoad方法中，如果資源的asset.constructor.preventDeferredLoadDependents為true時，會強制返回false。在引擎中進行搜尋可以發現，除了Spine和TiledMap，還有DragonBones也是被禁止延遲載入的。

相關推薦