jquery开发中性能优化及注意事项

jquery开发中性能优化及注意事项

    平常的开发中，可能由于时间问题，没来及进行代码性能的优化及一些注意事项，导致页面加载很慢，或者是后台获不到值等等一系列的问题，下面例出些优化方案及注意事项。

    第一：对选择器的执行速度进行优化：1、优先选择使用ID与标记选择器，在jquery中，访问DOM元素的最快捷方式是通过元素ID号，其次是通过元素的标记；不过要注意一点的是，如果页面中属性元素特别多，那尽量少用的id，因为容易造成id重名，这个时候可以id和属性过滤选择器并用。

    第二：开发中尽量使用jquery对象缓存：就是在使用jquery对象时，先尽量使用变量保存对象名，然后，通过变量进行相应的方法操作。

   第三：给选择器一个上下文：在jquery中，DOM元素的查找可以通过$(element)方法实现，但有另外一种方法可以通过$(expression,[context])方法，在指定的范围中查找某个DOM元素。

   第四：在开发中，有写页面是自动生成的，页面中有些id的名字中包含特殊字符，这个时候就要用转义符对有些特殊字符进行转义，例如："#","("。其次，就是选择器中含有空格符与不含空格符的区别，当选择器含有空格符，例如：$(".emple :hidden")这个意思就查询类为emple中的隐藏元素，而$(".emple:hidden")就是查询隐藏元素中类为emple的元素。

   第五：开发中，可以用data方法对数据进行缓存，缓存数据无论是在前端页面开发，还是在后台服务器脚本编写，多有十分重要的作用。

   第六：开发中，难免会引入多个js，这个时候，可能会有些冲突，"$"是jquery的自身的快捷符，而其他js库中也含有"$"符，这个时候，就需要jQuery.noConflict(),但是如果jquery引入的位置在其他js的前面，这句话就不需要了，相反就需要引入。

  第七：开发中，有时候需要查找一个被众多元素包含的元素，这个时候大家一致的做法就是直接用find方法查找所需要的元素，但是其性能特别低；但考虑性能的话，这个时候应该想到，使用对象缓存，就是把最外层的元素保存起来，再查找更近一层的元素进行保存，最后，在最近接近外层的元素，使用find方法，使用这种方法，可以减少选择器的性能开销。

  第八：开发中，尽量减少对DOM元素进行直接操作，我们知道，DOM元素操作的原理是，现在内存中创建DOM结构，如果直接对DOM进行操作，那么其性能是很低的。例如：$.each(arry,function(index){str +="<li>"+arry[index]+"</li>";})$("#name").append(str);如果直接在each里面用append，那性能是很低的。

  第九：开发中，正确区分DOM对象和Jquery对象,jquery中获得元素的值是用val()，而DOM中用的是val就可以了，如果dom要转换成jquery对象，可以用$（Dom对象）进行转换；如果jquery对象需要转换成DOM对象，可以用[index]或者get(index)方法，进行转换。

    程序开发中，尤其是初学者来说，在使用过程中不可避免会出现语法或者操作上的不当之处，希望这篇文章能帮到有些开发者，大家在开发中共同进步。