js优化笔记

第一章 加载和运行

1、将所有<script>标签放置在页面的底部，紧靠 body关闭标签</body>的上方。此法可以保证页面在脚本

运行之前完成解析。 

2、将脚本成组打包。页面的<script>标签越少，页面的加载速度就越快，响应也更加迅速。不论外部脚本

文件还是内联代码都是如此。

3、  有几种方法可以使用非阻塞方式下载 JavaScript： 

——为<script>标签添加defer属性（只适用于Internet Explorer 和Firefox 3.5 以上版本） 

——动态创建<script>元素，用它下载并执行代码 

——用XHR对象下载代码，并注入到页面中

第二章  数据访问

1、在JavaScript 中，数据存储位置可以对代码整体性能产生重要影响。有四种数据访问类型：直接量，变

     量，数组项，对象成员。它们有不同的性能考虑。

2、直接量和局部变量访问速度非常快，数组项和对象成员需要更长时间。 

3、局部变量比域外变量快，因为它位于作用域链的第一个对象中。变量在作用域链中的位置越深，访问所需

的时间就越长。全局变量总是最慢的，因为它们总是位于作用域链的最后一环。

4、避免使用with 表达式，因为它改变了运行期上下文的作用域链。而且应当小心对待try-catch 表达式的 catch

子句，因为它具有同样效果。

5、嵌套对象成员会造成重大性能影响，尽量少用。

6、一个属性或方法在原形链中的位置越深，访问它的速度就越慢。

7、 一般来说，你可以通过这种方法提高 JavaScript 代码的性能：将经常使用的对象成员，数组项，和域外变

量存入局部变量中。然后，访问局部变量的速度会快于那些原始变量。

第三章 DOM 编程 

1、最小化DOM访问，在JavaScript 端做尽可能多的事情。

2、在反复访问的地方使用局部变量存放 DOM引用. 

3、小心地处理 HTML 集合，因为他们表现出“存在性” ，总是对底层文档重新查询。将集合的 length 属性缓

存到一个变量中，在迭代中使用这个变量。如果经常操作这个集合，可以将集合拷贝到数组中。

4、如果可能的话，使用速度更快的 API，诸如querySelectorAll()和firstElementChild。 

5、   注意重绘和重排版；批量修改风格，离线操作 DOM树，缓存并减少对布局信息的访问。

6、动画中使用绝对坐标，使用拖放代理。

7、使用事件托管技术最小化事件句柄数量。 

第四章  算法和流程控制

1、for ，while，do-while 循环的性能特性相似，谁也不比谁更快或更慢。

2、除非你要迭代遍历一个属性未知的对象，否则不要使用 for-in 循环。

3、改善循环性能的最好办法是减少每次迭代中的运算量，并减少循环迭代次数

4、一般来说，switch 总是比 if-else 更快，但并不总是最好的解决方法。

5、当判断条件较多时，查表法比 if-else 或者switch 更快。

7、浏览器的调用栈尺寸限制了递归算法在 JavaScript 中的应用；栈溢出错误导致其他代码也不能正常执行。

8、如果你遇到一个栈溢出错误，将方法修改为一个迭代算法或者使用制表法可以避免重复工作。

第五章  字符串和正则表达式

1、当连接数量巨大或尺寸巨大的字符串时，数组联合是 IE7 和它的早期版本上唯一具有合理性能的方法。

2、如果你不关心 IE7 和它的早期版本，数组联合是连接字符串最慢的方法之一。使用简单的+ 和+=取而代之，

     可避免（产生）不必要的中间字符串。

3、回溯既是正则表达式匹配功能基本的组成部分，又是正则表达式影响效率的常见原因。 

4、回溯失控发生在正则表达式本应很快发现匹配的地方，因为某些特殊的匹配字符串动作，导致运行缓慢

     甚至浏览器崩溃。避免此问题的技术包括：使相邻字元互斥，避免嵌套量词对一个字符串的相同部分多次

     匹配，通过重复利用前瞻操作的原子特性去除不必要的回溯

5、提高正则表达式效率的各种技术手段，帮助正则表达式更快地找到匹配，以及在非匹配位置上花费更少

     时间（见《更多提高正则表达式效率的方法》）。 

第六章  响应接口

 1、 JavaScript 运行时间不应该超过100 毫秒。过长的运行时间导致 UI更新出现可察觉的延迟，从而对整体

       用户体验产生负面影响。

 2、 定时器可用于安排代码推迟执行，它使得你可以将长运行脚本分解成一系列较小的任务。

 3、  网页工人线程是新式浏览器才支持的特性，它允许你在 UI线程之外运行JavaScript 代码而避免锁定UI

 4、网页应用程序越复杂，积极主动地管理 UI线程就越显得重要。没有什么JavaScript 代码可以重要到允

许影响用户体验的程度。

第七章 Ajax   异步JavaScript 和XML

1、高性能 Ajax 包括：知道你项目的具体需求，选择正确的数据格式和与之相配的传输技术。

2、作为数据格式，纯文本和 HTML 是高度限制的，但它们可节省客户端的CPU 周期。XML被广泛应用

     普遍支持，但它非常冗长且解析缓慢。JSON 是轻量级的，解析迅速（作为本地代码而不是字符串），交

     互性与XML相当。字符分隔的自定义格式非常轻量，在大量数据集解析时速度最快，但需要编写额外的

     程序在服务器端构造格式，并在客户端解析。

3、当从页面域请求数据时，XHR提供最完善的控制和灵活性，尽管它将所有传入数据视为一个字符串，

     这有可能降低解析速度。另一方面，动态脚本标签插入技术允许跨域请求和本地运行JavaScript 和JSON，

     虽然它的接口不够安全，而且不能读取信息头或响应报文代码。多部分XHR可减少请求的数量，可在一

    次响应中处理不同的文件类型，尽管它不能缓存收到的响应报文。当发送数据时，图像灯标是最简单和最

    有效的方法。XHR也可用POST 方法发送大量数据。

4、减少请求数量，可通过 JavaScript 和CSS 文件打包，或者使用MXHR 。

5、缩短页面的加载时间，在页面其它内容加载之后，使用 Ajax 获取少量重要文件。

6、确保代码错误不要直接显示给用户，并在服务器端处理错误。

第八章 编程实践

1、通过避免使用 eval_r()和Function()构造器避免二次评估。此外，给setTimeout()和setInterval() 传递函数参

     数而不是字符串参数。

2、创建新对象和数组时使用对象直接量和数组直接量。它们比非直接量形式创建和初始化更快。

3、避免重复进行相同工作。当需要检测浏览器时，使用延迟加载或条件预加载。

4、当执行数学远算时，考虑使用位操作，它直接在数字底层进行操作。

5、原生方法总是比 JavaScript 写的东西要快。尽量使用原生方法。 

6、确保代码错误不要直接显示给用户，并在服务器端处理错误。 

第九章 创建高性能javascript程序

1、合并JavaScript 文件，减少 HTTP 请求的数量

2、使用YUI 压缩器紧凑处理JavaScript 文件

3、以压缩形式提供 JavaScript 文件（gzip 编码）

4、通过设置HTTP 响应报文头使JavaScript 文件可缓存，通过向文件名附加时间戳解决缓存问题

5、使用内容传递网络（CDN）提供JavaScript 文件，CDN不仅可以提高性能，它还可以为你管理压缩和缓
      存 

6、确保代码错误不要直接显示给用户，并在服务器端处理错误。

第十章 工具

1、当网页或应用程序变慢时，分析网上传来的资源，分析脚本的运行性能，使你能够集中精力在那些需要

     努力优化的地方。 

2、使用网络分析器找出加载脚本和其它页面资源的瓶颈所在，这有助于决定哪些脚本需要延迟加载，或者

     进行进一步分析。

3、传统的智慧告诉我们应尽量减少 HTTP 请求的数量，尽量延迟加载脚本以使页面渲染速度更快，向用户

     提供更好的整体体验。

4、使用性能分析器找出脚本运行时速度慢的部分，检查每个函数所花费的时间，以及函数被调用的次数，

     通过调用栈自身提供的一些线索来找出哪些地方应当努力优化。

5、虽然花费时间和调用次数通常是数据中最有价值的点，还是应当仔细察看函数的调用过程，可能发现其

      它优化方法。