내가 배우고, 듣고, 보고, 질문한 CSS 작성 경험을 요약하고 효율적인 CSS를 작성합니다. 렌더링 효율성 및 소비되는 리소스와 관련된 CSS의 렌더링 효율성에 대해 이야기합니다. 일부 내용은 제가 직접 이해한 내용을 바탕으로 작성되었으며, 오류나 누락이 있을 수 있음을 배제하지 않습니다.
1. 숫자와 대소문자를 조합한 16진수 색상 값
16진수 색상 값을 작성할 때 소문자를 사용하거나 3자리로 생략할 수 있습니다. 이 작성 방법이 브라우저의 렌더링 효율성에 영향을 미치는지 여부를 입증할 수 있는 결정적인 데이터는 없지만 16진수 색상 값에 대한 기본 표준입니다. 는 대문자와 6자리 숫자입니다. 알 수 없는 상황에서 위험을 감수하고 싶지 않으면 렌더링 효율성이 떨어집니다.
* 비승인 - 색상:#f3a;
* 사용을 권장합니다 - color:#FF33AA;
2. 디스플레이와 시인성의 차이
객체가 표시되는지 여부를 설정하거나 검색하는 데 사용됩니다. 숨겨진 개체 표시는 물리적 공간을 유지하지 않으며 가시성은 숨겨진 개체가 차지하는 물리적 공간을 유지합니다. 브라우저가 점유된 물리적 공간을 렌더링하면 리소스가 소비됩니다.
* 더 이상 사용되지 않음 - 가시성:숨김;
* 사용을 권장합니다 - display:none;
3. border:none과 border:0의 차이;
디스플레이와 가시성의 관계와 유사하게 공간은 각각 예약되지 않고 예약됩니다. border:0에 대한 자세한 내용은 테두리를 숨길 수 있지만 테두리 색상/테두리 스타일은 그대로 유지됩니다.
* 비승인 - 테두리:0;
* 사용을 권장합니다 - border:none;
4. 너무 작은 배경 이미지는 타일링하면 안 됩니다.
너비와 높이가 1px인 배경 이미지의 파일 크기는 매우 작지만, 너비와 높이가 500px인 패널을 렌더링하려면 타일링을 2500번 반복해야 합니다. 배경 이미지 렌더링 효율성을 높이는 것은 이미지 크기 및 용량과 관련이 있습니다. 최대 이미지 파일 크기는 약 70KB입니다.
* 비승인 - 너비와 높이가 8픽셀 미만인 타일 배경 이미지
* 사용 권장 - 적당한 크기와 크기의 배경 이미지
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 { }
8. 선택기를 저장할 가장 특별한 클래스를 선택해 보세요.
시스템 효율성을 감소시키는 가장 큰 이유 중 하나는 태그 클래스에서 선택기를 너무 많이 사용하기 때문입니다. 요소에 클래스를 추가하면 카테고리를 클래스로 세분화할 수 있으므로 하나의 태그에 대해 너무 많은 선택기를 일치시키느라 시간을 낭비할 필요가 없습니다.
* 더 이상 사용되지 않음 - treeitem[mailfolder="true"] > treerow > treecell { }
* - .treecell-mailfolder { } 사용을 권장합니다.
9. 자손 선택자를 피하세요
자손 선택자는 CSS에서 리소스를 가장 많이 사용하는 선택자입니다. 이는 특히 선택기가 레이블 클래스나 일반 클래스를 사용할 때 매우 리소스 집약적입니다. 많은 경우에 우리가 정말로 원하는 것은 하위 선택기입니다. 명시적으로 명시하지 않는 한 UI CSS에서는 하위 항목 선택기의 사용이 엄격히 금지됩니다.
* 더 이상 사용되지 않음 - 트리헤드 트리로우 트리셀 { }
* 더 좋아졌지만 여전히 작동하지 않습니다(다음 기사 참조) - treehead > treerow > treecell { }
10. 라벨 클래스에 하위 선택자를 포함하지 마세요
레이블 클래스에는 하위 선택기를 사용하지 마세요. 그렇지 않으면 요소가 발생할 때마다 일치 시간이 추가로 늘어납니다. (특히 선택자가 일치할 가능성이 있는 경우)
* 더 이상 사용되지 않음 - treehead > treerow > treecell { }
* - .treecell-header { } 사용을 권장합니다.
11. 모든 하위 선택기 사용에 주의하세요
하위 선택기를 주의해서 사용하세요. 사용하지 않을 방법이 생각나면 사용하지 마세요. 특히 RDF 트리와 메뉴에서는 이와 같은 하위 선택기를 자주 사용합니다.
* 더 이상 사용되지 않음 - treeitem[IsImapServer="true"] > treerow > .tree-folderpane-icon { }
RDF 속성은 템플릿에 복사될 수 있다는 점을 기억하십시오! 이를 사용하여 해당 속성을 기반으로 변경하려는 하위 XUL 요소의 RDF 속성을 복사할 수 있습니다.
* 사용을 권장합니다 - .tree-folderpane-icon[IsImapServer="true"] { }