一種測量網頁首屏完全渲染時間的方法
【技術領域】
[0001] 本發明涉及一種測量方法，尤其涉及一種測量網頁首屏完全渲染時間的方法。
【背景技術】
[0002] 當前應用性能管理平臺（APM)中，描述一個網站性能的一個重要指標就是網站的 首屏性能，而首屏性能因為不是W3C規定的標準中網頁所應該具有的標準行為和結構。所 以各大瀏覽器廠商在瀏覽器的事件處理中也沒有設計針對首屏性能的相關接口和事件，但 對于網頁的開發者和網頁的瀏覽者來說，這個性能卻能很真實的反應一個網頁打開時對用 戶的主觀感受。針對這個需求，各大性能管理平臺都增加了這樣一個指標，即首屏性能，它 指的是在網頁渲染時，首屏內元素渲染高度達到指定高度的時間。其主要的計算方法為：用 戶通過瀏覽器提供的查詢渲染高度的Com接口，以一個固定的周期頻率，主動得去獲取當 前瀏覽器渲染高度的值，比較該值和用戶指定的首屏高度的值，如果查詢到的渲染高度大 于首屏高度的值，就認為此查詢的時間即為首屏性能的值。
[0003] 雖然計算此指標的方法多種多樣，但目前各種算法計算的首屏時間主要有以下幾 個缺點：
[0004] 1.首屏性能的值存著誤差；首屏性能的計算方法是瀏覽網頁時，實時查詢當前瀏 覽器的渲染高度，而現代瀏覽器為了增加用戶使用的友好型，渲染普遍采用批量，大面積的 渲染策略，這就導致查詢到的首屏高度的值跳動性比較大，例如查詢到的值可能是如下序 列的值：〇,〇, 500,1800,1800 (單位：像素）。假如我們設定的首屏高度為600像素，則我們 只能近似的選取我們查到渲染高度為1800像素的時刻作為我們的首屏性能，這就導致我 們的首屏性能的值存在很大的誤差。
[0005] 2.首屏性能的指標無法準確的描述當前首屏范圍內的內容是否渲染完畢；因為 首屏性能的計算方法是通過瀏覽器的Dom接口，實時查詢當前渲染窗口的縱向渲染高度， 而橫向渲染的數據是不考慮的，這就導致在指定的渲染高度范圍內，可能左側的內容已經 渲染完畢，而右側的內容還沒開始渲染，從而無法準確的反應出首屏完全渲染完畢的時間。
[0006] 3.首屏性能的計算方法有缺陷；因為首屏性能的計算方法是我們通過瀏覽器提 供的Dom接口，以一定的周期頻率主動的去查詢瀏覽器當前的渲染高度，而如果這個周期 頻率設置不太合適，周期太長的話就會導致我們查詢到值的時刻并不是瀏覽器內部真實渲 染到此高度的時刻，就會導致存著很大的誤差。
【發明內容】
[0007] 為了解決上述技術所存在的不足之處，本發明提供了一種基于函數攔截技術的手 機APP性能數據采集方法。
[0008] 為了解決以上技術問題，本發明采用的技術方案是：一種測量網頁首屏完全渲染 時間的方法，方法的實現包括以下步驟：
[0009] (1)、在瀏覽器中網頁加載的過程中，通過瀏覽器開發者工具的接口，采集網頁加 載的元素瀑布圖數據，記錄每個元素加載完成的時間，并把此數據保存到指定的元素容器 中；
[0010] (2)、在當前網頁加載完成的時刻，通過瀏覽器的接口，獲取當前網頁完整的Dom 樹數據，把Dom樹中每個節點的具體信息，存儲到Dom樹的容器中；
[0011] ⑶、利用瀏覽器中渲染引擎提供的接口，查找每個Dom節點所依賴的資源的URL， 并建立當前Dom節點和資源Url對應的映射關系，把這個映射關系存儲在一個映射表中，表 結構如下：
[0012] Dom節點資源映射表
[0014] (4)、通過瀏覽器渲染引擎所提供的接口，獲取當前頁面在加載完成時刻的完整植 染樹，并把每個渲染節點在瀏覽器窗口中的絕對坐標和當前的渲染節點ID建立一個映射 關系表，表結構如下：
[0015] 渲染節點坐標映射表
[0017] (5)、通過瀏覽器渲染引擎的接口中，查找每個渲染樹節點所依賴的Dom節點對 象，并建立Dom節點和渲染節點的映射關系；建立如下關系的關系映射表：
[0018] 渲染節點和Dom節點映射表
[0020] (6)、根據之前幾步建立的三張關系映射表，最終建立起資源url和渲染區域坐標 的關系表，其中Dom節點中的非可視化節點和渲染節點中的匿名節點因為不涉及到顯示和 資源，建立的最終映射表結構如下：
[0021] 資源url和顯示坐標映射表
[0023] (7)、當獲取了元素節點坐標和完成時間關系的映射表以后，根據首屏高度指定的 值，確定首屏范圍的區域坐標，然后再依次選取元素節點坐標關系表中的節點坐標和首屏 范圍區域做比較，如果二者的區域范圍有交集，則我們認為此元素節點在首屏范圍內，通過 對元素節點進行一次遍歷之后，我們就獲得了首屏范圍內所有顯示的元素資源url，構造成 一個首屏范圍內資源元素的url集合；
[0024] (8)、在首屏范圍內資源元素集合中，根據元素節點坐標及完成時間關系表，依次 查找最后完成加載的元素，這個元素的加載完成的時間即為我們所要計算的首屏完全渲染 時間的值。
[0025] 本發明能夠更加準確的測試出用戶瀏覽網頁的真實感受，提高網頁首屏顯示的準 確度，更加準確的測試出首屏范圍內的所有元素完全渲染完成時的真實時刻；通過本發明 測試出的時間就是首屏范圍內所有的元素完全渲染完成的時間，也就是首屏范圍內所有的 元素顯示完成的時間，此時正是用戶用肉眼可以看到的首屏范圍內的所有元素都渲染完成 的時間。
【附圖說明】
[0026] 下面結合附圖和【具體實施方式】對本發明作進一步詳細的說明。
[0027] 圖1為本發明圖元素節點坐標及完成時間關系生成流程圖。
[0028] 圖2為本發明計算完全渲染時間時序框圖。
【具體實施方式】
[0029] 首屏完全渲染時間的定義為瀏覽器加載網頁時，在首屏高度范圍內的內容完全渲 染完成的時間。
[0030] 本發明的具體實施步驟如下：
[0031] 其測量方法主要有以下幾個步驟：
[0032] 1.在瀏覽器中網頁加載的過程中，通過瀏覽器開發者工具的接口，采集網頁加載 的元素瀑布圖數據，記錄每個元素加載完成的時間，并把此數據保存到指定的元素容器中。
[0033] 2.在當前網頁加載完成的時刻，通過瀏覽器的接口，獲取當前網頁完整的Dom樹 數據，把Dom樹中每個節點的具體信息，存儲到Dom樹的容器中。
[0034] 3.利用瀏覽器中渲染引擎提供的接口，查找每個Dom節點所依賴的資源的URL，并 建立當前Dom節點和資源Url對應的映射關系，把這個映射關系存儲在一個映射表中，表結 構