IE 속도 개선 1차(라이브러리 개선)

김부승
김부승
Jul 27, 2017 · 3 min read

Dooray를 개발하며, 지금까지는 크롬을 위주로 개발을 지속적으로 진행해 왔었지만, 이제는 슬슬 IE에 대해서 신경을 쓰려고 하던 차에, IE에서 속도가 너무 느리다는 제보를 받고 IE의 성능을 느리게 하는 원인을 찾기 시작했다.

다국어 라이브러리 개선

Dooray에서는 AngularJS로 개발하고 있는데, 다국어를 적용하기 위하여 angular-gettext라는 라이브러리를 사용하고 있다. 그런데 이 라이브러리에서 IE에 대응하기 위해서 번역 파일을 받아서 메모리에 올리는 시점에 돔을 매번 새로 만드는 문제가 있었다.

angular-gettext가 ie에서 느린 원인이 되는 코드

위처럼 angular-gettext는 IE에서 Key에 태그가 들어간 경우 태그 안에 attribute 순서가 변경되는 것을 막기 위해 Key를 돔에 넣었다가 빼는 방식으로 Key를 변경한다.

이것은 번역 파일 1개에 2500개씩 4개 언어(한국어, 일본어, 중국어, 영어) 에서 수행이 되어 10,000개의 돔을 생성하게 된다. 즉, 처음 로딩 시에 엄청난 부하를 주는 것이다.

개선 전 소요시간 4.7초

그래서 attribute의 순서가 변경될 수 있는 Key만 이 작업을 수행하도록 수정하고, 이 값을 번역 파일끼리 공유하여 여러 번 작업을 하는 것을 막을 수 있었다.

개선 후 소요시간 0.1초

레이아웃 라이브러리 설정 변경을 통한 개선

angular-material 라이브러리를 통해서 레이아웃을 잡고 있었는데, 이 라이브러리에도 IE에서 문제가 발생한다는 점을 발견했다.

라이브러리를 초기화하는 순간에 동적으로 CSS를 추가하는데 이 CSS가 IE에 부하를 주어서 전체적으로 성능을 하락 시키는 문제가 있었다. 그래서 이 CSS를 추가하지 않도록 설정을 변경하여 처리하였다.

참고자료

김부승

Written by

김부승

성능 향상에 관심 많은 FE개발자

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade