參考文章:
- https://zh.wikipedia.org/wiki/HTTP/2
- https://zh.nuxtjs.org/guide
- https://nextjs.org/learn/basics/getting-started
目前用戶體驗(yàn)最好的方案是客戶端緩存+預(yù)渲染玖姑,這樣會(huì)解決白屏問題(先上圖)垦梆。
方案要點(diǎn)
* 降低io請(qǐng)求
* 使用離線存儲(chǔ)存儲(chǔ)靜態(tài)html
* 合理利用瀏覽器緩存
* 使用預(yù)渲染技術(shù)栋盹,實(shí)現(xiàn)對(duì)當(dāng)先項(xiàng)目的二級(jí)頁面進(jìn)行預(yù)渲染笙各,提升用戶體驗(yàn)
技術(shù)細(xì)節(jié)
此方案為治標(biāo)方案唱蒸,治本方案在于為什么慢邦鲫?所以本方案中本本地存儲(chǔ)中增加了一段前端通用js,主要作用有兩個(gè)神汹。
1掂碱、上報(bào)請(qǐng)求過程中的耗時(shí),通過數(shù)據(jù)優(yōu)化耗時(shí)的地方慎冤。
2疼燥、通用的耗時(shí)過長的頁面處理,優(yōu)化用戶體驗(yàn)蚁堤。