CSS 스프라이트 브라우저 렌더링
https://stackoverflow.com/questions/831189
-
06-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian문제
우리는 모두 CSS 스프라이트 이미지가 요청의 양을 줄이기에 좋다는 것을 알고 있지만, 큰 이미지를 배경으로 사용하여 여러 요소로 페이지를 렌더링하는 브라우저의 성능은 어떻습니까?
해결책
구형 브라우저 (IE6/IE7)가 장착 된 느린 기계에서는 한 페이지에서 매우 큰 이미지를 여러 번 사용할 때 상당한 성능이 떨어질 수 있습니다. Sprites를 사용할 때는 더 심각합니다 : 호버 상태.
모든 스프라이트를 하나의 거대한 이미지로 밀어 내려는 유혹을 완화해야합니다. 웹 사이트/WebApp UI의 일부 요소에 대해 생각하고 하나의 스프라이트 파일에 넣습니다 (브라우징 중에 항상 표시됩니다). 그런 다음 나머지 스프라이트를 웹 사이트 섹션 별 이미지로 그룹화하여 필요에 따라 사용하십시오. 단점은로드 시간 (추가 HTTP 요청)이 약간 연장되었지만 페이지를 보거나 스크롤하는 동안 사용자 경험이 훨씬 높아집니다.
다른 팁
당신은 물건의 균형을 유지해야합니다. 1000 스프라이트를 포함하는 이미지에 대해 이야기하고 있다면 CSS는 엄청날 것입니다. 또한 어쨌든 같은 페이지에 모든 스프라이트를 사용할 가능성이 매우 얇습니다.
YouTube 경험에서 판단 할 수 있듯이 큰 문제는 없습니다.
바라건대, 브라우저는 메모리에서 이미지를 캐시한 다음이 이미지가 필요한 곳이면 출력을 렌더링하는 데 사용합니다.
이미지를 하나 이상의 복합 스프라이트로 통합하고 CSS를 사용하여 웹 페이지에 스프라이트의 일부를 선택적으로 표시하여 상당한 양의 HTTP 요청을 저장할 수 있습니다. 이제 주요 브라우저가 CSS 배경 및 포지셔닝을 지원하기에 충분히 진화 했으므로 더 많은 사이트 가이 성능 기술을 채택하고 있습니다. 실제로 웹에서 가장 바쁜 사이트 중 일부는 CSS 스프라이트를 사용하여 HTTP 요청을 저장합니다.
수백만 명의 사용자와 함께 야후! AOL은 사용자 경험을 향상시키기 위해 최선을 다합니다. AOL.com과 Yahoo.com은 CSS 스프라이트를 사용하여 복잡한 인터페이스에 대한 수많은 HTTP 요청을 저장합니다. 두 사이트 모두 CSS 스프라이트를 사용하여 서비스 디렉토리 및 Yahoo! 다른 곳에서도 스프라이트를 사용합니다.
CSS 스프라이트의 또 다른 이점은 이미지 사이에 공백을 추가 함에도 불구하고 결합 된 이미지가 개별 이미지보다 파일 크기가 더 작다는 것입니다. 스프라이트의 크기가 작기 때문에 여러 컬러 테이블의 오버 헤드가 줄어들고 별도의 이미지에 필요한 포맷 정보가 있습니다. 접근성과 유용성을 극대화하기 위해 CSS 스프라이트는 아이콘이나 장식 효과에 가장 적합합니다.
