jQuery DOM 작업 최적화

기사는 최초로 나의 개인 사이트에 발표되었다How to optimize jQuery DOM manipulation
JavaScript를 사용하는 경우 jQuery는 자주 사용하는 라이브러리일 가능성이 높습니다.jQuery는 매우 유용하다. 이것은 많은 기본적인 자바스크립트가 실현하기 어려운 기능을 제공한다.그것은 통상적으로 클라이언트에서 운행하기 때문에 많은 사람들이 코드 최적화에 그다지 주의하지 않는다.이것이 바로 많은 사이트들이 마운트가 느리고 사용자 인터페이스가 둔하거나 응답이 지연되는 이유이다.따라서 본고에서 저는 동적 추가된 요소를 사용하여 페이지를 나타낼 때 많은 시간을 절약할 수 있는 최적화 기술을 보여 드리겠습니다.

Dell 시나리오: 페이지를 다시 로드하지 않고 제품을 로드합니다.

이 기술이 유용할 수 있는 흔한 용례를 봅시다.당신은 온라인 상점을 개발하는 개발자입니다.인프라 시설의 성격과 고객의 수요 때문에 React는 옵션이 아니기 때문에 당신은 더욱 전통적인 방법으로 되돌아갈 수 있습니다.Play(Java/Scala), CodeIgniter(PHP) 또는 템플릿 엔진을 사용하여 페이지 DOM의 프레임워크를 보여주는 서버 응용 프로그램만 있습니다.
현재 디렉터리 내비게이션 기능의 일부로서, 100개의 항목을 일괄으로 하고, 페이지 밑에 페이지 메뉴를 표시할 수 있습니다.다음 페이지를 클릭하면 새 페이지로 이동하지 않고 AJAX 호출을 사용하여 새 항목을 가져오고 DOM 작업을 수행하여 표시합니다.단계는 다음과 같습니다.

AJAX 호출/items?페이지 =

JSON

으로 응답 수신

페이지에서 기존 항목 지우기

신규

로 DOM 재구성

첫 번째 구현(오류): 각각 원소 보이기

코드의 일부분을 보여 주세요.이 함수는 제품의 HTML을 만들고 페이지에 표시하도록 DOM을 변경하는 데 사용됩니다(이미지, 이름 및 가격).

function makeItemOnPage(item, itemNo) {
    // we create a container for the current item
    var itemContainer = '<div class="col-sm-2 itemContainer" id="item-' + itemNo + '" style="padding: 10px"></div>';
    $("#products").append(itemContainer);

    // we create a div for the product imate and display it
    var productImage = '<div class="productImage" id="productImage-' + itemNo + '"></div>';
    var currentItemContainer = $("#products").find("#item-" + itemNo);
    currentItemContainer.append(productImage);
    $("#productImage-"+itemNo).append('<img src="' + item.image + '" />');

    // We append the product name and the price
    currentItemContainer.append('</div><div class="productDetails"><strong>' + item.name + '</strong> - ' + item.price + '$');

    // We create an Add To Cart button
    currentItemContainer.append('<button type="button" class="btn btn-success btn-block"><i class="fa fa-bell"></i> Add to cart</button>')
}

총 1000개의 항목을 렌더링하고 필요한 시간을 확인합니다.나는 최적화가 가져오는 총 수익을 더욱 잘 나타내기 위해 프로젝트의 수량을 과장했다.브라우저의 성능 분석기를 사용하면 얼마나 오래 걸리는지 쉽게 볼 수 있다.그림에서 볼 수 있듯이 항목이 페이지에 나타나는 데 약 1.7초가 걸린다.이것은 많지 않을 수도 있지만 (우리는 1000개의 항목을 가지고 있지만) 이 예의 HTML은 매우 간단하고 내부 대상이 많지 않다.디자인이 훨씬 복잡한 페이지는 모든 프로젝트에 더욱 복잡한 HTML 코드를 쉽게 생성할 수 있다.그럼에도 불구하고 사용자 체험의 측면에서 볼 때 사용자는 2초 가까이 기다려야 프로젝트를 표시할 수 있기 때문에 좋지 않다.나는 우리가 많은 것을 최적화시킬 수 있다고 생각한다.

우리가 본 첫 번째 일은 페이지의 요소와 많은 부록을 대량으로 검색한 것이다.우리는 items 용기를 검색해서 현재 item 용기에div를 추가하고, 그것을 검색하고, 이미지를 추가하고, 이름과 가격을 추가한 다음, 단추를 추가합니다.Performance Inspector에서 분석 시간을 보면 이러한 첨부 파일은 거의 전체 시간과 같은 상당한 시간이 소요됩니다.따라서 전체 항목의 HTML을 문자열로 만들고 그것을 모두 추가해 봅시다.
코드는 다음과 같습니다.

function makeItemOnPage(item, itemNo) {
    // we create a container for the current item
    var productImageHtml = getProductImageHtml(item, itemNo);
    var productDetailsHtml = getProductDetailsHtml(item, itemNo);
    var addToCart = getAddToCartButton(item, itemNo);
    var itemContainer = '<div class="col-sm-2 itemContainer" id="item-' + itemNo + '" style="padding: 10px">';
    itemContainer += productImageHtml;
    itemContainer += productDetailsHtml;
    itemContainer += addToCart;
    itemContainer += "</div>";
    $("#products").append(itemContainer);
}

function getProductImageHtml(item, itemNo) {
    return '<div class="productImage" id="productImage-' + itemNo + '"><img src="' + item.image + '" /></div>';
}

function getProductDetailsHtml(item, itemNo) {
    return '<div class="productDetails"><strong>' + item.name + '</strong> - ' + item.price + '$</div>';
}

function getAddToCartButton(item, itemNo) {
    return '<button type="button" class="btn btn-success btn-block"><i class="fa fa-bell"></i> Add to cart</button>';
}

이제 다시 기준 테스트를 진행하면 렌더링 시간이 줄어드는 것을 똑똑히 볼 수 있다.지금은 1초도 안 돼서, 대략 전번의 3분의 1 정도이다.전화를 거는 횟수가 늘었기 때문이다.append () 가 항목마다 하나씩 감소했습니다.하지만 우리는 더 잘할 수 있다.

원하는 HTML 작성 및 첨부

지금이 마지막 최적화야.모든 제품 보기를 구축하고 추가할 필요가 없습니다. 전체 제품 목록을 구축하고 생성된 HTML을 용기에 한꺼번에 추가할 수 있습니다.이 방법으로 append () 를 한 번만 호출하면 UI 요소만 다시 그립니다.코드는 거의 같지만, 마지막에 append를 호출하는 것이 아니라 결과 문자열만 되돌려줍니다.

function makeItems() {
        $("#products").empty();
        var items = getItems();
        var itemNo = 0;
        var items = "";
        for (itemNo = 0; itemNo< items.length; itemNo++) {
            items += makeItemOnPage(items[itemNo], itemNo);
        }

        $("#products").append(items);
    }

function makeItemOnPage(item, itemNo) {
    // we create a container for the current item
    var productImageHtml = getProductImageHtml(item, itemNo);
    var productDetailsHtml = getProductDetailsHtml(item, itemNo);
    var addToCart = getAddToCartButton(item, itemNo);
    var itemContainer = '<div class="col-sm-2 itemContainer" id="item-' + itemNo + '" style="padding: 10px">';
    itemContainer += productImageHtml;
    itemContainer += productDetailsHtml;
    itemContainer += addToCart;
    itemContainer += "</div>";
    return itemContainer;
}

현재, 서버에서 데이터를 수신할 때, HML 문자열을 구축한 후, 용기에서 append를 호출합니다. 오른쪽 코드와 유사합니다.기준 테스트를 다시 실행합시다.

현재, 이 특정한 예시에서, 우리의 속도는 150밀리초도 안 되고, 이전 버전보다 4배 빠르고, 첫 번째 버전보다 12배 빠르다.이 예의 완전한 원본 코드는 내 사이트의 원시 문장에서 다운로드할 수 있다.

결론

나는 브라우저에서 실행되는 오프라인 유틸리티의 일부 입력을 바탕으로 페이지 생성을 최적화하는 유사한 기술을 사용했다.이것은 로그 뷰어와 해석기로서, 최초 버전은 약 6초 동안 3000개의 로그 파일을 처리해야 한다.최적화 호출 후 같은 로그가 0.8초도 안 되는 시간에 해석되고 표시되는 것은 시간과 사용자 체험에 큰 개선이 되었다.
지금은 이런 HTML 코드를 만드는 데 단점이 있다는 것을 알지만, 많은 경우 도움이 될 뿐만 아니라, 서버 부하를 줄이는 등 장점도 제공한다.만약 조심스럽게 코드 생성을 정확하게 분할하고 같은 생성기 함수에 다른 요소를 혼합하지 않는다면 자바스크립트 코드는 깨끗하고 쉽게 유지보수할 수 있습니다.
마지막으로 저는 백엔드 개발자이기 때문에 더 경험이 많은 자바스크립트 사용자들은 더 좋은 해결 방안을 가지고 이런 방법을 반대할 수 있습니다.
기사는 최초로 나의 개인 사이트에 발표되었다How to optimize jQuery DOM manipulation