亚洲高清无码在线视频,日韩av手机在线,国产毛片AV一区二区三区牛牛影视,肏屄免费视频,一级黄色在线看,久久香蕉电影,国产一级a毛一级a做…,a免费在线观看

作者：卡頌

來源：SegmentFault 思否社區(qū)

大家好，我是卡頌。

你可能看過下面這張圖（或類似的圖）：

這是一張前端框架性能跑分表，表中每一行都是一個(gè)性能度量指標(biāo)。

據(jù)我多年潛伏推特觀察，采用了細(xì)粒度更新技術(shù)的框架開發(fā)者普遍喜歡曬跑分表。

比如Solid.js作者Ryan Carniato寫了一篇《2020年JS框架性能對(duì)比》內(nèi)含15張跑分表

這些跑分表掛車尾的通常是React、Angular12這樣的業(yè)界知名框架。

不禁讓人懷疑，前端進(jìn)步這么快，React都這么拉跨啦？

本文會(huì)分享一些從跑分表中發(fā)現(xiàn)的有趣洞察。

虛擬DOM到底慢不慢？

我們先截取最前面兩行，分別是頁(yè)面加載后創(chuàng)建1000行表格所需時(shí)間以及替換1000行列表所需時(shí)間：

從左到右性能依次降低，其中第一列vanillajs指原生JS，這也是眾多框架畢生在追尋的目標(biāo)。

可以看到，雖然React以及知名類React框架Preact排名倒數(shù)3、4，但同樣作為類React框架的inferno排名卻很靠前（第三名）。

這表示虛擬DOM可能并不是性能瓶頸。

實(shí)時(shí)上，得益于多種虛擬DOM的優(yōu)化技巧，比如：

數(shù)組兩端比較
查找最小移動(dòng)次數(shù)

inferno的虛擬DOM可能是業(yè)界同類解決方案中最高效的。

這里簡(jiǎn)單介紹下兩端比較，假設(shè)diff前后的數(shù)據(jù)分別為：

// diff前
abcd
// diff后
abfd

兩端比較會(huì)先排除數(shù)組相同的前、后綴節(jié)點(diǎn)。例子中的相同前綴是ab，相同后綴是d。

所以實(shí)際進(jìn)行對(duì)比的是：

// diff前
c
// diff后
f

簡(jiǎn)單、高效的優(yōu)化策略。

由于React的Fiber架構(gòu)使用鏈表實(shí)現(xiàn)，無法進(jìn)行兩端比較

細(xì)粒度更新yyds？

雖然虛擬DOM可以被優(yōu)化的很高效，但他畢竟為運(yùn)行時(shí)帶來不少的運(yùn)算量。

在上表有一行指標(biāo)，紅色特別多（代表性能低），這行度量的是點(diǎn)擊列表某一行使其高亮所需時(shí)間:

這行的跑分結(jié)果：SolidJS > Svelte > Vue3.2 > inferno > ... > React > Angular

可見，采用虛擬DOM的框架性能普遍偏差。排名前3的框架技術(shù)架構(gòu)為：

SolidJS：預(yù)編譯 + 細(xì)粒度更新
Svelte：預(yù)編譯 + 細(xì)粒度更新
Vue3：預(yù)編譯 + 細(xì)粒度更新 + 虛擬DOM

這是因?yàn)?span style="box-sizing: border-box;font-weight: bolder;">點(diǎn)擊列表某一行使其高亮所需時(shí)間度量的是局部的小改變。

這種類型改變是基于訂閱發(fā)布的細(xì)粒度更新最擅長(zhǎng)的場(chǎng)景。

相對(duì)的，也是虛擬DOM最不擅長(zhǎng)的地方。

React有這么不堪么？

那么基于細(xì)粒度更新的框架有什么缺點(diǎn)，React又有什么性能優(yōu)點(diǎn)呢？

答案是：持續(xù)的可交互時(shí)間（consistently interactive）。

他度量的是：CPU和網(wǎng)絡(luò)的空閑時(shí)間，即Chrome DevTools的lighthouse工具中的TimeToConsistentlyInteractive指標(biāo)。

圖中左邊綠字Short Tasks指向的都是耗時(shí)很短的JS任務(wù)，短耗時(shí)意味著瀏覽器有更多空閑時(shí)間重排、重繪，更不易卡頓。

與其相對(duì)的是右邊紅字Long Tasks，指向的都是耗時(shí)很長(zhǎng)的JS任務(wù)，此時(shí)瀏覽器更容易卡頓。

細(xì)粒度更新框架初始時(shí)會(huì)有為節(jié)點(diǎn)建立響應(yīng)式更新的過程，比如：

Vue2中通過setter、getter
Vue3中通過proxy

這一過程會(huì)有一定CPU及內(nèi)存開銷（雖然隨著proxy的普及，JS原生支持響應(yīng)式更新后，這部分開銷會(huì)越來越低）。

React沒有這部分開銷，同時(shí)借由基于虛擬DOM的時(shí)間切片，React能進(jìn)一步降低持續(xù)的可交互時(shí)間。

總結(jié)

可以看到，不同的技術(shù)有不同優(yōu)勢(shì)：

細(xì)粒度更新對(duì)于局部更新性能更佳
基于虛擬DOM的時(shí)間切片對(duì)持續(xù)的可交互時(shí)間性能更佳

當(dāng)大家在聊性能時(shí)，最好先明確聊的是哪個(gè)指標(biāo)，否則差異可能很大。

點(diǎn)擊左下角閱讀原文，到 SegmentFault 思否社區(qū) 和文章作者展開更多互動(dòng)和交流，掃描下方”二維碼“或在“公眾號(hào)后臺(tái)“回復(fù)“ 入群 ”即可加入我們的技術(shù)交流群，收獲更多的技術(shù)文章~

- END -

當(dāng)前端框架聊性能，聊的是同一個(gè)性能么？

虛擬DOM到底慢不慢？

細(xì)粒度更新yyds？

React有這么不堪么？

總結(jié)

當(dāng)前端框架聊性能，聊的是同一個(gè)性能么？

虛擬DOM到底慢不慢？