web前端性能分析工具导引

WebFront-endperformanceAnalyzerer梁剑钊2008年6月为什么关注前端性能分析？Yahoo高性能网页最佳实践(14+20)前端性能分析工具◦Fiddler◦IBMPageDetailer◦FireBug◦YahooYSlow◦HTTPAnalyzer◦AOLPageTestPageTest源码解读优化定律如何扩展前端工具500msslower=20%dropintraffic(Google)100msslower=1%dropinsales(Amazon)TheLifeofPage2.0requestHTMLsentonloadpagesettlesconceptionbirthgraduationmarriage?R.I.P.Userperceived“onload”happenssomewherehereuserinteraction,XHRseventhandlers,components,XHRsrequestbackendfetchingcomponentsfetuschildteenadultBack-end=5%Front-end=95%EvenPrimedCache,front-end=88%TheImportanceofFront-EndPerformanceRequiresextraHTTPrequests!++=What’stheOther80%?Focuson!ExternalComponents(images,js,css)RedirectsRendering(complicatedbyjsandcss)DNSlookups+80%-90%80-90%oftheend-userresponsetimeisspentonthefront-endGreaterpotentialforimprovement80-90%ofthetimeEasierthantheback-end目标FasterloadingtimesforpagesLesseramountofdatatotransferLessloadontheserver为什么关注前端性能分析？Yahoo高性能网页最佳实践(14+20)前端性能分析工具◦Fiddler◦IBMPageDetailer◦FireBug◦YahooYSlow◦HTTPAnalyzer◦AOLPageTestPageTest源码解读优化定律如何扩展前端工具The14rulesforhighperformancewebsitesMakeFewerHTTPRequestsUseaContentDeliveryNetworkAddExpiresheader(orCache-control)GzipComponentsPutCSSattheTopMoveScriptstotheBottom(inlinetoo)AvoidCSSExpressionsMakeJavaScriptandCSSExternalReduceDNSLookupsMinifyJavaScriptandCSS(inlinetoo)AvoidRedirectsRemoveDuplicateScriptsConfigureETagsMakeAJAXCacheablecontentserverserverserverserverjavascriptjavascriptjavascriptjavascriptcontentcsscsscsscsscontentcontent1.Flushthebufferearly2.UseGETforAJAXrequests3.Post-loadcomponents4.Preloadcomponents5.ReducethenumberofDOMelements6.Splitcomponentsacrossdomains7.Minimizethenumberofiframes8.No404s9.Reducecookiesize10.Usecookie-freedomainsforcomponents1[e-mail]'tscaleimagesinHTML18.Makefavicon.icosmallandcacheable19.Keepcomponentsunder25K20.PackcomponentsintoamultipartdocumentHighperformancewebpages20newbest-practicescontentjavascriptjavascriptcontentcontentcontentcontentserverservercsscssimagesimagesimagesimagesmobilemobilecookiecookiecontent为什么关注前端性能分析？Yahoo高性能网页最佳实践(14+20)前端性能分析工具◦Fiddler◦IBMPageDetailer◦FireBug◦YahooYSlow◦HTTPAnalyzer◦AOLPageTestPageTest源码解读优化定律如何扩展前端工具Firefox阵营◦DOMInspector◦Firebug◦JavaScriptDebugger◦HTMLValidator◦WebDeveloper◦YSlowIE堡垒◦IEDeveloperToolbar◦IEPro◦Fiddler◦HttpWatch◦AOLPageTest(开源)通用商业工具◦IBMPageDetailer◦HTTPAnalyzerMaximizingParallelDownloadsresponsetime(seconds)ruleofthumb:useatleasttwobutnomorethanfouraliases0.000.200.400.600.801.001.201.40124510average36x36px(0.9Kb)116x61px(3.4Kb)IBMPageDetailerMethodology◦PacketSnifferCompetitiveAdvantage◦Mostaccurate◦Providesdetaileddata◦Worksforanybrowser◦BestwaterfallviewDrawbacks◦90dayfreetrial◦RunsonlyonWindows◦MissescachedcomponentsFireBugNetPanelMethodology◦PacketSnifferCompetitiveAdvantage◦Displayswaterfallview◦ProvidesHTTPheaderinfoDrawbacks◦RunsonlyinFirefox◦InaccuratewaterfallviewNorendertimeNoparsetimeNoredirectsNoDNSlookups◦MissescachedcomponentsAOLPageTestMethodology◦IEExtensionCompetitiveAdvantage◦Opensource◦moregranulardetailsofeachHTTPrequestDrawbacks◦RunsonlyonIEYSlowMethodology◦FirefoxextensionCompetitiveAdvantage◦performancelinttool◦gradeswebpagesforeachruleDrawbacks◦RunsonlyonFireFox为什么关注前端性能分析？Yahoo高性能网页最佳实践(14+20)前端性能分析工具◦Fiddler◦IBMPageDetailer◦FireBug◦YahooYSlow◦HTTPAnalyzer◦AOLPageTestPageTest源码解读优化定律如何扩展前端工具READYSTATE_UNINITIALIZED◦Defaultinitializationstate.READYSTATE_LOADING◦Objectiscurrentlyloadingitsproperties.READYSTATE_LOADED◦Objecthasbeeninitialized.–获取完服务器原始数据，但不能直接在客户端使用READYSTATE_INTERACTIVE◦Objectisinteractive,butnotallofitsdataisavailable.----正在解析数据READYSTATE_COMPLETE◦Objecthasreceivedallofitsdata.—全部数据已解析完客户端可用的格式MicrosoftVisualStudioc++2008Win32DebugIDEBHO调试参数:iexplore.exewspStartup=newCAPIHook(msafd.dll,WSPStartup,(PROC)::WSPStartup_Hook,TRUE);nspStartup=newCAPIHook(rnr20.dll,NSPStartup,(PROC)::NSPStartup_Hook,TRUE);…//storetheoriginalfunctionpointerstouselaterwsp-socket=lpProcTable-lpWSPSocket;wsp-close=lpProcTable-lpWSPCloseSocket;wsp-connect=lpProcTable-lpWSPConnect;wsp-recv=lpProcTable-lpWSPRecv;wsp-send=lpProcTable-lpWSPSend;wsp-bind=lpProcTable-lpWSPBind;lpProcTable-lpWSPSocket=WSPSocket_Hook;lpProcTable-lpWSPCloseSocket=WSPCloseSocket_Hook;lpProcTable-lpWSPConnect=WSPConnect_Hook;lpProcTable-lpWSPRecv=WSPRecv_Hook;lpProcTable-lpWSPSend=WSPSend_Hook;lpProcTable-lpWSPBind=WSPBind_Hook;CWinInetHook::CWinInetHook(void):internetOpenA(wininet.dll,InternetOpenA,(PROC)::InternetOpenA_Hook,TRUE),internetOpenW(wininet.dll,InternetOpenW,(PROC)::InternetOpenW_Hook,TRUE),internetCloseHandle(wininet.dll,InternetCloseHandle,(PROC)::InternetCloseHandle_Hook,TRUE),internetSetStatusCallback(wininet.dll,InternetSetStatusCallback,(PROC)::InternetSetStatusCallback_Hook,TRUE),internetSetStatusCallbackA(wininet.dll,InternetSetStatusCallbackA,(PROC)::InternetSetStatu