提高JavaScript性能

加载并执行


1.</body>闭合标签之前，将所有的<script>标签放到页面底部。这能确保在脚本执行前页面已经渲染完成


2.每个<script>标签初始下载是都会阻塞页面渲染，应减少页面包含的<script>标签（打包压缩）


3.把一段内嵌脚本放在引用外链样式表的<link>标签之后会导致页面阻塞去等待样式表的下载，这样做是为了确保内嵌脚本在执行时能获得最精确的样式信息，因此不要把内嵌脚本紧跟在<link>标签之后


4. 使用多种无阻塞下载JavaScript的方法
- 使用<script>标签的defer属性
- 使用动态创建的<script>元素来下载并执行代码
- 使用XHR对象下载JavaScript代码并注入页面中




数据存储

1.如果某个跨作用域的值在函数中被应用一次以上，那么就把他存储到局部变量( var doc = documeng; doc.xxxx )


2.点表示法(object.name)比括号表示(object['name'])法在Safari中速度更快


3.属性或者方法在原型链中的位置越深，访问的速度越慢


4.嵌套的对象成员会明显影响性能


5.少用全局变量，因为它总处于作用域链的最末端




DOM编程 (DOM是一个独立于语言的没用于操作XML和HTML文档的程序接口API，所以DOM操作天生就慢)


1.减少DOM访问的次数，把运算尽量留在ECMAScript这一端处理。


2.如果需要多次访问某个DOM节点，请使用局部变量存储他的引用


3.处理HTML集合时，把集合的长度缓存到一个变量中，并在迭代中使用它。如果经常需要操作集合，把集合拷贝到一个数组中(toArray)


4.使用事件委托来减少事件处理器的数量


5.使用动画时，让元素脱离文档流(比如 展开/折叠 先让元素绝对定位，完成时候恢复定位)




算法和流程控制


1.不要用for-in来遍历数组成员




快速响应的用户界面


1.高效的管理UI线程就是要确保javas不能运行太长时间


2.任何JavaScript任务都不应当执行超过100ms


3.JavaScript运行期间，浏览器响应用户交互的行为存在差异


4.处理纯数据或者与浏览器UI无关的长时间运行脚本，可以尝试Web Workers


Ajax

1.使用XHR时，GET请求的数据会被缓存起来，如果需要多次请求同一数据的话，它会有助于提升性能(长度：2048字节)




编程实践

1.避免双抽求值


2.使用Objcet/Array直接量


3.避免重复工作
- 延迟加载(复写现有函数)
- 条件预加载(三元表达式)

4.使用速度快的部分
- 位操作
- 原生方法




构建并部署高性能JavaScript应用


1.合并多个JavaScript文件，减少HTTP请求


2.预处理JavaScript文件


3.压缩JavaScript


4.缓存JavaScript文件(添加校验和)


5.使用CDN