解读30个提高Web程序执行效率的好经验
其实微博是个好东西，关注一些技术博主之后，你不用再逛好多论坛了，因为一些很好的文章微博会告诉你，最近看到酷勤网推荐的一篇文章《30个提高Web程序执行效率的好经验》，文章写得不错，提到一些经验都比较实用，是我们每一个做前端开发的人员都必须知道的。本人逐条解读一下，个人意见可能比较浅薄，看看大家对各个经验点怎么看了。
1、尽量避免使用DOM。当需要反复使用DOM时，先把对DOM的引用存到JavaScript 本地变量里再使用。创建页面元素的时候尽量不要使用DOM的
document.createElement/appendChild()方法来创建，换用设置innerHTML的方法来替换。
jiuye：
过多使用DOM会增加DOM树的规模，进而影响文档遍历以及查找元素的性能。如果使用DOM元素的使用，建议使用如下方法进行：
1var obj = document.getElementById("myId");
2 obj.XXX...;
2、eval()有问题，new Fuction()构造函数也是，尽量避免使用它们。
jiuye：
使用eval()或new Function()构造函数作用于字符串表示的源码时，js引擎都需要将源码转换成可执行代码。这样的操作是很消耗资源的要比简单的函数调用慢100倍以上。
同时，eval()函数效率特别低，由于事先无法知晓传给eval的字符串中的内容，eval 在其上下文中解释要处理的代码，也就是说编译器无法优化上下文，因此只能有浏览器在运行时解释代码。这对性能影响很大。new Function()构造函数比eval()略好，因为使用此代码不会影响周围代码，但是他的速度也快不到哪里去。
可以通过重写eval()来替换直接使用eval()，通过创建匿名函数的方法来替换new Function()。
3、拒绝使用with语句。它会导致当你引用这个变量时去额外的搜索这样的一个命名空间，with里的代码在编译时期是完全未知的。
jiuye：
with的效率很低，with结构又创建了一个作用域，以便使用变量时脚本引擎搜索。这本身只轻微的影响性能。https://www.docsj.com/doc/9910120386.html,但严重的是编译时不知道此作用域内容，因此编译器无法像对其他作用域（如函数产生的作用域）那样对之优化。
可以使用变量引用对象，然后使用变量访问对象属性。但是此种方法要求属性非文字类型。先来看一个with的使用：
1with( https://www.docsj.com/doc/9910120386.html, ) {
2 name = 'John';
3 sex = 'male';
4 }
再看看使用变量引用对象的实例：
1var obj = https://www.docsj.com/doc/9910120386.html,r;
2 https://www.docsj.com/doc/9910120386.html, = 'John';
3 obj.sex = 'male';
4、使用for()循环替代for…in循环。因为for…in循环在开始循环之前需要Script引擎创建一个含有所有可循环属性的List，需要多检查一次。
jiuye：
for...in循环需要脚本引擎创建所有可枚举的属性列表，然后检查是否存在重复。
5、把try-catch语句放在循环外面，不要放在循环里面，因为异常是很少发生的，放在外面避免每次都要执行它们。
jiuye：
其实不仅仅是循环，因为try-catch-finally结构比较特殊。和其他语法结构不同，它在当前作用域中创建新变量。每当catch执行时，就会将捕获到的exception对象赋给一个变量。这个变量不属于任何脚本。它在catch语句开始时被创建，在结束时被销毁。由于此函数比较特殊，且是在运行时动态创建动态销毁，有些浏览器对其的处理并不高效。把catch语句放在关键循环中将极大影响性能。如果可能，应在js中不频繁被调用的地方进行异常处理，或通过检查某种动作是否被支持来避免使用。
6、不要过多使用全局变量，全局变量的生命周期贯穿整个js的生命周期，而本地变量的存在范围随着本地命名空间的销毁而消失。当在函数或其它地方引用一个全局变量时，脚本引擎需要搜索整个全局命名空间。
7、fullName += 'John'; fullName += 'Holdings';执行速度快于fullName += 'John' + 'Holdings'。
jiuye：
这个不知道该怎么去解释一下，至少我本人在js编码时不会写出这样的语句：fullName += 'John' + 'Holdings'。
8、如果你需要把多个字符串连接起来，最好是把他们做成一个数组，然后调用join()方法实现这个操作。https://www.docsj.com/doc/9910120386.html,这种方式在生成HTML片段时尤其有效。
jiuye：
这个主意赞的，以前没注意到！！！
9、对于简单的任务，最好使用基本操作方式来实现，而不是使用函数调用实现。例如val1 < val2 ? val1 : val2;执行速度快于Math.min(val1, val2);，类似的，
myArr.push(newEle);慢于myArr[myArr.length] = newEle。
jiuye：
总之一句话，能用js简单实现的东东就别用函数了，调用函数处理时性能肯定要比直接处理来的慢一点的。
10、将函数的引用作为参数传递到setTimeout()和setInterval()里优于将函数名作为字符串参数传递（硬编码）。例如，setTimeout(“someFunc()”, 1000)执行效率慢于setTimeout(someFunc, 1000)。
jiuye：
setTimeout()和setInterval()方法类似于eval()。如果传进参数是字符串，则在一段时间之后，会和eval()一样执行字符串值，当然其低效率也和eval()一样低。但这些方法也可以接受函数作为第一个参数。在一段时间后将调用此函数，但此函数可在编译时被解释和优化，也就是说会有更好的性能。
使用字符串作为参数：
1 setInterval('myFunction()',1000);
2 setTimeout('alert(111);',500);
再来看看下面这个做法是不是更舒服点呢？
1 setInterval(myFunction,1000);
2 setTimeout(function() {
3 alert(111);
4 },500);
11、当进行遍历操作时避免使用DOM操作。通过像getElementsByTagName()这种方法得到的DOM元素队列都是动态的；有可能在你还没有对它遍历完成时，它已经被改变。这有可能导致死循环。
12、当你对对象的成员（属性或方法）进行反复操作时，先存储对它们的引用。例如var getTags = document.getElementsByTagName; getTags(…div?)。
jiuye：
这里其实说的和1是一类问题，不要频繁操作DOM。
13、在任何的代码段里，在局部变量范围外存放一个这个局部变量的引用。例如：
1function foo(arr) {
2var a =‘something’;
3//变量a对于下面的代码就是范围外变量,这个变量的引用在很多情况下会有用处。
4for (var i = 0, j = a, loopLen = arr.length; i < loopLen; i++) {
5//do something
6 }
7 }
14、for(var i=0; i < someArra y.length; i++) {…}的执行效率慢于for (var i=0, loopLen=someArray.length; i 15、在HTTP头信息里加入缓存控制过期和最大存活时间标记。 16、优化CSS。要使用方式，而不要使用@import方式。 jiuye： 关于前端页面CSS的优化我前面的文章有介绍过，这里不再赘述。同样针对js来说也是需要去做优化的。 17、使用CSS技术来优化图片资源。 jiuye： 这一点对移动网站的开发来说尤为重要，图片的处理是移动网站性能提升的一个很大的制约点。目前有所为的CSS“雪碧”技术、响应式图片显示等多种技术可以来做这个事情。 18、用GZip方式压缩 .js 和 .css 文件。如果你使用的是Apache，在 .htaccess 里设置压缩方式，你的HTML, XML 和JSON 也同时会被压缩。 19、使用JavaScript压缩工具。除了使用YUI和JSMin外，你还可以试一试Google Closure。 20、优化每个页面上的各种资源，把它们拆分到各个子域上，这么它们就能够并行下载。 jiuye： 可以把页面中引用的js文件、CSS文件、静态图片资源都统统扔到CDN上面去。 21、将CSS样式表放在页面的最顶端，这样能方便包括IE在内的浏览器进行解析。 jiuye： 同时提醒一下，js的引用放到页面底部