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

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

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

    第一：对选择器的执行速度进行优化：一、优先选择使用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)方法，进行转换。

    程序开发中，尤为是初学者来讲，在使用过程当中不可避免会出现语法或者操做上的不当之处，但愿这篇文章能帮到有些开发者，你们在开发中共同进步。