From 3410f65e790a81d457b4f4601a1e760a6f8ede5e Mon Sep 17 00:00:00 2001 From: Michał Gołębiowski Date: Wed, 16 Oct 2013 15:15:21 +0200 Subject: perf(jqLite): implement and use the `empty` method in place of `html(‘’)` jQuery's elem.html('') is way slower than elem.empty(). As clearing element contents happens quite often in certain scenarios, switching to using .empty() provides a significant performance boost when using Angular with jQuery. Closes #4457 --- src/jqLite.js | 22 ++++++++++++++++++---- 1 file changed, 18 insertions(+), 4 deletions(-) (limited to 'src/jqLite.js') diff --git a/src/jqLite.js b/src/jqLite.js index e7531fb3..8a45f966 100644 --- a/src/jqLite.js +++ b/src/jqLite.js @@ -46,6 +46,7 @@ * - [`contents()`](http://api.jquery.com/contents/) * - [`css()`](http://api.jquery.com/css/) * - [`data()`](http://api.jquery.com/data/) + * - [`empty()`](http://api.jquery.com/empty/) * - [`eq()`](http://api.jquery.com/eq/) * - [`find()`](http://api.jquery.com/find/) - Limited to lookups by tag name * - [`hasClass()`](http://api.jquery.com/hasClass/) @@ -358,6 +359,15 @@ function jqLiteInheritedData(element, name, value) { } } +function jqLiteEmpty(element) { + for (var i = 0, childNodes = element.childNodes; i < childNodes.length; i++) { + jqLiteDealoc(childNodes[i]); + } + while (element.firstChild) { + element.removeChild(element.firstChild); + } +} + ////////////////////////////////////////// // Functions which are declared directly. ////////////////////////////////////////// @@ -552,7 +562,9 @@ forEach({ jqLiteDealoc(childNodes[i]); } element.innerHTML = value; - } + }, + + empty: jqLiteEmpty }, function(fn, name){ /** * Properties: writes return selection, reads return first value @@ -562,11 +574,13 @@ forEach({ // jqLiteHasClass has only two arguments, but is a getter-only fn, so we need to special-case it // in a way that survives minification. - if (((fn.length == 2 && (fn !== jqLiteHasClass && fn !== jqLiteController)) ? arg1 : arg2) === undefined) { + // jqLiteEmpty takes no arguments but is a setter. + if (fn !== jqLiteEmpty && + (((fn.length == 2 && (fn !== jqLiteHasClass && fn !== jqLiteController)) ? arg1 : arg2) === undefined)) { if (isObject(arg1)) { // we are a write, but the object properties are the key/values - for(i=0; i < this.length; i++) { + for (i = 0; i < this.length; i++) { if (fn === jqLiteData) { // data() takes the whole object in jQuery fn(this[i], arg1); @@ -591,7 +605,7 @@ forEach({ } } else { // we are a write, so apply to all children - for(i=0; i < this.length; i++) { + for (i = 0; i < this.length; i++) { fn(this[i], arg1, arg2); } // return self for chaining -- cgit v1.2.3