이것은 CSS 스프라이트 효과입니다. 원리: 작은 아이콘과 배경 이미지를 하나의 이미지로 병합한 다음 CSS 배경 위치 지정을 사용하여 표시해야 하는 이미지 부분을 표시합니다. 목적: 시간을 줄입니다. 웹 페이지 이미지를 로드하는 데 시간이 걸립니다. 서버에 요청하는 횟수로 인해 페이지 로딩 속도가 빨라집니다. 문제: 처음 로드할 때 메모리 소모가 상대적으로 크고, 불필요한 사진이나 아이콘도 로드됩니다. 기억 속으로.
스프라이트 효과는 일반적으로 휴대폰에서 사용되지 않습니다. 이유는 휴대폰 메모리가 풍부하지 않고 일반적으로 휴대폰의 리소스가 사용 시 메모리에 로드되므로(지연 로드) 스프라이트를 사용하면 이미지가 향상됩니다. 유지 관리 비용 은 이미지를 사용할 때 지정된 이미지를 표시하려면 더 많은 CSS 작업이 필요하다는 것입니다. 동시에 iOS에서 스프라이트 이미지를 사용하면 이미지를 다른 휴대폰에 적용하기가 더 어려워집니다 .
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
리소스는 크기가 작고 양이 많습니다. 일괄 파일로 분할하면 웹 페이지가 로드될 때 많은 수의 http 요청이 생성됩니다.
왜 파일을 묶음으로 나누지 않는지 말하기보다는 작은 파일들을 통합해서 함께 게시하는 것이 새로운 기능 향상을 위해 더 좋습니다.
스프라이트 그림, 스프라이트 그림, 스프라이트 그림 등의 키워드로 검색할 수 있습니다
이것은 CSS 스프라이트 효과입니다.
원리: 작은 아이콘과 배경 이미지를 하나의 이미지로 병합한 다음 CSS 배경 위치 지정을 사용하여 표시해야 하는 이미지 부분을 표시합니다.
목적: 시간을 줄입니다. 웹 페이지 이미지를 로드하는 데 시간이 걸립니다. 서버에 요청하는 횟수로 인해 페이지 로딩 속도가 빨라집니다.
문제: 처음 로드할 때 메모리 소모가 상대적으로 크고, 불필요한 사진이나 아이콘도 로드됩니다. 기억 속으로.
스프라이트 효과는 일반적으로 휴대폰에서 사용되지 않습니다.
.이유는 휴대폰 메모리가 풍부하지 않고 일반적으로 휴대폰의 리소스가 사용 시 메모리에 로드되므로(지연 로드) 스프라이트를 사용하면 이미지가 향상됩니다. 유지 관리 비용 은 이미지를 사용할 때 지정된 이미지를 표시하려면 더 많은 CSS 작업이 필요하다는 것입니다. 동시에 iOS에서 스프라이트 이미지를 사용하면 이미지를 다른 휴대폰에 적용하기가 더 어려워집니다 .