《高性能JavaScript》学习笔记(2)——日更中

我说日更就日更，接着....今天从缓冲布局信息开始啦！

-------------------2016-7-22 21:09:12-------------------------------

1四、减小对布局信息的查询次数，查询时将他赋值给局部变量参与计算。

例子，在元素网右下方不断平移时，在timeout中能够写：

1     var current = myElement.offsetLeft;
2     current++;
3     myElement.style.left = current + 'px';
4     myElement.style.top =  current + 'px';
5     if(current > 500){
6         //stop animation
7     }

//拒绝下面的写法，每次移动都会查询一次偏移量，致使浏览器刷新渲染队列，很是耗时

1     myElement.style.left = myElement.offsetLeft + 'px';
2     myElement.style.top =  myElement.offsetLeft + 'px';
3     if(myElement.offsetLeft > 500){
4         //stop animation
5     }

1五、大量的元素使用：hover以后，页面性能将下降，特别是IE8中。所以强烈建议，在数据量很大的表格中，减小鼠标在表上移动效果，减小高亮行的显示，使用高亮是个慢速过程CPU使用率会提升到80%-90%，尽可能避免使用这种效果。

1六、事件托管

讲到事件托管，首先咱们来看一看冒泡机制：

DOM2级事件规定事件包括三个阶段： ① 事件捕获阶段 ② 处于目标阶段 ③ 事件冒泡阶段

图片引用来源：http://www.w3.org/TR/DOM-Level-3-Events/#event-flow

以下图的实验结果能够知道，当咱们点击了inner以后，捕获和冒泡结果如上图的规律相同；

所以，由于每个元素有一个或多个事件句柄与之相连时，可能会影响性能，毕竟链接每个句柄都是有代价的，因此咱们采用事件托管技术，在一个包装元素上挂接一个句柄，用于处理子元素发生的全部事件。

下面咱们以以下的dom结构为例：

假若有一个ul，下面有不少个li：

1     <div>
2         <ul id="ulList">
3             <li id="item1"></li>
4             <li id="item2"></li>
5             <li id="item3"></li>
6             <li id="item4"></li>
7             <li id="item5"></li>
8         </ul>
9     </div>

当某个Li被点击的时候须要触发相应的处理事件。咱们一般的写法，是为每一个Li都添加onClick的事件监听。

 1 function addListenersLi(liNode){
 2     liNode.onclick = function clickHandler(){}
 3 }
 4 
 5 window.onload = function(){
 6     var ulNode = document.getElementById("ulList");
 7     var liNodes = ulNode.getElementByTagName("li");
 8     for(var i=0, l = liNodes.length; i < l; i++){
 9         addListeners4Li(liNodes[i]);
10     }   
11 }

若是li足够多，或者对于li的操做特别频繁，为每个li绑定一个点击事件将会特别影响性能，由于在此期间，你须要访问和修改更多的DOM节点，事件的绑定过程发生在onload事件中，绑定自己也很是耗时；同时，浏览器须要保存每一个句柄的记录，很占用内存。重点是有些绑定了还不必定会用着，并非100%的按钮或连接都会被点到的哟！

所以，采用事件托管更为高效，当事件被抛到更上层的父节点的时候，咱们经过检查事件的目标对象（target）来判断并获取事件源Li。下面的代码能够完成咱们想要的效果：

 1         var oul = document.getElementById('ulList');
 2         oul.addEventListener('click',function(e){
 3             var e = e || window.event;
 4             var target = e.target || e.srcElement;
 5 
 6             console.log(target.nodeName);
 7             if(target.nodeName == 'LI'){
 8                 //事件真正的处理程序
 9                 alert(target.id);
10                 e.preventDefault();
11                 e.stopPropagation();
12             }else{
13                 alert(456);
14             }
15 
16         });

 

太晚了，睡觉了，明天再继续，有问题，请多多指教！