Commit 4dc97e6d authored by Romain Courteaud's avatar Romain Courteaud

Load gadget's JS and CSS in parallel.

Use document fragment to add all dependencies with one DOM call only.
parent e78ac402
......@@ -719,12 +719,6 @@
options.element = document.createElement("div");
}
function loadDependency(method, url) {
return function () {
return method(url);
};
}
return new RSVP.Queue()
.push(function () {
return renderJS.declareGadgetKlass(url);
......@@ -751,17 +745,19 @@
})
// Load all JS/CSS
.push(function (all_list) {
var q = new RSVP.Queue(),
var fragment = document.createDocumentFragment(),
promise_list = [],
i;
// Load JS
for (i = 0; i < all_list[0].length; i += 1) {
q.push(loadDependency(renderJS.declareJS, all_list[0][i]));
promise_list.push(renderJS.declareJS(all_list[0][i], fragment));
}
// Load CSS
for (i = 0; i < all_list[1].length; i += 1) {
q.push(loadDependency(renderJS.declareCSS, all_list[1][i]));
promise_list.push(renderJS.declareCSS(all_list[1][i], fragment));
}
return q;
document.head.appendChild(fragment);
return RSVP.all(promise_list);
})
.push(function () {
return gadget_instance;
......@@ -1096,7 +1092,8 @@
/////////////////////////////////////////////////////////////////
// renderJS.declareJS
/////////////////////////////////////////////////////////////////
renderJS.declareJS = function (url) {
renderJS.declareJS = function (url, container) {
// https://www.html5rocks.com/en/tutorials/speed/script-loading/
// Prevent infinite recursion if loading render.js
// more than once
var result;
......@@ -1106,8 +1103,8 @@
result = new RSVP.Promise(function (resolve, reject) {
var newScript;
newScript = document.createElement('script');
newScript.async = false;
newScript.type = 'text/javascript';
newScript.src = url;
newScript.onload = function () {
javascript_registration_dict[url] = null;
resolve();
......@@ -1115,7 +1112,8 @@
newScript.onerror = function (e) {
reject(e);
};
document.head.appendChild(newScript);
newScript.src = url;
container.appendChild(newScript);
});
}
return result;
......@@ -1124,7 +1122,7 @@
/////////////////////////////////////////////////////////////////
// renderJS.declareCSS
/////////////////////////////////////////////////////////////////
renderJS.declareCSS = function (url) {
renderJS.declareCSS = function (url, container) {
// https://github.com/furf/jquery-getCSS/blob/master/jquery.getCSS.js
// No way to cleanly check if a css has been loaded
// So, always resolve the promise...
......@@ -1146,7 +1144,7 @@
link.onerror = function (e) {
reject(e);
};
document.head.appendChild(link);
container.appendChild(link);
});
}
return result;
......
......@@ -621,7 +621,7 @@
var url = 'http://0.0.0.0/bar';
stop();
renderJS.declareJS(url)
renderJS.declareJS(url, document.head)
.then(function () {
ok(false, "404 should fail");
})
......@@ -639,7 +639,7 @@
var url = 'http://0.0.0.0/bar2';
stop();
renderJS.declareJS(url)
renderJS.declareJS(url, document.head)
.then(function () {
return renderJS.declareJS(url);
})
......@@ -663,7 +663,7 @@
stop();
window.onerror = undefined;
renderJS.declareJS(url)
renderJS.declareJS(url, document.head)
.then(function (value, textStatus, jqXHR) {
ok(ok, "Non JS mime type should load");
})
......@@ -683,7 +683,7 @@
"= 'JS fetched and loaded';");
stop();
renderJS.declareJS(url)
renderJS.declareJS(url, document.head)
.then(function () {
equal(
document.getElementById("qunit-fixture").textContent,
......@@ -706,7 +706,7 @@
stop();
window.onerror = undefined;
renderJS.declareJS(url)
renderJS.declareJS(url, document.head)
.then(function (aaa) {
ok(true, "JS with error cleanly loaded");
})
......@@ -726,14 +726,14 @@
"= 'JS not fetched twice';");
stop();
renderJS.declareJS(url)
renderJS.declareJS(url, document.head)
.then(function () {
equal(
document.getElementById("qunit-fixture").textContent,
"JS not fetched twice"
);
document.getElementById("qunit-fixture").textContent = "";
return renderJS.declareJS(url);
return renderJS.declareJS(url, document.head);
})
.then(function () {
equal(document.getElementById("qunit-fixture").textContent, "");
......@@ -760,7 +760,7 @@
var url = 'foo//://bar';
stop();
renderJS.declareCSS(url)
renderJS.declareCSS(url, document.head)
.then(function () {
// IE accept the css
ok(true, "404 should fail");
......@@ -780,7 +780,7 @@
window.btoa("= = =");
stop();
renderJS.declareCSS(url)
renderJS.declareCSS(url, document.head)
.then(function (value, textStatus, jqXHR) {
// Chrome accept the css
ok(true, "Non CSS mime type should load");
......@@ -800,7 +800,7 @@
window.btoa("#qunit-fixture {background-color: red;}");
stop();
renderJS.declareCSS(url)
renderJS.declareCSS(url, document.head)
.then(function () {
var result = document.querySelectorAll("link[href='" + url + "']");
ok(result.length > 0, "CSS in the head");
......@@ -827,7 +827,7 @@
window.btoa("throw new Error('foo');");
stop();
renderJS.declareCSS(url)
renderJS.declareCSS(url, document.head)
.then(function () {
// Chrome does not consider this as error
ok(true, "CSS with error cleanly loaded");
......@@ -846,7 +846,7 @@
window.btoa("#qunit-fixture {background-color: blue;}");
stop();
renderJS.declareCSS(url)
renderJS.declareCSS(url, document.head)
.then(function () {
equal(
window.getComputedStyle(
......@@ -864,7 +864,7 @@
).backgroundColor !== "rgb(0, 0, 255)"
);
return renderJS.declareCSS(url);
return renderJS.declareCSS(url, document.head);
})
.then(function () {
var element_list =
......@@ -948,7 +948,7 @@
"= 'JS not fetched twice';");
stop();
renderJS.declareJS(url)
renderJS.declareJS(url, document.head)
.then(function () {
renderJS.clearGadgetKlassList();
equal(
......@@ -956,7 +956,7 @@
"JS not fetched twice"
);
document.getElementById("qunit-fixture").textContent = "";
return renderJS.declareJS(url);
return renderJS.declareJS(url, document.head);
})
.then(function () {
equal(
......@@ -980,14 +980,14 @@
count = document.querySelectorAll("link[rel=stylesheet]").length;
stop();
renderJS.declareCSS(url)
renderJS.declareCSS(url, document.head)
.then(function () {
renderJS.clearGadgetKlassList();
equal(
document.querySelectorAll("link[rel=stylesheet]").length,
count + 1
);
return renderJS.declareCSS(url);
return renderJS.declareCSS(url, document.head);
})
.then(function () {
equal(
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment