web前端性能&SEO优化(二)

减少作用域链查找 `
　　前文谈到了作用域链查找问题，这一点在循环中是尤其需要注意的问题。如果在循环中需要访问非本作用域下的变量时请在遍历之前用局部变量缓存该变量，并在遍历结束后再重写那个变量，这一点对全局变量尤其重要，因为全局变量处于作用域链的最顶端，访问时的查找次数是最多的。
　
低效率的写法：

<code class=" hljs javascript">// 全局变量 
var globalVar = 1; 
function myCallback(info){ 
    for( var i = 100000; i--;){ 
        //每次访问 globalVar 都需要查找到作用域链最顶端，本例中需要访问 100000 次 
        globalVar += i; 
    }
} 
</code>

更高效的写法：

<code class=" hljs javascript">// 全局变量 
var globalVar = 1; 
function myCallback(info){ 
    //局部变量缓存全局变量 
    var localVar = globalVar; 
    for( var i = 100000; i--;){ 
    //访问局部变量是最快的 
    localVar += i; 
    } 
    //本例中只需要访问 2次全局变量
    在函数中只需要将 globalVar中内容的值赋给localVar 中
    globalVar = localVar; 
}</code>

此外，要减少作用域链查找还应该减少闭包的使用。

数据访问
　　Javascript中的数据访问包括直接量 (字符串、正则表达式 )、变量、对象属性以及数组，其中对直接量和局部变量的访问是最快的，对对象属性以及数组的访问需要更大的开销。当出现以下情况时，建议将数据放入局部变量：
　　
　　a. 对任何对象属性的访问超过 1次
　　b. 对任何数组成员的访问次数超过 1次
　　另外，还应当尽可能的减少对对象以及数组深度查找。

字符串拼接
　　在 Javascript中使用”+” 号来拼接字符串效率是比较低的，因为每次运行都会开辟新的内存并生成新的字符串变量，然后将拼接结果赋值给新变量。与之相比更为高效的做法是使用数组的 join方法，即将需要拼接的字符串放在数组中最后调用其 join方法得到结果。不过由于使用数组也有一定的开销，因此当需要拼接的字符串较多的时候可以考虑用此方法。

CSS选择符优化
在大多数人的观念中，都觉得浏览器对 CSS选择符的解析式从左往右进行的，例如
#toc A { color: #444; }这样一个选择符，如果是从右往左解析则效率会很高，因为第一个 ID选择基本上就把查找的范围限定了，但实际上浏览器对选择符的解析是从右往左进行的。如上面的选择符，浏览器必须遍历查找每一个 A标签的祖先节点，效率并不像之前想象的那样高。根据浏览器的这一行为特点，在写选择符的时候需要注意很多事项，有兴趣的童鞋可以去了解一下。