웹에서 메모리 최적화

프론트앤드 개발을 하다보면 화면전환이 느리다거나 기타 에니메이션에서 느리게 동작한다고 클라이언트 쪽에서 이슈를 제기하는 경우가 있다 . 이때 조금이라도 빠르게 최적화 시킬 수 있는 방법이 있을까..?

 

크롬의 경우 개발자 도구에 들어가게 되면 기본 옵션 이외에 추가적인 설정으로 Layer옵션을 볼 수 있다. 

 

 

Layer에 들어가면 각 영역에 잡아놓은 섹션의 모양을 전개도처럼 확인할 수 있는데 원하는 영역을 클릭하게 되면 해당 섹션에서 잡아먹고 있는 메모리를 눈으로 확인 할 수 있다.!!! 화면에 안보이니까,, 라며 너무 과도하게 큰 이미지를 사용하고 있다면 딱 필요한 만큼만 사용하게끔 줄여도 메모리가 확 주는것을 눈으로 직접 확인하면서 작업할 수 있다!

IOS의 경우 레티나를 사용하기 때문에 일반 모니터에서보다 메모리 사용량이 배로 뛰는것을 확인한다면 간과할 수 는 없는 부분 중에 하나가 될 것이다.

 

추가적으로 에니메이션 요소들에 will-change라는 css 속성을 먹이게 되면 브라우저에게 예상되는 변화를 제공케된다. 그래서 실제 요소가 변화되기 전에 미리 브라우저에서 적절하게 최적화 할 수 있다고 한다. 하지만 너무 많은 will-change의 사용은 지양한다. will-change는 당장의 성능 문제를 해결하기 위한 마지막 수단으로 사용되기 때문이다.

 

/* 키워드 값 */
will-change: auto;
will-change: scroll-position;
will-change: contents;
will-change: transform;        /* Example of <custom-ident> */
will-change: opacity;          /* Example of <custom-ident> */
will-change: left, top;        /* Example of two <animateable-feature> */

/* 전역 값 */
will-change: inherit;
will-change: initial;
will-change: unset;