如何优化js代码 前端优化从哪方面着手

如何优化js代码 前端优化从哪方面着手

感觉从最简单的雪碧图，代码压缩，把代码上传，到通过研究HTTP协议来优化都可以。知道的不多，如果有好方法求楼主发一份。

一、 让代码简洁：一些简略的表达方式也会产生很好的优化 eg：x=x+1;在不影响功能的情况下可以简写为x++; 二、 变量名方法名尽量在不影响语意的情况下简单。（可以选择首字母命名） eg：定义数组的长度可以取名为：arrlen而不需要取为arraylength。 三、 关于js的循环，循环是一种常用的流程控制。 js提供了三种循环：for(;;)、while()、for(in)。在这三种循环中for(in)的效率最差，因为它需要查询hash键，因此应尽量少用for(in)循环，for(;;)、while()循环的性能基本持平。当然，推荐使用for循环，如果循环变量递增或递减，不要单独对循环变量赋值，而应该使用嵌套的++或–运算符。 四、 如果需要遍历数组，应该先缓存数组长度，将数组长度放入局部变量中，避免多次查询数组长度。 因为我们常常要根据字符串、数组的长度进行循环，而通常这个长度是不变的，比如每次查询a.length，就要额外进行一个操作，而预先把var len=a.length，则就少了一次查询。 五、 尽量选用局部变量而不是全局变量。 局部变量的访问速度要比全局变量的访问速度更快，因为全局变量其实是window对象的成员，而局部变量是放在函数的栈里的。 六、 尽量少使用eval。 每次使用eval需要消耗大量时间，这时候使用js所支持的闭包可以实现函数模板。 七、 减少对象查找 因为javascript的解释性，所以a.b.c.d.e，需要进行至少4次查询操作，先检查a再检查a中的b，再检查b中的c，如此往下。所以如果这样的表达式重复出现，只要可能，应该尽量少出现这样的表达式，可以利用局部变量，把它放入一个临时的地方进行查询。 八、 字符串连接。 如果是追加字符串，最好使用s+=anotherstr操作，而不是要使用s=s+anotherstr。 如果要连接多个字符串，应该少使用+=，如s+=a;s+=b;s+=c;应该写成s+=a + b + c； 而如果是收集字符串，比如多次对同一个字符串进行+=操作的话，最好使用一个缓存。怎么用呢？使用javascript数组来收集，最后使用join方法连接起来，如下 var buf = new array();for(var i = 0; i < 100; i++){ buf.push(i.tostring());}var all = buf.join(""); 九、 类型转换 1. 把数字转换成字符串，应用"" + 1，虽然看起来比较丑一点，但事实上这个效率是最高的，性能上来说：("" +) > string() > .tostring() > new string() 尽量使用编译时就能使用的内部操作要比运行时使用的用户操作要快。 string()属于内部函数，所以速度很快，而.tostring()要查询原型中的函数，所以速度逊色一些，new string()用于返回一个精确的副本。 2. 浮点数转换成整型，这个更容易出错，很多人喜欢使用parseint()，其实parseint()是用于将字符串转换成数字，而不是浮点数和整型之间的转换，我们应该使用math.floor()或者math.round()。math是内部对象，所以math.floor()其实并没有多少查询方法和调用的时间，速度是最快的。 3. 对于自定义的对象，如果定义了tostring()方法来进行类型转换的话，推荐显式调用tostring()，因为内部的操作在尝试所有可能性之后，会尝试对象的tostring()方法尝试能否转化为string，所以直接调用这个方法效率会更高 十、 尽量作用json格式来创建对象，而不是var obj=new object()方法。 因为前者是直接复制，而后者需要调用构造器，因而前者的性能更好。 十一、 当需要使用数组时，也尽量使用json格式的语法， 使用json格式的语法即直接使用如下语法定义数组：[parrm,param,param...],而不是采用new array(parrm,param,param...)这种语法。因为使用json格式的语法是引擎直接解释的。而后者则需要调用array的构造器。 十二、 对字符串进行循环操作，例如替换、查找，就使用正则表达式。 因为js的循环速度比较慢，而正则表达式的操作是用c写成的api，性能比较好。 十三、 插入html 很多人喜欢在javascript中使用document.write来给页面生成内容。事实上这样的效率较低，如果需要直接插入html，可以找一个容器元素，比如指定一个div或者span，并设置他们的innerhtml来将自己的html代码插入到页面中。 十四、 对象查询 使用[“”]查询要比.items()更快 十五、 定时器 如果针对的是不断运行的代码，不应该使用settimeout，而应该是用setinterval。settimeout每次要重新设置一个定时器。 十六、 尽量减少dom调用 在web开发中，javascript的一个很重要的作用就是对dom进行操作。可是对dom的操作是非常昂贵的，因为这会导致浏览器执行回流 （reflow）操作。我们应该尽可能的减少dom操作。