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)方法,进行转换。

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

    另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


    本文标题:jquery开发中性能优化及注意事项-创新互联
    网页路径:http://azwzsj.com/article/ghidh.html