jqm 으로 하이브리드 개발시 - 메모리 부분 정리한 1원팁
먼저
맨 처음 공부하는대 전체 방향과 툴을 알려 주신
Terrorboy 님과 다마리님께 감사의 말씀 드립니다...(ㅡㅡ) (_ _)
------------------------------------------------------------------------------
모바일을 처음 구입한지 4개월째 되어 가는 초보입니다.
구입 이후 12월초부터 작정하고,
Cordova 로 전체틀을 만드는 과정에서 메모리 부분에 대한 누수가 있는지 확인하는 과정에서
밤세면서 찾게된 나름의 1원 팁입니다.
틀린 부분이 있를수 있고, 제가 오판 하였를수도 있습니다.
제가 잘못 생각한 부분이 있다면 과감하게 지적 부탁 드립니다.
[ 테스트 환경 ]
모바일 기기 : 노트 2 ( 커널버젼 : 3.0.31 , 안드로이드 버젼 : 4.4.2 )
PC 사용 브라우져 : 크롬 ( 버전 40.0.2214.38 beta-m (64-bit) )
사용 script : jquery 1.11.1
Cordova : 4.1.3
[ 아래 테스트을 하기 위한 개발중인 프로그램 ]
[ 최종 결과 화면 ]
개발하는 프로그램 종료 이후
아무것도 않하고 가만히 있었더니
아래와 같이 시간이 흐른 이후 메모리가 줄었습니다.
개발하는 프로그램의 메인 페이지에서 테스트하는것이라
DOM 의 양이 크게 존재하기에 많이 줄어 들지 않은점은 참고해 주세요.
목적은
프로그램 종료시에 ( Native 의 kill 메세지을 이용한 방법도 있지만 여기서는 배제 )
백그라운드로 돌아가는 프로그램이 모바일 기기에
최대한 덜 영향을 주고 재 실행시에 기존 메모리 부분을
최대한 이용하는대 목적이 있습니다.
1) 프로그램 종료시에 jquery 의 fx timer 부분을 크게 늘려 버립니다.
jQuery.fx.interval = 999999;
기본값은( The default ) : 13 milliseconds
http://api.jquery.com/jQuery.fx.interval/ <--- 이곳을 참고 하세요
개발 프로그램 종료이후 ( 백그라운드 ) 가만히 살펴보면
메모리 변화와 이벤트가 부분이 사라집니다.
단, 문자을 받거나, 외부에서 메세지을 받으시려는 경우 영향을 주는지는 모르겠으며
Animation 에 영향을 주는 값으로만 알고 있습니다.
다른 곳( 문자을 받거나, 외부에서 메세지을 받으시려는 경우 )에서 이용하시는 경우 초을 변경하지 마시거나
적당한 값으로 변경해 주세요.
[ 적용전 ]
[ 적용후]
2) window 의 이벤트을 받지 않은것으로 설정합니다....
구글 검색한 결과로는 Draft 되었다고 하는대,
제가 테스트한 바로는 영향을 받더군요.
프로그램 종료되는 코드 위에 아래와 같은 코드를 삽입니다.
var e = window.event;
if (e.stopPropagation) e.stopPropagation();
다른 addEventListener 에 넣어도 무관합니다.
단, 종료 시점에 삽입하는것이 좋을듯하며,
다른 서버나 프로그램에서 메세지을 받으시는 경우
영향을 받을수 있으므로 이 코드는 사용하지 않은것이 좋을듯합니다.
var e = window.event;
if (e.stopPropagation) e.stopPropagation();
[ 적용전 ]
위의 1) 적용 후을 봐 주세요
[ 적용후 ]
종료할때 넣어 주었으므로
e.startPropagation(); 을 넣을 필요가 없습니다.
사유는 백그라운드로 돌아가고 있는
( 저의 아들은 과거에 사용했던 프로그램 목록으로 알고 있었습니다.
저 또한 처음에는 그런줄 알았다라는 ... )
프로그램을 선택하면 다시 새로운 창이 열리면서 다른 프로세서로 인식하더군요.
단, 메모리 부분는 추축을 해본건대, 공유메모리을 사용하고 있다라고 생각 했습니다.
또한, 안드로이드 OS 는 메세지 큐 방식이라는 생각이 들더군요. <--- 추측입니다
또한 가베지로 메모리가 관리되는 방식이라 바로 바로 나타나지 않지만,
위의 값들을 주었를때 몇초내로 반응이 보였습니다.
아래의 영상을 봐 주세요.
한참을 놔두니, 기존 프로세서는 죽고, 나머지도 크롬의 Inspect 에서 인식하지 않았습니다.
이건 왜 그런지 모르겠고, Inspect 가 꺼지기전에 갑자기 줄어둔 화면입니다.
3) 이제 개발하면서 메모리가 쌓이는 부분에 대한 부분입니다.
저는 jquery mobile 을 이용 했습니다.
아시다싶이 jquery mobile 은 page 방식으로 계속 추가하는 골격이라
선택( 화면에 표현되는 ) 된 페이지을 로딩한 이후 사용이 끝나고 다른 페이지로 이동할때
해당 Page 안의 DOM 을 삭제하는 방식입니다.
방법은 아래와 같습니다.
var select = document.querySelector.bind( document );
var body = select("body");
var selpage = select("#"+vapage); <---- vapage 은 아이디입니다.
body.removeChild(selpage);
selpage = null;
body = null;
이것을 적용했를때의 Inspect 영상입니다.
이것말고도 몇가지가 더 있는대, 좀더 테스트 해보고 의견을 나눴으면 좋겠습니다.
댓글 6개
폰 자체가 전체적으로 느려지기 마련인데 명쾌하게 좋은 정보 알려주셔서 감사합니다
저도 폰갭으로 감싸서 만들때 사양 좋은 핸드폰 들은 잘 굴렀는데
구형이라 불리우는 스마트폰들은........ 느리더라구요... 메모리 점유율이 많아서 그런가 흠흠;;;
좋은 정보 감사합니다!
가베지는 글로별 변수를 풀어주지 않으니
코딩으로 풀어 주시면 좀더 빨라진다라는
다마리님도 아시는.....
Gc , dom 이 앱의 속도에 가장 큰 관건인것 같아요
1) 100 ms 마다 Interval 이 돌고 있고
( 전역으로 사용하는 interval 로, 그 사이에 다른 interval 필요한 경우 함수 삽입 방식 ( Push ) - addPollFn )
2) 다른 페이지로 이동하는 경우, 또는 다시 원래의 페이지로 이동하는 경우 메모리에 계속 쌓임
가베지에 의존하게 되어 있음.