高性能的JavaScript -- 读书笔记
高性能的JavaScript
一、 加载和运行
- 将脚本放在底部
脚本下载解析执行时，页面已经加载完成并显示在用户面前
- 成组脚本
减少外部脚本文件数量，整合成一个文件
- 延迟脚本
- 动态脚本元素
非阻塞方式
- XMLHttpRequest
var xhr = new XMLHttpRequest();
xhr.open(“get”, “file.js", true);
xhr.onreadystatechange = function() {
if(xhr.readyState == 4) {
if ….
var script = document.createElement(“script”);
script.type = “text/javascript”;
script.text = xhr.responseText;
document.body.appendChild(script);
}
}
优点：可下载不立即执行的JavaScript代码
限制：JavaScript文件必须与页面放置在同一个域内
- 推荐的非阻塞模式
二、 数据访问
- 四种基本的数据访问方式：
直接量、变量、数组项、对象成员
- 管理作用域
每个JavaScript函数中都有一个仅供JavaScript引擎使用的内部属性为[[Scope]]。该属性包含了函数被创建的作用域链中对象的集合。
运行期上下文的作用域链中，一个标识符位置越深，它的读写速度就越慢。所以，函数中局部变量的访问速度总是最快的，而全局变量通常是最慢的。
- 改变作用域链
with表达式：作用域链前段插入了一个新的对象，局部变量的访问速度变慢。最好不要用。
try-catch表达式：catch子句执行完毕，作用域链返回原来的状态。
- 闭包，作用域，和内存
当闭包被运行时，一个运行期上下文将被创建，它的作用域链与[[Scope]]中引用的两个相同的作用域同时被初始化，然后一个新的激活对象为闭包自身被创建。
脚本中最好小心地使用闭包。
- 对象成员
对象成员比直接量和局部变量访问速度慢，在某些浏览器上比访问数组项还要慢。
所以可能的话避免使用它们，只在必要情况下使用对象成员。
- 总结：
提高性能：将经常使用的对象成员，数组项，和域外变量存入局部变量中。然后，访问局部变量的速度会快于那些原始变量。
三、 DOM编程
DOM操作代价昂贵
三类问题：
l 访问和修改DOM元素
l 修改DOM元素的样式，造成重绘和重新排版
l 通过DOM事件处理用户响应
- DOM访问和修改
轻轻地触摸DOM，并尽量保持在ECMAScript范围内。
不标准却被良好支持innerHTML和纯DOM方法如document.createElement()的性能差别不大。旧的浏览器上innerHTML快，新浏览器上DOM方法更快。
- 节点克隆
克隆节点更有效率，但提高不太多。
- HTML 集合对象
遍历数组比遍历集合快。
每次迭代过程访问集合length属性，性能低。应将length属性缓存到一个变量中，然后在循环判断条件中使用这个变量。
- 如果浏览器支持document.querySelectAll(),最好使用它
- 重绘和重排版
浏览器下载完所有页面HTML标记，JavaScript，CSS，图片后，它解析文件并创建两个内部数据
l 一棵DOM树：表示页面结构
l 一棵渲染树：表示DOM节点如何显示
当布局和几何改变时需要重排版：
l 添加或删除可见的DOM元素
l 元素位置改变
l 元素尺寸改变
l 内容改变
l 最初的页面渲染
l 浏览器窗口改变尺寸
- 最小化重绘和重排版
因为代价昂贵，所以好的策略是减少此类操作发生机会。将多个DOM和风格改变合并到一个批次中一次性执行。
l 隐藏元素，进行修改，然后再显示它。
display = none; 修改；display = block;
l 在已存DOM之外创建一个子树，然后拷贝到文档。
createDocumentFragment();append();
l 拷贝原始元素，修改副本，覆盖原始元素。
cloneNode();replaceChild();
第二种文档片段最优
- 缓冲布局信息
- 将元素提出动画流
使用以下步骤可以避免对大部分页面进行重排版
l 绝对坐标定位页面动画元素，使它位于页面布局流之外
尺寸改变时只会覆盖其他元素
l 启动元素动画
l 当动画结束时，重新定位，只一次下移文档其他元素位置
- 事件托管
事件逐层冒泡总被父元素捕获；
只需在一个包装元素上挂接一个句柄，用于处理子元素发生的所有事件；
DOM标准，每个事件有三个阶段：
捕获，到达目标，冒泡
10. 总结
为减少DOM编程中的性能损失，注意以下几点：
l 最小化DOM访问，在JavaScript端做尽可能多的事情
l 在反复访问的地方使用局部变量存放DOM引用
l 小心处理HTML集合，将length属性缓存到一个变量中
l 使用速度更快的API，如querySelectorAll()和firstElementChild
l 注意重绘和重排版；批量修改风格，离线操作DOM树，缓存并减少对布局信息的访问
l 动画中使用绝对坐标，使用拖放代理
l 使用时间托管技术最小化事件句柄数量
四、 算法和流程控制
代码整体结构是执行速度的决定因素之一
- 循环
for-in循环比其他普通循环明显要慢；
因为每次迭代操作要搜索实例或原形的属性。
减少迭代次数；
达夫设备:
var iterations = Math.floor(items.length/8);
startAt = items.length % 8;
i = 0;
do {
switch(startAt) {
case 0 : process(items[i++]);
case 7 : process(items[i++]);
case 6 : process(items[i++]);
case 5 : process(items[i++]);
case 4 : process(items[i++]);
case 3 : process(items[i++]);
case 2 : process(items[i++]);
case 1 : process(items[i++]);
}
startAt = 0;
} while(-- iterations);
- 基于函数的迭代
forEach()
比基于循环的迭代要慢：每个数组项要关联额外的函数调用；
关注执行时间的情况下它并不是一个合适的方法；
- 条件表达式
大多数情况下，switch比if-else更快，但只有当条件体数量很大时才明显；
两者区别：条件体增加时，if-else性能负担增加程度比switch多；
优化if-else：
条件体应当总是按照从最大概率到最小概率的顺序排列，保证理论运行速度更你快；
嵌套使用；
- 查表法
最常用于一个键和一个值形成逻辑映射领域
- 递归
递归函数会遇到浏览器调用栈大小的限制
五、 字符串和正则表达式
- 优化字符串连接
“+”，
“+=”，
Array.join(),
String.concat(),
str = str + “one” + “two”;
避免了使用临时字符串
- 数组联结
- 正则表达式优化
工作原理：
第一步：编译
第二步：设置起始位置
第三步：匹配每个正则表达式的字元
第四步：匹配成功或失败
六、 响应接口
- 浏览器UI线程
JavaScript和UI更新共享的进程被称为浏览器UI进程；
浏览器在JavaScript运行时间上采取了限制：
调用栈尺寸限制和长时间脚本限制；
- 用定时器让出时间片
setTimeout()和setInterval()
第二个参数指出是么时候应当将任务添加到UI队列之中，并不是说那时代码被执行；
- 分解任务
- 限时运行代码
- Web Work
不绑定UI线程，不能访问许多浏览器资源。
七、Ajax异步JavaScript和XML
