Compute style changes before update

[piaskowyk]

Description

When I was doing performance optimizations, I removed function styleDiff, this function computes differences between old style and new style and returns only differences. In effect, we updated only changed style properties. When I removed the call of styleDiff (because was expensive) there was possible to call layout() too many times, even if someone doesn't change the layout property (layout is also expensive) but there was another problem because we need an update synchronous and asynchronous updates in the same updateProps call. So we decided to restore styleDiff but with faster implementation. We get rid of comparison by JSON.stringify(), the shallow comparation should be enough in this way.

Benchmark

code

const objA = {
  a: 1,
  b: 2,
  c: {},
  d: [],
  e: { a: 1 },
  f: [1, 2, 3],
  g: [{a: 1}, {a: 2}, {a: 2}],
  h: 'abc',
  i: 'abc1',
  a1: 1,
  a2: 1,
  a3: 1,
  a4: 1,
}
const objB = {
  a: 1,
  b: 22,
  c: {},
  d: [],
  e: { a: 11 },
  f: [11, 22, 33],
  g: [{a: 11}, {a: 2}, {a: 2}],
  h: 'abc',
  i: 'abc2',
}
const iteration = 99999;

for(let i = 0; i < 100; i++) {
  let a = performance.now();
}

const t1_start = performance.now();
for(let i = 0; i < iteration; i++) {
  styleDiff_old(objA, objB);
}
const t1_end = performance.now();

const t2_start = performance.now();
for(let i = 0; i < iteration; i++) {
  styleDiff(objA, objB);
}
const t2_end = performance.now();

console.log(
  'old', Math.round(t1_end - t1_start), 'ms',
  '|',
  'new', Math.round(t2_end - t2_start), 'ms'
)

Results:

old 919 ms | new 282 ms
old 870 ms | new 283 ms
old 901 ms | new 273 ms
old 878 ms | new 306 ms
old 868 ms | new 274 ms
old 860 ms | new 266 ms
old 907 ms | new 309 ms
old 912 ms | new 334 ms
old 922 ms | new 291 ms
old 867 ms | new 261 ms
old 880 ms | new 261 ms

In addition, this

state.last = Object.assign({}, oldValues, newValues);

fixes #2752

[tomekzaw]

🚀

[Kerumen]

@piaskowyk Do you plan to release a new version with this patch included? Thanks!