아래 소스를 일단 분석해보면
1. 첫번째 붉은 코드는 div테그의 innerHTML에 직접 문자열을 추가해 나가고있고,
2. 두번째 붉은 코드는 먼저 문자열을 변수에 더해 담고, 전부 완료된 후 한번에 innerHTML에 넣고 있다.
innerHTML은 화면에 표시되는 브라우져 출력 버퍼에 내용이 보내지게 되는 Property(속성) 값이라 I/O 처리가 들어가게된다.
때문에 메모리에서 처리한 후 단 한번의 브라우져 출력 버퍼로 I/O를 수행하는 2번째 코드가
훨씬 빠른 성능을 낼 수 있다.
그러므로 반복구문(for, while)에 innerHTML에 값을 넣는 실수는 하지 않도록 하자.
예제 page. http://samples.msdn.microsoft.com/workshop/samples/author/perf/tip2.htm
<HTML>
<HEAD>
<TITLE>Performance Tip 2 - Batch Updates</TITLE>
<SCRIPT LANGUAGE="JScript">
function slow()
{
var start = new Date();// Start processing
divUpdate.innerHTML = "";
for ( var i=0; i<100; i++ )
{
divUpdate.innerHTML += "<SPAN>This is a slower method! </SPAN>";
}
// End processingvar end = new Date();
spnSlow.innerText = "Slow method took " + (end.getTime()-start.getTime()) + " milliseconds.";
}function faster()
{
var start = new Date();// Start processing
var str="";
for ( var i=0; i<100; i++ )
{
str += "<SPAN>This is faster because it uses a string! </SPAN>";
}
divUpdate.innerHTML = str;
// End processingvar end = new Date();
spnFaster.innerText = "Faster method took " + (end.getTime()-start.getTime()) + " milliseconds.";
}
</SCRIPT>
</HEAD>
<!-- TOOLBAR_START --><!-- TOOLBAR_EXEMPT --><!-- TOOLBAR_END -->
<BODY><H1>Performance Tip 1 - Batch Updates</H1>
<P>The slow method invokes the HTML parser each time the <B>innerHTML</B> property is set. To improve performance, a string can be built which is then assigned to the <B>innerHTML</B> property. </P>
<P>Click the buttons to see the difference in performance.</P><span>Slow -</span>
<BUTTON ONCLICK="slow()">innerHTML </BUTTON>
<SPAN ID="spnSlow" class="timertext"></SPAN><BR/><BR/>
<span>Fast -</span>
<BUTTON ONCLICK="faster()" >innerHTML using a string</BUTTON>
<SPAN ID="spnFaster"></SPAN><DIV ID="divUpdate"></DIV>
<!-- Copyright --><A HREF="http://www.microsoft.com/isapi/gomscom.asp?TARGET=/info/cpyright.htm" TARGET="_top">© 2007 Microsoft Corporation. All rights reserved. Terms of use.</A></BLOCKQUOTE></BODY>
</HTML>
출처 : http://ruru.tistory.com/entry/innerHTML-%EC%9D%84-%EC%82%AC%EC%9A%A9%ED%95%A0-%EB%95%8C-%EC%86%8D%EB%8F%84%EB%A5%BC-%EC%9C%84%ED%95%9C-%EC%A3%BC%EC%9D%98%EC%82%AC%ED%95%AD
'프로그램 > Html & Js & Css' 카테고리의 다른 글
| 다국어를 위한 문자셋(charset)과 코드페이지(codepage) (0) | 2009.06.02 |
|---|---|
| [펌] - DIV와 SPAN의 차이점 (0) | 2009.04.28 |
| [JS] - 자바스크립트에서 많이 사용하는 Date 객체 (0) | 2009.04.02 |
| [JS] - 자바스크립트에서 많이 사용하는 Array (0) | 2009.04.02 |
| cancelBubble (1) | 2009.04.01 |