写出高性能的js代码

写出高性能的js代码

一、加载运行

javascript在浏览器中的性能，大概是开发者面对最重要的问题。因为javascript的阻塞特征，也就是在javascipt运行的过程中，其他的事情并不能被浏览器处理。所以javascript运行的越长，浏览器等待的时间就越长。所以应该

• 把脚本放在底部（通常就是标签的前面）。

• 由于每次http请求都会有性能负担，加载一个100KB的脚本要比加载4个25KB的快。所以把多个脚本合成一个脚本，通过打包工具来实现。

• 用defer属性,不过只支持internet explorer 和firefox3.5以上版本。

• 动态创建script标签，用它下载并执行代码。

二、数据

每一种数据都有读写的负担，全局变量，局部变量，数组，对象访问的代价都不一样

• 如果关心运行速度，尽量使用局部变量限制对象和数组的使用（原型链越深，搜索的速度越慢）。

• 作用域链搜索是从里往外的，在一个函数内部，首先是找局部变量，找不到，再去外面一层寻找变量。所以在函数的内部用全局变量，可以把值赋给局部变量。

• 不要使用with，with会改变作用域链，影响性能。

• try-catch的catch表达式也是和with的效果一样，但是try-catch是一个非常有用的东西，所以在用try-catch的时候确保你了解可能发生的错误。

• 闭包，通常在一个函数激活对象和运行上下文一同销毁，但是闭包却不会。所以闭包意味着更多的内存开销。在大型网页应用的时候，需要注意这个问题。

• 属性嵌套，嵌套对象成员会造成 。

• 对于一些常用的对象，数组项存入局部变量中，访问局部变量的速度会大大高于那些元始的变量

三、DOM

在网页中，DOM操作的代价昂贵，通常是一个性能瓶颈。在对javascript和DOM之间，我们可以理解它们各自是一个房间，在DOM的房间的门外有一个守门人，每次从javascript到DOM需要缴纳过门费，所以操作DOM的次数越多，代价也就越昂贵，所以我们要尽量减少过门的次数，尽量在javascript门这边完成

• 减少dom访问，在Javascript端做尽可能的事

• 对重复访问的dom对象使用局部变量保存

• 注意页面重绘和重排，把dom操作批量化（不要分步修改DOM，用一次性全部修改）

• 使用事件委托

四、选择算法

在javasctip中有很多种循环方法，while、do-whlie、for、for-in，forEach并且还有很多条件语句，if-else、switch，因为Javascript的资源有限，所以选择算法的时候优先选择最优的

• while、do-whlie、for 循环的性能相似，无所谓选择谁

• 相对性能来说for-in是最浪费性能的一种（因为每次迭代都需要搜索原型的属性)，除非你要遍历一个属性不知道的对象，否则不要用。

• switch比if-else要快

• forEach是基于函数的迭代，虽然很便利，但是基于函数的迭代是普通基于循环的
  八倍

五、定时器和AJAX

当javascript和用户操作一起运行的时候，用户界面是不能响应操作的，原因是当脚本执行的时候，UI不会随着用户的交互而跟新，此时的用户交互被放进队列里面，当原先的脚本执行完之后才会执行这个交互。

• 定时器可以安排代码推迟去执行，可以把大的脚本分解成一个个小的任务，所以合理的使用定时器，可以提高用户的体验。

• AJAX请求的数据尽量用json数据。

• 减少页面AJAX的请求次数。