摘要：從一次實驗學(xué)習(xí)性能優(yōu)化之接口詳解下圖是接口的屬性提供給定頁面的與時間相關(guān)的性能信息包含了頁面瀏覽上下文的導(dǎo)航信息，比如大量獲取資源的重定向。返回當(dāng)前網(wǎng)頁事件的回調(diào)函數(shù)運行結(jié)束時的毫秒時間戳。

從一次實驗學(xué)習(xí)性能優(yōu)化

下圖是Performance 接口的屬性,提供給定頁面的與時間相關(guān)的性能信息.

navigation 包含了頁面瀏覽上下文的導(dǎo)航信息，比如大量獲取資源的重定向。

redirectCount表示頁面加載前經(jīng)過重定向次數(shù),該接口有同源策略限制，即僅能檢測同源的重定向。

返回值應(yīng)該是0,1,2,255中的一個。分別對應(yīng)三個枚舉值:
0 : TYPE_NAVIGATE (用戶通過常規(guī)方式訪問頁面，比如點一個鏈接，輸入地址等)
1 : TYPE_RELOAD (用戶通過刷新，包括JS調(diào)用刷新接口(Location.reload())等方式訪問頁面)
2 : TYPE_BACK_FORWARD (用戶通過瀏覽器歷史記錄訪問本頁面)
255: 其他方式

memory包含了堆棧使用情況信息,usedJSHeapSize表示所有被使用的js堆棧內(nèi)存；totalJSHeapSize表示當(dāng)前js堆棧內(nèi)存總大小，這表示usedJSHeapSize不能大于totalJSHeapSize。

timing包含了頁面加載時間相關(guān)的性能信息。

重要的參數(shù):

navigationStart:準(zhǔn)備加載新頁面的起始時間,一般認為是頁面最初的時間.一般和fetchStart值相等,和connectEnd中間的時間用于DNS解析,建立TCP連接.

requestStart:返回從服務(wù)器、緩存、本地資源等，開始請求文檔的時間,一般用于統(tǒng)計網(wǎng)絡(luò)資源請求的時間.

domLoading:返回當(dāng)前網(wǎng)頁DOM結(jié)構(gòu)開始解析時（即Document.readyState屬性變?yōu)椤發(fā)oading”、相應(yīng)的readystatechange事件觸發(fā)時）的時間,與domComplete對應(yīng),用于統(tǒng)計頁面渲染時間.

domComplete：返回當(dāng)前網(wǎng)頁DOM結(jié)構(gòu)生成時間,此時頁面渲染完成.

DNS查詢耗時 ：domainLookupEnd - domainLookupStart

TCP鏈接耗時 ：connectEnd - connectStart

request請求耗時 ：responseEnd - responseStart

解析 DOM 樹結(jié)構(gòu)的時間:domComplete - responseEnd;

一般白屏?xí)r間:responseStart - navigationStart

頁面總耗時:loadEventEnd/domComplete - navigationStart

一張timing順序圖供參考:

navigationStart：當(dāng)前瀏覽器窗口的前一個網(wǎng)頁關(guān)閉，發(fā)生unload事件時的Unix毫秒時間戳。如果沒有前一個網(wǎng)頁，則等于fetchStart屬性。                   
unloadEventStart：如果前一個網(wǎng)頁與當(dāng)前網(wǎng)頁屬于同一個域名，則返回前一個網(wǎng)頁的unload事件發(fā)生時的Unix毫秒時間戳。如果沒有前一個網(wǎng)頁，或者之前的網(wǎng)頁跳轉(zhuǎn)不是在同一個域名內(nèi)，則返回值為0。             
unloadEventEnd：如果前一個網(wǎng)頁與當(dāng)前網(wǎng)頁屬于同一個域名，則返回前一個網(wǎng)頁unload事件的回調(diào)函數(shù)結(jié)束時的Unix毫秒時間戳。如果沒有前一個網(wǎng)頁，或者之前的網(wǎng)頁跳轉(zhuǎn)不是在同一個域名內(nèi)，則返回值為0。
redirectStart：返回第一個HTTP跳轉(zhuǎn)開始時的Unix毫秒時間戳。如果沒有跳轉(zhuǎn)，或者不是同一個域名內(nèi)部的跳轉(zhuǎn)，則返回值為0。
redirectEnd：返回最后一個HTTP跳轉(zhuǎn)結(jié)束時（即跳轉(zhuǎn)回應(yīng)的最后一個字節(jié)接受完成時）的Unix毫秒時間戳。如果沒有跳轉(zhuǎn)，或者不是同一個域名內(nèi)部的跳轉(zhuǎn)，則返回值為0。
fetchStart：返回瀏覽器準(zhǔn)備使用HTTP請求讀取文檔時的Unix毫秒時間戳。該事件在網(wǎng)頁查詢本地緩存之前發(fā)生。
domainLookupStart：返回域名查詢開始時的Unix毫秒時間戳。如果使用持久連接，或者信息是從本地緩存獲取的，則返回值等同于fetchStart屬性的值。
domainLookupEnd：返回域名查詢結(jié)束時的Unix毫秒時間戳。如果使用持久連接，或者信息是從本地緩存獲取的，則返回值等同于fetchStart屬性的值。          
connectStart：返回HTTP請求開始向服務(wù)器發(fā)送時的Unix毫秒時間戳。如果使用持久連接（persistent connection），則返回值等同于fetchStart屬性的值。          
connectEnd：返回瀏覽器與服務(wù)器之間的連接建立時的Unix毫秒時間戳。如果建立的是持久連接，則返回值等同于fetchStart屬性的值。連接建立指的是所有握手和認證過程全部結(jié)束。  
secureConnectionStart：返回瀏覽器與服務(wù)器開始安全鏈接的握手時的Unix毫秒時間戳。如果當(dāng)前網(wǎng)頁不要求安全連接，則返回0。           
requestStart：返回瀏覽器向服務(wù)器發(fā)出HTTP請求時（或開始讀取本地緩存時）的Unix毫秒時間戳。         
responseStart：返回瀏覽器從服務(wù)器收到（或從本地緩存讀取）第一個字節(jié)時的Unix毫秒時間戳。       
responseEnd：返回瀏覽器從服務(wù)器收到（或從本地緩存讀取）最后一個字節(jié)時（如果在此之前HTTP連接已經(jīng)關(guān)閉，則返回關(guān)閉時）的Unix毫秒時間戳。     
domLoading：返回當(dāng)前網(wǎng)頁DOM結(jié)構(gòu)開始解析時（即Document.readyState屬性變?yōu)椤發(fā)oading”、相應(yīng)的readystatechange事件觸發(fā)時）的Unix毫秒時間戳。     
domInteractive：返回當(dāng)前網(wǎng)頁DOM結(jié)構(gòu)結(jié)束解析、開始加載內(nèi)嵌資源時（即Document.readyState屬性變?yōu)椤癷nteractive”、相應(yīng)的readystatechange事件觸發(fā)時）的Unix毫秒時間戳。           
domContentLoadedEventStart：返回當(dāng)前網(wǎng)頁DOMContentLoaded事件發(fā)生時（即DOM結(jié)構(gòu)解析完畢、所有腳本開始運行時）的Unix毫秒時間戳。          
domContentLoadedEventEnd：返回當(dāng)前網(wǎng)頁所有需要執(zhí)行的腳本執(zhí)行完成時的Unix毫秒時間戳。         
domComplete：返回當(dāng)前網(wǎng)頁DOM結(jié)構(gòu)生成時（即Document.readyState屬性變?yōu)椤癱omplete”，以及相應(yīng)的readystatechange事件發(fā)生時）的Unix毫秒時間戳。       
loadEventStart：返回當(dāng)前網(wǎng)頁load事件的回調(diào)函數(shù)開始時的Unix毫秒時間戳。如果該事件還沒有發(fā)生，返回0。   
loadEventEnd：返回當(dāng)前網(wǎng)頁load事件的回調(diào)函數(shù)運行結(jié)束時的Unix毫秒時間戳。如果該事件還沒有發(fā)生，返回0。

performance的方法:

performance.now()返回當(dāng)前網(wǎng)頁自從performance.timing.navigationStart到當(dāng)前時間之間的微秒數(shù)（毫秒的千分之一）。精度可以達到100萬分之一秒。利用performance.now方法，可以得到某種操作消耗的準(zhǔn)確時間。

     performance.mark("mark")
     performance.mark("markEnd")
     performance.measure("name", "mark", "markEnd")
     // 清除指定標(biāo)記
     performance.clearMarks("mark");  
     // 清除所有標(biāo)記
     performance.clearMarks();

performance.mark()用于標(biāo)記某個時間點。使用該方法參數(shù)(即標(biāo)記時間點),再調(diào)用 performance.measure(name, nameStart, nameEnd);即可測得某兩個時間點之間的耗時.

     var start = performance.now();
     // 被測代碼
     var end = performance.now();
     console.log("耗時：" + (end - start) + "微秒。");

performance.getEntries() 資源測速:該方法以數(shù)組形式，返回請求的時間統(tǒng)計信息(腳本文件、樣式表、圖片文件等等)，有多少個請求，返回數(shù)組就會有多少個成員。單位是微秒（microsecond)

 // 統(tǒng)計樣式,腳本,圖片請求數(shù)和消耗時間
  var imgResource = {
    count: 0,
    time: 0
  };
  var cssResource = {
    count: 0,
    time: 0
  };
  var scriptResource = {
    count: 0,
    time: 0
  };
  performance.getEntries().forEach(item => {
    if (item.initiatorType === "img") {
      imgResource.count++;
      imgResource.time += item.duration
    } else if (item.initiatorType === "link") {
      cssResource.count++;
      cssResource.time += item.duration
    } else if (item.initiatorType === "script") {
      scriptResource.count++;
      scriptResource.time += item.duration
    }
  });

Canvas基于像素，提供2D繪制函數(shù)，是一種HTML元素類型，依賴于HTML，通過腳本繪制圖形；繪制即時模式圖形,適合像素處理，動態(tài)渲染和大數(shù)據(jù)量繪制.

SVG基于矢量，提供一系列圖形元素（Rect, Path, Circle, Line …），還有完整的動畫，事件機制，能獨立使用，也可以嵌入到HTML中.SVG 是一個保留在內(nèi)存中模型中的保留模式圖形模型，而內(nèi)存中模型可通過重新呈現(xiàn)的代碼結(jié)果進行操作,更適合用來做動態(tài)交互.

Echarts基于Canvas,而Highcharts基于SVG,本次實驗利用10萬個微博簽到數(shù)據(jù)來測試兩者的性能差異.

一開始在兩個多帶帶文件中分別使用Echarts和Highcharts來繪制幾百個點,發(fā)現(xiàn)由于網(wǎng)絡(luò),引入的庫不同,二者時間不具有對比性.因此轉(zhuǎn)而在同一頁面中繪制.

將所有依賴在head中引入,分別封裝兩個繪圖函數(shù),用ajax從遠程獲取數(shù)據(jù),在回調(diào)函數(shù)中繪圖并且統(tǒng)計時間,從而分析性能差異.

測試代碼:

Echarts函數(shù)

function renderEchart(weiboData) {
  var timeStart = window.performance.now().toFixed(4);
  $(".eRender span:eq(0)").html($(".eRender span:eq(0)").html() + timeStart);
  var myChart = echarts.init(document.getElementById("main"));
 myChart.setOption(option);
  var timeEnd = window.performance.now().toFixed(4);
  console.log(timeEnd - timeStart);
  $(".eRender span:eq(1)").html($(".eRender span:eq(1)").html() + timeEnd);
  $(".eRender span:eq(2)").html($(".eRender span:eq(2)").html() + (timeEnd - timeStart).toFixed(4) + "ms");
}

Highcharts函數(shù)

function renderHchart(hda) {
  var timeStart = window.performance.now().toFixed(4);
  $(".hRender span:eq(0)").html($(".hRender span:eq(0)").html() + timeStart);
  var H = Highcharts,
    map = H.maps["cn/china"],
    chart;
  var colors = Highcharts.getOptions().colors;
  new Highcharts.Map("container",params)
  var timeEnd = window.performance.now().toFixed(4);
  console.log(timeEnd - timeStart);
  $(".hRender span:eq(1)").html($(".hRender span:eq(1)").html() + timeEnd);
  $(".hRender span:eq(2)").html($(".hRender span:eq(2)").html() + (timeEnd - timeStart).toFixed(4) + "ms");
}

4.測試結(jié)果:由于svg無法畫出10萬個點(瀏覽器會卡死),畫3000點就需要7s.所以下面svg最多只畫3000個點.
畫100個點:
Echarts畫10萬個點,highcharts畫3000個點:]
Echarts多帶帶畫10萬個點:
highcharts多帶帶畫3000個點:

總結(jié):實驗結(jié)果很容易預(yù)測,canvas肯定比基于dom的svg性能好得多,而且如果使用webGL,利用顯卡加速,性能會進一步提升.但是測試中遇到很多有價值的問題,例如如何利用js獲取頁面性能信息,從而做出優(yōu)化策略,如何控制變量排除干擾因素使得測試更具有說服力.實驗中對performance以及面板的深入了解也使得我對頁面整個渲染流程有了更深的認識.