《高性能JavaScript》 实用指南

By XFE-堪玉

---

阅读《高性能javascript》后，对其内容的一个整理和精简

加载与执行

1. 将script标签放在body结尾标签上面
2. 控制script标签数量(每一次script解析都意味着阻塞或延迟)
3. 内嵌脚本不要放在link样式之后
4. 对script标签应用defer属性
5. 动态创建script标签加载js文件(模块化框架即可)

数据存取

1. 不影响this的情况下，对反复访问的对象进行变量保存
2. 合理使用局部变量，减少作用域跨越
3. 避免使用with和eval
4. 谨慎地使用闭包
5. 减少Object对象的层次访问，避免过长的属性读取(es6解构赋值)

DOM编程

1. 尽量用新的选择器api代替老的，尽量用dom克隆替代dom创建
2. html集合操作非常昂贵，可转换为数组再进行操作，同时使用局部变量缓存操作
3. 对dom访问信息进行缓存，对dom改变进行批量操作
4. 对操作频繁的dom，尽可能采用position:absolute
5. 对操作密集的dom，先display:none——>操作——>再display:block
6. 对操作量很大的dom，采用文档碎片createDocumentFragment
7. 合理使用事件委托，避免对dom进行逐个事件绑定

算法和流程控制

1. 减少使用for...in循环
2. 条件判断上，避免类型转换
3. 条件较多时，使用switch代替if..else
4. 最小化语句数，避免多个var声明，插入迭代值——arr[i++]
5. 简化终止条件，简化循环体，减值迭代
6. 展开循环(在次数不多的情况下)

字符串与正则表达式

1. 减少字符串拼接，避免"临时字符串"的出现
2. 当叠加字符串的时候，字符串变量应该靠左
3. 数组join方法比其他字符串连接方式慢
4. 字符串concat方法比使用简单的+和+=慢
5. 正则优化(个人略过...)

快速响应的用户界面

1. 对于异步操作的任务，可使用定时器分解任务，分割循环项
2. 定时器最小延迟建议为25毫秒，应避免高频定时器的数量
3. 合理使用web workers

Ajax

1. 对那些不会改变服务器状态，只获取数据的请求，应该使用get类型（会被游览器缓存起来，有利于性能）
2. 如果你只关心发送数据到服务器，可以使用图标信标（img.src="请求地址"）
3. 使用能被http缓存的get查询请求的时候，应该同时在服务端设置Expires头信息（过期时间）
4. 本地设置缓存（变量缓存与storage缓存）

编程实践

1. 避免使用eval,Function,setTimeout和setInterval去执行需要解析的字符串代码
2. 对数组和对象使用字面量进行创建，而非构造器模式
3. 涉及计算的过程，应该尽量用原生方法(Math)，合理使用位运算符

构建并部署高性能javascript应用

1. 合并js，减少http请求
2. 压缩js，降低请求大小
3. 设置Accept-Encoding HTTP请求头，对js进行gzip压缩
4. 设置Expires HTTP响应头，对js文件进行过期时间缓存(客户端使用时间戳更新js文件)
5. 使用内容分发网络CDN

工具

1. javascript的性能分析简单的分析可以通过Date日期和Log函数，推荐使用当前的集成测试和单元测试
2. 每个游览器都具备各种的检查器和资源面板，可以通过分析得出一些javascript性能的数据