高性能JavaScript学习笔记
高性能JavaScript学习笔记
一、加载和执行
- 脚本文件应该放在body标签的最后面。
- 合并多个script以减少Http请求。
- 无阻塞的脚本：
- 为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文件）。
二、数据访问
- 使用直接量和局部变量来读取数据，减少使用数组和对象。
- 尽可能的使用局部变量而不是全局变量。经验法则：如果某个跨作用域的值在函数中不只被引用一次，那么就应该用局部变量来保存它。
- eval, with, try catch语句都有可能会影响作用域链，谨慎使用。
- 搜索实例成员从比直接量或局部变量中访问数据代价更高。
- 每次遇到点操作符，嵌套成员会导致js引擎搜索所有对象成员。所以：在函数中如果要多次读取同一个对象属性，最佳做法是将属性值保存到一个局部变量中
三、DOM编程
- 减少dom访问的次数，innerHTML在大部分情况下比原生DOM方法快。
- 在循环dom节点的时候，应该先缓存length。
- 使用children，firstElementChild，nextElementSibiling等更快的方法代替childNodes等属性。
- 如果浏览器允许，使用原生的querySelectorAll(),querySelector()等方法来进行节点查找。
- 当添加和删除dom节点，改变元素宽高位置或者内容时，浏览器都会发生“重排”，损耗性能。所以当减少以上的操作。技巧：
- 改变样式时，使用cssText批量修改。如果样式不依赖逻辑和运算的情况下，只需要改变Class类名，把css的修改留给样式表来完成。
- 当需要对dom节点进行一系列修改时，可以采用先把Dom节点脱离文档流，待修改完毕之后再加入文档流中。三种基本方法：1.隐藏元素，修改元素，显示元素。2.使用文档碎片(documentfragment)来加入新的片段。（推荐）3.将原始元素考本到一个脱离文档的节点中，修改副本，然后拷贝回文档。
- 缓存布局信息。
- 对动画元素使用绝对定位，使其脱离文档流，减少重排。
- 避免大量使用：hover伪类。
- 当存在大量重复的事件绑定时，使用事件委托。
四、算法和流程控制
- 优化循环：
- 减少对象成员及数组项的查找次数。（缓存length属性）
- 减少迭代的次数
- 条件语句：条件数量多用switch，条件数量少用if else. 且if else 中的条件语句总是从大概率到小概率这样排列。
五、字符串和正则表达式
- + 和+=符号的使用：通常来说避免str += "one" + "two",这样的写法，而改成str += "one"; str += "two";更好。
- 正则技巧：正则以简单、必须的字元开始；使用量词模式，使他们后面的字元互斥；减少分支数量，缩小分支范围；使用非捕获组；只捕获感兴趣的部分以减少后处理等等。
六、快速响应的用户界面
由于浏览器对Js的运行时间有限制，所以使用定时器或者web workers来处理js可以突破这种限制。
七、Ajax
- 现代浏览器中获取服务端数据的主要三种方式，XHR，动态脚本注入，multipart XHR。
- 使用XHR时，GET和POST的对比：对于那些不会改变服务器状态，只会获取数据的请求，应该使用GET。只有当请求的URL加上参数的长度接近或超过2048个字符时，才应该使用Post方法。
- 一个post请求，至少装载两个数据包，一个装载头信息，另一个装载post正文。
- 使用jsonp时，因为json数据被当成一个js文件作为原生代码执行，所以这些数据必须封装在一个回调函数里。
- 缓存数据：1、服务端，通过设置http头信息确保响应被浏览器缓存。为了保证ajax响应被缓存，必须使用get方式发送请求，而且必须在响应中发送正确的http头Expires信息。2、在客服端，把获取到的信息缓存到本地，从而避免再次请求。
八、编程实践
- 使用{},[]方式创建对象和数组而不是new Object()和new Array()方式。
- 部署js应用：
- 合并Js文件
- 预处理Js文件
- 压缩js文件
- 缓存js文件
- 使用cdn（内容分发网络）
