많은 양의 dataURI가 이미지와 비교되었습니다.

Question

많은 수의 이미지와 비교하여 dataURIs 중 하나를 사용하여 성능을 비교하려고합니다. 두 페이지가 이러한 이미지/자원이 "어떻게"가 아닌 다른 정확히 동일

1. Regular Images (WPT)
2. Base64 (WPT) : 내가 무슨 짓을했는지하는 설정 두 테스트입니다 제공됩니다. 위에서 각각 언급 한 WPT에 대해 WebPageTest를 실행했으며 base64의 평균로드 시간이 훨씬 빠르다는 것을 알았지 만 일반보기의 캐시 된보기는 빠릅니다. 나는 HTML5 Boilerplate의 .htaccess을 구현하여 리소스가 제대로 gzip되었는지 확인했지만 알 수 있듯이 정적 리소스를 캐싱하지 않는 경우 F (기본 리소스가 캐싱되지 않는 경우)이 맞는지 여부는 확실하지 않습니다. 제가 궁극적으로 여기에서 알아 내려고하는 것은 더 나은 방법입니다. (하나의 페이지에 여러 가지 리소스가 있다고 가정 해 봅시다.) 어떤 것들은 내가 알고
   이
   1. 64 기수에 대한 GET 요청이 큰
   300 여기에 더 큰 아쉬운 인 (정규 일부여에 비해 64 기수 1 개 자원 ... GET 요청 또는 숫자의가있다
   2. 자원)? 일반적인 것에 대해 기억해야 할 점은 제한 사항과 base64 때문에 병렬로로드 할 수있는 리소스가 너무 많아서 HTML을 읽을 수있을 때까지 기다리는 것입니다. 따라서 아무 것도 기술적으로는입니다. 페이지 자체보다로드됩니다.

   정말 감사드립니다! - 감사합니다!

Answer 1

비교를 위해 여러 호스트 이름으로 분할 된 이미지로 테스트를 실행해야한다고 생각합니다.

또 다른 옵션은 이미지를 논리 세트로 스프라이트하는 것입니다.

BASE64 경로로 이동하려면 클라이언트에서 캐시하는 방법을 찾아야합니다.

이는 사용에 계획하고있는 이미지는 다음 그들을 거기에서 최적화를위한 충분한 공간은 예를 들어, 경우 http://yhmags.com/profile-test/img_scaled15/interior-flooring.jpg

나는 PNG에이 변환 ImageOptim를 통해 실행하고 802로 나왔다 바이트 (JPG에 대해 1.7KB)

이미지를 최적화 한 다음 여러 호스트 이름을 포함하여 테스트를 다시 실행합니다.