perf(jqLite): avoid setting class attribute when not changed

angular · Aug 9, 2017 · 1762a98 · 1762a98
1 parent 9b99741
commit 1762a98
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 5 deletions.
diff --git a/src/jqLite.js b/src/jqLite.js
@@ -422,29 +422,35 @@ function jqLiteRemoveClass(element, cssClasses) {
   if (cssClasses && element.setAttribute) {
     var existingClasses = (' ' + (element.getAttribute('class') || '') + ' ')
                             .replace(/[\n\t]/g, ' ');
+    var newClasses = existingClasses;
 
     forEach(cssClasses.split(' '), function(cssClass) {
       cssClass = trim(cssClass);
-      existingClasses = existingClasses.replace(' ' + cssClass + ' ', ' ');
+      newClasses = newClasses.replace(' ' + cssClass + ' ', ' ');
     });
 
-    element.setAttribute('class', trim(existingClasses));
+    if (newClasses !== existingClasses) {
+      element.setAttribute('class', trim(newClasses));
+    }
   }
 }
 
 function jqLiteAddClass(element, cssClasses) {
   if (cssClasses && element.setAttribute) {
     var existingClasses = (' ' + (element.getAttribute('class') || '') + ' ')
                             .replace(/[\n\t]/g, ' ');
+    var newClasses = existingClasses;
 
     forEach(cssClasses.split(' '), function(cssClass) {
       cssClass = trim(cssClass);
-      if (existingClasses.indexOf(' ' + cssClass + ' ') === -1) {
-        existingClasses += cssClass + ' ';
+      if (newClasses.indexOf(' ' + cssClass + ' ') === -1) {
+        newClasses += cssClass + ' ';
       }
     });
 
-    element.setAttribute('class', trim(existingClasses));
+    if (newClasses !== existingClasses) {
+      element.setAttribute('class', trim(newClasses));
+    }
   }
 }
 

diff --git a/test/jqLiteSpec.js b/test/jqLiteSpec.js
@@ -928,6 +928,20 @@ describe('jqLite', function() {
       });
 
 
+      it('should not set the attribute when classes not changed', function() {
+        var fakeElement = {
+          nodeType: 1,
+          setAttribute: jasmine.createSpy(),
+          getAttribute: jasmine.createSpy().and.returnValue('foo bar')
+        };
+        var jqA = jqLite(fakeElement);
+
+        jqA.addClass('foo');
+        expect(fakeElement.getAttribute).toHaveBeenCalledOnceWith('class');
+        expect(fakeElement.setAttribute).not.toHaveBeenCalled();
+      });
+
+
       it('should not add duplicate classes', function() {
         var jqA = jqLite(a);
         expect(a.className).toBe('');
@@ -1059,6 +1073,20 @@ describe('jqLite', function() {
         expect(fakeElement.getAttribute).toHaveBeenCalledOnceWith('class');
         expect(fakeElement.setAttribute).toHaveBeenCalledOnceWith('class', 'bar');
       });
+
+
+      it('should not set the attribute when classes not changed', function() {
+        var fakeElement = {
+          nodeType: 1,
+          setAttribute: jasmine.createSpy(),
+          getAttribute: jasmine.createSpy().and.returnValue('foo bar')
+        };
+        var jqA = jqLite(fakeElement);
+
+        jqA.removeClass('noexistent');
+        expect(fakeElement.getAttribute).toHaveBeenCalledOnceWith('class');
+        expect(fakeElement.setAttribute).not.toHaveBeenCalled();
+      });
     });
   });