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

时间:2013-04-05 18:09:36

标签: javascript head.js

为了提高性能,有许多方法可以异步加载JavaScript,如SO post.

所示

但是,通常情况下,如果需要,这些方法不会保留顺序,例如依赖项。

您可以通过哪些方式获得异步加载的好处,还可以在需要时保留订购。

Backbone依赖是一个很好的例子。

(require.js,jquery.js) - > Backbone.js的

是否有可以从库中获得的Promises或队列的实现来实现这一目标?

head.js似乎不使用promises或队列。

2 个答案:

答案 0 :(得分:1)

简易解决方案:使用Promises。 jQuery中的.ajax提供了版本1.5的承诺。

如果您不能使用第三方库,您可以执行以下操作:

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. 
                ...
                ...
            }                    
        });
    }
}

答案 1 :(得分:1)

尝试实施和使用Combres库。

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

装货订单只是众多好处之一。缩小,css变量,在路径中使用tilda(比如在asp.net中)等等只是一些好处,以及组合和缓存。