特表 2023-541186 可視化ページレンダリング方法、装置、機器及び記憶媒体

(19)【発行国】日本国特許庁(JP)

(12)【公報種別】公表特許公報(A)

(11)【公表番号】

(43)【公表日】2023-09-28

(54)【発明の名称】可視化ページレンダリング方法、装置、機器及び記憶媒体

(51)【国際特許分類】

   G06F 40/143 20200101AFI20230921BHJP

【ＦＩ】

G06F40/143

【審査請求】有

【予備審査請求】未請求

(21)【出願番号】P 2023516608

(86)(22)【出願日】2021-11-09

(85)【翻訳文提出日】2023-03-13

(86)【国際出願番号】 CN2021129470

(87)【国際公開番号】W WO2022142743

(87)【国際公開日】2022-07-07

(31)【優先権主張番号】202011634449.5

(32)【優先日】2020-12-31

(33)【優先権主張国・地域又は機関】CN

(81)【指定国・地域】

【公序良俗違反の表示】

（特許庁注：以下のものは登録商標）

１．ＳＭＡＬＬＴＡＬＫ

(71)【出願人】

【識別番号】521507084

【氏名又は名称】京▲東▼科技控股股▲フン▼有限公司

(74)【代理人】

【識別番号】100099759

【弁理士】

【氏名又は名称】青木 篤

(74)【代理人】

【識別番号】100123582

【弁理士】

【氏名又は名称】三橋 真二

(74)【代理人】

【識別番号】100092624

【弁理士】

【氏名又は名称】鶴田 準一

(74)【代理人】

【識別番号】100114018

【弁理士】

【氏名又は名称】南山 知広

(74)【代理人】

【識別番号】100153729

【弁理士】

【氏名又は名称】森本 有一

(74)【代理人】

【識別番号】100151459

【弁理士】

【氏名又は名称】中村 健一

(72)【発明者】

【氏名】王 光輝

【テーマコード（参考）】

5B109

【Ｆターム（参考）】

5B109NH01

5B109NH11

5B109NH12

(57)【要約】

本明細書は、可視化ページレンダリング方法、装置、機器及び記憶媒体を開示する。該可視化ページレンダリング方法は、ページソースデータを取得することと、前記ページソースデータのうちのカスタムテンプレートソースデータを認識することと、前記カスタムテンプレートソースデータを前記ページソースデータにおける新規作成された区分ＤＩＶタグに追加し、前記ＤＩＶタグに対応する子ノード集合を決定することと、前記子ノード集合におけるタグにより引用された外部リソースを取得し、前記外部リソースを前記ＤＩＶタグに追加し、第１の表示待ちページデータを得ることと、前記第１の表示待ちページデータに基づいてページのレンダリング表示を行うことと、を含む。
【選択図】図１

【特許請求の範囲】

【請求項1】

表示待ちページにおける複数のモジュールにそれぞれ対応する複数のハイパーテキストマークアップ言語ＨＴＭＬファイルにおけるデータを含むページソースデータを取得することと、
前記ページソースデータのうちの、外部リソースが引用されたＨＴＭＬファイルにおけるデータであるカスタムテンプレートソースデータを認識することと、
前記カスタムテンプレートソースデータを前記ページソースデータにおける新規作成された区分ＤＩＶタグに追加し、前記ＤＩＶタグに対応する子ノード集合を決定することと、
前記子ノード集合におけるタグにより引用された外部リソースを取得し、前記外部リソースを前記ＤＩＶタグに追加し、第１の表示待ちページデータを得ることと、
前記第１の表示待ちページデータに基づいてページのレンダリング表示を行うことと、を含む、
可視化ページレンダリング方法。

【請求項2】

前記した、前記ページソースデータのうちのカスタムテンプレートソースデータを認識することは、
前記複数のＨＴＭＬファイルからそれぞれテンプレート識別子及び前記テンプレート識別子に対応するファイルタイプを読み取ることと、
対応するファイルタイプが目標タイプであるテンプレート識別子をカスタムテンプレート識別子として決定し、前記カスタムテンプレート識別子に対応するＨＴＭＬファイルにおけるデータを前記カスタムテンプレートソースデータとして決定することと、を含む、
請求項１に記載の方法。

【請求項3】

前記した、前記カスタムテンプレートソースデータを前記ページソースデータにおける新規作成されたＤＩＶタグに追加し、前記ＤＩＶタグに対応する子ノード集合を決定することは、
前記ページソースデータにおいて前記ＤＩＶタグを作成することと、
前記カスタムテンプレートソースデータのルートタグ要素を前記ＤＩＶタグに追加することと、
前記ルートタグ要素に応じて前記ＤＩＶタグに対応する子ノード集合を決定することと、を含む、
請求項１に記載の方法。

【請求項4】

前記した、前記子ノード集合におけるタグにより引用された外部リソースを取得し、前記外部リソースを前記ＤＩＶタグに追加し、第１の表示待ちページデータを得ることは、
前記子ノード集合を子ノード配列に変換することと、
前記子ノード配列をトラバースしてスクリプトＳＣＲＩＰＴタグを決定することと、
サーバサイドから前記ＳＣＲＩＰＴタグにより引用された外部リソースを取得することと、
前記外部リソースを前記ＤＩＶタグに追加し、前記第１の表示待ちページデータを得ることと、を含む、
請求項１に記載の方法。

【請求項5】

前記した、前記カスタムテンプレートソースデータを前記ページソースデータにおける新規作成されたＤＩＶタグに追加することの前には、
正規マッチングにより前記カスタムテンプレートソースデータにおけるエラー単数タグを決定することと、
前記エラー単数タグに対して修正を行うことと、がさらに含まれる、
請求項１に記載の方法。

【請求項6】

前記した、前記カスタムテンプレートソースデータを前記ページソースデータにおける新規作成されたＤＩＶタグに追加することの前には、
ブラウザがドキュメントフラグメント作成方法の呼出しをサポートするか否かを決定することがさらに含まれ、
前記した、前記カスタムテンプレートソースデータを前記ページソースデータにおける新規作成されたＤＩＶタグに追加することは、
前記ブラウザが前記ドキュメントフラグメント作成方法の呼出しをサポートしないことに応答し、前記カスタムテンプレートソースデータを前記ページソースデータにおける新規作成されたＤＩＶタグに追加する操作の実行をトリガすることを含む、
請求項１に記載の方法。

【請求項7】

前記ブラウザが前記ドキュメントフラグメント作成方法の呼出しをサポートすることに応答し、前記ドキュメントフラグメント作成方法の呼出しで前記カスタムテンプレートソースデータの要素集合を取得し、前記ドキュメントフラグメント作成方法が、前記カスタムテンプレートソースデータをドキュメントフラグメントとして分析して前記ドキュメントフラグメントに基づいて前記カスタムテンプレートソースデータの要素集合を取得するために用いられることと、
前記要素集合に対してトラバースを行ってＳＣＲＩＰＴタグを決定することと、
前記ＳＣＲＩＰＴタグにより引用された外部リソースをローディングすることと、
ドキュメントパーティションを作成することと、
前記外部リソースを順次前記ドキュメントパーティションに追加することと、
前記ドキュメントパーティションを前記ページソースデータに追加して第２の表示待ちページデータを得て、前記第２の表示待ちページデータに基づいてページのレンダリング表示を行うことと、をさらに含む、
請求項６に記載の方法。

【請求項8】

表示待ちページにおける複数のモジュールにそれぞれ対応する複数のハイパーテキストマークアップ言語ＨＴＭＬファイルにおけるデータを含むページソースデータを取得するように構成される第１の取得モジュールと、
前記ページソースデータのうちの、外部リソースが引用されたＨＴＭＬファイルにおけるデータであるカスタムテンプレートソースデータを認識するように構成される認識モジュールと、
前記カスタムテンプレートソースデータを前記ページソースデータにおける新規作成された区分ＤＩＶタグに追加し、前記ＤＩＶタグに対応する子ノード集合を決定するように構成される第１の決定モジュールと、
前記子ノード集合におけるタグにより引用された外部リソースを取得し、前記外部リソースを前記ＤＩＶタグに追加し、第１の表示待ちページデータを得るように構成される第１の追加モジュールと、
前記第１の表示待ちページデータに基づいてページのレンダリング表示を行うように構成される第１の表示モジュールと、を備える、
可視化ページレンダリング装置。

【請求項9】

メモリと、プロセッサと、前記メモリに記憶されて前記プロセッサで作動可能なコンピュータプログラムとを備え、
前記プロセッサが前記プログラムを実行すると、請求項１～７のいずれか１項に記載の可視化ページレンダリング方法を実現する、
コンピュータ機器。

【請求項10】

プロセッサにより実行されると、請求項１～７のいずれか１項に記載の可視化ページレンダリング方法を実現するコンピュータプログラムが記憶された、
コンピュータ可読記憶媒体。

【発明の詳細な説明】

【技術分野】

【0001】

本願は、２０２０年１２月３１日に中国専利局に出願された、出願番号が２０２０１１６３４４４９．５である中国特許出願の優先権を主張し、該出願の全ての内容は引用により本願に組み込まれている。

【0002】

本願の実施例は、コンピュータの技術分野に関し、例えば可視化ページレンダリング方法、装置、機器及び記憶媒体に関する。

【背景技術】

【0003】

モバイルインターネットの急速な発展及びスマートフォンの全面的な普及に伴い、人々の生活方式及び消費パターンは大きく変化している。最新改訂バージョンのハイパーテキストマークアップ言語（Ｈｙｐｅｒ Ｍａｒｋｕｐ Ｌａｎｇｕａｇｅ５、ＨＴＭＬ５／Ｈ５）によりウェブページをデザインすることは、企業がブランドイメージを宣伝してターゲットグループの注目を引く重要なアプローチになる。

【発明の概要】

【0004】

本願は、カスタムテンプレートソースデータに対するレンダリング表示を可能にし、可視化ページの互換性を高めることを実現し、可視化ページの急速ローディング及びレンダリングを実現するための可視化ページレンダリング方法、装置、機器及び記憶媒体を提供する。

【0005】

本願は、
表示待ちページにおける複数のモジュールにそれぞれ対応する複数のＨＴＭＬファイルにおけるデータを含むページソースデータを取得することと、
前記ページソースデータのうちの、外部リソースが引用されたＨＴＭＬファイルにおけるデータであるカスタムテンプレートソースデータを認識することと、
前記カスタムテンプレートソースデータを前記ページソースデータにおける新規作成された区分（Ｄｉｖｉｓｉｏｎ、ＤＩＶ）タグに追加し、前記ＤＩＶタグに対応する子ノード集合を決定することと、
前記子ノード集合におけるタグにより引用された外部リソースを取得し、前記外部リソースを前記ＤＩＶタグに追加し、第１の表示待ちページデータを得ることと、
前記第１の表示待ちページデータに基づいてページのレンダリング表示を行うことと、を含む可視化ページレンダリング方法を提供する。

【0006】

本願は、
ページソースデータを取得し、そのうち、前記現在ページソースデータが、表示待ちページにおける複数のモジュールにそれぞれ対応する複数のＨＴＭＬファイルにおけるデータを含むように構成される第１の取得モジュールと、
前記ページソースデータのうちの、外部リソースが引用されたＨＴＭＬファイルにおけるデータであるカスタムテンプレートソースデータを認識するように構成される認識モジュールと、
前記カスタムテンプレートソースデータを前記ページソースデータにおける新規作成されたＤＩＶタグに追加し、前記ＤＩＶタグに対応する子ノード集合を決定するように構成される第１の決定モジュールと、
前記子ノード集合におけるタグにより引用された外部リソースを取得し、前記外部リソースを前記ＤＩＶタグに追加し、第１の表示待ちページデータを得るように構成される第１の追加モジュールと、
前記第１の表示待ちページデータに基づいてページのレンダリング表示を行うように構成される第１の表示モジュールと、を備える可視化ページレンダリング装置をさらに提供する。

【0007】

本願は、メモリと、プロセッサと、メモリに記憶されてプロセッサで作動可能なコンピュータプログラムとを備え、前記プロセッサが前記プログラムを実行すると、上記の可視化ページレンダリング方法を実現するコンピュータ機器をさらに提供する。

【0008】

本願は、プロセッサにより実行されると、上記の可視化ページレンダリング方法を実現するコンピュータプログラムが記憶されたコンピュータ可読記憶媒体をさらに提供する。

【図面の簡単な説明】

【0009】

【図1】本願の実施例１に係る可視化ページレンダリング方法のフローチャートである。

【図2a】本願の実施例２に係る可視化ページレンダリング方法のフローチャートである。

【図2b】本願の実施例２に係る他の可視化ページレンダリング方法のフローチャートである。

【図3】本願の実施例３に係る可視化ページレンダリング装置の構造模式図である。

【図4】本願の実施例４に係るコンピュータ機器の構造模式図である。

【発明を実施するための形態】

【0010】

以下、図面及び実施例を参照しながら本願を説明する。ここで説明される具体的な実施例は、本願を解釈するためのものに過ぎない。説明を容易にするために、図面には、本願に関連する部分のみが示されていてもよい。

【0011】

類似する符号及びアルファベットは、以下の図面において類似する項を表し、そのため、一旦、１つの項が１つの図面において定義されると、その後の図面においてそれについての定義及び解釈は必要とされない。同時に、本願の説明において、用語「第１」、「第２」などは、分けて説明するためのものに過ぎず、相対的な重要性を指示又は暗示するものとしては理解できない。

【0012】

関連技術において、ウェブページをデザインするときに、テンプレートは、往々にして異なるビジネスニーズの場面に適合不可で、ユーザの多様なビジネスニーズを満たすことができない。そのため、ページの構築過程においてカスタムテンプレートを追加する必要がある。しかしながら、カスタムテンプレートは、一般的に複雑であり、Ｖｕｅフロントエンドフレームワークによりページレンダリングが実現不可である。ｉｆｒａｍｅフレームワークを使用してページをレンダリングする方法にも多くの欠点が存在し、例えばウェブページのローディング速度が遅く、局所的な混乱が現れやすく、互換性が悪く、追加されたカスタムテンプレートへのレンダリングに適用されない。

【0013】

実施例１
図１は、本願の実施例１に係る可視化ページレンダリング方法のフローチャートであり、本実施例は、表示待ちページのページソースデータにカスタムテンプレートソースデータが含まれるときに、表示待ちページに対してレンダリング表示を行う場合に適用可能であり、該方法は、本願の実施例における可視化ページレンダリング装置により実行可能であり、該装置は、ソフトウェア及び／又はハードウェアの方式を採用して実現可能であり、図１に示すように、該方法は、以下のステップを含む。

【0014】

Ｓ１１０において、表示待ちページにおける複数のモジュールにそれぞれ対応する複数のＨＴＭＬファイルにおけるデータを含む現在ページソースデータを取得する。

【0015】

可視化ページは、一般的に複数のモジュールからなり、通常、各モジュールは、１つの機能を発揮し、可視化のページに対して、例えばタイトルモジュール、コンテンツテンプレート、メインメニューモジュールなどの機能パーティションを行う。各モジュールはいずれも複数のテンプレートにより構築されてなってもよい。サーバから、表示待ちページにおける複数のモジュールにそれぞれ対応する複数のＨＴＭＬファイルにおけるデータを取得する。

【0016】

ページデータはダウンロード及び伝送の過程においてエラーが発生する可能性があり、現在ページソースデータの取得の完全性及び正確性を保証するために、現在ページソースデータを取得した後に、メッセージダイジェストアルゴリズム（Ｍｅｓｓａｇｅ－Ｄｉｇｅｓｔ Ａｌｇｏｒｉｔｈｍ ５、ＭＤ５）を採用して現在ページソースデータに対してチェックを行う。ＭＤ５は、１つの、広く使用されているハッシュ関数であり、１つのファイルの唯一の指紋コードとすることができる。ＭＤ５の基本原理は、現在ページソースデータに対してハッシュ演算を実行することによりＭＤ５チェックコードを生成し、ＭＤ５チェックコードがページソースデータに付帯するＭＤ５コードと同じであると、受信された伝送データが完全で正確であることを表し、ＭＤ５チェックコードが伝送データに付帯するＭＤ５コードと異なると、現在ページソースデータを新たに取得する必要があるものである。

【0017】

一般的に、取得された現在ページソースデータは、ｅｎｃｏｄｅＵＲＩＣｏｍｐｏｎｅｎｔによりエンコードされたデータであり、ｅｎｃｏｄｅＵＲＩＣｏｍｐｏｎｅｎｔは、アルファベット、数字、「（」、「）」、「．」、「！」、「～」、「＊」、「’」、「－」及び「＿」以外の全ての文字をユニコードトランスフォーメーションフォーマット（Ｕｎｉｃｏｄｅ Ｔｒａｎｓｆｏｒｍａｔｉｏｎ Ｆｏｒｍａｔ－８ｂｉｔ、ｕｔｆ－８）のユニフォームリソースロケータ（Ｕｎｉｆｏｒｍ Ｒｅｓｏｕｒｃｅ Ｌｏｃａｔｏｒ、ＵＲＬ）にエスケープするために用いられる。そのため、さらに、ｄｅｃｏｄｅＵＲＩＣｏｍｐｏｎｅｎｔ関数を呼び出して現在ページソースデータに対してデータデコードを行う必要がある。

【0018】

Ｓ１２０において、前記現在ページソースデータのうちの、外部リソースが引用されたＨＴＭＬファイルにおけるデータであるカスタムテンプレートソースデータを認識する。

【0019】

現在ページソースデータは、少なくとも１つのカスタムテンプレートソースデータを含み、さらに、少なくとも１つの一般テンプレートソースデータを含んでもよく、そのうち、前記カスタムテンプレートソースデータは、外部リソースが引用されたＨＴＭＬファイルにおけるデータである。表示待ちページにおける複数のモジュールにそれぞれ対応する複数のＨＴＭＬファイルにおけるデータに対して、上から下への解析順序を採用して順次ローディング、レンダリングを行う。しかしながら、ブラウザレンダリングの原理に基づいて、外部リソースが引用されたＳＣＲＩＰＴタグに対してローディング、レンダリングを行うことができないため、カスタムテンプレートソースデータを認識し、カスタムテンプレートソースデータにおけるｓｒｃ属性を含むＳＣＲＩＰＴタグに対して処理を行う必要がある。

【0020】

前記現在ページソースデータのうちの、外部リソースが引用されたＨＴＭＬファイルにおけるデータであるカスタムテンプレートソースデータを認識する。そのうち、テンプレート識別子（Ｉｄｅｎｔｉｆｉｅｒ、ＩＤ）は、テンプレートの唯一の標識とすることができ、前記テンプレートＩＤは、テンプレートの制作過程においてサーバにより割り当てられる。ファイルタイプは、テンプレートのタイプを表し、例えば、「ａｕｔｏ－ｂａｎｎｅｒ」は、カルーセルテンプレートを表し、「ｓｌｉｄｅ－ｃｏｌｕｍｎ」は、スライドテンプレートを表し、「ａｎｃｈｏｒ－ｎａｖ」は、アンカリングナビゲーションテンプレートを表し、「ｃｕｓｔｏｍ－ｄｅｆ」は、カスタムテンプレートを表す。

【0021】

Ｓ１３０において、前記カスタムテンプレートソースデータを前記現在ページソースデータにおける新規作成されたＤＩＶタグに追加し、前記ＤＩＶタグに対応する子ノード集合を決定する。

【0022】

ＨＴＭＬファイルにおけるＤＩＶタグは、区分マークと呼ばれ、ＨＴＭＬにおいて＜ｄｉｖ＞と記され、１つのブロックレベル要素であり、ドキュメントにおけるパーティション又はセクションを定義するために用いられる。ＤＩＶタグは、純潔性を有し、即ちデフォルトのマージンｍａｒｇｉｎタグ及びパディングｐａｄｄｉｎｇタグを有せず、前記ｍａｒｇｉｎタグは、異なる要素間の距離を表し、前記ｐａｄｄｉｎｇタグは、要素のコンテンツと要素ボーダーとの距離を表す。そのため、カスタムテンプレートソースデータを前記現在ページソースデータにおける新規作成されたＤＩＶタグに追加することは、カスタムテンプレートソースデータの表示レイアウトの制御をより容易にする。

【0023】

前記カスタムテンプレートソースデータを前記現在ページソースデータにおける新規作成されたＤＩＶタグに追加し、即ち、前記カスタムテンプレートソースデータを＜ｄｉｖ＞と＜／ｄｉｖ＞との間に追加する。前記ＤＩＶタグにおけるカスタムテンプレートソースデータの子ノードを子ノード集合ＣｈｉｌｄＮｏｄｅｓとして決定し、前記子ノード集合は、１つの順序あるノードリストを表す。子ノード集合は、テキストノード及び要素ノードを含む。

【0024】

Ｓ１４０において、前記子ノード集合におけるタグにより引用された外部リソースを取得し、前記外部リソースを前記ＤＩＶタグに追加し、第１の表示待ちページデータを得る。

【0025】

前記子ノード集合ＣｈｉｌｄＮｏｄｅｓにおけるＳＣＲＩＰＴタグにおけるｓｒｃ属性により引用された外部リソースを取得し、前記ｓｒｃ属性は、外部スクリプトファイルのＵＲＬを規定し、外部リソースは、ｊｓファイル、即ちウェブページＪａｖａ（登録商標） Ｓｃｒｉｐｔクライアントサイドスクリプトファイルであってもよい。前記外部リソースを前記ＤＩＶタグに追加し、第１の表示待ちページデータを得る。複数の外部リソースが含まれれば、外部リソースの位置に従って上から下へ順次前記ＤＩＶタグに追加される。

【0026】

例示的に、子ノード集合ｃｈｉｌｄＮｏｄｅｓにおけるＳＣＲＩＰＴタグ内のコンテンツは、＜ｓｃｒｉｐｔ ｓｒｃ＝”ｈｔｔｐ：／／ｗｗｗ．ｅｘａｍｐｌｅ．ｃｏｍ／ｅｘａｍｐｌｅ．ｊｓ”＞＜／ｓｃｒｉｐｔ＞であってもよく、又は＜ｓｃｒｉｐｔ ｓｒｃ＝”／ｓｃｒｉｐｔｓ／ｅｘａｍｐｌｅ．ｊｓ”＞＜／ｓｃｒｉｐｔ＞であってもよい。ｅｘａｍｐｌｅ．ｊｓのコンテンツを前記ＤＩＶタグに追加すれば、第１の表示待ちページデータを得る。

【0027】

Ｓ１５０において、前記第１の表示待ちページデータに基づいてページのレンダリング表示を行う。

【0028】

前記第１の表示待ちページデータに基づいてレンダリングしてブラウザに表示させる。

【0029】

本実施例の技術案は、前記現在ページソースデータのうちのカスタムテンプレートソースデータを認識し、前記カスタムテンプレートソースデータを前記現在ページソースデータにおける新規作成されたＤＩＶタグに追加し、前記ＤＩＶタグに対応する子ノード集合を決定し、前記子ノード集合におけるタグにより引用された外部リソースを取得し、前記外部リソースを前記ＤＩＶタグに追加し、第１の表示待ちページデータを得て、前記第１の表示待ちページデータに基づいてページのレンダリング表示を行うことにより、可視化ページデザインにカスタムテンプレートを加えて、ユーザの多様なビジネスニーズを満たすことができる。

【0030】

実施例２
図２ａは、本願の実施例２に係る可視化ページレンダリング方法のフローチャートであり、本実施例２は、実施例１を基に説明する。図２ａに示すように、前記方法は、以下を含む。

【0031】

Ｓ２１０において、表示待ちページにおける複数のモジュールにそれぞれ対応する複数のＨＴＭＬファイルにおけるデータを含む現在ページソースデータを取得する。

【0032】

Ｓ２２０において、前記複数のＨＴＭＬファイルからそれぞれテンプレート識別子及び前記テンプレート識別子に対応するファイルタイプを読み取る。

【0033】

現在ページソースデータは、少なくとも１つのカスタムテンプレートソースデータを含み、さらに、少なくとも１つの一般テンプレートソースデータを含んでもよく、そのうち、前記カスタムテンプレートソースデータは、外部リソースが引用されたＨＴＭＬファイルにおけるデータである。一般テンプレートデータに対しては、関連技術における一般的なＨＴＭＬレンダリング方法を採用してレンダリング表示を行うことができるが、外部リソースが引用されたカスタムテンプレートソースデータに対しては、ブラウザによって互換性が異なるため、異なるレンダリング方法を採用して可視化ページの急速ローディング及びレンダリングを実現する必要があり、さらに、まずは、現在ページソースデータからカスタムテンプレートソースデータを認識する必要がある。

【0034】

ｄｏｃｕｍｅｎｔ．ｃｒｅａｔｅＥｌｅｍｅｎｔ（‘ＩＮＰＵＴ’）関数を採用して現在ページソースデータのＩＮＰＵＴタグを取得し、ｉｎｐｕｔ．ｉｄ及びｉｎｐｕｔ．ｔｙｐｅを採用してそれぞれテンプレート識別子ＩＤ及びテンプレートＩＤに対応するファイルタイプを取得する。

【0035】

例示的に、現在ページソースデータのＩＮＰＵＴタグは、＜ｉｎｐｕｔ ｉｄ＝“ｔｅｍｐｌａｔｅ１”ｔｙｐｅ＝“ａｕｔｏ－ｂａｎｎｅｒ”＞、＜ｉｎｐｕｔ ｉｄ＝“ｔｅｍｐｌａｔｅ２”ｔｙｐｅ＝“ｃｕｓｔｏｍ－ｄｅｆ”＞である。

【0036】

Ｓ２３０において、対応するファイルタイプが目標タイプであるテンプレート識別子をカスタムテンプレート識別子として決定し、前記カスタムテンプレート識別子に対応するＨＴＭＬファイルにおけるデータをカスタムテンプレートソースデータとして決定する。

【0037】

目標タイプは、カスタムテンプレートのタイプであり、タイプ名称は、ｃｕｓｔｏｍ－ｄｅｆとして定義され、前記テンプレート識別子に対応するファイルタイプがｃｕｓｔｏｍ－ｄｅｆであれば、前記テンプレート識別子に対応するテンプレートをカスタムテンプレートとして決定する。そのうち、カスタムテンプレートのタイプ名称は、ユーザのニーズに応じて設定可能であり、カスタムテンプレートと、他の一般テンプレート、例えばスライドテンプレート、カルーセルテンプレートなどとを区別するために用いられる。

【0038】

Ｓ２４０において、現在のブラウザがドキュメントフラグメント作成方法の呼出しをサポートするか否かを決定する。

【0039】

ブラウザの互換モードを照会することにより現在のブラウザがドキュメントフラグメント作成ｃｒｅａｔｅＣｏｎｔｅｘｔｕａｌＦｒａｇｍｅｎｔ方法の呼出しをサポートするか否かを決定する。ＩＥ１０＋バージョンのブラウザでドキュメントフラグメント作成方法の呼出しがサポートされているが、ＩＥ９バージョン又はｉＯＳ９システム及びそれ以下のバージョンのブラウザは、ドキュメントフラグメント作成ｃｒｅａｔｅＣｏｎｔｅｘｔｕａｌＦｒａｇｍｅｎｔ方法をサポートしない。現在のブラウザがドキュメントフラグメント作成方法の呼出しをサポートすれば、ステップＳ２５０～Ｓ２５５を実行し、現在のブラウザがドキュメントフラグメント作成方法の呼出しをサポートしなければ、ステップＳ２６０～Ｓ２６３を実行する。

【0040】

Ｓ２５０において、現在のブラウザがドキュメントフラグメント作成方法の呼出しをサポートすれば、前記ドキュメントフラグメント作成方法の呼出しで前記カスタムテンプレートソースデータの要素集合を取得し、そのうち、前記ドキュメントフラグメント作成方法は、前記カスタムテンプレートソースデータをドキュメントフラグメントＤｏｃｕｍｅｎｔＦｒａｇｍｅｎｔとして分析して前記ドキュメントフラグメントに基づいて前記カスタムテンプレートソースデータの要素集合を取得するために用いられる。

【0041】

前記ドキュメントフラグメント作成方法の呼出しで前記カスタムテンプレートソースデータの要素集合ＨＴＭＬＣｏｌｌｅｃｔｉｏｎを取得し、前記ＨＴＭＬＣｏｌｌｅｃｔｉｏｎには、カスタムテンプレートソースデータの全てのルートノードタグ及び要素が含まれ、ルートノードタグは、ＳＣＲＩＰＴタグ、ＬＩＮＫタグ及びＤＩＶタグを含む。

【0042】

Ｓ２５１において、前記要素集合に対してトラバースを行ってＳＣＲＩＰＴタグを決定する。

【0043】

ＨＴＭＬＣｏｌｌｅｃｔｉｏｎに対してトラバースを行ってＳＣＲＩＰＴタグ及び前記ＳＣＲＩＰＴタグの要素を決定する。

【0044】

Ｓ２５２において、前記ＳＣＲＩＰＴタグにより引用された外部リソースをローディングする。

【0045】

ｎｏｄｅ．ｏｎｌｏａｄ（）方法を使用して前記ＳＣＲＩＰＴタグのｓｒｃ属性により引用された外部リソースをローディングし、前記外部リソースは、ｊｓフォーマットを採用したカプセル化ファイルである。ｊｓファイルは互いに依存することがあり、複数のｊｓファイルは互いに依存する場合、ローディング順序があり、その場合は、キューを使用して上から下への順序に従って順次ｊｓファイルのローディングを実現する必要がある。

【0046】

Ｓ２５３において、ドキュメントパーティションを作成する。

【0047】

ｊｓファイルは、一般的にデータ量が大きく、ウェブページに大きなファイルを直接アップロードすると多くの問題に直面してしまい、一つ目は、アップロード時間が長く、途中で一旦エラーが出ればこれまでの作業が無駄になってしまい、二つ目は、サーバサイドの配置が複雑であり、超大フォームの受信及びタイムアウトの問題を考慮する必要がある。大きなファイルを小さな断片に分割してローディングしてから併合すれば、一旦アップロードが失敗すると１つの分割された断片の損失だけで、ファイル全体を改めてアップロードする必要がない。そのため、ｌｅｔ ｄｏｃＦ：ＤｏｃｕｍｅｎｔＦｒａｇｍｅｎｔ＝ｄｏｃｕｍｅｎｔ．ｃｒｅａｔｅＤｏｃｕｍｅｎｔＦｒａｇｍｅｎｔ（）関数を呼び出して少なくとも１つの新しい空白のドキュメントパーティション、即ちＤｏｃｕｍｅｎｔＦｒａｇｍｅｎｔを作成する。

【0048】

Ｓ２５４において、前記外部リソースを順次前記ドキュメントパーティションに追加する。

【0049】

前記外部リソースを順次前記ドキュメントパーティションに追加する。ドキュメント断片がドキュメントオブジェクトモデル（Ｄｏｃｕｍｅｎｔ Ｏｂｊｅｃｔ Ｍｏｄｅｌ、ＤＯＭ）ツリーではなく、メモリに存在するため、子要素をドキュメントパーティションに挿入するときにページリフローが引き起こされず、これにより、性能が最適化される。

【0050】

Ｓ２５５において、前記ドキュメントパーティションを前記現在ページソースデータに追加して第２の表示待ちページデータを得て、前記第２の表示待ちページデータに基づいてページのレンダリング表示を行う。

【0051】

前記ドキュメントパーティションにおける全ての子ノードをａｐｐｅｎｄＣｈｉｌｄにより前記現在ページソースデータに追加して第２の表示待ちページデータを得る。この操作は、各ノードがそれぞれドキュメントに挿入されるわけではなく、１つの再レンダリングの操作だけが発生し、複数回の再レンダリングの操作を回避することができる。

【0052】

Ｓ２６０において、現在のブラウザがドキュメントフラグメント作成方法の呼出しをサポートしなければ、Ｓ２６１における、前記カスタムテンプレートソースデータを前記現在ページソースデータにおける新規作成されたＤＩＶタグに追加する操作の実行をトリガする。

【0053】

現在のブラウザがドキュメントフラグメント作成方法の呼出しをサポートしなければ、前記ドキュメントフラグメント作成方法を呼び出して前記カスタムテンプレートソースデータの要素集合ＨＴＭＬＣｏｌｌｅｃｔｉｏｎを取得することができず、そのため、命令を送信して前記カスタムテンプレートソースデータを前記現在ページソースデータにおける新規作成されたＤＩＶタグに追加する操作の実行をトリガすることにより、前記カスタムテンプレートソースデータの子ノード集合の取得を実現する。

【0054】

Ｓ２６１において、前記カスタムテンプレートソースデータを前記現在ページソースデータにおける新規作成されたＤＩＶタグに追加し、前記ＤＩＶタグに対応する子ノード集合を決定する。

【0055】

好ましくは、前記した、前記カスタムテンプレートソースデータを前記現在ページソースデータにおける新規作成されたＤＩＶタグに追加し、前記ＤＩＶタグに対応する子ノード集合を決定することは、
現在ページソースデータにおいてＤＩＶタグを作成することと、前記カスタムテンプレートソースデータのルートタグ要素を前記ＤＩＶタグに追加することと、前記ルートタグ要素に応じて前記ＤＩＶタグにおける子ノード集合を決定することと、を含む。

【0056】

ｄｏｃｕｍｅｎｔ．ｃｒｅａｔｅＥｌｅｍｅｎｔ（“ｄｉｖ”）関数を採用して１つの空白のＤＩＶタグを作成し、ｉｎｎｅｒＨＴＭＬ関数を呼び出して前記カスタムテンプレートソースデータのルートタグ要素を空白のＤＩＶタグに追加し、前記カスタムテンプレートソースデータのルートタグ要素の子ノード集合ｃｈｉｌｄＮｏｄｅｓを決定する。前記子ノード集合は、テキストノード及び要素ノードを含む。

【0057】

好ましくは、前記した、前記カスタムテンプレートソースデータを前記現在ページソースデータにおける新規作成されたＤＩＶタグに追加することの前には、
正規マッチングにより前記カスタムテンプレートソースデータにおけるエラー単数タグを決定することと、前記エラー単数タグに対して修正を行うこととがさらに含まれる。

【0058】

ｈｔｍｌ、ｈｅａｄ、ｂｏｄｙなどのペアになったタグについては、カスタムテンプレートソースデータにおいて単数タグであり、その場合、ローディングが実行不可である。正規マッチング方法ｓｉｎｇｌｅＲＥ．ｔｅｓｔ（）を採用して前記カスタムテンプレートソースデータにおけるエラー単数タグを決定し、正規表現は、ｓｉｎｇｌｅＲＥ＝／＾＜（＼ｗ＋）＼ｓ＊＼／？＞（？：＜＼／＼１＞｜）＄／である。前記エラー単数タグに対応する要素のコンテンツの後に、エラー単数タグに対応する終了タグを加え、これにより、全てのタグがペアになったタグであることが保証される。

【0059】

Ｓ２６２において、前記子ノード集合におけるタグにより引用された外部リソースを取得し、前記外部リソースを前記ＤＩＶタグに追加し、第１の表示待ちページデータを得る。

【0060】

好ましくは、前記した、前記子ノード集合におけるタグにより引用された外部リソースを取得し、前記外部リソースを前記ＤＩＶタグに追加し、第１の表示待ちページデータを得ることは、
前記子ノード集合を子ノード配列に変換することと、前記子ノード配列をトラバースしてスクリプトＳＣＲＩＰＴタグを決定することと、サーバサイドから前記ＳＣＲＩＰＴタグにより引用された外部リソースを取得することと、前記外部リソースを前記ＤＩＶタグに追加し、第１の表示待ちページデータを得ることと、を含む。

【0061】

子ノード集合ｃｈｉｌｄＮｏｄｅｓがノードリストであるため、トラバース方法を使用できない。そのため、Ａｒｒａｙ．ｐｒｏｔｏｔｙｐｒ．ｓｌｉｃｅ．ｃａｌｌを呼び出して子ノード集合ｃｈｉｌｄＮｏｄｅｓを子ノード配列に変換し、さらに前記子ノード配列をトラバースすることによりスクリプトＳＣＲＩＰＴタグのｓｒｃ属性を決定することができ、例えばｆｏｒＥａｃｈ関数を採用してトラバースを実現することができる。ｇｅｔ要求によりサーバサイドから前記ＳＣＲＩＰＴタグのｓｒｃ属性により引用された外部リソースを取得し、前記外部リソースは、ｊｓにカプセル化されたファイルであってもよい。ｉｎｎｅｒＨＴＭＬを採用して前記外部リソースを空白のＤＩＶタグに追加する。複数のｊｓファイルが存在すれば、外部リソースの位置に従って上から下へ順次複数のｊｓファイルを前記ＤＩＶタグに追加し、第１の表示待ちページデータを得る。

【0062】

Ｓ２６３において、前記第１の表示待ちページデータに基づいてページのレンダリング表示を行う。

【0063】

図２ｂに示すように、本願の実施例のステップは、以下の通りである。開発者は、可視化で編集をするパーソナルコンピュータ（Ｐｅｒｓｏｎａｌ Ｃｏｍｐｕｔｅｒ、ＰＣ）端でテンプレートの開発を行って一般テンプレート及びカスタムテンプレートを得て、一般テンプレート及びカスタムテンプレートの開発は、本質的にＨＴＭＬファイルの開発であり、一般テンプレートのＨＴＭＬファイルには、外部リソースが引用されておらず、ユーザは一般テンプレートを直接使用してページを構築することができるが、カスタムテンプレートのＨＴＭＬファイルには、外部リソースが引用されており、ユーザがニーズに応じてカスタムテンプレートに対して修正を行った後にページを構築する必要がある。開発後の一般テンプレート及びカスタムテンプレートはデータエンコードが行われた後に、サーバサイドのアプリケーションプログラミングインタフェース（Ａｐｐｌｉｃａｔｉｏｎ Ｐｒｏｇｒａｍｍｉｎｇ Ｉｎｔｅｒｆａｃｅ、ＡＰＩ）によりサーバサイドに送信されて前処理及び記憶が行われる。ユーザは、可視化Ｈ５端でテンプレートにより構築されたページを表示する必要があるときに、サーバサイドから表示待ちページの一般テンプレート及びカスタムテンプレートを取得し、ＭＤ５チェック及びデータデコードを経た後に、テンプレートソースデータを上から下への解析及びレンダリングを行い、ブラウザに表示させる。一般テンプレートに対しては、一般的なレンダリング方法を採用して解析及びレンダリングを行うことができ、テンプレートタイプがカスタムテンプレートであると認識されれば、ブラウザのバージョン、即ちブラウザがドキュメントフラグメント作成ｃｒｅａｔｅＣｏｎｔｅｘｔｕａｌＦｒａｇｍｅｎｔ方法の呼出しをサポートするか否かに応じて、異なる方式を採用してテンプレートソースデータに対して解析を行う。ブラウザがドキュメントフラグメント作成ｃｒｅａｔｅＣｏｎｔｅｘｔｕａｌＦｒａｇｍｅｎｔ方法の呼出しをサポートすれば、フラグメント解析方法を採用してテンプレートソースデータに対して解析を行い、フラグメント解析方法の原理は、ｃｒｅａｔｅＣｏｎｔｅｘｔｕａｌＦｒａｇｍｅｎｔを採用してテンプレートソースデータの子ノード集合ＨＴＭＬＣｏｌｌｅｃｔｉｏｎを取得し、ＨＴＭＬＣｏｌｌｅｃｔｉｏｎをトラバースすることによりＳＣＲＩＰＴタグを決定し、ＳＣＲＩＰＴタグのＳＲＣ属性により引用された外部リソースをローディングし、ドキュメントパーティションを作成し、前記外部リソースを順次前記ドキュメントパーティションに追加し、最終的に前記ドキュメントパーティションを現在ページソースデータに追加して第２の表示待ちページデータを得て、前記第２の表示待ちページデータに基づいてページのレンダリング表示を行うものである。ブラウザがドキュメントフラグメント作成ｃｒｅａｔｅＣｏｎｔｅｘｔｕａｌＦｒａｇｍｅｎｔ方法の呼出しをサポートすれば、カスタム解析方法を採用して解析を行い、カスタム解析方法の原理は、前記カスタムテンプレートソースデータを前記現在ページソースデータにおける新規作成されたＤＩＶタグに追加し、前記ＤＩＶタグに対応する子ノード集合を決定し、前記子ノード集合におけるタグにより引用された外部リソースを取得し、前記外部リソースを前記ＤＩＶタグに追加し、第１の表示待ちページデータを得て、前記第１の表示待ちページデータに基づいてページのレンダリング表示を行うものである。

【0064】

本実施例の技術案は、前記現在ページソースデータのうちのカスタムテンプレートソースデータを認識し、前記カスタムテンプレートソースデータを前記現在ページソースデータにおける新規作成されたＤＩＶタグに追加し、前記ＤＩＶタグに対応する子ノード集合を決定し、前記子ノード集合におけるタグにより引用された外部リソースを取得し、前記外部リソースを前記ＤＩＶタグに追加し、第１の表示待ちページデータを得て、前記第１の表示待ちページデータに基づいてページのレンダリング表示を行うことにより、可視化ページデザインにカスタムテンプレートを加えて、ユーザの多様なビジネスニーズを満たすことができる。そして、ブラウザの互換性に応じてカスタムテンプレートに対して異なる方法のレンダリングを行うことにより、可視化ページの互換性を高め、可視化ページの急速ローディング及びレンダリングを実現する。

【0065】

実施例３
図３は、本願の実施例３に係る可視化ページレンダリング装置の構造模式図である。本実施例は、ＨＴＭＬ５ページでカスタムテンプレートをレンダリングする場合に適用可能であり、該装置は、ソフトウェア及び／又はハードウェアの方式を採用して実現可能であり、該装置は、可視化ページレンダリングの機能を提供する任意の機器に集積可能であり、図３に示すように、前記可視化ページレンダリングの装置は、第１の取得モジュール３１０、認識モジュール３２０、第１の決定モジュール３３０、第１の追加モジュール３４０及び第１の表示モジュール３５０を備える。

【0066】

第１の取得モジュール３１０は、表示待ちページにおける複数のモジュールにそれぞれ対応する複数のＨＴＭＬファイルにおけるデータを含む現在ページソースデータを取得するように構成され、認識モジュール３２０は、前記現在ページソースデータのうちの、外部リソースが引用されたＨＴＭＬファイルにおけるデータであるカスタムテンプレートソースデータを認識するように構成され、第１の決定モジュール３３０は、前記カスタムテンプレートソースデータを前記現在ページソースデータにおける新規作成されたＤＩＶタグに追加し、前記ＤＩＶタグに対応する子ノード集合を決定するように構成され、第１の追加モジュール３４０は、前記子ノード集合におけるタグにより引用された外部リソースを取得し、前記外部リソースを前記ＤＩＶタグに追加し、第１の表示待ちページデータを得るように構成され、第１の表示モジュール３５０は、前記第１の表示待ちページデータに基づいてページのレンダリング表示を行うように構成される。

【0067】

好ましくは、前記認識モジュール３２０は、
前記複数のＨＴＭＬファイルからそれぞれテンプレート識別子及び前記テンプレート識別子に対応するファイルタイプを読み取るように構成される第１の取得ユニットと、対応するファイルタイプが目標タイプであるテンプレート識別子をカスタムテンプレート識別子として決定し、前記カスタムテンプレート識別子に対応するＨＴＭＬファイルにおけるデータを前記カスタムテンプレートソースデータとして決定するように構成される決定ユニットと、を備える。

【0068】

好ましくは、前記第１の決定モジュール３３０は、
前記現在ページソースデータにおいてＤＩＶタグを作成するように構成される作成ユニットと、前記カスタムテンプレートソースデータのルートタグ要素を前記ＤＩＶタグに追加するように構成される第１の追加ユニットと、前記ルートタグ要素に応じて前記ＤＩＶタグにおける子ノード集合を決定するように構成される第１の決定ユニットと、を備える。

【0069】

好ましくは、前記第１の追加モジュール３４０は、
前記子ノード集合を子ノード配列に変換するように構成される変換ユニットと、前記子ノード配列をトラバースしてスクリプトＳＣＲＩＰＴタグを決定するように構成されるトラバースユニットと、サーバサイドから前記ＳＣＲＩＰＴタグにより引用された外部リソースを取得するように構成される第２の取得ユニットと、前記外部リソースを前記ＤＩＶタグに追加し、第１の表示待ちページデータを得るように構成される第２の追加ユニットと、を備える。

【0070】

好ましくは、前記装置は、
前記した、前記カスタムテンプレートソースデータを前記現在ページソースデータにおける新規作成されたＤＩＶタグに追加することの前に、正規マッチングにより前記カスタムテンプレートソースデータにおけるエラー単数タグを決定するように構成されるマッチングモジュールと、前記エラー単数タグに対して修正を行うように構成される修正モジュールと、をさらに備える。

【0071】

好ましくは、前記装置は、
前記カスタムテンプレートソースデータを前記現在ページソースデータにおける新規作成されたＤＩＶタグに追加することの前に、現在のブラウザがドキュメントフラグメント作成方法の呼出しをサポートするか否かを決定するように構成される第２の決定モジュールと、現在のブラウザがドキュメントフラグメント作成方法の呼出しをサポートしなければ、前記カスタムテンプレートソースデータを前記現在ページソースデータにおける新規作成されたＤＩＶタグに追加する操作の実行をトリガするように構成されるトリガモジュールと、をさらに備える。

【0072】

好ましくは、前記装置は、
現在のブラウザがドキュメントフラグメント作成方法の呼出しをサポートすれば、前記ドキュメントフラグメント作成方法の呼出しで前記カスタムテンプレートソースデータの要素集合を取得し、そのうち、前記ドキュメントフラグメント作成方法が、前記カスタムテンプレートソースデータをドキュメントフラグメントとして分析して前記ドキュメントフラグメントに基づいて前記カスタムテンプレートソースデータの要素集合を取得するために用いられるように構成される第２の取得モジュールと、前記要素集合に対してトラバースを行ってＳＣＲＩＰＴタグを決定するように構成される第３の決定モジュールと、前記ＳＣＲＩＰＴタグにより引用された外部リソースをローディングするように構成されるローディングモジュールと、ドキュメントパーティションを作成するように構成される作成モジュールと、前記外部リソースを順次前記ドキュメントパーティションに追加するように構成される第２の追加モジュールと、前記ドキュメントパーティションを前記現在ページソースデータに追加して第２の表示待ちページデータを得て、前記第２の表示待ちページデータに基づいてページのレンダリング表示を行うように構成される第２の表示モジュールと、をさらに備える。

【0073】

上記プロダクトは、本願の任意の実施例に係る方法を実行可能であり、方法の実行に相応する機能モジュール及び効果を備える。

【0074】

本実施例の技術案は、前記現在ページソースデータのうちのカスタムテンプレートソースデータを認識し、前記カスタムテンプレートソースデータを前記現在ページソースデータにおける新規作成されたＤＩＶタグに追加し、前記ＤＩＶタグに対応する子ノード集合を決定し、前記子ノード集合におけるタグにより引用された外部リソースを取得し、前記外部リソースを前記ＤＩＶタグに追加し、第１の表示待ちページデータを得て、前記第１の表示待ちページデータに基づいてページのレンダリング表示を行うことにより、可視化ページデザインにカスタムテンプレートを加えて、ユーザの多様なビジネスニーズを満たすことができる。そして、ブラウザの互換性に応じてカスタムテンプレートに対して異なる方法のレンダリングを行うことにより、可視化ページの互換性を高め、可視化ページの急速ローディング及びレンダリングを実現する。

【0075】

実施例４
図４は、本願の実施例４に係るコンピュータ機器の構造模式図である。図４には、本願の実施形態を実現するために適した例示的なコンピュータ機器１２のブロック図が示される。図４に示すコンピュータ機器１２は、一例に過ぎず、本願の実施例の機能及び使用範囲に如何なる制限も与えるべきではない。

【0076】

図４に示すように、コンピュータ機器１２は、汎用コンピューティング機器の形式で表現される。コンピュータ機器１２の構成要素は、１つ又は複数のプロセッサ或いは処理ユニット１６、システムメモリ２８、異なるシステム構成要素（システムメモリ２８及び処理ユニット１６を含む）を接続するバス１８を含んでもよいが、これらに限定されない。

【0077】

バス１８は、何種かのバス構造のうちの１種又は複数種を表し、メモリバス又はメモリコントローラ、周辺バス、アクセラレーテッドグラフィックスポート、プロセッサ又は複数種のバス構造のうちの任意のバス構造を使用したローカルバスを含む。例を挙げると、これらのアーキテクチャには、業界標準アーキテクチャ（Ｉｎｄｕｓｔｒｙ Ｓｔａｎｄａｒｄ Ａｒｃｈｉｔｅｃｔｕｒｅ、ＩＳＡ）バス、マイクロチャネルアーキテクチャ（ＭｉｃｒｏＣｈａｎｎｅｌ Ａｒｃｈｉｔｅｃｔｕｒｅ、ＭＣＡ）バス、拡張型ＩＳＡバス、ビデオエレクトロニクススタンダーズアソシエーション（Ｖｉｄｅｏ Ｅｌｅｃｔｒｏｎｉｃｓ Ｓｔａｎｄａｒｄｓ Ａｓｓｏｃｉａｔｉｏｎ、ＶＥＳＡ）ローカルバス及び周辺コンポーネント相互接続（Ｐｅｒｉｐｈｅｒａｌ Ｃｏｍｐｏｎｅｎｔ Ｉｎｔｅｒｃｏｎｎｅｃｔ、ＰＣＩ）バス、が含まれるが、これらに限定されない。

【0078】

コンピュータ機器１２は、複数種のコンピュータシステム可読媒体を含む。これらの媒体は、コンピュータ機器１２によりアクセス可能な任意の利用可能な媒体であってもよく、揮発性及び不揮発性の媒体、移動可能及び移動不可な媒体を含む。

【0079】

システムメモリ２８は、揮発性メモリ形式のコンピュータシステム可読媒体、例えばランダムアクセスメモリ（Ｒａｎｄｏｍ Ａｃｃｅｓｓ Ｍｅｍｏｒｙ、ＲＡＭ）３０及び／又はキャッシュ３２を含んでもよい。コンピュータ機器１２は、他の移動可能／移動不可な、揮発性／不揮発性のコンピュータシステム記憶媒体を含んでもよい。単に例を挙げると、記憶システム３４は、移動不可な、不揮発性磁気媒体（図４に示していないが、通常「ハードディスクドライブ」呼ばれる）を読み書きするように構成可能である。図４に示していないが、移動可能な不揮発性磁気ディスク（例えば「フロッピーディスク」）に対して読み書きするように構成される磁気ディスクドライブ、及び移動可能な不揮発性光ディスク（例えば、光ディスク－リードオンリーメモリ（Ｃｏｍｐａｃｔ Ｄｉｓｃ Ｒｅａｄ－Ｏｎｌｙ Ｍｅｍｏｒｙ、ＣＤ－ＲＯＭ）、ポータブルコンパクト磁気ディスクリードオンリーメモリ（Ｄｉｇｉｔａｌ Ｖｉｄｅｏ Ｄｉｓｃ－ＲＯＭ、ＤＶＤ－ＲＯＭ）又は他の光媒体）に対して読み書きするように構成される光ディスクドライブを提供することができる。これらの場合、各ドライブは、１つ又は複数のデータ媒体インタフェースによりバス１８に繋がることができる。システムメモリ２８は、少なくとも１つのプログラムプロダクトを含んでもよく、該プログラムプロダクトは１グループ（例えば少なくとも１つ）のプログラムモジュールを有し、これらのプログラムモジュールは、本願の実施例の機能を実行するように設定される。

【0080】

１グループ（少なくとも１つ）のプログラムモジュール４２を有するプログラム／実用ツール４０は、例えばシステムメモリ２８に記憶されてもよく、このようなプログラムモジュール４２は、オペレーティングシステム、１つ又は複数のアプリケーションプログラム、他のプログラムモジュール及びプログラムデータを含むが、これらに限定されず、これらの例の中のそれぞれ又はある種類の組合せに、ネットワーク環境の実現が含まれる可能性がある。プログラムモジュール４２は、通常、本願で説明される実施例における機能及び／又は方法を実行する。

【0081】

コンピュータ機器１２は、１つ又は複数の外部機器１４（例えばキーボード、ポインティング機器、ディスプレイ２４など）と通信することもでき、ユーザの該コンピュータ機器１２との対話を可能にする１つ又は複数の機器と通信することもでき、及び／又は該コンピュータ機器１２の１つ又は複数の他のコンピューティング機器との通信を可能にする任意の機器（例えばネットワークカード、モデムなど）と通信することもできる。このような通信は、入力／出力（Ｉｎｐｕｔ／Ｏｕｔｐｕｔ、Ｉ／Ｏ）インタフェース２２により行うことができる。また、本実施例におけるコンピュータ機器１２、ディスプレイ２４は、独立した個体として存在するものではなく、鏡面に埋め込まれており、ディスプレイ２４の表示面により表示が行われないときに、ディスプレイ２４の表示面と鏡面とは視覚的に一体に融合される。そして、コンピュータ機器１２はさらに、ネットワークアダプタ２０により１つ又は複数のネットワーク（例えばローカルエリアネットワーク（Ｌｏｃａｌ Ａｒｅａ Ｎｅｔｗｏｒｋ、ＬＡＮ）、ワイドエリアネットワーク（Ｗｉｄｅ Ａｒｅａ Ｎｅｔｗｏｒｋ、ＷＡＮ）及び／又は公共ネットワーク、例えばインターネット）と通信することができる。図面に示すように、ネットワークアダプタ２０は、バス１８によりコンピュータ機器１２の他のモジュールと通信する。図面に示していないが、コンピュータ機器１２と組み合わせて他のハードウェア及び／又はソフトウェアモジュールを使用することができ、マイクロコード、機器ドライブ、冗長処理ユニット、外部磁気ディスクドライブアレイ、独立冗長磁気ディスクアレイ（Ｒｅｄｕｎｄａｎｔ Ａｒｒａｙｓ ｏｆ Ｉｎｄｅｐｅｎｄｅｎｔ Ｄｉｓｋｓ、ＲＡＩＤ）システム、テープドライブ及びデータバックアップ記憶システムなどを含むが、これらに限定されないことを理解すべきである。

【0082】

処理ユニット１６は、システムメモリ２８に記憶されたプログラムを作動させることにより、複数種の機能アプリケーション及びデータ処理を実行し、例えば、表示待ちページにおける複数のモジュールにそれぞれ対応する複数のＨＴＭＬファイルにおけるデータを含む現在ページソースデータを取得し、前記現在ページソースデータのうちの、外部リソースが引用されたＨＴＭＬファイルにおけるデータであるカスタムテンプレートソースデータを認識し、前記カスタムテンプレートソースデータを前記現在ページソースデータにおける新規作成されたＤＩＶタグに追加し、前記ＤＩＶタグに対応する子ノード集合を決定し、前記子ノード集合におけるタグにより引用された外部リソースを取得し、前記外部リソースを前記ＤＩＶタグに追加し、第１の表示待ちページデータを得て、前記第１の表示待ちページデータに基づいてページのレンダリング表示を行うという本願の実施例に係る可視化ページレンダリング方法を実現する。

【0083】

実施例５
本願の実施例５は、コンピュータプログラムが記憶されたコンピュータ可読記憶媒体を提供し、該プログラムがプロセッサにより実行されると、
表示待ちページにおける複数のモジュールにそれぞれ対応する複数のＨＴＭＬファイルにおけるデータを含む現在ページソースデータを取得し、前記現在ページソースデータのうちの、外部リソースが引用されたＨＴＭＬファイルにおけるデータであるカスタムテンプレートソースデータを認識し、前記カスタムテンプレートソースデータを前記現在ページソースデータにおける新規作成されたＤＩＶタグに追加し、前記ＤＩＶタグに対応する子ノード集合を決定し、前記子ノード集合におけるタグにより引用された外部リソースを取得し、前記外部リソースを前記ＤＩＶタグに追加し、第１の表示待ちページデータを得て、前記第１の表示待ちページデータに基づいてページのレンダリング表示を行うという本願の全ての実施例に係る可視化ページレンダリング方法を実現する。

【0084】

１つ又は複数のコンピュータ可読な媒体の任意の組合せを採用することができる。コンピュータ可読媒体は、コンピュータ可読信号媒体又はコンピュータ可読記憶媒体であってもよい。コンピュータ可読記憶媒体は、例えば電気、磁気、光、電磁、赤外線、又は半導体のシステム、装置又は素子、或いは任意の以上の組合せであってもよいが、これらに限定されない。コンピュータ可読記憶媒体の例（網羅的ではないリスト）は、１つ又は複数の導線を有する電気接続、ポータブルコンピュータ磁気ディスク、ハードディスク、ＲＡＭ、ＲＯＭ、消去可能プログラマブルリードオンリーメモリ（Ｅｒａｓａｂｌｅ Ｐｒｏｇｒａｍｍａｂｌｅ Ｒｅａｄ－Ｏｎｌｙ Ｍｅｍｏｒｙ、ＥＰＲＯＭ又はフラッシュメモリ）、光ファイバ、ＣＤ－ＲＯＭ、光記憶素子、磁気記憶素子、又は上記の任意の適切な組合せを含む。本明細書において、コンピュータ可読記憶媒体は、プログラムを含む又は記憶する任意の有形媒体であってもよく、該プログラムは、命令実行システム、装置又は素子により使用され又はそれらと組み合わせて使用されることができる。

【0085】

コンピュータ可読な信号媒体は、ベースバンドで又は搬送波の一部として伝搬されるデータ信号を含んでもよく、その中にコンピュータ可読なプログラムコードが搭載されている。このように伝搬されるデータ信号は、複数種の形式を採用可能であり、電磁信号、光信号又は上記の任意の適切な組合せを含むが、これらに限定されない。コンピュータ可読な信号媒体は、コンピュータ可読記憶媒体以外の任意のコンピュータ可読媒体であってもよく、該コンピュータ可読媒体は、命令実行システム、装置又は素子により使用され又はそれらと組み合わせて使用されるためのプログラムを送信、伝搬又は伝送することができる。

【0086】

コンピュータ可読媒体に含まれるプログラムコードは、任意の適宜な媒体により伝送されてもよく、無線、電線、光ケーブル、ラジオ波（Ｒａｄｉｏ Ｆｒｅｑｕｅｎｃｙ、ＲＦ）など、又は上記の任意の適切な組合せを含むが、これらに限定されない。

【0087】

本願の操作を実行するためのコンピュータプログラムコードは、１種又は複数種のプログラム設計言語又はその組合せにより書くことができ、前記プログラム設計言語は、Ｊａｖａ（登録商標）、Ｓｍａｌｌｔａｌｋ、Ｃ＋＋などのオブジェクト指向のプログラム設計言語を含み、さらに、「Ｃ」言語又は類似するプログラム設計言語などの一般的な手続き型プログラム設計言語を含む。プログラムコードは、完全にユーザのコンピュータで実行されてもよく、部分的にユーザのコンピュータで実行されてもよく、１つの独立したソフトウェアパッケージとして実行されてもよく、一部がユーザのコンピュータで、一部がリモートコンピュータで実行されてもよく、或いは完全にリモートコンピュータ又はサーバで実行されてもよい。リモートコンピュータに関する場合、リモートコンピュータは、ＬＡＮ又はＷＡＮを含む任意の種類のネットワークを介して、ユーザコンピュータに接続されてもよく、又は外部コンピュータに接続されてもよい（例えばインターネットサービスプロバイダを利用し、インターネットを介して接続される）。

【図1】

【図2a】

【図2b】

【図3】

【図4】

【国際調査報告】