성능 최적화

소비가 많은 스타일을 신중하게 선택하세요

그리기 전에 소비가 많은 속성 브라우저에서 많은 계산이 필요합니다.

box-shadows
border-radius#🎜🎜 ## CSS 필터(성능 저하) )
과도한 리플로우 방지
일반적인 재정렬 요소:
width

height#🎜 🎜#

padding

margin
display# 🎜 🎜 #
#🎜 🎜 #top ### ## ## #####왼쪽### ## ## ####오른쪽#🎜🎜 ## ## 🎜🎜 ## 🎜 🎜## 하단 #
overflow
font-family
line - 높이
vertical-align
clear
# 🎜🎜#white-space
min-height
디스플레이 속성을 올바르게 사용하세요
display: 수직 정렬은 블록 뒤에 사용하면 안 됩니다. 🎜#
display: 테이블 뒤에 여백이나 부동 소수점을 사용하면 안 됩니다. 렌더링 계산량이 상대적으로 크기 때문에 최대한 적게 사용하도록 하세요.
애니메이션 성능 최적화
애니메이션의 구현 원리는 인간 눈의 '시각 지속성' 현상을 이용하여 짧은 시간 내에 여러 장의 정지 사진을 연속적으로 재생하는 것입니다. 그래서 육안은 시각적 잔상으로 인해 착각을 일으키고, 사진이 "움직이고 있다"고 잘못 생각하게 됩니다.
애니메이션의 기본 개념:
프레임: 애니메이션 과정에서 각 스틸 사진은 "프레임"입니다.#🎜 🎜#
# 🎜🎜# 프레임 지속 시간: 즉, 각 스틸 사진의 지속 시간 단위는 일반적으로 ms(밀리초)입니다.
프레임 건너뛰기(드롭된 프레임/드롭된 프레임): 고정된 프레임 속도를 사용하는 애니메이션의 경우 특정 프레임의 지속 시간이 평균 프레임 지속 시간보다 훨씬 길어 후속 프레임이 압축되어 손실됩니다.
일반 브라우저의 렌더링 새로 고침 빈도는 60fps이므로 웹 페이지에서는 프레임 속도가 50~60fps에 도달하면 애니메이션이 상당히 매끄럽고 사람들은 편안함을 느낍니다.

javaScript 기반 애니메이션을 사용하는 경우 setTimeout, setInterval 사용을 피하세요.

절대 위치 지정 대신 번역을 사용하면 더 나은 fps를 얻을 수 있고 애니메이션이 더 부드러워집니다.

3D 변형을 통해 GPU 가속을 켜는 등 더 많은 하드웨어 기능을 사용하세요

일반적으로 Chrome에서는 3D 또는 원근 변환(perspective Transform) CSS 속성과 불투명도의 CSS 애니메이션이 새로운 레이어를 생성하고, 하드웨어 가속 렌더링 아래 채널 최적화, GPU가 3D 변형과 같은 작업을 완료한 후 레이어(Compesite Layers)에 대해 복합 작업을 수행하여 브라우저의 대규모 다시 그리기 및 재배열을 방지합니다.

참고: 3D 변형은 더 많은 메모리와 전력을 소비합니다.

translate3d를 사용하여 오른쪽으로 500px 이동하는 애니메이션의 부드러움은 왼쪽을 직접 사용하는 것보다 훨씬 더 좋습니다.

.ball-1 {
  transition: -webkit-transform .5s ease;
  -webkit-transform: translate3d(0, 0, 0);
}
.ball-1.slidein{
  -webkit-transform: translate3d(500px, 0, 0);
}
.ball-2 {
  transition: left .5s ease; left：0;
}
.ball-2.slidein {
  left：500px;
}

CSS 선택기 성능 향상

CSS 선택기가 성능에 미치는 영향은 선택기와 일치하는 항목을 일치시킬 때 브라우저가 소비하는 시간에서 비롯됩니다. 따라서 선택기 최적화 원칙은 일치 시간을 더 소모하는 선택기 사용을 피하는 것입니다. 그 전에 하위 선택기 규칙과 같은 CSS 선택기 일치 메커니즘을 이해해야 합니다.

#header > a {font-weight:blod;}

우리 대부분은 왼쪽에서 오른쪽으로 읽으며 습관적으로 브라우저는 왼쪽에서 읽도록 설정합니다. 일치 규칙은 오른쪽에서 수행됩니다. 이 규칙의 비용은 높지 않을 것으로 추측됩니다.

브라우저는 다음과 같은 방식으로 작동한다고 가정합니다. 즉, id 헤더가 있는 요소를 찾은 다음 스타일 규칙을 직계 하위 요소의 a 요소에 적용합니다. 우리는 문서에 id 헤더가 있는 요소가 하나만 있고 a 요소의 하위 요소가 몇 개만 있다는 것을 알고 있으므로 이 CSS 선택기는 매우 효율적입니다.

실제로는 그 반대입니다. CSS 선택자는 오른쪽에서 왼쪽으로 규칙을 일치시킵니다. 이 메커니즘을 이해한 후에는 예제에서 효율적으로 보이는 선택기는 실제로 매우 높은 일치 비용을 갖습니다. 브라우저는 페이지의 모든 요소를 탐색하고 해당 상위 요소의 ID가 헤더인지 확인해야 합니다.

예제의 하위 선택자를 하위 선택자로 변경하면 페이지의 모든 요소를 순회한 후 루트 노드까지 상위 요소를 순회해야 합니다.

#header  a {font-weight:blod;}

오른쪽에서 왼쪽으로 일치하는 CSS 선택기의 메커니즘을 이해한 후, 현재 선택기의 왼쪽에 다른 선택기가 있는 한 스타일 시스템은 해당 선택기를 찾을 때까지 계속 왼쪽으로 이동한다는 것을 이해합니다. 규칙과 일치하거나 일치하는 항목이 없으면 종료됩니다. 가장 오른쪽에 있는 선택기를 키 선택기라고 부릅니다. ——자세한 내용

1. 범용 선택기 사용을 피하세요

/* Not recommended */
.content * {color: red;}

문서의 모든 요소를 일치시킨 후 브라우저는 문서의 루트 노드까지 클래스 콘텐츠와 요소를 일치시킵니다. 따라서 매칭 오버헤드가 매우 크기 때문에 와일드카드 선택자인 키 선택자의 사용은 피해야 합니다.

2. ID 선택기를 제한하려면 태그 또는 클래스 선택기를 사용하지 마세요.

/* Not recommended */
button#backButton {…}
/* Recommended */
#newMenuIcon {…}

3. 클래스 선택기를 제한하려면 태그를 사용하지 마세요.

/* Not recommended */
treecell.indented {…}
/* Recommended */
.treecell-indented {…}
/* Much to recommended */
.hierarchy-deep {…}

4. CSS 검색을 줄이려면 클래스 선택기 대체를 사용하세요

/* Not recommended */
treeitem[mailfolder="true"] > treerow > treecell {…}
/* Recommended */
.treecell-mailfolder {…}

5. 하위 선택기 사용을 피하세요

/* Not recommended */
treehead treerow treecell {…}
/* Recommended */
treehead > treerow > treecell {…}
/* Much to recommended */
.treecell-header {…}

6. 상속을 사용하세요

/* Not recommended */
#bookmarkMenuItem > .menu-left { list-style-image: url(blah) }
/* Recommended */
#bookmarkMenuItem { list-style-image: url(blah) }

성능 최적화