Cocos Creator 资源加载流程剖析【三】——Load部分

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也是被禁止延迟加载的。