JavaScript基础概念之----性能优化

1、加载与执行

1. body闭合标签以前，将全部的script标签放到页面的底部，能确保在脚本执行前页面已经完成渲染
2. 合并脚本，页面中script标签越少，加载越快，响应也更迅速
3. 使用多种无阻塞下载Javascript方法：

• • 使用script标签的defer属性
  • 使用动态建立script元素来下载并执行代码
  • 使用XHR对象下载 Javascript代码并注入页面中

2、数据存取

• 访问字面量和局部变量的速度最快，相反，访问数组和对象相对较慢
• 因为局部变量存在于做用域的起始位置，所以访问局部变量比访问跨做用域变量更快。变量在做用域链中的位置越深，访问所需时间越长，因为全局变量总处在做用域链的最末端，所以访问速度最慢
• 避免使用 with 语句，由于它会改变执行环境做用域链。一样，try-catch语句中的catch子句也有一样的影响
• 嵌套的对象成员会明显影响性能，尽可能少用
• 属性或方法在原型链中的位置越深，访问它的速度也越慢
• 经过把经常使用的对象，数组，跨域变量保存在局部变量中，来改善javascript的性能，由于局部变量访问速度最快

3、DOM编辑

• 最小化 DOM 访问次数，尽量在javascript端处理
• 若是须要屡次访问某个DOM节点，请使用局部变量存储它的引用
• 当心处理HTML集合，由于它实时连系着底层文档。把集合的长度缓存到一个变量中，并在迭代中使用它。若是须要常常操做集合，建议把它拷贝到一个数组中
• 若是可能的话，使用速度更快的API，好比 querySelectorAll() 和 firstElementChild
• 要留意重绘和重排，批量修改样式时，‘离线’操做DOM树，使用缓存，并减小访问布局信息的次数
• 使用事件委托来减小事件处理器的次数

4、算法和流程控制

• for、while和do-while循环性能特性至关，并无一种循环类型明显快于或慢于其余类型
• 避免使用 for-in 循环，除非你须要遍历一个属性数量未知的对象
• 改善循环性能的最佳方式是减小每次迭代的运算量和减小循环迭代次数
• 一般来讲，swich 老是比 if-else 块，但并不老是最佳解决方案
• 在判断条件较多时，使用查找表比 if-else 和 switch 更快
• 浏览器的调用栈大小限制了递归算法在 javascript 中的应用，栈溢出错误会致使其余代码中断运行
• 若是你遇到栈溢出错误，可将方法改成迭代算法，或使用 Memoization 来避免重复计算

5、字符串和正则表达式

• 当链接数据巨大或尺寸巨大的字符串时，数组项合并是惟一在IE7及更早版本中性能合理的方法
• 若是不须要考虑IE7及更早版本的性能，数组项合并是最慢的字符串链接方法之一。推荐使用简单的+和+=操做符替代，避免没必要要的中间字符串
• 回溯既是正则表达式匹配功能的基本组成部分，也是正则表达式的低效之源
• 回溯失控发生在正则表达式本应快速匹配的地方，但由于某些特殊的字符串匹配动做致使运行缓慢甚至浏览器崩溃。避免这个问题的办法是：使相邻的字元互斥，避免嵌套量词对同一字符串的相同部分屡次匹配，经过重复利用预查的原子组去除没必要要的回溯
• 提升正式表达式效率的各类技术手段会有助于正则表达式更快地匹配，并在非匹配位置上花更少的时间
• 正则表达式并不老是完成工做的最佳工具，尤为当你只搜索字面字符串的时候
• 尽管有许多方法能够去除字符串的首尾空白，但使用两个简单的正则表达式（一个去除头部空白，一个去除尾部空白）来处理大量字符串内容能提供一个简洁而跨浏览器的方法。从字符串末尾开始循环向前搜索第一个非空白字符，或者将此技术同正则表达式结合起来，会提供一个更好的替代方案，它不多受到字符串长度影响

6、快速响应的用户界面

• 任何 Javascript 任务都不该当执行超过 100 毫秒。过长的运行时间会致使 UI 更新出现明显的延迟，从而对用户体验产生负面影响
• Javascript 运行期间，浏览器响应用户交互的行为存在差别。不管如何，Javascript 长时间运行将致使用户体验变得混乱和脱节
• 定时器可用来安排代码延迟执行，它使得你能够把长时间运行脚本分解成一系列的小任务
• Web Workers 是新版浏览器支持的特性，它容许你在 UI 线程外部执行 Javascript 代码，从而避免锁定 UI

7、Ajax

• 了解项目的具体需求，选择正确的数据格式和与之匹配的传输技术
• 做为数据格式，纯文本和HTML只适用于特定场合，但它们能够节省客户端的CPU周期。XML被普遍应用且支持性良好，可是它十分笨重且解析缓慢。JSON是轻量级的，解析速度快，通用性与XML至关。字符分隔的自定义格式十分轻量，在解析大量数据集时很是快，但须要编写额外的服务器构造程序，并在客户端解析。
• 从页面当前所处的域下请求数据时，XHR提供了最完善的控制和灵活性，尽管它会把接收到的全部数据当成一个字符串，且这有可能下降解析速度。另外一方面，动态脚本注入容许跨域请求和本地执行Javascript和JSON，可是它的接口不那么安全，并且还不能读取头信息或响应代码。Multipart XHR 能够用来减小请求数，并处理一个响应中的各类文件类型，可是它不能缓存接收到的响应。当须要发送数据时，图片信标是一种简单而有效的方法。XHR能够用POST方法发送大量数据。
• 减小请求数，能够经过合并javascript和css文件，或使用MXHR
• 缩短页面的加载时间，页面主要内容加载完成后，用Ajax获取那些次要的文件
• 确保你的代码错误不会输出给用户，并在服务器端处理错误
• 知道什么时候使用成熟的Ajax类库，以及什么时候编写本身的底层 Ajax代码

8、编程实践

• 经过避免使用eval() 和 Function() 构造器来避免双重求值带来的性能消耗。一样的，给setTimeout() 和 setInterval()传递函数 而不是 字符串 做为参数
• 尽可能直接使用直接量建立对象和数组。直接量的建立和初始化都比非直接量形式要快
• 避免作重复的工做，当须要检测浏览器时，可以使用延迟加载或条件预加载
• 在进行数学计算时，考虑使用直接操做数字的二进制形式的位运算
• Javascript 在原生方法 总会比本身写的任何代码都要快。尽可能使用原生方法

9、部署

• 合并javascript文件以减小HTTP请求数
• 压缩 Javascript文件
• 在服务器端压缩 Javascript文件
• 经过正确设置HTTP响应头来缓存 Javascript文件，经过向文件名增长时间戳来避免缓存问题
• 使用CDN提供Javascript文件；CDN不只能够提高性能，它也为你管理文件的压缩和缓存

10、工具

• 使用网络分析工具找出加载脚本和页面中共他资源的瓶颈，这会帮助你决定哪些脚本须要延迟加载，或者须要进一步分析
• 尽管传统的经验告诉咱们要尽可能减小HTTP请求数，但把脚本尽量延迟加载能够加快页面渲染速度，给用户带来更好的体验
• 使用性能分析工具找出脚本运行过程当中速度慢的地方，检查每一个函数所消耗的时间，以及函数被调用的次数，经过调用栈自身提供的一些线索来找出须要集中精力优化的地方
• 尽管耗费的时间和调用次数一般是数据中最有价值的部分，但仔细观察函数的调用过程，你也许会发现其余优化目标