페이지로드 당 HTTP 요청 수가 적다는 것이 좋은 사실입니다. CSS의 극단적 인 형식은 페이지 당 하나의 고유 한 CSS 파일을 공유하고 각 파일에 복제 된 사이트 전체 스타일을 공유하는 것입니다.더 적은 HTTP 요청이나 캐시 가능한 CSS 파일을 사용해야합니까?
하지만 거기에 거래가 있습니다. 개별 공유 글로벌 CSS 파일이있는 경우 프론트 페이지가로드 된 후 한 번 캐시되어 여러 페이지에서 다시 사용될 수 있으므로 페이지 별 CSS 파일의 필요한 크기가 줄어 듭니다.
그래서 실전 연습에서 더 좋습니까? 캐시 할 수있는 여러 개의 분리 된 CSS 파일을 통해 더 짧은 CSS 파일 또는 더 적은 CSS 파일을 통해 더 적은 HTTP 요청이 있습니까?
귀하의 첫 번째 통화 포트는 YSlow 또는 Google Speed을 사용하여 사이트에서 가장 저조한 상황을 파악합니다. 때로는 심하게 압축 된 (큰) 이미지 또는 두 이미지가 전체적으로 느려질 수 있습니다. 각 요청에 관련된 설정 비용이 있기 때문에 HTTP 요청을 줄이라는 지시를 받지만 극단적 인 경우 성능이 저하 될 수 있습니다. 귀하의 경우에는 각 페이지에 대한 CSS 파일을 갖는 것은 나쁜 형태이므로 브라우저가 캐시하는 것이 더 어렵습니다.극단적 인 하나의 방법을 촬영
나쁜 관행과 같은 다양한 각도에서이 문제에 접근을 시도해야 제대로 CSS 스프라이트를 이미지를 압축하거나 사용
의심스러운 경우 Google 홈 페이지의 소스 페이지를 확인하십시오. 해당 페이지를 크게 최적화하면 수행 할 작업에 대한 단서가 제공됩니다.
당신이 말하는 것은 "그것이 다릅니다"이며 나는 꽤 동의합니다. "더 많은 css 파일, 더 자주 캐시 됨"이 더 잘 작동하는 상황, "적은 캐시 된 css 파일"이 더 잘 작동하는 상황을 상상해 볼 수 있습니다. 나는 그것이 특정 사이트가 겪고있는 트래픽의 품질에 달려 있다고 생각한다. –
정확히 Jonathan입니다. 특히 CSS 문제와 관련하여 필자는 일반적으로 사용되는 모든 파일 (아마도 * 그 * 많지는 않음)을 하나의 파일에 넣은 다음 특수 페이지에 대해 하나 또는 두 개의 작은 CSS 파일을 넣을 것입니다. – Chris
브라우저는 CSS 파일을 크거나 작게 캐시하므로 적은 요청으로 더 큰 CSS 파일을 만드는 것을 선호합니다.
하지만 규칙은 아니지만 가능한 한 수행하려고합니다.
모든 CSS를 하나의 CSS 파일로 결합했습니다. 모든 페이지에 적용되지 않는 중복 스타일이 있더라도 Gzip으로 압축 한 후에는 크기가 충분히 작아야합니다. 그리고 브라우저가 캐시 한 후에는 더 이상 크기가 중요하지 않습니다. 모든 CSS를 하나의 파일에 삽입하기 만하면됩니다. 그러나 한 가지 문제가 있습니다. 스타일이 다른 페이지에 대해 변경됩니다. 다른 경로를 선택해야합니다. 당신은 예를 들어, 할 수있는, 뭔가 같은 : 다음
index.html
<div class="navigation_index"></div>
about.html
<div class="navigation_about"></div>
와 같은 탐색 클래스와 함께 비슷한 스타일을 공유 :
.navigation_about, .navigation_index {
color: #000;
}
을 별도의 스타일에 다른 옵션을 지정합니다
.navigation_about {
font: sans-serif,
}
.navigation_index {
font: serif,
}
"single honkin 'CSS 파일"은 아마도 대역폭 관점에서 볼 때 가장 좋은 솔루션이지만, 나는 정말 큰 사이트를 단지 글로벌 스타일. 나는이 옵션에 대해 더 생각해야 할 것이다. 솔직히 나는 그것을 가능성으로 무시했다. –
커다란 CSS 파일이있는 커다란 웹 사이트가 있습니다.하지만 정리 된 작은 CSS 파일을 다루고 있습니다. 문제는 내가 CSS를 함께 "컴파일"할 배치 파일이 있다는 것입니다. 어쩌면 시도 할만한 가치가있는 것일까 요? – Tower
한 걸음 더 나아가서 LESS CSS 전처리기를 사용하여 컴파일 작업을 수행 할 것을 제안합니다. css를 하나의 파일로 통합하고 LESS가 테이블에 가져올 수있는 유연성을 설명하는 이점을 얻을 수 있습니다. 또한 CSS 압축기의 패스는 나쁜 생각이 아닙니다. –
잘 쓰레기, 이론적으로 사이트 유형에 달려 있다고 생각합니다. 사람들이 사이트의 페이지를 한 번만 치고 한 번만, 페이지를 많이 누르는 경우, CSS 파일이 깨져서 그래프 작업이 더 잘됩니다. 모든 사이트가 계속적으로 또는 충분히 자주 공격을받는 사이트 또는 웹 앱과 비교하여 각 페이지에 대해 전문/컴파일 된 CSS를 사용하면 처음에는 그래프에서 더 큰 히트를 기록 할 수 있지만 캐시 된 후에는 길게 승리합니다. 더 적은 HTTP 요청으로 b/c를 실행하십시오. 그리고 그 곳에서 질량 css 히스테리 (hsseria)의 어딘가에서 중첩 될 것입니다.
이제 그래프에서 벗어나 평균 사이트를 살펴보고, 실제로 심각한 트래픽을 취하지 않으면 문제가되지 않습니다. 그러나 여기에 후자에 대한 전반적인 투표가 실시됩니다.
페이지 당 하나의 고유 한 CSS 파일 *이 HTTP 요청 수를 줄이는 이유는 무엇입니까? –
대안은 페이지 스타일의 공통 요소를 모든 페이지에서 링크 된 개별 파일로 제외하기 때문입니다. 각 페이지에서이 전역 파일과 페이지 별 파일을 연결합니다. 따라서 한 페이지에 여러 개의 HTTP 요청이 있습니다. –
둘 다. 이 대답을 참조하십시오 : http://stackoverflow.com/a/118886/2407870 –