참고사이트 : http://mygumi.tistory.com/277, https://www.photo-mark.com/notes/image-preloading/
우리의 목적은 미리 로딩하는 것이기 때문에 크게 신경쓰지 않을 것이다.
하지만 우선순위가 높은 이미지가 보이지 않을 수도 있다.
이러한 문제를 피하기 위해 preloading 을 적용했는데 무슨 말인지 의아할 수도 있다.
위 개발자 도구의 그림을 다시 보면, 비동기적으로 인해 병렬적으로 처리되는 모습을 볼 수 있다.
병렬과 직렬의 차이를 생각해보면 된다.
병렬은 여러개를 동시에 처리할 수 있다는 장점이 있지만, 그 의미가 직렬보다 훨씬 빠르다는 것은 아니다. (경우에 따라, 오히려 느릴 수도 있다.)
그림을 보다시피, 병렬처리로 인해 비슷하게 완료되지만, 다운로드 시간이 길다는 것을 알 수 있다.
그로 인해, 우선순위와 상관없이 한번에 처리한다면, 우선순위가 높은 이미지의 로딩이 지연될 수 있다.
이러한 경우, 동기식 처리가 필요하다.
출처: http://mygumi.tistory.com/277 [마이구미의 HelloWorld]
당시 환경설정)
버전 70.0.3538.77(공식 빌드) (64비트)
Windows 10 Pro 64bit
1803(OS 빌드 17134.407)
Eclipse Java EE IDE for Web Developers.
Version: Photon Release (4.8.0)
Build id: 20180619-1200
자바 JDK 8버전
apache-tomcat-8.5.34
apache-maven-3.5.4
스프링 폴더구조
Controller
@RequestMapping(value="/testqq2")
public String filereadtest2() {
return "/foodvisor/testqq2";
}
테스트 코드
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<%-- <script type="text/javascript" src="<c:url value="/resources/js/jquery-3.3.1.js"/>"></script> --%>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
</body>
<script type="text/javascript">
class Preloader {
constructor () {}
// 병렬처리
static series (imageArray) {
let n = imageArray.length
for (let i = 0; i < n; i++) {
let img = new Image()
img.src = imageArray[i]
}
}
// 직렬 순차처리
static parallel (imageArray,idx) {
let index = idx || 0
if (imageArray && imageArray.length > index) {
let img = new Image()
img.onload = function () {
Preloader.parallel(imageArray, index + 1)
}
img.src = imageArray[index]
}
}
}
var images = [
'/springProjectSample/resources/images/1.png',
'/springProjectSample/resources/images/2.png',
'/springProjectSample/resources/images/3.png',
'/springProjectSample/resources/images/4.png',
'/springProjectSample/resources/images/5.png',
'/springProjectSample/resources/images/6.png',
'/springProjectSample/resources/images/7.png',
'/springProjectSample/resources/images/8.png',
'/springProjectSample/resources/images/9.png'
];
// 병렬 테스트
// Preloader.series(images);
// 직렬 테스트
Preloader.parallel(images,0);
</script>
</html>
요청 주소 : http://localhost:8080/springProjectSample/testqq2
병렬 테스트 결과
직렬 테스트 결과
'WEB > 기타' 카테고리의 다른 글
| 네이버페이 JavaScript SDK 개발기 (0) | 2019.01.22 |
|---|---|
| 네이버 메인 페이지의 트래픽 처리 (0) | 2019.01.22 |
| GIF대신 Video로 변환해보자 (0) | 2019.01.22 |
| Kakao Hangul Analyzer III (0) | 2019.01.22 |
| 페이스북, 자사의 이미지 압축기술 오픈소스로 공개 (0) | 2019.01.18 |
