Qwik-能幫你移出項目中99%的JS代碼

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

什么是 Qwik

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

FCP

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

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

1.下載框架代碼

2.執行框架代碼

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

這無(wú)疑導致了FCP指標的下降

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

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

TTI

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

主要衡量如下指標

1.FCP

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

3.事件相應時(shí)間在50ms內

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

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

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

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

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

Selective Hydration

Fiber（題外話(huà)）

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

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

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

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

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

React Fiber 對現有代碼的影響

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

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

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

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

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

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

另外componentWillMount也是同樣的效果。

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