非常规优化

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的时间,说明优化也是需要考虑平衡。

总结

之前我写过一篇非常规的优化,这是上次的续篇,因为都同属一个主题。这两片的内容在周会上分享过,但是不完全相同,额外做了些补充。性能优化是一条很长的路,边走边欣赏风景吧。