javascript - 많은 웹 페이지의 프런트 엔드는 버튼 아이콘 등과 같은 많은 작은 자료로 전체 그림에서 잘려져 있습니다. 이유는 무엇입니까? 모바일 개발도 이런 방식으로 운영되나요?

Question

예를 들어 Weibo의 v 인증 아이콘

UI를 사용할 때 자르지 않고 여러 파일로 나누어 사용하는 것은 어떨까요?
그런데 실제 개발에서는 이게 휴대폰에서도 되나요?

Answer 1

리소스는 크기가 작고 양이 많습니다. 일괄 파일로 분할하면 웹 페이지가 로드될 때 많은 수의 http 요청이 생성됩니다.

왜 파일을 묶음으로 나누지 않는지 말하기보다는 작은 파일들을 통합해서 함께 게시하는 것이 새로운 기능 향상을 위해 더 좋습니다.

Answer 2

스프라이트 그림, 스프라이트 그림, 스프라이트 그림 등의 키워드로 검색할 수 있습니다

Answer 3

이것은 CSS 스프라이트 효과입니다.
원리: 작은 아이콘과 배경 이미지를 하나의 이미지로 병합한 다음 CSS 배경 위치 지정을 사용하여 표시해야 하는 이미지 부분을 표시합니다.
목적: 시간을 줄입니다. 웹 페이지 이미지를 로드하는 데 시간이 걸립니다. 서버에 요청하는 횟수로 인해 페이지 로딩 속도가 빨라집니다.
문제: 처음 로드할 때 메모리 소모가 상대적으로 크고, 불필요한 사진이나 아이콘도 로드됩니다. 기억 속으로.

---

스프라이트 효과는 일반적으로 휴대폰에서 사용되지 않습니다.
이유는 휴대폰 메모리가 풍부하지 않고 일반적으로 휴대폰의 리소스가 사용 시 메모리에 로드되므로(지연 로드) 스프라이트를 사용하면 이미지가 향상됩니다. 유지 관리 비용 은 이미지를 사용할 때 지정된 이미지를 표시하려면 더 많은 CSS 작업이 필요하다는 것입니다. 동시에 iOS에서 스프라이트 이미지를 사용하면 이미지를 다른 휴대폰에 적용하기가 더 어려워집니다 .

.