又一個前端超新星專案 ？

大家好，我是魚皮。

今天逛 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 的，可以看這篇文章，不再迷茫！

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

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