又一個前端超新星項目 ？

大家好，我是魚皮。

今天逛 GitHub 的時候，在趨勢榜上看到一個項目，竟然短短一天的時間內，漲了 1000 多個星星！

就是這個名為 solid 的項目：

要知道日增上千 star 可是非常難得的，我不禁感到好奇，點進去看看這個項目到底有啥牛逼的？

啥是 Solid？

這是一個國外的前端項目，截止到發文前，已經收獲了 8400 個 star。

我總覺得這個項目很眼熟，好像之前也看到過，于是去 Star History 上搜了一下這個項目的 star 增長歷史。好家伙，這幾天的增速曲線幾乎接近垂直，已經連續好幾天增長近千了！

看到這個曲線，我想起來了，solid 是一個 JavaScript 框架，此前在一次 JavaScript 框架的性能測試中看到過它。

要知道，現在的 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！

跑了，留下 6T 的資源！

我是如何通過自學，拿到騰訊、字節等大廠 offer 的，可以看這篇文章，不再迷茫！

我學計算機的四年，共勉！

我是魚皮，點贊 還是要求一下的，祝大家都能心想事成、發大財、行大運。

總結

以上是生活随笔為你收集整理的完了，又火一个项目的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。