CSS 웹 페이지 렌더링 효율성 향상을 위한 11가지 참고 사항

집

웹 프론트엔드

CSS 튜토리얼

CSS 웹 페이지 렌더링 효율성 향상을 위한 11가지 참고 사항_경험 교환

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 12:05 PM

1. 16진수 색상값의 자릿수와 대소문자

16진수 색상값을 작성할 때 소문자를 사용하거나 3자리로 생략해도 됩니다. 이와 같은 구체적인 데이터는 발견되지 않았습니다. 쓰기가 브라우저의 렌더링 효율성에 영향을 미치는지 여부를 입증하지만 16진수 색상 값의 기본 표준은 대문자와 6자리 표기법입니다. 알 수 없는 상황에서 위험을 감수하고 싶지 않으면 렌더링 효율성이 떨어집니다.

* 비승인 - 색상:#f3a;

* 권장 - 색상:#FF33AA

2. 사용된 제품 객체를 표시할지 여부를 설정하거나 검색합니다. 숨겨진 개체 표시는 물리적 공간을 유지하지 않으며 가시성은 숨겨진 개체가 차지하는 물리적 공간을 유지합니다. 브라우저가 점유된 물리적 공간을 렌더링하면 리소스가 소비됩니다.

* 비승인 - 가시성: 숨김

* 권장 - 표시: 없음

3. border:none;

표시와 가시성의 관계와 유사하며 각각 공간이 없고 예약되어 있습니다. border:0에 대한 자세한 내용은 테두리를 숨길 수 있지만 테두리 색상/테두리 스타일은 그대로 유지됩니다.

* 비승인 - border:0;

* 권장 - border:none

4. 타일에 비해 너무 작은 배경 이미지는 사용하지 않는 것이 좋습니다. >
폭과 높이가 1px인 배경 이미지입니다. 파일 크기는 매우 작지만, 폭과 높이가 500px인 패널을 렌더링하려면 타일링을 2500번 반복해야 합니다. 배경 이미지 렌더링 효율성을 높이는 것은 이미지 크기 및 용량과 관련이 있습니다. 최대 이미지 파일 크기는 약 70KB입니다.

* 비승인 - 너비와 높이가 8px 미만인 타일 배경 이미지

* 권장 - 적당한 볼륨과 크기의 배경 이미지

5. IE 필터를 주의해서 사용하세요

IE 필터에는 리소스를 소비하는 것 외에도 호환성 문제도 있습니다. PNG를 투명하게 만드는 필터가 있습니다. GIF 또는 JPG를 투명하게 표시하면 이 필터를 사용하지 않을 수 있습니다. IE7 이상에서는 이미 PNG 투명도를 지원하므로 IE6에서는 GIF 투명도만 사용하는 것이 좋습니다.

* IE 필터를 승인하지 않고 남용하면 리소스가 소모될 뿐만 아니라 호환성 문제도 발생합니다.

* 사용을 권장하며, 필터 사용을 피하려면 다른 방법을 선택하는 것이 가장 좋습니다.

6. *{margin:0; padding:0;}

* 와일드카드는 모든 태그를 초기화하며 브라우저 렌더링에는 일정 시간이 소요됩니다. . 일부 태그는 다른 브라우저에서 거의 동일하거나 일부 태그는 더 이상 권장되지 않습니다(사용하지 않기 때문에). 그러면 다시 초기화하기 위해 와일드카드가 필요하지 않습니다. 이렇게 하면 일부 리소스가 절약될 수 있습니다.

* 비승인, * 와일드카드 사용

* 비승인, div 범위 버튼 b 표 및 기타 태그는 내부 및 외부 채우기 스타일을 제어하기 위해 와일드카드에 포함되어야 함

* 권장, 선택적으로 와일드카드를 사용하여 내부 및 외부 패딩 스타일을 제어하세요.

7. 클래스나 ID를 설명하기 위해 추가 태그를 추가하지 마세요.

id를 키 선택기로 사용하는 선택기가 있는 경우 추가 태그 이름을 추가하지 마세요. ID는 고유하므로 존재하지 않는 이유로 매칭 효율성을 저하해서는 안 됩니다.

* 비승인 - 버튼#backButton { }

* 비승인 - .menu-left #newMenuIcon { }

* 권장 - #backButton { }

* #newMenuIcon { } 사용 권장 라벨 클래스 선택자가 너무 많습니다. 요소에 클래스를 추가하면 카테고리를 클래스 클래스로 세분화할 수 있으므로 하나의 태그에 대해 너무 많은 선택기를 일치시키느라 시간을 낭비할 필요가 없습니다.

* 비승인 - treeitem[mailfolder="true"] > treerow > treecell { }

* 권장 - .treecell-mailfolder { }

9. 🎜>
자손 선택자는 CSS에서 리소스를 가장 많이 소모하는 선택자입니다. 이는 특히 선택기가 레이블 클래스나 일반 클래스를 사용할 때 매우 리소스 집약적입니다. 많은 경우에 우리가 정말로 원하는 것은 하위 선택기입니다. 명시적으로 명시하지 않는 한 UI CSS에서는 하위 항목 선택기의 사용이 엄격히 금지됩니다.

* 동의하지 않음 - treehead treerow treecell { }

* 더 좋지만 여전히 좋지 않음(다음 기사 참조) - treehead > treerow > treecell { }

10. 클래스에 하위 선택기를 포함하지 마세요

태그 클래스에 하위 선택기를 사용하지 마세요. 그렇지 않으면 요소가 발생할 때마다 일치 시간이 추가로 늘어납니다.(Surtout lorsque le sélecteur semble susceptible de correspondre)

* Obsolète - treehead > treerow > treecell { }

* Recommandé - .treecell-header { }

11. Faites attention à l'utilisation de tous les sous-sélecteurs

Utilisez les sous-sélecteurs avec précaution. Si vous trouvez un moyen de ne pas l’utiliser, ne l’utilisez pas. En particulier, les arborescences et menus RDF utilisent fréquemment des sous-sélecteurs, comme celui-ci.

* Refusé - treeitem[IsImapServer="true"] > treerow > .tree-folderpane-icon { }

N'oubliez pas que les attributs RDF peuvent être copiés dans les modèles ! En profitant de cela, nous pouvons copier les attributs RDF sur les éléments XUL enfants que nous souhaitons modifier en fonction de cet attribut.

* Il est recommandé d'utiliser - .tree-folderpane-icon[IsImapServer="true"] { }