더 보기
소스 다운로드 프로그래밍 관련 웹사이트 자원 서적 튜토리얼 모바일 게임 휴대폰 소프트웨어 문서
홈페이지>웹 디자인 튜토리얼>DHTML 튜토리얼

DHTML 속도를 높이는 일련의 기술

저자：Eve Cole 업데이트 시간：2009-06-20 16:59:57
Microsoft의 동적 HTML(DHTML)? 인터넷 익스플로러 4.0에서
웹 작성자와 개발자가 새로운 프로그래밍 모델을 사용할 수 있도록 도입되었습니다. 그 이후로 웹 작성자들은
이 강력한 기능을 최대한 활용하여 웹 사용자가 사용할 수 있도록 동적 콘텐츠, 스타일 및 위치 지정을 제공하세요.
풍부한 대화형 기능을 경험해 보세요. DHTML의 유연성은 일반적으로 구현 방법이 여러 가지가 있음을 의미합니다.
당신의 아이디어. Internet Explorer의 HTML 구문 분석 및 표시 구성 요소가 처리되는 방식 이해
작업을 완료하는 가장 좋은 방법을 결정하는 데 도움이 됩니다. 이 문서에서는 DHTML의 일부 기능을 설명합니다.
성능에 큰 영향을 미치며 페이지 성능 향상을 위한 몇 가지 팁을 제공합니다.

일괄 DHTML 변경

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

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

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

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

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

느린:

divUpdate.innerHTML = "";
for (var i=0; i<100; i++)
{
divUpdate.innerHTML += "이것은 느린 방법입니다!";
}

빠른:

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

innerText 사용

DHTML 개체 모델은 innerText(영어) 특성을 통해 HTML 요소의 텍스트에 액세스합니다.
W3C DOM은 독립적인 하위 텍스트 노드를 제공합니다. innerText 속성을 통해 직접
DOM createTextNode(영어) 메소드를 호출하는 것보다 빠르게 요소의 컨텐츠를 영구적으로 업데이트합니다.

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

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

느린:

var 노드;
for (var i=0; i<100; i++)
{
node = document.createElement( "SPAN" );
node.appendChild( document.createTextNode( "createText 사용
노드() ") );
divUpdate.appendChild(노드);
}

빠른:

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

DOM을 사용하여 단일 요소 추가

앞서 언급했듯이 HTML 텍스트의 액세스 방법을 적용하면 HTML 파서가 호출됩니다.
성능이 저하됩니다. 따라서 createElement(영어) 및 insertAdjacent를 사용합니다.
Element(영어) 메서드는 insertAdjacentHTML 메서드를 한 번 호출하는 것보다 빠르게 요소를 추가합니다.

팁 4: createElement 및 insertAdjacentElement 메서드를 호출하는 것보다 빠르게 호출하세요.
insertAdjacentHTML 메소드는 빠릅니다.

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

느린:

for (var i=0; i<100; i++)
{
divUpdate.insertAdjacentHTML( "beforeEnd", " 삽입 사용
인접HTML() " );
}

빠른:

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

SELECT 요소의 옵션 확장

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

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

문자열 연결 작업을 사용하여 SELECT 요소의 HTML 텍스트를 작성한 다음 이를 사용합니다.
innerHTML 속성 설정에 대한 팁입니다. 특히 옵션 수가 많은 경우 문자열 연결 작업도 수행됩니다.
성능에 영향을 미칩니다. 이 경우 배열을 만들고 Microsoft JScript Join을 호출합니다.
(영어) OPTION 요소의 HTML 텍스트를 최종 연결하는 방법입니다.

느린:

var 선택;
divUpdate.innerHTML = "〈SELECT ID='selUpdate'〉";
for (var i=0; i<1000; i++)
{
opt = document.createElement( "OPTION" );
selUpdate.options.add(opt);
opt.innerText = "아이템" + i + "아이템";
}

빠른:

var str="〈SELECT ID='selUpdate'〉";
for (var i=0; i<1000; i++)
{
str += "〈OPTION〉번째" + i + "항목〈/OPTION〉";
}
str += "";
divUpdate.innerHTML = str;

더 빠르게:

var arr = 새로운 배열(1000);
for (var i=0; i<1000; i++)
{
arr[i] = "〈OPTION〉번째" + i + " 항목〈/OPTION〉";
}
divUpdate.innerHTML = "〈SELECT ID='selUpdate'〉" + arr.join() + "
";

DOM으로 테이블 업데이트

DOM 메소드를 사용하여 테이블 행과 셀을 삽입하는 것이 insertRow(영어)를 사용하고 insert하는 것보다 낫습니다.
Cell(영어) 메서드(DHTML 테이블 개체 모델의 일부)가 더 효율적입니다. 특히
큰 테이블을 생성할 때 효율성의 차이는 더욱 분명해집니다.

팁 6: DOM 메서드를 사용하여 큰 테이블을 만드세요.

느린:

var 행;
var 셀;
for (var i=0; i<100; i++)
{
행 = tblUpdate.insertRow();
for(var j=0; j<10; j++)
{
셀 = 행.삽입셀();
cell.innerText = "행 " + i + " , 셀 " + j + " ";
}
}

빠른:

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

한 번 작성하고 여러 번 사용

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

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

스크립트 재사용을 더 잘 활용하려면 자주 사용하는 스크립트 작업을 DHTML 추가 기능에 배치하세요.
코드 또는 요소 동작(영어). 동작은 스크립트를 재사용하고
HTML에서 액세스할 수 있는 구성 요소를 만들고 고유한 개체, 메서드, 속성 및 이벤트를 사용하여 다음을 수행할 수 있습니다.
확장된 DHTML 개체 모델. viewlink(영어) 기능을 사용하지 않는 동작의 경우 다음을 수행할 수 있습니다.
Internet Explorer 5.5의 경량 동작 기능 사용을 고려하십시오.
보다 효율적인 코드 캡슐화. 또한 스크립트 코드가 SCRIPT(영어)에 있는 경우
블록에서는 더 높은 성능이 달성됩니다.

동적 속성을 너무 많이 사용하지 마세요

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

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

데이터 바인딩이 훌륭하게 작동합니다.

데이터 바인딩(영어)은 데이터베이스 쿼리 결과를 결합할 수 있는 강력한 기능입니다.
웹 페이지의 HTML 요소에 바인딩된 과일 또는 XML 데이터 아일랜드(영어) 콘텐츠입니다. 당신은 가지고 있지 않습니다
데이터를 추출하려면 서버로 돌아가야 하며, 데이터 정렬 및 필터링 기능과 다양한 데이터를 제공할 수 있습니다.
데이터 보기. 회사의 데이터를 꺾은선형 차트, 막대형 차트, 원형 차트로 표시하는 웹 페이지를 상상해 보세요.
그래프에는 사무실, 제품 또는 판매 단계별로 데이터를 정렬하는 버튼도 있으며 모든
이 기능은 구현을 위해 서버에 한 번만 액세스하면 됩니다.

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

문서 개체에 확장 속성을 설정하지 마세요.

Expando(영어) 속성은 모든 객체에 추가될 수 있습니다. 이 속성은 매우 유용합니다.
현재 Wed 페이지 내에 정보를 저장하고 DHTML 개체 모델을 확장하는 또 다른 방법을 제공합니다.
법. 예를 들어 clicked 속성을 DHTML 요소에 할당하고 이 속성을 사용하여 사용자에게 메시지를 표시할 수 있습니다.
사용자가 클릭한 요소입니다. 이벤트를 발생시킬 때 Expando 속성을 사용하여 다음을 수행할 수도 있습니다.
이벤트 핸들러는 더 많은 상황별 정보를 제공합니다. Expando 속성을 어떻게 사용하든 잘라내기
문서(영어) 개체에는 설정하지 마세요. 이렇게 하시면 방문하실 때
이 속성을 요청할 때 문서는 추가 재계산 작업을 수행해야 합니다.

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

느린:

for (var i=0; i<1000; i++)
{
var tmp;
window.document.myProperty = "아이템" + i + "아이템";
tmp = window.document.myProperty;
}

빠른:

for (var i=0; i<1000; i++)
{
var tmp;
window.myProperty = "아이템" + i + "아이템";
tmp = window.myProperty;
}

클래스 및 스타일 규칙 전환 방지

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

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

상위 항목을 찾기 전에 텍스트 범위 축소

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

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

http://www.microsoft.com/china/msdn/?MSCOMTB=ICP_MSDN 에서 발췌