Facebook网站的Ajax化、缓存和流水线

(c)2010Facebook,Inc.oritslicensors.FacebookisaregisteredtrademarkofFacebook,Inc..Allrightsreserved.1.0Ajaxifying,CachingandPipeliningFacebookWebsiteTheVelocityConferenceDec7th,2010,Beijing,ChinaChanghaoJiangThebeginning-2004TodayMissionGivepeoplethepowertoshareandmaketheworldmoreopenandconnected500MUsers500MToday’srealityAveragehourspermonthperuser!SitespeediscriticaltoFacebook!Whatdowemeasure?CDNFacebookWhatdowemeasure?CDNFacebookclient/rendertimeservertimenetworktimeTime-to-Interact(TTI)Time-to-Interact(TTI)Time-to-Interact(TTI)ThreefrontendoptimizationsatFacebookQuicklingtransparentlyajaxifiesthewholewebsitePageCachecachesuser-visitedpagesinbrowserBigPipepipelinesFacebookwebsiteQuickling:AjaxifytheFacebooksiteMotivation:removeredundantworkMotivation:removeredundantworkloadunloadloadunloadloadunloadloadunloadloadunloadFullpageloadAjaxcallRemoveredundantworkviaAjaxPage1Page2Page3Page4Page1Page2Page3Page4UsesessionUsesessionHowQuicklingworks?1.Userclicksalinkorback/forwardbutton2.Quicklingsendsanajaxtoserver4.Quicklingblanksthecontentarea3.Responsearrives5.Downloadjavascript/CSS6.ShownewcontentImplementationdetails• LinkController• HistoryManager• Bootloader• BusyIndicator• CSSUnloading• Permanentlinksupport• ResettingtimerfunctionsUserperceivedlatency(TTI)reduction10%~30%reductioninTTI050010001500200025003000/home.php/profile.php/photo.php/album.phpFullpageloadQuickling0200400600800100012001400160018002000/home.php/profile.php/photo.php/album.phpFullpageloadQuicklingServerpagegenerationtimereductionQuicklingrequestsare20%~30%cheaper45%ofpagehitsareQuicklingrequestsQuicklingFullpageloadQuicklingconclusion:• Reduceuserperceivedlatencybymorethan10%• Save10%ofFacebook’sdatacentercost!PageCache:CachevisitedpagesatclientsideMotivation–temporallocality• Somepagesarelikelytoberevisitedsoon▪ E.g.homepage(re)visitedevery3pagehits:-profile-photo--notes--photo-photo• Cachethem!HowPageCacheworks?1.Userclicksalinkorbackbutton2.Quicklingsendsajaxtoserver4.Quicklingblanksthecontentarea3.Responsearrives5.Downloadjavascript/CSS6.Shownewcontent2.FindPageinthecache3.5SaveresponseincacheChallenges• Realtimeupdates▪ Pagecontentneedstobeasfreshaspossible• Cacheconsistency▪ Cachedpageshouldbeconsistentafterstate-modifyingoperationsIssue(1):IncrementalupdatesCachedversionRestoredversionIssue(1):IncrementalupdatesPollserverforincrementalupdatesviaAJAXcalls▪ Providesan‘onpagecacheRegister’APItodevelopers:▪ Invokedwhenapageisrestoredfromcache.▪ UsedtosendAJAXtoserverforincrementalupdates,refreshads,etc.▪ Blankthecontentareabeforeincrementalupdatesarrivetoavoidflashofstalecontents.Issue(2):In-pagewritesCachedversionRestoredversionIssue(2):In-pagewritesRecordandreplay▪ Automaticallyrecordallstate-changingoperationsinacachedpage▪ AllAJAXcallsusing‘POST’method,orthoseexplicitlyspecified‘replayable’willbeaddedtocachedcontent.▪ Automaticallyreplaythoseoperationswhencachedpageisrestored.▪ CachedAJAXhandlercallbackfunctionsalreadycontainallthecontextualinformationabouttherecordedoperationsduetoJavaScriptclosure.Issue(3):Cross-pagewritesCachedversionRestoredversionState-changingopIssue(3):Cross-pagewritesServersideinvalidation▪ Instrumentserver-sidedatabaseAPI,wheneverawriteoperationisdetected,sendasignaltotheclienttoinvalidatethecache.▪ Thesignal(a.k.a.cacheinvalidationmessage)containinformationaboutwhatpersistentdatahaschanged.▪ Uponreceivingcachemessages,theclientsidecanflushthewholecacheorrefreshonlythoseaffectedpagecomponentsviaAJAX.05001000150020002500FullpageloadQuicklingPageCacheUserperceivedlatency(TTI)redunction10xfasterinuserperceivedlatency20%~20%savingsonpagehitstohomepageServercostredunctionPageCacheconclusion:• 10Xspeedupinuserperceivedspeed!• Save2%ofFacebook’sdatacentercost!BigPipe:pipelineFacebookwebsiteFacebookpageUserperceivedlatencyPagegeneration(inserver)Pagerendering(inbrowser)NetworkLatencyPageletsPagegeneration(inserver)Pagerendering(inbrowser)NetworkLatencyUserperceivedlatencyPagelet1:Pagelet2:Pagelet3:TTIimprovement2Ximprovementinuserperceivedlatencyforalmostallbrowsers.05001000150020002500Firefox3.6IE8Safari4.0Chrome4.1MillisecondTraditionalmodelBigPipeBigPipefirstresponsehtmlheadscriptsrc=“bigpipejs”/…/headbody…divid=“left_column”divid=“pagelet_navigation”/div/divdivid=“middle_column”divid=“pagelet_composer/div/div…Pageletresponse1scripttype=“text/javascript”big_pipe.onPageletArrive({“id”:“pagelet_navigation”,“css”:[listofcssresources],“js”:[listofJavaScriptresources],“content”:html“onload”:[JavaScriptinitcode]…});/scriptPageletresponse2scripttype=“text/javascript”big_pipe.onPageletArrive({“id”:“pagelet_composer”,“css”:[listofcssresources],“js”:[listofJavaScriptresources],“content”:html“onload”:[JavaScriptinitcode]…});/scriptPageletexampleclassAdsPageletextendsPageletResponse{publicfunctioninit(){//initializepagelet}publicfunctionprepare(){//datafetching}publicrender(){//generatepageletresponse.}}Pageletprogrammingmodel• Selfcontained▪ HTML,JavaScript,CSS,onlo