亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專(zhuān)欄INFORMATION COLUMN

為什么facebook主頁(yè)加載這么快：BigPipe？

jas0n / 491人閱讀

摘要：起源來(lái)源于公司解決主頁(yè)面加載速度慢而提出的一項(xiàng)改進(jìn)技術(shù)。流水線(xiàn)方式降低了頁(yè)面整體的加載時(shí)間，而且，通過(guò)讓一部分頁(yè)面先顯示，讓用戶(hù)感覺(jué)頁(yè)面加載的更快了。將樣式表放在頂部，一般放在中，主要作用是避免裸奔，惡化用戶(hù)體驗(yàn)。

前言

本文是對(duì)《BigPipe學(xué)習(xí)研究》的總結(jié)。昨晚刷Quora，看到一個(gè)類(lèi)似的問(wèn)題，然后今早百度了下，發(fā)現(xiàn)了這篇非常細(xì)致的額文章，所以精簡(jiǎn)了下，對(duì)理解網(wǎng)頁(yè)性能優(yōu)化有很大幫助。

BigPipe起源

BigPipe來(lái)源于facebook公司解決主頁(yè)面加載速度慢而提出的一項(xiàng)改進(jìn)技術(shù)?！陡咝阅芫W(wǎng)站建設(shè)指南》指出，從瀏覽器發(fā)出請(qǐng)求到頁(yè)面顯示網(wǎng)頁(yè)的過(guò)程中，只有10%~20%的時(shí)間花在服務(wù)器產(chǎn)生HTML頁(yè)面并傳回瀏覽器這個(gè)過(guò)程，80%~90%的時(shí)間花在瀏覽器解析渲染得到的HTML、CSS、JavaScript文件。所以，針對(duì)前端的性能優(yōu)化是減少加載時(shí)間最有效地方法。
傳統(tǒng)頁(yè)面加載模型加載大型網(wǎng)頁(yè)速度慢的根本原因在于，瀏覽器和服務(wù)器的工作是有先后順序的。一般，瀏覽器發(fā)送http請(qǐng)求到服務(wù)器，然后服務(wù)器返回響應(yīng)文件（CSS/HTML/JavaScript），瀏覽器解析并執(zhí)行響應(yīng)文件。服務(wù)器工作的時(shí)候?yàn)g覽器在等待，反之，瀏覽器工作的時(shí)候服務(wù)器在等待。如果能夠打破這一桎梏，就可以極大改善頁(yè)面加載時(shí)間。

BigPipe原理

根據(jù)頁(yè)面位置不同，將整個(gè)頁(yè)面分為不同的pagelet，將眾多pagelet的加載過(guò)程像流水線(xiàn)一樣分布在瀏覽器和服務(wù)器上，這實(shí)現(xiàn)了服務(wù)器和瀏覽器的并行化。

facebook分區(qū)示意圖

BigPipe 中，用戶(hù)提出頁(yè)面訪(fǎng)問(wèn)請(qǐng)求后，頁(yè)面的完整加載流程如下:

Request parsing：服務(wù)器解析和檢查http request

Datafetching：服務(wù)器從存儲(chǔ)層獲取數(shù)據(jù)

Markup generation：服務(wù)器生成html 標(biāo)記

Network transport ： 網(wǎng)絡(luò)傳輸response

CSS downloading：瀏覽器下載CSS

DOM tree construction and CSS styling:瀏覽器生成DOM 樹(shù)，并且使用CSS

JavaScript downloading: 瀏覽器下載頁(yè)面引用的JS 文件

JavaScript execution: 瀏覽器執(zhí)行頁(yè)面JS代碼

這個(gè)8 個(gè)流程幾乎與上文中提到現(xiàn)有的模式?jīng)]有區(qū)別，但這只是一個(gè)pagelet 的完整流程，而多個(gè)pagelet 的不同操作階段就可以像流水線(xiàn)一樣進(jìn)行執(zhí)行了。流水線(xiàn)方式降低了頁(yè)面整體的加載時(shí)間，而且，通過(guò)讓一部分頁(yè)面先顯示，讓用戶(hù)感覺(jué)頁(yè)面加載的更快了。

限制

這一技術(shù)的限制很明顯，由于不同pagelet是通過(guò)JavaScript動(dòng)態(tài)加載的，這會(huì)導(dǎo)致爬蟲(chóng)無(wú)法收錄，影響SEO結(jié)果；還有就是當(dāng)客戶(hù)端禁用JavaScript時(shí)，這一功能就不能用了。所以要進(jìn)行瀏覽器嗅探和JavaScript腳本檢測(cè)，然后決定使用原有模式或者是動(dòng)態(tài)添加模式。

facebook的其他性能優(yōu)化技術(shù)

1）資源文件的G-zip壓縮，使CSS和JS文件大小降低70%，這是頁(yè)面加載過(guò)程中傳輸?shù)闹饕募?br>2）JavaScript精簡(jiǎn)，移除代碼中不必要的注釋和字符，精簡(jiǎn)工具可以使用JSMin，精簡(jiǎn)后得腳本會(huì)減少20%左右。
3）將CSS和JavaScript合并，減少HTTP請(qǐng)求次數(shù)，尤其是對(duì)于用戶(hù)量巨大的facebook，這會(huì)極大地降低服務(wù)器壓力。
4）使用外部JavaScript和CSS，有利于文件復(fù)用和修改。由于瀏覽器緩存的作用，僅第一次加載會(huì)慢一點(diǎn)。
5）將樣式表放在頂部，一般放在中，主要作用是避免HTML“裸奔”，惡化用戶(hù)體驗(yàn)。將JavaScript放在底部，放在頂部會(huì)使頁(yè)面加載慢，而且就用戶(hù)而言，他們更想盡早看到頁(yè)面，而不是動(dòng)態(tài)功能。Bigpipe實(shí)現(xiàn)一個(gè)“barrier”的概念，即當(dāng)所有的pagelet的內(nèi)容全部加載好了之后，瀏覽器再向服務(wù)器發(fā)送js 的http 請(qǐng)求?？梢栽贐igPipe.js 中將所有的pagelet 所需的js文件的路徑保存下來(lái)，在判斷所有的內(nèi)容加載完成后統(tǒng)一向服務(wù)器發(fā)送請(qǐng)求。

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

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

相關(guān)文章

  • 為什么facebook主頁(yè)加載這么快：BigPipe？

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

    sunnyxd 評(píng)論0 收藏0

  • 鏈家網(wǎng)前端總架構(gòu)師楊永林：我的8年架構(gòu)師成長(zhǎng)之路

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

    liaosilzu2007 評(píng)論0 收藏0

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

    摘要：比如首頁(yè)是一個(gè)靜態(tài)頁(yè)面，不依賴(lài)什么接口列表頁(yè)涉及到價(jià)格日歷，篩選，一些提示信息模塊等，依賴(lài)不同的接口因?yàn)槭褂昧?，可以?shí)現(xiàn)前后端模板共用。 說(shuō)起網(wǎng)頁(yè)速度優(yōu)化，想必大家都能說(shuō)上幾句，最知名的莫過(guò)于雅虎的23條了。這里有一系列的小建議和優(yōu)化策略，但是治病也得看癥狀，對(duì)癥下藥才是關(guān)鍵。 比如淘寶賣(mài)家中心首頁(yè)速度優(yōu)化的這個(gè)場(chǎng)景，就是一個(gè)很突出的例子。文章里針對(duì)首頁(yè)展示優(yōu)化策略做個(gè)一個(gè)全面的對(duì)比，...

    adie 評(píng)論0 收藏0

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

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

    paulli3 評(píng)論0 收藏0

  • 鳥(niǎo)瞰前端 , 再論性能優(yōu)化

    摘要：前端性能優(yōu)化的涉及點(diǎn)從服務(wù)器到協(xié)議再到宿主環(huán)境本身都要有比較深刻的認(rèn)識(shí)，業(yè)界目前主要還是以雅虎總結(jié)出來(lái)?xiàng)l前端性能優(yōu)化的黃金軍規(guī)為參考。 歡迎大家前往騰訊云技術(shù)社區(qū)，獲取更多騰訊海量技術(shù)實(shí)踐干貨哦~ 導(dǎo)語(yǔ) : 從事前端有6年+的時(shí)間了，從最開(kāi)始的美工到重構(gòu)再到偏向js邏輯開(kāi)發(fā)的前端開(kāi)發(fā)，一直在前端這個(gè)行業(yè)里面摸索和學(xué)習(xí)，我現(xiàn)在將自己這些年的一個(gè)心得體會(huì)來(lái)個(gè)系統(tǒng)性的梳理寫(xiě)成一篇關(guān)于性能優(yōu)化...

    voidking 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<