一種測(cè)量網(wǎng)頁(yè)首屏完全渲染時(shí)間的方法
【技術(shù)領(lǐng)域】
[0001] 本發(fā)明涉及一種測(cè)量方法，尤其涉及一種測(cè)量網(wǎng)頁(yè)首屏完全渲染時(shí)間的方法。
【背景技術(shù)】
[0002] 當(dāng)前應(yīng)用性能管理平臺(tái)（APM)中，描述一個(gè)網(wǎng)站性能的一個(gè)重要指標(biāo)就是網(wǎng)站的 首屏性能，而首屏性能因?yàn)椴皇荳3C規(guī)定的標(biāo)準(zhǔn)中網(wǎng)頁(yè)所應(yīng)該具有的標(biāo)準(zhǔn)行為和結(jié)構(gòu)。所 以各大瀏覽器廠商在瀏覽器的事件處理中也沒(méi)有設(shè)計(jì)針對(duì)首屏性能的相關(guān)接口和事件，但 對(duì)于網(wǎng)頁(yè)的開(kāi)發(fā)者和網(wǎng)頁(yè)的瀏覽者來(lái)說(shuō)，這個(gè)性能卻能很真實(shí)的反應(yīng)一個(gè)網(wǎng)頁(yè)打開(kāi)時(shí)對(duì)用 戶的主觀感受。針對(duì)這個(gè)需求，各大性能管理平臺(tái)都增加了這樣一個(gè)指標(biāo)，即首屏性能，它 指的是在網(wǎng)頁(yè)渲染時(shí)，首屏內(nèi)元素渲染高度達(dá)到指定高度的時(shí)間。其主要的計(jì)算方法為：用 戶通過(guò)瀏覽器提供的查詢渲染高度的Com接口，以一個(gè)固定的周期頻率，主動(dòng)得去獲取當(dāng) 前瀏覽器渲染高度的值，比較該值和用戶指定的首屏高度的值，如果查詢到的渲染高度大 于首屏高度的值，就認(rèn)為此查詢的時(shí)間即為首屏性能的值。
[0003] 雖然計(jì)算此指標(biāo)的方法多種多樣，但目前各種算法計(jì)算的首屏?xí)r間主要有以下幾 個(gè)缺點(diǎn)：
[0004] 1.首屏性能的值存著誤差；首屏性能的計(jì)算方法是瀏覽網(wǎng)頁(yè)時(shí)，實(shí)時(shí)查詢當(dāng)前瀏 覽器的渲染高度，而現(xiàn)代瀏覽器為了增加用戶使用的友好型，渲染普遍采用批量，大面積的 渲染策略，這就導(dǎo)致查詢到的首屏高度的值跳動(dòng)性比較大，例如查詢到的值可能是如下序 列的值：〇,〇, 500,1800,1800 (單位：像素）。假如我們?cè)O(shè)定的首屏高度為600像素，則我們 只能近似的選取我們查到渲染高度為1800像素的時(shí)刻作為我們的首屏性能，這就導(dǎo)致我 們的首屏性能的值存在很大的誤差。
[0005] 2.首屏性能的指標(biāo)無(wú)法準(zhǔn)確的描述當(dāng)前首屏范圍內(nèi)的內(nèi)容是否渲染完畢；因?yàn)?首屏性能的計(jì)算方法是通過(guò)瀏覽器的Dom接口，實(shí)時(shí)查詢當(dāng)前渲染窗口的縱向渲染高度， 而橫向渲染的數(shù)據(jù)是不考慮的，這就導(dǎo)致在指定的渲染高度范圍內(nèi)，可能左側(cè)的內(nèi)容已經(jīng) 渲染完畢，而右側(cè)的內(nèi)容還沒(méi)開(kāi)始渲染，從而無(wú)法準(zhǔn)確的反應(yīng)出首屏完全渲染完畢的時(shí)間。
[0006] 3.首屏性能的計(jì)算方法有缺陷；因?yàn)槭灼列阅艿挠?jì)算方法是我們通過(guò)瀏覽器提 供的Dom接口，以一定的周期頻率主動(dòng)的去查詢?yōu)g覽器當(dāng)前的渲染高度，而如果這個(gè)周期 頻率設(shè)置不太合適，周期太長(zhǎng)的話就會(huì)導(dǎo)致我們查詢到值的時(shí)刻并不是瀏覽器內(nèi)部真實(shí)渲 染到此高度的時(shí)刻，就會(huì)導(dǎo)致存著很大的誤差。

【發(fā)明內(nèi)容】

[0007] 為了解決上述技術(shù)所存在的不足之處，本發(fā)明提供了一種基于函數(shù)攔截技術(shù)的手 機(jī)APP性能數(shù)據(jù)采集方法。
[0008] 為了解決以上技術(shù)問(wèn)題，本發(fā)明采用的技術(shù)方案是：一種測(cè)量網(wǎng)頁(yè)首屏完全渲染 時(shí)間的方法，方法的實(shí)現(xiàn)包括以下步驟：
[0009] (1)、在瀏覽器中網(wǎng)頁(yè)加載的過(guò)程中，通過(guò)瀏覽器開(kāi)發(fā)者工具的接口，采集網(wǎng)頁(yè)加 載的元素瀑布圖數(shù)據(jù)，記錄每個(gè)元素加載完成的時(shí)間，并把此數(shù)據(jù)保存到指定的元素容器 中；
[0010] (2)、在當(dāng)前網(wǎng)頁(yè)加載完成的時(shí)刻，通過(guò)瀏覽器的接口，獲取當(dāng)前網(wǎng)頁(yè)完整的Dom 樹(shù)數(shù)據(jù)，把Dom樹(shù)中每個(gè)節(jié)點(diǎn)的具體信息，存儲(chǔ)到Dom樹(shù)的容器中；
[0011] ⑶、利用瀏覽器中渲染引擎提供的接口，查找每個(gè)Dom節(jié)點(diǎn)所依賴的資源的URL， 并建立當(dāng)前Dom節(jié)點(diǎn)和資源Url對(duì)應(yīng)的映射關(guān)系，把這個(gè)映射關(guān)系存儲(chǔ)在一個(gè)映射表中，表 結(jié)構(gòu)如下：
[0012] Dom節(jié)點(diǎn)資源映射表
[0014] (4)、通過(guò)瀏覽器渲染引擎所提供的接口，獲取當(dāng)前頁(yè)面在加載完成時(shí)刻的完整植 染樹(shù)，并把每個(gè)渲染節(jié)點(diǎn)在瀏覽器窗口中的絕對(duì)坐標(biāo)和當(dāng)前的渲染節(jié)點(diǎn)ID建立一個(gè)映射 關(guān)系表，表結(jié)構(gòu)如下：
[0015] 渲染節(jié)點(diǎn)坐標(biāo)映射表
[0017] (5)、通過(guò)瀏覽器渲染引擎的接口中，查找每個(gè)渲染樹(shù)節(jié)點(diǎn)所依賴的Dom節(jié)點(diǎn)對(duì) 象，并建立Dom節(jié)點(diǎn)和渲染節(jié)點(diǎn)的映射關(guān)系；建立如下關(guān)系的關(guān)系映射表：
[0018] 渲染節(jié)點(diǎn)和Dom節(jié)點(diǎn)映射表
[0020] (6)、根據(jù)之前幾步建立的三張關(guān)系映射表，最終建立起資源url和渲染區(qū)域坐標(biāo) 的關(guān)系表，其中Dom節(jié)點(diǎn)中的非可視化節(jié)點(diǎn)和渲染節(jié)點(diǎn)中的匿名節(jié)點(diǎn)因?yàn)椴簧婕暗斤@示和 資源，建立的最終映射表結(jié)構(gòu)如下：
[0021] 資源url和顯示坐標(biāo)映射表
[0023] (7)、當(dāng)獲取了元素節(jié)點(diǎn)坐標(biāo)和完成時(shí)間關(guān)系的映射表以后，根據(jù)首屏高度指定的 值，確定首屏范圍的區(qū)域坐標(biāo)，然后再依次選取元素節(jié)點(diǎn)坐標(biāo)關(guān)系表中的節(jié)點(diǎn)坐標(biāo)和首屏 范圍區(qū)域做比較，如果二者的區(qū)域范圍有交集，則我們認(rèn)為此元素節(jié)點(diǎn)在首屏范圍內(nèi)，通過(guò) 對(duì)元素節(jié)點(diǎn)進(jìn)行一次遍歷之后，我們就獲得了首屏范圍內(nèi)所有顯示的元素資源url，構(gòu)造成 一個(gè)首屏范圍內(nèi)資源元素的url集合；
[0024] (8)、在首屏范圍內(nèi)資源元素集合中，根據(jù)元素節(jié)點(diǎn)坐標(biāo)及完成時(shí)間關(guān)系表，依次 查找最后完成加載的元素，這個(gè)元素的加載完成的時(shí)間即為我們所要計(jì)算的首屏完全渲染 時(shí)間的值。
[0025] 本發(fā)明能夠更加準(zhǔn)確的測(cè)試出用戶瀏覽網(wǎng)頁(yè)的真實(shí)感受，提高網(wǎng)頁(yè)首屏顯示的準(zhǔn) 確度，更加準(zhǔn)確的測(cè)試出首屏范圍內(nèi)的所有元素完全渲染完成時(shí)的真實(shí)時(shí)刻；通過(guò)本發(fā)明 測(cè)試出的時(shí)間就是首屏范圍內(nèi)所有的元素完全渲染完成的時(shí)間，也就是首屏范圍內(nèi)所有的 元素顯示完成的時(shí)間，此時(shí)正是用戶用肉眼可以看到的首屏范圍內(nèi)的所有元素都渲染完成 的時(shí)間。
【附圖說(shuō)明】
[0026] 下面結(jié)合附圖和【具體實(shí)施方式】對(duì)本發(fā)明作進(jìn)一步詳細(xì)的說(shuō)明。
[0027] 圖1為本發(fā)明圖元素節(jié)點(diǎn)坐標(biāo)及完成時(shí)間關(guān)系生成流程圖。
[0028] 圖2為本發(fā)明計(jì)算完全渲染時(shí)間時(shí)序框圖。
【具體實(shí)施方式】
[0029] 首屏完全渲染時(shí)間的定義為瀏覽器加載網(wǎng)頁(yè)時(shí)，在首屏高度范圍內(nèi)的內(nèi)容完全渲 染完成的時(shí)間。
[0030] 本發(fā)明的具體實(shí)施步驟如下：
[0031] 其測(cè)量方法主要有以下幾個(gè)步驟：
[0032] 1.在瀏覽器中網(wǎng)頁(yè)加載的過(guò)程中，通過(guò)瀏覽器開(kāi)發(fā)者工具的接口，采集網(wǎng)頁(yè)加載 的元素瀑布圖數(shù)據(jù)，記錄每個(gè)元素加載完成的時(shí)間，并把此數(shù)據(jù)保存到指定的元素容器中。
[0033] 2.在當(dāng)前網(wǎng)頁(yè)加載完成的時(shí)刻，通過(guò)瀏覽器的接口，獲取當(dāng)前網(wǎng)頁(yè)完整的Dom樹(shù) 數(shù)據(jù)，把Dom樹(shù)中每個(gè)節(jié)點(diǎn)的具體信息，存儲(chǔ)到Dom樹(shù)的容器中。
[0034] 3.利用瀏覽器中渲染引擎提供的接口，查找每個(gè)Dom節(jié)點(diǎn)所依賴的資源的URL，并 建立當(dāng)前Dom節(jié)點(diǎn)和資源Url對(duì)應(yīng)的映射關(guān)系，把這個(gè)映射關(guān)系存儲(chǔ)在一個(gè)映射表中，表結(jié) 構(gòu)