'div'에 해당되는 글 3건
- 2008/03/06 드래그 드랍(Drag and Drop) 으로 개체의 정보 다루기
- 2008/02/01 innerHTML 을 사용할 때 속도를 위한 주의사항 (2)
- 2008/01/24 DIV를 이용해 가운데 정렬 (1)
드래그 드랍 이벤트에 따라 개체에 데이터를 담아 처리할수 있는 DHTML 예제입니다.
쇼핑몰의 쇼핑카트 등에 이용할 방향이 크네요.
소스 내용은 직접 위 링크를 참조하셔서 확인해 주셔야 할 것 같습니다.
'Web > JavaScript' 카테고리의 다른 글
| DHTML을 빠르게 하는 12가지 튜닝 (0) | 2008/07/14 |
|---|---|
| 다양한 HTML 소스복사 / 마우스 우클릭 방지 모음 (2) | 2008/05/23 |
| 드래그 드랍(Drag and Drop) 으로 개체의 정보 다루기 (0) | 2008/03/06 |
| JavaScript Obejct 형식의 데이터를 덤프하여 내용 보기 (0) | 2008/02/12 |
| innerHTML 을 사용할 때 속도를 위한 주의사항 (2) | 2008/02/01 |
| Yahoo Map API (1) | 2008/01/15 |
Trackback : http://i-ruru.com/trackback/287
당연히 알고 있을 내용이지만..
아래 소스를 일단 분석해보면
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>
'Web > JavaScript' 카테고리의 다른 글
| 드래그 드랍(Drag and Drop) 으로 개체의 정보 다루기 (0) | 2008/03/06 |
|---|---|
| JavaScript Obejct 형식의 데이터를 덤프하여 내용 보기 (0) | 2008/02/12 |
| innerHTML 을 사용할 때 속도를 위한 주의사항 (2) | 2008/02/01 |
| Yahoo Map API (1) | 2008/01/15 |
| Javascript 를 이용하기 쉽게 정리된 메소드, 이벤트, XHR 등 정리 목록 (0) | 2008/01/10 |
| QueryString 공백, 특수문자 자바스크립트 처리 (0) | 2007/12/05 |
Trackback : http://i-ruru.com/trackback/289
-
-
써니루루 2008/02/06 19:02
사이트까지 직접 찾아오셔서 글 남겨주셔서 감사합니다.
양질의 서비스와 진짜 블로거가 원하는 바를 이루는 서비스로 거듭나시길..
새해福 많이 받으세요~
-
http://flumpcakes.co.uk/css/center-div-ie
div 테그를 이용해 표시되는 박스 형태의 레이아웃을 화면 가운데로 정렬하고 싶어하는 경우가 있습니다.
이럴때 대부분 table 테그에서 align=center를 많이 써 보셨기 때문에 text-align:center 를 사용하시는 경우가 많은데요.
이럴때는 다음과 같이 margin:0 auto; 를 사용하셔야 제대로 표현할 수 있습니다.
다음 사이트를 확인해보시면 보실 수 있습니다.
http://flumpcakes.co.uk/css/center-div-ie
'Web > CSS' 카테고리의 다른 글
| CSS 범위 넘어가는 글자에 자동으로 ... 붙이는 방법 (3) | 2009/02/09 |
|---|---|
| 버튼을 CSS로 이쁘게~ (0) | 2008/06/21 |
| IE 6에서 나타나는 배경이미지 깜빡임 현상 수정 (2) | 2008/01/28 |
| DIV를 이용해 가운데 정렬 (1) | 2008/01/24 |
| IE와 W3C의 박스 차이에 의한 CSS 코딩 방식 (0) | 2007/09/11 |
| 링크에 점선.. 아직도 onclick=this.blur()를 쓰나요? (3) | 2007/05/21 |
Trackback : http://i-ruru.com/trackback/265
-
Subject div 가운데 정렬
2009/02/17 13:00
http://ruru.tistory.com/entry/DIV%EB%A5%BC-%EC%9D%B4%EC%9A%A9%ED%95%B4-%EA%B0%80%EC%9A%B4%EB%8D%B0-%EC%A0%95%EB%A0%ACmargin: 0 auto;이때 margin 0의 주는 의미는 뭘까?화면상의 차이는 없는데
Prev
