高性能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两个参数值过去

 

 

-