Qwik-能幫你移出項(xiàng)目中99%的JS代碼

本文分享自天翼云開(kāi)發(fā)者社區(qū)《Qwik-能幫你移出項(xiàng)目中99%的JS代碼》，作者：尹****勇

什么是 Qwik

Qwik 是一款全棧SSR框架，它號(hào)稱(chēng) -能幫你移出項(xiàng)目中99%的JS代碼-

FCP

FCP （First Content Paint 首次內(nèi)容繪制）測(cè)量 頁(yè)面從開(kāi)始加載到頁(yè)面內(nèi)容的任何部分在屏幕上完成渲染的時(shí)間

現(xiàn)在基本采用 react、vue 等框架進(jìn)行開(kāi)發(fā)，這就需要如下過(guò)程

1.下載框架代碼

2.執(zhí)行框架代碼

3.由框架完成頁(yè)面渲染

這無(wú)疑導(dǎo)致了FCP指標(biāo)的下降

Qwik 采用了SSR，這就省去了上述三個(gè)步驟，無(wú)疑加快了FCP

但是TTI仍然需要優(yōu)化

TTI

TTI （Time to Interactive 用戶(hù)可交互時(shí)間）測(cè)量頁(yè)面變得完全可交互所需要的時(shí)間

主要衡量如下指標(biāo)

1.FCP

2.為頁(yè)面所有元素綁定事件

3.事件相應(yīng)時(shí)間在50ms內(nèi)

框架hydrate(注水，即框架使頁(yè)面能夠相應(yīng)交互) 對(duì)TTI有很大影響，性能瓶頸在JS。

React18的Selective Hydration通過(guò) -讓用戶(hù)交互的部分優(yōu)先hydrate- 來(lái)優(yōu)化TTI指標(biāo)。

Qwik 更極端，他的目標(biāo)是——干掉所有不必要的 JS 耗時(shí)，包括兩部分

1.JS 作為靜態(tài)資源加載的耗時(shí)

2.JS 運(yùn)行時(shí)的耗時(shí)

Selective Hydration

Fiber（題外話(huà)）

Fiber 是纖維的意思，就是比Process和Thread更細(xì)的東西。

在 Fiber 之前更新是同步的，一鼓作氣運(yùn)行到底，中途絕不停歇。

假如更新一個(gè)組件需要1ms，如果有200個(gè)需要更新就是200ms，在這期間就會(huì)導(dǎo)致用戶(hù)輸入無(wú)響應(yīng)，體驗(yàn)很差。

在 Fiber 之后，就采用了 -分片- 的方法來(lái)破解同步操作時(shí)間過(guò)長(zhǎng)的問(wèn)題。

把一個(gè)耗時(shí)很長(zhǎng)的任務(wù)分成很多小片，每一個(gè)小片的運(yùn)行時(shí)間很短，雖然總時(shí)間依然很長(zhǎng)，但是在每個(gè)小片執(zhí)行完成之后，都給其他任務(wù)一個(gè)執(zhí)行的機(jī)會(huì)，這樣唯一的線程就不會(huì)被獨(dú)占。

React Fiber 對(duì)現(xiàn)有代碼的影響

因?yàn)槭欠制?，所以完全有可能一個(gè)更新任務(wù)還沒(méi)完成，就被另一個(gè)更高優(yōu)先級(jí)的更新過(guò)程打斷，這時(shí)候更高優(yōu)先級(jí)的會(huì)完成，而低優(yōu)先級(jí)的就會(huì)被完全作廢，然后等待機(jī)會(huì)重頭再來(lái)

因?yàn)楦驴赡鼙淮驍?，所以React Fiber的一個(gè)更新過(guò)程分為兩個(gè)階段：

Reconciliation Phase 找出需要更新哪些DOM，這個(gè)過(guò)程可以被打斷

Commit Phase 一鼓作氣把DOM更新完，不會(huì)被打斷

這兩個(gè)部分和我們的生命周期函數(shù)息息相關(guān)。

比如說(shuō)一個(gè)低優(yōu)先級(jí)的任務(wù)A在執(zhí)行，已經(jīng)調(diào)用到了componentWillUpdate函數(shù)，接下來(lái)發(fā)現(xiàn)時(shí)間分片已經(jīng)用完了，于是冒出水面，看看有沒(méi)有緊急任務(wù)。等緊急任務(wù)執(zhí)行完成之后任務(wù)A就會(huì)重新來(lái)一遍，所以componentWillUpdate就會(huì)再次被調(diào)用。

另外componentWillMount也是同樣的效果。

所以要注意這兩個(gè)函數(shù)的實(shí)現(xiàn)componentWillMount 和 componentWillUpdate.