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

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

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

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

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

返回值應(yīng)該是0,1,2,255中的一個(gè)。分別對應(yīng)三個(gè)枚舉值:
0 : TYPE_NAVIGATE (用戶通過常規(guī)方式訪問頁面，比如點(diǎn)一個(gè)鏈接，輸入地址等)
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包含了頁面加載時(shí)間相關(guān)的性能信息。

重要的參數(shù):

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

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

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

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

DNS查詢耗時(shí) ：domainLookupEnd - domainLookupStart

TCP鏈接耗時(shí) ：connectEnd - connectStart

request請求耗時(shí) ：responseEnd - responseStart

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

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

頁面總耗時(shí):loadEventEnd/domComplete - navigationStart

一張timing順序圖供參考:

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

performance的方法:

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

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

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

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

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

 // 統(tǒng)計(jì)樣式,腳本,圖片請求數(shù)和消耗時(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，通過腳本繪制圖形；繪制即時(shí)模式圖形,適合像素處理，動態(tài)渲染和大數(shù)據(jù)量繪制.

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

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

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

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

測試代碼:

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萬個(gè)點(diǎn)(瀏覽器會卡死),畫3000點(diǎn)就需要7s.所以下面svg最多只畫3000個(gè)點(diǎn).
畫100個(gè)點(diǎn):
Echarts畫10萬個(gè)點(diǎn),highcharts畫3000個(gè)點(diǎn):]
Echarts多帶帶畫10萬個(gè)點(diǎn):
highcharts多帶帶畫3000個(gè)點(diǎn):

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