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

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

什么是 Qwik

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

FCP

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

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

1.下載框架代碼

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

3.由框架完成頁面渲染

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

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

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

TTI

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

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

1.FCP

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

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

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

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

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

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

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

Selective Hydration

Fiber（題外話）

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

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

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

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

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

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

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

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

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

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

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

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

另外componentWillMount也是同樣的效果。

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