약 20 - 50 개의 동적 이미지 (비 정적 소스에서 제공되는 이미지)가 포함 된 웹 페이지가 있습니다. 이러한 이미지는 요청 URL을 기반으로 서블릿을 통해 제공됩니다. 이로 인해 이미지 당 요청이 생성되어 성능 저하가 발생합니다.동적 이미지 용 CSS 스프라이트 생성
이러한 이미지가 정적 인 경우 CSS 스프라이트를 만들고 50 개의 요청을 하나씩 대체합니다. 그들이 역동적이기 때문에 이것은 당연히 쉬운 일이 아닙니다. 내가 런타임에 하나의 스프라이트로 이러한 이미지를 집계하기 위해 사용할 수있는 도구/라이브러리/메소드를 찾고 있습니다. 운좋게도 이미지 크기는 동일하고 모두에게 동일하므로 훨씬 쉽게 만들어야합니다.
제안 사항?
서블릿에서 css 파일을 생성/수정 (압축, 병합)하는 jawr (https://jawr.dev.java.net/) 라이브러리를 확인하고 시도 할 수 있습니다. 배경 이미지를 동적으로 변경할 수있는 옵션이 있습니다. 스킨을 바꾸기위한 CSS 파일을 바꾸기 위해 번들을 정렬 할 수 있습니다.
플러스 사이드 : .js 파일도 관리하고 정렬 할 수 있습니다.
시스템 명령 행을 호출하여 무료 ImageMagick 라이브러리를 사용하여 이미지를 추가 할 수 있으므로 Java 코드 작성이 훨씬 적어 속도가 빠릅니다.
수평으로 추가하는 경우,이 명령을 사용하면 표시 할 수 있습니다 CSS와 함께, http://www.imagemagick.org/Usage/layers/#append
그래서 자세한 정보에 대한
convert image1.gif image2.gif image3.gif -append result.gif
: 수직으로 추가 들어
convert image1.gif image2.gif image3.gif +append result.gif
을,이 명령을 사용하여 스프라이트는 간단한 오프셋을 가진 단일 이미지를 사용합니다 (CSS "백그라운드"적합성을 사용하여 이미지를로드하고 단일 이미지의 오프셋을 설정할 수 있습니다). 스프라이트를 표시하고 싶을 때). 간단한 일만하는 경우 JavaScript가 필요하지 않습니다.
서버의 처리 오버 헤드가 그만한 가치가 있습니까?
나는 이제 C#에서 동적 이미지를 만드는 추가 된 복잡성을 거래하고 개별 이미지 액세스를 줄이면서 클라이언트에 보내는 것에 대해 생각하고 있습니다.
약간의 분석이 필요합니다.
서버 측 언어는 무엇입니까? –
자바 - 죄송합니다. 서블릿을 강조해야합니다. – Zecrates
안녕하세요 @Zecrates 저는 같은 문제에 직면하고 있습니다.이 문제를 어떻게 해결했는지 자세히 설명해주십시오. 고맙습니다. – Aftab