前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >完了,又火一个项目

完了,又火一个项目

原创
作者头像
程序员鱼皮
发布于 2021-07-10 06:16:40
发布于 2021-07-10 06:16:40
5710
举报
文章被收录于专栏:鱼皮客栈鱼皮客栈

又一个前端超新星项目 ?

大家好,我是鱼皮。

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

就是这个名为 solid 的项目:

要知道日增上千 star 可是非常难得的,我不禁感到好奇,点进去看看这个项目到底有啥牛逼的?

啥是 Solid?

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

我总觉得这个项目很眼熟,好像之前也看到过,于是去 Star History 上搜了一下这个项目的 star 增长历史。好家伙,这几天的增速曲线几乎接近垂直,已经连续好几天增长近千了!

项目 Star 增长曲线
项目 Star 增长曲线

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

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

描述

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

顺着官网往下看,Solid 有很多特点,比如压缩后的代码体积只有 6 kb;而且天然支持 TypeScript 以及 React 框架中经常编写的 JSX(JavaScript XML)。

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

Solid 语法
Solid 语法

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

性能

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

有多快呢?第一够不够 !

JS 框架性能测试对比
JS 框架性能测试对比

有同学说了,你这不睁着眼睛说瞎话么?Solid 明明是第二,第一是 Vanilla 好吧!

哈哈,但事实上,Vanilla 其实就是不使用任何框架的纯粹的原生 JavaScript,通常作为一个性能比较的基准。

那么 Solid 为什么能做到这么快呢?甚至超越了我们引以为神的 Vue 和 React。

这是因为 Solid 没有采用其他主流前端框架中的 Virtual DOM,而是直接被静态编译为真实的原生 DOM 节点,并且将更新控制在细粒度的局部范围内。从而让 runtime(运行时)更加轻小,也不需要所谓的脏检查和摘要循环带来的额外消耗,使得性能和原生 JavaScript 几乎无异。换句话说,编译后的 Solid 其实就是 JavaScript!

其实 Solid 的原理和新兴框架 Svelte 的原理非常类似,都是编译成原生 DOM,但为啥他更快一点呢?

为了搞清楚这个问题,我打开了百度来搜这玩意,但发现在国内根本搜不到几条和 Solid.js 有关的内容,基本全是一些乱七八糟的东西。后来还是在 Google 上搜索,才找到了答案,结果答案竟然还是来自于某乎的大神伊撒尔。。。

要搞清楚为什么 Solid 比 Svelte 更快,就要看看同一段代码经过它们编译后,有什么区别。

大神很贴心地举了个例子,比如这句代码:

代码语言:txt
AI代码解释
复制
<div>{aaa}</div>

经 Svelte 编译后的代码:

代码语言:txt
AI代码解释
复制
let a1, a2
a1 = document.creatElement('div')
a2 = docment.createTextNode('')
a2.nodeValue = ctx[0] // aaa
a1.appendChild(a2)

经 Solid 编译后的代码:

代码语言:txt
AI代码解释
复制
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 的,可以看这篇文章,不再迷茫!

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

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

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
使用Vite创建一个动态网页的前端项目
虽然现在的前端更新换代的速度很快,IDE和工具一批批的换,但是我们始终要理解一点基本的程序构建的思维,这些环境和工具都是为了帮助我们更快的发布程序。笔者还记得以前写前端代码的时候,只使用文本编辑器,然后在浏览器中刷新就可以了。对于纯前端项目,其实这样也是很方便的。不过一旦涉及到文件资源访问的问题就麻烦了,因为浏览器的安全限制,不能访问域以外的资源。那么你就需要将其部署到Web服务器中,这意味着你要起个服务器。另外,调试的时候也要每次都刷新页面;第三方依赖包的引入也是问题,需要自己去管理,然后进行引入。于是,像Vite这样的前端开发与构建工具就出现了,它可以帮助你将上述这些步骤自动化处理,加快你的前端程序的编程效率。这里笔者就总结一下如何使用Vite创建动态网页的前端项目。
charlee44
2025/05/22
1580
使用Vite创建一个动态网页的前端项目
🌐 2025前端框架终极对决:React、Vue还是Svelte?
2025年的前端战场,React、Vue、Svelte 依然稳坐第一梯队,但各自的“杀手锏”已悄然进化:
Jimaks
2025/05/15
3460
🌐 2025前端框架终极对决:React、Vue还是Svelte?
一文讲透前端新秀 svelte
本文作者:nicolasxiao,腾讯前端高级工程师 引言 本文基于笔者在实际项目中应用svelte的调研报告整理而来,实际项目中,通过将 vue3 替换成 svelte,框架体积就从337.46kb减少到18kb,页面性能指标提升了57%。通过阅读本文,可以快速全面了解 svelte 的优缺点,社区支持,基础使用及核心原理。如果您想在实际项目中使用svelte,可以通过本文获得有力的佐证及足够信心。 1 svelte 是什么? 2、3年前就已经听说过 svelte 这个框架,但一直没有实际使用。svel
欧文
2023/02/28
4.9K1
一文讲透前端新秀 svelte
学不完的框架,🐔啄不完的米,SolidJS,你到底爱谁?😘
最近刚刚整明白点Svelte感觉整个世界都清净了,但是昨天,有人给我介绍了SolidJS
萌萌哒草头将军
2023/05/25
1.3K0
学不完的框架,🐔啄不完的米,SolidJS,你到底爱谁?😘
🚀🚀🚀Astro:一个可以同时写React、Vue、Svelte、SolidJS等多种语言的框架
Astro 是「集多功能于一体的 Web 框架」,用于构建「快速、以内容为中心」的网站。
萌萌哒草头将军
2023/08/31
1.5K0
🚀🚀🚀Astro:一个可以同时写React、Vue、Svelte、SolidJS等多种语言的框架
2024年虚拟DOM技术将何去何从?
在Web开发的早期阶段,操作DOM元素主要依赖命令式编程。当时,jQuery因其易用性而广受欢迎。使用jQuery,开发者通过具体的命令操作DOM,比如:
前端达人
2024/01/05
6030
2024年虚拟DOM技术将何去何从?
性能直逼原生JS?这个前端框架牛逼了!
号称拥有 JSX 语法,类似于 React hook 的语法,可以用现代化的开发方式,获得性能最快的代码。
程序员老鱼
2022/12/02
1.4K0
响应式、模版克隆、Proxy 代理。。。JavaScript 框架工作原理你还了解多少?
我的日常工作是开发 JavaScript 框架 (LWC)。虽然我已经在这个框架上工作了近三年,但我仍然觉得自己是个门外汉。当我阅读大型框架领域的最新动态时,我常常会被自己不知道的事情压得喘不过气来。
unkown
2023/12/11
2470
响应式、模版克隆、Proxy 代理。。。JavaScript 框架工作原理你还了解多少?
🚀Svelte原理和进阶看这篇就够了🚀
作为后起之秀,Svelte到底是怎么俘获大批开发者的呢?我们先从它的特性开始说起。
萌萌哒草头将军
2023/05/22
1.9K0
🚀Svelte原理和进阶看这篇就够了🚀
挑战前端“三大框架”的解决方案
最近这些年,随着三大框架React、Vue、Angular版本逐渐稳定,前端技术栈的迭代似乎缓慢下来。
程序员老鱼
2023/05/23
4530
挑战前端“三大框架”的解决方案
最近风靡一时的 “No DomDiff”潮流是怎么回事?Virtual Dom不香了?
前端框架经过这几年井喷式的发展,虽然各家依然是有自己的一套独特风格或特性,比如: 随着v18的逐渐稳定,react在追求异步渲染,快速响应这条路上越走越远;vue3则通过将reactive等更基础底层的Api直接暴露给开发者,这使得它在基于Proxy引擎构建的Mutable响应式编程上践行的更加彻底... 但总体而言,框架的核心技术与特性都已十分趋同。现在如果让自己设计一个全新的前端框架, 也许会面临以下抉择:
玖柒的小窝
2021/09/24
9440
最近风靡一时的 “No DomDiff”潮流是怎么回事?Virtual Dom不香了?
这些前端新技术你很难再忽视了 —— Svelte
可以粗暴简单这样记忆,Svelte 和 Vue 是一对,SolidJS 和 React 是一对。书写风格 Svelte 和 Vue 很像;而 SolidJS 和 React 很像;
掘金安东尼
2022/08/22
1.2K0
这些前端新技术你很难再忽视了 —— Svelte
挑战“三大框架”的解决方案
最近这些年,随着三大框架React、Vue、Angular版本逐渐稳定,前端技术栈的迭代似乎缓慢下来。
程序视点
2023/05/08
5930
挑战“三大框架”的解决方案
干货 | 携程机票前端Svelte生产实践
作者简介 shuan feng,携程高级前端开发工程师,关注性能优化、低代码、svelte等领域。 一、技术调研 最近几年,前端框架层出不穷。近两年,前端圈又出了一个新宠:Svelte。作者是 Rich Harris,也就是 Ractive, Rollup 和 Buble的作者,前端界的“轮子哥”。 通过静态编译减少框架运行时的代码量。一个 Svelte 组件编译之后,所有需要的运行时代码都包含在里面了,除了引入这个组件本身,你不需要再额外引入一个所谓的框架运行时! 在Github上拥有 5w 多的 st
携程技术
2022/06/06
2.3K0
干货 | 携程机票前端Svelte生产实践
尤雨溪主题演讲《2022 前端生态趋势》全记录
在过去几年中,发生的最大的一个开发范式层面的一个变化肯定是 React Hooks,React Hooks 推出可以说是启发了很多组件逻辑表达和逻辑附用的新范式。
清秋
2022/09/20
1.2K0
尤雨溪主题演讲《2022 前端生态趋势》全记录
前端新宠 Svelte 带来哪些新思想?赶紧学起来!
Svelte 是我用过最爽的框架,就算 Vue 和 React 再强大,生态再好,我还是更喜欢 Svelte,因为它开发起来真的很爽。
德育处主任
2022/09/09
4.3K0
前端新宠 Svelte 带来哪些新思想?赶紧学起来!
前端框架自欺欺人,TypeScript全无必要?
前端框架的复杂度最近一段时间频频遭到质疑,引发了一些吐槽,甚至有一篇文章提到:『前端所有主流的框架,都是在欺欺人』。本文主要是向前端的初学者介绍前端框架的发展历程及设计思想,比如为何要引入这样那样的“复杂度”?这样『设计』有什么好处?是为了解决什么问题?了解其背后的原因,我们或许就不会那么多抱怨了。
腾讯云开发者
2023/12/05
6841
前端框架自欺欺人,TypeScript全无必要?
六个问题让你更懂 React Fiber
很多人都摸不透React,看不懂源码,甚至不想看源码(确实很难看懂啊!),"霸王硬上弓" 肯定是不行呀,不如从React的整体架构或者说从最核心的Fiber开始了解,说不定能帮你更懂React呢!
Sneaker-前端公虾米
2021/08/12
8350
现代框架背后的概念
在学习框架之前,你需要掌握足够多的基础知识,使你能够理解它们所基于的概念。这些知识包括基本数据类型、函数、基本运算符和文档对象模型 (DOM)。虽然除此之外的知识并不会有害,但严格来说不是掌握框架或库所必需的。
前端小智@大迁世界
2023/03/01
8640
脚踏esbuild祥云,胸怀tsx利刃,身披scss羽衣,追寻前端的本质
这种封装工作在提升生产效率的同时也带来了复杂性,甚至有些封装工作的复杂程度远超了业务逻辑本身。
liulun
2023/11/16
2480
推荐阅读
相关推荐
使用Vite创建一个动态网页的前端项目
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档