반응형 FrontEnd/20246 css 성능 향상 브라우저 렌더링은 뷰포트가 변경되거나 자바스크립트에서 노드를 만지는 일이 있거나 HTML내에서 스타일을 변경하거나 할 때 반복적으로 동작한다. 이러한 순간마다 화면을 새로 화면을 그리고( reflow, repaint), 이 행동이 반복적으로 사용되게 되면 성능을 저하시킨다. 그렇기 때문에 렌더링은 최적화 시키는 방법을 알아두는 것이 중요하다. [Reflow (layout)] 레이아웃 단계는 렌더트리를 생성하면서 계산된 노드와 스타일을 기기의 뷰포트에 맞게 어떻게 위치 시켜 보일지를 결정하는 단계이다. 상대적인 측정값도 모두 절대적인 픽셀로 변환이 된다. 리플로우는 레이아웃 요소들의 수치를 계산해서 새로운 위치에 나타나게 하는 동작이 일어날 때마다 반복해서 실행되게 된다. 또한 DOM 하위, 상위에 있는 .. 2024. 3. 5. [vue2] css position > transition 사용하기 카테고리 더 보기가 접혀있을 때는 최소 아이템 4개를 보여주고, 더보기를 눌렀을 때 있는 아이템 갯수만큼 4개씩 배치된 리스트가 출력되는 형식의 모습이다. 데이터가 없는 상태라고 가정했을 때 하드코딩으로 리스트를 데이터에 넣어서 구현을 해봤다. setExpand() { this.expandStatus = !this.expandStatus const refHeight = this.$refs.prdtList.clientHeight + 24 if (!this.expandStatus) { this.foldStyle.top = '106px' } else { this.foldStyle.top = `${refHeight}px` } }, clientHeight로 리스트의 높이값과 + 기본적으로 열려있는 값을 refHe.. 2023. 12. 19. 이전 1 2 다음 728x90 반응형
