Svelte框架入门

关键词

前端框架、编译器、响应式、模板

介绍

Svelte /svelt/ adj. 苗条的;线条清晰的;和蔼的
Svelte是一个前端组件框架,就像它的英文名字一样,Svelte的目标是打造一个更高性能的响应性前端框架。
Svelte类似于React和Vue框架,提供模板语法和响应式编程。但是有一个重要的区别:Svelte是一个编译时的框架,在编译的过程中生成组件运行时的代码并实现响应式,而React和Vue则是基于虚拟DOM及Diff实现运行时的响应式。
这正是Svelte宣传的提高性能的核心实现。我们知道,原生的性能肯定是最高的,没有中间多余的转换和对比等框架层的逻辑消耗性能。或许有同学就会问,那我们在JQuery时代写的代码性能不是更好吗?为什么感觉上却没有比react和Vue写的应用性能好呢。我想,这主要是以下几个原因:

  1. 现在的硬件和网络带宽等资源已经比以往有了大幅度的提升,所以就算应用的体积较以往比较大,相比硬件等资源的提升,反而会感觉上性能更好;

  2. JQuery是基于原生的DOM API封装和扩展了统一的接口,屏蔽了浏览器底层的差异。但是很多开发人员在使用时并没有考虑DOM变更对性能带来的影响,只是简单的用JQuery对DOM进行粗暴的全局更新;

  3. Vue和React虽然是引入虚拟DOM,需要Diff等逻辑维护和更新实际的DOM树,但是框架本身做了优化,Diff算法和更新策略也有很大的提升,所以性能上并没有感觉比原生的差很多。

虽然Vue和React如今已经满足了前端大部分的场景,Svelte的目标是追求更好的性能 (所以前端是真的卷,总有人乐此不疲的遭轮子,但也正是这些人在推动着前端的不断发展) 。Svelte提供类似Vue单文件组件的模板语法,然后编译成原生JavaScript,提供了一套相对于我们自己操作DOM,更优雅,更高效的更新方案。我们可以基于Svelte官网提供的REPL直观的了解一下编译的过程:

组件文件源码,App.svelte实现了一个简单的点击按钮统计点击次数的功能。

// App.svelte

你可能感兴趣的:(前端)