前端性能测试学习笔记Word格式文档下载.docx
- 文档编号:5143884
- 上传时间:2023-05-04
- 格式:DOCX
- 页数:20
- 大小:136.77KB
前端性能测试学习笔记Word格式文档下载.docx
《前端性能测试学习笔记Word格式文档下载.docx》由会员分享,可在线阅读,更多相关《前端性能测试学习笔记Word格式文档下载.docx(20页珍藏版)》请在冰点文库上搜索。
首次登录的话并不能看出来有什么提升,但是当浏览子页面或者再次浏览的时候,就会发现速度较之前有很大改观,服务器不会重新抓图片、css、javascript这样不常常跟新的文件(就是减少了HTTP请求次数)。
far-futureexpirationdate足够长的过期时间
如何添加ExpiresHeaders:
如果你的服务器是Apache,你可以用ExpiresDefault这样的语句。
直接添加在.htaccess文件即可。
比如
ExpiresDefault"
accessplus2months"
这个语句使用了相对时间,即从现在起到两个月后过期。
当然years、months、weeks、days、hours、minutes、seconds都可以使用。
你可以写入.htaccess文件中这样的语句:
#ExpireHeader
accessplus2hours"
或者
#Expireimagesheader
ExpiresActiveOn
ExpiresDefaultA0
ExpiresByTypeimage/gifA2592000
ExpiresByTypeimage/pngA2592000
ExpiresByTypeimage/jpgA2592000
ExpiresByTypeimage/jpegA2592000
ExpiresByTypeimage/icoA2592000
ExpiresByTypetext/cssA2592000
ExpiresByTypetext/javascriptA2592000
注:
A2592000为1个月(60*60*24*30=2592000)
移除ETags
这个看了半天,似乎建议直接一锅端,移除它可以减少HTTPheaders的大小,据说这样能让站点表现更好。
依然在.htaccess文件中加入下面语句即可。
FileETagnone
PS:
也有插件Autoptimize可以自动添加expiresheader、压缩css,js,html,省去了手动操作。
而且可以选择CDN。
不过插件的坏处就是不知道它到底改了哪儿,一旦出现问题就得停用一个甚至几个插件,停下来仔细检查。
计算公式:
Weacknowledgethatnotallresourcesonapagearesuitableforcaching-soweallow5resourcesofwithnocachesettings.Apagethereforegetsascoreof100iftherearefewerthan5resourceswithmissingcachesettingsorasettinginthepast.
并不是所有资源都适合缓存,所以允许5个资源不使用缓存,如果少于5个就是100分
Note:
WedonotconsiderdynamicURLsasbeingcachable.TheseareallURLsthathavequeryparametersandallXHRRequests
Takeapagethathasatotalof50resourcessuchasimages,css,javascriptfiles.If10outofthe50arenotcachedatallorhaveanexpirationheaderinthepasttherankisdegradedby15%(5outof50=10%*Factor1.5)andgoesdownto85.Remember-wedonotpenalizethefirst5requestshere.
If10haveashortexpirationheadertherankgetsadditionallydegradedby20%(10outof50).Intotalthispagewouldhaveacacherankingof65whichcorrespondstoaDGrade.
比如总共有50个资源,有10个没有缓存,则减分(10-5)/50*1.5*100=15分,有10资源shortexpiration,则减分10/50*100=20分,最后得分就是100-15-20=65分,GradeD。
A=100-90,B=89-80,C=79-70,D=69-60,E=59-50,F=49-0
2.NetworkRequestPerformance
AvoidRedirects,HTTP400sandHTTP500s
避免重定向请求,400s请求错误和500s服务器错误
重定向增加了额外的浏览器向服务器的请求,在用户和HTML文档之间插入的重定向延误了页面的呈现和组件下载,因为它们都不可能在获得HTML文档之前开始。
Therearetoomany(css,image,js)servedfromthesamedomain;
Mergingcss/image/js
AJAXEditionmakestheassumptionthatmostimages,cssandjsfilesservedfromthesamedomaincanbemergedsothatwedonotenduphavingmorethan1css,6imagesand2jsfilefromthesamedomain.
Takeapagethathasatotalof50roundtripsinordertofullyloadthepage.Ifwehave2HTTPredirectsonthatpageitdegradestherankby2.Ifwehaveonedomainthatserves3CSSfilesthismeansthat2canbeavoideddegradingtherankbyanother2.Ifoneofthedomainsserves16imagesweassumethat10canbesavedbymergingimagesintofewer.Wereducetherankbyonepointforevery5imageswhichreducestherankforthispagebyanother2.Ifwealsohaveonedomainthatserves3javascriptfilestherankgetspenalizedby1point.
Weendupwitharankof100-2-2-2-1=93whichcorrespondstoanAGrade.
1个css,6个images,2个js是合理的
50个请求,2个重定向减2分,2个可合并的css减2分,每5个可合并的image减1分,3个js超出1个减1分
3.Server-SidePerformanceRank
Ø
Firstrequestonthepage->
usuallyreturnstheinitialHTML
RequeststhatreturnHTML->
generatedcontent(thisalsomayincludestaticHTMLpages)
RequestsonURL'
sendingwithaspx,jsp,php
RequeststhatsendGETorPOSTparametersdatatotheserver
AllXHR/AJAXRequests
Upto6Server-Siderequestsarefine.Everyadditionalrequestgetspenalizedby1Rank.
WereducetheRankby1havingaServerTimefrom200msto400ms.Wereduceitby2between400msand1000sandreduceitby4whenhavingtimeslongerthan1s.
Takeapagethathasatotalof10requeststhatmatchthecriteriadescribedabove.ThisreducestheRankby4.2Requeststakebetween400msand1000mswhichreducestherankby4andwehaveonerequestthattakesmorethan1swhichreducestheRankbyadditional4.
6个server-siderequests是合理的,每超过1个减1分
servertime在200ms~400ms之间的每个减1分,在400ms~1000ms之间的每个减2分,超过1s的每个减4分
4.JavaScript/AjaxPerformance
Scriptblocksthatexecutelongerthan20msareconsideredtohavepotentialforimprovement.
Wetaketheoverallexecutiontimeofblocksthatexecutelongerthan20ms.Every50msreducesthePageRankby1point.
Takeapagethathasatotalof5JavaScriptfiles.4executefasterthan20ms,2executein500ms,1takes700msandthelastonetakes1s.2.Italsomakes4XHRcalls.
TheRankgetsdegradedby3becauseoftoomanyJavaScriptfiles.Wealsohaveatotalof2620ms(480+480+680+980)ofscriptblocksexecutinglongerthan20mswhichleadsustoaRankreduction52(2620/50).WedonotpenalizeforXHRasitisbelowthe5XHRthreshold.
以20ms为界,超过20ms的所有(js的执行时间-20ms)累加
5个js文件超出3个减3分,执行时间慢减52分
OverallWebSitePerformance
TimetoFirstImpressionisgreatif<
1s,acceptableif<
2.5sandslowif>
2.5s
TimetoonLoadisgreatif<
2s,acceptableif<
4sandslowif>
4s
TimetoFullyLoadedisgreatif<
5sandslowif>
5s
Greatsitesrequirefewerthan40requests,acceptableareupto100requests.Siteswithmorethan100HTTPRoundtripsareconsideredbad.
Theoverallrankthereforeiscalculatedbytaking60%oftherankbasedontheKPI'
sand10%eachfromCaching,Network,JavaScriptandServer-Side.
Apagestartswitharankof100andisloweredbasedonmissedthresholds.Assumingourpagehasa1.6secondsTimetoFirstImpression.Forevery200msthisKPIisslowerthanthevaluewespecifiedasbeinggreat(whichis1sinthiscase)wedegradetherankby1.Thisreducestherankofthispageby3duetoTimetoFirstImpression.
IfthepagehasanonLoadof3.2sitgetspenalizedanadditional6pointsas3.2sexceedsthe2sgoalforagreattime.Wealsousethe200msrulethatwetakefortheFirstImpressiontime.
IfthepagehasaFullyloadedtimeof4sitgetsadditionallypenalizedby4(differencetothe2sgoalbutonlypenalizing1pointforevery500ms).Thisreducesthepagerankby10(6&
4)pointsduetoOnLoadandFullyLoadedtime.
Eventhoughapagemightbefast-ifitrequirestoomanyroundtripstodownloadallresourceswepenalizetheRank.Ifapagecausesmorethan40roundtripswepenalize1pointforevery5requestsmorethan40.Ifthepagehas55roundtripswereducetherankby3.
TheRankcalculationbasedontheseKPI'
sthereforeis100-3-6-4-3=84.
Nowitstimetolookatthesubranks.Weassumethefollowingvalues:
BrowserCaching(60outof100),Network(80outof100),JavaScript(80outof100)andServer-Side(70outof100).WeweighttheoverallRankbytaking60%oftheKPIRankand10%eachontheSubRanks.
Thisgivesustothefollowingcalculation:
84*0.6+60*0.1+80*0.1+80*0.1+70*0.1=79whichcorrespondstoaGradeC.
FirstImpression大于1s每200ms减1分
OnLoad大于2s每200ms减1分
FullyLoad大于2s每500ms减1分
Roundtrips大于40每5requests减1分
总得分:
KPI得分*0.6+sum(SubRanks)*0.1
TimetoFirstImpression
在这个时间内浏览器下载了所有相关的文件,并初始化HTML和所有引用的对象,之后才会触发OnLoad时间。
ThisisthetimefromwhentheURLisenteredintothebrowseruntiltheuserhasthefirstvisualindicationofthepagethatgetsloaded.ThefirstvisualindicationisthefirstdrawingactivitybythebrowserandcanbetracedwithdynaTraceAJAXEdition.ItdependsontheinitialHTMLdocumentwhenthebrowsercanstartdrawingcontent.TherearedifferentBestPracticesavailablethattalkaboutdifferentstrategies.Googleforexampledownloadsaminimalisticpagetoprovidefastfirstvisualrendering.ItthendelayloadsmorecontentafteronLoadorevenlaterwhentheuserstartsinteractingwiththepage.
这个时间等于在浏览器地址栏输入URL按回车到用户看到网页的第一个视觉标志为止,第一个视觉标志是浏览器的第一个绘制活动,浏览器绘制内容的起始时间取决于原始的HTML文档,不同的策略有不同的最佳实践,例如Google会先下载一个极简的页面提供快速的第一视觉呈现,在onLoad后再延迟加载更多的内容,有时甚至是用户已经开始与网页交互了才加载剩下的内容。
TimetoonLoadEvent
ThisisthetimeuntilthebrowsertriggerstheonLoadeventwhichhappenswhentheinitialdocumentandallreferencedobjectsarefullydownloaded.JavaScriptonLoadhandlersusethiseventtomanipulatethecurrentinitialstateofthepage.Thiseventisoneoftheoptionsexplainedearliertodownloadadditionalordelayloadcontent.
这个时间是直到浏览器触发onLoad事件的时间,当原始文档和所有引用的内容完全下载后才会触发这个事件,JavaScriptonLoad处理程序使用这个事件操作页面的当前初始状态。
TimetoFullyLoaded
ThisisthetimeuntilallonLoadJavaScripthandlershavefinishedtheirexecutionandalldynamicallyordelayloadedcontenttriggeredbythosehandlershasbeenretrieved.ItissometimesabithardtoidentifytheexacttimewhenthepageisfullyloadedespeciallywhenJavaScripthandlersusereoccurringtimeoutsthatconstantlymodifythepage,e.g.:
toimplementaticker.
这个时间等于直到所有onLoadJavaScript处理程序执行完毕,所有动态的或延迟加载的内容都通过这些处理程序触发的时间,有时要精确确定一个页面的完全载入时间是很困难的,特别是当JavaScript处理程序使用了不断修改页面的操作时,如实时股票显示。
一个web网站的页面的生命周期有3个阶段:
1
加载
2
渲染
3
响应用户的交互
YSlow
YSlow是Yahoo发布的一款基于FireFox的插件,可以分析任何网站,并为每一个规则产生一个整体报告,如果页面可以进行优化,则YSlow会列出具体的修改意见。
YSlow计算公式
F=8×
{100-[4×
(JS文件数-3)+4×
(CSS文件数-2)+3×
(CSS背景图连接数-6)
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 前端 性能 测试 学习 笔记
![提示](https://static.bingdoc.com/images/bang_tan.gif)