Skip to content

Commit 50cdad5

Browse files
committed
dramatically increase the performance of initial page load when a lot of css rules use element queries
1 parent 9eac5a6 commit 50cdad5

File tree

1 file changed

+25
-9
lines changed

1 file changed

+25
-9
lines changed

src/ElementQueries.js

Lines changed: 25 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -159,7 +159,15 @@
159159
* @param {String} property width|height
160160
* @param {String} value
161161
*/
162+
var allQueries = {};
162163
function queueQuery(selector, mode, property, value) {
164+
if (typeof(allQueries[mode]) == 'undefined') allQueries[mode] = {};
165+
if (typeof(allQueries[mode][property]) == 'undefined') allQueries[mode][property] = {};
166+
if (typeof(allQueries[mode][property][value]) == 'undefined') allQueries[mode][property][value] = selector;
167+
else allQueries[mode][property][value] += ','+selector;
168+
}
169+
170+
function executeQueries() {
163171
var query;
164172
if (document.querySelectorAll) query = document.querySelectorAll.bind(document);
165173
if (!query && 'undefined' !== typeof $$) query = $$;
@@ -169,14 +177,21 @@
169177
throw 'No document.querySelectorAll, jQuery or Mootools\'s $$ found.';
170178
}
171179

172-
var elements = query(selector);
173-
for (var i = 0, j = elements.length; i < j; i++) {
174-
setupElement(elements[i], {
175-
mode: mode,
176-
property: property,
177-
value: value
178-
});
180+
for (var mode in allQueries) if (allQueries.hasOwnProperty(mode)) {
181+
for (var property in allQueries[mode]) if (allQueries[mode].hasOwnProperty(property)) {
182+
for (var value in allQueries[mode][property]) if (allQueries[mode][property].hasOwnProperty(value)) {
183+
var elements = query(allQueries[mode][property][value]);
184+
for (var i = 0, j = elements.length; i < j; i++) {
185+
setupElement(elements[i], {
186+
mode: mode,
187+
property: property,
188+
value: value
189+
});
190+
}
191+
}
192+
}
179193
}
194+
180195
}
181196

182197
var regex = /,?([^,\n]*?)\[[\s\t]*?(min|max)-(width|height)[\s\t]*?[~$\^]?=[\s\t]*?"([^"]*?)"[\s\t]*?]([^\n\s\{]*?)/mgi;
@@ -242,6 +257,7 @@
242257
}
243258
}
244259
}
260+
executeQueries();
245261
};
246262

247263
/**
@@ -320,7 +336,7 @@
320336
document.addEventListener('DOMContentLoaded', callback, false);
321337
}
322338
/* Safari, iCab, Konqueror */
323-
if (/KHTML|WebKit|iCab/i.test(navigator.userAgent)) {
339+
else if (/KHTML|WebKit|iCab/i.test(navigator.userAgent)) {
324340
var DOMLoadTimer = setInterval(function () {
325341
if (/loaded|complete/i.test(document.readyState)) {
326342
callback();
@@ -329,7 +345,7 @@
329345
}, 10);
330346
}
331347
/* Other web browsers */
332-
window.onload = callback;
348+
else window.onload = callback;
333349
};
334350

335351
if (window.addEventListener) {

0 commit comments

Comments
 (0)