高性能javascript-总结(一)

---

性能优化

第一章：加载和执行

总结:

1. 将所有<script>标签放到页面底部。这能确保在脚本执行前页面已经渲染了。
2. 合并脚本。<script>标签越少，加载越快，响应速度也更迅速。
3. 有多种无阻塞下载js方法:

　　　　1)使用<script>标签的defer属性；  defer属性只有ie4+和Firefox3.5+游览器支持

　　　　2)动态创建<script>元素来下载执行代码；

　　　　3)使用XHR对象下载js代码并注入页面中；

第二章：数据存储

总结:

1. 访问字面量和局部变量的速度最快，相反，访问数组元素和对象成员相对较慢。
2. 变量,属性或方法在作用域链中的位置越深，访问所需要时间就越长。全局变量处在作用域链的最末端，因此访问速度也是最慢的。
3. 避免使用with语句，因为它会改变执行环境作用域链，同样，try-catch也会，因此要小心使用
4. 嵌套的对象成员尽量少用
5. 通常来说，你可以通过把常用的对象成员、数组元素、跨域变量保存在局部变量中来改善js性能，因为局部变量访问速度更快。

第三章：获取dom元素优化

总结:

1. 减少dom访问次数，如果需要多次访问dom节点请定义一个局部变量存储它的引用。
2. 推荐使用速度更快的API，比如querySelectorAll()。
3. 留言重绘重排，批量修改样式，动画中使用绝对定位。

innerHTML和createElement():

innerHTML相对createElement在创建节点速度更快，大约是3.6倍。且大多数游览器均innerHTML使用更快,除webkit游览器,createElement相对会快些。

对DOM中特定元素操作时，开发者通常需要得到比getElementById()和getElementsByTagName()更好的控制。有时候为了得到需要的元素列表，你需要组合它们并遍历返回的节点，但这种繁密的过程效率低下。这时候，使用css选择器也是一种定位节点的便利途径，这时候javascript库提供了大量API,最新的游览器提供了一个名为quertSekectorAll()的原生DOM方法。这种方法自然比使用js和DOM来遍历查找元素快，同时对目前游览器的兼容性更高。

querySelector() 方法仅仅返回匹配指定选择器的第一个元素。如果你需要返回所有的元素，请使用 querySelectorAll() 方法替代。

<div id="menu">
    <a>123</a>
    <a>456</a>
</div>
<script>
    //获取id，遍历该id下的所有a元素  ,打印出个数
    var elements=document.getElementById('menu').getElementsByTagName('a');
    console.log(elements.length)  //2
    //使用querySelectorAll()，兼容ie6及以上
    var elements2=document.querySelectorAll('#menu > a');
    console.log(elements2.length)  //2
</script>
同样能查找获取，如果需要大量组合查询，使用下面的效率会更好，速度很提高很多。

重绘与重排
例如:

var bodyColor=document.body.style;   //背景色被修改了2次，游览器需要刷新渲染队列   var bodyColor=document.body.style;
var bgcolor=bodyColor.background;　　　　　　=========================>　　　　v
bgcolor='red';　　　　　　　　　　　　　　　　　　　　　　　　优化　　　　　　　　　　　　bgcolor='red';
console.log(bgcolor);　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　bgcolor='blue'
bgcolor="blue";　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　console.log(bgcolor);
console.log(bgcolor);　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　//这里只需要读取一次

改变样式:
var eldocument.getElementById("mydiv");　　　　　　　　　　var el=document.getElementById("mydiv");
el.style.borderLeft='1px';　　　　　　=================>　　el.style.cssText='border-left:1px; border-right:2px; padding:5px;'
el.style.borderRight='2px';　　　　　　　　优化　　　　　　　　//合并所有改变，然后一次处理。这样只会修改一次DOM，可以优化
el.style.padding='5px';  　　　　　　　　　　　　　　　　　　//方法2: 使用className  ,调用的是一个写好的css样式
//这段代码执行下来，会触发3次重排！！！　　　　　　　　　　　　　　el.className='active'