CSS 최적화, 성능을 향상시키는 방법은 무엇입니까?

방법: 1. CSS를 압축하여 파일 크기를 줄입니다. 2. 링크를 사용하여 CSS 파일을 가져옵니다. 3. CSS 레이아웃을 합리적으로 디자인하고, 스타일 재사용에 주의를 기울이고, 렌더링에 소요되는 시간을 줄입니다. 5. 플로팅 및 위치 지정과 같은 고성능 속성을 주의해서 사용합니다. 6. 페이지 재배열 및 다시 그리기를 최소화합니다. 7. 속성 값이 0이면 단위가 추가되지 않습니다.

이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

CSS 최적화는 주로 4가지 측면에 중점을 둡니다.

• 로딩 성능

  주로 파일 크기 축소, 로딩 차단 감소, 동시성 향상에서 시작

• 선택기 성능

• 렌더링 성능

• 유지보수성과 견고성

자세한 소개는 다음과 같습니다.

로딩 성능:

1. CSS 압축: 작성된 CSS를 패킹하고 압축하면 볼륨이 많이 줄어들 수 있습니다.

2. CSS 단일 스타일: 하단 여백과 왼쪽 여백이 필요한 경우

많습니다. 시간 선택:margin: top 0 Bottom 0;margin: top 0 bottom 0;

但margin-bottom: bottom;margin-left: left;

그러나 margin-bottom: Bottom;margin-left: left;는 더 효율적으로 수행됩니다.

3. 사용을 줄입니다. @import의 경우 링크를 사용하는 것이 좋습니다. 후자는 페이지가 로드될 때 함께 로드되고, 전자는 로드되기 전에 페이지가 로드될 때까지 기다리기 때문입니다.

4 CSS 레이아웃을 합리적으로 디자인하세요. 스타일을 재사용하고 렌더링 시간을 줄입니다. 시간을 투자하세요. 클래스와 ID를 선택할 때 *와 같은 전역 일치를 덜 사용하고 기본 스타일을 적절하게 설정(예: 테이블 설정{})하여 재사용을 개선하세요.

선택기 성능:

CSS 선택기는 오른쪽에서 왼쪽으로 일치합니다. 하위 항목 선택기를 사용할 때 브라우저는 모든 하위 요소를 순회하여 지정된 요소인지 등을 확인합니다.

**와일드카드 규칙을 사용하지 마세요**

예를 들어 *{}에는 놀라운 수의 요소가 있습니다. 계산! 필요한 요소만 선택하세요

** 태그는 최대한 적게 선택하되, 클래스를 사용하세요**

예: #nav li{}, li에 nav_item이라는 클래스 이름을 추가하면 됩니다. 다음과 같이 .nav_item{}을 선택하세요

**ID 또는 클래스 선택기를 제한하기 위해 태그를 사용하지 마세요**

예: ul#nav는 #nav

로 단순화되어야 합니다**하위 선택기를 최소한으로 사용하세요 가능한 한 선택기의 가중치 값을 줄이세요**

후손 선택기의 비용이 가장 높습니다. 선택기의 깊이를 최소로 줄이세요. 각 클래스를 연결하려면 더 많은 클래스를 사용하세요. label 요소

**상속 고려**

어떤 속성이 상속될 수 있는지 이해하고 이러한 속성에 대한 규칙을 반복적으로 지정하지 마세요.

렌더링 성능:

1 고성능 속성을 신중하게 사용하세요. float, Positioning;

2. 페이지 재배열 및 다시 그리기 최소화

CSS 작성 순서에 따라 재배열:

• 위치: positon, top, left, z-index, float

• 크기: 너비, 높이, 여백, 패딩

• 텍스트 시리즈: 글꼴, 줄 높이, 색상, 문자 간격

• 배경 테두리: 배경, 테두리

• 기타: 애니메이션, 전환

• redraw : 테두리, 윤곽선, 배경, 상자 그림자, 배경색을 사용할 수 있으면 배경을 사용하지 마세요.

(동영상 공유 학습:css 동영상 튜토리얼

)

3. 빈 규칙 제거: ｛｝;

4. 속성 값이 0이면 단위가 추가되지 않습니다.

5. 속성 값은 부동 소수점 0.**이며, 소수점 앞의 0은 생략 가능합니다.

6. 접두사: 앞에 브라우저 접두사가 있습니다.

7. CSS 로딩 속도에 영향을 미치는 @import 접두사를 사용하지 마세요.

8 코드 양을 줄이기 위해 CSS 상속 속성을 최대한 활용하세요.

10. 선택기의 중첩을 최적화하고 너무 깊은 수준을 피하십시오.

11. 동일한 페이지의 유사한 부분에 있는 작은 아이콘은 사용하기 편리합니다. 페이지 요청이 많아지지만 동시에 이미지 자체도 커지므로 사용하기 전에 장단점을 신중히 고려하세요.

12 CSS 파일을 페이지 상단에 배치하세요.

견고성:

1. 동일한 속성을 가진 스타일을 추출하여 통합하고 CSS의 유지 관리성을 향상시키기 위해 페이지의 클래스를 사용합니다.

2. 이전 기사에 이어 oocss도 CSS 성능을 향상시키는 방법 중 하나입니다. 재사용 가능하고 의미상 좋은 기본 클래스를 정의한 다음 HTML에 추가하면 이 방법도 많은 UI 프레임워크에서 사용됩니다. 예: class="btn btn-active btn-blue"

3. : CSS 코드를 외부 CSS로 정의합니다.

4. 컨테이너와 스타일 분리

더 많은 프로그래밍 관련 지식을 보려면

프로그래밍 비디오를 방문하세요. !

위 내용은 CSS 최적화, 성능을 향상시키는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!