关于javascript:简单好懂的Svelte实现原理

大家好，我卡颂。

Svelte问世很久了，始终想写一篇好懂的原理剖析文章，拖了这么久终于写了。

本文会围绕一张流程图和两个 Demo 解说，正确的食用形式是用电脑关上本文，跟着流程图、Demo一边看、一边敲、一边学。

让我么开始吧。

Demo1

Svelte的实现原理如图：

图中 Component 是开发者编写的组件，外部虚线局部是由 Svelte 编译器编译而成的。图中的各个箭头是运行时的工作流程。

首先来看编译时，思考如下 App 组件代码：

<h1>{count}</h1>

<script>
  let count = 0;
</script>

残缺代码见 Demo1 repl

浏览器会显示：

这段代码经由编译器编译后产生如下代码，包含三局部：

• create_fragment办法
• count的申明语句
• class App的申明语句

// 省略局部代码…
function create_fragment(ctx) {
  let h1;

  return {c() {h1 = element("h1");
      h1.textContent = `${count}`;
    },
    m(target, anchor) {insert(target, h1, anchor);
    },
    d(detaching) {if (detaching) detach(h1);
    }
  };
}

let count = 0;

class App extends SvelteComponent {constructor(options) {super();
    init(this, options, null, create_fragment, safe_not_equal, {});
  }
}

export default App;

create_fragment

首先来看 create_fragment 办法，他是编译器依据 App 的UI编译而成，提供该组件与浏览器交互的办法，在上述编译后果中，蕴含 3 个办法：

• c，代表 create，用于依据模版内容，创立对应DOM Element。例子中创立H1 对应DOM Element：

h1 = element("h1");
h1.textContent = `${count}`;

• m，代表 mount，用于将c 创立的 DOM Element 插入页面，实现组件首次渲染。例子中会将 H1 插入页面：

insert(target, h1, anchor);

insert办法会调用target.insertBefore：

function insert(target, node, anchor) {target.insertBefore(node, anchor || null);
}

• d，代表 detach，用于将组件对应DOM Element 从页面中移除。例子中会移除H1：

if (detaching) detach(h1);

detach办法会调用parentNode.removeChild：

function detach(node) {node.parentNode.removeChild(node);
}

仔细观察流程图，会发现 App 组件编译的产物没有图中 fragment 内的 p 办法。

这是因为 App 没有 变动状态 的逻辑，所以相应办法不会呈现在编译产物中。

能够发现，create_fragment返回的 c、m 办法用于组件首次渲染。那么是谁调用这些办法呢？

SvelteComponent

每个组件对应一个继承自 SvelteComponent 的class，实例化时会调用 init 办法实现组件初始化，create_fragment会在 init 中调用：

class App extends SvelteComponent {constructor(options) {super();
    init(this, options, null, create_fragment, safe_not_equal, {});
  }
}

总结一下，流程图中虚线局部在 Demo1 中的编译后果为：

• fragment：编译为 create_fragment 办法的返回值
• UI：create_fragment返回值中 m 办法的执行后果
• ctx：代表组件的上下文，因为例子中只蕴含一个不会扭转的状态 count，所以ctx 就是 count 的申明语句

能够扭转状态的 Demo

当初批改 Demo，减少update 办法，为 H1 绑定点击事件，点击后 count 扭转：

<h1 on:click="{update}">{count}</h1>

<script>
  let count = 0;
  function update() {count++;}
</script>

残缺代码见 Demo2 repl

编译产物发生变化，ctx的变动如下：

// 从 module 顶层的申明语句
let count = 0;

// 变为 instance 办法
function instance($$self, $$props, $$invalidate) {
  let count = 0;

  function update() {$$invalidate(0, count++, count);
  }

  return [count, update];
}

count从 module 顶层的申明语句变为 instance 办法内的变量。之所以产生如此变动是因为 App 能够实例化多个：

// 模版中定义 3 个 App
<App/>
<App/>
<App/>

// 当 count 不可变时，页面渲染为：<h1>0</h1>
<h1>0</h1>
<h1>0</h1>

当 count 不可变时，所有 App 能够复用同一个 count。然而当count 可变时，依据不同 App 被点击次数不同，页面可能渲染为：

<h1>0</h1>
<h1>3</h1>
<h1>1</h1>

所以每个 App 须要有独立的上下文保留 count，这就是instance 办法的意义。推广来说，Svelte编译器会追踪 <script> 内所有变量申明：

• 是否蕴含扭转该变量的语句，比方count++
• 是否蕴含从新赋值的语句，比方count = 1
• 等等状况

一旦发现，就会将该变量提取到 instance 中，instance执行后的返回值就是组件对应ctx。

同时，如果执行如上操作的语句能够通过模版被援用，则该语句会被 $$invalidate 包裹。

在 Demo2 中，update办法满足：

• 蕴含扭转 count 的语句 —— count++
• 能够通过模版被援用 —— 作为点击回调函数

所以编译后的 update 内扭转 count 的语句被 $$invalidate 办法包裹：

// 源代码中的 update
function update() {count++;}

// 编译后 instance 中的 update
function update() {$$invalidate(0, count++, count);
}

从流程图可知，$$invalidate办法会执行如下操作：

• 更新 ctx 中保留状态的值，比方 Demo2 中count++
• 标记 dirty，即标记App UI 中所有和 count 相干的局部将会发生变化
• 调度更新，在 microtask 中调度本次更新，所有在同一个 macrotask 中执行的 $$invalidate 都会在该 macrotask 执行实现后被对立执行，最终会执行组件 fragment 中的 p 办法

p办法是 Demo2 中新的编译产物，除了 p 之外，create_fragment已有的办法也产生相应变动：

c() {h1 = element("h1");
  // count 的值变为从 ctx 中获取
  t = text(/*count*/ ctx[0]);
},
m(target, anchor) {insert(target, h1, anchor);
  append(h1, t);
  // 事件绑定
  dispose = listen(h1, "click", /*update*/ ctx[1]);
},
p(ctx, [dirty]) {
  // set_data 会更新 t 保留的文本节点
  if (dirty & /*count*/ 1) set_data(t, /*count*/ ctx[0]);
},
d(detaching) {if (detaching) detach(h1);
  // 事件解绑
  dispose();}

p办法会执行 $$invalidate 中标记为 dirty 的项对应的更新函数。

在 Demo2 中，App UI中只援用了状态 count，所以update 办法中只有一个 if 语句，如果 UI 中援用了多个状态，则 p 办法中也会蕴含多个 if 语句：

// UI 中援用多个状态 
<h1 on:click="{count0++}">{count0}</h1>
<h1 on:click="{count1++}">{count1}</h1>
<h1 on:click="{count2++}">{count2}</h1>

对应 p 办法蕴含多个 if 语句：

p(new_ctx, [dirty]) {
  ctx = new_ctx;
  if (dirty & /*count*/ 1) set_data(t0, /*count*/ ctx[0]);
  if (dirty & /*count1*/ 2) set_data(t2, /*count1*/ ctx[1]);
  if (dirty & /*count2*/ 4) set_data(t4, /*count2*/ ctx[2]);
},

Demo2残缺的更新步骤如下：

1. 点击 H1 触发回调函数update
2. update内调用 $$invalidate，更新ctx 中的 count，标记count 为dirty，调度更新
3. 执行 p 办法，进入 dirty 的项（即 count）对应if 语句，执行更新对应 DOM Element 的办法

总结

Svelte的残缺工作流程会简单的多，然而外围实现便是如此。

咱们能够直观的感触到，借由模版语法的束缚，通过编译优化，能够间接建设 状态与要扭转的 DOM 节点的对应关系。

在 Demo2 中，状态 count 的变动间接对应 p 办法中一个 if 语句，使得 Svelte 执行 细粒度的更新 时比照应用 虚构 DOM的框架更有性能劣势。

上述性能剖析中第四行 select row 就是一个 细粒度的更新。想比拟之下，React（倒数第三列）性能就差很多。

欢送退出人类高质量前端框架群，带飞