CSS 성능 분석, CSS를 최적화하여 성능을 향상시키는 방법

10년 뒤에도 당당하게 살아보자, 서로 격려하자!

프런트엔드 성능 최적화는 항상 뜨거운 주제였습니다. 우리는 HTTP 요청 감소, 리소스 병합 및 압축 도구 사용, 스크립트 배치 등 페이지 성능을 향상하기 위해 항상 최선을 다하고 있습니다. 하단, 중복 요청, CSS 스프라이트 등을 피하세요. 실제로 파일 크기를 줄이고, 요청을 줄이고, JS를 최적화하는 방법이 많이 있습니다. CSS에 많은 관심을 기울이는 사람은 거의 없으며 일부는 CSS를 압축하지도 않습니다.

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

CSS 매칭 원칙

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

이런 코드 한 줄을 작성할 수도 있습니다

<span style="color: #000000;">//css
.con .loulan1 p span{ display: block; }

//html
</span><span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="con"</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="loulan"</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">><</span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>文字<span style="color: #0000ff;"></</span><span style="color: #800000;">span</span><span style="color: #0000ff;">></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>

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

그리고 CSS의 일치 원칙은 왼쪽에서 오른쪽이 아니라 오른쪽에서 왼쪽입니다. 즉, 이 코드 줄에서 먼저 페이지 모든 스팬 요소는 세트를 형성한 다음 모든 스팬 요소를 검색하여 부모 요소가 p 요소인 p 요소 또는 부모 요소가 p 요소인 부모 요소가 있는 스팬 수를 확인합니다. 또는...천천히 검색하여 넣습니다. 삭제 p 요소가 아닌 경우 상위 요소를 검색하여 컬렉션에 p 요소가 몇 개 있는지 확인하세요. 상위 요소의 클래스는 loulan입니다... 브라우저에서 다음과 같이 말했습니다.

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

<span style="color: #000000;">//css
.loulanSpan{ display: block; }

//html
</span><span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="con"</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="loulan"</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">><</span><span style="color: #800000;">span </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="loulanSpan"</span><span style="color: #0000ff;">></span>文字<span style="color: #0000ff;"></</span><span style="color: #800000;">span</span><span style="color: #0000ff;">></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>

css 선택기 가중치

CSS ID 클래스 태그 선택기의 우선순위는 다음과 같습니다. 가중치가 클수록 우선순위가 높아집니다.

ID:100

클래스:10

태그:1

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

1. CSS 중첩을 줄입니다. 일반적으로 블록 수준 요소는 클래스와 함께 추가되며, CSS 작성 시 블록 수준 클래스는 추가할 필요가 없습니다. 인라인 태그와 중첩되어 CSS 파일 크기를 줄이고 성능 낭비를 줄일 수 있습니다.

2. ID 선택자 앞에 중첩하지 마세요. ID는 본질적으로 고유하며 앞에 중첩하는 것은 성능 낭비입니다.

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

4. 약어 maigin, padding, color 값 등을 포함한 약어 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은 널리 사용되는 파일 압축 알고리즘입니다. 구글이나 바이두에서 검색하시면 됩니다.

물론 CSS 성능 최적화 기술은 이보다 더 많을 수 있습니다. 친구가 추가하고 공유할 수도 있습니다.