新兴前端框架Svelte？能否超越ReactVueAngul

　　头条创作挑战赛
　　大家好，很高兴又见面了，我是前端进阶，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发！
　　在这篇文章中，我们将会介绍Svelte框架的特性、优缺点和底层原理。
　　本文尽量不会涉及Svelte的语法，大家可以放心食用。因为Svelte的语法极其简单，而且官方教程学习曲线平缓https：www。sveltejs。cn，相信大家很快就会上手语法的，这里就不做官网搬运工了。
　　前端领域是发展迅速，各种轮子层出不穷的行业。最近这些年，随着三大框架React、Vue、Angular版本逐渐稳定，前端技术栈的迭代似乎缓慢下来，React16版本推出了Fiber，Vue3。0也已经在襁褓之中。如果我们把目光拉伸到未来十年的视角，前端行业会出现哪些框架有可能会挑战React或者Vue呢？我们认为，崭露头角的Svelte应该是其中的选项之一。Svelte简介
　　Svelte叫法是〔Svelte〕，本意是苗条纤瘦的，是一个新兴热门的前端框架。
　　在最新的《StateofJSsurveyof2020》中，它被预测为未来十年可能取代React和Vue等其他框架的新兴技术。如果你不确定自己是否该了解Svelte，可以先看一下Svelte的一些发展趋势。开发者满意度
　　从2019年开始，Svelte出现在榜单中。刚刚过去的2020年，Svelte在满意度排行榜中超越了react，跃升到了第一位。
　　开发者兴趣度
　　在开发者兴趣度方面，Svelte蝉联了第一
　　市场占有率
　　如果你在19年还没有听说过Svelte，不用紧张，因为svelte当时仍是小众的开发框架，在社区里仍然没有流行开来。
　　2020年，Svelte的市场占有率从第6名跃升到第4名，仅次于React、Angular、Vue老牌前端框架。svelte作者RichHarris
　　Svelte作者是前端轮子哥RichHarris，同时也是Rollup的作者。RichHarris作者本人在介绍Svelte时，有一个非常精彩的演讲《Rethinkingreactivity》，油管连接https：www。youtube。comwatch？vAdNJ3fydeaot1900s，感兴趣的同学不要错过。
　　他设计Svelte的核心思想在于通过静态编译减少框架运行时的代码量，也就是说，vue和react这类传统的框架，都必须引入运行时（runtime）代码，用于虚拟dom、diff算法。Svelted完全溶入JavaScript，应用所有需要的运行时代码都包含在bundle。js里面了，除了引入这个组件本身，你不需要再额外引入一个运行代码。Svelte优势有哪些
　　我们先来看一下Svelte和React，Vue相比，有哪些优势。NoRuntime无运行时代码
　　React和Vue都是基于运行时的框架，当用户在你的页面进行各种操作改变组件的状态时，框架的运行时会根据新的组件状态（state）计算（diff）出哪些DOM节点需要被更新，从而更新视图。
　　这就意味着，框架本身所依赖的代码也会被打包到最终的构建产物中。这就不可避免增加了打包后的体积，有一部分的体积增加是不可避免的，那么这部分体积大约是多少呢？请看下面的数据：
　　常用的框架中，最小的Vue都有58k，React更有97。5k。我们使用React开发一个小型组件，即使里面的逻辑代码很少，但是打包出来的bundlesize轻轻松松都要100k起步。对于大型后台管理系统来说，100k不算什么，但是对于特别注重用户端加载性能的场景来说，一个组件100k多，还是太大了。
　　如果你特别在意打包出来的体积，Svelte就是一个特别好的选择。下面是JacekSchae大神的统计，使用市面上主流的框架，来编写同样的Realword应用的体积：
　　从上图的统计，Svelte简直是神奇！竟然只有9。7KB！果然魔法消失UI框架，无愧其名。
　　可以看出，Svelte的bundlesize大小是Vue的14，是React的120，体积上的优势还是相当明显的。LessCode写更少的代码
　　在写svelte组件时，你就会发现，和Vue或React相比只需要更少的代码。开发者的梦想之一，就是敲更少的代码。因为更少的代码量，往往意味着有更好的语义性，也有更少的几率写出bug。
　　下面的例子，可以看出Svelte和React的不同：React的代码const〔count，setCount〕useState（0）；functionincrement（）｛setCount（count1）；｝Svelte的代码letcount0；functionincrement（）｛count1；｝
　　虽然用上了16版本最新的hooks，但是和svelte相比，代码还是很冗余。
　　在React中，我们要么使用useState钩子，要么使用setState设置状态。而在Svelte中，可以直接使用赋值操作符更新状态。
　　如果说上面的例子太简单了，可以看下面的统计，分别使用React和Svelte实现下面的组件所需要的代码行数
　　下面还是JacekSchae老哥的统计，编写同样的Realword应用，各个框架所需要的行数
　　Vue和React打了平手，Svelte遥遥领先，可以少些1000行代码耶！早日下班，指日可待。HightPerformance高性能
　　在VirtualDom已经是前端框架标配的今天，Svelte声称自己是没有VirtualDom加持的，怎么还能保证高性能呢？
　　不急，慢慢看。性能测评
　　JacekSchae在《ARealWorldComparisonofFrontEndFrameworkswithBenchmarks》中用主流的前端框架来编写RealWorld应用，使用Chrome的LighthouseAudit测试性能，得出数据是Svelte略逊于Vue，但好于React。
　　是不是很惊奇？另外一个前端框架性能对比的项目也给出了同样的答案。https：github。comkrausestjsframeworkbenchmark
　　为什么Svelte性能还不错，至少没有我们预期的那么糟糕？我们接下来会在原理那一小结来介绍。Svelte劣势
　　说完了Svelte的优势，我们也要考虑到Svelte的劣势。和Vue，React框架的对比
　　在构建大型前端项目时，我们在选择框架的时候就需要考虑更多的事情。Svelte目前尚处在起步阶段，对于大型项目必要的单元测试并没有完整的方案。目前在大型应用中使用Svelte，需要谨慎评。
　　我们在用Svelte开发公司级别中大型项目时，也发现了其他的一些主要注意的点没有像AntD那样成熟的UI库。比如说需求方想加一个toast提示，或者弹窗，pm：很简单的，不用出UI稿，就直接用之前的样式好啦
　　但是Svelte需要从0开始抄出来一个toast或者弹窗组件出来，可能会带来额外的开发量和做好加班的准备。Svelte原生不支持预处理器，比如说lessscss，需要自己单独的配置webpackloader。Svelte原生脚手架没有目录划分暂时不支持typescript，虽然官方说了会支持，但是不知道什么时候。
　　还需要注意的一点是，ReactVue等框架自带的runtime虽然会增加首屏加载的bundle。js，可是当项目变得越来越大的时候，框架的runtime在bundle。js里面占据的比例也会越来越小，这个时候我们就得考虑一下是不是存在一个Svelte生成的代码大于React和Vue生成的代码的阈值了。原理篇
　　Svelte原理相对于React和Vue来说，相对比较简单，大家可以放心的往下看。
　　首先，我们从一个问题出发：VirtualDom真的高效吗
　　RichHarris在设计Svelte的时候没有采用VirtualDOM是因为觉得VirtualDOMDiff的过程是非常低效的。
　　在他的一文《VirtualDOMispureoverhead》原文连接在这里，https：www。sveltejs。cnblogvirtualdomispureoverhead有介绍，感兴趣的同学可以翻一下。
　　人们觉得VirtualDOM高效的一个理由，就是它不会直接操作原生的DOM节点。在浏览器当中，JavaScript的运算在现代的引擎中非常快，但DOM本身是非常缓慢的东西。当你调用原生DOMAPI的时候，浏览器需要在JavaScript引擎的语境下去接触原生的DOM的实现，这个过程有相当的性能损耗。
　　但其实VirtualDOM有时候会做很多无用功，这体现在很多组件会被无缘无故进行重渲染（rerender）。
　　比如说，下面的例子中，React为了更新掉message对应的DOM节点，需要做n多次遍历，才能找到具体要更新哪些节点。
　　为了解决这个问题，React提供pureComponent，shouldComponentUpdate，useMemo，useCallback让开发者来操心哪些subtree是需要重新渲染的，哪些是不需要重新渲染的。究其本质，是因为React采用jsx语法过于灵活，不理解开发者写出代码所代表的意义，没有办法做出优化。
　　所以，React为了解决这个问题，在v16。0带来了全新的Fiber架构，Fiber思路是不减少渲染工作量，把渲染工作拆分成小任务思路是不减少渲染工作量。渲染过程中，留出时间来处理用户响应，让用户感觉起来变快了。这样会带来额外的问题，不得不加载额外的代码，用于处理复杂的运行时调度工作那么Svelte是如何解决这个问题的？
　　React采用jsx语法本质不理解数据代表的意义，没有办法做出优化。Svelte采用了Templates语法（类似于Vue的写法），更加严格和具有语义性，可以在编译的过程中就进行优化操作。
　　那么，为什么Templates语法可以解决这个问题呢？Template带来的优势
　　关于JSX与Templates，可以看成是两种不同的前端框架渲染机制，有兴趣的同学可以翻一下尤雨溪的演讲《在框架设计中寻求平衡》。https：www。bilibili。comvideoav80042358
　　一方面，JSX的代表框架有React以及所有reactlike库，比如preact、stencil，infernal等；另一方面，Templates代表性的解决方案有Vue、Svelte、ember，各有优缺点。
　　JSX优缺点
　　jsx具有JavaScript的完整表现力，非常具有表现力，可以构建非常复杂的组件。
　　但是灵活的语法，也意味着引擎难以理解，无法预判开发者的用户意图，从而难以优化性能。你很可能会写出下面的代码：
　　在使用JavaScript的时候，编译器不可能hold住所有可能发生的事情，因为JavaScript太过于动态化。也有人对这块做了很多尝试，但从本质上来说很难提供安全的优化。Template优缺点
　　Template模板是一种非常有约束的语言，你只能以某种方式去编写模板。
　　例如，当你写出这样的代码的时候，编译器可以立刻明白：哦！这些p标签的顺序是不会变的，这个id是不会变的，这些class也不会变的，唯一会变的就是这个。
　　在编译时，编译器对你的意图可以做更多的预判，从而给它更多的空间去做执行优化。
　　左侧template中，其他所有内容都是静态的，只有name可能会发生改变。
　　右侧p函数是编译生成的最终的产物，是原生的js可以直接运行在浏览器里，会在有脏数据时被调用。p函数唯一做的事情就是，当name发生变更的时候，调用原生方法把t1这个原生DOM节点更新。这里的setdata可不是React的setState或者小程序的setData，这里的setdata就是封装的原生的javascript操作DOM节点的方法。
　　如果我们仔细观察上面的代码，发现问题的关键在于if语句的判断条件changed。name，表示有哪些变量被更新了，这些被更新的变量被称为脏数据。
　　任何一个现代前端框架，都需要记住哪些数据更新了，根据更新后的数据渲染出最新的DOMSvelte记录脏数据的方式：位掩码（bitMask）
　　Svelte使用位掩码（bitMask）的技术来跟踪哪些值是脏的，即自组件最后一次更新以来，哪些数据发生了哪些更改。
　　位掩码是一种将多个布尔值存储在单个整数中的技术，一个比特位存放一个数据是否变化，一般1表示脏数据，0表示是干净数据。
　　用大白话来讲，你有A、B、C、D四个值，那么二进制00000001表示第一个值A发生了改变，00000010表示第二个值B发生了改变，00000100表示第三个值C发生了改变，00001000表示第四个D发生了改变。
　　这种表示法，可以最大程度的利用空间。为啥这么说呢？
　　比如说，十进制数字3就可以表示A、B是脏数据。先把十进制数字3，转变为二进制00000011。从左边数第一位、第二位是1，意味着第一个值A和第二个值B是脏数据；其余位都是0，意味着其余数据都是干净的。
　　JS的限制
　　那么，是不是用二进制比特位就可以记录各种无穷无尽的变化了呢？
　　JS的二进制有31位限制，number类型最长是32位，减去1位用来存放符号。也就是说，如果Svelte采用二进制位存储的方法，那么只能存31个数据。
　　但肯定不能这样，对吧？
　　Svelte采用数组来存放，数组中一项是二进制31位的比特位。假如超出31个数据了，超出的部分放到数组中的下一项。
　　这个数组就是component。。dirty数组，二进制的1位表示该对应的数据发生了变化，是脏数据，需要更新；二进制的0位表示该对应的数据没有发生变化，是干净的。一探究竟component。。dirty
　　上文中，我们说到component。。dirty是数组，具体这个数组长什么样呢？
　　我们模拟一个Svelte组件，这个Svelte组件会修改33个数据。
　　我们打印出每一次makedirty之后的component。。dirty，为了方便演示，转化为二进制打印出来，如下面所示：
　　上面数组中的每一项中的每一个比特位，如果是1，则代表着该数据是否是脏数据。如果是脏数据，则意味着更新。第一行〔0000000000000000000000000000001，0000000000000000000000000000000〕，表示第一个数据脏了，需要更新第一个数据对应的dom节点第二行〔0000000000000000000000000000011，0000000000000000000000000000000〕，表示第一个、第二个数据都脏了，需要更新第一个，第二个数据对应的dom节点。
　　当一个组件内，数据的个数，超出了31的数量限制，就数组新增一项来表示。
　　这样，我们就可以通过component。。dirty这个数组，清楚的知道有哪些数据发生了变化。那么具体应该更新哪些DOM节点呢？数据和DOM节点之间的对应关系
　　我们都知道，React和Vue是通过VirtualDom进行diff来算出来更新哪些DOM节点效率最高。Svelte是在编译时候，就记录了数据和DOM节点之间的对应关系，并且保存在p函数中。
　　这里说的p函数，就是Svelte的更新方法，本质上就是一大堆if判断，逻辑非常简单if（A数据变了）｛更新A对应的DOM节点｝if（B数据变了）｛更新B对应的DOM节点｝
　　为了更加直观的理解，我们模拟更新一下33个数据的组件，编译得到的p函数打印出来，如：
　　我们会发现，里面就是一大堆if判断，但是if判断条件比较有意思，我们从上面摘取一行仔细观察一下：
　　首先要注意，不是逻辑与，而是按位与，会把两边数值转为二进制后进行比较，只有相同的二进制位都为1才会为真。
　　这里的if判断条件是：拿compoenent。。dirty〔0〕（00000000000000000000000000000100）和4（4转变为二进制是00000100）做按位并操作。那么我们可以思考一下了，这个按位并操作什么时候会返回1呢？
　　4是一个常量，转变为二进制是00000100，第三位是1。那么也就是，只有dirty〔0〕的二进制的第三位也是1时，表达式才会返回真。换句话来说，只有第三个数据是脏数据，才会走入到这个if判断中，执行setdata（t5，ctx〔2〕），更新t5这个DOM节点。
　　当我们分析到这里，已经看出了一些眉目，让我们站在更高的一个层次去看待这30多行代码：它们其实是保存了这33个变量和真实DOM节点之间的对应关系，哪些变量脏了，Svelte会走入不同的if体内直接更新对应的DOM节点，而不需要复杂VirtualDOMDIFF算出更新哪些DOM节点；
　　这30多行代码，是Svelte编译了我们写的Svelte组件之后的产物，在Svelte编译时，就已经分析好了，数据和DOM节点之间的对应关系，在数据发生变化时，可以非常高效的来更新DOM节点。
　　Vue曾经也是想采取这样的思路，但是Vue觉得保存每一个脏数据太消耗内存了，于是没有采用那么细颗粒度，而是以组件级别的中等颗粒度，只监听到组件的数据更新，组件内部再通过DIFF算法计算出更新哪些DOM节点。Svelte采用了比特位的存储方式，解决了保存脏数据会消耗内存的问题。整体流程
　　上面就是Svelte最核心更新DOM机制，下面我们串起来整个的流程。
　　下面是非常简单的一个Svelte组件，点击会触发onClick事件，从而改变name变量。
　　上面代码背后的整体流程如下图所示，我们一步一步来看：
　　第一步，Svelte会编译我们的代码，下图中左边是我们的源码，右边是Svelte编译生成的。Svelte在编译过程中发现，咦，这里有一行代码name被重新赋值了，我要插入一条makedirty的调用，于是当我们改写name变量的时候，就会调用makedirty方法把name记为脏数据。
　　第二步，我们来看makediry方法究竟做了什么事情：把对应数据的二进制改为1把对应组件记为脏组件，推入到dirtycomponents数组中调用scheduleupdate（）方法把flush方法推入到一帧中的微任务阶段执行。因为这样既可以做频繁更新的截流，又避免了阻塞一帧中的layout，repaint阶段的渲染。
　　scheduleupdate方法其实就是一个promise。then（），
　　一帧大概有16ms，大概会经历layout，repaint的阶段后，就可以开始执行微任务的回调了。
　　flush方法做的事情也比较简单，就是遍历脏组件，依次调用update方法去更新对应的组件。
　　update方法除了执行一些生命周期的方法外，最核心的一行代码是调用p方法，p方法我们已经在上文中介绍过很熟悉了。
　　p方法的本质就是走入到不同的if判断里面，调用setdata原生的javascript方法更新对应的DOM节点。
　　至此，我们的页面的DOM节点就已经更新好了。
　　上面的代码均是剔除了分支逻辑的伪代码。
　　Svelte在处理子节点列表的时候，还是有优化的算法在的。比如说〔a，b，c，d〕变成〔d，a，b，c〕，但是只是非常简单的优化，简单来说，是比较节点移动距离的绝对值，绝对值最小的节点被移动。
　　所以，严格意义上来说，Svelte并不是100无运行时，还是会引入额外的算法逻辑，只是量很少罢了。总结
　　一个前端框架，不管是vue还是react更新了数据之后，需要考虑更新哪个dom节点，也就是，需要知道，脏数据和待更新的真实dom之间的映射。vue，react是通过virtualDom来diff计算出更新哪些dom节点更划算，而sveltedom是把数据和真实dom之间的映射关系，在编译的时候就通过AST等算出来，保存在p函数中。
　　Svelte作为新兴的前端框架，采用了和React，Vue不同的设计思路，其独特的特性在某些场景下还是很值得尝试的。参考资料原文链接：https：zhuanlan。zhihu。comp350507037
　　字节前端的技术实践分享微信公众号：字节前端ByteFE
　　头条创作挑战赛