完了，又火一個前端項目

又一個前端超新星項目 ？

你們好，我是魚皮。

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

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

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