高性能JavaScript学习笔记

加载和执行

1. script标签会阻塞文档解析和渲染，不会阻塞link标签连接的css文档的加载

2. link标签会阻塞在其之后的script标签执行，不阻塞DOM树解析，但阻塞渲染。

3. window.onload事件会在页面完全加载之后再执行，即使动态插入脚本，也会在动态脚本插入完成之后才执行onload事件。

数据存取

1. 访问速度最快的是字面量和局部变量，访问数组元素和对象成员比较慢；

2. 局部变量处于作用域链的最顶端，访问处于作用域越底部的变量速度越慢；

3. 可把常访问的处于作用域链低端或者嵌套比较深的变量存起来，加快访问速度。

DOM编程

1. 减少DOM访问次数，使用JavaScript对象存着；

2. 使用原生访问元素接口：querySelector和querySelectorAll；

3. 批量操作DOM，减少重排重绘，可脱离文档流处理；

4. 使用事件委托。

算法性能

1. 尽量不用for-in循环

2. 注意for，while，do-while循环优化，减少判断条件，可使用倒序，i--作为判断条件；

3. 判断条件多时使用查找表，其次switch比if-else快；

4. 减少迭代数和运算量，使用定时器分解大程序；

5. 预防递归函数栈溢出，改用迭代方法。

6. 减少相同的工作，例如函数总会执行相同的判断，并且判断可能的结果只有一个，那么使用延迟定义或者是预定义。

字符串和正则

1. +=性能比数组项合并达到拼接字符串的效果好，IE相反；

2. 勿重复使用未声明的正则对象字面，应该将正则对象字面量赋值给变量。

快速响应的用户界面

1. UI渲染和JavaScript引擎共用UI线程，将任务塞到任务队列；

2. 任何JavaScript任务不应该超过100毫秒，如果已经超过50毫秒可以将其放到下一个任务；

3. JavaScript在执行时可能不会将UI更新任务加到任务队列里面，导致UI没变化，但是却触发了绑定的事件；

4. Web Workers 新版浏览器才支持，建议用于执行与DOM无关的操作，例如解析大JSON对象；

Ajax

1. MXHR技术， 减少请求数，无法缓存；

2. JSON-P技术，跨域，无法使用post方法，无法获取头部信息，安全性不高；

3. 可用图片标签发送跨域少量数据，在不要求返回数据的情况下。