DHTML 페이지 성능 향상_javascript 팁

요약: 이 문서에서는 특정 DHTML 기능이 성능에 미치는 중요한 영향을 설명하고 DHTML 페이지의 성능을 향상시키기 위한 몇 가지 팁을 제공합니다.

목차

소개
일괄 DHTML 변경
innerText 사용
DOM을 사용하여 개별 요소 추가
SELECT 요소의 옵션 확장
DOM 테이블로 업데이트
한 번 작성하고 여러 번 사용
동적 속성을 너무 많이 사용하지 마세요
데이터 바인딩이 효과적입니다
문서 객체에 확장 속성을 설정하지 마세요
클래스 및 스타일 규칙 전환을 피하세요
상위 항목을 찾기 전에 텍스트 범위 축소
추가 정보

소개
Microsoft® Internet Explorer 4.0의 동적 HTML(DHTML) 도입으로 웹 작성자와 개발자는 새로운 프로그래밍 모델에 액세스할 수 있습니다. 이후 웹 작성자는 이 강력한 기능을 활용하여 동적 콘텐츠, 스타일 지정 및 위치 지정을 제공함으로써 웹 사용자가 풍부한 대화형 기능을 경험할 수 있게 되었습니다. DHTML의 유연성은 일반적으로 아이디어를 구현하는 방법이 다양하다는 것을 의미합니다. Internet Explorer의 HTML 구문 분석 및 표시 구성 요소가 요청을 처리하는 방법을 이해하면 작업을 완료하는 최선의 방법을 결정하는 데 도움이 될 수 있습니다. 이 문서에서는 특정 DHTML 기능이 성능에 미치는 중요한 영향을 설명하고 페이지 성능을 향상시키기 위한 몇 가지 팁을 제공합니다.

DHTML 변경 일괄 처리
DHTML 웹 페이지의 성능을 향상시키는 가장 효과적인 방법은 페이지의 HTML 콘텐츠에 대한 변경 사항을 개선하는 것입니다. 웹페이지를 업데이트하는 방법에는 여러 가지가 있으며 이를 이해하는 것이 중요합니다. 고객 피드백을 기반으로 웹 작성자는 DHTML 개체 모델(영어) 또는 W3C 문서 개체 모델(DOM)(영어)을 사용하여 HTML 텍스트 블록을 적용하거나 개별 HTML 요소에 액세스할 수 있습니다. HTML 콘텐츠가 변경될 때마다 Internet Explorer의 HTML 구문 분석 및 표시 구성 요소는 페이지의 내부 표현을 재구성하고 문서 레이아웃과 문서 흐름을 다시 계산하며 변경 사항을 표시해야 합니다. 실제 성능은 웹 페이지의 내용과 변경 사항에 따라 결정되지만 이러한 작업에는 비용이 많이 듭니다. 요소에 개별적으로 액세스하는 대신 HTML 텍스트 블록을 사용하는 경우 HTML 구문 분석기를 호출해야 하며 이로 인해 추가 성능 오버헤드가 발생합니다. HTML 텍스트를 허용하는 메서드 및 속성에는 insertAdjacentHTML(영어) 및 PasteHTML(영어) 메서드와 innerHTML(영어) 및 externalHTML(영어) 특성이 포함됩니다.

팁 1: 스크립트 기능에서 HTML 콘텐츠를 변경하세요. 디자인에서 여러 이벤트 핸들러(예: 마우스 움직임에 대한 응답)를 사용하는 경우 중앙에서 변경해야 합니다.


HTML 구문 분석 및 구성 요소 표시에 대한 또 다른 중요한 사실은 스크립트가 제어를 반환하면(예: 스크립트 이벤트 핸들러가 종료되거나 setTimeout과 같은 메서드가 호출될 때) 구성 요소가 레이아웃을 다시 계산하고 웹 페이지를 표시합니다. 이제 Internet Explorer가 변경 사항을 처리하는 방법을 이해했으므로 웹 페이지 성능 향상을 시작할 수 있습니다.

팁 2: HTML 문자열을 만들고 여러 번 업데이트하는 대신 문서를 한 번만 변경하세요. HTML 콘텐츠가 필요하지 않은 경우 innerText(영어) 속성 사용을 고려하세요.


다음 예에서 느린 메소드는 innerHTML 속성이 설정될 때마다 HTML 파서를 호출합니다. 성능을 향상시키려면 먼저 문자열을 작성한 다음 이를 innerHTML 속성에 할당할 수 있습니다.



천천히 표시하세요:

divUpdate.innerHTML = "";
for ( var i=0; i{
divUpdate.innerHTML = "느린 방법입니다!"

빠름:

var str=""
var i=0; i )
{ str = "
문자열을 사용하기 때문에 이 방법이 더 빠릅니다! " divUpdate. str;

자세한 내용은 동적 콘텐츠(영어)를 참조하세요.

innerText 사용
DHTML 개체 모델은 innerText(영어) 속성을 통해 HTML 요소의 텍스트 콘텐츠에 액세스하는 반면, W3C DOM은 독립적인 하위 텍스트 노드를 제공합니다. innerText 속성을 통해 직접 요소의 콘텐츠를 업데이트하는 것이 DOM createTextNode(영어) 메서드를 호출하는 것보다 빠릅니다.

팁 3: innerText 속성을 사용하여 텍스트 콘텐츠를 업데이트하세요.


다음 예에서는 innerText 속성을 사용하여 성능을 향상시키는 방법을 보여줍니다.



느리게 표시하세요:

var node
for (var i=0; i{
node = document.createElement( "SPAN" );
node.appendChild( document.createTextNode( "createTextNode() 사용") )
divUpdate.appendChild( node )

빠른 ：

var node;
for (var i=0; i{ node = document.createElement( "SPAN" ); = "innerText 속성 사용";
divUpdate.appendChild( node );
}

DOM을 사용하여 단일 요소 추가
앞서 언급한 대로 HTML 텍스트 액세스 방법을 적용하면 HTML 분석기에 대한 호출로 인해 성능이 저하됩니다. 따라서 createElement(영어) 및 insertAdjacentElement(영어) 메서드를 사용하여 요소를 추가하는 것이 insertAdjacentHTML 메서드를 한 번 호출하는 것보다 빠릅니다.

팁 4: createElement 및 insertAdjacentElement 메소드를 호출하는 것이 insertAdjacentHTML 메소드를 호출하는 것보다 빠릅니다.


DHTML 업데이트를 일괄 처리하고 insertAdjacentHTML 메소드를 한 번 호출하면 성능이 향상될 수 있지만 때로는 DOM을 통해 직접 요소를 생성하는 것이 더 효율적일 때도 있습니다. 아래 시나리오에서는 두 가지 방법을 모두 시도해보고 어느 방법이 더 빠른지 결정할 수 있습니다.



느리게 표시하세요:

for (var i=0; i{
divUpdate.insertAdjacentHTML( "beforeEnd", " insertAdjacentHTML()
" ); }
빠르게:

var node
for (var i=0; i{
node = document.createElement( "SPAN" ); node.innerText = "insertAdjacentElement() 사용 ";
divUpdate.insertAdjacentElement( "beforeEnd", node ); }

SELECT 요소의 옵션 확장
SELECT(영문)에 OPTION(영문) 요소를 다수 추가하는 경우는 HTML 텍스트 방식을 사용하는 이전 규칙의 예외입니다. 이때 옵션 컬렉션에 접근하기 위해서는 createElement 메소드를 호출하는 것보다 innerHTML 속성을 사용하는 것이 더 효율적입니다.

팁 5: innerHTML을 사용하여 SELECT 요소에 많은 옵션을 추가하세요.


문자열 연결 작업을 사용하여 SELECT 요소의 HTML 텍스트를 작성한 다음 이 기술을 사용하여 innerHTML 속성을 설정합니다. 특히 옵션 수가 많은 경우 문자열 연결 작업도 성능에 영향을 미칠 수 있습니다. 이 경우 배열을 만들고 Microsoft JScript® 조인 메서드를 호출하여 OPTION 요소 HTML 텍스트의 최종 조인을 수행합니다.



느리게 표시하세요:

var opt;
divUpdate.innerHTML = "

"
for (var i=0 ; i{ opt = document.createElement( "OPTION" )
selUpdate.options.add( opt ); "item " i " " ; }

빠름:

var str="
"
for (var i=0; i{
str = " i " 항목
"; }
str = ""; divUpdate.innerHTML = str;

빠름 ：
var arr = new Array(1000);
for (var i=0; i{
arr = "
항목 " i "
"; }
divUpdate.innerHTML = "" arr.join() "";

DOM을 사용하여 테이블 업데이트DOM 메서드 행과 셀을 사용하여 보다 효율적으로 테이블 삽입 insertRow(영어) 및 insertCell(영어) 메서드(DHTML 테이블 개체 모델의 일부)를 사용하는 것보다 특히 큰 테이블을 생성할 때 효율성의 차이는 더욱 분명해집니다.
팁 6: DOM 메서드를 사용하여 큰 테이블을 만드세요.




느리게 표시하세요:

var row;
var cell
for (var i=0; i{
row = tblUpdate.insertRow();
for (var j=0; j{
cell = row.insertCell()
cell .innerText = "Row " i ", cell " j ";
}
}

빠름:

var row;
var cell;
var tbody = tblUpdate.childNodes[0];
tblUpdate.appendChild( tbody );
for (var i=0; i{
row = document.createElement ( "TR" );
tbody.appendChild( 행 );
for (var j=0; j{
cell = document.createElement( "TD" ); .appendChild( cell );
cell.innerText = "row " i ", cell " j ";
}
}

한 번 쓰고 여러 번 사용
사이트에서는 몇 가지 일반적인 작업을 수행하기 위해 스크립트를 사용합니다. 여러 웹 페이지에서 재사용할 수 있도록 이러한 기능을 별도의 파일에 넣는 것을 고려해 보세요. 이렇게 하면 코드의 유지 관리가 향상될 뿐만 아니라 사용자가 사이트를 방문할 때 로컬로 한 번만 다운로드하면 되도록 브라우저의 캐시에 스크립트 파일을 유지합니다. 자주 사용하는 스타일 규칙을 별도의 파일에 배치하면 동일한 이점을 얻을 수 있습니다.

팁 7: 자주 사용하는 코드를 액션이나 독립 실행형 파일에 넣어 스크립트를 재사용하세요.


스크립트 재사용을 더 잘 활용하려면 일반적으로 사용되는 스크립트 작업을 DHTML 어펜더 또는 요소 동작(영어)에 배치하세요. 동작은 스크립트를 재사용하고 HTML에서 액세스되는 구성 요소를 작성하는 효율적인 방법을 제공하며 사용자 고유의 개체, 메서드, 속성 및 이벤트를 사용하여 DHTML 개체 모델을 확장할 수 있도록 해줍니다. viewlink(영어) 기능을 사용하지 않는 동작의 경우 Internet Explorer 5.5의 경량(영어) 동작 기능을 사용하여 보다 효과적인 코드 캡슐화를 고려할 수 있습니다. 또한 스크립트 코드가 SCRIPT(영어) 블록에 있으면 성능이 향상됩니다.

동적 속성을 너무 많이 사용하지 마세요
동적 속성(영어)은 웹 작성자가 표현식을 속성 값으로 사용할 수 있는 방법을 제공합니다. 표현식은 런타임 시 평가되고 결과 값이 속성에 적용됩니다. 이것은 강력한 기능입니다. 이 기능을 사용하면 페이지의 스크립트 양을 줄일 수 있지만 표현식을 주기적으로 다시 평가해야 하고 표현식이 다른 속성 값과 관련되는 경우가 많기 때문에 성능에 부정적인 영향을 미칠 수 있습니다. 이는 특히 위치 지정 속성에 해당됩니다.

팁 8: 동적 속성의 사용을 제한하세요.


데이터 바인딩은 매우 효과적입니다.
데이터 바인딩(영어)은 데이터베이스 쿼리의 결과나 XML 데이터 아일랜드(영어)의 내용을 HTML에 바인딩할 수 있는 강력한 기능입니다. 웹페이지의 요소. 데이터를 가져오기 위해 서버로 돌아갈 필요 없이 데이터 정렬 및 필터링 기능은 물론 다양한 데이터 보기도 제공할 수 있습니다. 회사의 데이터를 꺾은선형, 막대형 또는 원형 차트로 표시할 수 있고 사무실, 제품 또는 판매 단계별로 데이터를 정렬하는 버튼이 있고 서버에 한 번만 액세스할 수 있는 웹 페이지를 상상해 보세요.

팁 9: 데이터 바인딩을 사용하여 데이터에 대한 풍부한 클라이언트측 보기를 제공하세요.


데이터 바인딩에 대한 자세한 내용은 다음 문서를 참조하세요.

데이터 바인딩 개요(영어)

페이지 데이터 바인딩(영어)

Slanted,average 및 defacto 데이터 바인딩(영어)
문서 객체에 Expando 속성을 설정하지 마세요.
expando(영어) 속성은 모든 객체에 추가할 수 있습니다. 이 속성은 현재 Wed 페이지 내에 정보를 저장하고 DHTML 개체 모델을 확장하는 또 다른 방법을 제공하므로 유용합니다. 예를 들어 DHTML 요소에 clicked 속성을 할당하고 이 속성을 사용하여 사용자가 클릭한 요소를 나타낼 수 있습니다. 이벤트를 발생시킬 때 Expando 특성을 사용하여 이벤트 처리기에 더 많은 상황별 정보를 제공할 수도 있습니다. Expando 속성을 어떻게 사용하든 문서(영어) 개체에 설정하지 마세요. 이렇게 하면 속성에 액세스할 때 문서에서 추가 재계산을 수행해야 합니다.

팁 10: 창(영어) 개체에 Expando 속성을 설정하세요.


표시하세요

느림:

for (var i=0; i{
var tmp; >window.document.myProperty = "항목 " i "; ; i{
var tmp;
window.myProperty = "항목";
tmp = window.myProperty;
}

클래스 및 스타일 규칙 전환 방지클래스 및 스타일 규칙 전환은 전체 문서의 레이아웃을 다시 계산하고 조정해야 하는 매우 비용이 많이 드는 작업입니다. 웹 사이트에서 스타일 시트를 사용하여 콘텐츠의 대체 보기를 제공하는 경우 요소의 className 속성이나 클래스와 연결된 styleSheet 개체를 수정하는 대신 변경하려는 요소의 스타일 개체를 직접 수정하는 것이 좋습니다.

팁 11: 콘텐츠의 모양을 변경할 때 스타일 개체를 직접 수정하세요.


상위
TextRange(영어) 개체를 찾기 전에 텍스트 범위를 축소합니다. TextRange(영어) 개체는 사용자가 선택하거나 BODY(영어)와 같은 HTML 요소에서 검색한 텍스트 영역을 나타냅니다. 텍스트 범위의 상위는 parentElement(영어) 메소드를 호출하여 식별할 수 있습니다. 복잡한 텍스트 범위의 경우 parentElement 메서드를 호출하기 전에 축소(영어) 메서드를 호출하는 것이 더 효율적입니다.

팁 12: parentElement 메소드에 액세스하기 전에 텍스트 범위를 축소하세요.