使用BigPipe優(yōu)化頁面的加載速度實(shí)踐

adie 發(fā)布于2019-08-20 16:18 / 1466人閱讀

摘要：比如首頁是一個(gè)靜態(tài)頁面，不依賴什么接口列表頁涉及到價(jià)格日歷，篩選，一些提示信息模塊等，依賴不同的接口因?yàn)槭褂昧?，可以?shí)現(xiàn)前后端模板共用。

說起網(wǎng)頁速度優(yōu)化，想必大家都能說上幾句，最知名的莫過于雅虎的23條了。這里有一系列的小建議和優(yōu)化策略，但是治病也得看癥狀，對(duì)癥下藥才是關(guān)鍵。

比如淘寶賣家中心首頁速度優(yōu)化的這個(gè)場(chǎng)景，就是一個(gè)很突出的例子。文章里針對(duì)首頁展示優(yōu)化策略做個(gè)一個(gè)全面的對(duì)比，這里我就不多逼逼了，關(guān)于BigPipe這種分塊傳輸?shù)脑恚@里也有很好的說明，也沒必要多說。

在我實(shí)際的工作中，也遇到這樣的場(chǎng)景，雖然沒有上述的這么明顯，但是卻也有著更復(fù)雜的場(chǎng)景。

比如首頁是一個(gè)靜態(tài)頁面，不依賴什么接口

列表頁涉及到價(jià)格日歷，篩選，一些提示信息模塊等，依賴不同的接口

因?yàn)槭褂昧薾ode，可以實(shí)現(xiàn)前后端模板共用。同樣也可以實(shí)現(xiàn)是html片段是前端拼接還是node層拼接，前端拼接的好處是模板可以緩存，傳輸數(shù)據(jù)的數(shù)據(jù)量相對(duì)少一些。node層拼接的好處是減少了前端的運(yùn)算量，拼接好的html片段可以在服務(wù)端緩存

有些前端接口可能需要整合多個(gè)后端接口的數(shù)據(jù)

...

針對(duì)這些，在實(shí)踐中我基于express做了一層包裝，可以完美支持以上各種場(chǎng)景，當(dāng)然更開心的使用 bigPipe 是其中很重要的目的.

采用BigPipe的優(yōu)勢(shì)就是

提高了首屏的展示速度

單頁面有多接口多模塊的時(shí)候，可以在一個(gè)長連接中通過chunk的方式分批返回，減少了http請(qǐng)求的壓力

前后端模板公用，同時(shí)可以實(shí)現(xiàn)服務(wù)端渲染，對(duì)搜索引擎更加友好

使用前：

使用后：

媽的，怎么感覺像賣藥的。這是我基于實(shí)踐寫的bigape, 里面有更加詳細(xì)的使用說明，一個(gè)更加豐滿的express框架，寫的倉促，如有問題歡迎拍磚，同時(shí)歡迎 star 和貢獻(xiàn)代碼 (^__^)

GPU云服務(wù)器云服務(wù)器 webrtc優(yōu)化實(shí)踐優(yōu)化加載 listview加載優(yōu)化頁面優(yōu)化

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/82851.html

相關(guān)文章

談?wù)勄岸斯こ袒?js加載

摘要：當(dāng)年的加載在沒有前端工程化之前，基本上是我們是代碼一把梭，把所需要的庫和自己的代碼堆砌在一起，然后自上往下的引用就可以了。而且對(duì)于前后端的技術(shù)要求較高，所以對(duì)于項(xiàng)目未必是最有效的方案。當(dāng)年的 js 加載在沒有前端工程化之前，基本上是我們是代碼一把梭，把所需要的庫和自己的代碼堆砌在一起，然后自上往下的引用就可以了。那個(gè)時(shí)代我們沒有公用的cdn，也沒有什么特別好的方法來優(yōu)化加載j...

paulli3 2019-08-23 17:15 評(píng)論0 收藏0
為什么facebook主頁加載這么快：BigPipe？

摘要：起源來源于公司解決主頁面加載速度慢而提出的一項(xiàng)改進(jìn)技術(shù)。流水線方式降低了頁面整體的加載時(shí)間，而且，通過讓一部分頁面先顯示，讓用戶感覺頁面加載的更快了。將樣式表放在頂部，一般放在中，主要作用是避免裸奔，惡化用戶體驗(yàn)。前言本文是對(duì)《BigPipe學(xué)習(xí)研究》的總結(jié)。昨晚刷Quora，看到一個(gè)類似的問題，然后今早百度了下，發(fā)現(xiàn)了這篇非常細(xì)致的額文章，所以精簡了下，對(duì)理解網(wǎng)頁性能優(yōu)化有很大幫...

sunnyxd 2019-08-20 12:15 評(píng)論0 收藏0
為什么facebook主頁加載這么快：BigPipe？

摘要：起源來源于公司解決主頁面加載速度慢而提出的一項(xiàng)改進(jìn)技術(shù)。流水線方式降低了頁面整體的加載時(shí)間，而且，通過讓一部分頁面先顯示，讓用戶感覺頁面加載的更快了。將樣式表放在頂部，一般放在中，主要作用是避免裸奔，惡化用戶體驗(yàn)。前言本文是對(duì)《BigPipe學(xué)習(xí)研究》的總結(jié)。昨晚刷Quora，看到一個(gè)類似的問題，然后今早百度了下，發(fā)現(xiàn)了這篇非常細(xì)致的額文章，所以精簡了下，對(duì)理解網(wǎng)頁性能優(yōu)化有很大幫...

jas0n 2019-08-01 15:57 評(píng)論0 收藏0
鏈家網(wǎng)前端總架構(gòu)師楊永林：我的8年架構(gòu)師成長之路

摘要：楊永林，人稱教主，八年前端開發(fā)經(jīng)驗(yàn)，原新浪微博前端技術(shù)專家，現(xiàn)任鏈家網(wǎng)前端總架構(gòu)師。年年底，教主加入鏈家網(wǎng)，負(fù)責(zé)前端的整體架構(gòu)工作。楊永林，人稱教主，八年前端開發(fā)經(jīng)驗(yàn)，原新浪微博前端技術(shù)專家，現(xiàn)任鏈家網(wǎng)前端總架構(gòu)師。長期研究Web訪問性能優(yōu)化和前端框架搭建。作為初始團(tuán)隊(duì)成員，教主參與了新浪微博所有PC版本的開發(fā)，其中4~6版以架構(gòu)師的身份設(shè)計(jì)了微博PC版的前端架構(gòu)。在新浪微博任職期間...

liaosilzu2007 2019-08-23 15:19 評(píng)論0 收藏0
Node中間層實(shí)踐（一）——基于NodeJS的全棧式開發(fā)

摘要：總結(jié)我覺得，以后基于的全棧式開發(fā)的模式將會(huì)越來越流行，這也會(huì)引領(lǐng)前端步入工程化時(shí)代。歡迎繼續(xù)關(guān)注本博的更新中間層實(shí)踐一基于的全棧式開發(fā)中間層實(shí)踐二搭建項(xiàng)目框架中間層實(shí)踐三配置中間層實(shí)踐四模板引擎中間層實(shí)踐五中間層的邏輯處理版權(quán)聲明：更多文章請(qǐng)?jiān)L問我的個(gè)人站Keyon Y，轉(zhuǎn)載請(qǐng)注明出處。前言近期公司有個(gè)新項(xiàng)目，由于后端人手不足，我果斷的提議用node中間層的方案，得到了老大的支持...

warkiz 2019-08-22 13:59 評(píng)論0 收藏0