利用chromeDevTools的Performance面板进行性能分析调优

Chrome DevTools之Performance

Chrome DevTools中Performance面板可以帮助我们进行性能分析，使我们写出更加精悍的代码。

下面是一段简单的代码。

    var _status = {
        items:["None", "Java", "Python", "C++", "C", "JavaScript"],
        currentFunction: "Java"
    }

    var currentFn = _status.currentFunction;
    var items = _status.items;

    function initPage(){
        for(var i = 0; i < _status.items; i++){
            if(items[i] != currentFn){
                console.log(items[i]);
            }
        }
    }

从上面的截图中我们可以看到在点击按钮到函数执行完毕的整个过程中发生的事情。点击button触发click事件，向下执行了InitPage函数。在下面的4个导航栏中，我们可以看到Summary、Bottom-up、Call Tree、Event Log四个导航栏。Summary代表了函数执行过程中，rendering、scripting等各个部分所占总时间的百分比，是一张饼图。Bottom-up是各个部分执行事件的排序。Call Tree是自顶向下的调用栈。这里我们看到initPage函数的时间是0.7ms。

在实际的开发中，我们应尽量if-else选择结构的使用，因为if-else结构效率太低，尤其应该避免大量的if-else结构嵌套，这样使空间复杂度和时间复杂度都增大，在数据量巨大的情况下，这简直就是一场噩梦。下面的代码中我们使用Array.forEach函数来代替if-else选择