KR20150079867A - Html5-프로토콜 기반 웹페이지 표시 방법 및 장치 - Google Patents

Html5-프로토콜 기반 웹페이지 표시 방법 및 장치 Download PDF

Info

Publication number
KR20150079867A
KR20150079867A KR1020157013991A KR20157013991A KR20150079867A KR 20150079867 A KR20150079867 A KR 20150079867A KR 1020157013991 A KR1020157013991 A KR 1020157013991A KR 20157013991 A KR20157013991 A KR 20157013991A KR 20150079867 A KR20150079867 A KR 20150079867A
Authority
KR
South Korea
Prior art keywords
dom object
character
unit
picture
web page
Prior art date
Application number
KR1020157013991A
Other languages
English (en)
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 라야박스 인코포레이티드
Publication of KR20150079867A publication Critical patent/KR20150079867A/ko

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
    • G06F16/986—Document structures and storage, e.g. HTML extensions
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/957—Browsing optimisation, e.g. caching or content distillation
    • G06F16/9577—Optimising the visualization of content, e.g. distillation of HTML documents
    • G06F17/30905—
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F17/00—Digital computing or data processing equipment or methods, specially adapted for specific functions
    • G06F17/218—
    • G06F17/2247—

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Databases & Information Systems (AREA)
  • Physics & Mathematics (AREA)
  • Data Mining & Analysis (AREA)
  • General Engineering & Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • Information Transfer Between Computers (AREA)
  • Mathematical Physics (AREA)
  • Software Systems (AREA)
  • Document Processing Apparatus (AREA)
  • Stored Programmes (AREA)

Abstract

본 발명의 실시예에서 HTML5-프로토콜 기판 웹페이지 표시 방법이 개시되며, 이 방법은: HTML5-프로토콜 기반 웹페이지 리소스를 취득하는 단계; 자바스크립트 언어를 이용함에 의해 웹페이지 리소스를 파싱하여 DOM 오브젝트 노드를 생성하는 단계; 및 DOM 오브젝트를 렌더링하고 웹페이지 표시를 수행하는 단계를 포함한다. 또한, 본 발명의 실시예에는 HTML5-프로토콜 기반 웹페이지 표시 장치가 개시된다. 본 발명의 실시예는 외부 플러그-인을 사용하지 않는 HTML5 프로토콜에 대한 지원을 실현하여, 플러그-인 설치, 함수 업그레이드 등의 동작을 회피하고, HTML5-프로토콜 기반 웹페이지의 표시 효율을 개선한다.

Description

HTML5-프로토콜 기반 웹페이지 표시 방법 및 장치{HTML5-PROTOCOL-BASED WEBPAGE PRESENTATION METHOD AND DEVICE}
본 출원은 중국 특허청에 2012년 11월 6일 출원한 중국 특허 출원 번호 제201210438976.8, "HTML5-PROTOCOL-BASED WEBPAGE PRESENTATION METHOD AND DEVICE"를 우선권 주장하며, 그 전체가 여기에 참조로서 포함된다.
본 출원은 정보 프레젠테이션의 기술 분야에 관한 것이며, 특히 HTML5-프로토콜-기반 웹페이지 표시 방법 및 대응하는 장치에 관한 것이다.
HTML5(Hypertext Markup Language 5rd, hypertext markup language standard, the fifth edition, HTML standard version으로도 불림)는 1999년에 개발된 HTML 4.01와 XHTML1.0을 대체하기 위하여 제공되는 새로운 HTML 프로토콜 표준이다. HTML5 프로토콜은 이전 버전들에 비해 2개의 뚜렷한 특징을 갖는다. 먼저, Web 웹페이지의 표시 성능이 강화된다. 다음으로, 플러그-인-기반 리치 인터넷 어플리케이션(RIA, Adobe Flash, Microsoft Silverlight 및 Oracle JavaFX와 같은)에 대한 브라우저의 요구를 감소시킴에 의해 인터넷 어플리케이션을 효과적으로 강화하는 표준 셋을 제공하기 위하여 로컬 데이터베이스와 같은 웹(Web) 어플리케이션 기능이 추가된다.
그러나, HTML5 프로토콜에서, 플러그-인에 대한 요구의 감소로 인하여, 기존 브라우저(IE6.0 에서 IE8.0, Sogou, Firefox 및 Chrome 등)는 외부 플러그-인 프로그램 또는 필수 함수 업데이팅 없이 HTML5-프로토콜 기반 웹페이지 표시를 달성할 수 없다.
상술한 기술적 문제를 해결하기 위하여, 외부 플러그-인 프로그램 또는 함수 업데이팅 없이 HTML5-프로토콜 기반 웹페이지 표시를 달성하기 위하여, 본 발명의 실시예에서 HTML5-프로토콜 기반 웹페이지 표시 방법 및 대응하는 장치가 제공된다.
본 출원의 실시예에서 제공되는 HTML5-프로토콜 기반 웹페이지 표시 방법은:
HTML5-프로토콜 기반 웹페이지 리소스를 취득하는 단계;
자바스크립트 언어를 이용함에 의해 웹페이지 리소스를 파싱하여 DOM 오브젝트 노드를 생성하는 단계; 및
DOM 오브젝트를 렌더링하고 웹페이지 표시를 수행하는 단계를 포함한다.
바람직하게는, 자바스크립트 언어를 이용함에 의해 웹페이지 리소스를 파싱하여 DOM 오브젝트 노드를 생성하는 상기 단계는:
자바스크립트 언어를 이용함에 의해 웹페이지 리소스에 대한 렉시컬 분석을 수행하여 HTML 태그를 획득하는 단계; 및
DOM 오브젝트 생성 함수를 호출하여 상기 HTML 태그에 따라 DOM 오브젝트 노드를 생성하는 단계를 포함할 수 있다.
또한, 바람직하게는, 자바스크립트 언어를 이용함에 의해 웹페이지 리소스에 대한 렉시컬 분석을 수행하여 HTML 태그를 획득하는 상기 단계 이후에, 상기 HTML 태그에 대응하며 DOM 오브젝트 노드를 생성하기 위하여 상기 DOM 오브젝트 생성 함수를 호출하기 위한 자바스크립트 코드가 생성되고, DOM 오브젝트 생성 함수를 호출하여 상기 HTML 태그에 따라 DOM 오브젝트 노드를 생성하는 상기 단계는:
상기 HTML 태그에 따라, 상기 HTML 태그에 대응하는 자바스크립트 코드를 호출하여 상기 DOM 오브젝트 노드를 생성하는 단계를 포함할 수 있다.
바람직하게는, 상기 방법은 자바스크립트 언어를 이용함에 의해 상기 DOM 오브젝트의 제어를 달성하는 단계를 더 포함하며, 상기 자바스크립트 언어를 이용함에 의해 상기 DOM 오브젝트의 제어를 달성하는 상기 단계는:
자바스크립트 언어를 이용함에 의해 DOM 오브젝트, 상기 DOM 오브젝트의 베이스 클래스 및 비주얼 엘리먼트 인터페이스를 획득하는 단계;
상기 HTML 태그에 따라 상기 DOM 오브젝트에 DOM 오브젝트 노드를 추가하거나 및/또는 상기 DOM 오브젝트로부터 DOM 오브젝트 노드를 삭제하는 단계; 및/또는
상기 HTML 태크의 속성에 따라 DOM 오브젝트 노드의 속성을 설정하는 단계를 포함할 수 있다.
바람직하게는, 상기 방법은 적어도 하나의 DOM 오브젝트 노드의 스타일을 제어하는 단계를 더 포함하되, 상기 적어도 하나의 DOM 오브젝트 노드의 스타일을 제어하는 단계는:
상기 DOM 오브젝트 노드의 스타일 리소스를 자바스크립트 코드로 컴파일하고, 상기 컴파일에 의해 획득된 상기 자바스크립트 코드를 함수로 패키징하는 단계; 및
상기 함수를 호출하여 대응하는 DOM 오브젝트 노드에 대한 스타일 제어를 수행하는 단계를 포함할 수 있다.
또한, 바람직하게는, 상기 방법은 있을 수 있는 변경된 DOM 오브젝트를 조판하는 단계를 더 포함하되, 상기 변경은 DOM 오브젝트 노드의 추가, 삭제 및/또는 스타일 변형을 포함하며, 변경된 DOM 오브젝트를 조판하는 상기 단계는: 자바스트립트 언어를 이용함에 의해,
변경된 DOM 오브젝트 노드 및 변경된 DOM 오브젝트 노드의 서브-노드를 수집하여 조판 수집을 형성하는 단계;
상기 조판 수집에서 상기 DOM 오브젝트 노드의 속성 정보를 계산하는 단계; 및
변경 이후의 상기 DOM 오브젝트 노드의 속성 정보를 이용함에 의해 변경 이전의 DOM 오브젝트 노드의 속성 정보를 개조하는 단계를 포함할 수 있다.
바람직하게는, 상기 DOM 오브젝트를 렌더링하는 단계는 문자를 드로잉하는 단계를 포함하며, 문자를 드로잉하는 상기 단계는:
프리셋 이미지 셋을 검색하여 상기 프리셋 이미지 셋 내의 문자의 크기와 일치하는 크기를 갖는 픽쳐가 존재하는지 여부를 결정하는 단계;
상기 프리셋 이미지 셋 내의 문자의 크기와 일치하는 크기를 갖는 픽쳐가 존재하는 경우에, 드로잉될 문자가 상기 픽쳐 내에 포함되는지를 판정하고, 드로잉될 문자가 상기 픽쳐 내에 포함되는 경우에 상기 픽쳐 내의 문자의 위치 정보를 기초로 상기 문자를 드로잉하거나 또는 상기 픽쳐내의 드로잉될 문자를 드로잉하고, 드로잉될 문자가 상기 픽쳐 내에 포함되지 않는 경우에 상기 픽쳐 내의 문자의 위치 정보에 따라 상기 문자를 드로잉하는 단계; 또는
상기 프리셋 이미지 셋 내의 문자의 크기와 일치하는 크기를 갖는 픽쳐가 존재하지 않는 경우에, 상기 문자의 크기와 일치하는 크기를 갖는 픽쳐를 생성하고, 드로잉될 문자를 픽쳐에 드로잉하고, 픽쳐 내의 문자의 위치 정보에 따라 문자를 드로잉하는 단계를 포함할 수 있다.
바람직하게는, DOM 오브젝트를 렌더링하는 단계는 재료들을 결합하는 단계를 포함하며, 상기 재료들을 결합하는 단계는:
블랭크 텍스츄어를 생성하는 단계;
드로잉될 오브젝트를 상기 텍스츄어에 두고, 드로잉될 오브젝트의 위치 정보를 텍스츄어에 기록하는 단계; 및
드로우 트리거를 수신하는 경우, 텍스츄어 내의 드로잉될 오브젝트의 위치 정보에 따라 드로잉될 오브젝트를 스크린에 동시에 드로잉하는 단계를 포함할 수 있다.
본 출원에서는 HTML5-프로토콜 기반 웹페이지 표시 장치가 더 제공되며, 상기 장치는 취득 유닛, 파싱 유닛 및 렌더링 유닛을 포함하되,
상기 취득 유닛은 HTML5-프로토콜 기반 웹페이지 리소스를 취득하도록 구성되며;
상기 파싱 유닛은 자바스크립트 언어를 이용함에 의해 상기 웹페이지 리소스를 파싱하여 DOM 오브젝트 노드를 생성하도록 구성되며;
상기 렌더링 유닛은 상기 DOM 오브젝트를 렌더링하고 웹페이지 표시를 수행하도록 구성될 수 있다.
바람직하게는, 상기 파싱 유닛은 렉시컬 분석 서브유닛 및 DOM 오브젝트 노드 생성 서브유닛을 포함하며,
상기 렉시컬 분석 서브유닛은 자바스크립트 언어를 이용함에 의해 웹페이지 리소스에 대한 렉시컬 분석을 수행하여 HTML 태그를 얻도록 구성되며;
상기 DOM 오브젝트 노드 생성 서브유닛은 DOM 오브젝트 생성 함수를 호출하여 HTML 태그에 따라 상기 DOM 오브젝트 노드를 생성하도록 구성될 수 있다.
또한, 바람직하게는, 상기 파싱 유닛은 자바스크립트 언어를 이용함에 의해 웹페이지 리소스에 대한 렉시컬 분석을 수행하여 HTML 태그를 얻은 이후에, 상기 HTML 태그에 대응하는 자바스크립트 코드를 생성하고 DOM 오브젝트 노드를 생성하기 위하여 DOM 오브젝트 생성 함수를 호출하도록 구성된다. 상기 DOM 오브젝트 노드 생성 서브유닛은 상기 HTML 태그에 대응하는 자바스크립트 코드를 호출하여 DOM 오브젝트 노드를 생성하도록 구성될 수 있다.
바람직하게는, 상기 장치는 자바스크립트 언어를 이용함에 의해 DOM 오브젝트의 제어를 달성하도록 구성된 DOM 오브젝트 제어 유닛을 더 포함하며, 상기 DOM 오브젝트 제어 유닛은:
자바스크립트 언어를 이용함에 의해 상기 DOM 오브젝트, 상기 DOM 오브젝트의 베이스 클래스 및 비주얼 엘리먼트 인터페이스를 취득하고;
상기 HTML 태그에 따라 상기 DOM 오브젝트에 DOM 오브젝트 노드를 추가하거나 및/또는 상기 DOM 오브젝트로부터 DOM 오브젝트 노드를 삭제하고; 및/또는
상기 HTML 태그의 속성에 따라 상기 DOM 오브젝트 노드의 속성을 설정하도록 구성될 수 있다.
바람직하게는, 상기 장치는 적어도 하나의 DOM 오브젝트 노드의 스타일을 제어하도록 구성되는 스타일 제어 유닛을 더 포함하며, 상기 스타일 제어 유닛은:
상기 DOM 오브젝트 노드의 스타일 리소스를 자바스크립트 코드로 컴파일하고, 컴파일에 의해 얻어진 자바스크립트 코드를 함수로 패키징하고; 및
상기 함수를 호출하여 대응하는 DOM 오브젝트 노드에 대한 스타일 제어를 수행하도록 구성될 수 있다.
바람직하게는, 상기 장치는 있을 수 있는 변경된 DOM 오브젝트를 조판하도록 구성된 조판 유닛을 더 포함하되, 상기 변경은 상기 DOM 오브젝트 노드의 추가, 삭제 및/또는 스타일 변형을 포함하며, 변경된 DOM 오브젝트를 조판하는 단계는: 자바스크립트 언어를 이용함에 의해,
변경된 DOM 오브젝트 노드 및 상기 변경된 DOM 오브젝트 노드의 서브-노드를 수집하여 조판 수집을 형성하는 단계;
상기 조판 수집 내의 상기 DOM 오브젝트 노드의 속성 정보를 계산하는 단계; 및
변경 이후의 상기 DOM 오브젝트 노드의 속성 정보를 이용함에 의해 변경 이전의 상기 DOM 오브젝트 노드의 속성 정보를 개조하는 단계를 포함할 수 있다.
바람직하게는, 상기 DOM 오브젝트를 렌더링하는 단계는 문자를 드로잉하는 단계를 포함하며, 상기 렌더링 유닛은 문자 드로잉 유닛을 포함하며, 상기 문자 드로잉 유닛은 검색 서브유닛, 판정 서브유닛, 생성 서브유닛, 제1 드로잉 서브유닛 및 제2 드로잉 서브유닛을 포함하되,
상기 검색 서브유닛은 프리셋 이미지 셋을 검색하여 상기 프리셋 이미지 셋 내의 문자의 크기와 일치하는 크기를 갖는 픽쳐가 존재하는지 여부를 결정하여, 상기 프리셋 이미지 셋 내의 문자의 크기와 일치하는 크기를 갖는 픽쳐가 존재하는 경우 판정 서브유닛을 트리거하고, 상기 프리셋 이미지 셋 내의 문자의 크기와 일치하는 크기를 갖는 픽쳐가 존재하지 않는 경우 생성 서브유닛을 트리거 하도록 구성되며,
상기 판정 서브유닛은 드로잉될 문자가 픽쳐 내에 포함되는지 여부를 판정하여, 드로잉될 문자가 픽쳐 내에 포함되는 경우에 픽쳐 내의 문자의 위치 정보에 따라 문자를 드로잉 하도록 상기 제1 드로잉 서브유닛을 트리거하고, 또는 드로잉될 문자가 픽쳐 내에 포함되지 않는 경우에 픽쳐 내의 문자의 위치 정보에 따라 픽쳐 내의 드로잉 될 문자를 드로잉 하도록 상기 제2 드로잉 서브유닛을 트리거하고 문자를 드로잉 하도록 상기 제1 드로잉 서브유닛을 트리거 하도록 구성되며; 및
상기 생성 서브유닛은 문자의 크기와 일치하는 크기를 갖는 픽쳐를 생성하여, 픽쳐 내에 드로잉될 문자를 드로잉 하도록 상기 제2 드로잉 서브유닛을 트리거하고, 및 픽쳐 내의 문자의 위치 정보에 따라 문자를 드로잉 하도록 상기 제1 드로잉 서브유닛을 트리거하도록 구성될 수 있다.
바람직하게는, 상기 DOM 오브젝트를 렌더링하는 단계는 재료를 결합하는 단계를 포함하며, 상기 랜더링 유닛은 재료 결합 유닛을 포함하며, 상기 재료 결합 유닛은 텍스츄어 생성 서브유닛, 위치 정보 기록 서브유닛 및 제3 드로잉 서브유닛을 포함하며,
상기 텍스츄어 생성 서브유닛은 블랭크 텍스츄어를 생성하도록 구성되며,
상기 위치 정보 기록 서브유닛은 드로잉될 오브젝트를 텍스츄어에 두고, 드로잉될 오브젝트의 위치 정보를 텍스츄어에 기록하도록 구성되며; 및
드로우 트리거를 수신하는 경우, 텍스츄어 내의 드로잉될 오브젝트의 위치 정보에 따라 드로잉될 오브젝트 모두를 스크린에 동시에 드로잉 하도록 구성될 수 있다.
본 출원의 실시예에서, HTML5-프로토콜 기반 웹페이지 리소스가 취득되고, 다음으로 웹페이지 리소스가 자바스크립트 언어를 이용하여 파싱되어 DOM 오브젝트 노드를 생성하며, 다음으로 DOM 오브젝트 노드가 웹페이지 표시를 위하여 렌더링된다. 종래 기술과 비교하여, 자바스크립트 언어는 본 출원의 실시예에서 HTML5-프로토콜 기반 웹페이지 리소스를 파싱하기 위한 언어로서 채택된다. 자바스크립트 언어가 각종 웹페이지 브라우저에서 널리 이용되므로, HTML5 프로토콜에 대한 지원은 본 출원의 실시예에서는 외부 플러그-인 프로그램 없이 달성되어, 플러그-인 설치 또는 함수 업데이팅과 같은 동작을 방지하고, HTML5-프로토콜 기반 웹페이지의 표시 효율을 개선한다. 또한, HTML5 프로토콜에 대한 지원이 본 출원의 실시예에서 자바스크립트 언어에만 의존하여 달성되므로, 본 출원의 기술적 해법은 자바스크립트 언더를 지원하는 각종 플랫폼에 이들 플랫폼의 웹페이지 표시 성능을 증가 또는 개선하기 위하여 널리 적용될 수 있고, 모든-플랫폼 개발 모드를 제공한다.
본 출원의 실시예에서의 또는 종래 기술에서의 기술적 해법을 보다 명확하게 설명하기 위하여, 종래 기술 또는 본 출원의 실시예를 설명하는데 이용되는 도면이 이하 간략히 설명된다. 명백하게, 도면은 출원의 일부 실시예일 뿐으로, 이들 도면을 기초로 당해 분야의 숙련자라면 다른 도면이 얻어질 수 있을 것이다.
도 1은 본 출원의 제1 실시예에 따른 HTML5-프로토콜 기반 웹페이지 표시 방법의 흐름도이다.
도 2는 본 출원의 제2 실시예에 따른 HTML5-프로토콜 기반 웹페이지 표시 방법의 흐름도이다.
도 3은 본 출원의 제3 실시예에 따른 문자 드로잉 방법의 흐름도이다.
도 4는 본 출원의 제3 실시예에 따른 재료들을 결합하는 방법의 흐름도이다.
도 5a 내지 도 5e는 본 출원의 제3 실시예에 따른 재료 결합 공정의 개략도이다.
도 6은 HTML5-프로토콜 기반 웹페이지 표시 장치의 구조의 블럭도이다.
이하에서, 본 출원의 실시예에서의 기술적 해법이 당해 분야의 숙련자가 본 출원의 기술적 해법을 보다 잘 이해할 수 있도록 본 출원의 실시예에서의 도면과 결부하여 명백하고 완전히 설명된다. 분명하게, 상세한 설명은 본 출원의 단지 수개의 실시예로서, 전체 실시예가 아니다. 당해 분야의 숙련자에 의해 창의적 노력 없이 얻어지는 본 출원의 실시예를 기초로 하는 전체 다른 실시예들은 본 출원의 보호 범위 내에 있다 할 것이다.
제1 실시예
웹페이지 표시 공정은 웹페이지 리소스의 다운로딩, 웹페이지 리소스의 파싱 및 렌더링과 같은 일련의 연속 동작을 포함한다. 상이한 프로토콜 규격을 기초로 하는 웹페이지 리소스의 파싱 공정은 상이하다. 이러한 차이로 인하여, 많은 브라우저는 예를 들면 HTML5-프로토콜 기반 웹 리소스를 지원할 수 없다. 종래 기술에서, 이 문제를 해결하기 위하여, 외부 플러그-인 프로그램 또는 특수 업데이팅 소프트웨어 패키지를 이용한 업데이팅이 업데이트를 위하여 채용된다. 그러나, 이들 해결책은 HTML5 내의 플러그-인의 사용을 감소하려는 목적과 부합하지 않는다. 본 출원에서, 파싱 공정은 브라우저내에 빌트인된 자바스크립트 언어를 이용하여 수행되어, 상기 문제를 더 잘 해결한다.
도 1을 참조로, 본 출원의 실시예에 따른 HTML5-프로토콜 기반 웹페이지 표시 방법의 흐름도가 도시된다. HTML5-프로토콜 기반 웹페이지 표시 방법은 아래와 같이 단계 S101 내지 S103을 포함한다.
단계 S101에서, HTML5-프로토콜 기반 웹페이지 리소스가 취득된다.
웹페이지 리소스의 취득은 웹페이지 표시의 기초이다. 웹페이지 리소스는 일반적으로 서버로부터 다운로드된 웹페이지 리소스(1차 웹페이지 리소스로 칭함)와 서버로부터 다운로드된 리소스를 기초로 동적으로 생성된 웹페이지 리소스(2차 웹페이지 리소스라 칭함)를 포함한다. 서버로부터의 웹페이지 리소스는 사용자에 의해 브라우저를 통해 서버로 전송되는 페이지 어드레스를 포함하는 억세스 요청에 응답하여 서버에 의해 브라우저에 제공되는 웹페이지 리소스이다. 서버로부터 다운로드된 웹페이지 리소스는 브라우저로 즉시 제공될 수 있다. 다르게는, 실제로 소망되는 것처럼, 다운로드된 웹페이지 리소스가 먼저 캐시될 수 있고, 웹페이지 리소스 취득 단계가 트리거되는 경우 브라우저에 제공될 수 있다. 따라서, 이 실시예에서, HTML5-프로토콜 기반 웹페이지 리소스는 즉석 요청 즉시 취득의 방식 또는 웹페이지 리소스 취득 단계가 트리거될 때 웹페이지 리소스가 캐시로부터 추출되는 방식과 같은 많은 방식으로 취득될 수 있다. 생성된 웹페이지 리소스는 스크립트 프로그램을 실행함에 의해 생성되는 웹페이지 코드와 같은 로컬 시스템의 함수를 처리하고 계산함에 의해 로딩된 웹페이지 리소스 내의 일부 프로그램 세그먼트를 실행함에 의해 생성되고, 웹페이지 리소스는 일부 제어를 트리거함에 의해 생성된다. 본 출원에서 필요한 웹페이지 리소스는 전술한 것처럼 서버로부터의 웹페이지 리소스와 국부적으로 생성된 웹페이지 리소스 모두를 포함한다는 점이 주목된다. 더욱이, 취득된 HTML5-프로토콜 기반 웹페이지 리소스의 특정 유형은 이 실시예에 국한되지 않고, 예를 들면 텍스트, 픽쳐, 사운드, 비디오 또는 이들의 임의의 조합일 수 있다.
단계 S102에서, 웹페이지 리소스는 자바스크립트 언어를 이용함에 의해 파싱되어, DOM 오브젝트 노드를 생성한다.
자바스크립트 언어는 브라우저에 의해 지원되는 웹페이지 스크립 언어로서, 일반적으로 웹페이지 정보 상호 작용 및 웹페이지 논리 제어에 이용되며, 웹페이지 및 브라우저에 의존한다. 이 실시예에서, 자바스트립트 언어는 동작 언어로서 취해지며, 웹페이지 리소스를 파싱하여 DOM 오브젝트 노드를 생성하도록 된다. DOM(Document Object Model) 오브젝트는 페이지 엘리먼트를 계층적으로 조직화하는 노드 또는 정보 세그먼트의 셋이며, 브라우저, 플랫폼 또는 언어로부터 독립적인 표준 어셈블리이다.
단계 S103에서, DOM 오브젝트는 웹페이지로 렌더링되고 표시된다.
DOM 오브젝트는 웹페이지 내의 각종 페이지 엘리먼트의 관계 및 위치와 같은 정보를 반영한다. 페이지 엘리먼트는 DOM 오브젝트의 노드로서 표현된다. 위치와 같은 DOM 오브젝트 노드의 정보는 DOM 오브젝트 노드의 속성이다. 복수개의 DOM 오브젝트 노드를 포함하는 완전한 DOM 오브젝트를 렌더링함에 의해, 페이지의 표시가 달성된다. 렌더링 동안, 브라우저에 의해 지원되는 임의의 렌더링이 DOM 오브젝트를 렌더링하도록 선택될 수 있으며, 시스템의 초기에 선택 동작이 결정될 수 있다. 복수개의 렌더링의 경우, 예를 들면, WebGL, Flash11 및 HTML5 캔바스와 같은 렌더링은 시스템에 의해 지원되며, 임의의 렌더링에 대한 랜덤 선택 외에, 복수개의 렌더링 각각에 대해 우선 순위가 제공될 수 있으며, 렌더링의 우선 순위를 기초로 선택이 수행될 수 있다.
이 실시예에서, HTML5-프로토콜 기반 웹페이지 리소스가 취득되며, 다음으로 웹페이지 리소스가 자바스크립트 언어를 이용하여 파싱되어 DOM 트리 표시 구조를 생성하고, 다음으로 DOM 트리 표시 구조가 렌더링되고 표시된다. 종래 기술과 비교하여, 자바스크립트 언어가 이 실시예에서의 HTML5-프로토콜 기반 웹페이지 리소스를 파싱하기 위한 언어로서 채택된다. 자비스크립트 언어가 각종 웹페이지 브라우저에서 널리 이용되므로, HTML5 프로토콜에 대한 지원은 본 출원의 실시예에서 외부 플러그-인 프로그램 없이 달성되어, 플러그-인 설치 또는 함수 업데이팅과 같은 동작을 방지하고, HTML5-프로토콜 기반 웹페이지의 표시 효율을 개선한다. 또한, HTML5 프로토콜에 대한 지원이 본 출원의 실시예에서의 자바스크립트 언어에만 의존하여 달성되므로, 본 출원의 기술적 해법은 자바스크립트 언어를 지원하는 각종 플랫폼에 널리 적용될 수 있어서, 이들 플랫폼의 웹페이지 표시 성능을 증대 또는 개선하고, 모든 플랫폼 개발 모드를 제공한다.
제2 실시예
상기 실시예에서, HTML5-프로토콜 기반 웹페이지에 대한 지원은 자바스크립트 언어를 파싱 언어로서 채택함에 의해 달성된다. 실제로는, 자바스크립트 언어를 파싱 언어로 채택함에 의해 웹페이지 리소스를 파싱하는 공정은 많은 방식으로 이행될 수 있다. 바람직하게는, 파싱 공정은 본 출원의 이하 실시예에 설명되는 방식으로 달성된다. 본 출원의 제2 실시예에 따른 HTML5-프로토콜 기반 웹페이지 표시 방법의 흐름도를 도시하는 도 2를 참조로, HTML5-프로토콜 기반 웹페이지 표시 방법은 아래와 같이 단계 S201 내지 S204를 포함한다.
단계 S201에서, HTML5-프로토콜 기반 웹페이지 리소스가 취득된다.
단계 S202에서, 렉시컬 분석이 자바스크립트 언어를 이용함에 의해 웹페이지 리소스에 대해 수행되어, HTML 태그를 획득한다.
취득된 웹페이지 리소스는 일반적으로 HTML 코드 파일의 형태이다. 웹페이지를 표시하기 위하여, 태그를 기초로 DOM 트리의 노드 오브젝트를 생성하도록 HTML 코드 파일로부터 HTML5의 태그를 인식할 필요가 있다. 상이한 HTML 프로토콜 버전에 의해 지원되는 태그의 개수 및 유형은 상이하다. 예를 들면, HTML5 프로토콜에 의해 지원되는 태그는 HTML, HEAD, STYLE, SCRIPT, LINK, BODY, DIV, IMG, A, FONT, CANVAS, BR, SVG, 및 webGL을 포함한다. HTML 태그를 획득하도록 분석하기 위하여, 이 실시예에서 자바스크립트 언어를 이용함에 의해 웹페이지 리소스에 대해 렉시컬 분석이 수행된다. 렉시컬 분석은: 문자 단위로 HTML 코드 파일의 콘텐트를 판독하고, "<"에 이은 문자를 HTML 태그로서 식별한다. 예를 들면, 코드 세그먼트 <img width= '100'src='1.gif'>에 대해서, 코드 세그먼트가 문자 단위로 판독된 이후에 "<"에 이은 "img" 가 HTML 태그로서 식별된다.
단계 S203에서, DOM 오브젝트 생성 함수가 호출되어 HTML 태그에 따른 DOM 오브젝트 노드를 생성한다.
HTML 태그가 식별된 이후에, DOM 오브젝트 생성 함수가 호출되어 HTML 태그에 따른 DOM 오브젝트 노드를 생성할 수 있다. 이 공정은 태그가 파싱된 직후에 수행될 수 있거나 또는 HTML 코드 파일 내의 모든 HTML 태그가 파싱된 이후에 수행될 수 있다. 예를 들면, DOM 오브젝트 노드가 HTML 태그가 파싱된 직후에 생성되는 방법에서, DOM 오브젝트 생성 함수, 예를 들면 laya.document.createElement(태그 이름)이 파싱된 HTML 태그에 따라 호출되어 HTML 태그에 대응하는 DOM 오브젝트 노드를 생성한다. 다음으로 이 단계에서 다음 태그가 파싱된다. 태그가 속성값을 가지는 경우에, DOM 오브젝트 셋 함수가 호출되어 DOM 오브젝트 노드의 속성을 생성할 수 있다.
단계 S204에서, DOM 오브젝트가 렌더링되고 웹페이지로 표시된다.
이전 실시예의 기술적 효과가 이 실시예에서 달성될 수 있다. 또한, 이 실시예를 기초로, 이 실시예의 기술적 해법이 특수한 요구 사항을 충족하기 위하여 필요한 대로 변경될 수 있다.
예를 들면, 실제로는, 파싱을 가속하기 위하여, 이 실시예에서의 파싱 단계는 아래와 같이 변경될 수 있다. 자바스크립트 언어를 이용함에 의해 웹페이지 리소스에 대해 렉시컬 분석이 수행되어 HTML 태그를 획득하기 이전에, HTML 코드 파일이 자바스크립트 코드로 컴파일된다. 그러한 사전 공정 이후에, 다음번에 동일한 코드 세그먼트에 대해서는 구문 분석(syntax analysis)이 필요 없어서, 파싱의 효율을 증가시킨다. 상기 코드 세그먼트를 예로서 다시 보면, 코드 세그먼트 "<img width='100'src='1.gif'"가 복수회 코드 파일내에서 보이며, 이 코드 세그먼트는 렉시컬 분석이 최초로 수행된 경우에 아래와 같이 자바스크립트 코드(의사-코드)로 변환된다:
Figure pct00001
코드 세그먼트 "<img width='100'src='1.gif'"가 두번째로 파싱되는 경우, 태그 및 코드 세그먼트의 속성과 같은 파싱 정보의 동작이 필요없다. 대신, htmlCache_1( )만이 호출될 필요가 있다.
또한, 예를 들면, 이 실시예를 기초로, 아래와 같은 각종 제어 관리 동작이 자바스크립트 언어를 이용함에 의해 DOM 오브젝트에 대해 수행될 수 있다. 태그는 DOM 오브젝트에 추가될 수 있고(예를 들면, [element].appendChild(element)), 태그가 DOM 오브젝트로부터 삭제될 수 있으며(예를 들면, [element].removeChild(element)), DOM 트리 내의 노드의 속성은 변경될 수 있다(예를 들면, [element].setAttribute(nodeName,nodeValue)). 그러한 관리를 달성하기 위한 기본 원리는 자바스크립트 언어를 이용함에 의해 도큐먼트(웹페이지 도큐먼트 관리 오브젝트), 노드(트리 관리 및 속성 동작 등에 대한 인터페이스를 제공하기 위한 DOM 오브젝트의 베이스 클래스), 및 HTMLElement(비주얼 엘리먼트에 기본 인터페이스를 제공하기 위한)를 획득하는 것이다. 전술한 것처럼 일반적으로 도큐먼트, 노드 및 HTMLElements는 HTML5와 호환되지 않는 C++ 및 JAVA와 같은 다른 언어를 이용함에 의해 획득되며, 문제는 일반적으로 이들 언어를 이용함에 의해 해결된다. 본 출원의 실시예에서, 이행이 자바스크립트 언어를 이용함에 의해 수행되고, 획득된 효과는 종래 기술과 같거나 또는 더 우수하여, 종래 기술에서의 기술적 편견을 극복하고 우수한 결과를 획득한다.
새로운 DOM 태그가 상기 관리 동작을 수행함에 의해 지원될 수 있다. 1aya.docHTML[tag namge] Element 에 대한 자바스크립트 오브젝트 코드만이 e document.createElement를 호출함에 의해 생성될 수 있어서, div 및 img 태그 함수가 획득된다. 그러므로, 이 실시예에 따르면, 새로운 태그 및 함수 확장 및 업데이트가 브라우저를 업데이트하지 않고 시스템 및 개발자에 의해 획득될 수 있다, 예를 들면
Figure pct00002
... code
Figure pct00003
... code
}
종래 기술의 브라우저는 C를 이용함에 의해 획득된 로컬 인터페이스를 호출하는 자바스크립트 인터페이스를 통해 DOM에 억세스한다. 자바스크립트에 의한 로컬 인터페이스 호출의 낮은 효율로 인하여, 브라우저의 DOM의 이점이 큰 스케일의 온라인 게임을 개발하는 데는 이용될 수 없다. 이 실시예에서, DOM의 전체 코드는 자바스크립트로 기록되고, 자바스크립트 인터페이스들 사이의 호출에 대한 오버헤드는 자바스크립트와 로컬 인터페이스 사이의 호출에 대한 것보다 훨씬 적어서, DOM의 동작 효율이 개선되고, DOM 코어 게임 또는 큰 스케일의 프로젝트의 개발이 가능하게 된다.
제3 실시예
본 출원의 페이지 파싱 공정이 상기 실시예에서 상세히 설명된다. 그러나, 생성된 DOM 트리 표시 구조를 렌더링하거나 또는 렌더링 공정 이전에 렌더링 및 표시 효율을 개선하기 위하여 수행되는 사전 공정에 대한 방법은 본 출원의 실시예에 국한되지 않으며, 본 출원의 목적을 달성하는데 영향을 주지 않는다. 그러나, 실제로는, 본 출원에서는 개성화(individuation) 및 렌더링과 표시의 효율을 개선하기 위하여, 자바스크립트 언어를 이용함에 의해 대응하는 동작이 수행될 수 있다. 이들 동작은 스타일 제어, 조판, 텍스트 드로잉 등을 포함하며, 자바스크립트 언어를 이용함에 의한 이들 동작을 수행이 이어서 설명된다.
스타일 제어에 있어서, 스타일 제어는 웹페이지의 비주얼 엘리먼트의 디스플레이 스타일을 정의하는데 이용된다. 실제로는, 스타일 제어는 디폴트로(추가 동작 없이) 수행되거나 또는 소망하는 대로 지정된 스타일 제어가 수행될 수 있다. 스타일 제어에 있어서, 스타일 정의 소스를 결정할 필요가 있다. 일반적으로, 스타일 정의 소스는 브라우저 디폴트, 외부 스타일 시트, 내부 스타일 시트 및 인라인 스타일을 포함하며, 이들이 총괄하여 스타일 리소스로 칭한다. 스타일 리소스는 정적 방식으로 메모리 내에 저장될 수 있거나, 또는 필요한 대로 일시적으로 생성될 수 있다. 이 실시예에서, DOM 오브젝트 내에 적어도 하나의 DOM 오브젝트 노드에 대해 비-디폴트 스타일 제어가 존재하는 경우, DOM 트리 노드의 스타일 리소스는 자바스크립트 코드로 컴파일되고, 자바스크립트 코드는 함수로 패키징된다. 함수는 대응하는 DOM 오브젝트 노드에 대한 스타일 제어를 수행하도록 호출될 것이다. 아래의 코드 세그먼트가 예로서 취해진다: tmpstyle{left:10px;top:20px;color:red}. 먼저, 스타일 제어 코드 세그먼트가 자바스크립트 코드로 컴파일된다:
Figure pct00004
다음으로, 컴파일링에 의해 생성된 자바스크립트 코드가 함수로 패키징된다:laya.document.styleCache[“tmpstyle”]=function(). 그러므로, laya.document.styleCache[“tmpstyle”].call(this)가 디스크립션 {left:10px;top:20px;color:red} 분석 없이 렌더링의 스타일 제어 동안 실행될 수 있다. C++ 또는 Java 를 이용하는 종래 기술의 스타일 제어와 비교하여, 이 실시예의 스타일 제어에서, 제어 코드 세그먼트는 자바스크립트 코드 세그먼트로 컴파일되어, 사용자는 브라우저를 업데이트할 필요가 있고, 스타일 파싱이 가속된다.
조판에 대하여, 스타일 제어는 웹페이지 표시 내에 포함되고, 조판은 스타일 제어를 기초로 필요할 수 있으며, 조판 동작은 또한 속성의 추가, 삭제 또는 개조와 같은 DOM 오브젝트 노드를 개조하도록 트리거된다. 종래 기술의 조판 동작과의 상이점은 C 또는 JAVA 코드에 있으며, 이 실시예에서 조판 동작은 아래와 같은 자바스크립트 언어를 이용함에 의해 수행될 수 있다: 변경된 DOM 오브젝트 노드 및 변경된 DOM 오브젝트 노드의 서브-노드를 수집하여 조판 수집을 형성하고; 조판 수집에 있어서의 DOM 오브젝트 노드의 신규 속성 정보를 계산하고, 여기서 속성 정보는 렙(wrap), 위치 및 폭을 포함하며; 신규 속성 정보를 이용하여 DOM 오브젝트 노드의 원래의 속성 정보를 개조하고; 신규 속성 정보를 기초로 DOM 오브젝트 노드를 조판하는 것을 포함한다.
텍스트 드로잉에 있어서, 페이지 표시의 렌더링에 있어서 많은 양의 텍스트가 드로잉되는 경우, 텍스트는 일반적으로는 낮은 효율의 벡터 다이어그램으로 드로잉된다. 이 실시예에서, 텍스트 드로잉은 픽쳐 드로잉으로서 이행되어, 텍스트 드로잉의 렌더링 효율을 개선한다. 도 3을 참조로, 이 실시예에서의 텍스트 드로잉을 이행하기 위한 공정을 도시하되, 이 공정은 아래와 같이 단계 S301 내지 S305를 포함한다.
단계 S301에서, 프리셋 이미지 셋을 검색하여, 프리셋 이미지 셋 내의 문자의 크기와 일치하는 크기를 갖는 문자가 픽쳐 내에 존재하는지 여부를 결정한다. 공정은 픽쳐가 존재하는 경우 단계 S302로 진행하며; 그렇지 않은 경우 공정은 단계 S305로 진행한다.
단계 S302에서, 드로잉될 문자가 픽쳐 내에 포함되는지 여부가 판정된다. 문자가 존재하는 경우, 공정은 단계 S303으로 진행되고, 그렇지 않다면, 단계 S304로 진행된다.
단계 S303에서, 픽쳐 내의 문자의 위치 정보가 복귀되고, 문자는 위치 정보에 따라 드로잉된다. 공정은 종료된다.
단계 S304에서, 드로잉될 문자가 픽쳐 내에 드로잉되며, 문자는 픽쳐 내의 문자의 위치 정보에 따라 드로잉된다. 공정은 종료된다.
단계 S305에서, 문자의 크기와 일치하는 크기를 갖는 픽쳐가 생성되고, 드로잉될 문자가 픽쳐 내에 드로잉되며, 문자는 픽쳐 내의 문자의 위치 정보를 기초로 드로잉된다.
재료 결합에 있어서, 3D 또는 2D 온라인 게임 환경과 같은 페이지 표시의 실제 렌더링 공정 동안, 드로잉될 많은 양의 문자, 아이콘 또는 표현 에니메이션이 존재한다. 일반적으로, 엘리먼트가 매번 드로잉되고, 스크린 상의 드로잉은 일반적으로 총 200회를 넘을 것이다. 렌더링 효과에 영향을 주는 요인은 그래픽 카드 드로잉 회수 및 스크린 충전율을 포함하며, 렌더링의 효율은 드로잉 횟수가 200회를 넘는 경우에 현저히 감소될 수 있다. 이 문제를 해결하기 위하여, 재료 결합 방법에 제공되는데, 여기서 문자, 픽쳐 또는 표현 에니메이션과 같은 드로잉될 컨텐츠가 사전에 생성된 블랭크 텍스츄어 상에서 결합되고, 다음으로 동시에 드로잉되며, 블랭크 텍스츄어 채움이 완료된 이후에 제출되어, 그래픽 카드의 드로잉의 횟수를 감소시키고, 효율을 개선한다. 이 실시예에서의 재료 조합 방법의 공정을 도시하는 도 4를 참조로, 공정은 아래와 같이 단계 S401 내지 S403을 포함한다.
단계 S401에서, 블랭크 텍스츄어가 생성된다.
블랭크 텍스츄어는 구동 레이어(DirectX, OpenGL)에 의해 생성될 수 있다. 블랭크 텍스츄어의 크기는 이 실시예에 국한되지 않으며, 실제로 드로잉될 문자 및 아이콘의 양을 기초로 결정될 수 있다.
단계 S402에서, 드로잉될 오브젝트가 텍스츄어에 놓이고, 텍스츄어 내에 드로잉될 오브젝트의 위치 정보가 기록된다.
이 실시예에서, 드로잉될 오브젝트는 스크린 상에 직접 드로잉되지 않는다. 대신에, 드로잉될 오브젝트는 블랭크 텍스츄어 내에서 결합되고, 드로잉될 오브젝트 각각의 위치 정보가 기록된다. 여기서 드로잉될 오브젝트는 문자, 픽쳐, 표현 에니메이션 등을 포함한다.
단계 S403에서, 드로우 트리거가 수신되는 경우, 드로잉될 오브젝트는 텍스츄어내에 드로잉될 오브젝트의 위치 정보를 기초로 스크린 상에 동시에 드로잉된다.
상기 단계 S402는 많은 방식으로 이행될 수 있다. 예를 들면, 그리드 알고리즘이 채택될 수 있는데, 여기서는 블랭크 텍스츄어가 먼저 다중 그리드(예를 들면, 16*16)로 분할되고, 점유될 그리드의 수는 폭 및 높이와 같은 드로잉될 오브젝트의 정보를 기초로 계산되고, 다음으로 점유될 그리드는 행 대 행으로 횡단되어, 그리드의 정보를 획득함에 의해 블랭크 텍스츄어 내에 드로잉될 오브젝트의 위치를 결정한다. 이러한 방식에서, 드로잉될 다중 오브젝트가 블랭크 텍스츄어 내에 결합되지만, 너무 많은 반복된 횡단은 효율에 심각하게 영향을 줄 수 있다. 개선된 방식에서는, 각각의 그리드는 바닥에서의 연속 그리드의 개수 및 그 우측에서의 연속 그리드의 개수를 저장하고, 주변 그리드의 상태는 각 횡단에서 더 이상 고려 대상이 아니며, 드로잉될 오브젝트의 위치는 직접 결정될 수 있어서, 결합 동작이 수행되고, 그 상부 또는 좌측에 대한 그리드의 정보가 조정된다. 도 5a 내지 도 5e를 참조로, 도 5a는 블랭크 텍스츄어의 초기 상태를 도시하는데, 여기서 블랭크 텍스츄어는 8*8 그리드로 분할되며; 도 5b는 드로잉될 오브젝트가 채워지는 텍스츄어를 도시하며, 여기서 드로잉될 오브젝트는 2*2 그리드를 점유하며; 도 5c는 드로잉될 제2 오브젝트(1*1)가 채워지는 텍스츄어를 도시하며, 도 5d는 드로잉될 제3 오브젝트(7*2)가 채워지는 텍스츄어를 도시하며, 여기서 드로잉될 오브젝트는 제1 행 또는 제2 행에는 놓일 수 없으므로 제3 행에 놓이며; 도 5e는 드로잉될 제4 오브젝트(1*1)가 채워지는 텍스츄어를 도시한다. 다른 개선된 방식에서, 각 행에서의 블랭크 그리드의 개수가 저장되며; 드로잉될 오브젝트의 폭이 이 행에서의 블랭크 그리드의 개수를 넘는지 여부가 횡단 이전에 결정되고, 넘는 경우에 다음 행으로 돌아가며, 계속 진행된다.
제4 실시예
상기는 본 출원에서의 방법의 실시예의 설명으로, HTML5-프로토콜 기반 웹페이지 표시 장치의 실시예를 더욱 제공한다. HTML5-프로토콜 기반 웹페이지 장치의 구조적 도면을 도시하는 도 6을 참조로, 장치는 취득 유닛(601), 파싱 유닛(602) 및 렌더링 유닛(603)을 포함한다.
취득 유닛(601)은 HTML5-프로토콜 기반 웹페이지 리소스를 취득하도록 구성된다.
파싱 유닛(602)은 자바스크립트 언어를 이용함에 의해 웹페이지 리소스를 파싱하여 DOM 오브젝트 노드를 생성하도록 구성된다.
렌더링 유닛(603)은 DOM 오브젝트를 렌더링하여 웹페이지를 표시하도록 구성된다.
이 실시예에서의 장치의 동작 공정은 아래와 같다. 먼저, 취득 유닛(601)은 HTML5-프로토콜 기반 웹페이지 리소스를 취득한다. 다음으로 파싱 유닛(602)은 자바스크립트 언어를 이용함에 의해 웹페이지 리소스를 파싱하여 DOM 오브젝트 노드를 생성한다. 마지막으로, 렌더링 유닛(603)은 DOM 오브젝트를 렌더링하여 웹페이지를 표시한다.
장치의 이 실시예에서, HTML5-프로토콜 기반 웹페이지 리소스가 취득되고, 다음으로 웹페이지 리소스가 자바스크립트 언어를 이용함에 의해 파싱되어 DOM 트리 표시 구조를 생성하며, 다음으로 DOM 트리 표시 구조는 렌더링되고 표시된다. 종래 기술과 비교하여, 자바스크립트 언어가 본 출원의 장치의 실시예에서의 HTML5-프로토콜 기반 웹페이지 리소스를 파싱하기 위한 언어로서 채택된다. 각종 웹 브라우저에서 자바스크립트 언어가 널리 이용되므로, HTML5 프로토콜에 대한 지원은 본 출원의 실시예에서는 외부 플러그-인 프로그램 없이 달성되므로, 플러그 인을 설치하거나 또는 함수를 업데이팅 하는 동작을 방지하고, HTML5-프로토콜 기반 웹페이지의 표시 효율을 개선한다. 또한, HTML5 프로토콜에 대한 지원이 본 출원의 장치의 실시예에서 자바스크립트 언어에 의존해서만 달성되므로, 이들 플랫폼의 웹페이지 표시 성능을 증가 또는 개선하고 모든 플랫폼 개발 모드를 제공하기 위하여 본 출원의 기술적 해법은 자바스크립트 언어를 지원하는 각종 플랫폼에 널리 적용될 수 있다.
장치의 전술한 실시예에서, 파싱 유닛은 상이한 파싱 방식에 의존하여 상이한 구조를 가질 수 있다. 예를 들면, 파싱 유닛(602)은 렉시컬 분석 서브유닛(6021) 및 DOM 오브젝트 노드 생성 서브유닛(6022)을 포함할 수 있다. 렉시컬 분석 서브유닛(6021)은 자바스크립트 언어를 이용함에 의해 웹페이지 리소스에 대한 렉시컬 분석을 수행하여 HTML 태그를 얻도록 구성된다. DOM 오브젝트 노드 생성 서브유닛(6022)은 DOM 오브젝트 생성 함수를 호출하여 HTML 태그에 기초하여 DOM 오브젝트 노드를 생성하도록 구성될 수 있다. 파싱 유닛은 HTML 태그를 얻기 위하여 자바스크립트 언어를 이용함에 의해 웹페이지 리소스에 대한 렉스컬 분석이 수행된 이후에 DOM 오브젝트 노드를 생성하기 위하여 DOM 오브젝트 생성 함수를 호출하기 위한 HTML 태그에 대응하는 자바스크립트 코드를 생성하도록 구성되는 코드 생성 서브유닛을 더 포함할 수 있으며, DOM 오브젝트 노드 생성 서브유닛은 HTML 태그에 따라 HTML 태그에 대응하는 자바스크립트 코드를 호출하여 DOM 오브젝트 노드를 생성하도록 구성된다.
장치의 전술한 실시예에서, 렌더링 유닛은 어떻게 렌더링 동작이 수행되는지에 의존하여 상이한 구조적 유닛을 포함할 수 있어서, 상이한 내부 구조를 가질 수 있다. 또한, 렌더링 유닛 이전에, 특정 오브젝트를 달성하기 위하여 필요한 경우 일부 유닛이 추가될 수 있다.
예를 들면, 상기 장치는 자바스크립트 언어를 이용함에 의해 DOM 오브젝트의 제어를 달성하도록 구성되는 DOM 오브젝트 제어 유닛을 더 포함할 수 있으며, DOM 오브젝트 제어 유닛은 자바스크립트 언어를 이용함에 의해 DOM 오브젝트, DOM 오브젝트의 베이스 클래스, 비주얼 엘리먼트 인터페이스를 획득하고; HTML 태그에 따라서 DOM 오브젝트에 DOM 오브젝트 노드를 추가하거나 및/또는 DOM 오브젝트로부터 DOM 오브젝트 노드를 삭제하고; 및/또는 HTML 태그의 속성에 따라 DOM 오브젝트 노드의 속성을 설정하도록 구성된다.
다른 예로서, 상기 장치는 적어도 하나의 DOM 오브젝트 노드의 스타일을 제어하도록 구성되는 스타일 제어 유닛(604)을 더 포함할 수 있으며, 스타일 제어 유닛은 DOM 오브젝트 노드의 스타일 리소스를 자바스크립트 코드로 컴파일하고, 상기 컴파일에 의해 획득된 상기 자바스크립트 코드를 함수로 패키징하고; 및 상기 함수를 호출하여 대응하는 DOM 오브젝트 노드에 대한 스타일 제어를 수행하도록 구성된다. 스타일 제어 공정이 렌더링의 조판 동작을 트리거 하는 경우, 또는 DOM 오브젝트 노드의 추가, 삭제 또는 속성 개조와 같은 변경이 발생하는 경우, 상기 장치실시예는 있을 수 있는 변경된 DOM 오브젝트를 조판하도록 구성되는 조판 유닛(605)을 더 포함하고, 여기서 변경은 DOM 오브젝트 노드의 추가, 삭제 및/또는 스타일 변형을 포함하며, 변경된 DOM 오브젝트를 조판하는 공정은: 자바스트립트 언어를 이용함에 의해, 변경된 DOM 오브젝트 노드 및 변경된 DOM 오브젝트 노드의 서브-노드를 수집하여 조판 수집을 형성하고; 상기 조판 수집에서 상기 DOM 오브젝트 노드의 속성 정보를 계산하고; 및 변경 이후의 상기 DOM 오브젝트 노드의 속성 정보를 이용함에 의해 변경 이전의 DOM 오브젝트 노드의 속성 정보를 개조하도록 구성된다.
다른 예로서, DOM 오브젝트를 렌더링하는 공정이 문자를 드로잉하는 단계를 포함하는 경우, 렌더링 유닛(603)은 문자 드로잉 유닛(6031)을 포함하며, 상기 문자 드로잉 유닛(6031)은 검색 서브유닛, 판정 서브유닛, 생성 서브유닛, 제1 드로잉 서브유닛 및 제2 드로잉 서브유닛을 포함한다. 상기 검색 서브유닛은 프리셋 이미지 셋을 검색하여 상기 프리셋 이미지 셋 내의 문자의 크기와 일치하는 크기를 갖는 픽쳐가 존재하는지 여부를 결정하여, 상기 프리셋 이미지 셋 내의 문자의 크기와 일치하는 크기를 갖는 픽쳐가 존재하는 경우 판정 서브유닛을 트리거하나, 또는 상기 프리셋 이미지 셋 내의 문자의 크기와 일치하는 크기를 갖는 픽쳐가 존재하지 않는 경우 생성 서브유닛을 트리거하도록 구성된다. 상기 판정 서브유닛은 드로잉될 문자가 픽쳐 내에 포함되는지 여부를 판정하여, 드로잉될 문자가 픽쳐 내에 포함되는 경우에 픽쳐 내의 문자의 위치 정보에 따라 문자를 드로잉 하도록 상기 제1 드로잉 서브유닛을 트리거하거나, 또는 드로잉될 문자가 픽쳐 내에 포함되지 않는 경우에 픽쳐 내의 문자의 위치 정보에 따라 픽쳐 내의 드로잉될 문자를 드로잉 하도록 상기 제2 드로잉 서브유닛을 트리거하고 문자를 드로잉 하도록 상기 제1 드로잉 서브유닛을 트리거 하도록 구성된다. 상기 생성 서브유닛은 문자의 크기와 일치하는 크기를 갖는 픽쳐를 생성하여, 픽쳐 내에 드로잉될 문자를 드로잉 하도록 상기 제2 드로잉 서브유닛을 트리거하고, 및 픽쳐 내의 문자의 위치 정보에 따라 문자를 드로잉 하도록 상기 제1 드로잉 서브유닛을 트리거하도록 구성된다.
다른 예로서, 상기 DOM 오브젝트를 렌더링하는 단계는 재료를 결합하는 단계를 포함하며, 상기 랜더링 유닛(603)은 재료 결합 유닛(6032)을 포함하며, 상기 재료 결합 유닛(6032)은 텍스츄어 생성 서브유닛, 위치 정보 기록 서브유닛 및 제3 드로잉 서브유닛을 포함한다. 상기 텍스츄어 생성 서브유닛은 블랭크 텍스츄어를 생성하도록 구성된다. 상기 위치 정보 기록 서브유닛은 드로잉될 오브젝트를 텍스츄어에 두고, 드로잉될 오브젝트의 위치 정보를 텍스츄어에 기록하도록 구성된다. 드로우 트리거를 수신하는 경우, 텍스츄어 내의 드로잉될 오브젝트의 위치 정보에 따라 드로잉될 오브젝트 모두를 스크린에 동시에 드로잉 하도록 구성된다.
설명의 편의를 위하여, 상기 장치는 함수에 대응하는 각종 유닛으로 설명된다. 실제로, 각종 유닛의 기능은 하나 또는 그 이상의 소프트웨어 및/또는 하드웨어로 이행될 수 있다. 예를 들면, 웹페이지 표시를 달성하기 위한 상기 장치는 브라우저의 다른 함수와 결합되어 HTML5를 지원할 수 있는 하나의 브라우저를 형성한다.
당업자에 의해 실시예의 상기 설명으로부터 명백한 것처럼, 본 출원은 필요한 일반적 하드웨어 플랫폼과 결부된 소프트웨어를 이용하여 이행될 수 있다. 이해를 기초로 하여, 본 출원 또는 종래 기술에 기여하는 부분의 기술적 해법은 소프트웨어 제품으로 구현될 수 있다. 컴퓨터 소프트웨어 제품은 ROM/RM, 마그네틱 디스크, 또는 광학 디스크와 같은 저장매체 내에 저장될 수 있다. 컴퓨터 소프트웨어 제품은 컴퓨터 장치(개인 컴퓨터, 서버, 네트워크 장치 등)가 본 출원의 실시예 또는 실시예의 일부에서의 방법을 이행하도록 하는 명령어를 포함한다.
본 명세서에서, 실시예가 연속적으로 설명되고, 각각의 실시예는 다른 실시예와의 상이한 측면을 강조하며, 실시예들 중 유사한 부분들에 대해서는 참조될 수 있다. 시스템의 실시예가 방법의 그것과 유사하므로, 관련 포인트에 대해 방법의 설명에 대해 참조될 수 있다. 전술한 시스템의 실시예는 단순히 설명을 위한 것이다. 개별 부품으로서 설명된 유닛은 물리적으로 분리될 수 있거나 또는 아닐 수 있다. 유닛으로서의 부품은 물리적 유닛이거나 또는 아닐 수 있으며, 즉, 일 위치에 위치될 수 있거나 또는 다중 네트워크 유닛 상에 분포될 수 있다. 모듈의 일부 또는 전부는 실시예의 해법의 목적을 달성하는데 필요한 대로 선택될 수 있으며, 이는 당업자라면 창의적 노력 없이 이해되고 이행될 수 있다.
본 출원은 개인 컴퓨터, 서버 컴퓨터, 휴대용 장치 또는 포터블 장치, 태블릿 장치, 멀티프로세서 시스템, 마이크로프로세서-기반 시스템, 탑 박스, 프로그래머블 컨슈머 전자 장치, 네트워크 PC, 미니 컴퓨터, 메인프레임 컴퓨터와 같은 각종 일반형 또는 전용 컴퓨팅 시스템 환경 또는 구성 또는 상기 시스템 또는 장치 중 하나를 포함하는 분산형 컴퓨팅 환경에 적용될 수 있다.
본 출원은 프로그램 모듈과 같은 컴퓨터에 의해 수행되는 컴퓨터 실행 가능 명령어의 일반적 컨텍스트로 설명될 수 있다. 일반적으로, 프로그램 모듈은 특정 테스크를 수행하거나 또는 특정 추상 데이터 유형(ADT)을 달성하기 위하여 루틴, 프로그램, 오브젝트, 어셈블리, 데이터 구조 등을 포함한다. 본 출원은 또한 분산형 컴퓨터 환경에서 이행될 수 있다. 이 분산형 컴퓨팅 환경에서, 테스크가 통신 네트워크를 통해 연결되는 원격 프로세싱 장치에 의해 실행된다. 분산형 컴퓨팅 환경에서, 프로그램 모듈은 저장 장치를 포함하는 로컬 또는 원격 컴퓨터 저장 매체 내에 위치될 수 있다.
상술한 것은 본 출원의 실시예일 뿐이다. 당업자라면 본 출원의 원리로부터 벗어나지 않고 개조 및 변형이 가능하면, 개조 및 변형은 본 출원의 보호 범위 내에 해당되는 것으로 간주 되어야 함이 주목된다.

Claims (16)

  1. HTML5-프로토콜 기반 웹페이지 표시 방법은:
    HTML5-프로토콜 기반 웹페이지 리소스를 취득하는 단계;
    자바스크립트 언어를 이용함에 의해 웹페이지 리소스를 파싱하여 DOM 오브젝트 노드를 생성하는 단계; 및
    DOM 오브젝트를 렌더링하고 웹페이지 표시를 수행하는 단계를 포함하는, 웹페이지 표시 방법.
  2. 청구항 1에 있어서, 자바스크립트 언어를 이용함에 의해 웹페이지 리소스를 파싱하여 DOM 오브젝트 노드를 생성하는 상기 단계는:
    자바스크립트 언어를 이용함에 의해 웹페이지 리소스에 대한 렉시컬 분석을 수행하여 HTML 태그를 획득하는 단계; 및
    DOM 오브젝트 생성 함수를 호출하여 상기 HTML 태그에 따라 DOM 오브젝트 노드를 생성하는 단계를 포함하는, 웹 페이지 표시 방법.
  3. 청구항 2에 있어서, 자바스크립트 언어를 이용함에 의해 웹페이지 리소스에 대한 렉시컬 분석을 수행하여 HTML 태그를 획득하는 상기 단계 이후에, 상기 HTML 태그에 대응하며 상기 DOM 오브젝트 생성 함수를 호출하여 DOM 오브젝트 노드를 생성하기 위한 자바스크립트 코드가 생성되고, DOM 오브젝트 생성 함수를 호출하여 상기 HTML 태그에 따라 DOM 오브젝트 노드를 생성하는 상기 단계는:
    상기 HTML 태그에 따라, 상기 HTML 태그에 대응하는 자바스크립트 코드를 호출하여 상기 DOM 오브젝트 노드를 생성하는 단계를 포함하는, 웹 페이지 표시 방법.
  4. 청구항 1 내지 청구항 3 중 어느 한 항에 있어서, 자바스크립트 언어를 이용함에 의해 상기 DOM 오브젝트의 제어를 달성하는 단계를 더 포함하며, 상기 자바스크립트 언어를 이용함에 의해 상기 DOM 오브젝트의 제어를 달성하는 상기 단계는:
    자바스크립트 언어를 이용함에 의해 상기 DOM 오브젝트, 상기 DOM 오브젝트의 베이스 클래스 및 비주얼 엘리먼트 인터페이스를 획득하는 단계;
    상기 HTML 태그에 따라 상기 DOM 오브젝트에 DOM 오브젝트 노드를 추가하거나 및/또는 상기 DOM 오브젝트로부터 DOM 오브젝트 노드를 삭제하는 단계; 및/또는
    상기 HTML 태크의 속성에 따라 DOM 오브젝트 노드의 속성을 설정하는 단계를 포함하는, 웹 페이지 표시 방법.
  5. 청구항 1에 있어서, 적어도 하나의 DOM 오브젝트 노드의 스타일을 제어하는 단계를 더 포함하되, 적어도 하나의 DOM 오브젝트 노드의 스타일을 제어하는 상기 단계는:
    상기 DOM 오브젝트 노드의 스타일 리소스를 자바스크립트 코드로 컴파일하고, 상기 컴파일에 의해 획득된 상기 자바스크립트 코드를 함수로 패키징하는 단계; 및
    상기 함수를 호출하여 대응하는 DOM 오브젝트 노드에 대한 스타일 제어를 수행하는 단계를 포함하는, 웹 페이지 표시 방법.
  6. 청구항 5에 있어서, 있을 수 있는 변경된 DOM 오브젝트를 조판하는 단계를 더 포함하되, 상기 변경은 DOM 오브젝트 노드의 추가, 삭제 및/또는 스타일 변형을 포함하며, 변경된 DOM 오브젝트를 조판하는 상기 단계는: 자바스트립트 언어를 이용함에 의해,
    변경된 DOM 오브젝트 노드 및 변경된 DOM 오브젝트 노드의 서브-노드를 수집하여 조판 수집을 형성하는 단계;
    상기 조판 수집 내의 상기 DOM 오브젝트 노드의 속성 정보를 계산하는 단계; 및
    변경 이후의 상기 DOM 오브젝트 노드의 속성 정보를 이용함에 의해 변경 이전의 DOM 오브젝트 노드의 속성 정보를 개조하는 단계를 포함하는, 웹 페이지 표시 방법.
  7. 청구항 1에 있어서, 상기 DOM 오브젝트를 렌더링하는 단계는 문자를 드로잉하는 단계를 포함하며, 문자를 드로잉하는 상기 단계는:
    프리셋 이미지 셋을 검색하여 상기 프리셋 이미지 셋 내의 문자의 크기와 일치하는 크기를 갖는 픽쳐가 존재하는지 여부를 결정하는 단계;
    상기 프리셋 이미지 셋 내의 문자의 크기와 일치하는 크기를 갖는 픽쳐가 존재하는 경우에, 드로잉될 문자가 상기 픽쳐 내에 포함되는지를 판정하고, 드로잉될 문자가 상기 픽쳐 내에 포함되는 경우에 상기 픽쳐 내의 문자의 위치 정보를 기초로 상기 문자를 드로잉하거나 또는 상기 픽쳐내의 드로잉될 문자를 드로잉하고, 드로잉될 문자가 상기 픽쳐 내에 포함되지 않는 경우에 상기 픽쳐 내의 문자의 위치 정보에 따라 상기 문자를 드로잉하는 단계; 또는
    상기 프리셋 이미지 셋 내의 문자의 크기와 일치하는 크기를 갖는 픽쳐가 존재하지 않는 경우에, 상기 문자의 크기와 일치하는 크기를 갖는 픽쳐를 생성하고, 드로잉될 문자를 픽쳐에 드로잉하고, 픽쳐 내의 문자의 위치 정보에 따라 문자를 드로잉하는 단계를 포함하는, 웹 페이지 표시 방법.
  8. 청구항 1에 있어서, DOM 오브젝트를 렌더링하는 단계는 재료들을 결합하는 단계를 포함하며, 재료들을 결합하는 상기 단계는:
    블랭크 텍스츄어를 생성하는 단계;
    드로잉될 오브젝트를 상기 텍스츄어에 두고, 드로잉될 오브젝트의 위치 정보를 텍스츄어에 기록하는 단계; 및
    드로우 트리거를 수신하는 경우, 텍스츄어 내의 드로잉될 오브젝트의 위치 정보에 따라 드로잉될 오브젝트를 스크린에 동시에 드로잉하는 단계를 포함하는, 웹 페이지 표시 방법.
  9. HTML5-프로토콜 기반 웹페이지 표시 장치로서, 취득 유닛, 파싱 유닛 및 렌더링 유닛을 포함하되,
    상기 취득 유닛은 HTML5-프로토콜 기반 웹페이지 리소스를 취득하도록 구성되며;
    상기 파싱 유닛은 자바스크립트 언어를 이용함에 의해 상기 웹페이지 리소스를 파싱하여 DOM 오브젝트 노드를 생성하도록 구성되며;
    상기 렌더링 유닛은 상기 DOM 오브젝트를 렌더링하고 웹페이지 표시를 수행하도록 구성되는, 웹 페이지 표시 장치.
  10. 청구항 9에 있어서, 상기 파싱 유닛은 렉시컬 분석 서브유닛 및 DOM 오브젝트 노드 생성 서브유닛을 포함하며,
    상기 렉시컬 분석 서브유닛은 자바스크립트 언어를 이용함에 의해 웹페이지 리소스에 대한 렉시컬 분석을 수행하여 HTML 태그를 얻도록 구성되며;
    상기 DOM 오브젝트 노드 생성 서브유닛은 DOM 오브젝트 생성 함수를 호출하여 HTML 태그에 따라 상기 DOM 오브젝트 노드를 생성하도록 구성되는, 웹 페이지 표시 장치.
  11. 청구항 10에 있어서, 상기 파싱 유닛은 자바스크립트 언어를 이용함에 의해 웹페이지 리소스에 대한 렉시컬 분석을 수행하여 HTML 태그를 얻은 이후에, 상기 HTML 태그에 대응하는 자바스크립트 코드를 생성하고 DOM 오브젝트 노드를 생성하기 위하여 DOM 오브젝트 생성 함수를 호출하도록 구성되는 코드 생성 서브유닛을 더 포함하며, 상기 DOM 오브젝트 노드 생성 서브유닛은 상기 HTML 태그에 대응하는 자바스크립트 코드를 호출하여 DOM 오브젝트 노드를 생성하도록 구성되는, 웹 페이지 표시 장치.
  12. 청구항 9 내지 청구항 11 중 어느 한 항에 있어서, 자바스크립트 언어를 이용함에 의해 DOM 오브젝트의 제어를 달성하도록 구성된 DOM 오브젝트 제어 유닛을 더 포함하며, 상기 DOM 오브젝트 제어 유닛은:
    자바스크립트 언어를 이용함에 의해 상기 DOM 오브젝트, 상기 DOM 오브젝트의 베이스 클래스 및 비주얼 엘리먼트 인터페이스를 취득하고;
    상기 HTML 태그에 따라 상기 DOM 오브젝트에 DOM 오브젝트 노드를 추가하거나 및/또는 상기 DOM 오브젝트로부터 DOM 오브젝트 노드를 삭제하고; 및/또는
    상기 HTML 태그의 속성에 따라 상기 DOM 오브젝트 노드의 속성을 설정하도록 구성되는, 웹 페이지 표시 장치.
  13. 청구항 9에 있어서, 적어도 하나의 DOM 오브젝트 노드의 스타일을 제어하도록 구성되는 스타일 제어 유닛을 더 포함하며, 상기 스타일 제어 유닛은:
    상기 DOM 오브젝트 노드의 스타일 리소스를 자바스크립트 코드로 컴파일하고, 컴파일에 의해 얻어진 자바스크립트 코드를 함수로 패키징하고; 및
    상기 함수를 호출하여 대응하는 DOM 오브젝트 노드에 대한 스타일 제어를 수행하도록 구성되는, 웹 페이지 표시 장치.
  14. 청구항 13에 있어서, 있을 수 있는 변경된 DOM 오브젝트를 조판하도록 구성된 조판 유닛을 더 포함하되, 상기 변경은 상기 DOM 오브젝트 노드의 추가, 삭제 및/또는 스타일 변형을 포함하며, 변경된 DOM 오브젝트를 조판하는 단계는: 자바스크립트 언어를 이용함에 의해,
    변경된 DOM 오브젝트 노드 및 상기 변경된 DOM 오브젝트 노드의 서브-노드를 수집하여 조판 수집을 형성하는 단계;
    상기 조판 수집 내의 상기 DOM 오브젝트 노드의 속성 정보를 계산하는 단계; 및
    변경 이후의 상기 DOM 오브젝트 노드의 속성 정보를 이용함에 의해 변경 이전의 상기 DOM 오브젝트 노드의 속성 정보를 개조하는 단계를 포함하는, 웹 페이지 표시 장치.
  15. 청구항 9에 있어서, 상기 DOM 오브젝트를 렌더링하는 단계는 문자를 드로잉하는 단계를 포함하며, 상기 렌더링 유닛은 문자 드로잉 유닛을 포함하며, 상기 문자 드로잉 유닛은 검색 서브유닛, 판정 서브유닛, 생성 서브유닛, 제1 드로잉 서브유닛 및 제2 드로잉 서브유닛을 포함하되,
    상기 검색 서브유닛은 프리셋 이미지 셋을 검색하여 상기 프리셋 이미지 셋 내의 문자의 크기와 일치하는 크기를 갖는 픽쳐가 존재하는지 여부를 결정하여, 상기 프리셋 이미지 셋 내의 문자의 크기와 일치하는 크기를 갖는 픽쳐가 존재하는 경우 판정 서브유닛을 트리거하거나 또는 상기 프리셋 이미지 셋 내의 문자의 크기와 일치하는 크기를 갖는 픽쳐가 존재하지 않는 경우 생성 서브유닛을 트리거하도록 구성되며,
    상기 판정 서브유닛은 드로잉될 문자가 픽쳐 내에 포함되는지 여부를 판정하여, 드로잉될 문자가 픽쳐 내에 포함되는 경우에 픽쳐 내의 문자의 위치 정보에 따라 문자를 드로잉 하도록 상기 제1 드로잉 서브유닛을 트리거하고, 또는 드로잉될 문자가 픽쳐 내에 포함되지 않는 경우에 픽쳐 내의 문자의 위치 정보에 따라 픽쳐 내의 드로잉될 문자를 드로잉 하도록 상기 제2 드로잉 서브유닛을 트리거하고 문자를 드로잉 하도록 상기 제1 드로잉 서브유닛을 트리거하도록 구성되며; 또한
    상기 생성 서브유닛은 문자의 크기와 일치하는 크기를 갖는 픽쳐를 생성하여, 픽쳐 내에 드로잉될 문자를 드로잉 하도록 상기 제2 드로잉 서브유닛을 트리거하고, 픽쳐 내의 문자의 위치 정보에 따라 문자를 드로잉 하도록 상기 제1 드로잉 서브유닛을 트리거하도록 구성되는, 웹 페이지 표시 장치.
  16. 청구항 9에 있어서, 상기 DOM 오브젝트를 렌더링하는 단계는 재료를 결합하는 단계를 포함하며, 상기 랜더링 유닛은 재료 결합 유닛을 포함하며, 상기 재료 결합 유닛은 텍스츄어 생성 서브유닛, 위치 정보 기록 서브유닛 및 제3 드로잉 서브유닛을 포함하며,
    상기 텍스츄어 생성 서브유닛은 블랭크 텍스츄어를 생성하도록 구성되며,
    상기 위치 정보 기록 서브유닛은 드로잉될 오브젝트를 텍스츄어에 두고, 드로잉될 오브젝트의 위치 정보를 텍스츄어에 기록하도록 구성되며; 또한
    드로우 트리거를 수신하는 경우, 텍스츄어 내의 드로잉될 오브젝트의 위치 정보에 따라 드로잉될 오브젝트 모두를 스크린에 동시에 드로잉 하도록 구성되는, 웹 페이지 표시 장치.
KR1020157013991A 2012-11-06 2013-07-23 Html5-프로토콜 기반 웹페이지 표시 방법 및 장치 KR20150079867A (ko)

Applications Claiming Priority (3)

Application Number Priority Date Filing Date Title
CN201210438976.8A CN102955854B (zh) 2012-11-06 2012-11-06 一种基于html5协议的网页展现方法及装置
CN201210438976.8 2012-11-06
PCT/CN2013/079845 WO2014071749A1 (zh) 2012-11-06 2013-07-23 一种基于html5协议的网页展现方法及装置

Publications (1)

Publication Number Publication Date
KR20150079867A true KR20150079867A (ko) 2015-07-08

Family

ID=47764660

Family Applications (1)

Application Number Title Priority Date Filing Date
KR1020157013991A KR20150079867A (ko) 2012-11-06 2013-07-23 Html5-프로토콜 기반 웹페이지 표시 방법 및 장치

Country Status (5)

Country Link
US (1) US20150286739A1 (ko)
JP (1) JP2016505911A (ko)
KR (1) KR20150079867A (ko)
CN (1) CN102955854B (ko)
WO (1) WO2014071749A1 (ko)

Cited By (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
KR101708741B1 (ko) 2015-08-18 2017-02-21 카테노이드 주식회사 컨텐츠를 제공하는 에이전트의 인증 방법 및 이를 위한 디스플레이장치
WO2017136755A1 (en) * 2016-02-04 2017-08-10 Observepoint, Inc. Analyzing analytic element network traffic
US10210001B2 (en) 2015-11-04 2019-02-19 Observepoint, Inc. Automatic execution of objects in a user interface
US10826802B2 (en) 2016-02-09 2020-11-03 Observepoint, Inc. Managing network communication protocols
KR102620692B1 (ko) 2023-08-21 2024-01-03 주식회사 비전트리 이러닝 콘텐츠 제작을 위한 html5 자동 변환 방법

Families Citing this family (32)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN102955854B (zh) * 2012-11-06 2015-11-25 搜游网络科技(北京)有限公司 一种基于html5协议的网页展现方法及装置
CN103279373B (zh) * 2013-05-31 2017-09-22 广州市动景计算机科技有限公司 浏览器外壳功能的更新方法及装置
CN103336690B (zh) * 2013-06-28 2017-02-08 优视科技有限公司 基于html5的文字元素绘制方法及装置
US9317873B2 (en) 2014-03-28 2016-04-19 Google Inc. Automatic verification of advertiser identifier in advertisements
US20150287099A1 (en) 2014-04-07 2015-10-08 Google Inc. Method to compute the prominence score to phone numbers on web pages and automatically annotate/attach it to ads
US11115529B2 (en) 2014-04-07 2021-09-07 Google Llc System and method for providing and managing third party content with call functionality
CN104866340A (zh) * 2015-04-29 2015-08-26 小米科技有限责任公司 终端设备软件更新方法及装置
CN105487858B (zh) * 2015-11-25 2019-04-02 深圳联友科技有限公司 一种基于html5的在线表单设计系统
CN106873952B (zh) * 2015-12-14 2021-07-20 航天信息股份有限公司 移动端网页开发的数据处理系统和方法、及应用装置
CN105630483B (zh) * 2015-12-16 2019-01-04 青岛海信网络科技股份有限公司 一种组态图元的显示方法及装置
CN107707965B (zh) * 2016-08-08 2021-02-12 阿里巴巴（中国）有限公司 一种弹幕的生成方法和装置
CN107766359B (zh) * 2016-08-17 2022-03-15 阿里巴巴（中国）有限公司 一种将页面内容转换为图片的方法、装置以及计算设备
CN113282360A (zh) * 2016-09-14 2021-08-20 阿里巴巴集团控股有限公司 2D canvas网页元素的渲染方法、装置及电子设备
US10469424B2 (en) 2016-10-07 2019-11-05 Google Llc Network based data traffic latency reduction
CN108073647B (zh) * 2016-11-14 2020-06-30 腾讯科技（深圳）有限公司 网页显示方法及装置
CN107291465A (zh) * 2017-06-14 2017-10-24 北京小米移动软件有限公司 页面显示方法、装置及存储介质
US11062497B2 (en) 2017-07-17 2021-07-13 At&T Intellectual Property I, L.P. Structuralized creation and transmission of personalized audiovisual data
CN107562861A (zh) * 2017-08-29 2018-01-09 武汉智丽丰信息科技有限公司 一种基于WebGL的WebGIS三维模型系统
US20190180484A1 (en) * 2017-12-11 2019-06-13 Capital One Services, Llc Systems and methods for digital content delivery over a network
CN109255089B (zh) * 2018-07-06 2022-03-11 曙光信息产业(北京)有限公司 基于Html的节点数据处理方法以及系统
CN109344355B (zh) * 2018-09-26 2022-03-15 北京因特睿软件有限公司 针对网页变化的自动回归检测与块匹配自适应方法和装置
CN109542417B (zh) * 2018-11-20 2022-03-01 北京小米移动软件有限公司 一种dom渲染网页的方法、装置、终端和存储介质
CN110442820A (zh) * 2019-07-24 2019-11-12 上海易点时空网络有限公司 用于网页的图片合成方法以及装置
CN111596935A (zh) * 2020-04-27 2020-08-28 五八有限公司 一种脚本打包方法、装置、电子设备及存储介质
CN112040322A (zh) * 2020-08-20 2020-12-04 译发网络科技(大连)有限公司 一种视频说明书制作方法
CN112163179A (zh) * 2020-09-29 2021-01-01 银盛支付服务股份有限公司 一种屏幕绘制方法及系统
CN112102450B (zh) * 2020-11-18 2021-02-02 武大吉奥信息技术有限公司 一种基于WebGL三维地图的跑马灯特效通用方法
CN112784202B (zh) * 2021-02-03 2022-10-04 中国电子科技集团公司第二十八研究所 一种基于web技术的提高网页截图清晰度的方法
CN113778393A (zh) * 2021-03-22 2021-12-10 北京沃东天骏信息技术有限公司 组件生成方法、装置、计算机系统和计算机可读存储介质
CN114861103B (zh) * 2022-03-23 2023-11-10 易保网络技术(上海)有限公司 页面回溯方法及其装置、介质和电子设备
CN115981797B (zh) * 2023-03-21 2023-06-20 北京时代新威信息技术有限公司 在JavaFX应用程序中动态加载网页的方法及设备
CN116756708B (zh) * 2023-05-30 2023-12-05 佛山众陶联供应链服务有限公司 一种针对于数字产品页面版权可变粒度的保护方法

Family Cites Families (18)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
JPH02297215A (ja) * 1989-03-31 1990-12-07 Canon Inc 出力装置
JPH04149774A (ja) * 1990-10-15 1992-05-22 Hitachi Ltd フォームオーバレイ情報生成方式
NL1025125C2 (nl) * 2003-11-07 2005-05-10 Backbase B V Werkwijze, inrichting en systeem voor het uitbreiden van een mark-up taal.
US8239749B2 (en) * 2004-06-25 2012-08-07 Apple Inc. Procedurally expressing graphic objects for web pages
CN101246491B (zh) * 2008-03-11 2014-11-05 孟智平 一种在网页中使用描述文件的方法和系统
JP5279332B2 (ja) * 2008-04-28 2013-09-04 キヤノン株式会社 画像処理装置、画像処理方法及びプログラム
JP5159711B2 (ja) * 2009-06-25 2013-03-13 インターナショナル・ビジネス・マシーンズ・コーポレーション 組込み機器およびその状態表示制御方法
JP2011044791A (ja) * 2009-08-19 2011-03-03 Canon Inc 画像処理装置、及びその制御方法
CN101763432A (zh) * 2010-01-05 2010-06-30 北京大学 一种轻量级网页动态视图快速构建方法
WO2011086610A1 (ja) * 2010-01-18 2011-07-21 富士通株式会社 構造化文書を表示するためのコンピュータプログラム、方法、および情報処理装置
US20110191676A1 (en) * 2010-01-29 2011-08-04 Microsoft Corporation Cross-Browser Interactivity Recording, Playback, and Editing
CN102339291B (zh) * 2010-07-23 2014-09-10 阿里巴巴集团控股有限公司 一种列表生成方法及设备
US8892634B2 (en) * 2010-11-12 2014-11-18 Microsoft Corporation Extensible video player selection via server-side detection of client application
JP5564442B2 (ja) * 2011-01-11 2014-07-30 日本電信電話株式会社 文章検索装置
CN102750281B (zh) * 2011-04-19 2015-09-16 腾讯科技（深圳）有限公司 一种浏览器的脚本处理方法和系统
US8959427B1 (en) * 2011-08-05 2015-02-17 Google Inc. System and method for JavaScript based HTML website layouts
CN102508887A (zh) * 2011-10-19 2012-06-20 江西省南城县网信电子有限公司 一种数字电视交互服务标记语言解析系统及方法
CN102955854B (zh) * 2012-11-06 2015-11-25 搜游网络科技(北京)有限公司 一种基于html5协议的网页展现方法及装置

Cited By (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
KR101708741B1 (ko) 2015-08-18 2017-02-21 카테노이드 주식회사 컨텐츠를 제공하는 에이전트의 인증 방법 및 이를 위한 디스플레이장치
US10210001B2 (en) 2015-11-04 2019-02-19 Observepoint, Inc. Automatic execution of objects in a user interface
WO2017136755A1 (en) * 2016-02-04 2017-08-10 Observepoint, Inc. Analyzing analytic element network traffic
US10360133B2 (en) 2016-02-04 2019-07-23 Observepoint Inc. Analyzing analytic element network traffic
US10826802B2 (en) 2016-02-09 2020-11-03 Observepoint, Inc. Managing network communication protocols
KR102620692B1 (ko) 2023-08-21 2024-01-03 주식회사 비전트리 이러닝 콘텐츠 제작을 위한 html5 자동 변환 방법

Also Published As

Publication number Publication date
WO2014071749A1 (zh) 2014-05-15
US20150286739A1 (en) 2015-10-08
CN102955854B (zh) 2015-11-25
JP2016505911A (ja) 2016-02-25
CN102955854A (zh) 2013-03-06

Similar Documents

Publication Publication Date Title
KR20150079867A (ko) Html5-프로토콜 기반 웹페이지 표시 방법 및 장치
US11216253B2 (en) Application prototyping tool
CN111552473B (zh) 一种应用程序的处理方法、装置及设备
US10325012B2 (en) Filtered stylesheets
EP3005301B1 (en) Animation editing
KR101569765B1 (ko) 중간 포맷을 이용한 swf와 html의 크로스-컴파일링
US20110167332A1 (en) System and Method for Generating Web Pages
CN110908712A (zh) 移动端跨平台的数据处理方法和设备
CN111324381B (zh) 开发系统、方法、装置、计算机设备及存储介质
KR101809457B1 (ko) 웹 문서의 편집을 지원하는 클라이언트 단말 장치 및 그 동작 방법
CN109725965A (zh) 层叠样式表维护方法、装置、计算机设备及存储介质
WO2024056100A1 (zh) 页面渲染方法、装置、设备、存储介质及计算机程序产品
CN113536179A (zh) 页面的生成方法、装置、电子设备和存储介质
CN112287255B (zh) 页面构建方法及装置、计算设备、计算机可读存储介质
CN116009863B (zh) 前端页面渲染方法、设备及存储介质
CN117055987A (zh) 网页显示方法、装置、电子设备及计算机可读存储介质
CN115659087B (zh) 页面渲染方法、设备及存储介质
CN114168875A (zh) 一种页面程序的生成方法、装置、计算机设备及存储介质
KR102311326B1 (ko) 웹 컨텐츠 출력 장치 및 방법
CN113127785A (zh) 字幕处理方法、装置、计算机设备及存储介质
CN117539491B (zh) 页面布局方法、装置、电子设备、存储介质及程序产品
CN118193723A (zh) 文本解析方法、系统、电子设备及存储介质
CN117540118A (zh) 一种骨架屏页面生成方法、装置和设备
CN117710554A (zh) 3d图形绘制方法、装置及电子设备
CN118331549A (zh) 页面渲染的方法、装置、设备以及存储介质

Legal Events

Date Code Title Description
A201 Request for examination
E902 Notification of reason for refusal