찾다
웹 프론트엔드JS 튜토리얼jQuery_jquery의 성능을 향상하는 데 도움이 되는 7가지 작업을 수행하세요.

1. 루프 외부에 추가

DOM과 관련된 모든 것에는 대가가 있습니다. DOM에 많은 요소를 추가하는 경우 여러 번 추가하는 대신 한 번에 모두 추가하는 것이 좋습니다. 루프에 요소를 추가할 때 일반적인 문제가 발생합니다.

코드 복사 코드는 다음과 같습니다.

$.each( myArray, function( i , item ) {
var newListItem = "
  • " 항목 "
  • ";
    $( "#ballers" ).append( newListItem );
    });

    일반적인 기술은 문서 조각을 사용하는 것입니다. 루프가 반복될 때마다 DOM 요소 대신 조각에 요소를 추가합니다. 루프가 끝나면 조각을 DOM 요소에 추가합니다.

    코드 복사 코드는 다음과 같습니다.

    var frag = document.createDocumentFragment();

    $.each( myArray, function( i, item ) {

    var newListItem = document.createElement( "li" );
    var itemText = document.createTextNode( item );

    newListItem.appendChild( itemText );

    frag.appendChild( newListItem );

    });

    $( "#ballers" )[ 0 ].appendChild( 조각 );

    또 다른 간단한 방법은 루프가 반복될 때마다 문자열을 지속적으로 작성하는 것입니다. 루프가 끝나면 DOM 요소의 HTML을 이 문자열로 설정합니다.

    코드 복사 코드는 다음과 같습니다.

    var myHtml = "";

    $.each( myArray, function( i, item ) {

    myHtml = "

  • " 항목 "
  • ";

    });

    $( "#ballers" ).html( myHtml );

    물론 시도해 볼 수 있는 다른 기술도 있습니다. jsperf라는 사이트는 이러한 속성을 테스트하기 위한 좋은 출구를 제공합니다. 이 사이트를 통해 각 기술을 벤치마킹하고 크로스 플랫폼 성능 결과를 시각화할 수 있습니다.

    2. 루프 중 캐시 길이

    for 루프에서는 미리 캐시해야 할 때마다 배열의 길이 속성에 액세스하지 마세요.

    코드 복사 코드는 다음과 같습니다.

    var myLength = myArray.length;

    for ( var i = 0; i

    // 작업 수행

    }

    3. 요소를 분리하여 작업하세요

    DOM 조작은 느리기 때문에 가능한 한 정렬을 적게 하는 것이 좋습니다. jQuery는 이 문제를 해결하는 데 도움이 되도록 버전 1.4에서 detach()라는 메서드를 도입했습니다. 이 메서드를 사용하면 DOM에서 요소를 작업할 때 요소를 분리할 수 있습니다.

    코드 복사 코드는 다음과 같습니다.

    var $table = $( "#myTable " );
    var $parent = $table.parent();

    $table.detach();

    // ... 테이블에 수많은 행을 추가하세요

    $parent.append( $table );

    4. 부재한 요소에 대해 조치를 취하지 마세요

    빈 선택기에서 많은 코드를 실행하려는 경우 jQuery는 힌트를 제공하지 않습니다. 오류가 발생하지 않은 것처럼 계속 실행됩니다. 선택기에 포함된 요소 수를 확인하는 것은 사용자의 몫입니다.

    코드 복사 코드는 다음과 같습니다.

    // 나쁨: 이전에 세 가지 기능을 실행합니다.
    // 선택 항목에 아무것도 없다는 것을 깨닫습니다
    $( "#nosuchthing" ).slideUp();

    // 더 나은 방법:
    var $mySelection = $( "#nosuchthing" );

    if ( $mySelection.length ) {

    $mySelection.slideUp();

    }

    // 최고: doOnce 플러그인을 추가하세요.
    jQuery.fn.doOnce = function( func ) {

    this.length && func.apply( this );

    이것을 돌려주세요;

    }

    $( "li.cartitems" ).doOnce(function() {

    // 아약스로 만들어 보세요! o/

    });

    이 가이드는 선택기에 요소가 포함되어 있지 않을 때 많은 오버헤드가 필요한 jQuery UI 위젯에 특히 유용합니다.

    5. 최적화 선택기

    많은 브라우저가 document.querySelectorAll() 메서드를 구현하고 jQuery가 선택기의 부담을 브라우저로 이전하기 때문에 선택기 최적화는 과거만큼 중요하지 않습니다. 하지만 여전히 명심해야 할 몇 가지 팁이 있습니다.

    ID 기반 선택자

    항상 ID로 선택기를 시작하는 것이 가장 좋습니다.

    코드 복사 코드는 다음과 같습니다.

    //빠름:
    $( "#container div.robotarm" );

    // 초고속:
    $( "#container" ).find( "div.robotarm" );

    .find() 메서드를 사용하면 시끄러운 선택기 엔진을 거치지 않고 첫 번째 선택기가 처리되므로 더 빠릅니다. ID 전용 선택기는 이미 document.getElementById() 메서드를 사용하고 있습니다. 네이티브이기 때문에 처리가 빠릅니다. 브라우저.

    구체성

    선택기의 오른쪽 부분을 최대한 자세히 설명하고, 왼쪽 부분은 반대로 설명합니다.

    코드 복사 코드는 다음과 같습니다.

    // 최적화되지 않음:
    $( "div.data .gonzalez" );

    // 최적화됨:
    $( ".data td.gonzalez" );

    선택기의 가장 오른쪽에 있는 선택기를 설명하려면 tag.class 형식을 사용하고, 왼쪽에는 태그 또는 .class만 사용해보세요.

    특정성 남용 방지

    코드 복사 코드는 다음과 같습니다.

    $( ".data table.attendees td .gonzalez" );

    // 더 나은 방법: 가능하면 중간을 삭제하세요.
    $( ".data td.gonzalez" );

    "DOM"을 사용하면 선택기 엔진이 요소를 검색할 때 많은 반복을 수행할 필요가 없기 때문에 항상 선택기 성능을 향상시키는 데 도움이 됩니다.

    범용 선택기 사용을 피하세요

    선택기가 정의되지 않은 범위 내에서 명시적으로 또는 암시적으로 일치하는 경우 성능에 큰 영향을 미칩니다.

    코드 복사 코드는 다음과 같습니다.

    $( ".buttons > *" ); / / 매우 비쌉니다.
    $( ".buttons" ).children(); // 훨씬 좋습니다.

    $( ".category :radio" ); 🎜> $ ( ".category *:radio" ); // 이제 명시적입니다.
    $( ".category input:radio" ) // 훨씬 더 좋습니다.
    다양한 CSS를 변경하려면 스타일시트를 사용하세요. 요소

    .css() 메서드를 사용하여 20개 이상의 요소에 대한 CSS를 변경하는 경우 대안으로 페이지에 스타일 태그를 추가하는 것이 좋습니다. 그렇게 하면 속도가 거의 60% 향상될 수 있습니다.

    코드 복사 코드는 다음과 같습니다.
    // 최대 20개 요소까지 가능합니다. 그 이후에는 천천히 :
    $( "a.swedberg" ).css( "color", "#0769ad" );

    // 훨씬 빠릅니다:
    $( "")
    .appendTo( "head" );
    jQuery를 블랙박스로 취급하지 마세요

    jQuery 소스코드를 문서처럼 즐겨찾기(http://bit.ly/jqsource)에 저장해 두고 자주 참고할 수 있습니다.

    성명
    본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
    브라우저 너머 : 실제 세계의 JavaScript브라우저 너머 : 실제 세계의 JavaScriptApr 12, 2025 am 12:06 AM

    실제 세계에서 JavaScript의 응용 프로그램에는 서버 측 프로그래밍, 모바일 애플리케이션 개발 및 사물 인터넷 제어가 포함됩니다. 1. 서버 측 프로그래밍은 Node.js를 통해 실현되며 동시 요청 처리에 적합합니다. 2. 모바일 애플리케이션 개발은 재교육을 통해 수행되며 크로스 플랫폼 배포를 지원합니다. 3. Johnny-Five 라이브러리를 통한 IoT 장치 제어에 사용되며 하드웨어 상호 작용에 적합합니다.

    Next.js (백엔드 통합)로 멀티 테넌트 SAAS 애플리케이션 구축Next.js (백엔드 통합)로 멀티 테넌트 SAAS 애플리케이션 구축Apr 11, 2025 am 08:23 AM

    일상적인 기술 도구를 사용하여 기능적 다중 테넌트 SaaS 응용 프로그램 (Edtech 앱)을 구축했으며 동일한 작업을 수행 할 수 있습니다. 먼저, 다중 테넌트 SaaS 응용 프로그램은 무엇입니까? 멀티 테넌트 SAAS 응용 프로그램은 노래에서 여러 고객에게 서비스를 제공 할 수 있습니다.

    Next.js (Frontend Integration)를 사용하여 멀티 테넌트 SaaS 응용 프로그램을 구축하는 방법Next.js (Frontend Integration)를 사용하여 멀티 테넌트 SaaS 응용 프로그램을 구축하는 방법Apr 11, 2025 am 08:22 AM

    이 기사에서는 Contrim에 의해 확보 된 백엔드와의 프론트 엔드 통합을 보여 주며 Next.js를 사용하여 기능적인 Edtech SaaS 응용 프로그램을 구축합니다. Frontend는 UI 가시성을 제어하기 위해 사용자 권한을 가져오고 API가 역할 기반을 준수하도록합니다.

    JavaScript : 웹 언어의 다양성 탐색JavaScript : 웹 언어의 다양성 탐색Apr 11, 2025 am 12:01 AM

    JavaScript는 현대 웹 개발의 핵심 언어이며 다양성과 유연성에 널리 사용됩니다. 1) 프론트 엔드 개발 : DOM 운영 및 최신 프레임 워크 (예 : React, Vue.js, Angular)를 통해 동적 웹 페이지 및 단일 페이지 응용 프로그램을 구축합니다. 2) 서버 측 개발 : Node.js는 비 차단 I/O 모델을 사용하여 높은 동시성 및 실시간 응용 프로그램을 처리합니다. 3) 모바일 및 데스크탑 애플리케이션 개발 : 크로스 플랫폼 개발은 개발 효율을 향상시키기 위해 반응 및 전자를 통해 실현됩니다.

    JavaScript의 진화 : 현재 동향과 미래 전망JavaScript의 진화 : 현재 동향과 미래 전망Apr 10, 2025 am 09:33 AM

    JavaScript의 최신 트렌드에는 Typescript의 Rise, 현대 프레임 워크 및 라이브러리의 인기 및 WebAssembly의 적용이 포함됩니다. 향후 전망은보다 강력한 유형 시스템, 서버 측 JavaScript 개발, 인공 지능 및 기계 학습의 확장, IoT 및 Edge 컴퓨팅의 잠재력을 포함합니다.

    Demystifying JavaScript : 그것이하는 일과 중요한 이유Demystifying JavaScript : 그것이하는 일과 중요한 이유Apr 09, 2025 am 12:07 AM

    JavaScript는 현대 웹 개발의 초석이며 주요 기능에는 이벤트 중심 프로그래밍, 동적 컨텐츠 생성 및 비동기 프로그래밍이 포함됩니다. 1) 이벤트 중심 프로그래밍을 사용하면 사용자 작업에 따라 웹 페이지가 동적으로 변경 될 수 있습니다. 2) 동적 컨텐츠 생성을 사용하면 조건에 따라 페이지 컨텐츠를 조정할 수 있습니다. 3) 비동기 프로그래밍은 사용자 인터페이스가 차단되지 않도록합니다. JavaScript는 웹 상호 작용, 단일 페이지 응용 프로그램 및 서버 측 개발에 널리 사용되며 사용자 경험 및 크로스 플랫폼 개발의 유연성을 크게 향상시킵니다.

    Python 또는 JavaScript가 더 좋습니까?Python 또는 JavaScript가 더 좋습니까?Apr 06, 2025 am 12:14 AM

    Python은 데이터 과학 및 기계 학습에 더 적합한 반면 JavaScript는 프론트 엔드 및 풀 스택 개발에 더 적합합니다. 1. Python은 간결한 구문 및 풍부한 라이브러리 생태계로 유명하며 데이터 분석 및 웹 개발에 적합합니다. 2. JavaScript는 프론트 엔드 개발의 핵심입니다. Node.js는 서버 측 프로그래밍을 지원하며 풀 스택 개발에 적합합니다.

    JavaScript를 어떻게 설치합니까?JavaScript를 어떻게 설치합니까?Apr 05, 2025 am 12:16 AM

    JavaScript는 이미 최신 브라우저에 내장되어 있기 때문에 설치가 필요하지 않습니다. 시작하려면 텍스트 편집기와 브라우저 만 있으면됩니다. 1) 브라우저 환경에서 태그를 통해 HTML 파일을 포함하여 실행하십시오. 2) Node.js 환경에서 Node.js를 다운로드하고 설치 한 후 명령 줄을 통해 JavaScript 파일을 실행하십시오.

    See all articles

    핫 AI 도구

    Undresser.AI Undress

    Undresser.AI Undress

    사실적인 누드 사진을 만들기 위한 AI 기반 앱

    AI Clothes Remover

    AI Clothes Remover

    사진에서 옷을 제거하는 온라인 AI 도구입니다.

    Undress AI Tool

    Undress AI Tool

    무료로 이미지를 벗다

    Clothoff.io

    Clothoff.io

    AI 옷 제거제

    AI Hentai Generator

    AI Hentai Generator

    AI Hentai를 무료로 생성하십시오.

    인기 기사

    R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)
    3 몇 주 전By尊渡假赌尊渡假赌尊渡假赌
    R.E.P.O. 최고의 그래픽 설정
    3 몇 주 전By尊渡假赌尊渡假赌尊渡假赌
    R.E.P.O. 아무도들을 수없는 경우 오디오를 수정하는 방법
    3 몇 주 전By尊渡假赌尊渡假赌尊渡假赌
    WWE 2K25 : Myrise에서 모든 것을 잠금 해제하는 방법
    4 몇 주 전By尊渡假赌尊渡假赌尊渡假赌

    뜨거운 도구

    SublimeText3 Mac 버전

    SublimeText3 Mac 버전

    신 수준의 코드 편집 소프트웨어(SublimeText3)

    DVWA

    DVWA

    DVWA(Damn Vulnerable Web App)는 매우 취약한 PHP/MySQL 웹 애플리케이션입니다. 주요 목표는 보안 전문가가 법적 환경에서 자신의 기술과 도구를 테스트하고, 웹 개발자가 웹 응용 프로그램 보안 프로세스를 더 잘 이해할 수 있도록 돕고, 교사/학생이 교실 환경 웹 응용 프로그램에서 가르치고 배울 수 있도록 돕는 것입니다. 보안. DVWA의 목표는 다양한 난이도의 간단하고 간단한 인터페이스를 통해 가장 일반적인 웹 취약점 중 일부를 연습하는 것입니다. 이 소프트웨어는

    SublimeText3 중국어 버전

    SublimeText3 중국어 버전

    중국어 버전, 사용하기 매우 쉽습니다.

    mPDF

    mPDF

    mPDF는 UTF-8로 인코딩된 HTML에서 PDF 파일을 생성할 수 있는 PHP 라이브러리입니다. 원저자인 Ian Back은 자신의 웹 사이트에서 "즉시" PDF 파일을 출력하고 다양한 언어를 처리하기 위해 mPDF를 작성했습니다. HTML2FPDF와 같은 원본 스크립트보다 유니코드 글꼴을 사용할 때 속도가 느리고 더 큰 파일을 생성하지만 CSS 스타일 등을 지원하고 많은 개선 사항이 있습니다. RTL(아랍어, 히브리어), CJK(중국어, 일본어, 한국어)를 포함한 거의 모든 언어를 지원합니다. 중첩된 블록 수준 요소(예: P, DIV)를 지원합니다.

    에디트플러스 중국어 크랙 버전

    에디트플러스 중국어 크랙 버전

    작은 크기, 구문 강조, 코드 프롬프트 기능을 지원하지 않음