《高性能JavaScript》读书笔记

第1章：加载和执行 1

1.1 脚本位置

• 由于脚本会阻塞页面其他资源的下载，因此，尽可能将所有的script放在body最底部

1.2 组织脚本

• 减少script数量 当script的type为text/html时，仍然会影响速度吗？
• 合并多个文件 当script长度受限制时，怎么做？
• comobo

1.3 无阻塞的脚本

• 在window的load事件触发后再下载脚本
• 使用defer延迟<script src="xxx.js" defer></script>，仅支持IE、Firefox3.5
• 动态创建<script>标签添加到<head>在IE中比添加到<body>更保险
• 动态加载KISSY.getScript(url , { success : success , charset : charset }); 不在相同的域怎么处理？
• XMLHttpRequest脚本注入，使用get方法，局限相同的域
• 推荐做法：先添加动态加载所需的代码，然后加载初始化页面所需的剩下的代码：LazyLoad

1.4 小结

第2章：数据访问 15

• 直接量 > 局部变量 > 数组元素、对象成员
• 访问数组len复制给局部变量var len = arr.length;
• 局部变量位于作用域链的起始位置
• with或try{} catch(){}会改变作用域链，因此是动态作用域
• 闭包需要更多内存开销
• 内部属性[[scope]]包含了一个函数被创建的作用域中对象的集合，这个集合即函数的作用域链。
• 含有闭包的函数执行时创建的活动对象为运行期上下文作用域链中的第一个对象，其含有的闭包被创建时[[scope]]属性被初始化为这些对象；闭包中创建的标识符如var id = "xdi9592"位于作用域链第一个对象之后的位置。
• hasOwnProperty
• instanceOf
• 嵌套成员，对象成员嵌套越深，访问速度越慢
• 多次访问同一个对象成员，则需要做缓存，即将对象成员赋值给局部变量

第3章：DOM编程 35

• 适当缓存访问到的DOM
• 尽量减少操作DOM的次数
• innerHTML优于原生创建DOM
• 节点克隆优于原生创建DOM
• 访问HTML集合拷贝到数组中，并设置局部变量
• 缓存集合length属性
• nextSibling优于childNodes
• children优于childNodes
• querySelectorAll优于getElementsByTagName()
• 重排：浏览器将受影响的部分失效，重新构造渲染树；如增、删DOM、位置、尺寸、窗口
• 重绘：完成重排后，重新绘制受影响的部分
• 最小化重绘与重排
  • 缓存布局信息
  • 让元素脱离文档流
• 事件委托：由于浏览器跟踪每个事件处理器占用很多内存，因此将事件代理到父元素

第4章：算法和流程控制

• for;while;do{}while;for(var prop in object){}
• for in 性能较差
• 减少循环迭代次数,可以使用switch
• 优化嵌套if-else
• 调用栈溢出，适当改为迭代算法

第5章：字符串和正则表达式

1. 将str += "one" + "two" 改为 str = str + "one" + "two" , IE8 以上提升性能
2. strs.join(“”);在IE7中性能较好
3. str = str.concat(s1);较慢
4. 将正则表达式赋值给一个变量，提高性能
5. 对于事先知道字符串的哪一部分将被测试时，适用字符串方法，如slide(),substr(),substring(),indexOf(),lastIndexOf()
6. 回溯是正则性能的根源；利用互斥、反向引用
7. trim方法，用两次正则比用一次正则好，如
   • str.replace(/^\s+/,"").replace(/\s+$/,"")
   • str.replace(“/^\s|\s+$/g”,””);
8. 贪婪()比懒惰?好

第6章：快速响应的用户界面 107

1. 浏览器UI线程：单线程

2. 浏览器限制：

   • 调用栈大小限制
   • 长时间运行脚本限制
     • IE小于500万条语句
     • FF: 10s
     • Safari: 5s
     • Chrome: 无限制

3. 定时器的使用

4. 《可用性工程》
5. Web Worker

6.1 浏览器UI线程 107
6.1.1 浏览器限制 109
6.1.2 多久才算“太久”？ 110
6.2 使用定时器让出时间片段 111
6.2.1 定时器基础 112
6.2.2 定时器的精度 114
6.2.3 使用定时器处理数组 114
6.2.4 分割任务 116
6.2.5 记录代码运行时间 118
6.2.6 定时器与性能 119
6.3 Web Workers 120
6.3.1 Worker运行环境 120
6.3.2 与Worker通信 121
6.3.3 加载外部文件 122
6.3.4 实际应用 122
6.4 小结 124

第7章：Ajax 125

1. XHR

   • GET参数限制小于2018
   • 跨域限制

2. Dynamic

   • 可跨域
   • 只能GET
   • 不能设置请求头
   • 不能是纯CML、JSON，而必须封装在回调中，如
     • jsonback({"status":1})

3. MXHR

   • PHP方法：base64-encode
   • 合并图片请求
     • src='data:img/jpeg;base64,........'

7.1 数据传输 125
7.1.1 请求数据 125
7.1.2 发送数据 131
7.2 数据格式 134
7.2.1 XML 134
7.2.2 JSON 137
7.2.3 HTML 141
7.2.4 自定义格式 142
7.2.5 数据格式总结 144
7.3 Ajax性能指南 145
7.3.1 缓存数据 145
7.3.2 了解Ajax类库的限制 148
7.4 总结 149

第8章：编程实践 151

8.1 避免双重求值（Double Evaluation） 151
8.2 使用Object/Array直接量 153
8.3 不要重复工作 154
8.3.1 延迟加载 154
8.3.2 条件预加载 156
8.4 使用速度快的部分 156
8.4.1 位操作 156
8.4.2 原生方法 159
8.5 小结 161

第9章：构建并部署高性能JavaScript应用

9.1 Apache Ant 163
9.2 合并多个JavaScript文件 165
9.3 预处理JavaScript文件 166
9.4 JavaScript压缩 168
9.5 构建时处理对比运行时处理 170
9.6 JavaScript的HTTP压缩 170
9.7 缓存JavaScript文件 171
9.8 处理缓存问题 172
9.9 使用内容分发网络（CDN） 173
9.10 部署JavaScript资源 173
9.11 敏捷JavaScript构建过程 174
9.12 小结 175

第10章：工具 177

10.1 JavaScript性能分析 178
10.2 YUI Profiler 179
10.3 匿名函数 182
10.4 Firebug 183
10.41 控制台面板分析工具 183
10.4.2 Console API 184
10.4.3 网络面板 185
10.5 IE开发人员工具 186
10.6 Safari Web查看器 188
10.6.1 描述文件面板 189
10.6.2 资源面板 191
10.7 Chrome开发人员工具 192
10.8 脚本阻塞 193
10.9 Page Speed 194
10.10 Fiddler 196
10.11 YSlow 198
10.12 dyna Trace Ajax Edition 199
10.13 总结 202