성능과 튜닝 [JavaScript Tutorials] Introducing the closure (해석중)

황제낙엽 2009.04.10 03:02 조회 수 : 555 추천:140

sitelink1  
sitelink2  
sitelink3  
sitelink4 http://1 
extra_vars4 ko 
extra_vars5 http://www.javascriptkit.com/javatutors/closuresleak/index2.shtml 
extra_vars6 sitelink1 

Here is another piece of code. Instead of appending the script inline, we attach it externally:

[Exhibit 4 - Leak test with a closure]
·미리보기 | 소스복사·
  1. <html>   
  2. <head>   
  3. <script type="text/javascript">   
  4.     function LeakMemory(){   
  5.         var parentDiv = document.createElement("div");   
  6.                           parentDiv.onclick=function(){   
  7.             foo();   
  8.         };   
  9.   
  10.         parentDiv.bigString =    
  11.           new Array(1000).join(new Array(2000).join("XXXXX"));   
  12.     }   
  13. </script>   
  14. </head>   
  15. <body>   
  16. <input type="button"    
  17.        value="Memory Leaking Insert" onclick="LeakMemory()" />   
  18. </body>   
  19. </html>  

If you don't know what a closure is, there are very good references on the web where you may find it. Closures are very useful patterns; you should learn them and keep them in your knowledge base.

And here is the graph that shows the memory leak. This is somewhat different from the former examples. The anonymous function assigned to parentDiv.onclick is a closure that closes over parentDiv, which creates a circular reference between the JS world and DOM and creates a well-known memory leakage issue:

To generate leak in the above scenario, we should click the button, refresh the page, click the button again, refresh the page and so on.

Clicking the button without a subsequent refresh will generate the leak only once. Because, at each click, the onclick event of parentDiv is reassigned and the circular reference over the former closure is broken. Hence at each page load there is only one closure that cannot be garbage collected due to circular reference. The rest is successfully cleaned up.

이 게시물을
목록
번호 제목 글쓴이 날짜 조회 수
117 User Agent 관련 Reference URL 황제낙엽 2011.02.22 41
116 각 브라우저 별 User Agent 정보 황제낙엽 2011.02.22 823
115 History of User Agent 황제낙엽 2011.02.22 38
114 Navigator 객체란? 황제낙엽 2011.02.22 53
113 Understanding User-Agent Strings 황제낙엽 2011.02.22 76
112 User Agent 정보 모음 file 황제낙엽 2011.02.22 7768
111 ActiveX 설치 여부를 검사하는 스크립트 황제낙엽 2011.02.13 4053
110 자바스크립트 예약어 황제낙엽 2010.11.03 35
109 YUI Logger(Yahoo) 를 동적으로 로드하는 북마크릿 황제낙엽 2010.10.03 25
108 Javascript 를 사용하여 Binary File 읽기 황제낙엽 2010.09.29 500
107 크로스 브라우저를 위한 브라우저 검사 코드 file 황제낙엽 2010.08.27 86
106 Dynatrace For Ajax Performance 황제낙엽 2010.08.18 45
105 javascirpt IME-Mode 설정하기 황제낙엽 2010.08.17 1112
104 Iframe 내의 페이지 접근방법 황제낙엽 2009.11.12 59
103 외부 라이브러리 (.js) 의 바람직한 동적 로딩 (The best way to load external JavaScript) 황제낙엽 2009.10.05 124
102 숫자값으로의 변환 형태 황제낙엽 2009.09.02 18
101 Boolean 데이터 타입 황제낙엽 2009.09.02 16
100 toString 변환 테이블 황제낙엽 2009.09.02 13
99 URI 인코딩을 해야 하는 문자들 황제낙엽 2009.09.02 23
98 체인 생성자(생성자 체인), 프로토타입 체인 그리고 생성자 재지정 황제낙엽 2009.08.12 55
쓰기 태그