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 +="

  • "+arry[index]+"
  • ";})$("#name").append(str);如果直接在each里面用append,那性能是很低的。

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

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

       

        


    本文标题:jquery开发中性能优化及注意事项
    文章路径:http://ybzwz.com/article/pcgpge.html