9 Facebook网站的前端性能优化 蒋长浩

整理文档很辛苦,赏杯茶钱您下走!

免费阅读已结束,点击下载阅读编辑剩下 ...

阅读已结束,您可以下载文档离线阅读编辑

资源描述

(c)2010Facebook,Inc.oritslicensors.FacebookisaregisteredtrademarkofFacebook,Inc..Allrightsreserved.1.0BigPipe:pipeliningFacebook!TheCSDNConferenceDec9th,2010,Shanghai,ChinaChanghaoJiangThebeginning-2004Today500MUsers500MToday’srealityAveragehourspermonthperuser!SitespeediscriticaltoFacebook!Whatdowemeasure?CDNFacebookclient/rendertimeservertimenetworktimeUserUserUserUserperceivedperceivedperceivedperceivedlatencylatencylatencylatencyPagegeneration(inserver)Pagerendering(inbrowser)NetworkLatencyTime-to-Interact(TTI)Time-to-Interact(TTI)BigPipe:pipelineFacebookwebsiteFacebookpageUserUserUserUserperceivedperceivedperceivedperceivedlatencylatencylatencylatencyPagegeneration(inserver)Pagerendering(inbrowser)NetworkLatencyPagegeneration(inserver)Pagerendering(inbrowser)NetworkLatencyUserUserUserUserperceivedperceivedperceivedperceivedlatencylatencylatencylatencyPagelet1:Pagelet2:Pagelet3:TTIimprovement2Ximprovementinuserperceivedlatencyforalmostallbrowsers.PageletexampleclassAdsPageletextendsPageletResponse{publicfunctioninit(){//initializepagelet}publicfunctionprepare(){//datafetching}publicrender(){//generatepageletresponse.}}Pageletprogrammingmodel•Selfcontained HTML,JavaScript,CSS,onloadRegister•Advancedfeatures: Pagelethierarchy Phasedrendering Cross-pageletdependencies•datadependency•displaydependency•JavaScriptdependencyBigPipeprogrammingmodel//Step1:createBigPipeinstance$big_pipe=BigPipe::getInstance(BigPipeType::PIPELINE);//Step2:Specifypagelayoutandpageletplaceholders.$big_pipe-setPage(‘divid=“left_column”divid=“pagelet_navigation”/div/divdivid=“middle_column”divid=“paglet_composer”/divdivid=“pagelet_stream”/div/div’);//Step3:addpageletstothepipe$big_pipe-addPagelet(newUIPagelet()-setSrc(‘/pagelet/composer.php’)-setWrapperId(‘pagelet_composer’));…//Step4:generatepageletsflushthemout.echo$big_pipe-render();//Step1:createBigPipeinstance$big_pipe=BigPipe::getInstance(BigPipeType::PIPELINE);//Step2:Specifypagelayoutandpageletplaceholders.$big_pipe-setPage(‘divid=“left_column”divid=“pagelet_navigation”/div/divdivid=“middle_column”divid=“paglet_composer”/divdivid=“pagelet_stream”/div/div’);//Step3:addpageletstothepipe$big_pipe-addPagelet(newUIPagelet()-setSrc(‘/pagelet/composer.php’)-setWrapperId(‘pagelet_composer’));…//Step4:generatepageletsflushthemout.echo$big_pipe-render();//Step1:createBigPipeinstance$big_pipe=BigPipe::getInstance(BigPipeType::PIPELINE);BigPipeprogrammingmodel//Step1:createBigPipeinstance$big_pipe=BigPipe::getInstance(BigPipeType::PIPELINE);//Step2:Specifypagelayoutandpageletplaceholders.$big_pipe-setPage(‘divid=“left_column”divid=“pagelet_navigation”/div/divdivid=“middle_column”divid=“paglet_composer”/divdivid=“pagelet_stream”/div/div’);//Step3:addpageletstothepipe$big_pipe-addPagelet(newUIPagelet()-setSrc(‘/pagelet/composer.php’)-setWrapperId(‘pagelet_composer’));…//Step4:generatepageletsflushthemout.echo$big_pipe-render();//Step2:Specifypagelayoutandpageletplaceholders.$big_pipe-setPage(‘divid=“left_column”divid=“pagelet_navigation”/div/divdivid=“middle_column”divid=“paglet_composer”/divdivid=“pagelet_stream”/div/div’);BigPipeprogrammingmodel//Step1:createBigPipeinstance$big_pipe=BigPipe::getInstance(BigPipeType::PIPELINE);//Step2:Specifypagelayoutandpageletplaceholders.$big_pipe-setPage(‘divid=“left_column”divid=“pagelet_navigation”/div/divdivid=“middle_column”divid=“paglet_composer”/divdivid=“pagelet_stream”/div/div’);//Step3:addpageletstothepipe$big_pipe-addPagelet(newUIPagelet()-setSrc(‘/pagelet/composer.php’)-setWrapperId(‘pagelet_composer’));…//Step4:generatepageletsflushthemout.echo$big_pipe-render();//Step3:addpageletstothepipe$big_pipe-addPagelet(newUIPagelet()-setSrc(‘/pagelet/composer.php’)-setWrapperId(‘pagelet_composer’));…BigPipeprogrammingmodel//Step1:createBigPipeinstance$big_pipe=BigPipe::getInstance(BigPipeType::PIPELINE);//Step2:Specifypagelayoutandpageletplaceholders.$big_pipe-setPage(‘divid=“left_column”divid=“pagelet_navigation”/div/divdivid=“middle_column”divid=“paglet_composer”/divdivid=“pagelet_stream”/div/div’);//Step3:addpageletstothepipe$big_pipe-addPagelet(newUIPagelet()-setSrc(‘/pagelet/composer.php’)-setWrapperId(‘pagelet_composer’));…//Step4:generatepageletsflushthemout.echo$big_pipe-render();//Step4:generatepageletsflushthemout.echo$big_pipe-render();BigPipeprogrammingmodelBigPipegenerationmodes•Singleflushmode Supportsearch-enginecrawlers SupportclientswithoutJavaScript•Pipelinemode Generateandflushpageletssequentially(defaultmode)•Parallelmode Generatepageletsinparallelandflushthemout-of-orderBigPipeprogrammingmodel•Encapsulation Hideimplementationdetails•Intuitive Easytounderstandmentalmodelfordevelopers•Flexible Differentmodesgoodfordifferentusecase.Thankyou!

1 / 40
下载文档,编辑使用

©2015-2020 m.777doc.com 三七文档.

备案号:鲁ICP备2024069028号-1 客服联系 QQ:2149211541

×
保存成功