高性能Javascript笔记
.) 下载并执行javacript会阻塞页面渲染，因此比较推荐js脚本放在页面底部，在</body>标签上边...
.) 尽量减少script标签。如果外链多个script文件，能合并就合并（利用合并的工具），同样适用内嵌的。
.) 动态脚本加载，无阻塞的比较好的解决方案：创建script DOM
比如：
var script = document.createElement("script"); script.type = "text/javascript"; //Firefox, Opera, Chrome, Safari 3+ //js文件src下载完的触发事件 script.onload = function(){ alert(1); }; script.src = "jquery.js"; document.getElementsByTagName("head")[0].appendChild(script);
.) 另一种无阻塞载入，利用xhr对象获取脚本注入，这种方法不能跨域获取（--ajax
var xhr = new XMLHttpRequest(); xhr.open("get", "file1.js", true); xhr.onreadystatechange = function(){ if (xhr.readyState == 4){ if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304){ var script = document.createElement ("script"); script.type = "text/javascript"; script.text = xhr.responseText;// 相当于内联聊本的<script>标签 document.body.appendChild(script); } } }; xhr.send(null);
事件委托：
dom如下所示，
span上都要有点击事件的反馈。如果在每个span上绑定click事件的话，当li很多时候，这样比较浪费性能。
事件绑定占用了处理时间，浏览器需要跟踪每个事件处理器，占用了更多内存。
此时可以使用事件委托。利用冒泡机制，在其父节点，比如只需要在ul上监听一个点击事件。然后判断节点哪个是哪个就ok了。
<div>
<ul id="ul">
<li>
<span id="a">aaaaa</span>
</li>
<li>
<span id="b">bbbb</span>
</li>
<li>
<span id="c">ccccc</span>
</li>
<li>
<span id="d">ddddd</span>
</li>
</ul>
</div>
<script type="text/javascript">
$('#ul').click(function(e){
var target = e.target;
// 只有点击的是span标签才触发事件
if(target.nodeName.toLowerCase() != 'span'){
return false;
}
var id = target.id; // 判断目标对象是哪个span
switch(id){
case 'a': alert(1);break;
case 'b': alert(2);break;
case 'c': alert(3);break;
case 'd': alert(4);break;
}
});
</script>
字符串连接；
str += "one" + "two"; str += "one"; str += "two"; str = str + "one" + "two";
第一行代码比较浪费，内存需要分配一个临时字符串来连接 "onetwo"，然后再连str。
剩下两种方式，则不需要内存额外分配变量。
作用域链和原型链得知，一个全局变量在局域使用，最好是赋值给局域变量。链上远的变量查找更耗时，更消耗性能。
在操作dom集合（类数组而不是数组）的时候，涉及到length，尽量把这个集合的length赋值给一个变量，然后在循环里使用这个变量。遍历集合没有遍历数组快。
大多数时候没必要使用eval()和Function()，每次调用eval()时都要创建一个新的解释器/编译器示例。
尽量避免使用他们。至于setTimeout()和setInterval()，建议传入函数而不是字符串作为第一个参数。比如：
setTimeout(function(){ sum = a+b; }, 100);
使用Object/Array时，建议使用直接量，这样更快。
比如：
var obj = new Object(); obj.name = 'a'; obj.age = 12; // 更推荐这种方式： var obj = { name: 'a', age: 12 }; // ============ // 数组比如： var arr = new Array(); arr[0] = 'a'; arr[1] = 'b'; // 更推荐这种： var arr = ['a', 'b'];
不要重复工作：
比如根据一个判断（比如这里的 a 和 b 大小比较）处理一个逻辑：
var a=1; var b=2; function test(){ if(b>a){ xxx;// 几行代码 } else { yyy;// } }
比如这个 test() 函数在页面上可能会频繁遭到调用，那么每次都要去判断 a 和 b 的大小（如果是更复杂的逻辑判断，那么频繁调用一定会浪费性能）。那么不如在代码中重新覆盖这个 test() 函数：
function test(){ if(b>a){ test = function(){// 重新给test赋值 xxx; }; } else { test = function(){ yyy; }; } test();// 当然结尾不要忘记执行 }
这样的话，下一次再去调用这个test()的话，直接就是了。
数字运算的话，可以多考虑下，是否可以按位运算。比如奇数偶数这个...和1按位与操作。
尽量使用原生js，比较原生的都是js引擎低级编程语言编译好的，要更快。
Ajax:
常用的向服务器请求数据的方法：
1. XMLHttpRequest(XHR) 最常用的技术
2. 动态脚本注入
3. Multipart XHR
1). xhr（ajax常用技术，IE低版本要使用 ActiveXObject ）是最常用的，它允许异步发送和接收数据。浏览器支持好，get、post方式均可，可以读取http响应头信息和响应文本。缺点不能跨域。
代码：
var url = '/data.php?a=1&b=2'; var req = new XMLHttpRequest(); req.onreadystatechange = function(){ if(req.readyState === 4){// 4表示整个响应接收完毕；3表示接收到部分信息，还没完 var responseHeaders = req.getAllResponseHeaders();// 获取响应头信息 var data = req.responseText;// 获取响应文本 // 逻辑处理 // ... } } req.open('GET', url, true);// true表示异步 req.setRequestHeader('', '');// 可以设置请求头信息 req.send(null);// 发送请求
2). 动态脚本注入
这个方法利用动态创建 script 元素来请求数据。它克服了xhr最大限制：可以跨域请求。这当然算是个Hack。
xhr的缺点：不可以设置请求头信息；也只能使用get方式；需要等这个脚本下载完，才能访问它们；返回的数据需要封装在函数里。
因为响应信息是脚本标签的源码（script），因此他必须是可执行的javascript代码，所以数据格式需要封装在函数里，或者说调用一个函数。
代码：
var scriptEle = document.createElement('script'); scriptEle.src = 'http://xxx/test.js';// 可以请求与当前脚本所在不同域的文件。 document.getElementsByTagName('head')[0].appendChild(scriptEle); // 在head头部插入脚本 function callfun(data){ // 接收到服务端过来的 data alert(data.a); } // test.js 文件内容 callfun({a:1,b:'qq'});// 数据被包含在回调函数里。
向服务器传输数据：
一种xhr的技术，还有一种信标的方法。
所谓信标，就是创建一个Image对象，利用属性src向服务器传输数据。然而这种方法，效率虽高，但是存在局限性，一般只是像服务器传输数据，而不关心返回结果（当然服务端的确可以返回一个图片，然后前端根据图片的比如宽度来判断逻辑，这个宽度也可以算是服务端的返回状态。不过一般使用这种方法，不考虑服务端返回结果...），而且src表示也只能以get方式传输，并且参数长度也有所限制。
代码：
(new Image()).src = 'http://www.test.com/xxx.php?a=1&b=x';// 传输了a、b两个参数值过去
-
