KR20140118135A - 동기식 스크립트 지연 로딩 시스템, 방법 및 컴퓨터 판독 가능한 기록 매체 - Google Patents

동기식 스크립트 지연 로딩 시스템, 방법 및 컴퓨터 판독 가능한 기록 매체 Download PDF

Info

Publication number
KR20140118135A
KR20140118135A KR1020130033524A KR20130033524A KR20140118135A KR 20140118135 A KR20140118135 A KR 20140118135A KR 1020130033524 A KR1020130033524 A KR 1020130033524A KR 20130033524 A KR20130033524 A KR 20130033524A KR 20140118135 A KR20140118135 A KR 20140118135A
Authority
KR
South Korea
Prior art keywords
script
module
loading
delay
source code
Prior art date
Application number
KR1020130033524A
Other languages
English (en)
Other versions
KR101462114B1 (ko
Inventor
윤흥기
Original Assignee
네이버 주식회사
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by 네이버 주식회사 filed Critical 네이버 주식회사
Priority to KR1020130033524A priority Critical patent/KR101462114B1/ko
Priority to US14/228,826 priority patent/US9292321B2/en
Priority to JP2014067731A priority patent/JP5789323B2/ja
Publication of KR20140118135A publication Critical patent/KR20140118135A/ko
Application granted granted Critical
Publication of KR101462114B1 publication Critical patent/KR101462114B1/ko

Links

Images

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00Arrangements for program control, e.g. control units
    • G06F9/06Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44Arrangements for executing specific programs
    • G06F9/455Emulation; Interpretation; Software simulation, e.g. virtualisation or emulation of application or operating system execution engines
    • G06F9/45504Abstract machines for programme code execution, e.g. Java virtual machine [JVM], interpreters, emulators
    • G06F9/45529Embedded in an application, e.g. JavaScript in a Web browser
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00Arrangements for software engineering
    • G06F8/40Transformation of program code
    • G06F8/54Link editing before load time
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00Arrangements for program control, e.g. control units
    • G06F9/06Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44Arrangements for executing specific programs
    • G06F9/445Program loading or initiating
    • G06F9/44521Dynamic linking or loading; Link editing at or after load time, e.g. Java class loading
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00Arrangements for program control, e.g. control units
    • G06F9/06Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44Arrangements for executing specific programs
    • G06F9/448Execution paradigms, e.g. implementations of programming paradigms
    • G06F9/4488Object-oriented
    • G06F9/449Object-oriented method invocation or resolution

Landscapes

  • Engineering & Computer Science (AREA)
  • Software Systems (AREA)
  • Theoretical Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Information Transfer Between Computers (AREA)
  • Stored Programmes (AREA)

Abstract

본 발명은 동기식 스크립트 지연 로딩 시스템에 관한 것으로,
본 발명의 일 측면에 따르면, 동기식 스크립트 지연 로딩 시스템은 스크립트 지연 로더를 요청에 의해 클라이언트 컴퓨터로 제공하는 송수신부를 포함하고, 상기 스크립트 지연 로더는 상기 클라이언트 컴퓨터에서 실행되며, 스크립트 모듈 별로 대응되는 가상 함수를 생성하고 메모리에 로드하는 가상함수 생성부 및 특정 스크립트 모듈의 최초 실행 요청에 따른 상기 가상 함수 호출시 저장 공간에 저장된 해당 스크립트 모듈을 메모리에 로드되도록 하는 모듈 실행부를 포함한다.

Description

동기식 스크립트 지연 로딩 시스템, 방법 및 컴퓨터 판독 가능한 기록 매체{SYSTEM, METHOD AND COMPUTER READABLE RECORDING MEDIUM FOR SYNCHRONOUS SCRIPT LAZY LOADING}
본 발명은 동기식 스크립트 지연 로딩 시스템 등에 관한 것으로, 보다 상세하게는 스크립트 소스코드를 각 모듈 별로 분리하여 저장하고 있다가 해당 모듈이 사용되는 시점에 지연 로딩하여 동기식으로 메모리에 로드하는 동기식 스크립트 지연 로딩 시스템, 방법 및 컴퓨터 판독 가능한 기록 매체에 관한 것이다.
오늘날 인터넷의 광범위한 보급은 이제 유선을 넘어 무선 이동통신 기술로의 급발전을 가져오게 되었고, 실생활에 있어서도 휴대폰, PDA, 핸드헬드(Hand-Held) 컴퓨터 등의 휴대용 단말(이하 '스마트폰'이라 한다)을 통한 인터넷상에서의 정보 검색이 시간과 장소에 구애받지 않고 가능하게 되었다. 스마트폰(smart phone)이란 휴대폰에 컴퓨터 지원 기능을 추가한 지능형 휴대폰을 통칭하는 용어로서, 휴대폰 기능에 충실하면서도 개인 휴대 정보 단말기(PDA) 기능, 인터넷 기능, 동영상 재생 기능 등이 추가되며, 다양한 입력 방식과 터치스크린 등이 구비되어 사용에 보다 편리한 인터페이스를 제공한다. 또한, 무선 인터넷 기능의 지원으로 인터넷 및 컴퓨터에 접속되어 이메일, 웹브라우징, 팩스, 뱅킹, 게임 등 단말기로서의 기능도 수행한다. 이와 같이, 다양한 기능의 구현이 가능해진 스마트폰을 이용하여 웹서핑 또는 웹브라우징을 수행하는 사용자들도 점점 늘고 있다.
한편, 자바 스크립트(Java Script)는 미국의 넷스케이프 커뮤니케이션스사가 개발한 스크립트 언어이며, 다양한 환경에서 사용되고 있는데, 그 중 가장 대표적인 예로서 마이크로소프트사의 인터넷 익스플로러와 같은 웹브라우저에서 실행되는 스크립트 언어로 사용되고 있다. 이 경우 표준 HTML 문서에 삽입되어 인터랙티브(interactive)한 웹페이지를 제공할 수 있으며 특히 최근 들어 컴퓨터 및 스마트폰의 성능이 좋아지면서 애니메이션이나 간단한 계산 등은 서버에 별도 요청을 하지 않아도 자바 스크립트에 의한 프로그램 작동이 가능하기 때문에 최근 활용 범위가 넓어지고 있다.
하지만, 최근에는 사용자들이 편리하게 사용할 수 있도록 점점 더 다양한 유저 인터페이스(UI)와 기능들이 웹서비스에 추가되면서 이에 따른 스크립트 파일, 예컨대 자바 스크립트 파일 역시 그 크기가 증가하게 되었다. 이처럼 증가된 스크립트 파일을 불러들이고 파싱한 뒤 메모리에 로딩하여 실행시키는 작업은 필연적으로 웹페이지의 로딩 시간을 증가시켰고, 특히 상대적으로 대역폭이 작고 응답 시간이 가장 중요한 스마트 폰에서는 증가된 로딩 시간에 따른 체감상 성능 저하가 눈에 띄어 이로 인한 사용자들의 불만과 불편이 늘어나게 되었다.
일 예로서, 도 1a에 도시된 종래 기술에 의해 구현된 예시적인 HTML 파일의 일부분을 참조하면 영역 A로 표시된 부분에 <script> 태그를 이용하여 자바스크립트 파일이 포함(include)된 것을 알 수 있다. 웹 브라우저는, 해당 HTML 파일을 수신하고 순차적으로 인터프리팅(interpreting)을 수행하며 <script> 태그에 대해서는 포함된 자바스크립트 파일을 통신망을 통해 읽어들이고 파일 내에 포함된 모든 자바스크립트 모듈들을 파싱하고 메모리에 로딩한 후에야 그 다음 라인에 있는 태그에 대한 인터프리팅을 수행한다. 따라서, 해당 작업의 수행에 따른 해당 웹페이지가 화면에 표시될 때까지의 지체(delay)가 발생할 수 있고, 또한 해당하는 HTML 파일 내에서 사용되지도 않는 자바스크립트 모듈까지 모두 파싱하여 메모리에 로딩해야 하는 불필요한 작업이 수행되어야 한다는 문제점이 존재한다.
스마트 폰에서의 이러한 자바 스크립트를 이용한 웹 애플리케이션의 구현 기술 중의 하나로서 대한민국 공개특허공보 제10-2011-0065804호 "이동 단말기 및 상기 이동 단말기에서 웹 애플리케이션 실행 방법(주식회사 엘지유플러스)" (문헌 1)에는 자바스크립트 파일을 웹 애플리케이션 실행 전에 미리 컴파일하여 메모리에 로딩하여 상주시킴으로써, 이동 단말기에서 웹 애플리케이션에 대한 실행 속도를 향상시키는 방법이 개시된다.
하지만 문헌 1에 개시된 기술은 스크립트 파일이 한번 로딩되면 반복하여 사용되는 웹 애플리케이션에만 한정되는 방법일 뿐, 하나의 웹 서비스 내에서 서로 다른 스크립트 모듈을 포함하는 다수의 웹 페이지들 사이를 링크를 통해 브라우징하는 웹서핑의 경우에는 일률적으로 적용되기 힘들고, 설사 적용한다 하더라도 초기 로딩 시간이 길어지고 모든 스크립트 파일의 메모리 상주에 따른 메모리 공간 낭비 등의 문제점을 내포하고 있다. 또한, 웹서비스에서 제공되는 다수의 웹페이지 사이를 이동하는 경우 비록 이전에 읽어 들인 스크립트 파일들이 캐시에 저장되어 웹페이지 변경시마다 추가적으로 읽어들일 필요는 없다 할 지라도, 웹 브라우저에서는 해당 웹페이지에 포함된 스크립트 모듈들을 파싱하여 메모리에 로딩하는 작업을 기계적으로 반복하므로 웹서비스에서 사용되는 모든 스크립트 모듈들을 하나의 파일에 담아두는 것 보다는 웹서비스 내의 각 웹페이지 별로 사용하는 스크립트 모듈들을 나누어 필요시마다 로드하는 방식이 성능 향상을 위해 필요하다 하겠다.
따라서, 전술한 바와 같이 웹서비스에서 사용되는 스크립트 모듈들을 그 기능에 따라 여러 개의 파일로 분할하고 필요한 시점에 로드하여 사용할 수 있도록 도와주는 지연 로딩 기술이 개시되었다. 하지만, 종래의 지연 로딩의 경우에는 특정 모듈이 필요할 때 파일 단위로 로딩을 하기 때문에 해당 웹페이지에서 사용하는 모듈에 따라 한번에 많은 요청이 이루어질 수 있고, 스크립트 파일의 로딩을 비동기식으로 처리하므로 콜백 함수를 이용하는 보다 복잡한 형태의 비동기 설계를 할 수 밖에 없으며, 다수의 스크립트 모듈들이 상호 의존적인 경우 이를 고려하여 설계해야 한다는 단점이 존재한다.
일 예로서, util이라는 객체 내의 someMethod라는 메소드를 사용하려는 경우 util 객체를 포함하는 모듈을 네트워크로 불러와 로딩하고 그 후에 콜백 함수 내에서 불러온 해당 모듈을 사용하는 방식으로 구현할 수 밖에 없으며 이와 같은 코딩은 도 1b에 도시된 종래의 비동기식 자바스크립트 지연 로딩 방식을 이용하여 구현한 예시적인 자바스크립트 코드와 같이 작성되어야 한다.
즉, 콜백 함수를 이용한 비동기 방식은 비동기로 동작하는 방식에 대한 이해가 필요하고 다른 코드와의 실행 시점들을 고려해야 하기 때문에 개발 복잡도를 증가시키며 이미 개발된 웹페이지들에게 적용하기 위해서는 기존에 작성된 소스 코드를 대대적으로 변경하여야 한다는 문제점이 있다.
따라서, 종래에 사용되던 스크립트의 비동기식 지연 로딩에 따른 여러가지 문제점을 해결하여, 각 스크립트 모듈을 필요한 때에 메모리에 로딩하도록 하는 동기식 지연 로딩이 가능한 기술적 방안의 필요성이 요구되고 있는 실정이다.
[문헌 1] 대한민국 공개특허공보 제10-2011-0065804호 이동 단말기 및 상기 이동 단말기에서 웹 애플리케이션 실행 방법(주식회사 엘지유플러스) 2011.06.16
본 발명의 목적은 웹페이지의 로딩속도 저하를 해결할 수 있는 동기식 스크립트 지연 로딩 시스템, 방법 및 컴퓨터 판독 가능한 기록 매체를 제공함에 있다.
본 발명의 다른 목적은, 종래의 비동기식 처리에 따른 콜백함수 이용 등의 복잡한 형태의 비동기 설계를 할 수 밖에 없는 문제점을 해결하여, 특정 기능이 필요할 때 해당하는 스크립트 모듈만을 메모리에 로딩하여 사용할 수 있는 동기식 지연 로딩을 구현하여 보다 손쉬운 개발 설계가 가능한 동기식 스크립트 지연 로딩 시스템, 방법 및 컴퓨터 판독 가능한 기록 매체를 제공함에 있다.
본 발명의 또 다른 목적은, 스크립트 모듈 간에 서로 복잡한 의존성을 갖고 있는 경우라도 그 로딩 순서를 고려하지 않고서도 간단하게 개발 설계가 가능한 동기식 스크립트 지연 로딩 시스템, 방법 및 컴퓨터 판독 가능한 기록 매체를 제공함에 있다.
상기한 바와 같은 본 발명의 목적을 달성하고, 후술하는 본 발명의 특유의 효과를 달성하기 위한, 본 발명의 특징적인 구성은 하기와 같다.
본 발명의 일 측면에 따르면, 동기식 스크립트 지연 로딩 시스템은 스크립트 지연 로더를 요청에 의해 클라이언트 컴퓨터로 제공하는 송수신부를 포함하고, 상기 스크립트 지연 로더는 상기 클라이언트 컴퓨터에서 실행되며, 스크립트 모듈 별로 대응되는 가상 함수를 생성하고 메모리에 로드하는 가상함수 생성부 및 특정 스크립트 모듈의 최초 실행 요청에 따른 상기 가상 함수 호출시 저장 공간에 저장된 해당 스크립트 모듈을 메모리에 로드되도록 하는 모듈 실행부를 포함한다.
바람직하게는, 상기 스크립트 지연 로더는, 사용되는 스크립트 모듈들의 버전과 상기 저장 공간에 저장된 스크립트 모듈들의 버전이 동일한지 여부를 확인하는 초기화부를 더 포함한다.
바람직하게는, 상기 스크립트 지연 로더는, 사용되는 버전의 스크립트 소스 코드를 요청하는 소스코드 호출부 및 상기 요청에 의해 전송된 스크립트 소스 코드를 각 스크립트 모듈 별로 분리하여 상기 저장 공간에 저장하는 분리부를 더 포함한다.
바람직하게는, 상기 분리부는 특정 구분 문자에 기초하여 각 스크립트 모듈 별로 분리한다.
바람직하게는, 상기 분리부는 각 스크립트 모듈의 지연 로딩 옵션을 분리하여 상기 저장 공간에 더 저장한다.
바람직하게는, 상기 생성된 가상 함수는 대응되는 스크립트 모듈을 상기 저장 공간으로부터 읽어들여 메모리에 로딩하기 위한 기능을 포함한다.
바람직하게는, 상기 최초 실행 요청은 사용되는 스크립트 모듈들의 버전과 동일한 버전을 갖는 상기 특정 스크립트 모듈이 최초로 실행될 때 발생한다.
바람직하게는, 상기 가상 함수 또는 상기 모듈 실행부는, 상기 로드된 특정 스크립트 모듈에 포함된 메소드(method)들 중 상기 가상 함수를 오버라이드(override)한 메소드를 다시 한 번 호출하는 기능을 더 포함한다.
본 발명의 다른 측면에 따르면, 동기식 스크립트 지연 로딩 방법은 동기식 스크립트 지연 로딩 시스템이 제공하는 스크립트 지연 로더에 의해 수행되는 각 단계가, 스크립트 모듈 별로 대응되는 가상 함수를 생성하고 메모리에 로드하는 가상함수 생성 단계 및 특정 스크립트 모듈의 최초 실행 요청에 따른 상기 가상 함수 호출시 저장 공간에 저장된 해당 스크립트 모듈을 메모리에 로드하는 모듈 실행 단계를 포함한다.
한편, 동기식 스크립트 지연 로딩 방법을 수행하기 위한 프로그램은 컴퓨터로 읽을 수 있는 기록 매체에 저장될 수 있다. 이러한 기록 매체는 컴퓨터 시스템에 의하여 읽혀질 수 있도록 프로그램 및 데이터가 저장되는 모든 종류의 기록매체를 포함한다. 그 예로는, 롬(Read Only Memory), 램(Random Access Memory), CD(Compact Disk), DVD(Digital Video Disk)-ROM, 자기 테이프, 플로피 디스크, 광데이터 저장장치 등이 있으며, 또한 캐리어 웨이브(예를 들면, 인터넷을 통한 전송)의 형태로 구현되는 것도 포함된다. 또한, 이러한 기록매체는 네트워크로 연결된 컴퓨터 시스템에 분산되어, 분산 방식으로 컴퓨터가 읽을 수 있는 코드가 저장되고 실행될 수 있다.
상술한 바와 같이, 본 발명에 따르면 웹페이지의 로딩 속도 저하를 해결할 수 있다는 장점이 있다.
또한, 본 발명에 따르면, 종래의 비동기식 처리에 따른 콜백함수 이용 등의 복잡한 형태의 비동기 설계를 할 수 밖에 없는 문제점을 해결하여, 특정 기능이 필요할 때 해당하는 스크립트 모듈만을 메모리에 로딩하여 사용할 수 있는 동기식 지연 로딩을 구현하여 보다 손쉬운 개발 설계가 가능하다는 장점이 있다.
또한 본 발명에 따르면, 스크립트 모듈 간에 서로 복잡한 의존성을 갖고 있는 경우라도 그 로딩 순서를 고려하지 않고서도 간단하게 개발 설계가 가능하다는 장점이 있다.
도 1a는 종래 기술에 의해 구현된 예시적인 HTML 파일의 일부분을 도시한 HTML 소스 코드이다.
도 1b는 종래의 비동기식 자바스크립트 지연 로딩 방식을 이용하여 구현한 예시적인 자바스크립트 코드이다.
도 1c는 본 발명에 따른 동기식 자바스크립트 지연 로딩 방식을 이용하여 구현한 예시적인 자바스크립트 코드이다.
도 2는 발명의 일 실시예에 따라, 동기식 자바스크립트 지연 로딩 기능이 포함된 웹페이지를 사용자의 요청에 의해 제공하기 위한 전체 시스템의 구성을 개략적으로 도시한 도면이다.
도 3은 본 발명의 일 실시예에 따른 웹서버의 세부 구성도이다.
도 4a는 본 발명의 일 실시예에 따라 동기식 자바스크립트 지연 로딩을 수행하는 클라이언트 컴퓨터의 세부 구조를 나타내는 블록도이다.
도 4b는 본 발명의 일 실시예에 따른 지연로더 실행부의 각 세부 기능 블록을 도시한 블록도이다.
도 5는 본 발명의 일 실시예에 따른 동기식 자바스크립트 지연 로딩 방법을 나타내는 흐름도이다.
도 6은 본 발명의 일 실시예에 따른 예시적인 자바스크립트 소스 코드이다.
도 7은 서로 다른 기기에서 측정한 본 발명에 따른 동기식 자바스크립트 지연 로딩 방식의 적용 유무에 따른 로딩 속도의 차이, 그리고 서로 다른 웹브라우저에서 측정한 파싱 및 실행 속도의 차이를 도시한 표이다.
후술하는 본 발명에 대한 상세한 설명은, 본 발명이 실시될 수 있는 특정 실시예를 예시로서 도시하는 첨부 도면을 참조한다. 이들 실시예는 당업자가 본 발명을 실시할 수 있기에 충분하도록 상세히 설명된다. 본 발명의 다양한 실시예는 서로 다르지만 상호 배타적일 필요는 없음이 이해되어야 한다. 예를 들어, 여기에 기재되어 있는 특정 형상, 구조 및 특성은 일 실시예에 관련하여 본 발명의 정신 및 범위를 벗어나지 않으면서 다른 실시예로 구현될 수 있다. 또한, 각각의 개시된 실시예 내의 개별 구성요소의 위치 또는 배치는 본 발명의 정신 및 범위를 벗어나지 않으면서 변경될 수 있음이 이해되어야 한다. 따라서, 후술하는 상세한 설명은 한정적인 의미로서 취하려는 것이 아니며, 본 발명의 범위는 적절하게 설명된다면 그 청구항들이 주장하는 것과 균등한 모든 범위와 더불어 첨부된 청구항에 의해서만 한정된다. 도면에서 유사한 참조부호는 여러 측면에 걸쳐서 동일하거나 유사한 기능을 지칭한다.
본 발명에서 용어 "스크립트 모듈" 또는 "모듈"은 하나의 독립된 기능을 수행하기 위해 기능 단위로 분할된 각각을 지칭하는 광의의 개념으로, 하나 이상의 함수를 포함할 수 있으며 이하에서 별도의 설명이 없는 경우 "스크립트 모듈" 및 "모듈"은 동일한 의미로서 혼용하여 사용될 수 있다. 한편, 스크립트 소스 코드는 파싱 및 메모리에 로드하여 실행된다.
이하, 본 발명이 속하는 기술분야에서 통상의 지식을 가진 자가 본 발명을 용이하게 실시할 수 있도록 하기 위하여, 본 발명의 바람직한 실시예들에 관하여 첨부된 도면을 참조하여 상세히 설명하기로 한다. 한편, 설명의 용이성을 위해 이하의 실시예들에 있어서는 자바스크립트에 기초하여 설명하도록 하겠으나, 본 발명이 반드시 자바스크립트에만 한정되는 것은 아니며 웹서비스에서 사용될 수 있는 스크립트 언어라면 모두 적용 가능한 것은 본 발명이 속하는 분야에서 통상의 지식을 가진 자에게 자명하다.
전체 시스템 구성
도 2는 발명의 일 실시예에 따라, 동기식 자바스크립트 지연 로딩 기능이 포함된 웹페이지를 사용자의 요청에 의해 제공하기 위한 전체 시스템의 구성을 개략적으로 나타내는 도면이다.
도 2에 도시되어 있는 바와 같이 본 발명의 일 실시예에 따른 전체 시스템은, 데이터베이스를 포함하고 있는 웹서버(100)가 통신망(200)을 통하여 하나 이상의 클라이언트 컴퓨터(300)와 연결되어 있다.
먼저, 본 발명의 일 실시예에 따르면, 웹서버(100)는 클라이언트 컴퓨터(300)로부터 특정 웹페이지에 대한 전송 요청을 수신하여, 해당 요청에 따른 웹페이지를 추출한 뒤 클라이언트 컴퓨터(300)로 전송하는 역할을 한다. 여기서, 전송 요청은 웹 브라우저를 통한 URL(Uniform Resource Locator)의 입력을 통해 이루어질 수 있으며 웹페이지는 동기식 자바스크립트 지연 로딩 기능을 수행하는 지연 로더가 그 내부에 직접적으로 삽입되어 있거나 또는 소정 위치에 저장되어 있는 파일을 포함(include)하는 방식으로 간접적으로 포함할 수 있다. 지연 로더는 클라이언트 컴퓨터(300)에 저장된 자바 스크립트 모듈들이 웹페이지에서 사용되는 자바 스크립트 모듈들과 동일한 버전인지 여부에 기초해 소스 코드의 요청을 결정하고, 요청에 따라 수신된 소스 코드를 각 모듈 별로 분리하여 저장하며, 각 모듈 별로 가상 함수들을 정의하고 실행하여 메모리에 로딩하고 특정 모듈의 실행 요청시 대응되는 가상 함수의 실행을 통해 해당 모듈의 소스 코드를 읽어들이고 메모리에 로딩함으로써 해당 모듈이 실행되도록 하는 기능을 수행하며, 그 구체적인 기능 각각에 대해서는 후술하도록 한다.
또한, 본 발명의 일 실시예에 따르면 통신망(200)은 유선 및 무선 등과 같은 그 통신 양태를 가리지 않고 구성될 수 있으며, 단거리 통신망(PAN; Personal Area Network), 근거리 통신망(LAN; Local Area Network), 도시권 통신망(MAN; Metropolitan Area Network), 광역 통신망(WAN; Wide Area Network) 등 다양한 통신망으로 구성될 수 있다. 또한, 상기 통신망(200)은 공지의 월드와이드웹(WWW; World Wide Web)일 수 있으며, 적외선(Infrared Data Association; IrDA) 또는 블루투스(Bluetooth)와 같이 단거리 통신에 이용되는 무선전송기술을 이용할 수도 있다.
한편, 본 발명의 일 실시예에 따른 클라이언트 컴퓨터(300)는 사용자의 특정 웹페이지 요청에 대한 결과를 제공받기 위하여 통신망(200)을 통하여 웹서버(100)와 연결하기 위한 기능을 포함하는 입출력 장치를 의미하며, 데스크톱 컴퓨터뿐만 아니라 노트북 컴퓨터, 워크스테이션, 팜톱(palmtop) 컴퓨터, 개인 휴대 정보 단말기(personal digital assistant: PDA), 웹 패드, 스마트 폰을 포함하는 이동 통신 단말기 등과 같이 메모리 수단을 구비하고 마이크로 프로세서를 탑재하여 연산 능력을 갖춘 디지털 기기라면 얼마든지 본 발명에 따른 클라이언트 컴퓨터(300)로 채택될 수 있다. 바람직하게는, 웹서버(100)와 연결하고, 동기식 지연 로더가 탑재된 특정 웹페이지를 웹서버(100)를 통해 제공받아 해당 웹페이지를 보여주고 지연 로더가 동기식으로 동작하도록 웹 브라우저를 실행시키고 사용할 수 있으나, 반드시 상기 예에 한정되는 것은 아니다.
웹서버의 세부 구성도
도 3은 본 발명의 일 실시예에 따른 웹서버(100)의 세부 구성도이다.
도 3을 참조하면, 본 발명의 일 실시예에 따른 웹서버(100)는 송수신부(110), 웹페이지 제공부(120), 자바스크립트 소스 코드 전송부(130) 및 저장부(140)를 포함할 수 있다.
송수신부(110)는 클라이언트 컴퓨터(300)로부터 특정 웹페이지에 대한 전송 요청을 수신하여 웹페이지 제공부(120)로 전송하고, 웹페이지 제공부(120)로부터 수신받은 웹페이지를 클라이언트 컴퓨터(300)로 전송한다. 여기서 전송 요청은 URL의 형식일 수 있다. 또한, 송수신부(110)는 클라이언트 컴퓨터(300)로부터 지연 로딩할 자바스크립트 모듈들의 소스 코드 전송 요청을 수신하여 자바스크립트 소스 코드 전송부(130)로 전송하고, 자바스크립트 소스 코드 전송부(130)로부터 수신받은 소스 코드를 클라이언트 컴퓨터(300)로 전송한다. 여기서 자바스크립트 소스 코드는 특정한 구분 문자를 기준으로 구분되는 여러 개의 자바스크립트 모듈들을 포함하는 한 개의 파일형식일 수 있다.
웹페이지 제공부(120)는 송수신부(110)로부터 수신한 전송 요청에 해당하는 웹페이지를 저장부(140)로부터 검색한다. 검색을 통해 매칭되는 웹페이지는 클라이언트 컴퓨터(300)로 보내지기 위해 송수신부(110)로 전송된다. 여기서 웹페이지는 지연 로더를 포함할 수 있다.
자바스크립트 소스 코드 전송부(130)는 송수신부(110)로부터 수신한 전송 요청에 기초하여 자바스크립트 소스 코드를 저장부(140)로부터 추출하고, 추출한 소스 코드를 클라이언트 컴퓨터(300)로 보내기 위해 송수신부(110)로 전송한다.
저장부(140)는 웹페이지 제공부(120)가 검색할 수 있는 웹페이지, 자바스크립트 소스 코드 전송부(130)에서 추출하는 자바스크립트 소스 코드 등을 저장하는 공간을 통칭하는 개념이다. 본 발명의 간략한 예시를 위해서 도 3에는 저장부(140)가 하나만 도시되어 있지만, 본 발명의 다른 실시예에 따라, 앞서 나열한 다양한 데이터들이 하나 이상의 물리적으로 구별되는 별도의 데이터베이스화된 저장부에 저장될 수 있음은 본 발명이 속하는 분야에서 통상의 지식을 가진 자에게 자명하다.
도 3에서의 송수신부(110), 웹페이지 제공부(120) 및 자바스크립트 소스 코드 전송부(130)는 물리적으로 하나의 기계 내에 구현될 수도 있고 일부 또는 그 각각이 물리적으로 다른 기계에 구현되거나, 동일한 기능을 하는 물리적으로 복수 개 존재하는 기계가 병렬적으로 존재할 수도 있다. 이렇듯 본 발명은 각 구성부가 설치된 기계 또는 데이터베이스의 물리적인 개수 및 위치에 한정되지 않고 다양한 방식으로 설계 변경될 수 있음은 본 발명이 속하는 기술분야에서 통상의 지식을 가진 자에게 있어 자명하다.
클라이언트 컴퓨터의 세부 구성도
도 4a는 본 발명의 일 실시예에 따라 동기식으로 자바스크립트 지연 로딩을 수행하는 클라이언트 컴퓨터(300)의 세부 구조를 나타내는 블록도이다. 본 발명에 따라 클라이언트 컴퓨터(300)는 지연 로더(320)의 실행을 통해 특정 자바스크립트 모듈이 요청되는 때에 저장되어 있던 해당 자바스크립트 코드를 메모리에 로딩함으로써 동기적인 지연 로딩을 구현한다. 한편, 자바스크립트 코드는 지연 로더(320)의 실행 시점에 그 버전에 기초하여 선택적으로 전송 받아 저장 공간에 저장하여 둔다. 또한, 본 발명의 실시예에 따른 지연 로더(320)의 각 기능들은 요청에 따라 수신된 웹페이지 내에 포함되어 동작할 수 있다.
도 4a를 참조하면 본 발명의 일 실시예에 따른 클라이언트 컴퓨터(300)는 웹브라우저(310), 지연로더(320) 및 저장 공간(330)을 포함할 수 있다.
웹브라우저(310)는 요청에 따라 웹서버(100)로부터 수신된 웹페이지를 순차적으로 해석하여 보여주는(렌더링하는) 기능을 수행한다. 지연 로더가 포함된 것을 확인하는 경우, 웹브라우저(310)는 지연로더(320)를 실행한다. 지연로더(320)의 실행으로 인해 웹브라우저에 웹페이지를 보여 주는 시간이 지연되는 것을 최소화되도록, 지연로더(320)의 실행은 웹페이지의 조작이 가능한 시점 또는 웹페이지의 렌더링이 완료된 시점 이후에 동작하도록 배치하는 것이 바람직하다. 따라서, 웹페이지의 소스 코드 내에서 지연로더(320)의 기능을 수행하는 코드의 위치는 조작이 필요한 웹페이지의 요소 이후에 또는 웹페이지의 </body> 태그 이전에 삽입될 수 있고, 예를 들면, OnLoad와 같은 이벤트에 기초하여 지연 로더의 실행이 시작될 수 있으나 반드시 상술한 예에 한정되는 것은 아니다. 또한, 특정 자바스크립트 모듈의 실행 요청, 즉 해당 모듈을 실행하여야 하는 이벤트가 발생하는 경우 대응되는 가상함수를 통해 해당 모듈이 동기식으로 지연 로딩된다.
지연로더(320)는 초기화를 통한 버전 설정, 버전의 대비에 기초한 자바스크립트 소스 코드 요청 및 수신, 수신된 소스 코드로부터 각 자바스크립트 모듈 별 분리 및 저장, 분리되어 저장된 각 자바스크립트 모듈 별 가상 함수의 생성 및 메모리 로딩, 그리고 특정 자바스크립트 모듈의 실행 요청에 따른 가상 함수 실행에 의해 해당 모듈의 동기식 지연 로딩 기능을 수행한다. 지연로더(320)의 각 기능에 대한 구체적인 설명은 후술하도록 한다.
저장 공간(330)은 웹브라우저(310) 및 지연로더(320)의 실행 도중에 발생하는 다양한 종류의 데이터를 임시적 또는 영구적으로 저장하는 공간을 통칭하는 개념이다. 바람직하게는, 저장 공간(330)은 지연로더(320)에서 수신한 소스 코드를 각 자바스크립트 모듈 별로 분리하여 저장하는 공간으로 사용될 수 있으며, 웹 문서 제작을 위한 표준 프로그래밍 언어 HTML(HyperText Markup Language)의 규격인 HTML5에서 정의된, 로컬 기기에 저장할 수 있는 localStorage 규격을 이용하여 사용되는 공간일 수 있으나 반드시 이에 한정되는 것은 아니다.
한편, 본 발명의 일 실시예에 따른 지연로더(320)의 각 세부 기능 블록을 도시한 블록도인 도 4b를 참조하여 더욱 상세히 설명하면, 지연로더(320)는 초기화부(321), 소스코드 호출부(322), 분리부(323), 가상함수 생성부(324) 및 모듈 실행부(325)를 포함한다.
초기화부(321)는 지연로더의 최초 실행시 초기화를 통해 현재 웹페이지에서 사용되는 자바스크립트 모듈들의 버전을 설정한다. 버전은 웹페이지 내에 또는 지연로더에 특정 변수의 값으로 저장될 수 있다. 또한, 초기화부(321)는 저장 공간(330) 내에 자바스크립트 모듈들이 이미 저장되어 있는지 여부를 확인하고, 만일 저장되어 있는 경우 저장된 모듈들의 버전이 현재 웹페이지에서 사용되는 자바스크립트 모듈들의 버전과 대비하여 동일한 버전인지 여부를 판단하는 기능을 수행한다. 동일한 버전인지 여부는 앞서 설정한, 현재 웹페이지에서 사용되는 자바스크립트 모듈들의 버전 및 저장 공간(330) 내에 저장된 자바스크립트 모듈들의 버전을 대비하여 확인할 수 있으며, 만일 저장 공간(330) 내에 자바스크립트 모듈이 저장되어 있지 않거나, 또는 저장되어 있더라도 버전들의 대비 결과 동일한 버전이 아닌 경우 소스코드 호출부(322)를 통하여 해당 버전을 갖는 자바스크립트 소스 코드를 수신하고 분리부(323)를 통해 모듈 별로 분리하여 저장한다.
소스코드 호출부(322)는 웹서버(100)로 해당 버전을 갖는 자바스크립트 소스 코드를 요청하고, 웹서버(100) 내의 자바스크립트 소스코드 제공부(130)로부터 제공되는 소스 코드를 수신한다. 일반적인 HTML의 경우 서버측에 특정 데이터를 요청하기 위해서는 웹페이지 전체를 리프레시(refresh)해야 한다는 문제점이 있으나, AJAX(Asynchronous JavaScript And XML) 기술을 이용하는 경우 웹페이지 전체의 리프레시 없이도 필요한 정보를 서버측에 요청하고 수신할 수 있다. 해당 버전을 갖는 자바스크립트 소스코드의 요청 및 수신에 AJAX 기술을 적용하는 것이 바람직하나, 소스코드 호출부(322)의 구현이 반드시 AJAX 기술에 한정되어야 하는 것은 아니다. 한편, 소스코드는 텍스트 형태로 가져올 수 있으므로 종래 기술과 같이 자바스크립트의 무조건적인 파싱 및 메모리 로딩이 발생하지 않고, 후술하는 분리부(323)를 통하여 각 모듈 별로 분리되어 저장되게 된다.
분리부(323)는 소스코드 호출부(322)를 통해서 수신한 자바스크립트 소스 코드에서 특정 구분 문자를 기준으로 모듈 별 소스 코드 및 지연 로딩의 옵션을 분리하여 저장 공간(330)에 저장한다. 소스 코드에는 지연 로딩할 각 자바스크립트 모듈 별로 특정 구분 문자가 삽입되어 있으며, 분리부(323)는 split() 함수 등을 이용하여 소스 코드를 모듈별로 지연 로딩의 옵션을 포함하여 분리한다. 본 발명의 일 실시예에 따른 예시적인 자바스크립트 소스 코드를 도시한 도 6을 참조하면, 도 6에는 "new Function("return defineLazyObject( )")"와 같은 익명 함수가 특정 구분 문자로 사용되고 있으며, 이에 따라 도 6의 소스 코드는 총 2개의 자바스크립트 모듈로 구분되어 분리될 수 있다. 한편, 정의된 특정 구분 문자 중 "defineLazyObject()" 문자열 내에 지연 로딩의 옵션을 설정하여 상황 별로 다르게 동작하도록 구현할 수 있다. 보다 구체적인 예로서, defineLazyObject() 문자열 내의 'sType'이라는 파라미터 뒤에는 해당 모듈의 종류(예컨대 클래스 타입인지 등), 그리고 'aTriggerMethod'라는 파라미터 뒤에는 해당 모듈에서 최초로 호출될 메소드들(후술하는 가상함수 생성부는 모듈 내의 각 메소드에 대응하는 모든 가상 함수를 생성하는 것이 아닌, 본 지연 로딩 옵션에서 설정된 메소드들에 대응하는 가상 함수만을 생성할 수도 있다.)을 부가 하는 방식으로 지연 로딩의 옵션을 설정할 수 있으나 반드시 설시된 예에 한정되는 것은 아니다. 따라서, 분리부(323)는 각 모듈 별로 구분된 소스 코드 각각에 대해 지연 로딩의 옵션을 분리한 후 저장 공간(330)에 저장한다.
이처럼, 초기화를 통해 필요한 경우 웹서비스에서 사용되는 자바스크립트 모듈 전체를 한꺼번에 텍스트 형태로 가져온 뒤 분리부(323)를 통해 자바스크립트 전체를 모듈 별로 구분하여 분리하고 저장해 둠으로써 웹서비스 내에 포함된 각 웹페이지 사이를 이동한다 할지라도 자바스크립트 요청에 따른 별도의 네트워크 트래픽이 발생하지 않고 저장 공간(330) 내에 저장된 데이터를 활용할 수 있으므로 이에 따른 뚜렷한 성능 향상 효과가 나타난다.
또한, 저장 공간(330)에 저장된 데이터는 사용자가 의도적으로 삭제하지 않는 한 계속하여 유지되므로 전술한 초기화부(321)에서 수행하는 버전의 대비에 따라 새로운 기능의 배포에 따른 버전의 변경을 확인하는 경우 자동으로 최신 버전을 갖는 자바스크립트 소스 코드로 갱신되므로 개발자의 입장에서도 그 적용 및 프로그래밍이 편리하다.
가상함수 생성부(324)는 저장 공간(330)에 저장된 각각의 모듈에 대응되는 가상 함수들을 생성하고, 생성된 가상 함수를 메모리에 로딩한다. 가상 함수는 모듈이 포함하고 있는 함수에 관한 정보를 포함할 수 있으며, 저장 공간(330)에 분리되어 저장된 모듈 각각에 대해서 설정된 지연 로딩의 옵션을 참조하여 생성된다. 가상 함수는 특정 모듈의 최초 실행 시점을 파악하여 동기적으로 지연 로딩하기 위해 필요한 함수로서, 대응되는 모듈을 저장 공간(330)으로부터 읽어들이고 웹브라우저(310)에 전달함으로써 메모리에 로딩시키는 기능 및 모듈에 포함된 메소드(method)들 중 가상 함수를 오버라이드(override)한 메소드를 실제로 실행시키기 위해 다시 한 번 호출하는 기능을 포함할 수 있다. 따라서, 자바 스크립트 모듈의 사이즈에 관계 없이 이와 대응되는 가상 함수는 전술된 기능만을 포함하는 매우 작은 사이즈로 구성되어 있어 그 생성 및 메모리 로딩 속도가 매우 빠르다. 또한, 전술한 바와 같이 가상 함수는 공통적인 기능을 포함하고 있으므로 생성되는 가상 함수는 대응되는 모듈 및 메소드를 인식할 수 있는 파라미터를 전송하면서 후술하는 지연 로더(320)의 모듈 실행부(325)를 호출하고, 모듈 실행부(325)에서 대응되는 모듈을 메모리에 로딩하고 이 중 오버라이드된 메소드를 실행하는 기능을 수행하도록 정의될 수도 있다.
한편, 가상 함수가 호출되는 시점을 대응되는 특정 모듈을 최초로 사용하기 위한 시점 즉 해당 모듈의 최초 실행 시점으로 간주한다. 최초 실행 시점은 초기화부(321)에 의한 판단 결과 저장 공간(330) 내에 특정 자바스크립트 모듈이 저장되어 있지 않거나, 저장되어 있더라도 그 버전이 현재 웹페이지에서 사용되는 자바스크립트 모듈의 버전과 동일하지 않아서 소스코드 호출부(322)를 통하여 해당 버전을 갖는 상기 특정 자바스크립트 모듈의 소스 코드를 수신하고 분리부(323)를 통해 저장한 이후, 상기 특정 자바스크립트 모듈에 대해 최초로 실행 요청이 들어오는 경우 발생한다.
모듈 실행부(325)는 특정 자바 스크립트 모듈의 최초 실행 요청시, 즉 최초 실행 시점에 이에 대신하여 실행되는 가상 함수의 호출에 기초하여, 가상 함수와 대응되는 특정 모듈을 저장 공간(330)으로부터 읽어 웹브라우저(310)에 전달함으로써 메모리에 로딩한다. 또한, 가상 함수에 대응하는 모듈에 포함된 메소드들 중 가상 함수를 오버라이드한 메소드를 실제로 실행시키기 위해 다시 한 번 호출하는 기능 또한 포함할 수 있다.
이처럼, 모듈 실행부(325)의 실행에 의해, 메모리에 로딩되었던 가상 함수는 이에 대응되는 특정 모듈로 대체되어 메모리에 로딩되고, 이후 동일한 모듈의 실행 요청시에는 가상 함수를 대체하여 메모리에 로딩되어 있는 해당 모듈이 바로 실행될 수 있다.
이처럼, 지연로더(320) 내부의 각 구성요소의 유기적인 기능에 의해, 각 자바스크립트 모듈은 미리 로딩되지 않고 특정 모듈의 실행 시점에 가상 함수의 실행을 거쳐 동기적으로 해당 모듈만이 메모리에 로딩되어 실행될 수 있다. 따라서, 현재 사용하지 않고 있는 모듈을 미리 로딩할 필요없이 그 사이즈가 매우 작은 가상함수를 이용해서 준비를 하고 있다가, 실제 실행이 필요한 시점에 필요한 해당 모듈만을 메모리에 로딩하도록 함으로써 웹브라우저의 초기 로딩 속도를 크게 향상시킬 수 있다.
동기식 자바스크립트 지연 로딩 방법
도 5는 본 발명의 일 실시예에 따른 동기식 자바스크립트 지연 로딩 방법을 나타내는 흐름도이다. 도 5를 참조하면, 지연로더(320)의 초기화부(321)에서는 먼저 초기화(S501)를 실행한다. 전술한 바와 같이 단계 S501의 초기화에서는 현재 웹페이지에서 사용되는 자바스크립트 모듈들의 버전 설정 기능을 포함한다. 그 후, 초기화부(321)에서는 저장 공간(330) 내에 자바스크립트 소스코드가 모듈 별로 분리되어 저장되어 있는지 여부를 확인(S502)하고, 만일 저장되어 있다면 설정된 버전이 저장 공간(330) 내에 저장된 버전과 대비하여 동일한지 여부를 확인(S503)한다.
만일 단계 S502에서 저장 공간(330) 내에 자바스크립트 소스코드가 저장되어 있지 않거나 비록 저장되어 있다 할지라도 단계 S503에서 대비된 두 개의 버전이 동일하지 않은 경우, 소스코드 호출부(322)는 웹서버(100)로 설정된 버전을 갖는 자바스크립트 소스코드를 요청(S504)한다.
단계 S504에서의 요청에 따라 전송된 자바스크립트 소스코드는 분리부(323)에서 자바스크립트 모듈 각각으로 구분되어 분리되고, 또한 지연 로딩 옵션도 각 모듈 별로 분리하여 저장 공간(330)에 저장(S505)한다. 전술한 바와 같이 소스코드에서 각 모듈 별로 구분하여 분리하기 위해 소스코드에는 특정 구분 문자가 포함되어 있을 수 있으며, 분리부(323)는 포함된 특정 구분 문자를 기준으로 모듈 별로 소스 코드를 분리할 수 있다.
이미 동일한 버전을 갖는 자바스크립트 소스 코드가 저장공간(330)에 저장되어 있거나 또는 단계 S504 내지 단계 S505를 통해 동일한 버전을 갖는 자바스크립트 소스 코드가 각 모듈별로 분리되어 저장공간(330)에 저장된 후, 가상함수 생성부(334)는 저장공간(330)에 분리되어 저장된 각 자바스크립트 모듈 별로 대응되는 가상 함수를 생성하고 메모리에 로딩(S506)한다. 가상 함수는 단계 S505에서 분리된 지연 로딩 옵션에 기초하여 생성되며, 전술한 바와 같이 대응되는 모듈을 저장 공간(330)으로부터 읽어들이고 웹브라우저(310)에 전달함으로써 메모리에 로딩시키는 기능 및 모듈에 포함된 메소드들 중 가상 함수를 오버라이드한 메소드를 실제로 실행시키기 위해 다시 한 번 호출하는 기능을 포함할 수 있으며, 모듈 실행부(325)의 호출에 의해 수행될 수도 있다.
이후, 가상 함수의 호출시, 즉 특정 자바 스크립트 모듈의 최초 실행 요청(S507)시, 가상 함수와 대응되는 특정 모듈을 저장 공간(330)으로부터 읽어들여 웹브라우저에 전달함으로써 메모리에 로딩(S508)한다. 또한, 메모리에 로딩된 모듈에 포함된 메소드들 중 가상 함수를 오버라이드한 메소드를 실제로 실행시키기 위해 다시 한 번 호출하여 실행(S509)되도록 한다. 도 5에 도시된 바와 같은 지연 로딩 방법에 의해 가상 함수를 사용하여도 지연 로더 기능을 적용하기 전과 동일하게 동작하는 것을 보장한다. 또한, 단계 S508에 의해 메모리에 로딩되었던 가상 함수는 이에 대응되는 특정 모듈로 오버라이드되어 메모리에 로딩되고, 이후 동일한 모듈의 실행 요청시에는 가상 함수의 실행 없이도 메모리에 로딩되어 있는 해당 모듈이 바로 실행될 수 있다.
한편, 본 발명에 따른 동기식 지연 로딩 방식에 의하면 종래의 지연 로딩을 적용하지 않았을 때와 동일한 방식으로 코딩할 수 있다. 예컨대 util이라는 객체 내의 someMethod라는 메소드를 사용하려는 경우 도 1c에 도시된 본 발명에 따른 동기식 자바스크립트 지연 로딩 방식을 이용하여 구현한 예시적인 자바스크립트 코드와 같이 작성되면 되므로 모듈간의 다른 코드와의 실행 시점 및 모듈 간의 의존성에 대한 고려 없이도 종래 방식과 같이 프로그래밍이 가능하며 그리고 이미 개발된 웹페이지들의 경우에도 별도의 수정 없이 적용 가능하다.
동기식 자바스크립트 지연 로딩 방식 적용에 따른 로딩 속도의 차이
도 7은 서로 다른 기기에서 측정한 본 발명에 따른 동기식 자바스크립트 지연 로딩 방식의 적용 유무에 따른 로딩 속도의 차이, 그리고 서로 다른 웹브라우저에서 측정한 파싱 및 실행 속도의 차이를 도시한 표이다.
먼저, 표 (a)는 3G 네트워크와 비슷하게 구성한 모바일 환경에서 서로 다른 OS 버전을 갖는 서로 다른 기기를 이용하여 특정 웹페이지의 로딩 속도를 측정한 표로서, 기기 및 OS 버전에 관계 없이 본 발명에 따른 동기식 자바스크립트 지연 로딩 방식을 적용한 경우 대략 20% 내지 25% 정도의 로딩 속도 향상 효과가 나타난 것을 확인할 수 있다.
다음으로, (b)는 동일한 기기에서 서로 다른 웹브라우저를 이용하여 특정 웹페이지 로드시 자바스크립트의 파싱과 실행에 소요되는 시간을 측정한 표로서, 웹브라우저의 종류에 관계 없이 본 발명에 따른 동기식 자바스크립트 지연 로딩 방식을 적용한 경우 웹페이지 로드시 자바스크립트의 파싱과 실행에 소요되는 시간이 대략 30% 정도 감소됨을 확인할 수 있다.
본 발명의 지연 로딩 방식에 따르면 각 자바스크립트 모듈별로 생성되는 가상 함수의 사이즈는 자바스크립트 모듈의 사이즈와 관계 없이 일정하게 작은 사이즈로 유지되므로 도 7에서 도시된 로딩 속도의 차이는 웹페이지에 더 많은 기능을 구현하기 위해 자바스크립트 소스 코드들의 사이즈가 커질수록 더욱 명확히 나타나게 된다.
본 발명의 일 실시예에 따른 방법은 다양한 컴퓨터 수단을 통하여 수행될 수 있는 프로그램 명령 형태로 구현되어 컴퓨터 판독 가능 매체에 기록될 수 있다. 상기 컴퓨터 판독 가능 매체는 프로그램 명령, 데이터 파일, 데이터 구조 등을 단독으로 또는 조합하여 포함할 수 있다. 상기 매체에 기록되는 프로그램 명령은 본 발명을 위하여 특별히 설계되고 구성된 것들이거나 컴퓨터 소프트웨어 당업자에게 공지되어 사용 가능한 것일 수도 있다. 컴퓨터 판독 가능 기록 매체의 예에는 하드 디스크, 플로피 디스크 및 자기 테이프와 같은 자기 매체(magnetic media), CD-ROM, DVD와 같은 광기록 매체(optical media), 플롭티컬 디스크(floptical disk)와 같은 자기-광 매체(magneto-optical media), 및 롬(ROM), 램(RAM), 플래시 메모리 등과 같은 프로그램 명령을 저장하고 수행하도록 특별히 구성된 하드웨어 장치가 포함된다. 프로그램 명령의 예에는 컴파일러에 의해 만들어지는 것과 같은 기계어 코드뿐만 아니라 인터프리터 등을 사용해서 컴퓨터에 의해서 실행될 수 있는 고급 언어 코드를 포함한다. 상기된 하드웨어 장치는 본 발명의 동작을 수행하기 위해 하나 이상의 소프트웨어 모듈로서 작동하도록 구성될 수 있으며, 그 역도 마찬가지이다.
본 발명은 특정 기능들 및 그의 관계들의 성능을 나타내는 방법 단계들의 목적을 가지고 위에서 설명되었다. 이러한 기능적 구성 요소들 및 방법 단계들의 경계들 및 순서는 설명의 편의를 위해 여기에서 임의로 정의되었다. 상기 특정 기능들 및 관계들이 적절히 수행되는 한 대안적인 경계들 및 순서들이 정의될 수 있다. 임의의 그러한 대안적인 경계들 및 순서들은 그러므로 상기 청구된 발명의 범위 및 사상 내에 있다. 추가로, 이러한 기능적 구성 요소들의 경계들은 설명의 편의를 위해 임의로 정의되었다. 어떠한 중요한 기능들이 적절히 수행되는 한 대안적인 경계들이 정의될 수 있다. 마찬가지로, 흐름도 블록들은 또한 어떠한 중요한 기능성을 나타내기 위해 여기에서 임의로 정의되었을 수 있다. 확장된 사용을 위해, 상기 흐름도 블록 경계들 및 순서는 정의되었을 수 있으며 여전히 어떠한 중요한 기능을 수행한다. 기능적 구성 요소들 및 흐름도 블록들 및 순서들 둘 다의 대안적인 정의들은 그러므로 청구된 본 발명의 범위 및 사상 내에 있다.
본 발명은 또한 하나 이상의 실시예들의 용어로, 적어도 부분적으로 설명되었을 수 있다. 본 발명의 실시예는 본 발명, 그 측면, 그 특징, 그 개념, 및/또는 그 예를 나타내기 위해 여기에서 사용된다. 본 발명을 구현하는 장치, 제조의 물건, 머신, 및/또는 프로세스의 물리적인 실시예는 여기에 설명된 하나 이상의 실시예들을 참조하여 설명된 하나 이상의 측면들, 특징들, 개념들, 예들 등을 포함할 수 있다. 더구나, 전체 도면에서, 실시예들은 상기 동일한 또는 상이한 참조 번호들을 사용할 수 있는 상기 동일하게 또는 유사하게 명명된 기능들, 단계들, 모듈들 등을 통합할 수 있으며, 그와 같이, 상기 기능들, 단계들, 모듈들 등은 상기 동일한 또는 유사한 기능들, 단계들, 모듈들 등 또는 다른 것들일 수 있다.
이상과 같이 본 발명에서는 구체적인 구성 요소 등과 같은 특정 사항들과 한정된 실시예 및 도면에 의해 설명되었으나 이는 본 발명의 보다 전반적인 이해를 돕기 위해서 제공된 것일 뿐, 본 발명은 상기의 실시예에 한정되는 것은 아니며, 본 발명이 속하는 분야에서 통상적인 지식을 가진 자라면 이러한 기재로부터 다양한 수정 및 변형이 가능하다.
따라서, 본 발명의 사상은 설명된 실시예에 국한되어 정해져서는 아니되며, 후술하는 특허청구범위뿐 아니라 이 특허청구범위와 균등하거나 등가적 변형이 있는 모든 것들은 본 발명 사상의 범주에 속한다고 할 것이다.
100 : 웹서버 110: 송수신부
120 : 웹페이지 제공부 130 : 자바스크립트 소스코드 제공부
140 : 저장부 200 : 통신망
300 : 클라이언트 컴퓨터 310 : 웹브라우저
320 : 지연로더 321 : 초기화부
322 : 소스코드 호출부 323 : 분리부
324 : 가상함수 생성부 325 : 모듈 실행부
330 : 저장 공간

Claims (17)

  1. 스크립트 지연 로더를 요청에 의해 클라이언트 컴퓨터로 제공하는 송수신부를 포함하는 동기식 스크립트 지연 로딩 시스템으로서,
    상기 스크립트 지연 로더는 상기 클라이언트 컴퓨터에서 실행되며,
    스크립트 모듈 별로 대응되는 가상 함수를 생성하고 메모리에 로드하는 가상함수 생성부; 및
    특정 스크립트 모듈의 최초 실행 요청에 따른 상기 가상 함수 호출시 저장 공간에 저장된 해당 스크립트 모듈을 메모리에 로드되도록 하는 모듈 실행부를 포함하는, 동기식 스크립트 지연 로딩 시스템.
  2. 청구항 1에 있어서, 상기 스크립트 지연 로더는,
    사용되는 스크립트 모듈들의 버전과 상기 저장 공간에 저장된 스크립트 모듈들의 버전이 동일한지 여부를 확인하는 초기화부를 더 포함하는, 동기식 스크립트 지연 로딩 시스템.
  3. 청구항 1에 있어서, 상기 스크립트 지연 로더는,
    사용되는 버전의 스크립트 소스 코드를 요청하는 소스코드 호출부; 및
    상기 요청에 의해 전송된 스크립트 소스 코드를 각 스크립트 모듈 별로 분리하여 상기 저장 공간에 저장하는 분리부를 더 포함하는, 동기식 스크립트 지연 로딩 시스템.
  4. 청구항 3에 있어서,
    상기 분리부는 특정 구분 문자에 기초하여 각 스크립트 모듈 별로 분리하는, 동기식 스크립트 지연 로딩 시스템.
  5. 청구항 3에 있어서,
    상기 분리부는 각 스크립트 모듈의 지연 로딩 옵션을 분리하여 상기 저장 공간에 더 저장하는, 동기식 스크립트 지연 로딩 시스템.
  6. 청구항 1에 있어서,
    상기 생성된 가상 함수는 대응되는 스크립트 모듈을 상기 저장 공간으로부터 읽어들여 메모리에 로딩하기 위한 기능을 포함하는, 동기식 스크립트 지연 로딩 시스템.
  7. 청구항 1에 있어서,
    상기 최초 실행 요청은 사용되는 스크립트 모듈들의 버전과 동일한 버전을 갖는 상기 특정 스크립트 모듈이 최초로 실행될 때 발생하는, 동기식 스크립트 지연 로딩 시스템.
  8. 청구항 1에 있어서, 상기 가상 함수 또는 상기 모듈 실행부는, 상기 로드된 특정 스크립트 모듈에 포함된 메소드(method)들 중 상기 가상 함수를 오버라이드(override)한 메소드를 다시 한 번 호출하는 기능을 더 포함하는, 동기식 스크립트 지연 로딩 시스템.
  9. 동기식 스크립트 지연 로딩 시스템이 제공하는 스크립트 지연 로더에 의해 수행되는 각 단계가,
    스크립트 모듈 별로 대응되는 가상 함수를 생성하고 메모리에 로드하는 가상함수 생성 단계; 및
    특정 스크립트 모듈의 최초 실행 요청에 따른 상기 가상 함수 호출시 저장 공간에 저장된 해당 스크립트 모듈을 메모리에 로드하는 모듈 실행 단계를 포함하는, 동기식 스크립트 지연 로딩 방법.
  10. 청구항 9에 있어서, 상기 방법은,
    사용되는 스크립트 모듈들의 버전과 상기 저장 공간에 저장된 스크립트 모듈들의 버전이 동일한지 여부를 확인하는 초기화 단계를 더 포함하는, 동기식 스크립트 지연 로딩 방법.
  11. 청구항 9에 있어서, 상기 방법은,
    사용되는 버전의 스크립트 소스 코드를 요청하는 소스코드 호출 단계; 및
    상기 요청에 의해 전송된 스크립트 소스 코드를 각 스크립트 모듈 별로 분리하여 상기 저장 공간에 저장하는 분리 단계를 더 포함하는, 동기식 스크립트 지연 로딩 방법.
  12. 청구항 11에 있어서,
    상기 분리 단계는 특정 구분 문자에 기초하여 각 스크립트 모듈 별로 분리하는, 동기식 스크립트 지연 로딩 방법.
  13. 청구항 11에 있어서,
    상기 분리 단계는 각 스크립트 모듈의 지연 로딩 옵션을 분리하여 상기 저장 공간에 저장하는 지연 로딩 옵션 분리 단계를 더 포함하는, 동기식 스크립트 지연 로딩 방법.
  14. 청구항 9에 있어서,
    상기 생성된 가상 함수는 대응되는 스크립트 모듈을 상기 저장 공간으로부터 읽어들여 메모리에 로딩하기 위한 기능을 포함하는, 동기식 스크립트 지연 로딩 방법.
  15. 청구항 9에 있어서,
    상기 최초 실행 요청은 사용되는 스크립트 모듈들의 버전과 동일한 버전을 갖는 상기 특정 스크립트 모듈이 최초로 실행될 때 발생하는, 동기식 스크립트 지연 로딩 방법.
  16. 청구항 9에 있어서,
    상기 모듈 실행 단계는 상기 로드된 특정 스크립트 모듈에 포함된 메소드들 중 상기 가상 함수를 오버라이드한 메소드를 다시 한 번 호출하는 단계를 더 포함하는, 동기식 스크립트 지연 로딩 방법.
  17. 청구항 9 내지 청구항 16 중 어느 한 항의 방법을 실행하기 위한 프로그램이 기록되어 있는 것을 특징으로 하는 컴퓨터 판독 가능한 기록 매체.
KR1020130033524A 2013-03-28 2013-03-28 동기식 스크립트 지연 로딩 시스템, 방법 및 컴퓨터 판독 가능한 기록 매체 KR101462114B1 (ko)

Priority Applications (3)

Application Number Priority Date Filing Date Title
KR1020130033524A KR101462114B1 (ko) 2013-03-28 2013-03-28 동기식 스크립트 지연 로딩 시스템, 방법 및 컴퓨터 판독 가능한 기록 매체
US14/228,826 US9292321B2 (en) 2013-03-28 2014-03-28 System, method and computer-readable recording medium for synchronous script lazy loading
JP2014067731A JP5789323B2 (ja) 2013-03-28 2014-03-28 同期式スクリプト遅延ローディング・システム、同期式スクリプト遅延ローディング方法及びそれを実行するためのプログラムが記録されたコンピュータで読み取り可能な記録媒体

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
KR1020130033524A KR101462114B1 (ko) 2013-03-28 2013-03-28 동기식 스크립트 지연 로딩 시스템, 방법 및 컴퓨터 판독 가능한 기록 매체

Publications (2)

Publication Number Publication Date
KR20140118135A true KR20140118135A (ko) 2014-10-08
KR101462114B1 KR101462114B1 (ko) 2014-11-17

Family

ID=51622157

Family Applications (1)

Application Number Title Priority Date Filing Date
KR1020130033524A KR101462114B1 (ko) 2013-03-28 2013-03-28 동기식 스크립트 지연 로딩 시스템, 방법 및 컴퓨터 판독 가능한 기록 매체

Country Status (3)

Country Link
US (1) US9292321B2 (ko)
JP (1) JP5789323B2 (ko)
KR (1) KR101462114B1 (ko)

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN114817807A (zh) * 2022-04-27 2022-07-29 中国建设银行股份有限公司 页面处理方法、装置、设备、可读存储介质和产品

Families Citing this family (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US9910928B2 (en) 2014-12-15 2018-03-06 International Business Machines Corporation Browser interaction for lazy loading operations
CN105590377B (zh) * 2014-12-23 2018-09-21 中国银联股份有限公司 销售点终端装置及其程序更新方法
CN110020292B (zh) * 2017-10-13 2020-07-28 华为技术有限公司 网页内容提取方法以及终端设备
CN112433784A (zh) * 2020-12-10 2021-03-02 东莞市盟大塑化科技有限公司 页面加载方法、装置、设备和存储介质
CN113608728B (zh) * 2021-08-09 2023-08-01 宝宝巴士股份有限公司 一种基于Xcode的自动化懒加载方法及存储介质

Family Cites Families (8)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
JP2002063042A (ja) * 2000-08-21 2002-02-28 Nec Microsystems Ltd プログラム・モジュール管理システム、その管理方法及びその管理プログラムを記録した記録媒体
KR100441115B1 (ko) * 2001-06-27 2004-07-19 주식회사 인터와이즈 정보 단말기의 자바 프로그램 처리 속도 향상을 위한 자바컴파일 온 디멘드 서비스 시스템 및 그 방법
KR101074624B1 (ko) 2008-11-03 2011-10-17 엔에이치엔비즈니스플랫폼 주식회사 브라우저 기반 어뷰징 방지 방법 및 시스템
JP4912452B2 (ja) * 2009-11-27 2012-04-11 インターナショナル・ビジネス・マシーンズ・コーポレーション 動的型付け言語で記述されたソースコードを静的型付け言語で記述されたターゲットコードに変換し、実行する方法、並びにそのコンピュータ・プログラム及びコンピュータ・システム
KR20110117775A (ko) * 2010-04-22 2011-10-28 주식회사 인프라웨어 컴파일 서버를 통한 인터프리트 방법
KR101157996B1 (ko) * 2010-07-12 2012-06-25 엔에이치엔(주) 자바스크립트의 소스 코드 보호를 위해 난독화를 하기 위한 방법, 시스템 및 컴퓨터 판독 가능한 기록 매체
KR101689745B1 (ko) * 2010-09-06 2016-12-27 삼성전자주식회사 스크립트에 의한 동적 리소스 정보를 처리하는 웹 브라우징 시스템 및 방법
KR101782995B1 (ko) * 2011-01-13 2017-09-29 삼성전자주식회사 자바스크립트 코드 저장 및 최적화를 통한 웹 브라우징 방법 및 장치

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN114817807A (zh) * 2022-04-27 2022-07-29 中国建设银行股份有限公司 页面处理方法、装置、设备、可读存储介质和产品

Also Published As

Publication number Publication date
US9292321B2 (en) 2016-03-22
US20140298308A1 (en) 2014-10-02
JP2014194777A (ja) 2014-10-09
KR101462114B1 (ko) 2014-11-17
JP5789323B2 (ja) 2015-10-07

Similar Documents

Publication Publication Date Title
US8612418B2 (en) Mobile web browser for pre-loading web pages
US9703761B2 (en) Delayed code parsing for reduced startup latency
US10015226B2 (en) Methods for making AJAX web applications bookmarkable and crawlable and devices thereof
KR101462114B1 (ko) 동기식 스크립트 지연 로딩 시스템, 방법 및 컴퓨터 판독 가능한 기록 매체
JP5920903B2 (ja) 遠隔ブラウジングセッション管理
US8868637B2 (en) Page rendering for dynamic web pages
AU2011101576B4 (en) Method and systems for generating and displaying a preview image of a content area
US10296558B1 (en) Remote generation of composite content pages
US20130212465A1 (en) Postponed rendering of select web page elements
WO2019072201A1 (zh) 网页内容提取方法以及终端设备
WO2013028081A1 (en) Page based navigation and presentation of web content
US9582480B1 (en) Intelligent rendering of webpages
US20120331376A1 (en) Inserting content in association with a web page that is transmitted to a computing device
Everts Rules for mobile performance optimization
KR101132220B1 (ko) 캐쉬(cache)를 이용하여 웹 페이지를 제공하기 위한 방법, 시스템 및 컴퓨터 판독 가능한 기록 매체
KR101408734B1 (ko) 비동기 통신 방식 웹 페이지의 이동 제어 방법 및 장치
US9098228B2 (en) Determining content rendering capabilities for web browser optimization
US9230038B2 (en) Content fetching and caching on a mobile device
US10909209B2 (en) Dynamic insertion of content into webpages
WO2015084977A1 (en) Requesting service
Everts Rules for Mobile Performance Optimization: An overview of techniques to speed page loading
KR101392773B1 (ko) 홈 어플리케이션을 실행하기 위한 방법, 단말기 및 컴퓨터 판독 가능한 기록 매체

Legal Events

Date Code Title Description
A201 Request for examination
E902 Notification of reason for refusal
N231 Notification of change of applicant
E701 Decision to grant or registration of patent right
GRNT Written decision to grant
FPAY Annual fee payment

Payment date: 20171011

Year of fee payment: 4

FPAY Annual fee payment

Payment date: 20181105

Year of fee payment: 5

FPAY Annual fee payment

Payment date: 20191001

Year of fee payment: 6