DOI QR코드

DOI QR Code

Web Content Loading Speed Enhancement Method using Service Walker-based Caching System

서비스워커 기반의 캐싱 시스템을 이용한 웹 콘텐츠 로딩 속도 향상 기법

  • 김현국 (한국기술교육대학교 컴퓨터공학부) ;
  • 박진태 (한국기술교육대학교 컴퓨터공학부) ;
  • 최문혁 (한국기술교육대학교 컴퓨터공학부) ;
  • 문일영 (한국기술교육대학교 컴퓨터공학부)
  • Received : 2018.12.28
  • Accepted : 2019.02.26
  • Published : 2019.02.28

Abstract

The web is one of the most intimate technologies in people's daily lives, and most of the time, people are sharing data on the web. Simple messenger, news, video, as well as various data are now spreading through the web. In addition, with the emergence of Web assembly technology, the programs that run in the existing native environment start to enter the domain of the Web, and the data shared by the Web is now getting wider and larger in terms of VR / AR contents and big data. Therefore, in this paper, we have studied how to effectively deliver web contentsto users who use Web service by using service worker that can operate independently without being dependent on browser and cache API that can effectively store data in web browser.

contents and big data웹은 사람들의 일상생활에 있어 가장 밀접한 기술 중 하나로 오늘날 대부분의 사람들은 웹을 통해 데이터를 공유하고 있다. 단순 메신저, 뉴스, 영상뿐만 아니라 다양한 데이터가 현재 웹을 통하여 전파되고 있는 셈이다. 또한 웹 어셈블리 기술이 등장하면서 기존 네이티브 환경에서 구동되던 프로그램들이 웹의 영역에 진입하기 시작하면서 웹이 공유하는 데이터는 이제 VR/AR 콘텐츠, 빅데이터 등 그 범주가 점차 넓어지고, 크기가 거대해지고 있다. 따라서 본 논문에서는 브라우저에 종속적이지 않고 독립적으로 동작이 가능한 서비스워커와 웹 브라우저 내에 데이터를 효과적으로 저장할 수 있는 캐시 API를 활용하여 웹 서비스를 사용하는 사용자들에게 웹 콘텐츠를 효과적으로 전달할 수 있는 방법을 제시하였다.

Keywords

HHHHBI_2019_v23n1_55_f0001.png 이미지

그림 1. APM 페이지 제공 방식 Fig. 1. How APM pages are provided.

HHHHBI_2019_v23n1_55_f0002.png 이미지

그림 2. PWA 동작 방식 Fig. 2. How PWA Works.

HHHHBI_2019_v23n1_55_f0003.png 이미지

그림 3. 시스템 동작도 – 사용자가 처음 서비스에 접근한 경우 Fig. 3. System operation diagram - When the user first accesses the service.

HHHHBI_2019_v23n1_55_f0004.png 이미지

그림 4. 시스템 동작도 – 사용자가 요청한 파일이 캐시에 존재하는 경우 Fig. 4. System operation diagram - If the file requested by the user exists in the cache.

HHHHBI_2019_v23n1_55_f0005.png 이미지

그림 5. 시스템 동작도 – 사용자가 요청한 파일이 캐시에 존재하지 않는 경우 Fig. 5. System operation diagram - If the file requested by the user does not exist in the cache.

표 1. 시스템 파일별 기능 정의 Table 1. Defining Features by System File.

HHHHBI_2019_v23n1_55_t0001.png 이미지

표 2. 실험 측정 결과 – Fast 3G 네트워크 환경 Table 2. Experimental Results - Fast 3G Network Environment.

HHHHBI_2019_v23n1_55_t0002.png 이미지

표 3. 실험 측정 결과 – 100 Mbps 네트워크 Table 3. Experimental Results – 100 Mbps Network.

HHHHBI_2019_v23n1_55_t0003.png 이미지

References

  1. B. L. Tim, J. Hendler, and O. Lassila. "The semantic web," Scientific American, Vol. 284, No.5, pp. 34-43, May. 2001. https://doi.org/10.1038/scientificamerican0501-34
  2. E-country index. Household internet penetration rate and computer ownership rate [Internet]. Available: http://www.index.go.kr/potal/main/EachDtlPageDetail.do?idx_cd=1345.
  3. Mozila MDN. WebAssembly [Internet]. Available: https://developer.mozilla.org/ko/docs/WebAssembly.
  4. Akamai, 2017 state of the internet connectivity executive summary [Internet]. Available: https://www.akamai.com/kr/ko/multimedia/documents/state-of-the-internet/q1-2017-state-of-the-internet-connectivity-executive-summary.pdf.
  5. J. Wagner, Why performance matters [Internet]. Available: https://developers.google.com/web/fundamentals/performance/why-performance-matters/.
  6. APM Project. AMP project description [Internet]. Available: https://www.ampproject.org/ko/.
  7. R. H. Rapp, and J. Lewis, Accelerated mobile pages advertisement and cascading style sheet merging, 2017.
  8. R. Netravali, and J. Mickens, "Prophecy: accelerating mobile page loads using final-state write logs," in Proceedings of the 15th USENIX Symposium on Networked Systems Design and Implementation, USENIX Association, WA, USA, pp. 249-266, 2018.
  9. Mozila MDN, Progressive web app [Internet]. Available: https://developer.mozilla.org/en-US/docs/Web/Apps/Progressive.