很是規優化

Type feedback

console.time("1")
function add(a,b) {
    return a+b;
}
for(var i=0;i<1000000;i++){
    add(i,i);
    add('hello',"jsdt");
}
console.timeEnd("1")



console.time("2")
function addNum(a,b) {
    return a+b;
}
function addStr(a,b) {
    return a+b;
}
for(var i=0;i<1000000;i++){
    addNum(i,i);
    addStr('hello',"jsdt");
}
console.timeEnd("2")

能夠看到時間差別蠻大的,對於熱點代碼,v8會進行類型的動態檢查,經過類型反饋進行優化,好比說都是小整數時,可使用快速模式。快速模式還包括堆區的數值,怪異類型,字符串連接等。可是若是不當心寫成第一種形式反而deoptimizer了,不斷的重優化很耗性能,達到必定次數後,v8不在優化。

hidden-class

function JSDT( val ) {
    this.prop = val;
}

var a = new JSDT('prop1');
var b = new JSDT('prop1');
console.log(%HaveSameMap( a, b ) )

b.prop2 = 'prop2';

console.log( %HaveSameMap( a, b ))
// true
// false

node運行,附加參數--allow-natives-syntax。內聯的好處在於對於相同構造函數建立出的同類對象,能夠加快屬性查找,可是就像上面結果所示,若是隨意的添加屬性,或者屬性都同樣,可是添加屬性順序不同都會破會隱藏類,注意避免此類狀況。

DNS prefetch

說明 上面是我從taobao移動端頁面的截圖,能夠看到它利用了dns預讀取功能,提早解析一些域名,這樣作能夠減緩點擊連接時的延遲。因此這種優化有必定的借鑑意義和實用價值。常見的圖片預加載與此優化目的相似,只是操做方式不一樣。

重繪和迴流

又回到老生常談的概念了,可是此次個人側重點不一樣,爲了減小重繪和迴流的影響,其中之一的優化方式是將dom元素單獨做爲一個圖層,可是我測試發現圖層不是越多越好,太多了會很卡,以下圖中,加重了composite layer的時間,說明優化也是須要考慮平衡。

總結

以前我寫過一篇很是規的優化,這是上次的續篇,由於都同屬一個主題。這兩片的內容在週會上分享過,可是不徹底相同,額外作了些補充。性能優化是一條很長的路,邊走邊欣賞風景吧。