又一个前端超新星项目 ?html
你们好,我是鱼皮。前端
今天逛 GitHub 的时候,在趋势榜上看到一个项目,居然短短一天的时间内,涨了 1000 多个星星!node
就是这个名为 solid
的项目:前端框架
要知道日增上千 star 但是很是可贵的,我不由感到好奇,点进去看看这个项目到底有啥牛逼的?markdown
这是一个国外的前端项目,截止到发文前,已经收获了 8400 个 star。app
我总以为这个项目很眼熟,好像以前也看到过,因而去 Star History
上搜了一下这个项目的 star 增加历史。好家伙,这几天的增速曲线几乎接近垂直,已经连续好几天增加近千了!框架
看到这个曲线,我想起来了,solid 是一个 JavaScript 框架,此前在一次 JavaScript 框架的性能测试中看到过它。oop
要知道,如今的 JavaScript 开发框架基本就是 React、Vue、Angular 三分天下,还有就是新兴的 Svelte 框架潜力无限(近 5w star),其余框架想分蛋糕仍是很难的。那么 Solid 到底有什么本事,能让他连续几天 star 数暴涨呢?性能
打开官网,官方对 Solid 的描述是:一个用于构建用户界面的 声明性 JavaScript 库,特色是高效灵活。学习
顺着官网往下看,Solid 有不少特色,好比压缩后的代码体积只有 6 kb;并且自然支持 TypeScript 以及 React 框架中常常编写的 JSX(JavaScript XML)。
来看看官网给的示例代码:
怎么样,他的语法是否是和 React 神似?
可是,这些并不能帮助 Solid 框架脱颖而出,真正牛逼的一点是它 很是快 。
有多快呢?第一够不够 !
有同窗说了,你这不睁着眼睛说瞎话么?Solid 明明是第二,第一是 Vanilla 好吧!
哈哈,但事实上,Vanilla 其实就是不使用任何框架的纯粹的原生 JavaScript,一般做为一个性能比较的基准。
那么 Solid 为何能作到这么快呢?甚至超越了咱们引觉得神的 Vue 和 React。
这是由于 Solid 没有采用其余主流前端框架中的 Virtual DOM,而是直接被静态编译为真实的原生 DOM 节点,而且将更新控制在细粒度的局部范围内。从而让 runtime(运行时)更加轻小,也不须要所谓的脏检查和摘要循环带来的额外消耗,使得性能和原生 JavaScript 几乎无异。换句话说,编译后的 Solid 其实就是 JavaScript!
其实 Solid 的原理和新兴框架 Svelte 的原理很是相似,都是编译成原生 DOM,但为啥他更快一点呢?
为了搞清楚这个问题,我打开了百度来搜这玩意,但发如今国内根本搜不到几条和 Solid.js 有关的内容,基本全是一些乱七八糟的东西。后来仍是在 Google 上搜索,才找到了答案,结果答案居然仍是来自于某乎的大神伊撒尔。。。
要搞清楚为何 Solid 比 Svelte 更快,就要看看同一段代码通过它们编译后,有什么区别。
大神很贴心地举了个例子,好比这句代码:
<div>{aaa}</div>
复制代码
经 Svelte 编译后的代码:
let a1, a2
a1 = document.creatElement('div')
a2 = docment.createTextNode('')
a2.nodeValue = ctx[0] // aaa
a1.appendChild(a2)
复制代码
经 Solid 编译后的代码:
let a1, a2
let fragment = document.createElement('template')
fragment.innerHTML = `<div>aaa</div>`
a1 = fragment.firstChild
a2 = a1.fristChild
a2.nodeValue = data.aaa
复制代码
能够看到,在建立 DOM 节点时,原来 Solid 耍了一点小把戏,利用了 innerHTML 代替 createElement 来建立,从而进一步提高了性能。
固然,抛去 Virtual DOM 不意味着就是 “银弹” 了,毕竟十年前各类框架出现前你们也都是写原生 JavaScript,轻 runtime 也有缺点,这里就不展开说了。
除了快以外,Solid 还有一些其余的特色,好比语法精简、WebComponent 友好(可自定义元素)等。
总的来讲, 我我的仍是很是看好这项技术的,往后说不定能和 Svelte 一块儿动摇一下三巨头的地位,给你们更多的选择呢?这也是技术选型好玩的地方,没有绝对最好的技术,只有最适合的技术。
不由感叹道:唉,技术发展太快了,一生学不完啊!(不过前端初学者不用关心那么多,老老实实学基础三件套 + Vue / React 就好了)
最后再送你们一些 帮助我拿到大厂 offer 的学习资源,高达 6 T!
我是如何经过自学,拿到腾讯、字节等大厂 offer 的,能够看这篇文章,再也不迷茫!
我是鱼皮,点赞 仍是要求一下的,祝你们都能心想事成、发大财、行大运。