'한글웹폰트'에 해당되는 글 1건

부제 : 한글 웹폰트는 메모리 돼지?


User Interaction이 많은 문서 편집 웹 애플리케이션을 개발 및 유지보수 하던 중 멘탈붕괴를 이르게 하는 문제를 만났다.


이름하야 돼지처럼 메모리를 점유하는 웹폰트 문제.(메모리 릭...의심된다.)


현재 개발중인 웹 애플리케이션에서는 한글 웹폰트(저작권 문제가 없는)를 설정하여 텍스트에 스타일 편집을 할 수 있도록 하는 기능이 있다.(지원되는 한글 웹폰트는 수십가지)




현상은 다음과 같다.


테스트 환경(VM) - 현상은 Native 환경에서도 동일하다.

OS : Window 10 Pro K (64bit)

Browser : Internet Explorer 11 (11.0.10240.16431)

CPU : Intel Core i7-4790 3.50GHz

Memory : 2GB


테스트 시나리오

한글 웹폰트를 적용한 컨텐츠(텍스트)가 있는 웹 애플리케이션을 지속적으로 새로고침한다. (10초 간격)


테스트 결과

지속적인 새로고침만 해도 IE11의 메모리 점유율이 무한정 누적되다가 약 10번~15번 정도 새로고침했을때 쯔음 약 1.5GB의 메모리까지 점유하다가 갑자기 죽는다.(crash 현상)



그 외에 다른 환경

동일 OS에서의 Edge, Chrome, FireFox 등의 브라우저

window 7, 8.1에서의 Internet Explorer 11, Chrome, FireFox 등의 브라우저

Internet Explorer 8,9,10 브라우저


등의 환경에서는 발생하지 않는다.


또한, 웹폰트를 설정하지 않으면(다운로드 하지 않으면) 몇시간씩 새로고침하여도(자동으로 하도록) 메모리 누적현상은 발생하지 않는다.



문제를 해결하기 위한 시도들 (문제가 발생한 환경에서...)

시도 1

- window unload/beforeunload 이벤트시 @font-face가 설정된 document.styleSheet개체의 cssRule과 style Node remove & cssText null 처리

결과

- 아무런 영향이 없다.


시도 2

window unload/beforeunload 이벤트시 웹폰트가 적용된 DOM Node remove

결과

- 아무런 영향이 없다.


시도 3

- 한글 웹폰트 몇개를 설정하고 마크업에 font-family 적용한 간단한 테스트 페이지를 작성 후

  웹폰트 서비스 업체에서 제공하는 웹폰트로 설정하여 테스트

결과

- 1 : 다운로드 하게 되는 웹폰트의 종류가 적거나 용량이 작으면 메모리 문제가 발생하지 않는다.

- 2 : 다운로드 하게 되는 웹폰트의 종류가 많거나 용량이 크면 메모리 문제가 발생한다.


시도 4

- 웹폰트가 설정된 웹페이지를 찾아서 동일한 테스트를 진행해 보았다.

결과

- 1 : http://www.typolink.co.kr/(웹폰트 서비스 사이트)의 한글 웹폰트 샘플페이지는 이러한 현상이 두드러지게 발생하지 않는다.(왜냐면 대부분의 샘플 페이지는 단 하나의 웹폰트만 로딩한다.)

- 2 : http://hangeul.naver.com/2014/nanum 네이버의 나눔 글꼴 사이트에서는 동일하게 메모리 누적현상 발생 후 crash 된다. 이페이지는 대략 4~5개의 용량이 큰 나눔글꼴 웹폰트를 로딩한다.

     만약 이 페이지에서 이러한 현상이 발생하지 않았다면,,, 개발자도구로 모든 소스를 뒤져서라도 해결방법에 대한 아이디어를 찾아보았을텐데 아쉽다...


그 외 시도들

- 엄청 무지 많음... 



결론

시도한 방법들이 너무 많아서 다 적을 순 없지만 그 테스트들로 인해 얻은 결론은

다운로드하는 (캐시가 되어 있어도 마찬가지다.) 한글 웹폰트의 용량이 크면

발생한다.

용량이 상대적으로 20배 이상 작은 영문 웹폰트는 아무리 많이 다운로드 하더라도 이 문제는 발생하지 않더라...OTL...

개수보다는 개별 웹폰트 파일의 용량이 이 문제를 유발하는 것 같다.


100% 해결할 수 있는 방법이 없다.

Window 10 Internet Explorer 11 버전의 리소스(웹폰트) 메모리 관리 버그로 판단된다.

OS와 IE11의 이 문제가 해결된 패치가 나오길 기다리는 수밖에...



혹시나 이러한 비슷한 문제를 겪었는데 해결하신 용자분이 계시다면 저에게 은총을 ... ㅠㅠ





그나저나 블로그에 글쓴게 어언 몇년만인지...




저작자 표시 비영리 변경 금지
신고
블로그 이미지

웹오피스 개발자 피스티스

사이냅소프트에서 웹오피스를 개발하고 있습니다.