'JavaScript'에 해당되는 글 21건

  1. 2009.08.06 자바스크립트 HTML에서 주석문 달지말자!
  2. 2008.06.30 Javascript Packer & 암호화 - C#
  3. 2008.03.25 appendChild와 innerHTML+=의 속도차이
  4. 2007.07.06 js_string , 문자열 제어 함수, 프로토 타입 모음
  5. 2007.06.28 애플닷컴의 제품 슬라이더 자바스크립트 분석
  6. 2007.06.13 142가지의 자바스크립트 소스.txt
  7. 2007.06.06 오프라인 Ajax가 가지는 의미 - Google Gears
  8. 2007.06.06 UI 자바스크립트 라이브러리 Ext JS (yui-ext)
  9. 2007.05.31 IE Memory Leaks
  10. 2007.05.26 자바스크립으로 플래쉬 메뉴처럼...
2009.08.06 12:45

자바스크립트 HTML에서 주석문 달지말자!

흔히 HTML상에서 자바스크립트나 다른 스크립트 언어를 사용할 경우 주석문을 처리해주는 경우가 많다.
물론 다른 스크립트의 경우 충분히 사용할 이유가 있지만 자바스크립트의 경우 그야말로 접근성만 떨어뜨리는 일이다.

<script language="JavaScript" type="text/JavaScript">
<!--
  .. 내용
-->
</script>

사실 HTML에서 주석문으로 처리해준 이유는 자바스크립트를 정상적으로 해석하지 못하는 브라우저들이 스크립트 구문을 그냥 출력해버리는 것을 막기위한 방법으로 사용되어왔지만 현재 사용되는 브라우저중에 자바스크립트가 지원되지 않는 브라우저는 거의 없으며 만약 지원이 되지 않더라도 스크립트가 출력되지는 않는다.

오히려 주석문 보다는 <noscript></noscript>로 스크립트를 감싸줄것을 권한다. 자바스크립트는 해석하지 못하더라도 HTML를 해석할 수 있는 브라우저라면 ( 그것도 해석안되면 그건 웹브라우저 자격이 없을테니 말이다. ) noscript로 감싸준 스크립트는 해석하지 않고 출력도 하지 않는다.

<noscript>
<script language="JavaScript" type="text/JavaScript">
  .. 내용
</script>
</noscript>

주석문을 사용할 경우 오히려 정상적으로 작동하지 않는 경우도 있다.
최근에는 보완되고있지만 브라우저중 일부가 XHTML 를 XML로 해석해버려 아에 주석화된 스크립트 구문을 무시해버리기도 한다.

출처 : http://phpschool.com/gnuboard4/bbs/board.php?bo_table=tipntech&wr_id=68994&page=1
신고
Trackback 0 Comment 0
2008.06.30 12:50

Javascript Packer & 암호화 - C#


Javascript 소스 압축
http://dean.edwards.name/download/#packer
base62 encode 로 자바스크립트 소스를 압축합니다.

Javascript 암호화
http://www.webtoolkit.info/javascript-sha1.html
스크립트로 암호화코드를 만들어 낼수있습니다.


신고

'소프트웨어 > JavaScript • Dhtml' 카테고리의 다른 글

Masked Input plugin  (0) 2009.06.29
JSON API 하이재킹, Ajax Security  (0) 2009.05.21
Javascript Packer & 암호화 - C#  (0) 2008.06.30
구글에서 도시 정보 가져오기  (0) 2008.06.26
구글 AJAX Libraries API  (0) 2008.06.04
XMLHttpRequest 번역본 2  (0) 2008.04.22
Trackback 96 Comment 0
2008.03.25 08:08

appendChild와 innerHTML+=의 속도차이

지금 자바스크립트를 이용한 채팅을 만들고 있습니다.

만들다 보니 이용자가 과도하게 도배를 하게 되면 상대편이 끊김이 발생하면서 여러가지 문제로 인해 먹통이 되는 경우가 있었습니다.
document.getElementById('xxx').innerHTML+=로 단순히
채팅 한줄만 추가하는 부분인데..

제가 만들고 있는 것이 멀티 채팅방이기 때문에 여러방에서
여러개의 div가 수시로 업데이트 됩니다.
그래서 속도가 중요하다고 생각되어 appendChild와 innerHTML+=의 속도를 테스트
해 보았습니다.

각각 div안에 200회 추가와 1000번 추가를 해 보았습니다.
제 컴퓨터가 느려서 수치는 좀 높지만 참고하시면 좋을 것 같습니다.

결과는 모두 appendChild가 빨랐습니다.

===결과(수치가 작으면 빠릅니다. 단위 : 밀리초)===
<모질라 1000회>
- appendChild : 841
- innerHTML+= : 172397
- 약 204배

<익스플로러 1000회>
- appendChild : 2904
- innerHTML+= : 41249
- 약 14배

<모질라 200회>
- appendChild : 159
- innerHTML+= : 5220
- 약 32배

<익스플로러 200회>
- appendChild : 641
- innerHTML+= : 2384
- 약 3배

===사용된 소스 일부===
function addDiv() {  //append
var newDiv = document.createElement("div");
    newDiv.id = 'test';
    newDiv.innerHTML = 'test';
    document.getElementById('benchMarkWork1').appendChild(newDiv);
}

function addDiv2() {  //innerHTML+=
    document.getElementById('benchMarkWork2').innerHTML += '<div id="test">test</div>';
}

===결론===

한번에 대량의 자료를 추가하는 것이 아닌 여러개의 div에 조금씩 추가하는 것이라면
당연히 위의 결과를 참고하여 만드시는 것이 좋을 듯 합니다.

덧글 :
참고로 이걸보고
appendChild 와 innerHTML의 속도에서 appendChild 가 빠르다고 생각하시면 안됩니다.
위에서 보이듯이
innerHTML += 를 사용했죠.
즉, 계속적으로 전체데이터+추가데이터를 새로 쓰는 효과가 됩니다.

appendChild는
추가데이터만 등록하는 효과죠.
-------=------------
위와 같은 상황에서는
appendChild() 가 적절한 선택입니다.



출처 : http://www.phpschool.com


신고
Trackback 0 Comment 0
2007.07.06 18:36

js_string , 문자열 제어 함수, 프로토 타입 모음

현재 구현된건
1. 숫자에 천단위 ,표 붙이기(프로토타입,함수)
2. 숫자를 한글로 출력(프로토타입,함수  )
3. 문자열에서 앞뒤(앞,뒤) 공백제거 (프로토타입,함수)
4. 문자열에서 문자열 제한(영어만, 또는 영어와 한글만 등등)

---------=-----------
그냥 안 올릴까.. 하다가
홈피 이사후 방문자수가 푸욱~~ 줄어서... 낚씨용?으로.

사용할 때 꼭 .JS파일 안을 열어보세요.
그안에 대부분의 설명이 다 되어있습니다.

http://www.mins01.com/20070305/m_board/tech.php?b_id=tech&type=read&b_idx=411&page=1&period=365
신고
Trackback 4 Comment 0
2007.06.28 08:53

애플닷컴의 제품 슬라이더 자바스크립트 분석



출처 :  파이어준
애플닷컴의 iTunes페이지에 자바스크립트로 구현 된 제품 슬라이더가 심상치 않아 보여서 파 보았다. 이 제품 슬라이더는 Prototype.jsScriptaculous의 Slider컨트롤러가 사용 되었으며, 주요한 기능은 특정영역으로의 스내핑과  가로 스크롤바를 통한 제품 내비게이션이다. 이런저런 쓰레기 코드를 제거하였더니 약 150라인정도로 구현된 것을 알 수 있었다. 흥미로운 것은 아이폰의 인터페이스처럼 던지기(?) 제스쳐를 스크롤바에 적용해 놓았다. 위 데모에서 스크롤바를 힘껏 던져보자. 내키면 컴포넌트화하는 작업도 진행해 볼 생각이다.

  /* PRODUCT BROWSER */ 
  Event.observe(window, 'load', function() {
    AC.ProductBrowser.init({
      categories: [ {id: 'pb-cat1', offset: 0},
                    {id: 'pb-cat2', offset: 0.155},
                    {id: 'pb-cat3', offset: 0.657} ], // default offsets
      imageOverlap: 0,
      sliderCentering: 187, // handler width
      initialCategory: 1,
      arrowScrollAmount: 0.44
    });
  });
신고
Trackback 0 Comment 0
2007.06.13 08:52

142가지의 자바스크립트 소스.txt

142    폼 입력 내용을 체크하여 깔끔하게 경고창 보여주기 
141    부끄럼 타는 버튼  
140    나쁜말 입력 금지  
139    비밀번호 종합 체크  
138    제목을 골라 메일 보내기  
137    자바스크립트로 메일링 리스트를 만들어 보자  
136    멀티 메일러 - Multi_Mailer  
135    체크박스가 아닌곳을 선택해도 체크박스 선택하기 
134    자바스크립트 에러 검증 스크립트  
133    소스 훔쳐보기 
132    체크박스 클릭하면 즉시 이동 시키기  
131    년도별 띠 알아보기  
130    페이지 로딩시 첫번째 필드의 특정 항목 자동선택 시키기  
129    영어공부-아라비아 숫자 읽기  
128    간단한 웹메일 보내기  
127    페이지 검색기 
126    웹 서치 엔진 
125    폼 내용 전송전 확인 메세지 띄우기  
124    폼 버튼 이름과 하이퍼링크가 계속 바뀌는 스트립트  
123    누를 때마다 메시지가 바귀는 자바 버튼  
122    폼을 입력한 후 확인 시키고 다은 페이지로 이동하게 하는 스크립트 
121    앞으로, 뒤로 가기 버튼  
120    이메일 주소 체크하기 
119    첫글자를 대문자로 바꾸어주기  
118    dHTML과 자바스크립트를 이용한 FORM 예제  
117    다른사람에게 이메일 보내기  
116    지정된 문자수가 채워지면 자동으로 다음칸으로 이동되는 스크립트  
115    더 간단한 (할말만 적어보내는) 폼메일  
114    입력 내용을 미리 보고 폼메일로 보내자  
113    팝업창에서 확인하는 간단한 폼메일 스크립트입니다 
112    이메일을 보내게 하는 간단한 스크립트  
111    풀다운 메뉴로 전자메일을 골라 보내자 
110    사용자의 정보와 의견 보내기 - 폼메일  
109    간단한 Form Mail 
108    RGB → HEX 코드로 간단하게 변환시키는 스크립트  
107    HEX → RGB 스크립트  
106    파일내 텍스트 서치 엔진  
105    플래쉬 효과가 나는 하이퍼링크 텍스트 스크립트  
104    HTML 코드를 특수문자로 바꾸어 주는 스크립트 
103    상태바에서 남은 일/시를 알려주는 카운트 다운 폼 스크립트 
102    마우스 오버로 text-area 문자열 자동 선택시키기  
101    각국의 화폐단위를 알아보자 - 콤보박스의 선택값 넘기기 
100    [전문가용] DHTML FORM 
99    재미있는 기타코드 보여주기 
98    결제정보 및 배달지 정보 입력 받기 소스 
97    다양한 텍스트 폼 스크롤러를 하나로 
96    날짜형식 자동완성 및 유효성 검사 하기 
95    데이터 입력받아 알파벳(가나다)순으로 정열시켜 보여주기 
94    입력된 메세지의 용량 구하기  
93    회원명단에서 선택된 회원들에게 동일내용으로 이메일 보내기 
92    효율적인 날짜 드롭다운 상자 만들기  
91    폼메일 스크립트 (공백입력,전화번호, 이메일 유효성 검사)  
90    텍스트 상자의 내용을 한꺼번에 선택 합니다 
89    경고창을 15초 동안 닫을 수 없습니다 
88    원하는 포맷으로 날짜형식 입력받기 
87    조립 컴퓨터 견적 내기 + 이메일로 주문 
86    신용카드 유효성 검사 
85    숫자를 입력하면 자동으로 화폐단위를 넣어 줍니다 
84    [투표] 이메일로 받아보는 간단한 투표스크립트  
83    버튼 클릭으로 숫자를 증가/감소 시킵니다 
82    대문자를 입력하면 소문자로 바꾸어 줍니다  
81    다양한 문자입력 금지 스크립트 
80    콤보메뉴에서 오늘 날짜와 연도가 자동으로 선택 되어 집니다 
79    날짜입력을 팝업 카렌다에서 선택할수 있습니다 
78    간단한, 문자, 숫자 입력 유효성 검사하기 
77    텍스트 상자에 인라인 자동완성 효과를 줍니다  
76    문자열에 공백이 있으면 + 부호로 이어줍니다  
75    친구에게 현재 페이지 추천하기 
74    하이퍼링크에 새창으로 열기 옵션 넣기  
73    품목별 주문수량을 입력받아 총금액 보여주기 
72    라디오버튼 클릭으로 주문한 메뉴 합계금액 보여주기 
71    2개의 콤보메뉴에서 동일내용은 선택을 할 수 없습니다 
70    태그 입력 금지시키기 
69    폼메일 - 미리 지정된 사람에게 메일을 보냅니다 
68    이전필드의 입력값을 메모리 형태로 가져 옵니다 
67    자바스크립트 메일리스트 
66    사용자가 리스트 박스 항목 추가/삭제 하기  
65    지정된 글자수만큼만 입력가능하게 하고, 남은 글자수를 실시간으로 보여줍니다 
64    사용자가 목록 추가하기 
63    사용자가 자신의 PC 파일을 열어 직접 실행 시킬 수 있습니다  
62    텍스트영역에서 이메일 주소만 추출 합니다  
61    submit 버튼을 두번 클릭하지 못하게 비활성화 시킵니다 
60    소숫점 2자리까지만 입력이 가능합니다  
59    팝업창의 값을 참조하여 오프너에 보내기 예제  
58    체크박스 항목을 그룹별로 선택하게 해 줍니다  
57    주문자 정보 필드 값을 배송지 정보 필드에 복사합니다  
56    폼 요소들의 배경색이 애니메이션 됩니다 
55    콤보 메뉴의 옵션 항목이 5초마다 저절로 바뀝니다 
54    숫자에 3자리 단위로 콤마를 찍어 줍니다  
53    홈페이지 추천하기 
52    콤보메뉴에서 항상 오늘날짜를 년-월-일 로 보여줍니다  
51    애니메이션 후 이동하는 콤보메뉴 만들기 
50    자동으로 현재의 년월일을 선택하는 콤보상자  
49    이미지를 이용한 다이나믹 submit 버튼 예제 
48    입력영역에 최대 입력 글자수를 제한 합니다 
47    필수항목은 반드시 입력 하게 합니다 
46    정규식을 사용한 이메일 주소 체크하기  
45    콤보상자에서 선택한 내용을 입력영역에 차례대로 디스플레이 해 줍니다 
44    입력한 이메일 주소를 경고창을 띄워 확인 시킨 후 submit 합니다 
43    특정 이메일 주소 입력을 금지합니다 
42    여러가지 형태의 날짜 입력값을 특정 형태로 변환합니다  
41    입력상자의 날짜형식 변환하기  
40    이름이나 아이디중 한가지만 입력하게 합니다 
39    체크박스 항목을 모두선택, 모두해제, 또는 반전 시켜 줍니다 
38    영문자나 숫자만 입력 할 수 있습니다 
37    한번만 submit 되게 합니다 
36    폼 요소에 멋진 페이드 효과 주기 
35    현재 페이지 이메일로 보내는 버튼 만들기 
34    원하는 사람에게 메일 보내기 버튼 만들기  
33    동의하지 않으면 버튼을 누를수 없습니다 
32    텍스트 영역에서 입력 글자(단어)수를 제한 합니다 
31    뒤에 붙는 불필요한 공백 문자열을 없애줍니다 
30    앞에 붙는 불필요한 공백문자열을 지워 줍니다 
29    특정 파일형태만 업로드 할 수 있습니다 
28    유효한 IP 주소인지 검사합니다 
27    탭키 대신 엔터키를 눌러 이동합니다 
26    전송버튼에 '전송중...' 이라는 표시를 해 줍니다 
25    사용자가 table sort 시키기  
24    레이어를 사용하여 select box 를 동적으로 생성합니다 
23    폼요소가 하이라이트 됩니다  
22    입력 문자열 앞에 붙는 공백 제거하기 
21    입력필드에 내용을 입력하면 아래쪽에 큰 글자로 보여줍니다  
20    자바스크립트로 폼 입력값 전송받기 
19    팝업 윈도우로 변수값 넘기기 
18    3단계의 콤보상자에 오늘의 연월일을 자동으로 나타내 줍니다 
17    폼필드에 입력할 수 있는 글자의 수를 제한 합니다 
16    마우스를 클릭하면 필드의 내용이 모두 선택됩니다 
15    텍스트 필드에 디폴트 메세지를 보여주고 클릭하면 사라집니다 
14    버튼으로 텍스트영역의 크기를 제어합니다  
13    이메일 주소가 올바른지 한번더 입력하여 체크합니다  
12    동적으로 생성되는 다이나믹 콤보상자 메뉴  
11    체크박스나 라디오버튼의 모두선택/모두해제 시키는 스크립트 
10    테이블을 이용한 스프레드시트 시뮬레이션 
9    한글입력을 금지시킵니다  
8    엔터키를 누르면 다음 입력상자로 이동합니다 
7    사용자가 텍스트 박스 추가 하기  
6    라디오버튼으로 여러개의 폼 요소를 숨기거나 보이게 해 줍니다  
5    사용자 선택에 따라 각기 다른 action 값 주기  
4    정확한 이메일 주소를 적지 않으면 버튼이 활성화 되지 않습니다 
3    빈칸을 채우지 않으면 입력상자에 경고색을 보냅니다 
2    실시간으로 입력할 수 있는 글자의 수를 알려줍니다  
1    옵션 엘리먼트 추가시키기 

more..



출처 : 모름

신고
Trackback 69 Comment 0
2007.06.06 02:22

오프라인 Ajax가 가지는 의미 - Google Gears

Google Developer Day에서 발표된 Google Gears(구글 기어즈)는 오프라인에서도 온라인처럼 사용할 수 있는 클라이언트 스토리지 솔루션입니다. 특징을 보면, SQLite를 이용한 데이터 처리 및 문서 검색,  서버와 클라이언트 사이의 데이터 동기화, 개발자와 사용자를 위한 JavaScript APIs를 들 수 있습니다.(Channy님의 포스트 인용) 아시다시피, Google은 Google reader에 실제로 오프라인(Offline) 서비스를 추가하였습니다. 아래의 자바스크립트 예문을 봅시다.

function initDb() {
  if (!window.google || !google.gears) {
    return;
  }

  db = getDb();
  run('create table if not exists feeds (' +
             'id integer not null primary key autoincrement,' +
             'title varchar(255),' +
             'url varchar(255),' +
             'description text)');

  run('create table if not exists posts (' +         
             'id integer not null primary key autoincrement,' +
             'feed_id integer,' +
             'title varchar(255),' +
             'url varchar(255),' +
             'content text)');
}
 
function getDb() {
  try {
    var theDb = google.gears.factory.create('beta.database', '1.0');
    theDb.open('rssbling');
    return theDb;
  } catch (e) {
    alert('Could not create the rssbling database: ' + e.message);
  }
}

 
/*
* Check to see if the feed is already there before adding it
*/
function addFeed(title, url, description) {
  var rslt = executeToObjects('select id from feeds where title = ? and url = ?', [title, url])[0];
  if (rslt) { return; }
  run('insert into feeds (title, url, description) values (?, ?, ?)', [title, url, description]);
}

 
function selectPosts(feed_id) {
  return executeToObjects("select * from posts where feed_id = ?", [feed_id]);
}

서버단 코딩없이 자바스크립트가 직접 DB쿼리를 날리는 발상은 기가 막힙니다. 온라인 환경에서만 사용할 수 있는 웹 취약점을 보완하는 것 뿐만 아니라, 더욱 다양한 형태로 활용될 수 있을 것입니다. 예를 들어 얼마전 소개한 Ajax기반 운영체제에 있어서 오프라인은 로컬파일 접근과 다를바 없으며, 오프라인에서도 보여지는 웹서비스 또는 블로그는 Gears의 사용가능한 DB에 직접 접근하여 로딩속도 증가 및 트래픽 분산효과를 기대할 수 있고, 비교적 통신환경이 저조하거나 비용이 비싼 모바일은 더할나위없는 솔루션입니다. PDA 서비스중 하나인 아반고(avantgo)와 비슷한 맥락이기도 합니다. 자바스크립트만으로 하나의 완성된 애플리케이션을 개발한다는 관점으로 다가서면 Gears는 상식을 뒤엎습니다. 여담입니다만, 꾀나 인지도있는 자바스크립트 라이브러리인 Dojo는 Gears를 사용한 프로젝트를 발빠르게 시작한 모양입니다.(비디오 인터뷰)

그래서 개인적으로 Gears API를 이용한 오프라인 블로깅 프로젝트를 진행해 볼까 생각하고 있습니다. 버스나 지하철 기타 교통수단 속에서 노트북이나 PDA등으로 실제 블로그를 접속한 듯이 포스트를 읽고 작성하며 실제 온라인환경에서는 몇번의 싱크만으로 이루어지는 블로깅 멋지지 않습니까?


출처 : 파이어준
신고
Trackback 0 Comment 0
2007.06.06 02:04

UI 자바스크립트 라이브러리 Ext JS (yui-ext)

Jack Slocum란 분이 야후의 yui((Yahoo! UI library)를 확장하여 만든 자바스크립트 라이브러리인데 자주 사용되는 기능들 거의 다 있고 아주 막강합니다. 1.0부터는 이름을 Ext JS로 바꾸고 yui에 의존하지 않고 개발을 진행할 예정인것 같습니다.

단, 아직 개발중이라 변경이 많아서 실무에 적용하기 좀 어려운것 같습니다. 그러나 자바스크립트로 웹UI개발을 하는 개발자분이시면 예제만 보셔도 개발에 많은 도움이 될것 같아서 이렇게 올립니다.

개발자 블로그: http://www.jackslocum.com/

문서와 예제: http://www.yui-ext.com/deploy/yui-ext/docs/

공식 사이트: http://www.extjs.com/ (첫페지만 달랑, 현재 공사중인것 같습니다.^^)

1.0 Alpha 3 - Rev 2 다운로드: http://www.yui-ext.com/deploy/ext-1.0-alpha3.zip

1.0 Alpha 3 - Rev 2 문서: http://www.yui-ext.com/deploy/ext-1.0-alpha3/docs/
신고
Trackback 1 Comment 0
2007.05.31 00:53

IE Memory Leaks

IE의 메모리 릭에 관한 글입니다. 번역한 거라서 그런지 좀 덜 매끄러운 부분이 있네요.

엄밀히 말해서 JavaScript와 JScript는 다른 언어입니다. JScript가 JavaScript 버전에 대응하기는하나 다른 언어이기 때문에 허용하는 것과 그렇지 않은 것, 그리고 가비지 컬렉터와 DOM을 다루는 방법 등이 다릅니다.

JavaScript를 다룸에 있어서 서로 다르다는 사실을 알고 작성하셔야 나중에 "분명히 되야하는데 안되는" 일이 발생해도 당황하지 않을 수 있습니다. JScript에서는 되는게 JavaScript에서는 안될 수도 있으며 반대로 JavaScript에서는 되는 것이 JScript에서는 안될 수도 있습니다. 인코딩, 쉼표 등 이런 문제가 될만한 소재는 매우 다양합니다.

아래에 소개해드리는 글도 JScript가 DOM과 결합할 때 메모리 릭이 있다는 글입니다. 글 중간쯤에 쓴 것과 마찬가지로 옛날에는 별 문제가 없었을지 모르지만 최근의 Ajax 처럼 DOM을 많이 다루게 되는 경우라면 메모리의 누적이 심각한 오류를 불러올 수도 있습니다. 이 외에도 IE의 버그에 관련된 여러가지 팁들이 있는데 차차 작성 혹은 번역해서 올릴 생각입니다.

아... 잠깐 광고. 드디어 팁 갯수가 90개가 되었네요. ^^
.
.
.
.

이 문서는 원본글 작성자인 Douglas Crockford 씨의 동의를 얻어 번역한 글입니다.
_____________________________________________________________________
시스템이 메모리 관리를 올바르게 하지 못한다면 그것을 메모리 릭이라 부른다. 메모리 릭은 일종의 버그이다. 증상으로는 퍼포먼스를 저하시키거나 오류가 발생하는 것 등이 있다.

Microsoft 사의 인터넷 익스플로러에는 많은 종류의 메모리 릭이 내재하고 있는데, 그 중에서 가장 악질은 JScript 와 연동할 때 발생하는 것이다. DOM 객체가 JavaScript 객체(이벤트 핸들링 함수같은)의 레퍼런스를 포함하고, JavaScript 객체가 해당 DOM 객체에 대한 레퍼런스를 포함할 때, 순환구조가 형성된다. 이것 자체로는 문제가 되지 않는다. DOM 객체와 이벤트 핸들러에 대한 다른 참조가 없을 때, 가비지 컬렉터garbage collector (자 동 리소스 관리자)는 그들을 교정하고 사용되었던 메모리 공간을 재할당이 가능하도록 한다. JavaScript의 가비지 컬렉터는 순환에 대해 잘 이해하기 때문에 그것으로 인한 혼란이 없다. 하지만, 안타깝게도 IE의 DOM은 JScript가 관리한다. JScript의 메모리 관리자는 순환에 대해 잘 이해하지 못하기 때문에 매우 많은 혼란을 겪는다. 그 결과, 순환이 발생할 때, 메모리 교정이 일어나지 않으며, 교정되지 않은 메모리를 가리켜 누수되었다leaked고 한다. 시간이 흐르면, 이런 누수현상이 메모리 자원부족memory starvation을 유발한다. 사용된 셀이 메모리를 가득 채우면 브라우저는 자원부족으로 죽어버릴 것이다.

위에서 언급한 현상을 시연해 볼 수 있다. 첫번째 프로그램인 queuetest1에 서 10000개의 DOM 엘리먼트(span)를 만들고 동시에 최근 10개를 제외한 나머지를 전부 삭제할 것이다. 프로그램을 실행할 때, 윈도우즈의 작업관리자의 성능탭을 이용하면 페이지 파일(PF = Page File) 사용량이 항상 일정한지 볼 수 있다. PF 사용량이 변한다면 이는 메모리 할당이 비효율적이라는 것을 의미한다.
다음으로 두번째 프로그램인 queuetest2를 실행해보자. queuetest1과 똑같은 동작을 하지만 각 엘리먼트에 click 핸들러를 추가했다. 모질라와 오페라에서는 PF 사용량이 거의 일정한 반면에 IE에서는 메모리 누수로 초당 1MB 정도의 비율로 사용량이 점점 증가하는 것을 알 수 있다. 종종 이러한 누수현상은 모른채 지나쳤다. 하지만 Ajax 기술이 더 유명해짐에 따라 각 페이지에서 더 오래 머무르게 되고 더 많은 변화와 실패가 일반적이게 되었다.

IE가 자기일이나 순환 교정을 제대로 못하기 때문에 그 일은 고스란히 우리 몫이 되었다. 명시적으로 순환을 해제한다면 IE도 메모리를 교정할 수 있다. Microsoft에 따르면, closures가 메모리 누수의 원인이 된다고 한다. 이건 물론 매우 틀린 말이지만, Microsoft가 자신들의 버그에 대해서 개발자들에게 아주 나쁜 조언을 하는 결과를 가져왔다. 순환구조는 DOM 쪽에서 끊는 것이 더 쉽다. 사실상 JScript 쪽에서 순환구조를 끊기란 불가능하다.

엘리먼트를 다룰 때는, 순환구조를 끊기 전에 반드시 모든 이벤트 핸들러를 null로 만들어야 한다. 모든 이벤트 핸들러 프로퍼티에 null값을 할당하기만 하면 된다. 이런 기능을 필요할 때마다 혹은 purge와 같은 일반적인 함수로 만들어 실행할 수도 있다.

purge 함수는 DOM 엘리먼트를 인자로 받는다. 엘리먼트의 어트리뷰트를 루프돌면서, 함수를 찾으면 null 로 만들어 순환구조를 끊고 메모리가 교정될 수 있도록 한다. 함수는 또한 모든 하위 엘리먼트들에도 같은 작용을 해서 순환구조가 잘 제거되도록 한다. purge 함수는 모질라와 오페라에는 아무런 해가 없으며 IE에만 작용한다. purge 함수는 엘리먼트가 removeChild 메소드나 innerHTML 속성으로 삭제되기 전에 호출되어야 한다.

function purge(d) {
  var a = d.attributes, i, l, n;
    if (a) {
      l = a.length;
      for (i = 0; i < l; i += 1) {
        n = a[i].name;
        if (typeof d[n] === 'function') {
        d[n] = null;
      }
    }
  }
  a = d.childNodes;
  if (a) {
    l = a.length;
    for (i = 0; i < l; i += 1) {
      purge(d.childNodes[i]);
    }
  }
}

끝으로 세번째 프로그램 queuetest3를 실행해보자. 여기서는 DOM 엘리먼트를 삭제하기 전에 purge 함수를 호출했다.

queuetest1 : http://www.crockford.com/javascript/memory/queuetest1.html
queuetest2 : http://www.crockford.com/javascript/memory/queuetest2.html
queuetest3 : http://www.crockford.com/javascript/memory/queuetest3.html

덧글 1 :
IE에서 사용되고 있는 것은 JavaScript 를 본따 만든 JScript 입니다. MS에서 만든 JavaScript 호환 언어입니다. 대부분의 경우에는 큰 고민없이 그냥 사용하셔도 되지만 일부 문제 혹은 특성이 있으니 그 부분만 주의하시면 됩니다.

http://en.wikipedia.org/wiki/JScript

덧글 2 :
이 글에서의 순환은....
메모리 관리가 잘 안되는 JScript 와 DOM 간의 순환구조를 말합니다. JScript 함수가 DOM의 이벤트 핸들러로서 참조되고 JScript 에서는 함수 내부에 이 DOM 객체에 대한 참조를 가지고 있는 겁니다. 자세한 것은 위 링크에서 queuetest2 번의 onclick 핸들러의 함수 코드를 한번 보세요. DOM 객체를 내부에 참조하고 있음을 알 수 있습니다.



출처  : 행복한고니
신고
Trackback 0 Comment 0
2007.05.26 12:12

자바스크립으로 플래쉬 메뉴처럼...

톡박에 한번 올렸던 소스인데 조금 다듬어서 올립니다.
적절히 수정&가공하시면 멋진 메뉴가 나올거에요~

<html>
 <head>
  <title>Menu</title>
 </head>
<script>
var delay = 3;            // 메뉴 스피드(낮을수록 빠름)
var m_length = 20;    // 메뉴 간격
var sel_l_length = 30;    // 선택한 메뉴와 이전 메뉴 간격
var sel_r_length = 60;    // 선택한 메뉴와 다음 메뉴 간격


var m_sel = 0;            // 메뉴 선택 상태
var m_max = 0;        // 메인메뉴 갯수
var sm_alpha = 0;    // 서브메뉴 투명도
var id = new Array();    // 메인메뉴 ID
var sid = new Array();    // 서브메뉴 ID
var m_top = 0;                // 메인메뉴 y 위치
function on_load(){
    while(document.getElementById("menu"+(m_max+1)) != null){
        m_max++;
        id[m_max] = document.getElementById("menu"+m_max);
        sid[m_max] = document.getElementById("smenu"+m_max);
    };
    m_top = id[1].offsetTop;
    m_act();
}
function m_over(m){
    m_sel = m;
    for(i=1;i<=m_max;i++){
        if(sid[i] != null){
            if(m_sel == i){
                id[i].style.fontWeight = 'bold';
                sid[i].style.display = "";
                sm_alpha = 0;
                if ((navigator.appName.indexOf('Microsoft')+1)) {
                    sid[i].filters.alpha.opacity = sm_alpha;
                }else{
                    sid[i].style.opacity = (sm_alpha/100);
                }
                sid[i].style.top = id[i].offsetTop + id[i].offsetHeight + 40;
            }else{
                id[i].style.fontWeight = '';
                sid[i].style.display = "none";
            }
        }
    }
}
function m_act(){
    var goy = 0;
    for(i=1;i<=m_max;i++){

        // 메인메뉴 좌우 이동
        if(i>1)
            temp = id[i-1].offsetWidth + id[i-1].offsetLeft;
        if(i==1){
            gox=id[i].offsetLeft;
        }else if(m_sel == i){
            gox =  temp + sel_l_length;
        }else if(m_sel+1 == i){
            gox =temp + sel_r_length;
        }else{
            gox = temp + m_length;
        }
        id[i].style.left = Math.ceil(id[i].offsetLeft - (id[i].offsetLeft - (gox))/delay)+"px";

        // 메인메뉴 상하 이동
        if(m_sel == i){
            id[i].style.top = Math.ceil(id[i].offsetTop - (id[i].offsetTop - (m_top + 7))/delay)+"px";
        }else if(m_sel!=0){
            id[i].style.top = Math.ceil(id[i].offsetTop - (id[i].offsetTop - (m_top - 5))/delay)+"px";
        }

        // 서브메뉴
        if(m_sel == i && sid[i] != null){
            // 서브메뉴 투명도
            if(sm_alpha < 100){
                sm_alpha += 5;
                if ((navigator.appName.indexOf('Microsoft')+1)) {
                    sid[i].filters.alpha.opacity = sm_alpha;
                }else{
                    sid[i].style.opacity = (sm_alpha/100);
                }
            }
            // 서브메뉴 아래서부터 위로 나타남
            goy = id[i].offsetTop + id[i].offsetHeight;
            sid[i].style.top = (sid[i].offsetTop - (sid[i].offsetTop - goy)/delay)+"px";
        }
    }
    setTimeout('m_act()',20);
}

</script>
<style>
.sm_a{color: #666666; text-decoration:none; padding:0px 3px 0px 2px}
.sm_a:hover {color: #FFFFFF; text-decoration:none; background:#666666; padding:0px 3px 0px 2px}
div{font-family:verdana; font-size:10px; letter-spacing:-1px}
.smenu{top:50px; position:absolute; filter:alpha(opacity=0); color:#DDDDDD}
.mmenu{top:30px; position:absolute; cursor:pointer; padding-right:2px; color:#666666}
</style>
<body onload='on_load()'>
    <div class=mmenu style='left:200px;' id=menu1 onClick='m_over(1)'>
    ABOUT US<br>
    </div>
    <div id='smenu1' class=smenu style='left:200px; display:none'><a href='' class=sm_a>menu1</a> | <a href='' class=sm_a>menu2</a> | <a href='' class=sm_a>menu3</a></div>
    <div class=mmenu style='left:280px;' id=menu2 onClick='m_over(2)'>
    PRODUCT<br>
    </div>
    <div id='smenu2' class=smenu style='left:250px; display:none'><a href='' class=sm_a>menu4</a> | <a href='' class=sm_a>menu5</a> | <a href='' class=sm_a>menu6</a></div>
    <div class=mmenu style='left:360px;' id=menu3 onClick='m_over(3)'>
    STORY<br>
    </div>
    <div id='smenu3' class=smenu style='left:310px; display:none'><a href='' class=sm_a>menu7</a> | <a href='' class=sm_a>menu8</a> | <a href='' class=sm_a>menu9</a></div>
</body>
</html>


덧글1 :

와우~ 수고하셨습니다...
야후UI라이브러리.. extjs 등등 점점 UI 쪽으로 자바스크립트가 많이 쓰이는군요...
다른분들도 참고하시라고.. 그냥 알고있는 UI관련 URL을 적어봅니다.

http://extjs.com/
http://www.dhtmlgoodies.com/
http://www.dynarch.com/
http://qooxdoo.org/
http://mootools.net/

그럼 모두 열공하세요~

신고
Trackback 2 Comment 0


티스토리 툴바