고성능 jQuery 코드 작성

4495 단어 jquery
jQuery Optimization
현재 jQuery는 이미 많은 프로젝트에 등장했지만 많은 학우들이 그의 성능 문제와 코드 품질 문제를 소홀히 했다. 다음은 내가 jQuery의 일부 성능에 대한 학습이다.
선택기
선택기는 jQuery의 핵심 기능으로 같은 DOM 요소를 선택하면 우리는 서로 다른 방법을 사용할 수 있다.그런데 어떤 게 제일 빠른가요?
  • if possible, please use more id selector. id selector is used javascript method getElementById//bad $('#id selector')//good $('#id') caution: don't use tag to decorate id selector
  • Before using class selector, you'd better add tag. that's is used javascript method getElementsByTagName//bad $('.class')//good $('tag.class') caution: class selector is the slower selector, use less
  • if possible, right more detail//bad $('tag.class .class')//good $('.class tag.class')
  • when you select children, you'd better use find. the best way that cache the parent. var parent = $('#parent'); var children = parent.find('children');
  • 가장 느린 선택기: 위조 선택기와 속성 선택기, 새로운 브라우저에querySelector()와querySelectorAll() 방법이 추가되어 이 두 종류의 선택기의 성능을 향상시킬 수 있음
  • 부모 요소에서 하위 요소를 선택하십시오 >-$('child', $parent) 이런 선택은 사실 $parent를 실행합니다.find('child'), 2위
  • $('child', $('parent')) 이런 선택은 $('parent')로 바뀝니다.find('child'), 3위
  • $('#parent child')는 다단계 서브 요소를 선택하기에 적합하며 6위
    • 에 랭크되었다.
  • $('#parent > child')는 위와 같은 선택으로 5위
    • 에 올랐다.
  • $parent.children ('child ') 이 선택은 $로 변환됩니다.sibling(), 4위
  • $parent.find('child') 이런 선택은 getElementById, getElementByName, getElementByTagName 등 자바스크립트 원생 문법으로 바뀌기 때문에 속도가 가장 빠르고 1위
    •   ：ID          ，    。        ，   class

    함수.
  • jQuery의 내부 함수 데이터 ()를 사용하여 상태 저장
  • 가능한 한 on 방법으로 사건을 귀속시킨다. 왜냐하면 모든 귀속 방법은 최종적으로 on으로 실현되기 때문이다
    • 코드 품질
  • 순환 중에 DOM을 직접 조작하지 마라://성능이 나쁘다$.each(myArray, function(i, item) { var newListItem = '
  • '+item+'
    • ';
    $('#contain').append(newListItem);
    });
    //성능이 좋다
    var html = '';
    $.each(myArray, function(i, item) {
    html += '
  • ' + item + '
    • ';
    });
    $('#contain').html(myHtml);
  • 대수 그룹이 순환할 때 캐시 그룹 길이 for(var i = 0,len = array.length;i }
  • 익명 함수를 최대한 적게 사용하고 클래스 봉인 var mo = {init: function () {
        }        
};
  • 캐시 변수는 DOM이 가장 소모하는 성능을 반복하기 때문에 가능한 한 다시 사용하는 원소 캐시height=$('#element').height(); $('#element').css('height', height);//좋은 방법$element=$('#element');height = $element.height(); $element.css('height', height);
  • 전역 변수 $ele = $('#element'),//var var $ele = $('#element')를 사용하는 것이 좋습니다.
  • 간단한 문장은 원생적인javascript를 사용할 수 있다. 왜냐하면 jQuery가 최종적으로 실행하는 것도 원생이기 때문이다
  • 체인식 쓰기를 사용하는데 체인식 쓰기 jQuery를 사용하여 한 걸음 한 걸음 자동으로 캐시하는 결과가 비체인식 쓰기보다 빠르기 때문
  • 가능한 한 $를 적게 사용합니다.each 순환, 원생javascript의 for와while로 진행
  • jQuery 대부분의 방법은 두 가지가 있는데 예를 들면 $().each와 $.each 
    $().each   jQuery   ，jQuery         ，                    
$.each   jQuery   ，        ，
  • 가능한 한 $를 사용하세요.ajax, $를 적게 사용합니다.get(),$.getJSON(),$.post (), 그들도 결국 $를 썼기 때문이다.ajax()

    • 코드 중첩 감소:
    코드 플러그인을 줄이는 것은 코드를 읽고 유지하는 데 모두 유익하다. deffer를 통해 우리는 코드의 플러그인을 줄일 수 있다.
          ***   ：***        
        var request = function() {        
            var defer = $.Deferred();        
            $.ajax({url:'data/test.json'})        
            .done(function(data){        
                defer.resolve(data);        
            });        
            return defer;        
        };     

        $.when(request())
        .then(function(data) {
            console.log(data);
        });        

      ***   ：***        
        var request = function() {        
            return $.ajax({url:'data/test.json'});        
        };

        $.when(request())
        .then(function(data) {
            console.log(data);
        });        

      ***   ：***        
        $.when($.ajax(url:'data/test.json'))
        .then(function(data) {
            console.log(data);
        });

    jQuery 원본을 몇 번 더 읽는 것을 권장합니다. 그 실현 원리를 알아야만 더욱 잘 사용할 수 있습니다
    jQuery Source
    Jquery 플러그인 개발에 대한 지식
    jQuery - jQuery의 $.extend 및 $.fn.extend 작용 및 차이

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage