CSS 성능을 향상시키는 방법

개선 방법: 1. CSS 파일에 스타일을 작성하고 헤드에서 참조합니다. 2. "@import"를 사용하지 마세요. 3. 레벨이 적을수록 더 좋습니다. 5. CSS 상속을 사용하여 코드 양을 줄입니다. 6. 부동 및 위치 지정 속성을 신중하게 사용합니다. 7. 다양한 브라우저 접두사 등을 표준화합니다.

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

CSS 성능을 향상시키는 방법은 페이지 로딩 성능과 CSS 코드 성능에 따라 주요 성능은 로딩 성능(주로 파일 크기 감소, 차단된 로딩 감소, 동시성 향상에서 시작), 선택기 성능입니다. , 렌더링 성능, 유지 관리성.

1. 별도의 CSS 파일에 스타일을 작성하고 헤드 요소에서 참조해 보세요

(1) 콘텐츠와 스타일이 분리되어 관리 및 유지 관리가 쉽습니다

(2) 페이지 크기 줄이기

(3 ) CSS 파일 캐시 및 재사용이 가능하여 유지 관리 비용 절감

2. @import를 사용하지 마세요

CSS를 도입하기 위해 @import 속성을 사용하면 사용자가 느린 네트워크에서 탐색할 때 스타일이 없는 페이지가 표시됩니다. .그러면 CSS 파일이 다운로드되면서 적절한 스타일을 볼 수 있습니다

3. 복잡한 선택기를 사용하지 마세요. 레벨이 적을수록 좋습니다.

프로젝트에 모듈이 점점 많아지고 기능도 점점 많아집니다. CSS 선택기는 여러 레이어에 중첩되어 점점 더 복잡해질 것입니다. 선택기의 중첩은 3개 수준을 초과하지 않는 것이 좋습니다. 간결한 선택기는 CSS 파일의 크기를 줄이고 페이지 로딩 성능을 향상시킬 수 있을 뿐만 아니라 브라우저가 이를 구문 분석할 때 더 효율적입니다. 또한 개발자의 개발 효율성을 향상시키고 개발 비용을 절감합니다.

4. 페이지의 스타일 파일을 간소화하고 사용하지 않는 스타일을 제거합니다.

(1) 스타일 파일이 너무 커서 로딩 속도에 영향을 미칩니다.

(2) 브라우저가 중복된 스타일 일치를 수행하여 렌더링 시간에 영향을 미칩니다. .

현재 페이지에서 요구하는 CSS에 따라 현재 페이지에서 사용되는 CSS 파일을 병합하면 하나의 파일로 병합할 수 있다는 장점이 있습니다. 스타일 파일은 브라우저에 의해 캐시되며, 다음과 같은 경우 스타일 파일을 다운로드할 필요가 없습니다. 다른 페이지에 들어가는 중입니다.

5. CSS 상속을 사용하여 코드 양 줄이기

일부 CSS 코드는 상속될 수 있다는 것을 알고 있습니다. 상위 요소가 스타일을 설정했다면 하위 요소는 스타일을 설정할 필요가 없습니다. 성능을 향상시키는 방법.

6. 주의해서 고성능 속성을 사용하세요: 플로팅 및 위치 지정

플로팅의 다양한 복잡한 레이아웃 규칙은 탐구적인 로컬 리플로우 레이아웃 알고리즘이 될 것입니다. 브라우저는 이를 처리하는 데 많은 노력을 기울입니다. 반면에 플로팅 요소의 레이아웃에는 더 많은 요소가 포함됩니다. 동일한 레이아웃 공간에서 모든 부동 요소는 "정적 레이어" 위의 "부동 레이어"에 존재합니다. 부동 레이어의 여러 부동 요소는 서로 영향을 미칠 뿐만 아니라 부동 요소도 정적 레이어와 상호 작용합니다.

7. CSS 스타일 접두어

브라우저 접두어를 먼저 지정하고 표준 접두어를 마지막으로 사용하여 표준화합니다.

8. CSS 속성 값

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

속성 값은 다음과 같습니다. 부동 소수점 숫자 0입니다.** 소수점 앞의 0은 생략할 수 있습니다

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