干货 | 携程机票前端Svelte生产实践

作者简介

 

shuan feng，携程高级前端开发工程师，关注性能优化、低代码、svelte等领域。

一、技术调研

最近几年，前端框架层出不穷。近两年，前端圈又出了一个新宠：Svelte。作者是 Rich Harris，也就是 Ractive, Rollup 和 Buble的作者，前端界的“轮子哥”。

通过静态编译减少框架运行时的代码量。一个 Svelte 组件编译之后，所有需要的运行时代码都包含在里面了，除了引入这个组件本身，你不需要再额外引入一个所谓的框架运行时！

在Github上拥有 5w 多的 star！

在最新的State of JS 2021和Stack Overflow Survey 2021的排名情况中，也一定程度上反映了它的火热程度。

在早前知乎的如何看待 svelte 这个前端框架？问题下面，Vue的作者尤雨溪也对其做出了极高的评价：

去它的官网看一下：

官网上清楚的表明了三大特性：

• • Write less code

• • No virtual DOM

• • Truly reactive

1.1 Write less code

顾名思义，是指实现相同的功能，Svelte的代码最少。这一点会在后面的示例中有所体现。

1.2 No virtual DOM

Svelte的实现没有利用虚拟DOM，要知道Vue和React的实现都是利用了虚拟DOM的，而且虚拟DOM不是一直都很高效的吗？

Virtual DOM 不是一直都很高效的吗？

其实 Virtual DOM高效是一个误解。说 Virtual DOM 高效的一个理由就是它不会直接操作原生的 DOM 节点，因为这个很消耗性能。当组件状态变化时，它会通过某些 diff 算法去计算出本次数据更新真实的视图变化，然后只改变需要改变的 DOM 节点。

用过 React 的同学可能都会体会到 React 并没有想象中那么高效，框架有时候会做很多无用功，这体现在很多组件会被“无缘无故”进行重渲染（re-render）。所谓的 re-render 是你定义的 class Component 的 render 方法被重新执行，或者你的组件函数被重新执行。

组件被重渲染是因为 Vitual DOM 的高效是建立在 diff 算法上的，而要有 diff 一定要将组件重渲染才能知道组件的新状态和旧状态有没有发生改变，从而才能计算出哪些 DOM 需要被更新。

正是因为框架本身很难避免无用的渲染，React 才允许你使用一些诸如 shouldComponentUpdate，PureComponent 和 useMemo 的 API 去告诉框架哪些组件不需要被重渲染，可是这也就引入了很多模板代码。

那么如何解决 Vitual DOM 算法低效的问题呢？最有效的解决方案就是不用 Virtual DOM！

1.3 Truly reactive

第三点真正的响应式，上面也提到了前端框架要解决的首要问题就是：当数据发生改变的时候相应的 DOM 节点会被更新，这个就是reactive。

我们先来看下Vue和React