perf(runtime-vapor): refactor apiCreateIf

[edison1105]

• for this template code

  <h1 v-if="msg">{{ msg }}</h1>
  <span v-else-if="foo">foo</span>
  <span v-else>bar</span>

• current compiled code - call createIf twice, each v-else-if generates a new createIf call

  const n0 = _createIf(() => (_ctx.msg), () => {
    const n2 = t0()
    let _msg
    _renderEffect(() => _setText(n2, _ctx.msg))
    return n2
  }, () => _createIf(() => (_ctx.foo), () => {
    const n4 = t1()
    return n4
  }, () => {
    const n7 = t2()
    return n7
  }))

• compiled code with this PR - call createIf only once, reduce overhead

  const n0 = _createIf(() => (_ctx.msg) ? () => {
    const n2 = t0()
    _renderEffect(() => _setText(n2, _ctx.msg))
    return n2
  } : _ctx.foo ? () => {
    const n4 = t1()
    return n4
  } : () => {
    const n7 = t2()
    return n7
  })

---

analysis

Initial Render

Before

• Each createIf internally call renderEffect and create a new DynamicFragment instance

After

• only one DynamicFragment instance
• only one renderEffect call

Re-Render(Update)

Before

• Nested createIf structure ensures only necessary conditions are evaluated
• Each v-else-if branch:
  • Maintains its own DynamicFragment
  • Creates separate renderEffect for dynamic content
  • EffectScope stop/create when branches switch

After

• All conditions are evaluated in sequence (seems like a drawback)
• However, in reality:
  • Condition evaluation overhead is minimal (simple variable access or basic operations)
  • Thanks to short-circuit evaluation, not all conditions will be evaluated
  • Most importantly
    • only one DynamicFragment needs to be maintained
    • only one renderEffect

Trade-offs:

• Added overhead:
  • May evaluate a few more condition expressions
  • This overhead is lightweight and immediate
• Reduced overhead:
  • Less memory allocation
  • Fewer object creations

---

benchmark

• repo URL: https://github.com/edison1105/vapor-benchmark-test
• component: Vapor sfc playground
• test 1: Update the condition of the 6th v-else-if branch (all branches will be evaluated)
• result:

// without cpu slowdown
┌─────────┬───────────────────────────────────────────────────┬───────────────────┬─────────────────────────────┐
│ (index) │ 页面 URL                                          │ 平均渲染耗时 (ms) │ 平均内存占用 (MB)           │
├─────────┼───────────────────────────────────────────────────┼───────────────────┼─────────────────────────────┤
│ 0       │ 'http://localhost:3000/pages/apiCreateIf'         │ '14.65'           │ '1735894.30 bytes, 1.66 MB' │
│ 1       │ 'http://localhost:3000/pages/apiCreateIf-PR12629' │ '14.77'           │ '1786707.30 bytes, 1.70 MB' │
└─────────┴───────────────────────────────────────────────────┴───────────────────┴─────────────────────────────┘

// with 50x cpu slowdown
┌─────────┬───────────────────────────────────────────────────┬───────────────┬─────────────────────────────┐
│ (index) │ 页面 URL                                          │ 平均耗时 (ms) │ 平均内存占用 (MB)           │
├─────────┼───────────────────────────────────────────────────┼───────────────┼─────────────────────────────┤
│ 0       │ 'http://localhost:3000/pages/apiCreateIf'         │ '66.11'       │ '1841767.10 bytes, 1.76 MB' │
│ 1       │ 'http://localhost:3000/pages/apiCreateIf-PR12629' │ '65.44'       │ '1834275.85 bytes, 1.75 MB' │
└─────────┴───────────────────────────────────────────────────┴───────────────┴─────────────────────────────┘

• test 2: Update the condition of the 3rd v-else-if branch (only up to the third branch will be evaluated)
• result:

// without cpu slowdown
┌─────────┬───────────────────────────────────────────────────┬───────────────────┬─────────────────────────────┐
│ (index) │ 页面 URL                                          │ 平均渲染耗时 (ms) │ 平均内存占用 (MB)           │
├─────────┼───────────────────────────────────────────────────┼───────────────────┼─────────────────────────────┤
│ 0       │ 'http://localhost:3000/pages/apiCreateIf'         │ '14.67'           │ '1839366.65 bytes, 1.75 MB' │
│ 1       │ 'http://localhost:3000/pages/apiCreateIf-PR12629' │ '14.55'           │ '1717949.55 bytes, 1.64 MB' │
└─────────┴───────────────────────────────────────────────────┴───────────────────┴─────────────────────────────┘

// with 50x cpu slowdown
┌─────────┬───────────────────────────────────────────────────┬───────────────┬─────────────────────────────┐
│ (index) │ 页面 URL                                          │ 平均耗时 (ms) │ 平均内存占用 (MB)           │
├─────────┼───────────────────────────────────────────────────┼───────────────┼─────────────────────────────┤
│ 0       │ 'http://localhost:3000/pages/apiCreateIf'         │ '69.40'       │ '1854872.10 bytes, 1.77 MB' │
│ 1       │ 'http://localhost:3000/pages/apiCreateIf-PR12629' │ '64.15'       │ '1822750.10 bytes, 1.74 MB' │
└─────────┴───────────────────────────────────────────────────┴───────────────┴─────────────────────────────┘

[Doctor-wu]

In the previous implementation, reactive data has an update boundary for each createIf, which is dropped in this PR (since we merge all reactive stuff into one createIf).

Considering this case

  <h1 v-if="msg">{{ msg }}</h1>
  <span v-else-if="foo">foo</span>
  <span v-else-if="foo1">foo1</span>
  <span v-else-if="foo2">foo2</span>
  <span v-else-if="foo3">foo3</span>
  <span v-else-if="foo4">foo4</span>
  <span v-else>bar</span>

If foo4 changed, we re-calc this template in the previous impl,

  <span v-else-if="foo4">foo4</span>
  <span v-else>bar</span>

but now we need re-calc the whole v-if-else chain in this PR.
We may need to do some bench on this.

[LittleSound]

Maybe we can use a table-driven approach. Add a feedback parameter, and change the ifBlockGetter part to get an array.

Like this:

export function createIf(
  ifBlockGetter: [when: () => any, block: BlockFn][]
  fallback?: BlockFn,
  once?: boolean
)

[LittleSound]

This PR provides a very simple way, and I approve of it.

I checked and found that currently solid is also using the method of recomputing the entire chain each time.

Maybe we don't need to add extra complexity due to the performance hit of recomputing the entire if-else-if chain.