라몽(●'◡'●)디자이너
Home
  • 분류 전체보기 (61)
    • 디자인 (1)
      • 실무 (0)
      • 공부 (0)
    • UIUX분석 (0)
    • 코딩스터디 (60)
      • Markup (0)
      • CSS (12)
      • Javascript (28)
      • jQuery (11)
      • .etc (7)
      • wordpress (2)
      • PHP (0)
Home
  • 분류 전체보기 (61)
    • 디자인 (1)
      • 실무 (0)
      • 공부 (0)
    • UIUX분석 (0)
    • 코딩스터디 (60)
      • Markup (0)
      • CSS (12)
      • Javascript (28)
      • jQuery (11)
      • .etc (7)
      • wordpress (2)
      • PHP (0)
블로그 내 검색

라몽(●'◡'●)디자이너

코딩/웹디자인에 대한 정보를 다룹니다.

  • 코딩스터디/jQuery

    제이쿼리를 효율적으로 작성하는법

    2021. 5. 25.

    by. 라몽(●'◡'●)디자이너

     

    jQuery 효율적 작성

    - 제이쿼리를 사용함에 있어 성능 최적화(performance)에 간단히 알아봅시다.

     

     

     

    DOM을 캐싱(Caching)하라.

    - 한번 탐색한 DOM을 다시 탐색하는 것은 비효율적이다.

    --> DOM Caching : 별도의 변수에 자주 사용하는 값을 저장하는 것

    --> DOM요소를 캐싱하면 코드의 실행 속도가 크게 향상

    --> $(".content .close")보다는 $content.find(".close")가 더 심플하고 성능상 좋음

     

     

    Bad Code

     

    Good Code

     

     

     

     

    명시적인 '$' 를 식별자를 사용하자.

    - jQuery 객체를 참조한 변수 이름 앞에 $를 붙여 jQuery를 사용 가능한 객체임을 식별하도록 혼란을 감소시키자.

     

     

    Bad Code

    var first = $('.first');
    var second = $('.second);
    var value = $first.val();
    

     

    Good Code

    var $first = $('.first');
    var $second = $('.second);
    var value = $first.val();
    

     

     

     

     

    블로그참고

     

    https://webclub.tistory.com/142

     

    반응형

    '코딩스터디 > jQuery' 카테고리의 다른 글

    slideUp, slideDown  (0) 2021.06.01
    문자열관련 메소드  (0) 2021.05.27
    제이쿼리 효과 - Animate  (0) 2021.05.25
    [제이쿼리] this(), index() 예제  (0) 2021.05.22
    제이쿼리 css 클래스 설정 - removeClass, addClass  (0) 2021.05.22

    댓글

    관련글

    • slideUp, slideDown 2021.06.01
    • 문자열관련 메소드 2021.05.27
    • 제이쿼리 효과 - Animate 2021.05.25
    • [제이쿼리] this(), index() 예제 2021.05.22
    맨 위로
전체 글 보기
  • GitHub
Tistory 로그인
Tistory 로그아웃
로그아웃 글쓰기 관리

Today

Total

Powered by ⓒ Kakao Corp.

블로그 이미지
라몽(●'◡'●)디자이너

티스토리툴바