本發(fā)明涉及互聯(lián)網(wǎng)web性能監(jiān)控領(lǐng)域，具體涉及一種抓取用戶(hù)異步請(qǐng)求回調(diào)執(zhí)行時(shí)間的方法。

背景技術(shù)：

在本發(fā)明前，目前各大瀏覽器的升級(jí)都對(duì)性能的提升做了不斷的優(yōu)化，用戶(hù)對(duì)體驗(yàn)的敏感度也越來(lái)越高，很多產(chǎn)品都開(kāi)始注重用戶(hù)的體驗(yàn)，出現(xiàn)了很多用戶(hù)體驗(yàn)監(jiān)控產(chǎn)品，像國(guó)外的newrelic、dynatrace,以及國(guó)內(nèi)的uyun(優(yōu)云)、oneapm等。作為一個(gè)前端開(kāi)發(fā)者，重點(diǎn)關(guān)注點(diǎn)在Web性能上。Web的性能度量大致可分為兩個(gè)部分，一部分是頁(yè)面及外部資源的加載時(shí)間，另一部分則是用戶(hù)與頁(yè)面的交互過(guò)程中的展現(xiàn)時(shí)間。第一部分有很多相應(yīng)的優(yōu)化方案，比如cdn，css sprites；第二部分現(xiàn)在也有相關(guān)框架，如現(xiàn)在的React提出的virtual dom，就是減少在視圖層面最終展現(xiàn)的時(shí)間。另外一方面，隨著web應(yīng)用的流行，單頁(yè)應(yīng)用也越來(lái)越多，全都是采用異步請(qǐng)求來(lái)更新頁(yè)面，異步請(qǐng)求的性能也越來(lái)越需要得到重視，目前很多都是在請(qǐng)求這塊去做監(jiān)控和優(yōu)化，而在抓取異步請(qǐng)求回調(diào)的執(zhí)行時(shí)間業(yè)界并沒(méi)有好的方案，雖然這個(gè)時(shí)間相對(duì)較短，但是在越來(lái)越高的用戶(hù)體驗(yàn)上，還是有必要把這塊的時(shí)間展現(xiàn)給用戶(hù)，讓用戶(hù)做更進(jìn)一步的分析；有鑒于此，特提出本發(fā)明。

技術(shù)實(shí)現(xiàn)要素：

本發(fā)明的目的在于克服現(xiàn)有技術(shù)存在的不足，而提供一種抓取用戶(hù)異步請(qǐng)求回調(diào)執(zhí)行時(shí)間的方法，通過(guò)js單線程原理和改寫(xiě)元素瀏覽器對(duì)象來(lái)實(shí)現(xiàn)，用于監(jiān)控網(wǎng)頁(yè)中異步請(qǐng)求(Ajax)的回調(diào)函數(shù)代碼執(zhí)行所花費(fèi)的時(shí)間，便于分析異步請(qǐng)求的性能。

本發(fā)明的目的是通過(guò)如下技術(shù)方案來(lái)完成的。這種抓取用戶(hù)異步請(qǐng)求回調(diào)執(zhí)行時(shí)間的方法，該方法是根據(jù)單線程的原理，當(dāng)有異步回調(diào)函數(shù)執(zhí)行的時(shí)候，立即再加入一個(gè)為零的定時(shí)器，定時(shí)器里的回調(diào)會(huì)被放在隊(duì)列中，并在js主線程中空閑的時(shí)候立即被推入到主線程中執(zhí)行，使得該回調(diào)函數(shù)代碼執(zhí)行完就會(huì)立即執(zhí)行定時(shí)器里面的代碼；從回調(diào)執(zhí)行開(kāi)始-回調(diào)執(zhí)行-定時(shí)器執(zhí)行，這幾個(gè)時(shí)間在同一條線上，通過(guò)定時(shí)器的執(zhí)行來(lái)標(biāo)識(shí)回調(diào)的結(jié)束，并計(jì)算所要的時(shí)間。

更進(jìn)一步的，該方法通過(guò)改寫(xiě)原生異步請(qǐng)求對(duì)象，用于全局監(jiān)控所有的異步請(qǐng)求；并利用js是單線程的原理，通過(guò)打點(diǎn)的方式來(lái)計(jì)算時(shí)間差；具體包括如下步驟：

S1重新改寫(xiě)window.XMLH TTPRequest相關(guān)的對(duì)象和方法；

S2監(jiān)控所有異步請(qǐng)求，在readyState狀態(tài)為4時(shí)，標(biāo)記一個(gè)回調(diào)函數(shù)開(kāi)始時(shí)間start；

S3然后在currentState＝4中添加一個(gè)setTimeout(func,0)定時(shí)器，即成功返回后添加一個(gè)setTimeout(func,0)定時(shí)器，這個(gè)func里面再添加一個(gè)回調(diào)函數(shù)結(jié)束時(shí)間end；

S4計(jì)算end和start之差，兩者之差就是異步請(qǐng)求回調(diào)函數(shù)的執(zhí)行時(shí)間。

本發(fā)明的有益效果為：本發(fā)明完整的輸出一個(gè)異步請(qǐng)求的時(shí)間點(diǎn)：從發(fā)起請(qǐng)求，接受請(qǐng)求，執(zhí)行請(qǐng)求的回調(diào)，對(duì)目前相對(duì)一些完善的監(jiān)控體驗(yàn)添加了最后一道監(jiān)控指標(biāo)，讓開(kāi)發(fā)者可以清晰的了解到自己應(yīng)用的性能瓶頸在哪。本發(fā)明的目的即是計(jì)算異步請(qǐng)求回調(diào)函數(shù)的執(zhí)行時(shí)間，尤其在單頁(yè)應(yīng)用中，大部分都是采用ajax交互，能幫助管理者提升應(yīng)用的性能，追求更好的體驗(yàn)。

附圖說(shuō)明

圖1是本發(fā)明中異步回調(diào)從抓取到上報(bào)的過(guò)程示意圖；

圖2是本發(fā)明中javascript執(zhí)行模型示意圖。

圖3是本發(fā)明中具體流程示意圖。

具體實(shí)施方式

下面通過(guò)附圖和具體實(shí)施方式對(duì)本發(fā)明作進(jìn)一步闡述，實(shí)施例將幫助更好地理解本發(fā)明，但本發(fā)明并不僅僅局限于下述實(shí)施例。

如圖所示，本發(fā)明主要是根據(jù)單線程的原理(同一個(gè)時(shí)刻只有一段執(zhí)行代碼)，當(dāng)有異步回調(diào)函數(shù)執(zhí)行的時(shí)候，立即加入一個(gè)為零的定時(shí)器，這個(gè)定時(shí)器里的回調(diào)會(huì)被放在隊(duì)列中，并在js主線程中空閑的時(shí)候立即被推入到主線程中執(zhí)行，所以保證了這個(gè)回調(diào)函數(shù)代碼執(zhí)行完就會(huì)立即定時(shí)器里面的代碼。從回調(diào)執(zhí)行開(kāi)始-回調(diào)執(zhí)行-定時(shí)器執(zhí)行(回調(diào)結(jié)束)，這幾個(gè)時(shí)間在同一條線上，通過(guò)定時(shí)器的執(zhí)行來(lái)標(biāo)識(shí)回調(diào)的結(jié)束，通過(guò)這樣的方式計(jì)算所要的時(shí)間。本發(fā)明實(shí)現(xiàn)步驟具體如下：

S1新建一個(gè)空對(duì)象用來(lái)指向原生的異步請(qǐng)求對(duì)象,并重新改寫(xiě)window.XMLH TTPRequest相關(guān)的對(duì)象和方法；

S2監(jiān)聽(tīng)異步請(qǐng)求回調(diào)，對(duì)不同的請(qǐng)求狀態(tài)進(jìn)行監(jiān)聽(tīng)；

S3當(dāng)返回狀態(tài)為成功時(shí)，在readyState狀態(tài)為4時(shí)，標(biāo)記下開(kāi)始執(zhí)行時(shí)間比如標(biāo)記一個(gè)變量a；

S4在狀態(tài)為成功的時(shí)候立即添加一個(gè)定時(shí)器,這個(gè)定時(shí)器設(shè)為0s后執(zhí)行，這個(gè)目的是盡快讓這個(gè)定時(shí)器的回調(diào)立即執(zhí)行(javascript主線程空閑時(shí)，會(huì)把異步隊(duì)列中的回調(diào)推入到主線程去)；

S5當(dāng)異步請(qǐng)求回調(diào)中的代碼執(zhí)行完之后，這個(gè)時(shí)候也就是javascript主線程空閑時(shí)瀏覽器有個(gè)隊(duì)列機(jī)制，會(huì)把這個(gè)隊(duì)列里面的回調(diào)推入到主線程中去執(zhí)行，也就是我們上一步的定時(shí)器回調(diào)；

S6當(dāng)我們的定時(shí)器回調(diào)立即執(zhí)行時(shí)，我們標(biāo)記一個(gè)結(jié)束時(shí)間b，從上面的步驟中可以看到，從異步回調(diào)開(kāi)始執(zhí)行到這個(gè)定時(shí)器執(zhí)行的時(shí)間段就是異步回調(diào)執(zhí)行的整個(gè)時(shí)間，所以我們用結(jié)束時(shí)間b減去開(kāi)始時(shí)間a，兩者之差就是異步請(qǐng)求回調(diào)函數(shù)的執(zhí)行時(shí)間。

本發(fā)明在實(shí)施例中，只要在web端添加應(yīng)用，會(huì)生成一段部署代碼，將部署代碼添加到指定的頁(yè)面head標(biāo)簽之內(nèi)(這里需要對(duì)html有所了解的人去部署)，正確部署之后，過(guò)幾分鐘之后，web端就會(huì)有相應(yīng)的數(shù)據(jù)展現(xiàn)。

除上述實(shí)施例外，本發(fā)明還可以有其他實(shí)施方式。凡采用等同替換或等效變換形成的技術(shù)方案，均落在本發(fā)明要求的保護(hù)范圍。