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

什么是 Qwik

Qwik 是一款全棧SSR框架，它號稱 -能幫你移出項目中99%的JS代碼-

FCP

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

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

1.下載框架代碼

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

3.由框架完成頁面渲染

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

Qwik 采用了SSR，這就省去了上述三個步驟，無疑加快了FCP

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

TTI

TTI （Time to Interactive 用戶可交互時間）測量頁面變得完全可交互所需要的時間

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

1.FCP

2.為頁面所有元素綁定事件

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

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

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

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

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

2.JS 運行時的耗時

Selective Hydration

Fiber（題外話）

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

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

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

在 Fiber 之后，就采用了 -分片- 的方法來破解同步操作時間過長的問題。

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

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

因為是分片，所以完全有可能一個更新任務(wù)還沒完成，就被另一個更高優(yōu)先級的更新過程打斷，這時候更高優(yōu)先級的會完成，而低優(yōu)先級的就會被完全作廢，然后等待機會重頭再來

因為更新可能被打斷，所以React Fiber的一個更新過程分為兩個階段：

Reconciliation Phase 找出需要更新哪些DOM，這個過程可以被打斷

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

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

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

另外componentWillMount也是同樣的效果。

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