외부 CSS와 인라인 스타일 성능 차이?

88

내 친구는 <div style=""></div>압축 된 CSS 파일 대신 link href헤드 섹션에 넣어두면 성능이 향상 된다고 말했습니다 . 사실인가요?

css  performance  inline-styles 
— 성 조지
소스
1
내가 아는 한, 그것들은 (대략) 동일하지만 확인할 수 없습니다.
— Nightfirecat 2011
3
이것은 약간의 빛을 비출
— Sudhir Bastakoti
1
인라인 스타일 인 유지 관리의 악몽을 처리하려면 상당한 성능 향상이 필요합니다. 지금까지 그 증거를 본 적이 없습니다.
— steveax 2011
1
이전 버전의 IE의 경우 성능 향상이 매우 중요합니다. HTML 테이블이 CSS 스타일링과 함께 접착제처럼 작동하는 것을 보았습니다.
— Jonathan

답변:

90

친구가 언급 한 성능 향상은 CSS 파일을 사용하는 다른 요소를 통한 성능 향상의 양에 비해 너무 사소한 것 같습니다.

스타일 속성을 사용하여 브라우저는 특정 요소 (이 경우 요소)에 대한 규칙 만 그립니다 <div>. 이렇게하면 CSS 엔진이 CSS 선택기와 일치하는 요소 (예 : a.hover또는 #someContainer li) 를 찾기위한 조회 시간이 줄어 듭니다 .

그러나 스타일을 요소 수준에두면 CSS 스타일 규칙을 별도로 캐시 할 수 없습니다. 일반적으로 CSS 파일에 스타일을 넣으면 캐싱이 수행되므로 페이지를로드 할 때마다 서버에서로드되는 양이 줄어 듭니다.

스타일 규칙을 요소 수준에두면 어떤 요소가 어떤 방식으로 스타일이 지정되었는지 추적 할 수 없게됩니다. 또한 여러 요소를 함께 다시 칠할 수있는 특정 요소를 칠하는 성능 향상에 역효과를 줄 수 있습니다. CSS 파일을 사용하면 CSS와 HTML이 분리되므로 스타일이 올바른지 나중에 더 쉽게 수정할 수 있습니다.

따라서 비교를 보면 CSS 파일을 사용하는 것이 요소 수준에서 스타일을 지정하는 것보다 훨씬 더 많은 이점이 있음을 알 수 있습니다.

외부 CSS 스타일 시트 파일이있는 경우 브라우저에서 파일을 캐시하여 애플리케이션 효율성을 높일 수 있습니다.

— 모리스
소스
4
크롬 프로파일 러로 통계를 제공 할 수 있습니까? CPU 및 GPU는 배터리 소모가 큰 모바일 및 태블릿에서 비용이 많이 듭니다. 트레이드 오프가 있다고 생각합니다. 그리고 캐시의 이점은 무엇입니까? 브라우저는 현재 요소에 대한 스타일을 계산해야하며 규칙이 많으면 스타일을 해결하는 데 더 많은 비용이 듭니다.
— Akash Kava 2013
28
엔진이있을 때 참고 유지 보수에 관련된 모든 단점이 사라지는 것을 인라인 스타일 클라이언트에 보내기 전에
— 모세 샤함
6
유지 보수와 관련된 단점은 React + Radium을 사용할 때도 사라집니다.
— AjaxLeung
1
@AjaxLeung 당신과 Shaham이 말한 것이 사실입니다. 이 답변은 대부분의 최신 도구를 아직 사용할 수 없었던 2011 년에 작성되었습니다.
— mauris
2
예. 나는 오늘과 그 이후 에이 대답을 보는 사람들을 위해 단순히 코멘트를 추가했습니다.
— AjaxLeung
6

인라인 스타일과 스타일 시트를 사용하면 페이지가 더 빨리로드됩니다. 어떤 경우에는 더 빨라야합니다.

href를 사용하여 스타일 시트를 사용하는 경우 서버에 대한 또 다른 요청이 필요하며 응답 후 파일 구문 분석이 필요합니다. 인라인 스타일에는 그 어떤 것도없고 직접 파싱 만하면됩니다.

클라이언트의 인터넷 속도가 느린 경우 해당 단일 요청은 스타일 시트가 전달 될 때까지 페이지 스타일이없는 상태로 매우 느려질 수 있습니다. 다시 말하지만, 인라인이라면 전혀 지연되지 않을 것입니다.

우리가 스타일 시트를 사용하는 유일한 이유는 정리하는 것입니다. 필요하지 않은 경우가 있으므로 인라인 스타일이나 문서 내 스타일 시트로 충분합니다.

— sebjwallace
소스
9
이 답변은 브라우저 캐싱을 완전히 무시합니다. 스타일 시트는 스타일을 한 번만 요청하고 캐싱 할 수 있으므로 유선으로 전송되는 콘텐츠의 양이 줄어 듭니다.
— GeekOnCoffee
2
이 답변은 또한 인라인 스타일이 HTML 파일을 더 크게 만든다는 사실을 무시합니다. 특히 반복되는 인라인 스타일을 사용할 때 CSS 파일보다 몇 배 더 큽니다. 그런데 브라우저는 여러 파일을 병렬로로드 할 수 있으며 위에서 언급 한 것처럼 캐시 할 수 있습니다.
— Jan Van der Haegen
5

이 경우 성능은 여러 요소 (CSS 선택기의 복잡성, 문서 크기 등)에 따라 달라지기 때문에 대답하기 쉬운 질문이 아닙니다. 그러나 격리 된 경우를 살펴보면 일반적으로 CSS 클래스가 인라인 스타일보다 빠르다는 것을 알 수 있습니다.
인라인 스타일 대 CSS 클래스

— s.ermakovich
소스
5
이것은 질문이 묻는 스타일이 적용되는 속도보다는 노드 클래스 또는 스타일 속성이 변경되는 속도를 테스트하는 것입니다
— Sam
@Sam "스타일이 적용되는 속도"란 무엇을 의미합니까? 이 속도를 측정하는 테스트를 제공 할 수 있습니까? 테스트 코드를 살펴보면 각 반복에서 페이지 리플 로우가 발생하는 것을 볼 수 있습니다. 즉, 테스트는 클래스 / 속성 수정뿐 아니라 페이지에 대한 실제 영향도 다룹니다.
— s.ermakovich
스타일을 추가하는 시간이 포함될 수 있지만 시간도 추가됩니다. 문서에 이미 클래스 테스트 또는 JS가 추가 할 필요가없는 인라인 스타일이있는 경우 어떻게해야합니까? 나는 CSS가 어느 경우 에나 해결되는 속도를 얻고 있으며 (틀릴 수도 있습니다)이 테스트가 그렇게한다고 생각하지 않고 추가 작업을 수행한다고 생각합니다.
— Sam
@Sam이 테스트는 브라우저에서 CSS를로드하고 처리 할 수있는 가능한 공간을 무시합니다. 나는 이것이 고립 된 경우라고 내 대답에서 언급했습니다. 다른 방식 (인라인 대 외부)을 사용하여 스타일을 적용하는 성능을 측정합니다. 이것이 오늘날 일반적인 웹 애플리케이션이하는 일입니다. 페이지를 다시로드하지 않고 JavaScript에서 HTML 문서를 변경합니다.
— s.ermakovich
OK 아, 내가 아닌 동적으로 추가 된 스타일을 언급했다
— 샘
3

그럴 수는 있지만 링크되거나 외부 스타일 시트의 이유는 특히 사이트의 여러 페이지에서 동일한 div를 사용할 때 브라우저에서 캐시 될 수 있기 때문입니다. 즉, 브라우저가 페이지를 다시로드 할 때마다 코드를 다시로드하는 대신 브라우저가 스타일 시트를 한 번만로드하면됩니다. 또한 변경이나 디버깅을 더 쉽게 만들어주는 깔끔한 코드를 만듭니다.

— eciusr
소스
3
캐싱 메커니즘의 본질입니다. 증거가 필요하지 않습니다.
— stroncium 2013
5
"현금화"될 수 있다고해서 "현금화"된 것은 아닙니다. 그리고 "본질"은 사실이 아닙니다.
— 이반 카스텔라
6
여러분, 더 이상 듀크 뉴켐 시대가 아닙니다. 우리는 사람들을 현금화하지 않습니다. 캐시 반면에 ...
— Sebas
3
캐싱 인수는 일반적으로 모든 것을 한 번에로드하고 즉시 페이지를 생성하는 단일 페이지 응용 프로그램에는 적용되지 않습니다.
— MindJuice
1

진실은 '예'입니다

큰 차이가 있습니다. 특히 사용자 인터페이스를 자동화 할 때. 다음 코드를 시도하십시오. IE10과 메모장을 사용하여 개발합니다. 나는 내가 가서 테스트를하면서 배우고있다. 이것은 단축 된 버전 테스트이다. (당신의 대답을 보여주기 위해 코드를 줄 였을 때 오류가있을 수 있습니다)

참조하는 이미지를 클릭하고 경고 메시지를 읽으십시오. 힌트 : 편집 (테스트) 전에이 파일을 편집으로 다시 저장하십시오.

최고의 소원, 돈

<!DOCTYPE html>
  <head>
    <style>
      div.grid
        {
        width:180px;
        height:42px;
        border:none;
        }
      img
        {
        width:50px;
        height:50px;
        margin:2px;
        float:left;
        border: 1px solid red;
        }
    </style>
    <script>
      function handleSelect(xId)
        {
        //
        // TESTPOINT
        alert("TESTPOINT\r>Grid: " + xId);
        //
        // GET BORDER COLOR
        // NOTE: An empty or blank value when you can see a border means the tag itself does not
        //            have 'border properties' (style="border: 2px{width} solid{style} green{color}").
        //            although there can be a border detailed via css local or external or via code (script).
        //            If the 'border properties' are returned then they were setup at the tag as
        //            above or the 'border properties' were updated by script code not css code.
        //            If the 'border properties' are NOT returned then they were setup via css.
        //            Thus, since everything seems to be heading toward edit on the fly (live) then css is NOT the way to go (learning).
        // HINT: Margin property is also not readable if set via css. Most likely all the properties values are the same way.
        //           Thus, setting the property values of a tag should be set at the tag control.
        // (works) cBorder=document.getElementById(xId).style.borderWidth;
        // (works) cBorder=document.getElementById(xId).style.borderStyle;
        // (works) cBorder=document.getElementById(xId).style.borderColor;
        // (works) cBorder=document.getElementById(xId).style.border;
        //cBorder=document.getElementById(xId).style.border;
        cBorder=document.getElementById(xId).style.margin;
        alert("TESTPOINT\r>Grid: " + xId + "\r>Border: " + cBorder);
        //
        // SELECT IMAGE
        document.getElementById(xId).style.margin="1px";
        document.getElementById(xId).style.border="2px solid gold";
        document.getElementById(xId).innerHTML=xId;
        alert("TESTPOINT\r>Grid: " + xId + "\r>Border: " + cBorder + "\r>[set border color gold]");
        //
        // GET BORDER COLOR
        //var cBorder=document.getElementById(xId).style.border-Color;  //Error
        //var cBorder=document.getElementById(xId).style.border-color;  //Error
        //var cBorder=document.getElementById(xId).style.borderColor;   //Error
        //var cBorder=document.getElementById(xId).style.bordercolor;   //Undefined
        cBorder=document.getElementById(xId).style.border;      //Empty
        alert("TESTPOINT\r>Grid: " + xId + "\r>Border: " + cBorder + "\r>[set border color gold]" + "\r>Border: " + cBorder);
        }
    </script>
  </head>

  <body>
    <div class="grid">
      <img style="border: 2px solid green" id="R0C0" src="someimage.bmp" onclick="handleSelect(id)">
      <img style="border: 2px solid blue" id="R0C1" src="someimage.bmp" onclick="handleSelect(id)">
      <img style="border: 2px solid purple" id="R0C2" src="someimage.bmp" onclick="handleSelect(id)">
    </div>
    <div class="grid">
      <img id="R1C0" src="someimage.bmp" onclick="handleSelect(id)">
      <img id="R1C1" src="someimage.bmp" onclick="handleSelect(id)">
      <img id="R1C2" src="someimage.bmp" onclick="handleSelect(id)">
    </div>
    <div class="grid">
      <img id="R2C0" src="someimage.bmp" onclick="handleSelect(id)">
      <img id="R2C1" src="someimage.bmp" onclick="handleSelect(id)">
      <img id="R2C2" src="someimage.bmp" onclick="handleSelect(id)">
    </div>
  </body>
</html>
— 님
소스
28
IE10과 메모장을 사용하여 개발합니다. ?
— xanderiel
1

제 생각에는 정답이 없습니다.

는 inline CSS빠른로드 하면 빠른 서버보다 CSS 콘텐츠 크기 다운로드가 응답 할 external CSS file요청 (고려 DNS 시간, 서버 대기 시간 등).

보통 크기의 CSS의 경우 페이지에 인라인하고 15-20KB가 넘는 경우 외부 파일에 넣고 캐시 할 수 있는지 확인합니다.

지금 내가 놓치고있는 다른 많은 고려 사항이 있다고 확신하지만 인라인 대 외부에 대한 정답은 없습니다.

— adrianTNT
소스
-1

외부 스타일 시트를 사용하면 div에 적용한 스타일을 기억하는 데 도움이되기 때문에 확실히 더 나은 옵션입니다. HTML 코드가 적을수록로드 속도가 빨라지므로 페이지로드 시간이 줄어 듭니다.

그러나 어떤 경우에는 특정 div의 일부 속성을 변경해야 할 수 있으며 인라인 스타일이 가장 좋은 옵션입니다. 사실 하나 또는 두 개의 인라인 스타일은 페이지를로드하는 시간을 변경하지 않습니다.

내부 스타일 시트의 또 다른 옵션이 있지만 템플릿을 만드는 것처럼 단일 페이지 웹 사이트가있을 때만 사용됩니다. 모든 HTML 페이지에 CSS를 작성해야하기 때문입니다.

— 비키
소스
-3

다른 모든 요소 또는 이미지에 대해 여러 개의 작은 CSS 파일이있는 외부 CSS보다 인라인 CSS를 사용하는 것을 선호합니다. 각각에 5-10 줄의 코드로 여러 CSS 파일을 다운로드 할 필요가 없습니다. 요소에 hover, active, checked 등과 같은 속성이 포함되어 있으면 개발 프로세스를 복잡하게 만들지 않기 때문에 외부 CSS 파일을 사용해야합니다.

— atuls1396
소스
그것은 유지를 극도로 어렵게 만듭니다. CSS, JS 파일은 기본적으로 사용자의 브라우저에 캐시되어야합니다.
— dave2118
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.