JavaScript性能优化(一)

性能优化

因为JavaScript最初是一面解释型语言，执行速度比编译型语言低得多。Chrome引擎是一款内置优化引擎的浏览器，将JavaScript编译成本地代码。此后主流的浏览器都陆续实现了编译执行。

优化作用域

随着作用域链的增加，访问当前作用域链以外变量作用域的时间也在增加。而访问全局作用域比局部作用域要慢。所以减少访问作用域链的时间，就能提高性能。

1. 避免全局查找

我们可以将函数中多次用到的全局变量存储为局部变量，这样就不用每次都访问全局的变量了。例如：

        function Fun1() {

            for (var i = 0; i < 10; i++) {

                var num = document.getElementById("num").getAttribute("value");     //访问了10次全局变量document，时间复杂度O(n)

                console.log(num);

            }

        }



        function Fun2() {

            var num = document.getElementById("num");   //只访问一次全局变量document，时间复杂度O(1)

            for (var i = 0; i < 10; i++) {

                console.log(num.getAttribute("value"));

            }

        }

 

2. 避免不必要的属性查找

下面是JavaScript中常见的算法类型：

标记	名称	描述
O(1)	常数	不管有多少值，执行的时间是恒定的。一般表示简单值和存储在变量中的值。
O(log n)	对数	总的执行时间和值的数量有关，但是要完成算法并不一定要获取每个值。例如：二分查找
O(n)	线性	总执行之间和值的数量直接相关。例如：遍历某个数组的所有元素。
O(n2)	平方	总执行时间和值的数量有关，每个值至少要获取n次。例如：插入排序

使用遍历和数组要比访问对象上的属性更有效率。对象上的任何属性查找都要比访问变量或者数组花费更多的时间，因为必须在原型链中对拥有该名称的属性进行一次搜索。

 

3. 优化循环

循环是编程中最常见的，在JavaScript中也随处可见。优化循环是性能优化中很重要的一部分，由于它们会反复运行一段代码，从而自动增加执行时间。一个循环的基本步骤如下所示：

(1) 减值迭代 ---大多数循环使用一个0开始，增加到某个特定值的迭代器。在很多情况下，从最大值开始，在循环中不断减值的迭代器更加高效。

        function Fun5() {

            var obj = {

                count: 1000

            }

            for (var i = 0; i < obj.count; i++) {   //每次循环都会判断一次，访问一次count属性

                console.log(i);

            }

        }



        function Fun6() {

            var obj = {

                count: 1000

            }

            for (var i = obj.count - 1; i >= 0; i--) {  //只在初始化i时访问了一次count属性

                console.log(i);

            }

        }

 

(2) 简化终止条件---由于每次循环都会计算终止条件，所以必须保证它尽可能快。也就是说尽量避免属性访问等其他O(n)操作。

        function Fun7() {

            var obj = {

                count: 1000

            }

            var i = obj.count - 1;

            if (i > -1) {

                do {

                    console.log(i);

                }while(--i >= 0)

            }

        }