perf: only patch string style when value has changed (#1310)

fix #1309
vuejs · Jun 11, 2020 · d4e9b19 · d4e9b19
1 parent 1f2926a
commit d4e9b19
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 1 deletion.
diff --git a/packages/runtime-dom/__tests__/patchStyle.spec.ts b/packages/runtime-dom/__tests__/patchStyle.spec.ts
@@ -7,6 +7,22 @@ describe(`runtime-dom: style patching`, () => {
     expect(el.style.cssText.replace(/\s/g, '')).toBe('color:red;')
   })
 
+  // #1309
+  it('should not patch same string style', () => {
+    const el = document.createElement('div')
+    const fn = jest.fn()
+    const value = (el.style.cssText = 'color:red;')
+    Object.defineProperty(el.style, 'cssText', {
+      get(): any {
+        return value
+      },
+      set: fn
+    })
+    patchProp(el, 'style', value, value)
+    expect(el.style.cssText.replace(/\s/g, '')).toBe('color:red;')
+    expect(fn).not.toBeCalled()
+  })
+
   it('plain object', () => {
     const el = document.createElement('div')
     patchProp(el, 'style', {}, { color: 'red' })

diff --git a/packages/runtime-dom/src/modules/style.ts b/packages/runtime-dom/src/modules/style.ts
@@ -8,7 +8,9 @@ export function patchStyle(el: Element, prev: Style, next: Style) {
   if (!next) {
     el.removeAttribute('style')
   } else if (isString(next)) {
-    style.cssText = next
+    if (prev !== next) {
+      style.cssText = next
+    }
   } else {
     for (const key in next) {
       setStyle(style, key, next[key] as string)