외부 CSS와 인라인 스타일 성능 차이?
내 친구는 <div style=""></div>압축 된 CSS 파일 대신에 link href헤드 섹션에 넣어두면 성능이 향상 된다고 말했습니다 . 사실인가요?
친구가 언급 한 성능 향상은 CSS 파일을 사용하는 다른 요소를 통한 성능 향상의 양에 비해 너무 사소한 것 같습니다.
스타일 속성을 사용하여 브라우저는 특정 요소 (이 경우 요소)에 대한 규칙 만 그립니다 <div>. 이렇게하면 CSS 엔진이 CSS 선택기와 일치하는 요소 (예 : a.hover또는 #someContainer li) 를 찾기위한 조회 시간이 줄어 듭니다 .
그러나 스타일을 요소 수준에두면 CSS 스타일 규칙을 별도로 캐시 할 수 없습니다. 일반적으로 CSS 파일에 스타일을 넣으면 캐싱을 수행 할 수 있으므로 페이지를로드 할 때마다 서버에서로드되는 양이 줄어 듭니다.
스타일 규칙을 요소 수준에두면 어떤 요소가 어떤 방식으로 스타일이 지정되었는지 추적 할 수 없게됩니다. 또한 여러 요소를 함께 다시 칠할 수있는 특정 요소를 칠하는 성능 향상에 역효과를 줄 수 있습니다. CSS 파일을 사용하면 CSS와 HTML이 분리되므로 스타일이 올바른지 확인하고 나중에 수정하기가 더 쉽습니다.
따라서 비교를 보면 CSS 파일을 사용하는 것이 요소 수준에서 스타일을 지정하는 것보다 훨씬 더 많은 이점이 있음을 알 수 있습니다.
외부 CSS 스타일 시트 파일이있는 경우 브라우저에서 파일을 캐시하여 애플리케이션 효율성을 높일 수 있습니다.
인라인 스타일과 스타일 시트를 사용하면 페이지가 더 빨리로드됩니다. 어떤 경우에는 더 빨라야합니다.
href를 사용하여 스타일 시트를 사용할 때 서버에 대한 또 다른 요청이 필요하며 응답 후 파일을 구문 분석해야합니다. 인라인 스타일에는 그 어떤 것도없고 직접 파싱 만하면됩니다.
클라이언트의 인터넷 속도가 느린 경우 해당 단일 요청은 스타일 시트가 전달 될 때까지 페이지 스타일이없는 상태로 매우 느려질 수 있습니다. 다시 말하지만, 인라인이라면 전혀 지연되지 않을 것입니다.
우리가 스타일 시트를 사용하는 유일한 이유는 정리하는 것입니다. 필요하지 않은 경우가 있으므로 인라인 스타일이나 문서 내 스타일 시트로 충분합니다.
이 경우 성능은 여러 요소 (CSS 선택기의 복잡성, 문서 크기 등)에 따라 달라지기 때문에 대답하기 쉬운 질문이 아닙니다. 그러나 격리 된 경우를 살펴보면 일반적으로 CSS 클래스가 인라인 스타일보다 빠르다는 것을 알 수 있습니다.
인라인 스타일 대 CSS 클래스
그럴 수는 있지만 링크되거나 외부 스타일 시트의 이유는 특히 사이트의 여러 페이지에서 동일한 div를 사용할 때 브라우저에서 캐시 될 수 있기 때문입니다. 즉, 브라우저가 페이지를 다시로드 할 때마다 코드를 다시로드하는 대신 브라우저가 스타일 시트를 한 번만로드하면됩니다. 또한 변경이나 디버깅을 더 쉽게 만들어주는 깔끔한 코드를 만듭니다.
진실은 '예'입니다
큰 차이가 있습니다. 특히 사용자 인터페이스를 자동화 할 때. 다음 코드를 시도하십시오. 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>
외부 스타일 시트를 사용하면 div에 적용한 스타일을 기억하는 데 도움이되기 때문에 확실히 더 나은 옵션입니다. HTML 코드가 적을수록로드 속도가 빨라지므로 페이지로드 시간이 줄어 듭니다.
But in some cases you might have to change some property of a particular div then the inline style is the best option. And truly speaking, one or two inline style won't make any change the time of loading the page.
There is another option of internal style sheet but it is used only when you have a single page website like if you are making a template. This is because you have to write CSS in every HTML page
I prefer using inline CSS over external CSS where there are multiple small CSS files for every other element or image. No point in downloading several CSS files with merely 5-10 lines of code in each. If your element contains properties such as hover, active, checked etc. you're then supposed to use an external CSS file as it will avoid complicating your development process.
참고URL : https://stackoverflow.com/questions/8284365/external-css-vs-inline-style-performance-difference
'IT TIP' 카테고리의 다른 글
| 다중 FROM-의미 (0) | 2020.10.24 |
|---|---|
| 자바 스크립트 : 모듈 패턴 대 생성자 / 프로토 타입 패턴? (0) | 2020.10.24 |
| 타겟팅 위치 : 현재 '멈춤'상태에있는 고정 요소 (0) | 2020.10.24 |
| String.Substring ()이 코드에 병목 현상이있는 것 같습니다. (0) | 2020.10.24 |
| CUDA 고정 메모리가 그렇게 빠른 이유는 무엇입니까? (0) | 2020.10.24 |