前言
本文为阅读 《高性能JavaScript》 时所记下的笔记，现分享出来供大家学习参考：
正文
1. 由于脚本会阻塞页面其他资源的下载，因此推荐将所有的<script>标签尽可能放到<body>标签的底部，以尽量减少对整个页面下载的影响。
2. 把一段内嵌脚本放在引用外链样式表的<link>标签之后会导致页面阻塞去等待样式表的下载。这样做是为了确保内嵌脚本在执行时能获得最精准的样式信息。
3. 减少页面中外链脚本文件的数量有助于改善性能（因为HTTP请求会带来额外的性能开销）。
4. 任何带有defer属性的<script>元素在DOM完成加载之前都不会执行，在window.onload事件处理器执行之前被调用。
5. 动态脚本元素，新创建一个<script>元素，动态添加src进行文件下载，文件在该元素添加到页面时开始下载。这种技术的重点在于：无论在何时启动下载，文件的下载和执行过程不会阻塞页面其他进程。
6. 变量作用域查询很耗费性能，如果某个跨作用域的值在函数中被调用一次以上，那么就把他存储到局部变量里。
7. 对象成员嵌套得越深，读取速度就会越慢。执行location.href总是比window.location.href要快，后者也比window.location.href.toString()要快。如果这些属性不是对象的实例属性，那么成员解析还需要搜索原型链，这会花更多的时间。
8. 减少访问DOM的次数，把运算尽量留在ECMAScript这一端处理。
9. 读取元素集合（如html集合）的length属性会引发集合进行更新，这在所有浏览器中都有明显的性能问题。优化方法很简单，把集合的长度缓存到一个局部变量中，然后再循环的条件退出语句中使用该变量。
10. 尽量使用浏览器提供的原生dom访问API，querySelectorAll()，里面的参数为css选择器，返回一个NodeList集合。
11. 当DOM的变化影响了元素的几何属性（宽和高）——比如改变边框高度或给段落添加文字，导致行数增加——浏览器需要重新计算元素的几何属性，同样其他元素的几何属性和位置也会因此受到影响。浏览器会使渲染树中受到影响的部分失效，并重新构造渲染树。这个过程成为“重排（reflow）”。完成重排后，浏览器会重新绘制受到影响的部分到屏幕中，该过程称为“重绘（repaint）”。
13. 由于每次重排重绘都会产生计算消耗，大多数浏览器通过队列化修改并批量执行来优化重排过程。获取布局信息的操作会导致队列刷新，比如：offsetTop，scrollTop，clientHeight，clientTop，offsetTop，getComputedStyle()等等。
14. 减少重排重绘的方法有：
- 不在布局信息改变时做DOM查询
- 合并多次对DOM和样式的修改，比如使用cssText
- 使元素脱离文档流，然后对其应用多重改变，最后把元素带回文档中
- 使用fragment
- 用绝对定位使动画脱离文档流，动画结束时恢复定位
15. 基于循环的迭代快于基于函数的迭代（forEach等）。
16. 条件数量越大，最好使用switch case来替代if else。switch的实现大都采用了分支表索引来优化，且比较时不会发生类型转换。
17. Web worker适用于那些处理纯数据，或者与浏览器UI无关的长时间运行脚本。编码/解码大字符串、复杂数学运算（包括图像和视频处理）、大数组排序。
18. 任何超过100毫秒的处理过程，都应当考虑worker方案是不是比基于定时器的方案更为合适。
- 当需要发送数据时，图片信标是一种简单而有效的方法：
- 延迟加载：
- 条件预加载：
- 尽可能用
位运算替代纯数学操作，因为这样做最快。
24. 当需要运行复杂数学运算时，应先查看Math对象。
25. 尽量使用直接量创建对象和数组。
26. JavaScript的原生方法总会比你写的任何代码都要快。尽量使用原生方法。
27. 合并JavaScript文件以减少http请求数。
28. 使用CDN提供JavaScript文件；CDN不仅可以提升性能，他也为你管理文件的压缩与缓存。
使用网络分析工具找出加载脚本和页面中其他资源的瓶颈。
