집 > 기사 > 웹 프론트엔드 > CSS 성능을 향상시키는 방법

CSS 성능을 향상시키는 방법

不言원래의: 2018-06-12 15:54:131330검색

이 글에서는 CSS 성능을 향상시키기 위한 CSS 성능 최적화 방법을 주로 소개합니다. 비표준 CSS는 많은 성능 문제를 야기하므로 CSS 성능 최적화 지식에 관심이 있는 친구는 반드시 CSS 성능 최적화 기술을 배우고 익히는 것이 매우 필요합니다.

불규칙한 CSS는 많은 성능 문제를 일으킬 수 있습니다. 이러한 문제는 일부 소규모 프로젝트에서는 충분히 명확하지 않을 수 있지만 대규모 프로젝트에서는 명백하게 드러납니다.

css 일치 원칙

CSS를 최적화하기 전에 CSS가 어떻게 작동하는지 이해해야 합니다. CSS는 선택기, 속성 및 속성 값으로 구성됩니다.

다음과 같은 코드 줄을 작성할 수 있습니다.

//css   
.con .loulan1 p span{ display: block; }   
//html   
<p class="con">   
    <p class="loulan">   
        <p><span>文字</span></p>   
    </p>   
</p>

여기서 con 클래스의 loulan 클래스에 있는 p 태그에 스팬 태그의 스타일을 정의합니다. 쓰기는커녕 말하기도 지겹습니다. 사실 브라우저를 사람으로 생각하면 렌더링할 때 확실히 성능이 낭비됩니다.

그리고 CSS의 일치 원리는 왼쪽에서 오른쪽이 아니라 오른쪽에서 왼쪽입니다. 즉, 코드 줄에서는 먼저 페이지의 모든 범위 요소를 찾아 집합을 구성한 다음 all span 요소를 위쪽으로 검색하여 부모 요소가 p 요소이거나 부모 요소가 p 요소인 부모 요소가 있는 범위가 몇 개인지 확인하거나... 천천히 검색하고 상위 요소가 p 요소가 아닌 항목을 삭제한 다음 위쪽으로 검색합니다. . 컬렉션에 있는 p 요소의 수를 보고 해당 상위 요소의 클래스는 loulan입니다... 브라우저는 다음과 같이 말했습니다. 너무 피곤합니다...

사실 오른쪽에서 왼쪽으로 검색하는 브라우저의 장점은 다음과 같습니다. 관련 없는 스타일 규칙 및 요소를 가능한 한 빨리 필터링합니다. 그리고 Firefox에서는 이 검색 방법을 keyselector(키워드 쿼리)라고 부릅니다. 소위 키워드는 스타일 규칙의 마지막(가장 오른쪽) 규칙입니다. 위의 키는 범위입니다. 원래 목적은 관련 없는 스타일 규칙을 가능한 한 빨리 필터링하는 것입니다. 여기서 부족한 것은 멈추지 않고 레이어를 레이어하는 것입니다. 그럼 그냥 스팬의 스타일만 정의하고 싶다면 그 스팬에 클래스를 추가하는 게 낫지 않을까요? 이때 누군가는 모든 요소에 클래스를 추가해야 하느냐고 묻고 싶습니다. 꼭 필요한 것은 아니지만 브라우저가 일치 항목을 찾는 방법을 이해한 다음 이를 현재 구조와 결합하여 가장 좋고 가장 편리한 작성 방법을 만들어야 합니다.

//css 
.loulanSpan{ display: block; }   
//html 
<p class="con">   
    <p class="loulan">   
        <p><span class="loulanSpan">文字</span></p>   
    </p>   
</p>

css 선택기 가중치

다음은 CSS ID 클래스 태그 선택기의 가중치입니다. 즉, 가중치가 클수록 우선순위가 높아집니다.

ID: 100

Class:10

태그:1

위의 두 가지 기초를 바탕으로 CSS를 최적화하여 성능을 향상시키는 방법에 대해 자세히 이야기해 보겠습니다.

1. 일반적인 상황에서는 블록 수준 요소를 3개 이상 중첩하지 않는 것이 가장 좋습니다. 클래스를 추가하면 내부에 인라인 요소를 추가할 필요가 없습니다. CSS를 작성할 때 블록 수준 클래스가 인라인 태그를 설정하면 CSS 파일의 크기가 줄어들 뿐만 아니라 성능 낭비도 줄어듭니다.

2. ID 선택기 앞에 중첩하지 마세요. ID는 본질적으로 고유하며 무게가 너무 큽니다.

3. 공개 스타일 클래스를 만들고 공개 클래스와 동일한 스타일의 긴 섹션을 추출합니다. 예를 들어 우리는 일반적으로 명확한 부동 소수점을 사용하고 한 줄이 한계를 초과할 때 줄임표를 표시합니다. 물론 Sass를 사용하는 경우입니다. , 상속을 통해 더 편리해질 것입니다. 동시에 저는 sass 사용을 더욱 옹호하고 있으며 앞으로는 반드시 sass 블로그를 작성할 것입니다.

4, 약어 maigin, padding, color value 등을 포함한 약어 CSS. margin-****이 2개 이상인 경우 margin: * * * *를 써서 파일 크기에 도움을 주세요.

5. 와일드카드 *나 [hidden="true"] 같은 선택기 사용을 줄이고 하나씩 검색해 보세요... 이 성능이 좋은가요? 물론 스타일을 재설정하는 등 필요한 작업은 필수입니다.

6. 어떤 사람들은 보다 정확한 위치 지정을 위해 클래스 이름 앞에 p.ty_p라는 태그 이름을 추가하는 것을 좋아하지만 이는 공개가 고유하지 않은 한 클래스 이름이 전역 범위에 있어야 하는 경우가 많습니다. 이 접근법은 라면이어야 합니다.

7. CSS의 상속 메커니즘을 현명하게 사용하세요. CSS의 많은 속성(예: 색상, 글꼴 등)을 상속할 수 있습니다. 상위 노드가 정의되면 하위 노드를 정의할 필요가 없습니다.

8. 공개 CSS 파일을 분할합니다. 대규모 프로젝트의 경우 대부분의 페이지의 공통 구조 스타일을 추출하여 별도의 CSS 파일에 넣을 수 있으므로 한 번 다운로드한 후 캐시에 저장할 수 있습니다. 추가적인 요청사항이 추가될 예정이며, 구체적인 접근 방식은 실제 상황에 따라 결정되어야 합니다.

9. CSS 표현식은 필요하지 않습니다. 하지만 기억해야 할 것은 우리가 아무리 멋져도 결국 정적이므로 표현식은 코드를 보이게 할 뿐입니다. 성능 낭비는 한 번만 계산되는 것이 아니라 일부 작은 이벤트로 인해 효과적이고 정확하기 위해 수행해야 하는 계산 및 평가 횟수가 늘어날 수 있으므로 성능 낭비는 상상을 초월할 수 있습니다. .

10, CSS 휴식을 적게 사용하는 것이 스타일을 재설정하는 것이 표준이라고 생각할 수도 있지만 실제로는 필요하고 관심이 있는 친구들은 normolize.css

11, cssSprite를 선택할 수 있습니다. 모든 아이콘 이미지를 합성하고 배경 이미지를 너비, 높이 및 배경 위치와 함께 사용하여 원하는 아이콘 이미지를 표시합니다. 이는 http 요청을 크게 줄이는 매우 실용적인 기술입니다.

물론 여전히 약간의 후속 작업이 필요합니다. CSS 압축(여기에는 온라인 압축 YUI 압축기가 있습니다. 물론 다른 도구를 사용하여 압축할 수도 있습니다. 매우 좋습니다), GZIP 압축, Gzip은 널리 사용되는 파일 압축 알고리즘이며 자세한 방법은 다음과 같습니다. Google이나 Baidu일 수 있습니다.

위 내용은 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되었으면 좋겠습니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요!

CSS 성능을 향상시키는 방법

관련 기사