프런트엔드 성능 최적화에 대한 CSS 해석의 구체적인 분석

@import 사용을 피하세요

외부 CSS 파일에서 @import를 사용하면 페이지 로드 시 지연이 추가됩니다.

CSS 파일 first.css에는 @import url("second.css") 내용이 포함되어 있습니다. 브라우저는 먼저 first.css를 다운로드하고 구문 분석하고 실행한 다음 두 번째 파일인 second.css를 검색하고 처리합니다. 간단한 해결 방법은 @import 대신 태그를 사용하여 CSS 파일을 병렬로 다운로드하여 페이지 로딩 속도를 높이는 것입니다.

AlphaImageLoader 필터를 피하세요

AlphaImageLoader가 무엇인가요? 7.0 이하 버전에 표시되는 PNG 이미지의 반투명 효과를 수정하는 데 사용되는 IE의 고유한 속성입니다.

문제: 브라우저가 이미지를 로드하면 콘텐츠 렌더링이 종료되고 브라우저가 정지되어(이미지뿐만 아니라) 각 요소에 대해 한 번씩 계산되므로 메모리 소비가 늘어납니다.

해결책: 1. 대신 PNG8 형식을 사용하세요. 이 형식은 IE에서 잘 작동합니다. A 2. 실제로 IE7 이상의 사용자를 무효화하려면 AlphaImageLoader를 사용하여 다음 줄 _filter를 사용해야 합니다.

CSS 표현식 피하기

예:

background-color: expression((new Date()).getHours()%2?"#FFFFFF": "#000000" );

CSS 표현식은 CSS 속성을 동적으로 설정하는 강력하지만 위험한 방법입니다. Internet Explorer는 버전 5부터 CSS 표현식을 지원합니다.

문제: 페이지를 표시하거나 확대/축소하거나 스크롤하거나 마우스를 움직일 때 다시 계산됩니다. CSS 표현식에 카운터를 추가하여 표현식이 평가되는 빈도를 추적합니다. 페이지 위에서 마우스를 움직이는 것만으로 10,000개 이상의 계산을 쉽게 수행할 수 있습니다.

해결책: CSS 표현식 계산 수를 줄이는 방법은 일회성 표현식을 사용하는 것입니다. 이 표현식은 처음 실행될 때 지정된 스타일 속성에 결과를 할당하고 이 속성을 사용하여 CSS 표현식을 대체합니다. 페이지 주기 동안 스타일 속성을 동적으로 변경해야 하는 경우 CSS 표현식 대신 이벤트 핸들러를 사용하는 것이 실행 가능한 옵션입니다. CSS 표현식을 사용해야 하는 경우 해당 표현식은 수천 번 평가되며 페이지 성능에 영향을 미칠 수 있다는 점을 기억하세요.

와일드카드 선택자를 피하세요

CSS를 배우는 초기에는 웹 페이지를 만들 때 레이블의 기본 레이아웃과 동일한 렌더링에 대한 여러 브라우저 간의 차이를 없애기 위해 *{margin: 0; padding: 0;}을 자주 사용했습니다. 라벨의.

그리고 가끔 Reset이 쓰여지는 방식을 보게 됩니다.

body,p,h1,h2,h3,h4,h5,input,select,textarea,table{margin：0；padding：0;}

re이 사람들이 다음과 같이 쓴 이유는 무엇입니까? . 따라서 이 명령문은 브라우저에서 다음과 같이 구현됩니다.

브라우저는 모든 a 요소를 탐색합니다. —>부모 요소의 ID가 헤더인지 여부.

예:

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

이 예제는 이전 예제보다 시간이 더 많이 걸립니다

ㅋㅋㅋ 예:

#header  a {font-weight:blod;}

문서의 모든 요소와 일치——> 문서의 루트 노드까지 레벨별로 선택한 클래스와 요소를 일치시킵니다.

따라서 와일드카드 선택자를 사용하지 않아야 합니다. 불필요한 스타일 제거먼저, 쓸모없는 스타일을 삭제하면 스타일 파일의 크기가 줄어들고 리소스 다운로드 속도가 빨라질 수 있습니다. 두 번째, 브라우저의 경우 일반적으로 모든 스타일 규칙은 현재 페이지에 일치하는 규칙이 없더라도 구문 분석되고 색인이 생성됩니다. 일치하지 않는 규칙을 제거하고, 색인 항목을 줄이고, 브라우저 검색 속도를 높이세요. 단일 규칙 속성 선택기를 사용하지 마세요. 브라우저는 모든 요소와 일치합니다. -> href 속성이 있고 herf 속성 값이 "# index"와 같은지 확인하세요. ——> 문서의 루트 노드까지 레벨별로 선택한 클래스와 요소를 일치시킵니다.

정규식 속성 선택자를 피하세요

정규식 일치는 카테고리 기반 일치보다 훨씬 느립니다. 대부분의 경우 속성 선택기에 *=, |=, ^=, $= 및 ~= 구문을 사용하지 않도록 노력해야 합니다.

위 내용은 프런트엔드 성능 최적화에 대한 CSS 해석의 구체적인 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!