又一個前端超新星專案 ?
大家好,我是魚皮。
今天逛 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!
我是如何通過自學,拿到騰訊、位元組等大廠 offer 的,可以看這篇文章,不再迷茫!
我是魚皮,點贊 還是要求一下的,祝大家都能心想事成、發大財、行大運。