2010-05-19 2 views
2

내가 아는 한 요즘 웹 사이트에 CSS를 포함시키는 데 사용되는 두 가지 주요 기술이 있습니다.성능, 모든 CSS를 한번에 또는 필요한만큼 제공하십시오.

A) 한 웹 사이트에 의해 사용되는 모든 CSS (압축) B 파일)의 현재 만

긍정적 확인중인 페이지의 요소에 의해 요구에 대한 CSS 제공 제공 : 전체를 사이트에서 사용 CSS는 1 HTTP 요청
네거티브를 통해 첫 번째 방문에 캐시 : 그것은 큰 파일이 있다면, 그것은 B에 대한 초기

긍정적를로드하는 데 시간이 오래 걸릴 것 : 빠른 초기로드 시간을
부정적 B : 더 많은 HTTP 요청, 캐시 할 파일 추가

여기에 누락 된 것이 있습니까?

+0

나는 당신이 필수적인 것을 놓치고 있다고 생각하지 않습니다. 병렬화 된 다운로드와 같은 것이 있지만 이미지를 데이터로 저장하지 않으면 uri가 무시 될 수 있습니다. –

답변

3

프로필. 사용자가 사이트를 사용하는 방식에 따라 다릅니다.

웹 응용 프로그램이고 사용자가 많이 사용하고 디자인 한 대부분의 레이아웃을 볼 가능성이있는 경우 한 번로드 된 다음 브라우저 캐시에 저장되는 단일 CSS를 사용하는 것이 좋습니다. 첫 번째 오버 헤드는이 경우 무시할 수 있습니다.

대부분의 사용자가 콜드 캐시를 사용하고 2 ~ 3 페이지 만 보는 경우 별도의 CSS 파일을 사용하면 경험이 향상 될 것입니다.

사용자가 실제로 무엇을하는지 보지 않고도 알 수 없습니다.

+0

+1 귀하의 잠재 고객이 귀하의 사이트를 사용하는 방법입니다. –

0

무엇이 더 좋습니까?

  1. 하나의 CSS 파일을 작성
  2. 쓰기보다 CSS 파일

더 나은 무엇입니까?

  1. 추적, 유지 한 CSS 파일은 더 CSS 파일을 유지
  2. 추적을 업데이트

esier 무엇 업데이트?

  1. 만들기 결정은 당신의 CSS 파일의 모든에 넣어 무엇을 결정하는 하나 개의 CSS 파일
  2. 에 무엇을 삽입하는

하나 개의 글로벌 CSS 파일을 생성에 비해 각 개별 CSS 파일을 생성하는 비용은 무엇입니까 .

+0

이것들은 좋은 지적입니다. 개인 워크 플로우와는 무관하지만 부분적으로 (이미 분리되어있는) CSS를 작성하는 경향이 있습니다. 따라서 쓰기, 추적 및 포함에 거의 도움이되지 않습니다. –

1

gzipped의 큰 CSS 파일조차도 다운로드되는 다른 많은 것들 (이미지, 영화 등)과 비교하면 크기가 작습니다. CSS를 별도의 파일로 분리해야하는 유일한 이유는 특정 브라우저에서 동작하도록 특수 규칙을 바꾸는 것입니다 (나는 당신을 IE에서보고 있습니다).

1

A 또는 B가 없으며 둘 사이의 절충점입니다. 예를 들어, 프론트 페이지를 가능한 한 빨리로드하려면 필요한 부분 만 요청하면됩니다. 다음 페이지에서 나머지 CSS를 요청하십시오. 총 2 건의 요청.

본질적으로 관련 CSS의 패키지/그룹을 만들고 있습니다. 이러한 패키지를 동적으로 결합 및 압축함으로써 유지 보수 가능한 파일 구조를 생성 할 수 있습니다. 또한 속도, 성능, 요청 및 대역폭의 최상의 조합을 실험 할 수 있습니다.

이 모든 이야기는 동일한 절충안을 만들 수 있기 때문에 JavaScript 파일에도 적용됩니다.

관련 문제