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

8 files changed, 36 insertions, 16 deletions

diff --git a/test/helpers/testabilityPatch.js b/test/helpers/testabilityPatch.js
index 41b5042a..f61be4ee 100644
--- a/test/helpers/testabilityPatch.js
+++ b/test/helpers/testabilityPatch.js
@@ -29,8 +29,7 @@ beforeEach(function() {
     bindJQuery();
   }
 
-
-  angular.element(document.body).html('').removeData();
+  angular.element(document.body).empty().removeData();
 });
 
 afterEach(function() {
diff --git a/test/jqLiteSpec.js b/test/jqLiteSpec.js
index 09be1c1c..c4f47dcd 100644
--- a/test/jqLiteSpec.js
+++ b/test/jqLiteSpec.js
@@ -322,7 +322,7 @@ describe('jqLite', function() {
     });
 
 
-    it('should emit $destroy event if an element is removed via html()', inject(function(log) {
+    it('should emit $destroy event if an element is removed via html(\'\')', inject(function(log) {
       var element = jqLite('<div><span>x</span></div>');
       element.find('span').on('$destroy', log.fn('destroyed'));
 
@@ -333,6 +333,17 @@ describe('jqLite', function() {
     }));
 
 
+    it('should emit $destroy event if an element is removed via empty()', inject(function(log) {
+      var element = jqLite('<div><span>x</span></div>');
+      element.find('span').on('$destroy', log.fn('destroyed'));
+
+      element.empty();
+
+      expect(element.html()).toBe('');
+      expect(log).toEqual('destroyed');
+    }));
+
+
     it('should retrieve all data if called without params', function() {
       var element = jqLite(a);
       expect(element.data()).toEqual({});
@@ -786,7 +797,7 @@ describe('jqLite', function() {
     });
 
 
-    it('should read/write value', function() {
+    it('should read/write a value', function() {
       var element = jqLite('<div>abc</div>');
       expect(element.length).toEqual(1);
       expect(element[0].innerHTML).toEqual('abc');
@@ -797,6 +808,16 @@ describe('jqLite', function() {
   });
 
 
+  describe('empty', function() {
+    it('should write a value', function() {
+      var element = jqLite('<div>abc</div>');
+      expect(element.length).toEqual(1);
+      expect(element.empty() == element).toBeTruthy();
+      expect(element.html()).toEqual('');
+    });
+  });
+
+
   describe('on', function() {
     it('should bind to window on hashchange', function() {
       if (jqLite.fn) return; // don't run in jQuery
diff --git a/test/ng/compileSpec.js b/test/ng/compileSpec.js
index 853290a6..1b98cd58 100755
--- a/test/ng/compileSpec.js
+++ b/test/ng/compileSpec.js
@@ -170,26 +170,26 @@ describe('$compile', function() {
       // First with only elements at the top level
       element = jqLite('<div><div></div></div>');
       $compile(element.contents())($rootScope);
-      element.html('');
+      element.empty();
       expect(calcCacheSize()).toEqual(0);
 
       // Next with non-empty text nodes at the top level
       // (in this case the compiler will wrap them in a <span>)
       element = jqLite('<div>xxx</div>');
       $compile(element.contents())($rootScope);
-      element.html('');
+      element.empty();
       expect(calcCacheSize()).toEqual(0);
 
       // Next with comment nodes at the top level
       element = jqLite('<div><!-- comment --></div>');
       $compile(element.contents())($rootScope);
-      element.html('');
+      element.empty();
       expect(calcCacheSize()).toEqual(0);
 
       // Finally with empty text nodes at the top level
       element = jqLite('<div>   \n<div></div>   </div>');
       $compile(element.contents())($rootScope);
-      element.html('');
+      element.empty();
       expect(calcCacheSize()).toEqual(0);
     });
 
diff --git a/test/ng/directive/formSpec.js b/test/ng/directive/formSpec.js
index 77beb2fd..dde6f0a0 100644
--- a/test/ng/directive/formSpec.js
+++ b/test/ng/directive/formSpec.js
@@ -216,7 +216,7 @@ describe('form', function() {
         // yes, I know, scope methods should not do direct DOM manipulation, but I wanted to keep
         // this test small. Imagine that the destroy action will cause a model change (e.g.
         // $location change) that will cause some directive to destroy the dom (e.g. ngView+$route)
-        doc.html('');
+        doc.empty();
         destroyed = true;
       }
 
diff --git a/test/ng/directive/ngIncludeSpec.js b/test/ng/directive/ngIncludeSpec.js
index 9e0a47b0..79e7f312 100644
--- a/test/ng/directive/ngIncludeSpec.js
+++ b/test/ng/directive/ngIncludeSpec.js
@@ -47,7 +47,7 @@ describe('ngInclude', function() {
     $rootScope.url = 'myUrl';
     $rootScope.$digest();
     expect(body.text()).toEqual('misko');
-    body.html('');
+    body.empty();
   }));
 
 
@@ -60,7 +60,7 @@ describe('ngInclude', function() {
     $rootScope.url = 'myUrl';
     $rootScope.$digest();
     expect(element.text()).toEqual('Alibaba');
-    jqLite(document.body).html('');
+    jqLite(document.body).empty();
   }));
 
 
@@ -74,7 +74,7 @@ describe('ngInclude', function() {
     expect(function() { $rootScope.$digest(); }).toThrowMinErr(
         '$sce', 'insecurl',
         /Blocked loading resource from url not allowed by \$sceDelegate policy.  URL: http:\/\/example.com\/myUrl.*/);
-    jqLite(document.body).html('');
+    jqLite(document.body).empty();
   }));
 
 
@@ -88,7 +88,7 @@ describe('ngInclude', function() {
     expect(function() { $rootScope.$digest(); }).toThrowMinErr(
         '$sce', 'insecurl',
         /Blocked loading resource from url not allowed by \$sceDelegate policy.  URL: http:\/\/example.com\/myUrl.*/);
-    jqLite(document.body).html('');
+    jqLite(document.body).empty();
   }));
 
 
diff --git a/test/ngAnimate/animateSpec.js b/test/ngAnimate/animateSpec.js
index 44b623b4..01589da1 100644
--- a/test/ngAnimate/animateSpec.js
+++ b/test/ngAnimate/animateSpec.js
@@ -301,7 +301,7 @@ describe("ngAnimate", function() {
           inject(function($animate, $compile, $rootScope, $timeout, $sniffer) {
 
           $rootScope.$digest();
-          element.html('');
+          element.empty();
 
           var child1 = $compile('<div>1</div>')($rootScope);
           var child2 = $compile('<div>2</div>')($rootScope);
diff --git a/test/ngScenario/dslSpec.js b/test/ngScenario/dslSpec.js
index f94ec583..2553fadd 100644
--- a/test/ngScenario/dslSpec.js
+++ b/test/ngScenario/dslSpec.js
@@ -53,7 +53,7 @@ describe("angular.scenario.dsl", function() {
     // Just use the real one since it delegates to this.addFuture
     $root.addFutureAction = angular.scenario.
       SpecRunner.prototype.addFutureAction;
-    jqLite($window.document).html('');
+    jqLite($window.document).empty();
   }));
 
   afterEach(function(){
diff --git a/test/ngTouch/directive/ngClickSpec.js b/test/ngTouch/directive/ngClickSpec.js
index 0eccc8f3..43735709 100644
--- a/test/ngTouch/directive/ngClickSpec.js
+++ b/test/ngTouch/directive/ngClickSpec.js
@@ -152,7 +152,7 @@ describe('ngClick (touch)', function() {
     }));
 
     afterEach(inject(function($document) {
-      $document.find('body').html('');
+      $document.find('body').empty();
     }));