《高性能javascript》学习笔记八

八、实际开发的一些注意事项

1、避免双重求值

javascript代码允许在代码中提取一个包含代码的字符串然后动态执行它，有四种方法可以实现：eval()、Function()狗贼函数、setTimeout()和setInterval()。

当在一段js代码中执行另一段js代码时，都会导致双重求值的性能消耗。所以，尽量避免使用eval和Function()（eval也会导致安全问题），至于setTimeout和setInterval，应传入函数而不是字符串。

2、使用字面量方式创建对象或者数组

创建对象或者数组有多种方式，使用字面量方式是最快的，并且代码也最简洁。

3、避免重复工作

举个例子，当你想用一个兼容性的写法去绑定事件，你会如何做？

咋一看，好像没什么问题。但是，每次绑定事件的时候，都会执行一次判断。然而实际上，一个用户打开页面之后，设备应该是不会变的，所以后续均不需要判断是否支持addEventListener。下面是两种改良版：

延迟加载的方法。所谓延迟加载，就是在实际绑定的时候去改写函数

在第一次执行addHandler方法去绑定事件时，addhandler已经被改写成当前浏览器兼容的方法，之后都不会判断。

条件预加载：在脚本加载的时候提前监测浏览器型号（函数调用之前），检测只有一次，但是时间会比延迟加载的检测更加提前。

延迟加载的方式适用于函数在页面不会立刻被调用（因为第一次执行耗时会稍微长一点）的场合，条件预加载的方式适用于事件马上会被触发（函数马上会被调用），且在整个页面的生命周期频繁出现的场合。

4、使用速度更快的方法或者api

位操作符比布尔操作盒和数学运算符要快得多，这和js存储数字的方式有关。

有四种位操作符：

按位与：&。两个操作数的对应位都是1时，在该位返回1

按位或：|。两个操作数的对应位至少有一个1时，在该位返回1

按位异或：^。两个操作数的对应位只有一个1时，在该位返回1

按位取反：~。操作数的对应位对应位为0则返回1，为1则返回0.

以上都是数字转换为二进制之后进行的运算。

一个经典的使用场景，就是判断一个数是奇数还是偶数。

通常，我们是用一个数对2取余数，余数为0则是偶数，余数为1则是奇数。

如果用位操作符，你可以发现，转换为二进制之后，奇数的最低位都是1，偶数的最低位都是0。所以，可以用数字1与这个数进行与运算，如果结果是1，那么这个数是奇数；如果结果是0，那么这个数是偶数。

另外一种使用位运算的技术称作位掩码，用于处理同时存在多个布尔选项的庆幸。思路是使用单个数字的每一位来判定选项是否成立，从而有效的把数字转换为由布尔值标记组成的数组。

 

除了运用位运算符，尽可能的使用js自带的原生方法和属性，比如js内置的Math对象，Math.E、Math.ln10、Math.PI等属性都是js内置的，不需要临时计算，Math.abs()，Math.exp()等方法也比自己写的、具有相同功能的js代码更快。