高性能JavaScript学习笔记

高性能JavaScript学习笔记

1、加载和执行

1. 脚本文件应该放在body标签的最后面。
2. 合并多个script以减小Http请求。
3. 无阻塞的脚本：

• 为script标签添加defer属性（仅ie 和firefox支持）
• 使用dom操做动态加载脚本。（推荐）

function loadScript(url,callback) {
    var script= document.createElement('script');
    script.type = 'text/javascript';
    script.onload = function() {
        callback && callback();
    };
    script.src= url;
    var head = document.getElementsByTagName('head')[0];
    head.appendChild(script);
}

先添加动态加载方法所需的代码（loadscript），而后使用loadScript加载所需的Js文件

• 使用xhr对象获取脚本（不能跨域从cdn下载js文件）。

---

2、数据访问

1. 使用直接量和局部变量来读取数据，减小使用数组和对象。
2. 尽量的使用局部变量而不是全局变量。经验法则：若是某个跨做用域的值在函数中不仅被引用一次，那么就应该用局部变量来保存它。
3. eval, with, try catch语句都有可能会影响做用域链，谨慎使用。
4. 搜索实例成员从比直接量或局部变量中访问数据代价更高。
5. 每次遇到点操做符，嵌套成员会致使js引擎搜索全部对象成员。因此：在函数中若是要屡次读取同一个对象属性，最佳作法是将属性值保存到一个局部变量中

---

3、DOM编程

1. 减小dom访问的次数，innerHTML在大部分状况下比原生DOM方法快。
2. 在循环dom节点的时候，应该先缓存length。
3. 使用children，firstElementChild，nextElementSibiling等更快的方法代替childNodes等属性。
4. 若是浏览器容许，使用原生的querySelectorAll(),querySelector()等方法来进行节点查找。
5. 当添加和删除dom节点，改变元素宽高位置或者内容时，浏览器都会发生“重排”，损耗性能。因此当减小以上的操做。技巧：

• 改变样式时，使用cssText批量修改。若是样式不依赖逻辑和运算的状况下，只须要改变Class类名，把css的修改留给样式表来完成。
• 当须要对dom节点进行一系列修改时，能够采用先把Dom节点脱离文档流，待修改完毕以后再加入文档流中。三种基本方法：1.隐藏元素，修改元素，显示元素。2.使用文档碎片(documentfragment)来加入新的片断。（推荐）3.将原始元素考本到一个脱离文档的节点中，修改副本，而后拷贝回文档。

1. 缓存布局信息。
2. 对动画元素使用绝对定位，使其脱离文档流，减小重排。
3. 避免大量使用：hover伪类。
4. 当存在大量重复的事件绑定时，使用事件委托。

---

4、算法和流程控制

1. 优化循环：

• 减小对象成员及数组项的查找次数。（缓存length属性）
• 减小迭代的次数

1. 条件语句：条件数量多用switch，条件数量少用if else. 且if else 中的条件语句老是从大几率到小几率这样排列。

---

5、字符串和正则表达式

1. + 和+=符号的使用：一般来讲避免str += "one" + "two",这样的写法，而改为str += "one"; str += "two";更好。
2. 正则技巧：正则以简单、必须的字元开始；使用量词模式，使他们后面的字元互斥；减小分支数量，缩小分支范围；使用非捕获组；只捕获感兴趣的部分以减小后处理等等。

---

6、快速响应的用户界面

因为浏览器对Js的运行时间有限制，因此使用定时器或者web workers来处理js能够突破这种限制。

7、Ajax

1. 现代浏览器中获取服务端数据的主要三种方式，XHR，动态脚本注入，multipart XHR。
2. 使用XHR时，GET和POST的对比：对于那些不会改变服务器状态，只会获取数据的请求，应该使用GET。只有当请求的URL加上参数的长度接近或超过2048个字符时，才应该使用Post方法。
3. 一个post请求，至少装载两个数据包，一个装载头信息，另外一个装载post正文。
4. 使用jsonp时，由于json数据被当成一个js文件做为原生代码执行，因此这些数据必须封装在一个回调函数里。
5. 缓存数据：一、服务端，经过设置http头信息确保响应被浏览器缓存。为了保证ajax响应被缓存，必须使用get方式发送请求，并且必须在响应中发送正确的http头Expires信息。二、在客服端，把获取到的信息缓存到本地，从而避免再次请求。

---

8、编程实践

1. 使用{},[]方式建立对象和数组而不是new Object()和new Array()方式。
2. 部署js应用：

• 合并Js文件
• 预处理Js文件
• 压缩js文件
• 缓存js文件
• 使用cdn（内容分发网络）