Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,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 删除。

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
2022前端面试遇到的手写题总结
下面来看一道比较典型的问题,通过这个问题来对比几种异步编程方法:红灯 3s 亮一次,绿灯 1s 亮一次,黄灯 2s 亮一次;如何让三个灯不断交替重复亮灯?
helloworld1024
2022/09/22
7240
前端学习必备之ES6解构赋值的常见用法
我们先来看最基本的使用场景:变量赋值,先来看我们在平时开发中是怎么使用es5对变量赋值的:
张哥编程
2024/12/19
1040
2022必会的前端面试手写题
instanceof 运算符用于判断构造函数的 prototype 属性是否出现在对象的原型链中的任何位置。
buchila11
2022/07/29
5830
一道面试题引起的思考
今天在认真干(划)活(水)的时候,看到群里有人发了一道头条的面试题,就顺便看了一下,发现挺有意思的,就决定分享给大家,并且给出我的解决方案和思考过程。
嘿嘿嘿
2018/12/17
3680
一道面试题引起的思考
js手写题汇总(面试前必刷)
event bus既是node中各个模块的基石,又是前端组件通信的依赖手段之一,同时涉及了订阅-发布设计模式,是非常重要的基础。
helloworld1024
2022/11/09
1.1K0
我在近期求职中遇到的前端面试问题及其解法
在今天的文章中,我想跟大家聊聊自己最近在 COVID-19 疫情下的求职经历中遇到的问题。另外,我还把自己的准备工作整理成一份资源清单供大家参考。
深度学习与Python
2020/09/14
1K0
滴滴前端一面经典手写面试题
一般来说,Promise.all 用来处理多个并发请求,也是为了页面数据构造的方便,将一个页面所用到的在不同接口的数据一起请求过来,不过,如果其中一个接口失败了,多个请求也就失败了,页面可能啥也出不来,这就看当前页面的耦合程度了
helloworld1024
2023/01/04
9300
前端面试高频20道手写题(二)
可以给img标签统一自定义属性data-src='default.png',当检测到图片出现在窗口之后再补充src属性,此时才会进行图片资源加载。
helloworld1024
2022/08/02
4770
记一次京东前端面试被问到的题目
浅拷贝是指,一个新的对象对原始对象的属性值进行精确地拷贝,如果拷贝的是基本数据类型,拷贝的就是基本数据类型的值,如果是引用数据类型,拷贝的就是内存地址。如果其中一个对象的引用内存地址发生改变,另一个对象也会发生变化。
helloworld1024
2022/11/15
4380
年底前端面试题总结(上)
HTTP1.0 中默认是在每次请求/应答,客户端和服务器都要新建一个连接,完成之后立即断开连接,这就是短连接。当使用Keep-Alive模式时,Keep-Alive功能使客户端到服务器端的连接持续有效,当出现对服务器的后继请求时,Keep-Alive功能避免了建立或者重新建立连接,这就是长连接。其使用方法如下:
loveX001
2022/10/11
8080
一年前端面试打怪升级之路
Promise 是异步编程的一种解决方案:从语法上讲,promise是一个对象,从它可以获取异步操作的消息;从本意上讲,它是承诺,承诺它过一段时间会给你一个结果。promise有三种状态: pending(等待态),fulfiled(成功态),rejected(失败态) ;状态一旦改变,就不会再变。创造promise实例后,它会立即执行。
loveX001
2022/11/21
4330
【中高级前端】必备,30+高频手写题及详细答案(万字长文),看“你”怎么难倒我
所以只要遍历实例对象的原型链,挨个往上查找看是否有与Fn的prototype相等的原型,直到最顶层Object还找不到,那么就返回false。
前端胖头鱼
2022/07/24
1.1K0
【中高级前端】必备,30+高频手写题及详细答案(万字长文),看“你”怎么难倒我
高级前端手写面试题
该方法的参数是 Promise 实例数组, 然后其 then 注册的回调方法是数组中的某一个 Promise 的状态变为 fulfilled 的时候就执行. 因为 Promise 的状态只能改变一次, 那么我们只需要把 Promise.race 中产生的 Promise 对象的 resolve 方法, 注入到数组中的每一个 Promise 实例中的回调函数中即可.
helloworld1024
2022/09/17
7150
前端面试被问到的js手写面试题汇总
类的继承在几年前是重点内容,有n种继承方式各有优劣,es6普及后越来越不重要,那么多种写法有点『回字有四样写法』的意思,如果还想深入理解的去看红宝书即可,我们目前只实现一种最理想的继承方式。
helloworld1024
2022/11/18
5890
2018春招前端面试: 闯关记(精排精校)
box-sizing有两个值:content-box(W3C标准盒模型),border-box(怪异模型),
CRPER
2018/08/28
1.6K0
2018春招前端面试: 闯关记(精排精校)
社招前端一面经典手写面试题集锦
String.prototype.padStart 和 String.prototype.padEnd是ES8中新增的方法,允许将空字符串或其他字符串添加到原始字符串的开头或结尾。我们先看下使用语法:
helloworld1024
2022/09/17
4000
美团前端高频面试题集锦_2023-03-15
实际开发中不会使用createElement来创建ReactElement的,一般都是使用JSX的形式开发。
gogo2027
2023/03/15
9580
一文说透MySQL JSON数据类型
JSON 数据类型是 MySQL 5.7.8 开始支持的。在此之前,只能通过字符类型(CHAR,VARCHAR 或 TEXT )来保存 JSON 文档。
星哥玩云
2022/06/06
5.2K0
一文说透MySQL JSON数据类型
前端经典面试题(60道前端面试题包含JS、CSS、React、网络、浏览器、程序题等)
原文地址:https://mp.weixin.qq.com/s/PTSaytcf3xgOp6C9l3Pvjw
前端迷
2021/06/24
1.1K0
前端手写面试题合集
String.prototype.padStart 和 String.prototype.padEnd是ES8中新增的方法,允许将空字符串或其他字符串添加到原始字符串的开头或结尾。我们先看下使用语法:
helloworld1024
2022/12/07
3670
相关推荐
2022前端面试遇到的手写题总结
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档