1. 홈
  2. 질의 응답
  3. CSS 스프라이트가 웹 사이트의 속도를 높이는 방법은 무엇입니까?

CSS 스프라이트가 웹 사이트의 속도를 높이는 방법은 무엇입니까?

2009-03-25 3 views

답변

20

HTTP 요청의 오버 헤드가 그토록 영향을 미치는 이유를 이해하는 것이 중요합니다.

가장 간단한 형태로 HTTP 요청은 소켓 열기, 열린 소켓에서 요청 보내기 및 응답 읽기로 구성됩니다.

소켓을 열려면 클라이언트의 TCP/IP 스택이 TCP SYN 패킷을 서버로 보냅니다. 서버는 SYN-ACK로 응답하고 클라이언트는 ACK로 응답합니다.

그래서 1 바이트의 응용 프로그램 데이터를 보내기 전에 서버에 대해 전체 1.5 시간 반 동안 기다려야합니다.

클라이언트가 요청을 보내고 서버가 요청을 구문 분석하고 요청한 데이터를 찾은 다음 다시 보내야합니다. 다른 왕복과 서버 측 오버 헤드가 있습니다. 일부 느린 서버를 보았을 때) 실제 데이터를 전송할 시간을 더한 것이 가장 좋은 경우입니다. 패킷이 삭제되고 재전송되는 네트워크 혼잡이 없다고 가정 할 때입니다.

언제든지이 문제를 피할 수 있습니다.

현대의 브라우저는 관련 오버 헤드를 줄이기 위해 여러 요청을 동시에 처리합니다. 이론적으로 같은 소켓에서 HTTP 요청을 수행 할 수 있으므로 상황이 조금 나아졌습니다. 그러나 일반적으로 네트워크 왕복은 성능에 좋지 않으므로 피해야합니다.

출처

2009-03-25 20:43:18

15

서버로의 왕복 횟수 감소. 6 개의 서로 다른 이미지에 대해 6 개의 요청 (요청) 대신 하나의 요청과 6 개의 동일한 이미지를 사용합니다. 서버가 "마지막으로 요청한 시간 이후로 변경되지 않았습니다"라고 응답하면 네트워크 트래픽 양이 현저하게 줄어들 수 있습니다.

출처

2009-03-25 20:05:11

+1

몇 년 전 몇 가지 숫자를 사용했습니다. 하나의 43 바이트 1x1 gif에 대해 HTTP 오버 헤드 (TCP 패킷 오버 헤드를 포함하지 않음)는 240 바이트를 초과했습니다. –

+0

이미지에 따라 압축 효과를 높일 수 있습니다. –

+0

또한 큰 파일을 전송할 때 TCP/IP를 처리 할 때 더 효율적입니다. – David

14

여러 이미지에 여러 HTTP 요청이 필요하기 때문입니다. Yahoo의 실적 규칙 # 1 : Minimize HTTP Requests을 참조하십시오.

출처

2009-03-25 20:05:24

3

요청 수를 최소화하는 것 외에도 이미지에 따라 파일 크기가 분리되어있을 때보 다 더 작아집니다 (메타 데이터의 양이 줄어들어, 다른 것들 사이). 스프라이트를 사용할 때 또 다른 이점은 hover 상태의 요소 위로 처음 가져 가면 깜박임 효과가 없어 페이지 성능에 대한 사용자의 인식을 향상시킬 수 있다는 것입니다. 이미지 최적화에 대한 흥미로운 자료는 야후 사용자 인터페이스 블로그의 블로그 게시물 series입니다. 퍼포먼스에 대한 야후의 권장 관행을 다시 읽으면서 나는 이미지가 수직이 아닌 가로로 배열되어 파일 크기가 줄어들 수도 있다는 사실을 suggested도 알게되어 놀랐다.

출처

2009-03-25 20:24:45 VirtuosiMedia

1

위의 이유 외에도 작업하기가 더 쉽습니다. 이미지를 업데이트하면 수정하고 업로드해야하는 파일이 하나 뿐이며 코드에서 변경할 URL이 하나뿐입니다.

출처

2009-03-25 22:00:02 mpen

+1

이것은 사실이 아닙니다. 주 이미지에서 하위 이미지 좌표를 추적해야하므로 sprited 이미지는 다루기가 훨씬 어렵습니다. – levik

+1

"위"가 바뀔 수 있음을 기억하십시오 : 답변이 투표되거나 다른 사람들이 당신 뒤에서 들어 오면 결국 다른 사람들보다 위에있게 될 수 있습니다. 여기에 다른 의견을 언급 할 때 사용자의 사용자 이름이나 사용자 이름을 사용하면 아무리 이해할 수 있습니다. –

관련 문제

 관련 문제