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

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

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

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

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

在我實際的工作中，也遇到這樣的場景，雖然沒有上述的這么明顯，但是卻也有著更復雜的場景。

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

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

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

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

...

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

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

提高了首屏的展示速度

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

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

使用前：

使用后：

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

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

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

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/82851.html

談談前端工程化 js加載

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

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

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

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

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

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

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

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

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

warkiz 2019-08-22 13:59 評論0 收藏0