[css] ! 중요한 성능에 나쁜가요?
나는 그들을 싫어하고 CSS의 계단식 특성을 무시하고 조심스럽게 사용하지 않으면 더 추가하는 루프가 생깁니다 !important.
그러나 성능이 나쁘다는 것을 알고 싶습니다.
편집
(빠른) 답장에서 성능에 (중대한) 영향을 미치지 않을 것이라고 결론 지을 수 있습니다. 그러나 다른 사람들을 낙담시키는 추가 주장 일지라도 알고있는 것이 좋습니다.).
편집 2
BoltClock은 2 개의 !important선언 이 있으면 스펙이 가장 구체적인 것을 선택한다고 말합니다.
답변
실제로 성능에 영향을 미치지 않아야합니다. 파이어 폭스의 CSS 파서를/source/layout/style/nsCSSDataBlock.cpp#572 보고 CSS 규칙 덮어 쓰기 를 처리하는 것이 관련 루틴이라고 생각합니다 .
“중요”에 대한 간단한 점검 인 것 같습니다.
if (aIsImportant) {
if (!HasImportantBit(aPropID))
changed = PR_TRUE;
SetImportantBit(aPropID);
} else {
// ...또한 의견 source/layout/style/nsCSSDataBlock.h#219
/**
* Transfer the state for |aPropID| (which may be a shorthand)
* from |aFromBlock| to this block. The property being transferred
* is !important if |aIsImportant| is true, and should replace an
* existing !important property regardless of its own importance
* if |aOverrideImportant| is true.
*
* ...
*/
Firefox는 수동으로 작성된 하향식 파서를 사용합니다. 두 경우 모두 각 CSS 파일은 StyleSheet 객체로 구문 분석되며 각 객체에는 CSS 규칙이 포함됩니다.
그런 다음 Firefox는 올바른 값으로 모든 규칙을 적용한 후 최종 값을 포함하는 스타일 컨텍스트 트리를 만듭니다.
보낸 사람 : http://taligarsiel.com/Projects/howbrowserswork1.htm#CSS_parsing
이제 위에서 설명한 개체 모델과 같은 경우 파서는 !important후속 비용을 들이지 않고도 쉽게 영향을받는 규칙을 표시 할 수 있습니다 . 성능 저하 는 반대의 좋은 주장 이 아닙니다!important .
그러나 유지 보수 가능성은 다른 답변과 같이 적중합니다. 이는 유일한 반대 의견 일 수 있습니다.
답변
!important브라우저가 규칙과 얼마나 빨리 일치하는지에 관해서는 본질적으로 나쁘지 않다고 생각합니다 (선택 자의 일부가 아니라 선언의 일부만 형성합니다)
그러나 이미 언급했듯이 코드의 유지 관리 가능성이 줄어들어 향후 변경으로 인해 코드 크기가 불필요하게 커질 수 있습니다. 또한 사용법을 사용 !important하면 개발자의 성능이 저하 될 수 있습니다.
당신이 존재한다면 정말 까다 롭고, 당신은 또한 말할 수있는 !important이 정말 많이하지, 당신의 CSS 파일을 11 추가 바이트를 추가,하지만 당신은 공정한 몇 만약 내가 추측 !important이 추가 할 수있는 스타일 시트에들.
안타깝게도 내 생각만으로는 !important성능 에 어떤 영향을 줄 수 있는지에 대한 벤치 마크를 찾을 수 없었 습니다.
답변
!important그 자리가 있습니다. 저를 믿어주세요. 그것은 여러 번 저축되었고 문제에 대한 길고 우아한 방법을 찾기 전에 단기 해결책으로 더 유용합니다.
그러나 대부분의 경우와 마찬가지로 악용되었지만 ‘성능’에 대해 걱정할 필요는 없습니다. 작은 1×1 GIF가 웹 페이지에서 더 중요한 성능을 발휘한다고 생각합니다!
페이지를 최적화하려면 더 많은 것이 있습니다 ! );)
답변
여기서 배후에서 진행되는 작업은 CSS가 처리 될 때 브라우저가이를 읽고 !important속성을 발견 한 다음 브라우저가로 정의 된 스타일을 적용한다는 것 !important입니다. 이 추가 프로세스는 약간의 추가 단계처럼 보일 수 있지만 많은 요청을 처리하는 경우 성능이 저하됩니다. (출처)
CSS에서! important를 사용한다는 것은 일반적으로 개발자 자기애 적이며 이기적이거나 게으른 것을 의미합니다. 오는 개발자를 존중하십시오 …
다음을 사용할 때 개발자의 생각 !important:
- 내 흔들리는 CSS가 작동하지 않습니다 … grrrr.
- 이제 어떻게해야합니까 ??
- 그리고
!important그래 …. 이제는 잘 작동합니다.
그러나 !importantCSS를 제대로 관리하지 않았기 때문에 사용하기에 좋은 접근 방식 은 아닙니다. 성능 문제보다 나쁜 디자인 문제가 많이 발생하지만 다른 속성을 재정의 !important하고 CSS가 쓸모없는 코드로 인해 복잡해지기 때문에 많은 추가 코드 줄을 사용해야 합니다. 대신 CSS를 잘 관리하고 속성이 서로 재정의하지 않도록해야합니다.
우리는 할 수 있습니다 사용합니다 !important. 그러나 다른 방법이 없을 때만 사용하십시오.
답변
성능에 관계없이 나쁜 습관이기 때문에 사용하지 않는 것에 동의합니다. 그 이유만으로 !important가능한 한 사용하지 않는 것이 좋습니다.
그러나 성능에 관한 문제 : 아니요, 눈에 띄지 않아야합니다. 그것은 몇 가지 효과가 나타날 수 있습니다, 그러나 당신이 그것을 통지해서는 안 그래서 작은해야한다, 아니다 해야 당신은 그것에 대해 걱정.
눈에 띄게 충분할 정도로 중요한 경우 코드보다 더 큰 문제가있을 수 있습니다 !important. 사용하는 핵심 언어의 일반적인 구문 요소를 간단하게 사용한다고해서 성능 문제가되지는 않습니다.
답례적인 질문으로 당신의 질문에 답하겠습니다. 고려하지 않은 각도 : 어떤 브라우저를 의미합니까?
각 브라우저에는 분명히 자체 최적화 엔진이 있으며 자체 최적화 엔진이 있습니다. 이제 각 브라우저의 성능에 어떤 영향이 있습니까? 아마도 !important한 브라우저에서는 좋지 않지만 다른 브라우저에서는 제대로 작동합니까? 그리고 아마도 다음 버전에서는 다른 방식일까요?
여기서 필자의 요점은 웹 개발자로서 우리가 사용하는 언어의 개별 구문 구조의 성능에 대한 영향을 생각하거나 생각할 필요가 없다는 것입니다. 우리는 이러한 구문 구성을 사용해야합니다. 왜냐하면 그들이 수행하는 방식 때문에하지 않기를 원하는 올바른 방법이기 때문입니다.
시스템에서 핀치 포인트가있는 위치를 분석하기 위해 프로파일 러를 사용하여 성능 질문을해야합니다. 진정으로 속도를 늦추는 것들을 먼저 수정하십시오. 개별 CSS 구성 수준으로 내려 가기 전에 해결해야 할 훨씬 더 큰 문제가 거의 확실합니다.
답변
성능에는 눈에 띄게 영향을 미치지 않습니다. 그러나 코드의 유지 관리 성이 떨어 지므로 장기적으로 성능이 저하 될 수 있습니다.
