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

Question 1

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

Question 2

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

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

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

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

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

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

Question 3

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

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

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

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

Question 4

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

Question 5

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

Question 6

진실은 ‘예’입니다

큰 차이가 있습니다. 특히 사용자 인터페이스를 자동화 할 때. 다음 코드를 시도하십시오. 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>

Question 7

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

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

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

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

Question 8

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

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

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

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

답변

답변

답변

답변

답변

답변

답변