JS性能优化技巧-优快云博客

前两天看到了javascript事件，里面提到了性能的问题，结合以前看到的一些知识，总结一下我的认知。提升javascript性能的主要思想就是—— 减少事件处理程序的数量，进而减少内存的占用。牢牢记住这一点就够了，所有的优化方案都是围绕这一点展开的。下面我结合阮一峰先生翻译的 jquery性能优化建议来一一说明：

用对的选择器。在jquery中id选择器和元素标签选择器最快，class选择器较慢，伪类选择器最慢。因为javascript中没有对应的原生的选择伪类的方法，所以速度最慢。那么class选择器为什么比id选择器要慢呢？因为class可能多个元素公用，而id在页面中只会有一个元素在用，所以id选择器选择的元素更少，占用的内存也就更少，所以速度会更快。理解父选择器和子选择器的道理也是一样，正确的利用父选择器来最快的找到子选择器，需要遍历的元素就更少，速度也就更快。同理选择最短的作用链，都是为了最小化事件处理程序的数量。
做好缓存。如果一个元素在后面会反复用到，那么最好把它保存在一个变量中，而不是每次用到的时候又重新选择，这一点在循环语句中对性能的影响尤其明显。这么做的根本目的也是减少内存的占用。同理jquery性能优化中建议采用链式写法，也是因为jquery会自动缓存链式操作的每一步。还同理尽量少生成对象，jquery每次使用选择器都会生成一个对象，很占用内存。
事件委托。事件委托是建立在冒泡机制之上的，我们可以把这想象成潜水，你不必冒着高压潜到水底去找到那个小泡泡，可以在水面上控制它浮上来的大泡泡，这样可以明显的提高效率，擒贼先擒王也是这个道理，挟天子以令诸侯亦是这个道理。关于事件委托，前两天在阿里巴巴ued看到了一篇好文，jquery事件编写进阶，墙裂建议围观。
少改动DOM结构。对DOM的操作是javascript用的最多的地方了，也是最影响性能的地方。DOM操作选择元素过多会占用大量的内存，自然会影响到处理的速度。关于jquery DOM操作优化建议请看阮一峰先生的译文，我就不粘贴过来了。
在页面卸载前移除所有的时间处理程序,Last but not least.这是译文中没有提到的。内存中那些过时不用的空事件处理程序也是造成应用程序内存与性能的主要问题。俗话说“占着XX不XX”，就是这种行为。在写javascript程序是，如果你知道某个元素即将被移除，那么最好手工移除事件处理程序，最简单的操作就是将事件处理程序设为null。书上提到了一个“凡是”：凡是通过onload事件处理程序添加的东西，最终都要通过onunload时间处理程序将他们移除。（凡是资本主义国家，最终都要灭亡——XXX好像说过：) ）。

译文中第12条 使用Pub/Sub模式管理事件没有套进来，我还不是很理解，但我看到优秀的javascript程序确实是这样做的，等到我对javascript的理解更深入的时候再来解释吧。另外，css的可扩展性和重用性的思想也类似，要思考怎么才能够用最少的代码产生需要的效果，而且方便以后扩展和重用。关于这方面我的认知还比较浅薄和零碎，不足以归纳出来，等以后有了更深入的认识之后再写一篇相关的文章。道理大家都是知道的，但能不能落实到执行上面那又是另外一回事了，需要对自己要求更严格，对代码的质量要求更高才行，共勉。

转载于:https://www.cnblogs.com/HUSTecho/archive/2013/03/27/3199539.html