zoukankan      html  css  js  c++  java
  • jquery前端性能优化(持续添加。。。)

    1.选择器的使用
    (1)$('#id')
      使用id来定位dom元素是性能最高的方法。jQuery底层将直接调用本地方法document.getElementById()。如果id直接可以找到所要对象,一定不要加任何修饰。如果这个方式不能直接找到需要的元素,那么可以考虑调用.find()方法。如下:
     $('#id').find('tag');
     
    (2)$('p'),$('input'),$('div') ...
      使用标签名是第二优化选择,因为jQuery将直接调用本地方法document.getElementsByTagName_r()来定位DOM元素。但是,容易增加代码耦合性,需谨慎。
     
    (3)$('.class')
      对于比较新的浏览器例如,IE9,它支持本地方法document.getElementsByClassName(),而对于老的浏览器,例如,IE8或者更早版本来说,不得不使用DOM搜索方式来实现,自然会对于性能产生比较大的影响。所以大家得选择使用。
      如果要用class,最好在其前面加上tag,并且不要忘了就近的id,如下:
      $('#id tag.class');
     
    (4)$('[attribute=value]')
      对于利用属性来定位DOM元素,本地javascript方法中并没有直接的实现。所以大都都是使用DOM搜索方式来达到效果,很多现代浏览器支持querySelectorAll()方法,但是不同浏览器的性能还是有区别。总体来说,使用这种方式来定位DOM元素,并不是非常理想。所以为了获得更好的优化效果,你需要尽量避免这个对性能有害的使用方式。
     
    (5)$(':hidden')
      和上面使用属性来定位DOM的方式类似,这种伪选择器也同样没有本地js方法来直接实现。而且jQuery需要搜索每一个元素来定位这个选择器,将会对你的应用带来比较大的性能问题。所以大家尽量不要使用,当然,如果你非要使用的话,请先是用find方法定位父元素,然后,再使用这个选择器,这样会帮助你很好的优化性能,如下:
      $("#id").find(":hidden")
     
    2.使用最新版本的jquery。
     新的版本在性能上肯定会进行一些优化,不可能越改越差。需要注意的是如将旧版本移植新版本,一些用法需要修改,花费这样的时间是否值得。
     
    3.使用链式调用,重复的dom对象要进行缓存
        链式调用是jquery的一个特性,看自己代码情况使用,如在不同地方多次使用同一dom对象,要缓存。如下:
        var $dom = $('dom') ;
     
    4.事件代理
      //不好的方法 
      $('#id').find('img').click(function(){
        $(this).toggleClass('class');
      });
      如果#id中有1000个img,就要绑定1000次
     
      //优化方法
      $('#id').on('click','img',function(){
        $(this).toggleClass('class');
      });
     
    5.循环语句中dom操作
    例如append,先把要插入的内容整体拼好字符串,最后再整体append,不要在每个循环中都append。
    字符串拼接中,用数组和join()方法代替字符串相加。
     
    6.$(function(){})代替$(document).ready(function(){})
    7.$.data(elem,key,value)代替$(elem).data(key,value)
    8.从父元素中选择子元素,用.find方法速度最快。
  • 相关阅读:
    199. 二叉树的右视图
    二叉树前、中、后、层次、遍历的非递归法
    奇思妙想
    917. 仅仅反转字母【双指针】
    JVM性能监控与故障处理工具
    Java线程池使用和常用参数(待续)
    MySQL常用知识
    手写常用算法
    LightOj 1170
    逆元总结
  • 原文地址:https://www.cnblogs.com/hitbs228/p/3688863.html
Copyright © 2011-2022 走看看