HTML5 기반의 웹 플랫폼이 차세대 국가 표준으로 제정되면서 웹 서비스 업체들은 스마트 미디어기기 및 스마트 TV에서 HTML5 기반의 앱 지원 기술을 경쟁적으로 개발하고 있다. 국제 웹 표준 개발 조직인 W3C를 중심으로 Microsoft, Apple, Mozilla, Google, Opera 등 다양한 웹 브라우저벤더가 표준화에 참여하고 있다. 이렇듯 점차 HTML5의 중요성이 강조되며 HTML5 기반의 웹 페이지는 더 많은 양의 정보를 포함하여야 되며 더 빠른 속도의 로딩시간이 필요하다. 따라서 본 논문은 웹 페이지 로딩시간을 감축하기 위한 초기 연구로써 각 브라우저별 동일한 웹 페이지를 구성하여 초기 로딩시간을 측정한다. 뿐만 아니라 HTML5 태그, 및 CSS 속성을 하나씩 제거하면서 초기 로딩 시간에 많은 비중을 차지하는 태그 및 속성을 분석하고 그 결과를 통해 향후 웹 페이지 로딩시간을 감축할 수 있는 방안을 마련한다.
HTML5 기반의 웹 플랫폼이 차세대 국가 표준으로 제정되면서 웹 서비스 업체들은 스마트 미디어기기 및 스마트 TV에서 HTML5 기반의 앱 지원 기술을 경쟁적으로 개발하고 있다. 국제 웹 표준 개발 조직인 W3C를 중심으로 Microsoft, Apple, Mozilla, Google, Opera 등 다양한 웹 브라우저 벤더가 표준화에 참여하고 있다. 이렇듯 점차 HTML5의 중요성이 강조되며 HTML5 기반의 웹 페이지는 더 많은 양의 정보를 포함하여야 되며 더 빠른 속도의 로딩시간이 필요하다. 따라서 본 논문은 웹 페이지 로딩시간을 감축하기 위한 초기 연구로써 각 브라우저별 동일한 웹 페이지를 구성하여 초기 로딩시간을 측정한다. 뿐만 아니라 HTML5 태그, 및 CSS 속성을 하나씩 제거하면서 초기 로딩 시간에 많은 비중을 차지하는 태그 및 속성을 분석하고 그 결과를 통해 향후 웹 페이지 로딩시간을 감축할 수 있는 방안을 마련한다.
HTML5-based Web platform is established as a next-generation national standards, Web services provider, has been competitively develop support technology HTML5-based app in smart media devices and smart TV. In accordance with the W3C is an international Web standards development organization, Micros...
HTML5-based Web platform is established as a next-generation national standards, Web services provider, has been competitively develop support technology HTML5-based app in smart media devices and smart TV. In accordance with the W3C is an international Web standards development organization, Microsoft, Apple, Mozilla, Google, such as Opera, various Web browser vendors are participating in standardization. Gradually emphasized the importance of HTML5, HTML5 -based Web pages, it is necessary to fast load times when contained a large amount of information. Therefore, in this paper, the initial studies in order to reduce the loading time of a web page, configure each browser-specific same Web page, and measure the initial loading time. Also, one by one remove the HTML5 tags, and CSS property, to analyze the tags and attributes of the account for a large proportion to the initial load time. Through the results, it is desired to provide a process which can reduce the Web page.
HTML5-based Web platform is established as a next-generation national standards, Web services provider, has been competitively develop support technology HTML5-based app in smart media devices and smart TV. In accordance with the W3C is an international Web standards development organization, Microsoft, Apple, Mozilla, Google, such as Opera, various Web browser vendors are participating in standardization. Gradually emphasized the importance of HTML5, HTML5 -based Web pages, it is necessary to fast load times when contained a large amount of information. Therefore, in this paper, the initial studies in order to reduce the loading time of a web page, configure each browser-specific same Web page, and measure the initial loading time. Also, one by one remove the HTML5 tags, and CSS property, to analyze the tags and attributes of the account for a large proportion to the initial load time. Through the results, it is desired to provide a process which can reduce the Web page.
* AI 자동 식별 결과로 적합하지 않은 문장이 있을 수 있으니, 이용에 유의하시기 바랍니다.
문제 정의
따라서 본 논문에서는 HTML5 분석을 통해 브라우저별 초기 로딩시간의 원인을 분석하고자 한다.
HTML5는 널리 사용되고 있고, 웹페이지 초기 로딩 시간 단축에 관한 연구도 세계 곳곳에서 활발히 진행 중이다. 본 논문에서는 HTML5 분석을 통해 브라우저별 초기 로딩시간의 원인을 분석하였다. 이를 통해서 웹페이지 초기 로딩 시간에는 JavaScript가 가장 많은 영향을 미친다는 것을 알아냈다.
제안 방법
JavaScript의 경우 제거를 하게 되면 웹페이지의 기능상에 문제가 생기며 [div]의 경우는 기본적인 태그 속성이라 더 이상 분석을 할 수 없다. 따라서 CSS의 각 속성들을 제거하여 추가적인 실험을 하였다. 실험 환경은 전과 동일하며 CSS의 제거 요소로는 background, margin, height, width, padding, position, border, outline, overflow, webkit-keyframes, webkit-annimation, transition, float, display, color, text, box, z-indx, font, cursor로 모두 웹페이지의 UI만 관여하는 속성들이다.
만약 가장 많은 로딩 시간을 차지하는 부분을 다른 언어로 대체하거나 약간의 기능을 변경하여 사용하게 된다면, 초기 로딩 속도가 개선된다. 로딩 시간을 많이 차지하는 속성을 찾기 위하여 IE, Chrome, Opera, Safari, Firefox 총 5개의 브라우저를 통해 분석하였으며, 모두 동일한 인터넷 환경과 측정 방법으로 속도를 측정하였다.
실험을 진행할 웹 페이지는 최근에 가장 많이 사용되는 사이트들과 같은 기능의 웹페이지를 구성하여 로딩시간을 측정하고, 점차 HTML5의 각 태그, JavaScript, CSS를 하나씩 제거하면서 가장 많이 시간이 감축되는 요소를 찾는다. 측정횟수는 각 100회씩 실시하여 평균값을 이용한다.
웹 브라우저의 초기 로딩 속도를 정확하게 측정하기 위하여 아파치 HTTP 서버를 실험 PC에 설치하여 서버 PC를 만든 후 서버 PC에서 속도를 측정한다. 이렇게 하면, 인터넷 접속 속도에 따른 영향을 받지 않고 정확한 측정이 이루어진다.
이후, 크롬은 구조를 간단하게 개발해 속도를 개선하였고, 렌더링 엔진은 사파리에서 사용된 웹키트를 사용하였으나 28버전부터는 웹키트를 개량하여 만든 블링크 엔진을 이용했다. 특히 JavaScript 처리 엔진으로 덴마크에서 개발한 최신 V8 JavaScript engine을 사용하여 페이지의 속도를 대폭 향상시켰다.
대상 데이터
따라서 CSS의 각 속성들을 제거하여 추가적인 실험을 하였다. 실험 환경은 전과 동일하며 CSS의 제거 요소로는 background, margin, height, width, padding, position, border, outline, overflow, webkit-keyframes, webkit-annimation, transition, float, display, color, text, box, z-indx, font, cursor로 모두 웹페이지의 UI만 관여하는 속성들이다. 이 속성들을 제거한다고 하여도 웹페이지 기능에는 크게 문제되지 않는다.
데이터처리
실험을 진행할 웹 페이지는 최근에 가장 많이 사용되는 사이트들과 같은 기능의 웹페이지를 구성하여 로딩시간을 측정하고, 점차 HTML5의 각 태그, JavaScript, CSS를 하나씩 제거하면서 가장 많이 시간이 감축되는 요소를 찾는다. 측정횟수는 각 100회씩 실시하여 평균값을 이용한다.
성능/효과
각 브라우저마다 차이는 있지만 JavaScript를 제거하고 측정을 하였을 시 평균 82.79% 라는 감소율을 보였다. 이는 자바 스크립트가 인터프리터 언어이기도 하는 동시에 많은 계산량을 가지고 있기 때문인 것으로 보인다.
후속연구
이를 통해서 웹페이지 초기 로딩 시간에는 JavaScript가 가장 많은 영향을 미친다는 것을 알아냈다. JavaScript의 경우에는 HTML5에서 없어서는 안 되는 중요한 연산기능을 수행하기 때문에 JavaScript를 제거하기 보다는 대체할 수 있는 방안을 연구해야 할 것이다.
※ AI-Helper는 부적절한 답변을 할 수 있습니다.