图表 - 实现有序的异步脚本加载？

Question

为了提高性能，有很多方法可以异步加载 JavaScript，如 SO post. 所示

但是，一般来说，如果您需要，这些方法不会保留顺序，比如依赖关系。

您可以通过哪些方式获得异步加载的好处，同时在需要时保持排序。

主干依赖是一个很好的例子。

(require.js, jquery.js) -> 主干.js

是否有实现这一点的库中可用的承诺或队列的实现？

看起来head.js 还没有使用承诺或队列。

Answer 1

简单的解决方案：使用Promises。 jQuery 中的 .ajax 从 1.5 版本开始提供 Promise。

如果你不能使用第三方库，你可以这样做：

var resourceData = {};
var resourcesLoaded = 0;

function loadResource(resource, callback) {
    var xhr = new XMLHttpRequest();
    xhr.onload = function() {
        var state = this.readyState;
        var responseCode = request.status;

        if(state == this.DONE && responseCode == 200) {
            callback(resource, this.responseText);
        }
    };

    xhr.open("get", resource, true);
    xhr.send();
}

//Assuming that resources is an array of path names
function loadResources(resources) {
    for(var i = 0; i < resources.length; i++) {
        loadResource(resources[i], function(resource, responseText) {

            //Store the data of the resource in to the resourceData map,
            //using the resource name as the key. Then increment the
            //resource counter.
            resourceData[resource] = responseText;
            resourcesLoaded++;

            //If the number of resources that we have loaded is equal
            //to the total number of resources, it means that we have
            //all our resources.
            if(resourcesLoaded === resources.length) {
                //Manipulate the data in the order that you desire.
                //Everything you need is inside resourceData, keyed
                //by the resource url. 
                ...
                ...
            }                    
        });
    }
}

Answer 2

尝试实现和使用 Combres 库。

https://www.nuget.org/packages/combres

加载顺序只是众多好处之一。缩小、css 变量、路径中的 tilda 使用（如在 asp.net 中）等只是其中的一些好处，以及组合和缓存。