나는 이 질문에 대해 자주 생각하지 않는다는 것을 인정합니다... 우리가 작성하는 CSS는 얼마나 효율적이며, 브라우저 렌더링은 얼마나 빠른가요?
이것이 브라우저 개발자가 걱정해야 할 사항입니다(페이지가 더 빨리 로드되고 사용자가 더 행복해질 것입니다). Mozilla에는 모범 사례에 대한 기사가 있습니다. 물론 Google도 이 문제에 대해 매우 우려하고 있으며 다음과 같은 기사도 있습니다: 브라우저 렌더링 최적화 .
그들이 주로 옹호하는 것이 무엇인지 살펴보고, 그 실용성을 논해 보자.
오른쪽에서 왼쪽으로
브라우저가 CSS 선택자를 읽는 방법에 대한 중요한 원칙은 오른쪽에서 왼쪽으로 읽는 것입니다. 이는 ul > li a[title="home"]과 같은 선택기의 경우 a[title="home"]이 먼저 읽혀진다는 것을 의미합니다. 이 부분을 보통 "키 선택기"라고 부릅니다("대상 선택기"라고도 부를 수 있나요 -_-!) 선택기의 마지막 부분도 선택된 레이블입니다.
ID가 가장 효율적이고 범용이 가장 느립니다.
ID, 클래스, 태그 및 범용 문자의 네 가지 대상 선택기가 있습니다. 각각의 효율성을 살펴보겠습니다.
#main-navigation { } /* ID (가장 빠름) */
body.home #page-wrap { } /* ID */
.main-navigation { } /* 클래스 */
ul li a.current { } /* 클래스 *
ul { } /* 태그 */
ul li a { } /* 태그 */
* { } /* 범용(가장 느림) */
#content [title='home'] /* Universal */ 그런 다음 오른쪽에서 왼쪽 선택기와 대상 선택기의 개념을 결합하면 다음 선택기가 효율적이지 않음을 알 수 있습니다.
#main-nav > li { } /* 빠른 것처럼 보이지만 실제로는 매우 느립니다*/
다소 혼란스럽기는 하지만... ID가 가장 효율적이기 때문에 브라우저는 ID로 li를 빠르게 찾을 수 있습니다. 그러나 사실은 li 태그가 먼저 읽혀진다는 것입니다.
태그로 수정하지 마세요
죽을 때까지 이런 짓을 하지 마세요:
ul#main-탐색 { }
ID는 고유하므로 태그로 장식할 필요가 없으므로 효율성이 떨어집니다.
가능하다면 클래스를 수정하는 데 사용하지 마세요. 클래스는 고유하지 않으므로 이론적으로는 다른 태그에서 사용할 수 있습니다. 원하는 경우 태그를 사용하여 다양한 스타일을 제어할 수 있으므로 태그 수정(예: li.first)이 필요할 수 있지만 이를 수행하는 사람은 거의 없으므로 그렇게 하지 마십시오.
자손 선택자를 사용하는 것보다 더 나쁜 것은 없습니다.
데이비드 하얏트:
자손 선택자는 CSS에서 가장 비용이 많이 드는 선택기이며, 특히 태그와 유니버설 뒤에 배치할 경우 엄청나게 비쌉니다.
다음과 마찬가지로 효율성의 절대적인 암입니다.
html 본문 ul li a { }
선택기가 렌더링되는 것보다 선택기가 렌더링되지 않는 것이 더 효율적입니다.
이에 대한 더 나은 증거가 있는지는 확실하지 않습니다. CSS 스타일시트에서 찾을 수 없는 선택기가 많으면 이상해 보일 수 있지만 선택기를 다른 말로 표현하려면 오른쪽에서 왼쪽으로라는 점에 유의하는 것이 중요합니다. , 일단 찾을 수 없으면 시도를 중단합니다. 그러나 발견되면 설명하는 데 더 많은 노력이 필요합니다.
선택기를 왜 이렇게 작성하는지 생각해 보세요.
이것에 대해 생각해 보세요:
#main-navigation li a { 글꼴 계열: Georgia, Serif }
아마도 선택기로 시작할 필요는 없을 것입니다(글꼴만 변경하려는 경우). 이것이 더 효율적일 수 있습니다:
#main-navigation { 글꼴 계열: Georgia, Serif }
실용적인 사항
앞서 언급한 Mozilla 기사도 새겨져 있나요? 10년이 지났습니다. 사실은: 컴퓨터가 10년 전보다 느려졌다는 것입니다(제가 오해한 것도 아니고 저자가 현재 WEB가 점점 더 복잡해지고 있다고 말하고 싶은 것도 아닙니다). 그땐 이런 일이 더 심각하게 받아들여졌던 것 같아요. 10년 전, 저는 잘생긴 21세 소년이었습니다. 물론 그곳에서 CSS에 대해 전혀 알지 못할 것이라고 생각했습니다. 그래서 이전 상황에 대해서는 말씀드릴 수 없지만... 렌더링 효율 문제가 심각하게 받아들여지지 않았던 이유는 크게 이슈가 된 적이 없었기 때문이라고 생각합니다.
내 의견은 다음과 같습니다. 무슨 일이 있어도 위에서 언급한 내용은 의미가 있으며 CSS 제작을 제한하지 않기 때문에 위 방법에 따라 수행할 수 있습니다. 하지만 너무 독단적일 필요는 없습니다. 당신이 완벽주의자이고 이전에 그런 것들을 고려한 적이 없다면, 이전에 작성한 스타일 중 일부를 다시 살펴보고 개선의 여지가 있는지 확인해야 할 때입니다. 웹 사이트가 확실히 느리게 렌더링되는 것을 발견하지 못했다면 너무 많은 주의를 기울이지 말고 향후 작업에 더 주의를 기울이십시오.
초고속, 실용성 제로
우리는 ID가 가장 효율적인 선택자라는 것을 알고 있습니다. 렌더링 속도를 최대화하려는 경우 각 개별 태그에 대해 ID를 구성한 다음 이 ID를 사용하여 스타일을 작성할 수 있습니다. 그것은 매우 빠르고 매우 우스꽝스러울 것입니다. 그 결과 의미 체계가 매우 열악하고 유지 관리가 매우 어렵습니다. 핵심에서도 이 작업이 수행되는 것을 봐서는 안 됩니다. 나는 이것이 효율적인 CSS를 위해 의미론과 유지 관리 가능성을 포기하지 말아야 함을 상기시켜 주는 역할을 한다고 생각합니다.
이 아이디어에 대해 나에게 이메일을 보내준 Jason Beaudoin에게 감사드립니다. 이 내용에 대해 더 알고 있거나 이와 같은 맥락에서 사용하는 추가 팁이 있으면 들어보세요!
그건 그렇고, CSS 선택기는 많은 JavaScript 라이브러리에서 사용되기 때문에 위에서 언급한 내용은 여전히 적용되며 ID 선택기는 여전히 가장 빠르며 하위 선택기 및 유사한 내용은 느립니다.
추신 : 누가 감히 N개 이상의 자손 선택자를 사용하는지 봅시다. . . 나의 아이디 사용을 반대하는 분들도 계십니다. . . 와하하. . .