高性能JavaScript最佳实践
"### 关于执行一段字符串的问题在目前所有编程语言中，都允许您通过一些方法将一段字符串看作代码直接运行，JavaScrip编程也不列外，在JavaScript中可以通过eval(code)函数、function(arg1,arg2,code)构造器、setTimeout(code,millisec)和setInterval(code,millisec)四种方式传入字符串并运行。<span style=background: white; color: blue;><<span style=background: white; color: maroon;>script<span style=background: white; color: blue;>> var <span style=background: white; color: black;>result = eval(<span style=background: white; color: #a31515;>num1 + num2<span style=background: white; color: black;>); <span style=background: white; color: blue;>var <span style=background: white; color: black;>sum = <span style=background: white; color: blue;>new <span style=background: white; color: black;>Function(<span style=background: white; color: #a31515;>arg1<span style=background: white; color: black;>, <span style=background: white; color: #a31515;>arg2<span style=background: white; color: black;>, <span style=background: white; color: #a31515;>return arg1 + arg2<span style=background: white; color: black;>); setTimeout(<span style=background: white; color: #a31515;>sum = num1 + num2<span style=background: white; color: black;>, 100); setInterval(<span style=background: white; color: #a31515;>sum = num1 + num2<span style=background: white; color: black;>, 100);<span style=background: white; color: blue;></<span style=background: white; color: maroon;>script<span style=background: white; color: blue;>>这种编程方式会导致在JavaScript运行时额外创建编译解析器对象，对性能会造成一定的影响，最佳实践推荐您在setTimeout和setInterval中传入一个函数，而不是字符串，推荐使用如下代码：<span style=background: white; color: blue;><<span style=background: white; color: maroon;>script<span style=background: white; color: blue;>> <span style=background: white; color: black;>setTimeout(<span style=background: white; color: blue;>function <span style=background: white; color: black;>() { sum = num1 + num2; }, 100); setInterval(<span style=background: white; color: blue;>function <span style=background: white; color: black;>() { sum = num1 + num2; }, 100);<span style=background: white; color: blue;></<span style=background: white; color: maroon;>script<span style=background: white; color: blue;>>### 对象和数组的初始化性能在JavaScript中可以通过new关键字或者直接赋值的方式初始化一个对象或者数组。<span style=background: white; color: blue;><<span style=background: white; color: maroon;>script<span style=background: white; color: blue;>> var <span style=background: white; color: black;>myOjbect = <span style=background: white; color: blue;>new <span style=background: white; color: black;>Object(); myOjbect.id = 101; myOjbect.name = <span style=background: white; color: #a31515;>零度<span style=background: white; color: black;>; myOjbect.url = <span style=background: white; color: #a31515;>www.xcode.me<span style=background: white; color: black;>; <span style=background: white; color: blue;>var <span style=background: white; color: black;>myArray = <span style=background: white; color: blue;>new <span style=background: white; color: black;>Array(); myArray[0] = <span style=background: white; color: #a31515;>零度<span style=background: white; color: black;>; myArray[1] = <span style=background: white; color: #a31515;>编程<span style=background: white; color: black;>; myArray[2] = <span style=background: white; color: #a31515;>分享<span style=background: white; color: black;>;<span style=background: white; color: blue;></<span style=background: white; color: maroon;>script<span style=background: white; color: blue;>><span style=background: white; color: blue;><<span style=background: white; color: maroon;>script<span style=background: white; color: blue;>> var <span style=background: white; color: black;>myOjbect = { id: 101, name: <span style=background: white; color: #a31515;>零度<span style=background: white; color: black;>, url: <span style=background: white; color: #a31515;>www.xcode.me <span style=background: white; color: black;>} <span style=background: white; color: blue;>var <span style=background: white; color: black;>myArray = [<span style=background: white; color: #a31515;>零度<span style=background: white; color: black;>, <span style=background: white; color: #a31515;>编程<span style=background: white; color: black;>, <span style=background: white; color: #a31515;>分享<span style=background: white; color: black;>];<span style=background: white; color: blue;></<span style=background: white; color: maroon;>script<span style=background: white; color: blue;>>这两种初始化效果相同，第二种初始化方式看起来更加简洁，经测试，直接赋值初始化性能优于new关键字。### 不要重复做无用的事在计算机领域，优化性能的两个原则是：1、不要做无用的工作，2、不要重复做已完成的工作。前者一般通过代码重构来完成，后者通常难以确定，因为代码可能由于某种原因在多个地方被重复。### 使用延迟加载优化性能根据生活中的二八原则，80%的用户只会使用系统20%的功能，这意味着在一般情况下，我们引用的JS文件只有20%被使用的概率，我们并不需要立即加载所有函数和代码段，将命中率低的代码使用延迟加载可提高性能，延迟加载将JS文件的下载推迟到用户需要点击某个功能时，而不是针对全部用户下载多个JS文件。### 位运算符的使用如果对二进制表示法不熟悉，JavaScript可让你很容易将一个数字转换成二进制格式。<span style=background: white; color: blue;><<span style=background: white; color: maroon;>script<span style=background: white; color: blue;>> var <span style=background: white; color: black;>number = 25; <span style=background: white; color: blue;>var <span style=background: white; color: black;>binStr = number.toString(2);<span style=background: white; color: blue;></<span style=background: white; color: maroon;>script<span style=background: white; color: blue;>>通过向toString函数传入2作为参数，可将一个数字转为二进制的字符表示。JavaScript中四种基于二进制位的运算符：位与（&）：两个操作位都为1，则结果为1位或（|）：两个操作位中有任何一个为1，则结果为1位异或（）：两个操作位不同时结果为1，相同则返回0位非（~）：遇0则返回1，遇1则返回0左移运算（<<）：数字中的所有数位向左移动指定的数量，左移运算保留数字的符号位。有符号右移运算（>>）：数字中的所有数位向右移动指定的数量，同时保留该数的符号（正号或负号），有符号右移运算符恰好与左移运算相反。无符号右移运算（>>>）：它将无符号的所有数位整体右移，对于正数，无符号右移运算的结果与有符号右移运算一样。对于负数，无符号右移运算用 0 填充所有空位。断一个数是否为偶数，通常的方式是与2求余数，看结果是否为0来判断奇数或者偶数 。如果我们用位运算来思考，会发现偶数的最低位是0，奇数的最低位是1，通过这个特性，可以用位操作来判断奇偶性，如果为偶数，那么它和1 进行位与操作的结果就是0，如果此数为奇数，那么它和1 进行位与操作的结果就是1。<span style=background: white; color: blue;><<span style=background: white; color: maroon;>script<span style=background: white; color: blue;>> for <span style=background: white; color: black;>(<span style=background: white; color: blue;>var <span style=background: white; color: black;>i = 0, len = rows.length; i < len; i++) { <span style=background: white; color: blue;>if <span style=background: white; color: black;>(i & 1) { alert(<span style=background: white; color: #a31515;>这是一个奇数<span style=background: white; color: black;>); } <span style=background: white; color: blue;>else <span style=background: white; color: black;>{ alert(<span style=background: white; color: #a31515;>""这是一个偶数 ""<span style=background: white; color: black;>); } }<span style=background: white; color: blue;></<span style=background: white; color: maroon;>script<span style=background: white; color: blue;>>经过测试，使用位运算比求余运算符性能提高了很多，当然这取决于浏览器。### 尽可能使用原生函数原生函数是指浏览器JavaScript引擎提供的函数，这些函数已经集成到浏览器，是标准的ECMAScript规范，而且未执行JS代码前已经编译成机器码，这将使得不需要在运行时进行解释编译 ，所以性能是最高的，现在流行的前端框架越来越多，比如jQuery虽然简化工作，但使用JavaScript原生函数显然具有更高的性能。"