在過(guò)去一年的工作中我所使用的js框架是Next.js,盡管這個(gè)框架在前后端同構(gòu)方面有著絕佳的體驗(yàn)，但是當(dāng)頁(yè)面js文件過(guò)大以及preload過(guò)多的時(shí)候還是會(huì)出現(xiàn)頁(yè)面跳轉(zhuǎn)卡頓和渲染阻塞等比較糟糕的用戶體驗(yàn)問(wèn)題。由于我之前既不知道這個(gè)框架的工作原理，自然也就不知道如何去優(yōu)化它。乘著農(nóng)歷春節(jié)前工地活少所以稍微研究一下。
第一個(gè)問(wèn)題：宣稱前后臺(tái)同構(gòu)的Next.js為何會(huì)出現(xiàn)卡頓現(xiàn)象？
Next.js 中的特有生命周期hook 函數(shù) getInitialProps會(huì)在頁(yè)面渲染的時(shí)候判斷瀏覽器是否為首次渲染，如果是則是服務(wù)端渲染網(wǎng)頁(yè)，如果不是則是客戶端渲染。在頁(yè)面首次渲染的時(shí)候，會(huì)加載 commons.xxxxx.js 文件，這個(gè)文件中打包了react.js、next.js 以及相關(guān)的框架代碼也就是如果是客戶端渲染打包后的 commons.xxxxx.js 負(fù)載了整個(gè)前端的頁(yè)面邏輯，這個(gè)文件相對(duì)比較大一般會(huì)在180kb以上。如果僅從文件大小角度來(lái)說(shuō)，這個(gè)文件并不算大,就算利用了next.js 的 preload機(jī)制把文件大小放到300kb以上，也還行。但是一旦這個(gè)文件阻塞了頁(yè)面的渲染，頁(yè)面的渲染要等到 commons.xxxxx.js 加載完畢之后才渲染，那問(wèn)題就來(lái)了。
在next7中使用的打包工具是webpack4，這在打包和加載過(guò)程有一個(gè)比較蠢的機(jī)制（或許僅僅是我個(gè)人觀點(diǎn)），那就是但凡React DOM上綁定了style 這些DOM都不會(huì)在服務(wù)端渲染出來(lái)，而是打包抽離成一個(gè)小的js文件，在 commons.xxxxx.js 加載完畢之后，再加載這個(gè)js,將DOM和內(nèi)聯(lián)style渲染到HTML。這就在某種程度上導(dǎo)致了next.js首次渲染是SSR失效了，更為糟糕的是卡頓感十足。
可能有人會(huì)說(shuō)，那就不要寫內(nèi)聯(lián)style不就好了。但是事實(shí)是在大量的后臺(tái)數(shù)據(jù)動(dòng)態(tài)渲染頁(yè)面和用戶自定義頁(yè)面的情況下，不可能做到完全不寫內(nèi)聯(lián)樣式，而去傻乎乎地寫一堆className。
所以我們要解決一個(gè)問(wèn)題那就是如何保證，內(nèi)聯(lián)style的react dom在首次渲染頁(yè)面的時(shí)候是服務(wù)器端直接輸出后扔給后臺(tái)，而不是讓 commons.xxxxx.js 卡卡卡卡卡，然后砰的一下蹦出來(lái)。
要解決上一個(gè)問(wèn)題，首先要了解Next.js是如何渲染頁(yè)面的？
在Next.js的規(guī)則中，所有頁(yè)面級(jí)的代碼都是寫在pages文件夾中，比如/pages/home:
export default () => (<div>你瞅啥？這是home頁(yè)</div>)
而其框架內(nèi)置的Document組件中，已經(jīng)幫開(kāi)發(fā)者配置好傳統(tǒng)的HTML文件的 <head> , <body> 這些標(biāo)簽作為靜態(tài)資源的外殼。Document組件中有一個(gè) renderPage() 方法，如果代碼正常運(yùn)行，該方法就會(huì)將pages文件夾中的代碼和它外部同步渲染到瀏覽器中。如果開(kāi)發(fā)者希望自定義Document組件只需添加 /pages/_document.js 文件即可。
renderPage()本質(zhì)是一個(gè)回調(diào)函數(shù)，它的作用只有一個(gè)那就是 執(zhí)行React源碼中渲染邏輯 同步加載到Next.js的Document組件中形成DOM節(jié)點(diǎn)。
新聞熱點(diǎn)
疑難解答
圖片精選
