JP2023541186A - 可視化ページレンダリング方法、装置、機器及び記憶媒体 - Google Patents
可視化ページレンダリング方法、装置、機器及び記憶媒体 Download PDFInfo
- Publication number
- JP2023541186A JP2023541186A JP2023516608A JP2023516608A JP2023541186A JP 2023541186 A JP2023541186 A JP 2023541186A JP 2023516608 A JP2023516608 A JP 2023516608A JP 2023516608 A JP2023516608 A JP 2023516608A JP 2023541186 A JP2023541186 A JP 2023541186A
- Authority
- JP
- Japan
- Prior art keywords
- page
- source data
- tag
- data
- custom template
- Prior art date
- Legal status (The legal status 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 status listed.)
- Pending
Links
- 238000000034 method Methods 0.000 title claims abstract description 74
- 238000009877 rendering Methods 0.000 title claims abstract description 51
- 238000012800 visualization Methods 0.000 title claims description 15
- 238000013515 script Methods 0.000 claims description 35
- 239000012634 fragment Substances 0.000 claims description 33
- 238000005192 partition Methods 0.000 claims description 18
- 238000004590 computer program Methods 0.000 claims description 6
- 238000012937 correction Methods 0.000 claims description 4
- 238000010586 diagram Methods 0.000 abstract description 6
- 230000006870 function Effects 0.000 description 11
- 230000003287 optical effect Effects 0.000 description 8
- 238000013461 design Methods 0.000 description 6
- 238000012545 processing Methods 0.000 description 5
- 238000004458 analytical method Methods 0.000 description 4
- 238000003491 array Methods 0.000 description 3
- 238000011161 development Methods 0.000 description 3
- 230000000644 propagated effect Effects 0.000 description 3
- 230000009466 transformation Effects 0.000 description 3
- 238000004422 calculation algorithm Methods 0.000 description 2
- 230000002093 peripheral effect Effects 0.000 description 2
- 238000004873 anchoring Methods 0.000 description 1
- 238000013459 approach Methods 0.000 description 1
- 230000005540 biological transmission Effects 0.000 description 1
- 238000004891 communication Methods 0.000 description 1
- 230000000694 effects Effects 0.000 description 1
- 238000005516 engineering process Methods 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 239000013307 optical fiber Substances 0.000 description 1
- 239000004065 semiconductor Substances 0.000 description 1
- 238000012360 testing method Methods 0.000 description 1
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F40/00—Handling natural language data
- G06F40/10—Text processing
- G06F40/12—Use of codes for handling textual entities
- G06F40/14—Tree-structured documents
- G06F40/143—Markup, e.g. Standard Generalized Markup Language [SGML] or Document Type Definition [DTD]
-
- 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
-
- 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
-
- 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
-
- 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
- G06F40/00—Handling natural language data
- G06F40/10—Text processing
- G06F40/103—Formatting, i.e. changing of presentation of documents
- G06F40/106—Display of layout of documents; Previewing
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F40/00—Handling natural language data
- G06F40/10—Text processing
- G06F40/103—Formatting, i.e. changing of presentation of documents
- G06F40/117—Tagging; Marking up; Designating a block; Setting of attributes
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F40/00—Handling natural language data
- G06F40/10—Text processing
- G06F40/12—Use of codes for handling textual entities
- G06F40/131—Fragmentation of text files, e.g. creating reusable text-blocks; Linking to fragments, e.g. using XInclude; Namespaces
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F40/00—Handling natural language data
- G06F40/10—Text processing
- G06F40/166—Editing, e.g. inserting or deleting
- G06F40/186—Templates
-
- Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
- Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
- Y02D—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
- Y02D10/00—Energy efficient computing, e.g. low power processors, power management or thermal management
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Databases & Information Systems (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Data Mining & Analysis (AREA)
- Artificial Intelligence (AREA)
- Health & Medical Sciences (AREA)
- Audiology, Speech & Language Pathology (AREA)
- Computational Linguistics (AREA)
- General Health & Medical Sciences (AREA)
- Information Transfer Between Computers (AREA)
- Document Processing Apparatus (AREA)
- User Interface Of Digital Computer (AREA)
- Information Retrieval, Db Structures And Fs Structures Therefor (AREA)
Abstract
本明細書は、可視化ページレンダリング方法、装置、機器及び記憶媒体を開示する。該可視化ページレンダリング方法は、ページソースデータを取得することと、前記ページソースデータのうちのカスタムテンプレートソースデータを認識することと、前記カスタムテンプレートソースデータを前記ページソースデータにおける新規作成された区分DIVタグに追加し、前記DIVタグに対応する子ノード集合を決定することと、前記子ノード集合におけるタグにより引用された外部リソースを取得し、前記外部リソースを前記DIVタグに追加し、第1の表示待ちページデータを得ることと、前記第1の表示待ちページデータに基づいてページのレンダリング表示を行うことと、を含む。【選択図】図1
Description
本願は、2020年12月31日に中国専利局に出願された、出願番号が202011634449.5である中国特許出願の優先権を主張し、該出願の全ての内容は引用により本願に組み込まれている。
本願の実施例は、コンピュータの技術分野に関し、例えば可視化ページレンダリング方法、装置、機器及び記憶媒体に関する。
モバイルインターネットの急速な発展及びスマートフォンの全面的な普及に伴い、人々の生活方式及び消費パターンは大きく変化している。最新改訂バージョンのハイパーテキストマークアップ言語(Hyper Markup Language5、HTML5/H5)によりウェブページをデザインすることは、企業がブランドイメージを宣伝してターゲットグループの注目を引く重要なアプローチになる。
本願は、カスタムテンプレートソースデータに対するレンダリング表示を可能にし、可視化ページの互換性を高めることを実現し、可視化ページの急速ローディング及びレンダリングを実現するための可視化ページレンダリング方法、装置、機器及び記憶媒体を提供する。
本願は、
表示待ちページにおける複数のモジュールにそれぞれ対応する複数のHTMLファイルにおけるデータを含むページソースデータを取得することと、
前記ページソースデータのうちの、外部リソースが引用されたHTMLファイルにおけるデータであるカスタムテンプレートソースデータを認識することと、
前記カスタムテンプレートソースデータを前記ページソースデータにおける新規作成された区分(Division、DIV)タグに追加し、前記DIVタグに対応する子ノード集合を決定することと、
前記子ノード集合におけるタグにより引用された外部リソースを取得し、前記外部リソースを前記DIVタグに追加し、第1の表示待ちページデータを得ることと、
前記第1の表示待ちページデータに基づいてページのレンダリング表示を行うことと、を含む可視化ページレンダリング方法を提供する。
表示待ちページにおける複数のモジュールにそれぞれ対応する複数のHTMLファイルにおけるデータを含むページソースデータを取得することと、
前記ページソースデータのうちの、外部リソースが引用されたHTMLファイルにおけるデータであるカスタムテンプレートソースデータを認識することと、
前記カスタムテンプレートソースデータを前記ページソースデータにおける新規作成された区分(Division、DIV)タグに追加し、前記DIVタグに対応する子ノード集合を決定することと、
前記子ノード集合におけるタグにより引用された外部リソースを取得し、前記外部リソースを前記DIVタグに追加し、第1の表示待ちページデータを得ることと、
前記第1の表示待ちページデータに基づいてページのレンダリング表示を行うことと、を含む可視化ページレンダリング方法を提供する。
本願は、
ページソースデータを取得し、そのうち、前記現在ページソースデータが、表示待ちページにおける複数のモジュールにそれぞれ対応する複数のHTMLファイルにおけるデータを含むように構成される第1の取得モジュールと、
前記ページソースデータのうちの、外部リソースが引用されたHTMLファイルにおけるデータであるカスタムテンプレートソースデータを認識するように構成される認識モジュールと、
前記カスタムテンプレートソースデータを前記ページソースデータにおける新規作成されたDIVタグに追加し、前記DIVタグに対応する子ノード集合を決定するように構成される第1の決定モジュールと、
前記子ノード集合におけるタグにより引用された外部リソースを取得し、前記外部リソースを前記DIVタグに追加し、第1の表示待ちページデータを得るように構成される第1の追加モジュールと、
前記第1の表示待ちページデータに基づいてページのレンダリング表示を行うように構成される第1の表示モジュールと、を備える可視化ページレンダリング装置をさらに提供する。
ページソースデータを取得し、そのうち、前記現在ページソースデータが、表示待ちページにおける複数のモジュールにそれぞれ対応する複数のHTMLファイルにおけるデータを含むように構成される第1の取得モジュールと、
前記ページソースデータのうちの、外部リソースが引用されたHTMLファイルにおけるデータであるカスタムテンプレートソースデータを認識するように構成される認識モジュールと、
前記カスタムテンプレートソースデータを前記ページソースデータにおける新規作成されたDIVタグに追加し、前記DIVタグに対応する子ノード集合を決定するように構成される第1の決定モジュールと、
前記子ノード集合におけるタグにより引用された外部リソースを取得し、前記外部リソースを前記DIVタグに追加し、第1の表示待ちページデータを得るように構成される第1の追加モジュールと、
前記第1の表示待ちページデータに基づいてページのレンダリング表示を行うように構成される第1の表示モジュールと、を備える可視化ページレンダリング装置をさらに提供する。
本願は、メモリと、プロセッサと、メモリに記憶されてプロセッサで作動可能なコンピュータプログラムとを備え、前記プロセッサが前記プログラムを実行すると、上記の可視化ページレンダリング方法を実現するコンピュータ機器をさらに提供する。
本願は、プロセッサにより実行されると、上記の可視化ページレンダリング方法を実現するコンピュータプログラムが記憶されたコンピュータ可読記憶媒体をさらに提供する。
以下、図面及び実施例を参照しながら本願を説明する。ここで説明される具体的な実施例は、本願を解釈するためのものに過ぎない。説明を容易にするために、図面には、本願に関連する部分のみが示されていてもよい。
類似する符号及びアルファベットは、以下の図面において類似する項を表し、そのため、一旦、1つの項が1つの図面において定義されると、その後の図面においてそれについての定義及び解釈は必要とされない。同時に、本願の説明において、用語「第1」、「第2」などは、分けて説明するためのものに過ぎず、相対的な重要性を指示又は暗示するものとしては理解できない。
関連技術において、ウェブページをデザインするときに、テンプレートは、往々にして異なるビジネスニーズの場面に適合不可で、ユーザの多様なビジネスニーズを満たすことができない。そのため、ページの構築過程においてカスタムテンプレートを追加する必要がある。しかしながら、カスタムテンプレートは、一般的に複雑であり、Vueフロントエンドフレームワークによりページレンダリングが実現不可である。iframeフレームワークを使用してページをレンダリングする方法にも多くの欠点が存在し、例えばウェブページのローディング速度が遅く、局所的な混乱が現れやすく、互換性が悪く、追加されたカスタムテンプレートへのレンダリングに適用されない。
実施例1
図1は、本願の実施例1に係る可視化ページレンダリング方法のフローチャートであり、本実施例は、表示待ちページのページソースデータにカスタムテンプレートソースデータが含まれるときに、表示待ちページに対してレンダリング表示を行う場合に適用可能であり、該方法は、本願の実施例における可視化ページレンダリング装置により実行可能であり、該装置は、ソフトウェア及び/又はハードウェアの方式を採用して実現可能であり、図1に示すように、該方法は、以下のステップを含む。
図1は、本願の実施例1に係る可視化ページレンダリング方法のフローチャートであり、本実施例は、表示待ちページのページソースデータにカスタムテンプレートソースデータが含まれるときに、表示待ちページに対してレンダリング表示を行う場合に適用可能であり、該方法は、本願の実施例における可視化ページレンダリング装置により実行可能であり、該装置は、ソフトウェア及び/又はハードウェアの方式を採用して実現可能であり、図1に示すように、該方法は、以下のステップを含む。
S110において、表示待ちページにおける複数のモジュールにそれぞれ対応する複数のHTMLファイルにおけるデータを含む現在ページソースデータを取得する。
可視化ページは、一般的に複数のモジュールからなり、通常、各モジュールは、1つの機能を発揮し、可視化のページに対して、例えばタイトルモジュール、コンテンツテンプレート、メインメニューモジュールなどの機能パーティションを行う。各モジュールはいずれも複数のテンプレートにより構築されてなってもよい。サーバから、表示待ちページにおける複数のモジュールにそれぞれ対応する複数のHTMLファイルにおけるデータを取得する。
ページデータはダウンロード及び伝送の過程においてエラーが発生する可能性があり、現在ページソースデータの取得の完全性及び正確性を保証するために、現在ページソースデータを取得した後に、メッセージダイジェストアルゴリズム(Message-Digest Algorithm 5、MD5)を採用して現在ページソースデータに対してチェックを行う。MD5は、1つの、広く使用されているハッシュ関数であり、1つのファイルの唯一の指紋コードとすることができる。MD5の基本原理は、現在ページソースデータに対してハッシュ演算を実行することによりMD5チェックコードを生成し、MD5チェックコードがページソースデータに付帯するMD5コードと同じであると、受信された伝送データが完全で正確であることを表し、MD5チェックコードが伝送データに付帯するMD5コードと異なると、現在ページソースデータを新たに取得する必要があるものである。
一般的に、取得された現在ページソースデータは、encodeURIComponentによりエンコードされたデータであり、encodeURIComponentは、アルファベット、数字、「(」、「)」、「.」、「!」、「~」、「*」、「’」、「-」及び「_」以外の全ての文字をユニコードトランスフォーメーションフォーマット(Unicode Transformation Format-8bit、utf-8)のユニフォームリソースロケータ(Uniform Resource Locator、URL)にエスケープするために用いられる。そのため、さらに、decodeURIComponent関数を呼び出して現在ページソースデータに対してデータデコードを行う必要がある。
S120において、前記現在ページソースデータのうちの、外部リソースが引用されたHTMLファイルにおけるデータであるカスタムテンプレートソースデータを認識する。
現在ページソースデータは、少なくとも1つのカスタムテンプレートソースデータを含み、さらに、少なくとも1つの一般テンプレートソースデータを含んでもよく、そのうち、前記カスタムテンプレートソースデータは、外部リソースが引用されたHTMLファイルにおけるデータである。表示待ちページにおける複数のモジュールにそれぞれ対応する複数のHTMLファイルにおけるデータに対して、上から下への解析順序を採用して順次ローディング、レンダリングを行う。しかしながら、ブラウザレンダリングの原理に基づいて、外部リソースが引用されたSCRIPTタグに対してローディング、レンダリングを行うことができないため、カスタムテンプレートソースデータを認識し、カスタムテンプレートソースデータにおけるsrc属性を含むSCRIPTタグに対して処理を行う必要がある。
前記現在ページソースデータのうちの、外部リソースが引用されたHTMLファイルにおけるデータであるカスタムテンプレートソースデータを認識する。そのうち、テンプレート識別子(Identifier、ID)は、テンプレートの唯一の標識とすることができ、前記テンプレートIDは、テンプレートの制作過程においてサーバにより割り当てられる。ファイルタイプは、テンプレートのタイプを表し、例えば、「auto-banner」は、カルーセルテンプレートを表し、「slide-column」は、スライドテンプレートを表し、「anchor-nav」は、アンカリングナビゲーションテンプレートを表し、「custom-def」は、カスタムテンプレートを表す。
S130において、前記カスタムテンプレートソースデータを前記現在ページソースデータにおける新規作成されたDIVタグに追加し、前記DIVタグに対応する子ノード集合を決定する。
HTMLファイルにおけるDIVタグは、区分マークと呼ばれ、HTMLにおいて<div>と記され、1つのブロックレベル要素であり、ドキュメントにおけるパーティション又はセクションを定義するために用いられる。DIVタグは、純潔性を有し、即ちデフォルトのマージンmarginタグ及びパディングpaddingタグを有せず、前記marginタグは、異なる要素間の距離を表し、前記paddingタグは、要素のコンテンツと要素ボーダーとの距離を表す。そのため、カスタムテンプレートソースデータを前記現在ページソースデータにおける新規作成されたDIVタグに追加することは、カスタムテンプレートソースデータの表示レイアウトの制御をより容易にする。
前記カスタムテンプレートソースデータを前記現在ページソースデータにおける新規作成されたDIVタグに追加し、即ち、前記カスタムテンプレートソースデータを<div>と</div>との間に追加する。前記DIVタグにおけるカスタムテンプレートソースデータの子ノードを子ノード集合ChildNodesとして決定し、前記子ノード集合は、1つの順序あるノードリストを表す。子ノード集合は、テキストノード及び要素ノードを含む。
S140において、前記子ノード集合におけるタグにより引用された外部リソースを取得し、前記外部リソースを前記DIVタグに追加し、第1の表示待ちページデータを得る。
前記子ノード集合ChildNodesにおけるSCRIPTタグにおけるsrc属性により引用された外部リソースを取得し、前記src属性は、外部スクリプトファイルのURLを規定し、外部リソースは、jsファイル、即ちウェブページJava(登録商標) Scriptクライアントサイドスクリプトファイルであってもよい。前記外部リソースを前記DIVタグに追加し、第1の表示待ちページデータを得る。複数の外部リソースが含まれれば、外部リソースの位置に従って上から下へ順次前記DIVタグに追加される。
例示的に、子ノード集合childNodesにおけるSCRIPTタグ内のコンテンツは、<script src=”http://www.example.com/example.js”></script>であってもよく、又は<script src=”/scripts/example.js”></script>であってもよい。example.jsのコンテンツを前記DIVタグに追加すれば、第1の表示待ちページデータを得る。
S150において、前記第1の表示待ちページデータに基づいてページのレンダリング表示を行う。
前記第1の表示待ちページデータに基づいてレンダリングしてブラウザに表示させる。
本実施例の技術案は、前記現在ページソースデータのうちのカスタムテンプレートソースデータを認識し、前記カスタムテンプレートソースデータを前記現在ページソースデータにおける新規作成されたDIVタグに追加し、前記DIVタグに対応する子ノード集合を決定し、前記子ノード集合におけるタグにより引用された外部リソースを取得し、前記外部リソースを前記DIVタグに追加し、第1の表示待ちページデータを得て、前記第1の表示待ちページデータに基づいてページのレンダリング表示を行うことにより、可視化ページデザインにカスタムテンプレートを加えて、ユーザの多様なビジネスニーズを満たすことができる。
実施例2
図2aは、本願の実施例2に係る可視化ページレンダリング方法のフローチャートであり、本実施例2は、実施例1を基に説明する。図2aに示すように、前記方法は、以下を含む。
図2aは、本願の実施例2に係る可視化ページレンダリング方法のフローチャートであり、本実施例2は、実施例1を基に説明する。図2aに示すように、前記方法は、以下を含む。
S210において、表示待ちページにおける複数のモジュールにそれぞれ対応する複数のHTMLファイルにおけるデータを含む現在ページソースデータを取得する。
S220において、前記複数のHTMLファイルからそれぞれテンプレート識別子及び前記テンプレート識別子に対応するファイルタイプを読み取る。
現在ページソースデータは、少なくとも1つのカスタムテンプレートソースデータを含み、さらに、少なくとも1つの一般テンプレートソースデータを含んでもよく、そのうち、前記カスタムテンプレートソースデータは、外部リソースが引用されたHTMLファイルにおけるデータである。一般テンプレートデータに対しては、関連技術における一般的なHTMLレンダリング方法を採用してレンダリング表示を行うことができるが、外部リソースが引用されたカスタムテンプレートソースデータに対しては、ブラウザによって互換性が異なるため、異なるレンダリング方法を採用して可視化ページの急速ローディング及びレンダリングを実現する必要があり、さらに、まずは、現在ページソースデータからカスタムテンプレートソースデータを認識する必要がある。
document.createElement(‘INPUT’)関数を採用して現在ページソースデータのINPUTタグを取得し、input.id及びinput.typeを採用してそれぞれテンプレート識別子ID及びテンプレートIDに対応するファイルタイプを取得する。
例示的に、現在ページソースデータのINPUTタグは、<input id=“template1”type=“auto-banner”>、<input id=“template2”type=“custom-def”>である。
S230において、対応するファイルタイプが目標タイプであるテンプレート識別子をカスタムテンプレート識別子として決定し、前記カスタムテンプレート識別子に対応するHTMLファイルにおけるデータをカスタムテンプレートソースデータとして決定する。
目標タイプは、カスタムテンプレートのタイプであり、タイプ名称は、custom-defとして定義され、前記テンプレート識別子に対応するファイルタイプがcustom-defであれば、前記テンプレート識別子に対応するテンプレートをカスタムテンプレートとして決定する。そのうち、カスタムテンプレートのタイプ名称は、ユーザのニーズに応じて設定可能であり、カスタムテンプレートと、他の一般テンプレート、例えばスライドテンプレート、カルーセルテンプレートなどとを区別するために用いられる。
S240において、現在のブラウザがドキュメントフラグメント作成方法の呼出しをサポートするか否かを決定する。
ブラウザの互換モードを照会することにより現在のブラウザがドキュメントフラグメント作成createContextualFragment方法の呼出しをサポートするか否かを決定する。IE10+バージョンのブラウザでドキュメントフラグメント作成方法の呼出しがサポートされているが、IE9バージョン又はiOS9システム及びそれ以下のバージョンのブラウザは、ドキュメントフラグメント作成createContextualFragment方法をサポートしない。現在のブラウザがドキュメントフラグメント作成方法の呼出しをサポートすれば、ステップS250~S255を実行し、現在のブラウザがドキュメントフラグメント作成方法の呼出しをサポートしなければ、ステップS260~S263を実行する。
S250において、現在のブラウザがドキュメントフラグメント作成方法の呼出しをサポートすれば、前記ドキュメントフラグメント作成方法の呼出しで前記カスタムテンプレートソースデータの要素集合を取得し、そのうち、前記ドキュメントフラグメント作成方法は、前記カスタムテンプレートソースデータをドキュメントフラグメントDocumentFragmentとして分析して前記ドキュメントフラグメントに基づいて前記カスタムテンプレートソースデータの要素集合を取得するために用いられる。
前記ドキュメントフラグメント作成方法の呼出しで前記カスタムテンプレートソースデータの要素集合HTMLCollectionを取得し、前記HTMLCollectionには、カスタムテンプレートソースデータの全てのルートノードタグ及び要素が含まれ、ルートノードタグは、SCRIPTタグ、LINKタグ及びDIVタグを含む。
S251において、前記要素集合に対してトラバースを行ってSCRIPTタグを決定する。
HTMLCollectionに対してトラバースを行ってSCRIPTタグ及び前記SCRIPTタグの要素を決定する。
S252において、前記SCRIPTタグにより引用された外部リソースをローディングする。
node.onload()方法を使用して前記SCRIPTタグのsrc属性により引用された外部リソースをローディングし、前記外部リソースは、jsフォーマットを採用したカプセル化ファイルである。jsファイルは互いに依存することがあり、複数のjsファイルは互いに依存する場合、ローディング順序があり、その場合は、キューを使用して上から下への順序に従って順次jsファイルのローディングを実現する必要がある。
S253において、ドキュメントパーティションを作成する。
jsファイルは、一般的にデータ量が大きく、ウェブページに大きなファイルを直接アップロードすると多くの問題に直面してしまい、一つ目は、アップロード時間が長く、途中で一旦エラーが出ればこれまでの作業が無駄になってしまい、二つ目は、サーバサイドの配置が複雑であり、超大フォームの受信及びタイムアウトの問題を考慮する必要がある。大きなファイルを小さな断片に分割してローディングしてから併合すれば、一旦アップロードが失敗すると1つの分割された断片の損失だけで、ファイル全体を改めてアップロードする必要がない。そのため、let docF:DocumentFragment=document.createDocumentFragment()関数を呼び出して少なくとも1つの新しい空白のドキュメントパーティション、即ちDocumentFragmentを作成する。
S254において、前記外部リソースを順次前記ドキュメントパーティションに追加する。
前記外部リソースを順次前記ドキュメントパーティションに追加する。ドキュメント断片がドキュメントオブジェクトモデル(Document Object Model、DOM)ツリーではなく、メモリに存在するため、子要素をドキュメントパーティションに挿入するときにページリフローが引き起こされず、これにより、性能が最適化される。
S255において、前記ドキュメントパーティションを前記現在ページソースデータに追加して第2の表示待ちページデータを得て、前記第2の表示待ちページデータに基づいてページのレンダリング表示を行う。
前記ドキュメントパーティションにおける全ての子ノードをappendChildにより前記現在ページソースデータに追加して第2の表示待ちページデータを得る。この操作は、各ノードがそれぞれドキュメントに挿入されるわけではなく、1つの再レンダリングの操作だけが発生し、複数回の再レンダリングの操作を回避することができる。
S260において、現在のブラウザがドキュメントフラグメント作成方法の呼出しをサポートしなければ、S261における、前記カスタムテンプレートソースデータを前記現在ページソースデータにおける新規作成されたDIVタグに追加する操作の実行をトリガする。
現在のブラウザがドキュメントフラグメント作成方法の呼出しをサポートしなければ、前記ドキュメントフラグメント作成方法を呼び出して前記カスタムテンプレートソースデータの要素集合HTMLCollectionを取得することができず、そのため、命令を送信して前記カスタムテンプレートソースデータを前記現在ページソースデータにおける新規作成されたDIVタグに追加する操作の実行をトリガすることにより、前記カスタムテンプレートソースデータの子ノード集合の取得を実現する。
S261において、前記カスタムテンプレートソースデータを前記現在ページソースデータにおける新規作成されたDIVタグに追加し、前記DIVタグに対応する子ノード集合を決定する。
好ましくは、前記した、前記カスタムテンプレートソースデータを前記現在ページソースデータにおける新規作成されたDIVタグに追加し、前記DIVタグに対応する子ノード集合を決定することは、
現在ページソースデータにおいてDIVタグを作成することと、前記カスタムテンプレートソースデータのルートタグ要素を前記DIVタグに追加することと、前記ルートタグ要素に応じて前記DIVタグにおける子ノード集合を決定することと、を含む。
現在ページソースデータにおいてDIVタグを作成することと、前記カスタムテンプレートソースデータのルートタグ要素を前記DIVタグに追加することと、前記ルートタグ要素に応じて前記DIVタグにおける子ノード集合を決定することと、を含む。
document.createElement(“div”)関数を採用して1つの空白のDIVタグを作成し、innerHTML関数を呼び出して前記カスタムテンプレートソースデータのルートタグ要素を空白のDIVタグに追加し、前記カスタムテンプレートソースデータのルートタグ要素の子ノード集合childNodesを決定する。前記子ノード集合は、テキストノード及び要素ノードを含む。
好ましくは、前記した、前記カスタムテンプレートソースデータを前記現在ページソースデータにおける新規作成されたDIVタグに追加することの前には、
正規マッチングにより前記カスタムテンプレートソースデータにおけるエラー単数タグを決定することと、前記エラー単数タグに対して修正を行うこととがさらに含まれる。
正規マッチングにより前記カスタムテンプレートソースデータにおけるエラー単数タグを決定することと、前記エラー単数タグに対して修正を行うこととがさらに含まれる。
html、head、bodyなどのペアになったタグについては、カスタムテンプレートソースデータにおいて単数タグであり、その場合、ローディングが実行不可である。正規マッチング方法singleRE.test()を採用して前記カスタムテンプレートソースデータにおけるエラー単数タグを決定し、正規表現は、singleRE=/^<(\w+)\s*\/?>(?:<\/\1>|)$/である。前記エラー単数タグに対応する要素のコンテンツの後に、エラー単数タグに対応する終了タグを加え、これにより、全てのタグがペアになったタグであることが保証される。
S262において、前記子ノード集合におけるタグにより引用された外部リソースを取得し、前記外部リソースを前記DIVタグに追加し、第1の表示待ちページデータを得る。
好ましくは、前記した、前記子ノード集合におけるタグにより引用された外部リソースを取得し、前記外部リソースを前記DIVタグに追加し、第1の表示待ちページデータを得ることは、
前記子ノード集合を子ノード配列に変換することと、前記子ノード配列をトラバースしてスクリプトSCRIPTタグを決定することと、サーバサイドから前記SCRIPTタグにより引用された外部リソースを取得することと、前記外部リソースを前記DIVタグに追加し、第1の表示待ちページデータを得ることと、を含む。
前記子ノード集合を子ノード配列に変換することと、前記子ノード配列をトラバースしてスクリプトSCRIPTタグを決定することと、サーバサイドから前記SCRIPTタグにより引用された外部リソースを取得することと、前記外部リソースを前記DIVタグに追加し、第1の表示待ちページデータを得ることと、を含む。
子ノード集合childNodesがノードリストであるため、トラバース方法を使用できない。そのため、Array.prototypr.slice.callを呼び出して子ノード集合childNodesを子ノード配列に変換し、さらに前記子ノード配列をトラバースすることによりスクリプトSCRIPTタグのsrc属性を決定することができ、例えばforEach関数を採用してトラバースを実現することができる。get要求によりサーバサイドから前記SCRIPTタグのsrc属性により引用された外部リソースを取得し、前記外部リソースは、jsにカプセル化されたファイルであってもよい。innerHTMLを採用して前記外部リソースを空白のDIVタグに追加する。複数のjsファイルが存在すれば、外部リソースの位置に従って上から下へ順次複数のjsファイルを前記DIVタグに追加し、第1の表示待ちページデータを得る。
S263において、前記第1の表示待ちページデータに基づいてページのレンダリング表示を行う。
図2bに示すように、本願の実施例のステップは、以下の通りである。開発者は、可視化で編集をするパーソナルコンピュータ(Personal Computer、PC)端でテンプレートの開発を行って一般テンプレート及びカスタムテンプレートを得て、一般テンプレート及びカスタムテンプレートの開発は、本質的にHTMLファイルの開発であり、一般テンプレートのHTMLファイルには、外部リソースが引用されておらず、ユーザは一般テンプレートを直接使用してページを構築することができるが、カスタムテンプレートのHTMLファイルには、外部リソースが引用されており、ユーザがニーズに応じてカスタムテンプレートに対して修正を行った後にページを構築する必要がある。開発後の一般テンプレート及びカスタムテンプレートはデータエンコードが行われた後に、サーバサイドのアプリケーションプログラミングインタフェース(Application Programming Interface、API)によりサーバサイドに送信されて前処理及び記憶が行われる。ユーザは、可視化H5端でテンプレートにより構築されたページを表示する必要があるときに、サーバサイドから表示待ちページの一般テンプレート及びカスタムテンプレートを取得し、MD5チェック及びデータデコードを経た後に、テンプレートソースデータを上から下への解析及びレンダリングを行い、ブラウザに表示させる。一般テンプレートに対しては、一般的なレンダリング方法を採用して解析及びレンダリングを行うことができ、テンプレートタイプがカスタムテンプレートであると認識されれば、ブラウザのバージョン、即ちブラウザがドキュメントフラグメント作成createContextualFragment方法の呼出しをサポートするか否かに応じて、異なる方式を採用してテンプレートソースデータに対して解析を行う。ブラウザがドキュメントフラグメント作成createContextualFragment方法の呼出しをサポートすれば、フラグメント解析方法を採用してテンプレートソースデータに対して解析を行い、フラグメント解析方法の原理は、createContextualFragmentを採用してテンプレートソースデータの子ノード集合HTMLCollectionを取得し、HTMLCollectionをトラバースすることによりSCRIPTタグを決定し、SCRIPTタグのSRC属性により引用された外部リソースをローディングし、ドキュメントパーティションを作成し、前記外部リソースを順次前記ドキュメントパーティションに追加し、最終的に前記ドキュメントパーティションを現在ページソースデータに追加して第2の表示待ちページデータを得て、前記第2の表示待ちページデータに基づいてページのレンダリング表示を行うものである。ブラウザがドキュメントフラグメント作成createContextualFragment方法の呼出しをサポートすれば、カスタム解析方法を採用して解析を行い、カスタム解析方法の原理は、前記カスタムテンプレートソースデータを前記現在ページソースデータにおける新規作成されたDIVタグに追加し、前記DIVタグに対応する子ノード集合を決定し、前記子ノード集合におけるタグにより引用された外部リソースを取得し、前記外部リソースを前記DIVタグに追加し、第1の表示待ちページデータを得て、前記第1の表示待ちページデータに基づいてページのレンダリング表示を行うものである。
本実施例の技術案は、前記現在ページソースデータのうちのカスタムテンプレートソースデータを認識し、前記カスタムテンプレートソースデータを前記現在ページソースデータにおける新規作成されたDIVタグに追加し、前記DIVタグに対応する子ノード集合を決定し、前記子ノード集合におけるタグにより引用された外部リソースを取得し、前記外部リソースを前記DIVタグに追加し、第1の表示待ちページデータを得て、前記第1の表示待ちページデータに基づいてページのレンダリング表示を行うことにより、可視化ページデザインにカスタムテンプレートを加えて、ユーザの多様なビジネスニーズを満たすことができる。そして、ブラウザの互換性に応じてカスタムテンプレートに対して異なる方法のレンダリングを行うことにより、可視化ページの互換性を高め、可視化ページの急速ローディング及びレンダリングを実現する。
実施例3
図3は、本願の実施例3に係る可視化ページレンダリング装置の構造模式図である。本実施例は、HTML5ページでカスタムテンプレートをレンダリングする場合に適用可能であり、該装置は、ソフトウェア及び/又はハードウェアの方式を採用して実現可能であり、該装置は、可視化ページレンダリングの機能を提供する任意の機器に集積可能であり、図3に示すように、前記可視化ページレンダリングの装置は、第1の取得モジュール310、認識モジュール320、第1の決定モジュール330、第1の追加モジュール340及び第1の表示モジュール350を備える。
図3は、本願の実施例3に係る可視化ページレンダリング装置の構造模式図である。本実施例は、HTML5ページでカスタムテンプレートをレンダリングする場合に適用可能であり、該装置は、ソフトウェア及び/又はハードウェアの方式を採用して実現可能であり、該装置は、可視化ページレンダリングの機能を提供する任意の機器に集積可能であり、図3に示すように、前記可視化ページレンダリングの装置は、第1の取得モジュール310、認識モジュール320、第1の決定モジュール330、第1の追加モジュール340及び第1の表示モジュール350を備える。
第1の取得モジュール310は、表示待ちページにおける複数のモジュールにそれぞれ対応する複数のHTMLファイルにおけるデータを含む現在ページソースデータを取得するように構成され、認識モジュール320は、前記現在ページソースデータのうちの、外部リソースが引用されたHTMLファイルにおけるデータであるカスタムテンプレートソースデータを認識するように構成され、第1の決定モジュール330は、前記カスタムテンプレートソースデータを前記現在ページソースデータにおける新規作成されたDIVタグに追加し、前記DIVタグに対応する子ノード集合を決定するように構成され、第1の追加モジュール340は、前記子ノード集合におけるタグにより引用された外部リソースを取得し、前記外部リソースを前記DIVタグに追加し、第1の表示待ちページデータを得るように構成され、第1の表示モジュール350は、前記第1の表示待ちページデータに基づいてページのレンダリング表示を行うように構成される。
好ましくは、前記認識モジュール320は、
前記複数のHTMLファイルからそれぞれテンプレート識別子及び前記テンプレート識別子に対応するファイルタイプを読み取るように構成される第1の取得ユニットと、対応するファイルタイプが目標タイプであるテンプレート識別子をカスタムテンプレート識別子として決定し、前記カスタムテンプレート識別子に対応するHTMLファイルにおけるデータを前記カスタムテンプレートソースデータとして決定するように構成される決定ユニットと、を備える。
前記複数のHTMLファイルからそれぞれテンプレート識別子及び前記テンプレート識別子に対応するファイルタイプを読み取るように構成される第1の取得ユニットと、対応するファイルタイプが目標タイプであるテンプレート識別子をカスタムテンプレート識別子として決定し、前記カスタムテンプレート識別子に対応するHTMLファイルにおけるデータを前記カスタムテンプレートソースデータとして決定するように構成される決定ユニットと、を備える。
好ましくは、前記第1の決定モジュール330は、
前記現在ページソースデータにおいてDIVタグを作成するように構成される作成ユニットと、前記カスタムテンプレートソースデータのルートタグ要素を前記DIVタグに追加するように構成される第1の追加ユニットと、前記ルートタグ要素に応じて前記DIVタグにおける子ノード集合を決定するように構成される第1の決定ユニットと、を備える。
前記現在ページソースデータにおいてDIVタグを作成するように構成される作成ユニットと、前記カスタムテンプレートソースデータのルートタグ要素を前記DIVタグに追加するように構成される第1の追加ユニットと、前記ルートタグ要素に応じて前記DIVタグにおける子ノード集合を決定するように構成される第1の決定ユニットと、を備える。
好ましくは、前記第1の追加モジュール340は、
前記子ノード集合を子ノード配列に変換するように構成される変換ユニットと、前記子ノード配列をトラバースしてスクリプトSCRIPTタグを決定するように構成されるトラバースユニットと、サーバサイドから前記SCRIPTタグにより引用された外部リソースを取得するように構成される第2の取得ユニットと、前記外部リソースを前記DIVタグに追加し、第1の表示待ちページデータを得るように構成される第2の追加ユニットと、を備える。
前記子ノード集合を子ノード配列に変換するように構成される変換ユニットと、前記子ノード配列をトラバースしてスクリプトSCRIPTタグを決定するように構成されるトラバースユニットと、サーバサイドから前記SCRIPTタグにより引用された外部リソースを取得するように構成される第2の取得ユニットと、前記外部リソースを前記DIVタグに追加し、第1の表示待ちページデータを得るように構成される第2の追加ユニットと、を備える。
好ましくは、前記装置は、
前記した、前記カスタムテンプレートソースデータを前記現在ページソースデータにおける新規作成されたDIVタグに追加することの前に、正規マッチングにより前記カスタムテンプレートソースデータにおけるエラー単数タグを決定するように構成されるマッチングモジュールと、前記エラー単数タグに対して修正を行うように構成される修正モジュールと、をさらに備える。
前記した、前記カスタムテンプレートソースデータを前記現在ページソースデータにおける新規作成されたDIVタグに追加することの前に、正規マッチングにより前記カスタムテンプレートソースデータにおけるエラー単数タグを決定するように構成されるマッチングモジュールと、前記エラー単数タグに対して修正を行うように構成される修正モジュールと、をさらに備える。
好ましくは、前記装置は、
前記カスタムテンプレートソースデータを前記現在ページソースデータにおける新規作成されたDIVタグに追加することの前に、現在のブラウザがドキュメントフラグメント作成方法の呼出しをサポートするか否かを決定するように構成される第2の決定モジュールと、現在のブラウザがドキュメントフラグメント作成方法の呼出しをサポートしなければ、前記カスタムテンプレートソースデータを前記現在ページソースデータにおける新規作成されたDIVタグに追加する操作の実行をトリガするように構成されるトリガモジュールと、をさらに備える。
前記カスタムテンプレートソースデータを前記現在ページソースデータにおける新規作成されたDIVタグに追加することの前に、現在のブラウザがドキュメントフラグメント作成方法の呼出しをサポートするか否かを決定するように構成される第2の決定モジュールと、現在のブラウザがドキュメントフラグメント作成方法の呼出しをサポートしなければ、前記カスタムテンプレートソースデータを前記現在ページソースデータにおける新規作成されたDIVタグに追加する操作の実行をトリガするように構成されるトリガモジュールと、をさらに備える。
好ましくは、前記装置は、
現在のブラウザがドキュメントフラグメント作成方法の呼出しをサポートすれば、前記ドキュメントフラグメント作成方法の呼出しで前記カスタムテンプレートソースデータの要素集合を取得し、そのうち、前記ドキュメントフラグメント作成方法が、前記カスタムテンプレートソースデータをドキュメントフラグメントとして分析して前記ドキュメントフラグメントに基づいて前記カスタムテンプレートソースデータの要素集合を取得するために用いられるように構成される第2の取得モジュールと、前記要素集合に対してトラバースを行ってSCRIPTタグを決定するように構成される第3の決定モジュールと、前記SCRIPTタグにより引用された外部リソースをローディングするように構成されるローディングモジュールと、ドキュメントパーティションを作成するように構成される作成モジュールと、前記外部リソースを順次前記ドキュメントパーティションに追加するように構成される第2の追加モジュールと、前記ドキュメントパーティションを前記現在ページソースデータに追加して第2の表示待ちページデータを得て、前記第2の表示待ちページデータに基づいてページのレンダリング表示を行うように構成される第2の表示モジュールと、をさらに備える。
現在のブラウザがドキュメントフラグメント作成方法の呼出しをサポートすれば、前記ドキュメントフラグメント作成方法の呼出しで前記カスタムテンプレートソースデータの要素集合を取得し、そのうち、前記ドキュメントフラグメント作成方法が、前記カスタムテンプレートソースデータをドキュメントフラグメントとして分析して前記ドキュメントフラグメントに基づいて前記カスタムテンプレートソースデータの要素集合を取得するために用いられるように構成される第2の取得モジュールと、前記要素集合に対してトラバースを行ってSCRIPTタグを決定するように構成される第3の決定モジュールと、前記SCRIPTタグにより引用された外部リソースをローディングするように構成されるローディングモジュールと、ドキュメントパーティションを作成するように構成される作成モジュールと、前記外部リソースを順次前記ドキュメントパーティションに追加するように構成される第2の追加モジュールと、前記ドキュメントパーティションを前記現在ページソースデータに追加して第2の表示待ちページデータを得て、前記第2の表示待ちページデータに基づいてページのレンダリング表示を行うように構成される第2の表示モジュールと、をさらに備える。
上記プロダクトは、本願の任意の実施例に係る方法を実行可能であり、方法の実行に相応する機能モジュール及び効果を備える。
本実施例の技術案は、前記現在ページソースデータのうちのカスタムテンプレートソースデータを認識し、前記カスタムテンプレートソースデータを前記現在ページソースデータにおける新規作成されたDIVタグに追加し、前記DIVタグに対応する子ノード集合を決定し、前記子ノード集合におけるタグにより引用された外部リソースを取得し、前記外部リソースを前記DIVタグに追加し、第1の表示待ちページデータを得て、前記第1の表示待ちページデータに基づいてページのレンダリング表示を行うことにより、可視化ページデザインにカスタムテンプレートを加えて、ユーザの多様なビジネスニーズを満たすことができる。そして、ブラウザの互換性に応じてカスタムテンプレートに対して異なる方法のレンダリングを行うことにより、可視化ページの互換性を高め、可視化ページの急速ローディング及びレンダリングを実現する。
実施例4
図4は、本願の実施例4に係るコンピュータ機器の構造模式図である。図4には、本願の実施形態を実現するために適した例示的なコンピュータ機器12のブロック図が示される。図4に示すコンピュータ機器12は、一例に過ぎず、本願の実施例の機能及び使用範囲に如何なる制限も与えるべきではない。
図4は、本願の実施例4に係るコンピュータ機器の構造模式図である。図4には、本願の実施形態を実現するために適した例示的なコンピュータ機器12のブロック図が示される。図4に示すコンピュータ機器12は、一例に過ぎず、本願の実施例の機能及び使用範囲に如何なる制限も与えるべきではない。
図4に示すように、コンピュータ機器12は、汎用コンピューティング機器の形式で表現される。コンピュータ機器12の構成要素は、1つ又は複数のプロセッサ或いは処理ユニット16、システムメモリ28、異なるシステム構成要素(システムメモリ28及び処理ユニット16を含む)を接続するバス18を含んでもよいが、これらに限定されない。
バス18は、何種かのバス構造のうちの1種又は複数種を表し、メモリバス又はメモリコントローラ、周辺バス、アクセラレーテッドグラフィックスポート、プロセッサ又は複数種のバス構造のうちの任意のバス構造を使用したローカルバスを含む。例を挙げると、これらのアーキテクチャには、業界標準アーキテクチャ(Industry Standard Architecture、ISA)バス、マイクロチャネルアーキテクチャ(MicroChannel Architecture、MCA)バス、拡張型ISAバス、ビデオエレクトロニクススタンダーズアソシエーション(Video Electronics Standards Association、VESA)ローカルバス及び周辺コンポーネント相互接続(Peripheral Component Interconnect、PCI)バス、が含まれるが、これらに限定されない。
コンピュータ機器12は、複数種のコンピュータシステム可読媒体を含む。これらの媒体は、コンピュータ機器12によりアクセス可能な任意の利用可能な媒体であってもよく、揮発性及び不揮発性の媒体、移動可能及び移動不可な媒体を含む。
システムメモリ28は、揮発性メモリ形式のコンピュータシステム可読媒体、例えばランダムアクセスメモリ(Random Access Memory、RAM)30及び/又はキャッシュ32を含んでもよい。コンピュータ機器12は、他の移動可能/移動不可な、揮発性/不揮発性のコンピュータシステム記憶媒体を含んでもよい。単に例を挙げると、記憶システム34は、移動不可な、不揮発性磁気媒体(図4に示していないが、通常「ハードディスクドライブ」呼ばれる)を読み書きするように構成可能である。図4に示していないが、移動可能な不揮発性磁気ディスク(例えば「フロッピーディスク」)に対して読み書きするように構成される磁気ディスクドライブ、及び移動可能な不揮発性光ディスク(例えば、光ディスク-リードオンリーメモリ(Compact Disc Read-Only Memory、CD-ROM)、ポータブルコンパクト磁気ディスクリードオンリーメモリ(Digital Video Disc-ROM、DVD-ROM)又は他の光媒体)に対して読み書きするように構成される光ディスクドライブを提供することができる。これらの場合、各ドライブは、1つ又は複数のデータ媒体インタフェースによりバス18に繋がることができる。システムメモリ28は、少なくとも1つのプログラムプロダクトを含んでもよく、該プログラムプロダクトは1グループ(例えば少なくとも1つ)のプログラムモジュールを有し、これらのプログラムモジュールは、本願の実施例の機能を実行するように設定される。
1グループ(少なくとも1つ)のプログラムモジュール42を有するプログラム/実用ツール40は、例えばシステムメモリ28に記憶されてもよく、このようなプログラムモジュール42は、オペレーティングシステム、1つ又は複数のアプリケーションプログラム、他のプログラムモジュール及びプログラムデータを含むが、これらに限定されず、これらの例の中のそれぞれ又はある種類の組合せに、ネットワーク環境の実現が含まれる可能性がある。プログラムモジュール42は、通常、本願で説明される実施例における機能及び/又は方法を実行する。
コンピュータ機器12は、1つ又は複数の外部機器14(例えばキーボード、ポインティング機器、ディスプレイ24など)と通信することもでき、ユーザの該コンピュータ機器12との対話を可能にする1つ又は複数の機器と通信することもでき、及び/又は該コンピュータ機器12の1つ又は複数の他のコンピューティング機器との通信を可能にする任意の機器(例えばネットワークカード、モデムなど)と通信することもできる。このような通信は、入力/出力(Input/Output、I/O)インタフェース22により行うことができる。また、本実施例におけるコンピュータ機器12、ディスプレイ24は、独立した個体として存在するものではなく、鏡面に埋め込まれており、ディスプレイ24の表示面により表示が行われないときに、ディスプレイ24の表示面と鏡面とは視覚的に一体に融合される。そして、コンピュータ機器12はさらに、ネットワークアダプタ20により1つ又は複数のネットワーク(例えばローカルエリアネットワーク(Local Area Network、LAN)、ワイドエリアネットワーク(Wide Area Network、WAN)及び/又は公共ネットワーク、例えばインターネット)と通信することができる。図面に示すように、ネットワークアダプタ20は、バス18によりコンピュータ機器12の他のモジュールと通信する。図面に示していないが、コンピュータ機器12と組み合わせて他のハードウェア及び/又はソフトウェアモジュールを使用することができ、マイクロコード、機器ドライブ、冗長処理ユニット、外部磁気ディスクドライブアレイ、独立冗長磁気ディスクアレイ(Redundant Arrays of Independent Disks、RAID)システム、テープドライブ及びデータバックアップ記憶システムなどを含むが、これらに限定されないことを理解すべきである。
処理ユニット16は、システムメモリ28に記憶されたプログラムを作動させることにより、複数種の機能アプリケーション及びデータ処理を実行し、例えば、表示待ちページにおける複数のモジュールにそれぞれ対応する複数のHTMLファイルにおけるデータを含む現在ページソースデータを取得し、前記現在ページソースデータのうちの、外部リソースが引用されたHTMLファイルにおけるデータであるカスタムテンプレートソースデータを認識し、前記カスタムテンプレートソースデータを前記現在ページソースデータにおける新規作成されたDIVタグに追加し、前記DIVタグに対応する子ノード集合を決定し、前記子ノード集合におけるタグにより引用された外部リソースを取得し、前記外部リソースを前記DIVタグに追加し、第1の表示待ちページデータを得て、前記第1の表示待ちページデータに基づいてページのレンダリング表示を行うという本願の実施例に係る可視化ページレンダリング方法を実現する。
実施例5
本願の実施例5は、コンピュータプログラムが記憶されたコンピュータ可読記憶媒体を提供し、該プログラムがプロセッサにより実行されると、
表示待ちページにおける複数のモジュールにそれぞれ対応する複数のHTMLファイルにおけるデータを含む現在ページソースデータを取得し、前記現在ページソースデータのうちの、外部リソースが引用されたHTMLファイルにおけるデータであるカスタムテンプレートソースデータを認識し、前記カスタムテンプレートソースデータを前記現在ページソースデータにおける新規作成されたDIVタグに追加し、前記DIVタグに対応する子ノード集合を決定し、前記子ノード集合におけるタグにより引用された外部リソースを取得し、前記外部リソースを前記DIVタグに追加し、第1の表示待ちページデータを得て、前記第1の表示待ちページデータに基づいてページのレンダリング表示を行うという本願の全ての実施例に係る可視化ページレンダリング方法を実現する。
本願の実施例5は、コンピュータプログラムが記憶されたコンピュータ可読記憶媒体を提供し、該プログラムがプロセッサにより実行されると、
表示待ちページにおける複数のモジュールにそれぞれ対応する複数のHTMLファイルにおけるデータを含む現在ページソースデータを取得し、前記現在ページソースデータのうちの、外部リソースが引用されたHTMLファイルにおけるデータであるカスタムテンプレートソースデータを認識し、前記カスタムテンプレートソースデータを前記現在ページソースデータにおける新規作成されたDIVタグに追加し、前記DIVタグに対応する子ノード集合を決定し、前記子ノード集合におけるタグにより引用された外部リソースを取得し、前記外部リソースを前記DIVタグに追加し、第1の表示待ちページデータを得て、前記第1の表示待ちページデータに基づいてページのレンダリング表示を行うという本願の全ての実施例に係る可視化ページレンダリング方法を実現する。
1つ又は複数のコンピュータ可読な媒体の任意の組合せを採用することができる。コンピュータ可読媒体は、コンピュータ可読信号媒体又はコンピュータ可読記憶媒体であってもよい。コンピュータ可読記憶媒体は、例えば電気、磁気、光、電磁、赤外線、又は半導体のシステム、装置又は素子、或いは任意の以上の組合せであってもよいが、これらに限定されない。コンピュータ可読記憶媒体の例(網羅的ではないリスト)は、1つ又は複数の導線を有する電気接続、ポータブルコンピュータ磁気ディスク、ハードディスク、RAM、ROM、消去可能プログラマブルリードオンリーメモリ(Erasable Programmable Read-Only Memory、EPROM又はフラッシュメモリ)、光ファイバ、CD-ROM、光記憶素子、磁気記憶素子、又は上記の任意の適切な組合せを含む。本明細書において、コンピュータ可読記憶媒体は、プログラムを含む又は記憶する任意の有形媒体であってもよく、該プログラムは、命令実行システム、装置又は素子により使用され又はそれらと組み合わせて使用されることができる。
コンピュータ可読な信号媒体は、ベースバンドで又は搬送波の一部として伝搬されるデータ信号を含んでもよく、その中にコンピュータ可読なプログラムコードが搭載されている。このように伝搬されるデータ信号は、複数種の形式を採用可能であり、電磁信号、光信号又は上記の任意の適切な組合せを含むが、これらに限定されない。コンピュータ可読な信号媒体は、コンピュータ可読記憶媒体以外の任意のコンピュータ可読媒体であってもよく、該コンピュータ可読媒体は、命令実行システム、装置又は素子により使用され又はそれらと組み合わせて使用されるためのプログラムを送信、伝搬又は伝送することができる。
コンピュータ可読媒体に含まれるプログラムコードは、任意の適宜な媒体により伝送されてもよく、無線、電線、光ケーブル、ラジオ波(Radio Frequency、RF)など、又は上記の任意の適切な組合せを含むが、これらに限定されない。
本願の操作を実行するためのコンピュータプログラムコードは、1種又は複数種のプログラム設計言語又はその組合せにより書くことができ、前記プログラム設計言語は、Java(登録商標)、Smalltalk、C++などのオブジェクト指向のプログラム設計言語を含み、さらに、「C」言語又は類似するプログラム設計言語などの一般的な手続き型プログラム設計言語を含む。プログラムコードは、完全にユーザのコンピュータで実行されてもよく、部分的にユーザのコンピュータで実行されてもよく、1つの独立したソフトウェアパッケージとして実行されてもよく、一部がユーザのコンピュータで、一部がリモートコンピュータで実行されてもよく、或いは完全にリモートコンピュータ又はサーバで実行されてもよい。リモートコンピュータに関する場合、リモートコンピュータは、LAN又はWANを含む任意の種類のネットワークを介して、ユーザコンピュータに接続されてもよく、又は外部コンピュータに接続されてもよい(例えばインターネットサービスプロバイダを利用し、インターネットを介して接続される)。
Claims (10)
- 表示待ちページにおける複数のモジュールにそれぞれ対応する複数のハイパーテキストマークアップ言語HTMLファイルにおけるデータを含むページソースデータを取得することと、
前記ページソースデータのうちの、外部リソースが引用されたHTMLファイルにおけるデータであるカスタムテンプレートソースデータを認識することと、
前記カスタムテンプレートソースデータを前記ページソースデータにおける新規作成された区分DIVタグに追加し、前記DIVタグに対応する子ノード集合を決定することと、
前記子ノード集合におけるタグにより引用された外部リソースを取得し、前記外部リソースを前記DIVタグに追加し、第1の表示待ちページデータを得ることと、
前記第1の表示待ちページデータに基づいてページのレンダリング表示を行うことと、を含む、
可視化ページレンダリング方法。 - 前記した、前記ページソースデータのうちのカスタムテンプレートソースデータを認識することは、
前記複数のHTMLファイルからそれぞれテンプレート識別子及び前記テンプレート識別子に対応するファイルタイプを読み取ることと、
対応するファイルタイプが目標タイプであるテンプレート識別子をカスタムテンプレート識別子として決定し、前記カスタムテンプレート識別子に対応するHTMLファイルにおけるデータを前記カスタムテンプレートソースデータとして決定することと、を含む、
請求項1に記載の方法。 - 前記した、前記カスタムテンプレートソースデータを前記ページソースデータにおける新規作成されたDIVタグに追加し、前記DIVタグに対応する子ノード集合を決定することは、
前記ページソースデータにおいて前記DIVタグを作成することと、
前記カスタムテンプレートソースデータのルートタグ要素を前記DIVタグに追加することと、
前記ルートタグ要素に応じて前記DIVタグに対応する子ノード集合を決定することと、を含む、
請求項1に記載の方法。 - 前記した、前記子ノード集合におけるタグにより引用された外部リソースを取得し、前記外部リソースを前記DIVタグに追加し、第1の表示待ちページデータを得ることは、
前記子ノード集合を子ノード配列に変換することと、
前記子ノード配列をトラバースしてスクリプトSCRIPTタグを決定することと、
サーバサイドから前記SCRIPTタグにより引用された外部リソースを取得することと、
前記外部リソースを前記DIVタグに追加し、前記第1の表示待ちページデータを得ることと、を含む、
請求項1に記載の方法。 - 前記した、前記カスタムテンプレートソースデータを前記ページソースデータにおける新規作成されたDIVタグに追加することの前には、
正規マッチングにより前記カスタムテンプレートソースデータにおけるエラー単数タグを決定することと、
前記エラー単数タグに対して修正を行うことと、がさらに含まれる、
請求項1に記載の方法。 - 前記した、前記カスタムテンプレートソースデータを前記ページソースデータにおける新規作成されたDIVタグに追加することの前には、
ブラウザがドキュメントフラグメント作成方法の呼出しをサポートするか否かを決定することがさらに含まれ、
前記した、前記カスタムテンプレートソースデータを前記ページソースデータにおける新規作成されたDIVタグに追加することは、
前記ブラウザが前記ドキュメントフラグメント作成方法の呼出しをサポートしないことに応答し、前記カスタムテンプレートソースデータを前記ページソースデータにおける新規作成されたDIVタグに追加する操作の実行をトリガすることを含む、
請求項1に記載の方法。 - 前記ブラウザが前記ドキュメントフラグメント作成方法の呼出しをサポートすることに応答し、前記ドキュメントフラグメント作成方法の呼出しで前記カスタムテンプレートソースデータの要素集合を取得し、前記ドキュメントフラグメント作成方法が、前記カスタムテンプレートソースデータをドキュメントフラグメントとして分析して前記ドキュメントフラグメントに基づいて前記カスタムテンプレートソースデータの要素集合を取得するために用いられることと、
前記要素集合に対してトラバースを行ってSCRIPTタグを決定することと、
前記SCRIPTタグにより引用された外部リソースをローディングすることと、
ドキュメントパーティションを作成することと、
前記外部リソースを順次前記ドキュメントパーティションに追加することと、
前記ドキュメントパーティションを前記ページソースデータに追加して第2の表示待ちページデータを得て、前記第2の表示待ちページデータに基づいてページのレンダリング表示を行うことと、をさらに含む、
請求項6に記載の方法。 - 表示待ちページにおける複数のモジュールにそれぞれ対応する複数のハイパーテキストマークアップ言語HTMLファイルにおけるデータを含むページソースデータを取得するように構成される第1の取得モジュールと、
前記ページソースデータのうちの、外部リソースが引用されたHTMLファイルにおけるデータであるカスタムテンプレートソースデータを認識するように構成される認識モジュールと、
前記カスタムテンプレートソースデータを前記ページソースデータにおける新規作成された区分DIVタグに追加し、前記DIVタグに対応する子ノード集合を決定するように構成される第1の決定モジュールと、
前記子ノード集合におけるタグにより引用された外部リソースを取得し、前記外部リソースを前記DIVタグに追加し、第1の表示待ちページデータを得るように構成される第1の追加モジュールと、
前記第1の表示待ちページデータに基づいてページのレンダリング表示を行うように構成される第1の表示モジュールと、を備える、
可視化ページレンダリング装置。 - メモリと、プロセッサと、前記メモリに記憶されて前記プロセッサで作動可能なコンピュータプログラムとを備え、
前記プロセッサが前記プログラムを実行すると、請求項1~7のいずれか1項に記載の可視化ページレンダリング方法を実現する、
コンピュータ機器。 - プロセッサにより実行されると、請求項1~7のいずれか1項に記載の可視化ページレンダリング方法を実現するコンピュータプログラムが記憶された、
コンピュータ可読記憶媒体。
Applications Claiming Priority (3)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202011634449.5 | 2020-12-31 | ||
CN202011634449.5A CN113158101B (zh) | 2020-12-31 | 2020-12-31 | 一种可视化页面渲染方法、装置、设备及存储介质 |
PCT/CN2021/129470 WO2022142743A1 (zh) | 2020-12-31 | 2021-11-09 | 可视化页面渲染方法、装置、设备及存储介质 |
Publications (1)
Publication Number | Publication Date |
---|---|
JP2023541186A true JP2023541186A (ja) | 2023-09-28 |
Family
ID=76878580
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
JP2023516608A Pending JP2023541186A (ja) | 2020-12-31 | 2021-11-09 | 可視化ページレンダリング方法、装置、機器及び記憶媒体 |
Country Status (4)
Country | Link |
---|---|
US (1) | US20230419016A1 (ja) |
JP (1) | JP2023541186A (ja) |
CN (1) | CN113158101B (ja) |
WO (1) | WO2022142743A1 (ja) |
Families Citing this family (5)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN113158101B (zh) * | 2020-12-31 | 2023-09-05 | 京东科技控股股份有限公司 | 一种可视化页面渲染方法、装置、设备及存储介质 |
CN114419197B (zh) * | 2021-12-15 | 2023-03-24 | 北京力控元通科技有限公司 | 一种基于svg的功能定义系统、方法及计算机设备 |
CN115586896B (zh) * | 2022-09-29 | 2023-08-04 | 通号智慧城市研究设计院有限公司 | 基于模板引擎的页面项目开发方法、设备及存储介质 |
CN115392887B (zh) * | 2022-10-31 | 2023-04-18 | 江西省地质局地理信息工程大队 | 自然资源一体化平台构建方法、装置 |
CN117331557B (zh) * | 2023-10-24 | 2024-05-14 | 北京饼干科技有限公司 | 一种表单渲染方法、装置、介质及设备 |
Family Cites Families (9)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
US6553393B1 (en) * | 1999-04-26 | 2003-04-22 | International Business Machines Coporation | Method for prefetching external resources to embedded objects in a markup language data stream |
KR101062215B1 (ko) * | 2009-03-24 | 2011-09-06 | 엠어트랙션 주식회사 | 웹 서비스 시스템 및 하이퍼 텍스트 마크업 언어로 제작된 웹페이지에 다양한 형식의 서브 웹페이지를 하이퍼 링크시키는 방법 |
US20160012147A1 (en) * | 2014-07-10 | 2016-01-14 | MyMojo Corporation | Asynchronous Initialization of Document Object Model (DOM) Modules |
US20160012023A1 (en) * | 2014-07-10 | 2016-01-14 | MyMojo Corporation | Self-Referencing of Running Script Elements in Asynchronously Loaded DOM Modules |
CN106339226B (zh) * | 2016-08-26 | 2019-10-25 | 南威软件股份有限公司 | 一种网页页面的展示方法和页面展示装置 |
CN108279903A (zh) * | 2018-02-24 | 2018-07-13 | 北京车和家信息技术有限公司 | 页面展示的方法及装置 |
CN109101300B (zh) * | 2018-06-14 | 2020-06-02 | 腾讯科技(深圳)有限公司 | 一种页面渲染方法、装置及终端 |
US10915598B2 (en) * | 2019-03-29 | 2021-02-09 | Microsoft Technology Licensing, Llc | Generating HTML content to cache based on a member identifier and a template when there is no cached HTML content associated with a campaign and serving the cached HTML content |
CN113158101B (zh) * | 2020-12-31 | 2023-09-05 | 京东科技控股股份有限公司 | 一种可视化页面渲染方法、装置、设备及存储介质 |
-
2020
- 2020-12-31 CN CN202011634449.5A patent/CN113158101B/zh active Active
-
2021
- 2021-11-09 JP JP2023516608A patent/JP2023541186A/ja active Pending
- 2021-11-09 WO PCT/CN2021/129470 patent/WO2022142743A1/zh active Application Filing
- 2021-11-09 US US18/038,054 patent/US20230419016A1/en active Pending
Also Published As
Publication number | Publication date |
---|---|
CN113158101A (zh) | 2021-07-23 |
WO2022142743A1 (zh) | 2022-07-07 |
CN113158101B (zh) | 2023-09-05 |
US20230419016A1 (en) | 2023-12-28 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
JP2023541186A (ja) | 可視化ページレンダリング方法、装置、機器及び記憶媒体 | |
CN109522018B (zh) | 页面处理方法、装置及存储介质 | |
US9355081B2 (en) | Transforming HTML forms into mobile native forms | |
US8910115B2 (en) | Systems and methods for application development | |
US8572494B2 (en) | Framework for development and customization of web services deployment descriptors | |
US9940744B2 (en) | Remote font management | |
FI118311B (fi) | Menetelmä, tietojenkäsittelylaite, tietokoneohjelmatuote ja järjestely elektronisen datan prosessointiin | |
US11783114B2 (en) | Techniques for view capture and storage for mobile applications | |
US9967370B2 (en) | OData enabled mobile software applications | |
CN109873735B (zh) | H5页面的性能测试方法、装置和计算机设备 | |
CN111736840A (zh) | 小程序应用的编译方法、运行方法、存储介质及电子设备 | |
US20130124969A1 (en) | Xml editor within a wysiwyg application | |
TWI769632B (zh) | 資料處理方法及處理器、電子設備及電腦可讀儲存媒體 | |
CN114153459A (zh) | 接口文档生成方法及装置 | |
CN113495730A (zh) | 资源包的生成及解析方法和装置 | |
CN111984262A (zh) | 微信层叠样式表文件的处理方法、装置、设备及存储介质 | |
CN111078228A (zh) | 网页到小程序的转换方法、装置、服务器及存储介质 | |
JP5039946B2 (ja) | クライアント装置およびサーバ装置の間の通信を中継する技術 | |
CN113419711A (zh) | 页面引导方法、装置、电子设备及存储介质 | |
US20040205587A1 (en) | System and method for enumerating arbitrary hyperlinked structures in which links may be dynamically calculable | |
CN111783401A (zh) | 字符串处理方法及装置、计算机存储介质、电子设备 | |
CN109358943B (zh) | 页面配置方法及装置、电子设备、存储介质 | |
CN111539200B (zh) | 一种生成富文本的方法、装置、介质和电子设备 | |
US10809986B2 (en) | System and method for dynamic translation code optimization | |
US10102122B2 (en) | Personal computing device for editing mainframe data |
Legal Events
Date | Code | Title | Description |
---|---|---|---|
A621 | Written request for application examination |
Free format text: JAPANESE INTERMEDIATE CODE: A621 Effective date: 20230313 |
|
A977 | Report on retrieval |
Free format text: JAPANESE INTERMEDIATE CODE: A971007 Effective date: 20240508 |