CSS의 효율성 선언

CSS 코드를 여러 개의 선언으로 분리하면 사용자에게 더 많은 오버 헤드가 발생합니까?CSS의 효율성 선언

/* Font Styles */ 
#text{ font-size: 12px; color: white;} 
.highlight{ color: red} 
/* END */ 

/* Div Positioning */ 
#text{ position: absolute;} 
/* END */

수있는이 원인 잠재적 인 비 효율성 :

나는과 같이 조직 일부 .CSS 파일을 보았는가? 이 스케일에서 무언가 눈에 띄는 효과는 없지만 거대한 스타일 시트에서는 어떨까요?

출처

2009-10-06 Derleek

상식에 따르면 규칙이 많을수록 오버 헤드가 많아집니다. 그러나 CSS 구문 분석은 일반적으로 매우 빠르므로 스타일 시트가 실제로 ginormous하지 않는 한 걱정하지 않아도됩니다.

출처

2009-10-06 16:47:36 slikts

다른 것들도 고려해야 할 CSS와 HTML의 크기입니다. 작은 것들에 CSS 선택기를 만든 다음 HTML을 뿌리면 다운로드 크기가 올라가고 사용자는 약간 기다립니다. 더 이상 사이트를 볼 수 없습니다 - CSS를 파싱하는 작은 오버 헤드에이를 추가하면 최적화 할 가치가있는 것을 얻을 수 있습니다. –

수천 개의 선택기가있는 경우에만 가능합니다. 자세한 내용은이 기사를 참조하십시오. http://www.stevesouders.com/blog/2009/03/10/performance-impact-of-css-selectors/

출처

2009-10-06 16:46:50

이론적으로 대답은 '예'라고 생각합니다.

브라우저는 새 규칙을 구문 분석해야하며 DOM에서 #text 요소를 다시 찾아야하며 새 레이아웃/렌더링 계산을 수행해야합니다.

최적화를 시작하기 전에 문제가 될 때까지 기다리십시오.

출처

2009-10-06 16:47:45

CSS의 효율성 선언

답변

관련 문제