最近无聊，又开始刷书，写写《高性能JavaScript》读后感吧！
1、脚本加载
脚本加载会阻塞其他文件下载，页面会等到所有JavaScript代码下载并执行完成才能继续
解决方法：（1）、建议将script标签放在body底部，确保脚本执行前页面已完成渲染
（2）、可以将某些脚本直接写在script标签插入html中，进行首屏优化
（3）、使用webpack等工具打包或压缩代码，减少请求与文件体积
2、数据存取
数据有四种方式，字面量、本地变量、数组、对象
多层引用，例如window.location.href、原型链搜索等，如果使用多次，建议进行本地储存
比如：h = window.location.href
3、DOM
DOM操作很慢，原因有2：DOM节点很复杂、修改DOM会导致重绘（repaint）和重排（reflow）
（1）、插入节点推荐使用innerHTML，大量字符串建议使用数组拼接
（2）、HTMLCollection集合是动态检测，如果对象更新，对应的集合也更新，无论是获取还是修改都会触发一次
（3）、比较通用的优化方法，缓存（类）数组长度，再进行循环遍历操作
（4）、重排、重绘都是代价昂贵的操作，尽量减少发生。
（5）、事件委托
tips：重绘、重排
浏览器下载完页面中所有组件-HTML标记、JavaScript、CSS、图片-之后（这里有误，边下载边渲染）会解析并生成两个内部数据结构：
DOM树 => 表示页面结构
渲染树 => 表示DOM节点如何显示
DOM树中的每一个需要显示的节点在渲染树中至少存在一个对应的节点（隐藏的DOM元素在DOM树中没有对应节点）。
当DOM变化影响了元素的几何属性（宽或高），浏览器需要重新计算元素的几何属性。浏览器会使渲染树中受到影响的部分失效，重新构造渲染树，这个过程叫‘重排（reflow）’；完成重排后，浏览器会重新绘制受影响的部分到屏幕中，该过程称为‘重绘（repaint）’。
当改变颜色时，只会引起重绘。
重排发生条件：
1、添加、删除可见元素
2、元素位置改变
3、元素尺寸改变
4、内容改变
5、页面渲染初始化
6、浏览器窗口尺寸改变
浏览器会通过队列化修改（类似于task）来优化重排过程。然而，当获取类似于offsetTop、getComputedStyle等属性时，会强制浏览器渲染已获取最近属性。
当需要对DOM做多次操作时，有三种方式优化：
1、将DOM隐藏，操作完后显示
2、构建文档碎片，插入DOM（推荐）
3、创建一个DOM备份，操作完后替换原DOM
4、算法与流程
（1）、倒序+缓存长度优化循环：
// 某数组
var arr = [];
// 循环处理元素
for (var i = 0; i < arr.length; i++) {
process(arr[i]);
}
// 优化循环体
for (var i = arr.length; i--;) {
process(arr[i]);
}
（2）、贴一个Duff's Device，通过分割循环次数提升效率：
// Duff's Device
var iterations = Math.floor(items.length / 8), // 表示多少轮循环
startAt = items.length % 8, // 8的余数
i = 0; // 从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);
优化后的算法，取消了switch语句，将余数与整数分别处理：
// 余数
var i = item.length % 8;
while (i) {
process(item[i--]);
}
// 整数
i = Math.floor(item.length / 8);
while (i) {
process(items[i--]);
process(items[i--]);
process(items[i--]);
process(items[i--]);
process(items[i--]);
process(items[i--]);
process(items[i--]);
process(items[i--]);
}
（3）、if-else与switch
条件增加时，优化使用switch，性能与代码可读性方面都更好。（在JS中switch使用全等，没有隐式类型转换带来的损耗）
优化if-else：将最可能出现的情况放在第一项
（4）、查找表
使用数组或普通对象来构建查找表。
5、Ajax
请求：
（1）、正常ajax请求
使用XHR时，POST与GET的对比。
对于不会改变服务器状态，只会获取数据（幂等行为）的请求，应该使用GET，GET请求的数据会被缓存起来，多次请求有助于提高性能。
当URL加上参数长度过长使用POST。
（2）、动态脚本注入
这种技术克服了XHR最大限制：不能跨域。
该方法通过创建一个script标签， 将src设置为不同域的URL。
动态脚本注入的控制有限，无法设置请求头，只能通过get传参。
缓存：
（1）、在服务端，设置HTTP头信息以确保你的响应会被浏览器缓存
通过get方式发送请求，并在响应中发送正确的HTTP头信息，Expires头信息会告诉浏览器缓存响应多久。
（2）、在客户端，把获取到的信息存储到本地，从而避免再次请求
6、finally
（1）、文件合并（webpack）
（2）、文件压缩
（3）、缓存
（4）、CDN
完结撒花！