비용이 많이 드는 작업 최소화

• 일부 작업은 다른 작업보다 비용이 많이 들 것이다
  즉, 많은 resource를 소모하게 된다는 것이다
• 비용이 많이 드는 작업들은 UI를 디자인하고 구현하는 방법이 앱의 효율성과 성능에 큰 영향을 미칠 수 있다

1. build( ) 비용 제거하기

UI를 디자인 할 때 아주 중요한 부분 !

• 부모 widget을 build 할 때 자주 호출될 수 있기 때문에, build() 에는 반복적이고 비용이 많이 드는 작업은 피해야 한다
• 큰 기능을 가진 단일 위젯은 피해야 한다
  즉, 캡슐화를 하여 다른 위젯으로 분할하고, 변경 방식에 따라 분할해야 한다
• setState() 객체에서 호출되면 state의 모든 하위 위젯이 다시 build 되므로, setState() 으로 변경하려는 부분이 tree의 작은 부분이라면, 하위에서 호출해야 한다

2. saveLayer( ) 신중하게 사용하기

saveLayer() : 코드에서 명시적으로 호출하지 않아도 saveLayer() 를 사용하는 다른 위젯이나 패키지가 호출될 수 있다

하지만, 과도하게 호출 시, jank 가 발생가능하다

- saveLayer( ) 가 필요한 경우

런타임에 서버에서 오는 다양한 모양을 동적으로 표시해야 하는 경우
ex) 각각 투명도가 있고 겹칠 수도 있고 겹치지 않을 수도 있는 경우

3. Opacity와 Clipping의 최소화

불투명도와 클리핑 (이미지 자르는 기술) 는 값비싼 작업이므로 최소화 하는 것이 좋다

• Opacity 는 Widget 형식이 아닌 이미지에 직접 적용하는 것이 좋다
• Opacity Widget에 간단한 모양이나 텍스트를 rapping 하는 대신, 반투명 색상으로 이미지를 그리게 끔 하는 것이 속도부분에서 더 빠르다
• 모서리가 둥근 사각형을 만들 때 Clipping 을 사용하는 대신 borderRadius 같은 Widget class에서 제공하는 속성을 사용해야 한다

4. Grid와 List의 신중한 구현 ⚠️

Grid와 List가 구현된 방식이 있는 앱이라면 성능문제를 일으킬 수 있다 !!!!

ListView 클래스

• null 이 아닌 경우,itemExtent 를 통해 child 가 스크롤 되는 방향으로 지정된 범위를 갖도록 한다
• null 이 아닌 경우, PrototypeItem 항목은 스크롤 방향에서 자식 위젯이 주어진 위젯과 동일한 크기를 갖도록 한다

child 요소의 수명주기는 view에서 scroll out 되면, 연관된 하위 트리, 상태 및 render 객체가 파괴된다. 목록의 동일한 위치에 있는 새로운 자식은 scroll back 될 때 새로운 요소, 상태 및 render객체와 함께 다시 생성되는 것

필요한 것만 build 하는 것이 정말 중요함 !!

Ex) ListView.builder 생성자 사용

목록에 항목이 많은 경우, ListView.builder 생성자를 사용하여 한번에 모든 항목을 만드는 대신 화면에 scroll 하면서 항목을 만들어야 한다

즉, lazy 하게 만들으라는 것의 의미는, 미리 다 만들어 놓고 scroll 하는 것이 아니라 scroll 되는 동시에 목록들이 만들어지게 하라는 것이다

단 한 줄의 코드로, 100개 넘는 목록을 개선한 방법

itemCOunt !!!!!!!

// itemCount: optionWidgetsList.length 이었던 코드를 아래와 같이 수정함
itemCount: widget.isExpanded ? optionWidgetsList.length : 0,

• 확장되지 않은 범주에 대해 표시되는 범주에 대해서만 build 를 한 것 !!
• 한 줄의 코드만 추가했을 뿐인데 rendering 시간을 2배 이상 개선했다
• 핵심은 과도한 widget build를 식별하는 것이었다