完了,又火一个前端项目

又一个前端超新星项目 ?html

你们好,我是鱼皮。前端

今天逛 GitHub 的时候,在趋势榜上看到一个项目,居然短短一天的时间内,涨了 1000 多个星星!node

就是这个名为 solid 的项目:前端框架

要知道日增上千 star 但是很是可贵的,我不由感到好奇,点进去看看这个项目到底有啥牛逼的?markdown

啥是 Solid?

这是一个国外的前端项目,截止到发文前,已经收获了 8400 个 star。app

我总以为这个项目很眼熟,好像以前也看到过,因而去 Star History 上搜了一下这个项目的 star 增加历史。好家伙,这几天的增速曲线几乎接近垂直,已经连续好几天增加近千了!框架

项目 Star 增加曲线

看到这个曲线,我想起来了,solid 是一个 JavaScript 框架,此前在一次 JavaScript 框架的性能测试中看到过它。oop

要知道,如今的 JavaScript 开发框架基本就是 React、Vue、Angular 三分天下,还有就是新兴的 Svelte 框架潜力无限(近 5w star),其余框架想分蛋糕仍是很难的。那么 Solid 到底有什么本事,能让他连续几天 star 数暴涨呢?性能

描述

打开官网,官方对 Solid 的描述是:一个用于构建用户界面的 声明性 JavaScript 库,特色是高效灵活。学习

顺着官网往下看,Solid 有不少特色,好比压缩后的代码体积只有 6 kb;并且自然支持 TypeScript 以及 React 框架中常常编写的 JSX(JavaScript XML)。

来看看官网给的示例代码:

Solid 语法

怎么样,他的语法是否是和 React 神似?

性能

可是,这些并不能帮助 Solid 框架脱颖而出,真正牛逼的一点是它 很是快

有多快呢?第一够不够 !

JS 框架性能测试对比

有同窗说了,你这不睁着眼睛说瞎话么?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!

跑了,留下 6T 的资源!

我是如何经过自学,拿到腾讯、字节等大厂 offer 的,能够看这篇文章,再也不迷茫!

我学计算机的四年,共勉!

我是鱼皮,点赞 仍是要求一下的,祝你们都能心想事成、发大财、行大运。

相关文章
相关标签/搜索