!중요한것이 성능에 안좋은가요?

!중요한것이 성능에 안좋은가요?

저는 그들이 싫어요. CSS의 계단식 특성을 무시하고, 주의 깊게 사용하지 않으면 추가하는 루프에 빠지게 됩니다.!important.

하지만 그들이 성능에 나쁜지 알고 싶습니다.

편집
빠른 답변을 통해 성과에 큰 영향을 미치지 않을 것으로 판단됩니다.하지만 다른 사람들을 단념시키기 위한 추가적인 주장으로라도 아는 것은 좋은 일입니다 ;)

EDIT 2
볼트클락은 만약 2개가 있다면!important가장 구체적인 것을 선택할 것이라고 사양서에 명시되어 있습니다.

성능에 뚜렷한 영향을 주지 않아야 합니다.Firefox의 CSS 파서를 보고 CSS 규칙 덮어쓰기를 처리하는 것이 관련 루틴이라고 생각합니다.

단지 "중요"에 대한 단순한 점검인 것 같습니다.

  if (aIsImportant) {
    if (!HasImportantBit(aPropID))
      changed = PR_TRUE;
    SetImportantBit(aPropID);
  } else {
    // ...
  }

또한, 댓글은

    /**
     * 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.
     * 
     * ...
     */

---

1. 파이어폭스는 수동으로 작성된 하향식 파서를 사용합니다.두 경우 모두 각 CSS 파일은 StyleSheet 개체로 구문 분석되며 각 개체에는 CSS 규칙이 포함됩니다.

2. 그런 다음 Firefox는 끝 값을 포함하는 스타일 컨텍스트 트리를 만듭니다(모든 규칙을 올바른 순서로 적용한 후).

보낸이: http://taligarsiel.com/Projects/howbrowserswork1.htm#CSS_parsing

위에서 설명한 객체 모델의 경우 파서가 다음과 같은 영향을 받는 규칙을 표시할 수 있다는 것을 쉽게 알 수 있습니다.!important많은 비용을 들이지 않고도 쉽게.성능 저하는 다음에 대한 좋은 논거가 아닙니다.!important.

그러나 유지보수성은 (다른 답변들이 언급한 것처럼) 타격을 입으며, 이는 유지보수에 반대하는 유일한 논거가 될 수 있습니다.

나는 그렇게 생각하지 않는다.!important브라우저가 규칙을 얼마나 빨리 일치시키는지와 관련하여 본질적으로 나쁩니다(선택기의 일부를 구성하지 않고 선언의 일부만을 구성합니다).

그러나 이미 설명한 대로 코드의 유지 관리성이 저하되므로 향후 변경 사항으로 인해 코드 크기가 불필요하게 커질 가능성이 있습니다.의 용법!important또한 개발자의 성능을 저하시킬 가능성도 있습니다.

정말 까다롭게 굴었다면 이렇게 말할 수도 있습니다.!importantCSS 파일에 11개의 바이트를 추가합니다. 이것은 많지 않지만, 꽤 많은 양이 있습니다.!importants 당신의 스타일시트에서 그것은 합산될 수 있습니다.

제 생각뿐입니다만, 안타깝게도 제가 생각하기에!important성능에 영향을 미칠 수 있습니다.

!important자리가 있습니다.저를 믿으세요.여러 번 저를 구해주었으며 단기적인 해결책으로 더 유용한 경우가 많습니다. 이를 통해 문제를 해결할 수 있는 보다 장기적이고 우아한 방법을 찾을 수 있습니다.

하지만 대부분의 것처럼 남용은 됐지만 '성과'에 대해서는 걱정할 필요가 없습니다.하나의 작은 1x1 GIF가 중요한 GIF보다 웹 페이지에서 더 많은 성능 히트를 기록할 것입니다.

페이지를 최적화하려면, 선택해야 할 중요한 경로가 더 많습니다 ;)

여기 뒤에서 벌어지고 있는 일은 CSS가 처리되는 동안 브라우저가 이를 읽고,!importantattribute, 브라우저는 다시 돌아가서 다음과 같이 정의된 스타일을 적용합니다.!important. 이 추가 프로세스는 작은 추가 단계처럼 보일 수도 있지만, 많은 요청에 응할 경우 성능 면에서 큰 성공을 거둘 수 있습니다.(출처)

CSS에서 !important를 사용하는 것은 보통 개발자의 자기애적이고 이기적이거나 게으른 것을 의미합니다.개발자들이 오는 것을 존중합니다...

사용할 때 개발자를 생각하는 것!important:

1. 내 흔들 CSS가 작동하지 않아요...으르렁거리는
2. 이제 어떻게 해야 하나요?
3. 그리고 나서.!important네..지금은 잘 되고 있습니다.

그러나 사용하기에 좋은 접근법은 아닙니다.!important단지 CSS를 잘 관리하지 못했기 때문입니다.성능 문제보다 더 나쁜 설계 문제가 많이 발생하지만 다른 속성을 우선시하기 때문에 추가 코드 라인을 많이 사용해야 합니다.!important그리고 우리의 CSS는 쓸모없는 코드들로 어수선해집니다.대신 우리가 해야 할 일은 우선 CSS를 매우 잘 관리하고 속성이 서로 덮어쓰지 않도록 하는 것입니다.

사용할 수 있습니다.!important. 하지만 다른 방법이 없을 때만 아껴 쓰고 사용하세요.

성능에 상관없이 나쁜 관행이기 때문에 사용하지 않는 것에 동의합니다.저만 그런 이유로, 저는 그들을 이용하는 것을 피하겠습니다.!important될 수 있는 대로

그러나 성능에 관한 문제는 다음과 같습니다.아니요, 눈에 띄면 안 돼요.효과가 있을지는 몰라도 너무 작아서 절대 눈치채면 안 되고 걱정하면 안 됩니다.

눈에 띄기에 충분할 정도로 의미가 있는 경우 코드에 단순한 문제보다 더 큰 문제가 발생할 가능성이 높습니다.!important. 사용 중인 핵심 언어의 일반적인 구문 요소를 단순히 사용하는 것은 성능 문제가 되지 않습니다.

당신의 질문에 답을 드리겠습니다; 아마도 당신이 고려하지 않은 각도:어떤 브라우저를 말씀하시는 겁니까?

각 브라우저에는 고유의 최적화된 렌더링 엔진이 있습니다.이제 문제는 각 브라우저의 성능에 어떤 영향을 미치는가 하는 것입니다.아마도!important한 브라우저에서는 성능이 떨어지지만 다른 브라우저에서는 성능이 정말 좋습니까?아마 다음 버전에서는 반대의 결과가 나올 것입니다.

여기서 제 요점은 웹 개발자로서 우리가 사용하고 있는 언어의 개별 구문 구조의 성능 영향에 대해 생각(또는 생각)해서는 안 된다는 것입니다.우리는 이러한 구문 구조를 사용해야 합니다. 왜냐하면 구문 구조는 우리가 원하는 것을 달성하기 위한 올바른 방법이기 때문입니다. 왜냐하면 그것들이 수행되는 방식 때문이 아니기 때문입니다.

성능 질문은 프로파일러를 사용하여 시스템에서 핀치 포인트가 어디에 있는지 분석하는 것과 함께 질문해야 합니다.진정으로 당신의 속도를 늦추고 있는 것들을 먼저 고치세요.개별 CSS 구성 수준으로 넘어가기 전에 해결해야 할 훨씬 더 큰 문제가 있을 것이 거의 확실합니다.

성능에 눈에 띄게 영향을 미치지 않습니다.그러나 코드의 유지보수성이 저하되므로 장기적으로 성능이 저하될 가능성이 있습니다.

사용해야만 했던 것!important이전에도 여러 번 사용할 때 입증 가능한 성능 히트가 없다는 것을 직접적으로 인지한 적이 있습니다.

참고로 사용할 수 있는 이유로 이 스택 질문에 대한 답을 참조하십시오.!important.

그리고 다른 분들도 다 언급하지 못한 부분에 대해서도 언급하겠습니다.!importantjavascript 함수를 작성하는 것 외에 인라인 css를 재정의할 수 있는 유일한 방법입니다(조금이라도 성능에 영향을 미칩니다).따라서 인라인 CSS를 재정의해야 할 경우 실제로 성능 시간을 절약할 수 있습니다.

음..!중요해요?!중요해요?

이 내용을 단계별로 살펴보겠습니다.

1. 파서는 사용 여부에 관계없이 각 속성에 대해 !important를 확인해야 합니다. 따라서 여기서 성능 차이는 0입니다.
2. 속성을 덮어쓸 때 구문 분석기는 덮어쓰는 속성이 !important인지 확인해야 하므로 여기서 성능 차이는 다시 0이 됩니다.
3. 덮어쓰는 속성이 !!important이면 !important를 사용하지 않기 위해 -1의 성능 히트인 속성을 덮어써야 합니다.
4. 덮어쓰는 속성이 !important이면 !important를 사용할 때 +1의 성능 부스트인 속성 덮어쓰기를 생략합니다.
5. 새 속성이 !important이면 덮어쓰는 속성이 !important 또는 !important - 성능 차이 0임에도 불구하고 구문 분석에서 덮어씁니다.

따라서 !important는 구문 분석기가 다른 경우에는 건너뛸 수 없는 많은 속성을 건너뛸 수 있기 때문에 성능이 더 우수합니다.

@ryan가 아래에서 언급하듯이, 인라인 CSS를 무시하고 자바스크립트를 사용하지 않는 유일한 방법은...그래서 불필요한 퍼포먼스 히트를 피할 수 있는 또 다른 방법은

음... 알고보니 중요한건 중요한거지!

그리고 또,

• !important 를 사용하면 개발자가 많은 시간을 절약할 수 있습니다.
• 때때로 전체 CSS를 다시 디자인하는 것으로부터 당신을 구해줍니다.
• 때때로 html이나 부모 cs 파일이 당신의 통제에 있지 않기 때문에 당신의 생명을 구할 수 있습니다.
• !중요한 요소가 실수로 다른!!중요한 요소에 의해 덮어쓰는 것을 분명히 막습니다.
• 그리고 때때로 브라우저는 셀렉터에 너무 구체적이지 않으면서 올바른 속성을 선택하지 않기 때문에 !important를 사용하는 것이 정말 중요해지고 CSS에 수많은 특정 CSS 셀렉터를 쓰지 않아도 됩니다. 따라서 !important를 쓰기 위해 바이트를 더 사용하더라도 다른 곳에서 바이트를 절약할 수 있다고 생각합니다.CSS 셀렉터가 지저분해질 수도 있다는 건 우리 모두 알고 있습니다.

그래서 저는 !important를 사용하면 개발자들이 행복해질 수 있다고 생각합니다. 저는 그것이 매우 중요하다고 생각합니다 :D

나는 예측할 수 없습니다.!important성능을 저해할 수 있습니다. 어쨌든 본질적으로 그렇지는 않습니다.그러나 CSS가 다음으로 가득 차 있는 경우!important, 이는 선택자들을 지나치게 특정하게 만들고 부모나 특정성을 추가할 자격이 부족하다는 것을 의미합니다.결과적으로 CSS는 비대해지고(이로 인해 성능이 저하됨) 유지보수가 어려워집니다.

효율적인 CSS를 작성하려면 필요한 만큼만 구체적으로 작성하고 모듈형 CSS를 작성해야 합니다.ID(해시 포함) 사용, 선택자 체인 또는 선택자 자격 부여를 자제하는 것이 좋습니다.

앞에 붙은 ID#CSS에서는 255 클래스가 ID를 재정의하지 않을 정도로 특정적입니다(fiddle by: @Faust).ID도 더 깊은 루티드 문제가 있지만 고유해야 하므로 중복된 스타일에 다시 사용할 수 없으므로 반복되는 스타일로 선형 CSS를 작성하게 됩니다.이렇게 하면 프로젝트마다 규모에 따라 영향을 미치지만, 유지보수성이 크게 저하되고, 경우에 따라서는 성능도 저하됩니다.

어떻게 특정성을 추가할 수 있습니까?!important, 체인, 한정 또는 ID(즉,#)

HTML

<div class="eg1-foo">
    <p class="eg1-bar">foobar</p>
</div>
<div id="eg2-foo">
    <p id="eg2-bar">foobar</p>
</div>
<div class="eg3-foo">
    <p class="eg3-foo">foobar</p>
</div>

CSS

.eg1-foo {
    color: blue;
}
.eg1-bar {
    color: red;
}
[id='eg2-foo'] {
    color: blue;
}
[id='eg2-bar'] {
    color: red;
}
.eg3-foo {
    color: blue;
}
.eg3-foo.eg3-foo {
    color: red;
}

JSFiddle

좋아요, 그럼 어떻게 되는 겁니까?

첫 번째 예와 두 번째 예는 동일하게 작동하고, 첫 번째 예는 말 그대로 클래스이며, 두 번째 예는 속성 선택기입니다.클래스와 Attribute selector의 특정성이 동일합니다..eg1/2-bar의 색상을 상속하지 않습니다..eg1/2-foo고유의 규칙이 있기 때문입니다.

세 번째 예는 선별자를 선별하거나 연결하는 것처럼 보이지만, 둘 다 아닙니다.연쇄는 선택기에 부모, 조상 등의 접두사를 붙이면 특정성이 추가됩니다.자격은 비슷하지만 선택자가 적용할 요소를 정의합니다.예선:ul.class그리고 연쇄:ul .class

이 기술을 뭐라고 부를지는 모르겠지만 의도적인 행동이고 W3C에 의해 문서화되어 있습니다.

동일한 단순 셀렉터가 반복적으로 발생하는 것이 허용되며 특이성이 증가합니다.

두 규칙 사이의 특수성이 동일할 때는 어떻게 됩니까?

@BoltClock이 지적한 바와 같이, 여러 개의 !중요한 선언이 있는 경우 가장 특정한 선언이 우선되어야 한다고 추측합니다.

아래 예제에서는 둘 다.foo그리고..bar동일한 특수성을 가지므로 동작은 CSS의 계단식 특성으로 되돌아갑니다. 따라서 CSS에서 선언된 마지막 규칙은 우선 순위를 주장합니다..foo.

HTML

<div>
    <p class="foo bar">foobar</p>
</div>

CSS

.bar {
    color: blue !important;
}
.foo {
    color: red !important;
}

JSFiddle

언급URL : https://stackoverflow.com/questions/13743671/is-important-bad-for-performance