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!