스크롤 영역을 벗어난 후에도 GPU 렌더링은 계속 된다.

발생일: 2015.10.08

키워드: translate3d, translate2d, GPU 렌더링

문제:

피드 형태의 길이가 긴 페이지에서 한 카드에 translate3d 로 플리킹을 적용해뒀다.

시간이 지나면 피드가 급격히 느려진다.

왜 그런 걸까?

해결책:

translate3d는 GPU 렌더링을 사용하고 있는데,

GPU 렌더링은 스크롤 영역을 벗어난 이후에도 계속 발생했기 때문이다.

해당 카드가 자주 노출되는 것이 아니라서, 일단은 tranlsate2d 변경하는 것으로 해결했다.

논의:

만약 해당 카드가 자주 노출되는 것이었다면, 성능 개선이 필요하겠다.

스크롤 된 이후에은 translate3d 속성을 제거하는 방식으로 처리하면 될 것 같다.

참고:

https://developers.google.com/web/fundamentals/performance/rendering/stick-to-compositor-only-properties-and-manage-layer-count