성능에 큰 악영향을 주는 CSS 의 나쁜 속성과 element 들.

그동안 개발을 1년간 해오면서,  UI 의 성능을 저해하는 녀석들을 찾아냈고

정리해놓으려한다. 추후 더 찾아내면 이 포스팅에 업데이트하도록 하겠다.

css 의 속성 하나를 추가하고 빼느냐에 따라 cpu 사용량이 3배가 넘게 나는것을 경험했기때문이다.

나는 나의 js 코드가 문제인가 하며 여기저기 말도 안되는곳을 들쑤고다녔었다.

width, height 대신 transform 을 사용하라 같은 이야기가 아니다.

 

1. box-shadow 

 

정말 사용하지 말아야 할 악마같은 녀석중 첫번째이다.

편하긴한데, 이게 ui 의 레이아웃이 변경할때 굉장히 CPU 나 GPU 를 spike 튀게했다.

무언가를 그리게 하는것은 UI 에서 피할수없지만, box-shadow 는 절대 다시 그리면 안되는 녀석이며..

그냥 사용하지말아야한다. (이게 내가 낸 결론이다)

Transform 은 무조건 성능이 좋다고 하지만 이 box-shadow 된 녀석을 transform 하지않는것임에도 불구하고

box-shadow 위로 transform 된 무언가가 날아다니면 웃기게도 cpu 가 급격하게 튀어올랐다.

요소들이 막 겹쳐있을때 그 사이에 box-shadow 가 껴있고, 그 위에 다른 녀석이 transform 되면

transform 이니까 성능이 좋은게 아니라 이 box-shadow 도 미묘하게 새로 그려지는 효과가 생기는것이다.

다른 부분에서 계속 원인을 찾아내기위해 디버깅을 했는데 결론은 이녀석이었다.

내 UI 에 그림자가 필요하다면 포토샵에서 shadow 를 그려서 

png 를 base64 로 변환한뒤에 background-image 에 집어넣어서 사용하는것이 답이다.

box-shadow 에서 png 로 shadow 를 변경했을때

CPU / GPU 가 90% -> 30% 가 되는것을 경험했따.

포토샵의 png 를 쓰면 background-color 같은것을 변경할수없어 불편하지않냐고 

반문할수있다.

나도 그런줄알았는데, png 를 사용하면 아래와같이 export 할수있다.

보이는것처럼 background 없이 그림자랑 innershadow 만 export 할수있다.

이 png 를 background-image 로 css 의 box-shadow 없는 순수 background 위에 레이어하는것이다.

조금 귀찮긴한데 성능을 위해 어쩔수없는 선택이다.

 

box-shadow 사용하면 cpu 90% -> png 쓰면 30% 됨.

box-shadow 는 gpu 도 개 많이 먹어서 iOS 옛날 아이폰같은걸로 테스트하면 개 느리다.

gpu acceleration 의 장점도 어느정도 최신 기기에서나 가능한것이지

옛날 기기쓰면 개 느린건 마찬가지다.

 

2. svg 의 <text> 

 

음악 관련 ui 에서는 knob 나 slider 변경시 text 가 다이나믹하게 변경되는데 이때

<svg> <text> 를 사용하였는데, 설명하기힘든 여러 문제를 일으켰다.

기본적으로 <svg> 와 transform 의 조합이 생각보다 성능이 안좋았다.

scale 을 사용시 rasterize 되는 부하가 생각보다 컸다.

제일 좋은 방법은  document.createTextNode () 후, nodeValue 를 통해

text 를 업데이트하는것이 textContent 를 업데이트하는것보다 약간 성능이 좋았다.

 

3. overflow : hidden

 

이것도 먼가 꺼림직한 녀석중하나인데, 어떤 경우에 명확히 성능을 떨어뜨리는지 

아직 정리하지못했다. 명확한것을 발견하면 업데이트하겠다.

 

4. filter

 

box-shadow 와 같은 녀석이다.

어떠한 filter 도 사용하지말자. 그냥 쓰지말자. 

svg filter 든 css filter 든 머리속에서 지우자 제발 영원히 쓰지말자!!!!

 

5. border

 

이것도 꽤 성능에 영향을 주는 녀석이다. 

왠만하면 border 를 안쓰도록 노력해야한다.

background-color 보다 더 많은 연산을 소모하는듯하다.

border-radius 까지 더해지면 상황은 더 악화된다.

 

6. border-radius

 

이건 쓰지말라고 할수는없다. 사실 현대 UI 의 핵심이라서.

이것만 기억하자.

border-radius 걸린 녀석과 안걸린 녀석을 transform 했을때 cpu 차이가 난다는거.

 

7. element 안에 element 어떻게든 하지않도록 노력하기 (nest 하지않도록 몸부리치기)

 

C++ 로 객체 지향 프로그래밍하는것마냥 HTML 구조를 짜게되면 점점 망하는 길로 간다.

최대한 플랫하게 하려고 몸부림쳐야한다.