Web應用在IE11裡的實際使用效能

msdn發表於2014-01-02
WebIE11

　　W3C Web效能工作小組與Google、Mozilla和其他社群領導者通力合作，制訂了導航定時、 資源定時、 使用者定時和效能時間線介面的標準化規範，可以幫助開發者瞭解在Web應用程式中導航、獲取資源以及執行指令碼的實際使用效能。您可以使用這些介面來捕獲並分析您的客戶實際使用您的Web應用程式的體驗，而不是依靠那種在人工環境中測試您的應用程式效能的合成測試。利用此定時資料，您可以確定從哪些方面改進您的Web應用程式的實際使用表現。IE11對所有這些介面均提供支援。請檢視效能定時 Test Drive 來檢視這些介面的動態演示。

Web應用在IE11裡的實際使用效能

　　效能定時 Test Drive 允許您試用定時 API

　　效能時間線

　　效能時間線規範已經作為一項 W3C 推薦釋出，受IE11和Chrome 30完全支援。利用此介面，您可以獲得導航、獲取資源以及執行應用中執行的指令碼期間所花費時間的端到端檢視。此規範定義了所有效能指標需要實施的最低屬性，以及開發人員可以用來檢索任意型別效能指標的介面。

　　所有效能指標必須支援以下四種屬性：

  • name。該屬性儲存效能指標的唯一識別符號。例如，對於某個資源，它將會是該資源的已解析 URL。
  • entryType。該屬性儲存效能指標的型別。例如，對於某個資源的指標，它將會儲存為 “resource”。
  • startTime。該屬性儲存效能指標的第一個已記錄的時間戳。
  • duration。該屬性儲存按指標記錄的事件的端到端持續時間。

　　所有定時資料都使用型別為 DOMHighResTimeStamps 的高解析度時間進行記錄，該型別在 高解析度時間規範中有所定義。與DOMTimeStamps 不同，該型別從 UTC 時間 1970 年 1 月 1 日起始以毫秒度量時間值，而高解析度時間值是從文件導航開始時至少以微秒的精度來度量時間值。例如，如果我使用 performance.now() 檢視當前時間，則高解析度時間類似於 Date.now()，將會獲得當前時間的如下解釋說明：

> performance.now();
4038.2319370044793
 
> Date.now()
1386797626201

　　此時間值還具有不受時鐘時間偏差或調整所影響這一優勢。您還可以檢視 What Time Is It Test Drive 以瞭解高解析度時間的使用。

　　您可以使用以下介面來檢索在呼叫時記錄的一系列效能指標。使用startTime和duration以及該指標提供的任何其他屬性，您可以獲取一個頁面效能（等同於客戶實際使用過程的效能）的端到端時間線檢視。

PerformanceEntryList getEntries();
PerformanceEntryList getEntriesByType(DOMString entryType);
PerformanceEntryList getEntriesByName(DOMString name, optional DOMString entryType);

　　getEntries方法在頁面上返回所有效能指標，而其他方法會基於名稱或型別返回特定的專案。我們期望大部分開發人員在所有指標列表上僅使用JSON stringify，並將結果傳送到他們的伺服器進行分析，而不是在客戶端進行分析。

　　讓我們來進一步瞭解各個不同的效能指標：導航、資源、標記和度量。

　　導航定時

　　導航定時介面為導航到您的 Web 應用程式的每個階段提供精確的時間度量。 導航定時 L1 規範已經作為一項 W3C 推薦釋出，受 IE9 以及後續版本、Chrome 28 和 Firefox 23 的完全支援。 導航定時 L2 規範是首份公開工作草案，受到 IE11 支援。

　　利用導航定時，開發人員不僅可以獲取精確的端到端頁面載入時間，包括從伺服器獲取頁面所用時間，而且還可以獲取在每個網路和 DOM 處理階段所花費時間的明細：unload（解除安裝）、redirect（重定向）、app cache（應用快取）、DNS、TCP、request（請求）、response（響應）、DOM processing（DOM 處理）以及 load event（載入事件）。下面的指令碼使用導航定時 L2 來獲取該詳細資訊。此指標的條目型別為 “navigation”，而名稱為 “document”。請在 IE Test Drive 網站上檢視  導航定時的演示。

<!DOCTYPE html>
<html>
<head></head>
<body>
<script>
 function sendNavigationTiming() {
   var nt = performance.getEntriesByType('navigation')[0];
   var navigation = ' Start Time: ' + nt.startTime + 'ms';
   navigation += ' Duration: ' + nt.duration + 'ms';
   navigation += ' Unload: ' + (nt.unloadEventEnd - nt.unloadEventStart) + 'ms';
   navigation += ' Redirect: ' + (nt.redirectEnd - nt.redirectStart) + 'ms';
   navigation += ' App Cache: ' + (nt. domainLookupStart - nt.fetchStart) + 'ms';
   navigation += ' DNS: ' + (nt.domainLookupEnd - nt.domainLookupStart) + 'ms';
   navigation += ' TCP: ' + (nt.connectEnd - nt.connectStart) + 'ms';
   navigation += ' Request: ' + (nt.responseStart - nt.requestStart) + 'ms';
   navigation += ' Response: ' + (nt.responseEnd - nt.responseStart) + 'ms';
   navigation += ' Processing: ' + (nt.domComplete - nt.domLoading) + 'ms';
   navigation += ' Load Event: ' + (nt.loadEventEnd - nt.loadEventStart) + 'ms';
   sendAnalytics(navigation);
 }
</script>
</body>
</html>

　　通過檢視每個網路階段所用的詳細時間，您可以更好地診斷並修復您的效能問題。例如，如果您發現重定向時間很長，則可以考慮不使用重定向，如果 DNS 時間很長，則使用 DNS 快取服務，如果請求時間過長，則可以使用距離您的使用者更近的 CDN，或者如果響應時間過長，則可以使用 GZip 壓縮您的內容。請觀看 視訊瞭解改進網路效能的提示和竅門。

　　兩個導航定時規範版本的主要區別在於訪問定時資料的方式以及度量時間的方式。L1 介面定義了 performance.timing 物件下的這些屬性，從 1970 年 1 月 1 日開始以毫秒講。L2 介面允許使用效能時間線方法檢索相同的屬性，使得這些屬性可以更易於放置到時間線檢視中，並利用高解析度的計時器記錄這些屬性。

在導航定時前，開發者通常會通過在文件的頭部編寫 JavaScript（如下面的程式碼示例所示），來嘗試度量頁面載入效能。請在 IE Test Drive 網址檢視此方法的 演示。

<!DOCTYPE html>
<html>
<head>
<script>
    var start = Date.now();
 
    function sendPageLoad() {
        var now = Date.now();
        var latency = now - start;
        sendAnalytics('Page Load Time: ' + latency);
    }
 
</script>
</head>
<body onload='sendPageLoad()'>
</body>
</html>

　　不過，此方法不會準確度量頁面載入效能，因為它不會包括從伺服器獲取頁面的時間。另外，在文件的頭部執行 JavaScript 通常是比較差的效能模式。

　　資源定時

　　資源定時提供在頁面中獲取資源的精確定時資訊。與導航定時相似，資源定時提供有關重定向、DNS、TCP、請求和已獲取資源的響應階段的詳細定時資訊。資源定時規範已經作為 W3C 備選推薦釋出，IE10 和 Chrome 30 及其後續版本均提供支援。

　　以下的示例程式碼使用 getEntriesByType 方法獲取以 <img> 元素開頭的所有資源。資源的輸入型別為 “resource”，名稱則為該資源的已解析 URL。請在IE Test Drive 網址檢視資源定時的演示。

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body onload='sendResourceTiming()'>
    <img src='http://some-server/image1.png'>
    <img src='http://some-server/image2.png'>
 
    <script>
        function sendResourceTiming()
        {
            var resourceList = window.performance.getEntriesByType('resource');
            for (i = 0; i < resourceList.length; i++)
            {
                if (resourceList[i].initiatorType == 'img')
                {
                    sendAnalytics('Image Fetch Time: ' + resourceList[i].duration);
                }
            }
        }
    </script>
  </body>
</html>

　　出於安全考慮，跨域資源僅顯示他們的開始時間和持續時間；詳細的定時屬性將設定為零。這有助於避免統計指紋的問題，這種情況下，有人可能會通過檢視詳細的網路時間來確認某個資源是否在您的快取中，通過這種方法來嘗試確定您在某個組織中的成員身份。跨域伺服器如果希望與您共享定時資料，則它將會傳送 timing-allow-origin HTTP 頭。

　　使用者定時

　　使用者定時提供有關在應用程式中執行指令碼、完成導航定時以及資源定時的詳細定時資訊，將提供詳細的網路定時資訊。使用者定時允許您在與您的網路定時資料相同的時間線檢視中顯示指令碼定時資訊，從而全面而充分了解您的應用效能。使用者定時規範已經作為 W3C 備選推薦釋出，IE10 和 Chrome 30 及其後續版本均提供支援。

　　使用者定時介面定義了兩個用於度量指令碼定時的指標：標記和度量。標記代表在您的指令碼執行期間在某個指定時間點的高解析度時間戳。度量表示兩個標記之間的差別。

　　以下方法可以用於建立標記和度量：

void mark(DOMString markName);
void measure(DOMString measureName, optional DOMString startMark, optional DOMString endMark);

　　您一經向您的指令碼新增了標記和度量，則您可以用 getEntry、getEntryByType 或 getEntryByName 方法來檢索定時資料。標記輸入型別為 “mark”，度量輸入型別為 “measure”。

　　下面的示例程式碼使用標記和度量方法，來度量執行 doTask1() 和 doTask2() 方法所花費的時間量。請在 IE Test Drive 網址檢視使用者定時演示。

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body onload='doWork()'>
    <script>
        function doWork()
        {
            performance.mark('markStartTask1');
            doTask1();
            performance.mark('markEndTask1');
           
            performance.mark('markStartTask2');
            doTask2();
            performance.mark('markEndTask2');
 
            performance.measure('measureTask1', 'markStartTask1', 'markEndTask1');
            performance.measure('measureTask2', 'markStartTask2', 'markEndTask2');
 
            sendUserTiming(performance.getEntries());
        }
    </script>
  </body>
</html>

　　感謝 W3C Web 效能工作小組中的每一位成員為設計這些介面所提供的幫助，同時也感謝瀏覽器供應商迅速實施這一介面，並認真觀察該介面的互操作性。利用這些介面，Web 開發者可以真正開始評測並瞭解可以從哪些方面著手來改進他們的應用的效能。

相關文章