WO2022142743A1 - 可视化页面渲染方法、装置、设备及存储介质 - Google Patents
可视化页面渲染方法、装置、设备及存储介质 Download PDFInfo
- Publication number
- WO2022142743A1 WO2022142743A1 PCT/CN2021/129470 CN2021129470W WO2022142743A1 WO 2022142743 A1 WO2022142743 A1 WO 2022142743A1 CN 2021129470 W CN2021129470 W CN 2021129470W WO 2022142743 A1 WO2022142743 A1 WO 2022142743A1
- Authority
- WO
- WIPO (PCT)
- Prior art keywords
- source data
- page
- data
- tag
- displayed
- Prior art date
Links
- 238000000034 method Methods 0.000 title claims abstract description 73
- 238000009877 rendering Methods 0.000 title claims abstract description 47
- 239000012634 fragment Substances 0.000 claims description 35
- 238000013515 script Methods 0.000 claims description 35
- 230000000007 visual effect Effects 0.000 claims description 32
- 238000005192 partition Methods 0.000 claims description 16
- 238000004590 computer program Methods 0.000 claims description 6
- 238000012800 visualization Methods 0.000 claims description 3
- 230000001960 triggered effect Effects 0.000 claims description 2
- 230000004044 response Effects 0.000 claims 2
- 230000006870 function Effects 0.000 description 12
- 230000003287 optical effect Effects 0.000 description 6
- 238000010586 diagram Methods 0.000 description 5
- 238000012545 processing Methods 0.000 description 5
- 238000011161 development Methods 0.000 description 4
- 238000003491 array Methods 0.000 description 3
- 238000013461 design Methods 0.000 description 3
- 238000004422 calculation algorithm Methods 0.000 description 2
- 239000013307 optical fiber Substances 0.000 description 2
- 230000002093 peripheral effect Effects 0.000 description 2
- 230000000644 propagated effect Effects 0.000 description 2
- 230000009466 transformation Effects 0.000 description 2
- 230000001133 acceleration Effects 0.000 description 1
- 230000005540 biological transmission Effects 0.000 description 1
- 238000006243 chemical reaction Methods 0.000 description 1
- 238000004891 communication Methods 0.000 description 1
- 230000001419 dependent effect Effects 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
- 238000007781 pre-processing Methods 0.000 description 1
- 239000004065 semiconductor Substances 0.000 description 1
- 238000012360 testing method Methods 0.000 description 1
Images
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
Definitions
- the embodiments of the present application relate to the field of computer technologies, for example, to a visual page rendering method, apparatus, device, and storage medium.
- HTML5/H5 Hypertext Markup Language
- the present application provides a visual page rendering method, device, device and storage medium, so as to render and display custom template source data, improve the compatibility of the visual page, and realize fast loading and rendering of the visual page.
- the present application provides a visual page rendering method, including:
- the page source data includes data in multiple HTML files corresponding to multiple modules in the page to be displayed;
- custom template source data is data in an HTML file that references external resources
- the page is rendered and displayed based on the first to-be-displayed page data.
- the present application also provides a visual page rendering device, which includes:
- the first obtaining module is configured to obtain page source data; wherein, the current page source data includes data in a plurality of HTML files corresponding to a plurality of modules in the page to be displayed;
- An identification module configured to identify custom template source data in the page source data; wherein, the custom template source data is data in an HTML file that references external resources;
- a first determining module configured to add the custom template source data to the newly created DIV tag in the page source data, and determine a set of child nodes corresponding to the DIV tag;
- a first adding module configured to obtain the external resource referenced by the label in the sub-node set, and add the external resource to the DIV label to obtain the first to-be-displayed page data
- the first display module is configured to perform page rendering and display based on the first to-be-displayed page data.
- the present application also provides a computer device, including a memory, a processor, and a computer program stored in the memory and executable on the processor, where the processor implements the above-mentioned visual page rendering method when executing the program.
- the present application also provides a computer-readable storage medium on which a computer program is stored, and when the program is executed by a processor, implements the above-mentioned visual page rendering method.
- FIG. 1 is a flowchart of a visual page rendering method provided in Embodiment 1 of the present application;
- Fig. 2a is a flowchart of a visual page rendering method provided in Embodiment 2 of the present application.
- FIG. 2b is a flowchart of another method for rendering a visual page provided in Embodiment 2 of the present application.
- FIG. 3 is a schematic structural diagram of a visual page rendering apparatus provided in Embodiment 3 of the present application.
- FIG. 4 is a schematic structural diagram of a computer device according to Embodiment 4 of the present application.
- custom templates are often unable to adapt to different business requirement scenarios, and cannot meet the diverse business needs of users. Therefore, a custom template needs to be added during the page building process.
- custom templates are generally more complex, and page rendering cannot be achieved through the Vue front-end framework.
- the method of using the iframe frame to render pages also has many disadvantages, such as slow loading of web pages, prone to local confusion, poor compatibility, and is not suitable for rendering added custom templates.
- Embodiment 1 is a flowchart of a visual page rendering method provided in Embodiment 1 of the present application. This embodiment is applicable to the process of rendering and displaying the page to be displayed when the page source data of the page to be displayed includes custom template source data.
- the method may be performed by the visual page rendering apparatus in the embodiment of the present application, and the apparatus may be implemented in software and/or hardware. As shown in FIG. 1 , the method includes the following steps:
- S110 Acquire current page source data; wherein, the current page source data includes data in multiple HTML files corresponding to multiple modules in the page to be displayed, respectively.
- a visualization page is generally composed of multiple modules. Usually, each module exhibits a function, and the visualization page is divided into functional divisions, such as title module, content template, main menu module, and so on. Each module can be built from multiple templates. Acquire data in multiple HTML files corresponding to multiple modules in the page to be displayed from the server.
- Errors may occur in the process of downloading and transmitting page data.
- the message digest algorithm (Message-Digest Algorithm 5, MD5) is used to The current page source data is verified.
- MD5 is a widely used hash function that can be used as a unique fingerprint for a file.
- the basic principle of MD5 is to generate an MD5 check code by performing a hash operation on the current page source data. If the MD5 check code is the same as the MD5 code attached to the page source data, it means that the received transmission data is complete and correct. Different from the MD5 code attached to the transmitted data, you need to re-obtain the current page source data.
- the current page source data obtained is the data encoded by the encodeURIComponent.
- the encodeURIComponent is used to convert the data except letters, numbers, "(", ")", “.”, “!, “ ⁇ ", “*", "'” All characters except , "-” and “_” are escaped into Uniform Resource Locator (URL) of Universal Transformation Format (Unicode Transformation Format-8bit, utf-8). Therefore, it is also necessary to call the decodeURIComponent function to decode the current page source data.
- S120 Identify custom template source data in the current page source data; wherein the custom template source data is data in an HTML file that references external resources.
- the current page source data includes at least one custom template source data, and may also include at least one regular template source data, wherein the custom template source data is data in an HTML file that references external resources.
- Data in multiple HTML files corresponding to multiple modules in the page to be displayed are sequentially loaded and rendered in a top-to-bottom parsing order.
- SCRIPT tags that reference external resources cannot be loaded and rendered. Therefore, it is necessary to identify the custom template source data and process the SCRIPT tags containing the src attribute in the custom template source data.
- the template identifier (Identifier, ID) may be used as the unique identifier of the template, and the template ID is allocated by the server during the template creation process.
- the file type indicates the type of template, e.g. "auto-banner” for a carousel template, "slide-column” for a slide template, "anchor-nav” for an anchor navigation template, and "custom-def” for a custom template.
- S130 Add the custom template source data to the newly created DIV tag in the current page source data, and determine a set of child nodes corresponding to the DIV tag.
- the DIV tag in the HTML file is called a section tag, and it is recorded as ⁇ div> in HTML. It is a block-level element that defines a section or section in the document.
- the DIV tag has purity, that is, it does not have the default margin tag and padding tag.
- the margin tag represents the distance between different elements
- the padding tag represents the distance between the content of the element and the border of the element. Therefore, adding the custom template source data to the newly created DIV tag in the current page source data makes it easier to control the display layout of the custom template source data.
- the custom template source data is added to the newly created DIV tag in the current page source data, that is, the custom template source data is added between ⁇ div> and ⁇ /div>.
- the child nodes of the custom template source data in the DIV tag are determined as a child node set ChildNodes, and the child node set represents an ordered node list.
- the set of child nodes includes text nodes and element nodes.
- S140 Acquire an external resource referenced by a tag in the child node set, and add the external resource to the DIV tag to obtain first page data to be displayed.
- the src attribute specifies the URL of the external script file
- the external resource can be a js file, that is, a web page JavaScript client script file.
- the external resource is added to the DIV tag to obtain the data of the first page to be displayed. If multiple external resources are included, they are added to the DIV tag in order from top to bottom according to the positions of the external resources.
- S150 Perform page rendering and display based on the first to-be-displayed page data.
- Rendering is performed based on the data of the first to-be-displayed page and displayed on the browser.
- the technical solution of this embodiment is to identify the custom template source data in the current page source data, add the custom template source data to the newly created DIV tag in the current page source data, and determine the The set of child nodes corresponding to the DIV label; obtain the external resource referenced by the label in the child node set, and add the external resource to the DIV label to obtain the first page data to be displayed; based on the first The page data to be displayed is rendered and displayed, and a custom template can be added to the visual page design to meet the diverse business needs of users.
- FIG. 2 a is a flowchart of a method for rendering a visual page according to Embodiment 2 of the present application, and Embodiment 2 is described on the basis of Embodiment 1.
- FIG. 2a the method includes:
- S210 Acquire current page source data; wherein, the current page source data includes data in multiple HTML files corresponding to multiple modules in the page to be displayed, respectively.
- S220 Read template identifiers and file types corresponding to the template identifiers from the multiple HTML files, respectively.
- the current page source data includes at least one custom template source data, and may also include at least one regular template source data, wherein the custom template source data is data in an HTML file that references external resources.
- custom template source data is data in an HTML file that references external resources.
- the conventional HTML rendering method in the related art can be used for rendering and display, but for custom template source data that references external resources, due to the different compatibility of different browsers, different rendering methods need to be used to achieve To quickly load and render a visual page, you first need to identify the custom template source data from the current page source data.
- S230 Determine the template identifier whose corresponding file type is the target type as the custom template identifier, and determine the data in the HTML file corresponding to the custom template identifier as the custom template source data.
- the target type is the type of the custom template, and the type name is defined as custom-def; if the file type corresponding to the template identifier is custom-def, it is determined that the template corresponding to the template identifier is a custom template.
- the type name of the custom template can be set according to user requirements, and is used to distinguish the custom template from other conventional templates, such as a sliding template, a carousel template, and the like.
- the element collection HTMLCollection of the custom template source data is obtained by calling the method of creating document fragments, the HTMLCollection contains all root node tags and elements of the custom template source data, and the root node tags include SCRIPT tags, LINK tags and DIV Label.
- the HTMLCollection is traversed to determine the SCRIPT tag and the elements of the SCRIPT tag.
- node.onload() method to load the external resource referenced by the src attribute of the SCRIPT tag, where the external resource is a package file in js format. js files will depend on each other, and multiple js files will have a loading order when they are mutually dependent. In this case, you need to use a queue to load js files in order from top to bottom.
- js files generally have a large amount of data, and uploading large files directly on the web page will face many problems.
- the upload time is long, and if an error occurs in the middle, it will lead to failure.
- the external resources are sequentially added to the document partition. Because document fragments exist in memory and not in the Document Object Model (DOM) tree, inserting child elements into document partitions will not cause page reflow to optimize performance.
- DOM Document Object Model
- the second to-be-displayed page data is obtained by adding all child nodes in the document partition to the current page source data through appendChild. This operation only happens one re-rendering operation, instead of each node being inserted into the document separately, which can avoid multiple re-rendering operations.
- the method of creating document fragments cannot be invoked to obtain the HTMLCollection of the element collection of the custom template source data. Therefore, an instruction is sent to trigger the execution of adding the custom template source data.
- the operation in the newly created DIV tag in the source data of the current page is to obtain the set of child nodes of the source data of the custom template.
- adding the custom template source data to the newly created DIV tag in the current page source data, and determining the set of child nodes corresponding to the DIV tag including:
- the label element's child node collection childNodes includes text nodes and element nodes.
- the custom template source data before adding the custom template source data to the newly created DIV tag in the current page source data, it also includes:
- S262 Acquire the external resources referenced by the tags in the child node set, and add the external resources to the DIV tag to obtain the data of the first page to be displayed.
- the acquiring the external resources referenced by the tags in the sub-node set, and adding the external resources to the DIV tag, to obtain the data of the first page to be displayed including:
- Array.prototypr.slice.call can be called to convert the child node set childNodes into a child node array, and then the src attribute of the script SCRIPT tag can be determined by traversing the child node array, for example, the forEach function can be used to realize the traversal.
- the external resource referenced by the src attribute of the SCRIPT tag is obtained from the server through a get request, and the external resource may be a file encapsulated as js.
- the external resource is added to a blank DIV tag using innerHTML. If there are multiple js files, the multiple js files are sequentially added to the DIV tag according to the positions of the external resources from top to bottom to obtain the data of the first page to be displayed.
- S263 Render and display a page based on the data of the first page to be displayed.
- the steps of the embodiment of the present application are: the R&D personnel perform template development on the end of the visual orchestration personal computer (Personal Computer, PC) to obtain conventional templates and custom templates.
- the development of conventional templates and custom templates is essentially The above is the development of HTML files.
- the HTML files of conventional templates do not reference external resources, and users can directly use conventional templates to build pages, while the HTML files of custom templates reference external resources, and users need to modify the custom templates according to their needs. page.
- the developed conventional templates and custom templates are encoded and sent to the server through the application programming interface (API) of the server for preprocessing and storage.
- API application programming interface
- the template source data When the user needs to display the page built by the template on the visual H5 side, he obtains the conventional template and custom template of the page to be displayed from the server, and parses and parses the template source data from top to bottom after decoding the MD5 checksum data. rendered and displayed on the browser.
- Conventional templates can be parsed and rendered using conventional rendering methods. If the template type is identified as a custom template, the template source data will be parsed in different ways according to the browser version, that is, whether the browser supports calling the createContextualFragment method to create document fragments. . If the browser supports calling the createContextualFragmen method of creating document fragments, the template source data is parsed by the fragment parsing method.
- the principle of the fragment parsing method is to use createContextualFragmen to obtain the HTMLCollection of the child node collection of the template source data, determine the SCRIPT tag by traversing the HTMLCollection, and load the SCRIPT The external resource referenced by the SRC attribute of the tag, and create a document partition, add the external resources to the document partition in sequence, and finally add the document partition to the current page source data to obtain the second to-be-displayed page data, and based on The second to-be-displayed page data is used for page rendering and display. If the browser supports calling the createContextualFragmen method of creating document fragments, a custom parsing method is used for parsing.
- the principle of the custom parsing method is to add the custom template source data to the newly created DIV tag in the current page source data , determine the set of child nodes corresponding to the DIV label; obtain the external resources referenced by the labels in the set of child nodes, and add the external resources to the DIV label to obtain the first page data to be displayed; based on The first to-be-displayed page data is rendered and displayed on the page.
- the technical solution of this embodiment is to identify the custom template source data in the current page source data, add the custom template source data to the newly created DIV tag in the current page source data, and determine the The set of child nodes corresponding to the DIV label; obtain the external resource referenced by the label in the child node set, and add the external resource to the DIV label to obtain the first page data to be displayed; based on the first The page data to be displayed is rendered and displayed, and a custom template can be added to the visual page design to meet the diverse business needs of users. And according to the compatibility of the browser, the custom template is rendered in different ways, to improve the compatibility of the visual page, and to realize the fast loading and rendering of the visual page.
- FIG. 3 is a schematic structural diagram of a visual page rendering apparatus according to Embodiment 3 of the present application.
- This embodiment can be applied to the situation of rendering a custom template in an HTML5 page, the device can be implemented in software and/or hardware, and the device can be integrated in any device that provides the function of visual page rendering, as shown in FIG. 3
- the apparatus for visualizing page rendering includes: a first acquiring module 310 , an identifying module 320 , a first determining module 330 , a first adding module 340 and a first displaying module 350 .
- the first obtaining module 310 is configured to obtain the current page source data; wherein, the current page source data includes data in multiple HTML files corresponding to multiple modules in the page to be displayed; the identifying module 320 is configured to identify the The custom template source data in the current page source data; wherein, the custom template source data is the data in the HTML file that references external resources; the first determining module 330 is set to the custom template source data It is added to the newly created DIV tag in the source data of the current page, and determines the set of sub-nodes corresponding to the DIV tag; the first adding module 340 is configured to obtain the external resources referenced by the tags in the set of sub-nodes, The external resource is added to the DIV tag to obtain first page data to be displayed; the first display module 350 is configured to perform page rendering and display based on the first page data to be displayed.
- the identification module 320 includes:
- the first obtaining unit is set to obtain the file type corresponding to the template identification and the template identification respectively read from the plurality of HTML files; the determining unit is configured to determine that the corresponding file type is the template identification of the target type as A custom template identifier, and the data in the HTML file corresponding to the custom template identifier is determined as the custom template source data.
- the first determining module 330 includes:
- a creating unit is configured to create a DIV tag in the current page source data; a first adding unit is configured to add the root tag element of the custom template source data to the DIV tag; a first determining unit is configured To determine the set of child nodes in the DIV tag according to the root tag element.
- the first adding module 340 includes:
- a conversion unit configured to convert the set of sub-nodes into a sub-node array; a traversal unit, configured to traverse the sub-node array to determine a script SCRIPT label; a second acquisition unit, configured to obtain from the server the contents of the SCRIPT label. the referenced external resource; the second adding unit is configured to add the external resource to the DIV tag to obtain the data of the first to-be-displayed page.
- the device further includes:
- a matching module configured to determine the error ticket label in the custom template source data through regular matching before the custom template source data is added to the newly created DIV label in the current page source data;
- the modification module is configured to modify the error ticket label.
- the device further includes:
- the second determination module is configured to determine whether the current browser supports calling the method for creating document fragments before adding the custom template source data to the newly created DIV tag in the current page source data; the trigger module is configured as If the current browser does not support invoking the method for creating document fragments, the operation of adding the custom template source data to the newly created DIV tag in the current page source data is triggered to be executed.
- the device further includes:
- the second obtaining module is configured to obtain the element set of the custom template source data by calling the method for creating document fragments if the current browser supports calling the method for creating document fragments, wherein the method for creating document fragments is used to
- the custom template source data is analyzed into document fragments and an element set of the custom template source data is obtained based on the document fragments;
- a third determining module is configured to traverse the element set to determine a SCRIPT tag; a loading module , set to load the external resources referenced by the SCRIPT tag; create a module, set to create a document partition; a second adding module, set to sequentially add the external resources to the document partition; second display module, set
- the second page data to be displayed is obtained in order to add the document partition to the current page source data, and the page is rendered and displayed based on the second page data to be displayed.
- the above product can execute the method provided by any embodiment of the present application, and has functional modules and effects corresponding to the execution method.
- the technical solution of this embodiment is to identify the custom template source data in the current page source data, add the custom template source data to the newly created DIV tag in the current page source data, and determine the The set of child nodes corresponding to the DIV label; obtain the external resource referenced by the label in the child node set, and add the external resource to the DIV label to obtain the first page data to be displayed; based on the first The page data to be displayed is rendered and displayed, and a custom template can be added to the visual page design to meet the diverse business needs of users. And according to the compatibility of the browser, the custom template is rendered in different ways, to improve the compatibility of the visual page, and to realize the fast loading and rendering of the visual page.
- FIG. 4 is a schematic structural diagram of a computer device according to Embodiment 4 of the present application.
- FIG. 4 shows a block diagram of an exemplary computer device 12 suitable for use in implementing embodiments of the present application.
- the computer device 12 shown in FIG. 4 is only an example, and should not impose any limitations on the functions and scope of use of the embodiments of the present application.
- computer device 12 takes the form of a general-purpose computing device.
- Components of computer device 12 may include, but are not limited to, one or more processors or processing units 16 , system memory 28 , and a bus 18 connecting various system components including system memory 28 and processing unit 16 .
- Bus 18 represents one or more of several types of bus structures, including a memory bus or memory controller, a peripheral bus, a graphics acceleration port, a processor, or a local bus using any of a variety of bus structures.
- these architectures include, but are not limited to, Industry Standard Architecture (ISA) bus, MicroChannel Architecture (MCA) bus, enhanced ISA bus, Video Electronics Standards Association (Video Electronics Standards Association) , VESA) local bus and Peripheral Component Interconnect (PCI) bus.
- ISA Industry Standard Architecture
- MCA MicroChannel Architecture
- VESA Video Electronics Standards Association
- PCI Peripheral Component Interconnect
- Computer device 12 includes a variety of computer system readable media. These media can be any available media that can be accessed by computer device 12, including both volatile and nonvolatile media, removable and non-removable media.
- System memory 28 may include computer system readable media in the form of volatile memory, such as random access memory (RAM) 30 and/or cache 32 .
- Computer device 12 may include other removable/non-removable, volatile/non-volatile computer system storage media.
- storage system 34 may be configured to read and write to non-removable, non-volatile magnetic media (not shown in FIG. 4, commonly referred to as a "hard drive").
- magnetic disk drives configured to read and write to removable non-volatile magnetic disks (eg "floppy disks") and removable non-volatile optical disks (eg compact disk-read only memory) may be provided Disc Read-Only Memory, CD-ROM), portable compact disk read-only memory (Digital Video Disc-ROM, DVD-ROM) or other optical media) read and write optical drives.
- each drive may be connected to bus 18 through one or more data media interfaces.
- System memory 28 may include at least one program product having a set (eg, at least one) of program modules configured to perform the functions of embodiments of the present application.
- a program/utility 40 having a set (at least one) of program modules 42, which may be stored, for example, in system memory 28, such program modules 42 including, but not limited to, an operating system, one or more application programs, other Program modules and program data, each or a combination of these examples may include implementations of a network environment.
- Program modules 42 generally perform the functions and/or methods of the embodiments described herein.
- Computer device 12 may also communicate with one or more external devices 14 (eg, keyboard, pointing device, display 24, etc.), may also communicate with one or more devices that enable a user to interact with computer device 12, and/or communicate with Any device (eg, network card, modem, etc.) that enables the computer device 12 to communicate with one or more other computing devices. Such communication may take place through an input/output (I/O) interface 22 .
- the display 24 does not exist as an independent entity, but is embedded in the mirror surface. When the display surface of the display 24 is not displayed, the display surface of the display 24 and the mirror surface are visually integrated.
- computer device 12 may communicate with one or more networks (eg, Local Area Network (LAN), Wide Area Network (WAN), and/or public networks such as the Internet) through network adapter 20.
- network adapter 20 communicates with other modules of computer device 12 via bus 18 .
- other hardware and/or software modules may be used in conjunction with computer device 12, including but not limited to: microcode, device drivers, redundant processing units, external disk drive arrays, redundant independent disk arrays (Redundant Arrays of Independent Disks, RAID) systems, tape drives and data backup storage systems, etc.
- the processing unit 16 executes a variety of functional applications and data processing by running the programs stored in the system memory 28, such as implementing the visual page rendering method provided by the embodiments of the present application: obtaining the current page source data; wherein, the current page The source data includes data in multiple HTML files corresponding to multiple modules in the page to be displayed; identifying the custom template source data in the current page source data; wherein the custom template source data refers to external The data in the HTML file of the resource; add the custom template source data to the newly created DIV tag in the current page source data, and determine the child node set corresponding to the DIV label; obtain the child node set in the The external resource referenced by the tag is added to the DIV tag to obtain the first to-be-displayed page data; the page is rendered and displayed based on the first to-be-displayed page data.
- the fifth embodiment of the present application provides a computer-readable storage medium on which a computer program is stored, and when the program is executed by a processor, implements the visual page rendering methods provided by all the application embodiments of the present application:
- the current page source data includes data in multiple HTML files corresponding to multiple modules in the page to be displayed; identifying custom template source data in the current page source data; wherein , the custom template source data is data in an HTML file that references external resources; the custom template source data is added to the newly created DIV tag in the current page source data, and it is determined that the DIV tag corresponds to the set of child nodes; obtain the external resources referenced by the labels in the set of child nodes, and add the external resources to the DIV label to obtain the data of the first to-be-displayed page; based on the first to-be-displayed page The data is rendered and displayed on the page.
- the computer-readable medium may be a computer-readable signal medium or a computer-readable storage medium.
- the computer-readable storage medium may be, for example, but not limited to, an electrical, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus or device, or a combination of any of the above.
- Examples (non-exhaustive list) of computer-readable storage media include: electrical connections with one or more wires, portable computer disks, hard disks, RAM, ROM, Erasable Programmable Read-Only Memory (Erasable Programmable Read-Only Memory) Memory, EPROM or flash memory), optical fiber, CD-ROM, optical storage devices, magnetic storage devices, or any suitable combination of the above.
- a computer-readable storage medium can be any tangible medium that contains or stores a program that can be used by or in conjunction with an instruction execution system, apparatus, or device.
- a computer-readable signal medium may include a propagated data signal in baseband or as part of a carrier wave, with computer-readable program code embodied thereon. Such propagated data signals may take a variety of forms, including but not limited to electromagnetic signals, optical signals, or any suitable combination of the foregoing.
- a computer-readable signal medium can also be any computer-readable medium other than a computer-readable storage medium that can transmit, propagate, or transport the program for use by or in connection with the instruction execution system, apparatus, or device .
- Program code embodied on a computer-readable medium may be transmitted using any suitable medium, including but not limited to wireless, wire, optical fiber cable, radio frequency (RF), etc., or any suitable combination of the foregoing.
- suitable medium including but not limited to wireless, wire, optical fiber cable, radio frequency (RF), etc., or any suitable combination of the foregoing.
- Computer program code for carrying out the operations of the present application may be written in one or more programming languages, including object-oriented programming languages, such as Java, Smalltalk, C++, and conventional A procedural programming language, such as the "C" language or similar programming language.
- the program code may execute entirely on the user's computer, partly on the user's computer, as a stand-alone software package, partly on the user's computer and partly on a remote computer, or entirely on the remote computer or server.
- the remote computer may be connected to the user's computer through any kind of network, including a LAN or WAN, or may be connected to an external computer (eg, using an Internet service provider to connect through the Internet).
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
Description
Claims (10)
- 一种可视化页面渲染方法,包括:获取页面源数据;其中,所述页面源数据包括待显示页面中的多个模块分别对应的多个超文本标记语言HTML文件中的数据;识别所述页面源数据中的自定义模板源数据;其中,所述自定义模板源数据是引用了外部资源的HTML文件中的数据;将所述自定义模板源数据添加在所述页面源数据中新创建的区隔DIV标签中,确定所述DIV标签对应的子节点集合;获取所述子节点集合中的标签所引用的外部资源,并将所述外部资源添加到所述DIV标签中,得到第一待显示页面数据;基于所述第一待显示页面数据进行页面的渲染显示。
- 根据权利要求1所述的方法,其中,所述识别所述页面源数据中的自定义模板源数据,包括:从所述多个HTML文件中分别读取模板标识和所述模板标识对应的文件类型;将所对应的文件类型为目标类型的模板标识确定为自定义模板标识,将所述自定义模板标识对应的HTML文件中的数据确定为所述自定义模板源数据。
- 根据权利要求1所述的方法,其中,所述将所述自定义模板源数据添加在所述页面源数据中新创建的DIV标签中,确定所述DIV标签对应的子节点集合,包括:在所述页面源数据中创建所述DIV标签;将所述自定义模板源数据的根标签元素添加到所述DIV标签中;根据所述根标签元素确定所述DIV标签对应的子节点集合。
- 根据权利要求1所述的方法,其中,所述获取所述子节点集合中的标签所引用的外部资源,并将所述外部资源添加到所述DIV标签中,得到第一待显示页面数据,包括:将所述子节点集合转换为子节点数组;遍历所述子节点数组以确定脚本SCRIPT标签;从服务端获取所述SCRIPT标签所引用的外部资源;将所述外部资源添加到所述DIV标签中,得到所述第一待显示页面数据。
- 根据权利要求1所述的方法,在所述将所述自定义模板源数据添加在所 述页面源数据中新创建的DIV标签中之前,还包括:通过正则匹配确定所述自定义模板源数据中的错误单标签;对所述错误单标签进行修改。
- 根据权利要求1所述的方法,在所述将所述自定义模板源数据添加在所述页面源数据中新创建的DIV标签中之前,还包括:确定浏览器是否支持调用创建文档碎片方法;所述将所述自定义模板源数据添加在所述页面源数据中新创建的DIV标签中,包括:响应于所述浏览器不支持调用所述创建文档碎片方法,触发执行将所述自定义模板源数据添加在所述页面源数据中新创建的DIV标签中的操作。
- 根据权利要求6所述的方法,还包括:响应于所述浏览器支持调用所述创建文档碎片方法,通过调用所述创建文档碎片方法获取所述自定义模板源数据的元素集合,其中,所述创建文档碎片方法用于将所述自定义模板源数据分析为文档碎片并基于所述文档碎片获得所述自定义模板源数据的元素集合;对所述元素集合进行遍历以确定SCRIPT标签;加载所述SCRIPT标签所引用的外部资源;创建文档分区;将所述外部资源依次添加到所述文档分区中;将所述文档分区添加至所述页面源数据得到第二待显示页面数据,并基于所述第二待显示页面数据进行页面的渲染显示。
- 一种可视化页面渲染装置,包括:第一获取模块,设置为获取页面源数据;其中,所述页面源数据包括待显示页面中的多个模块分别对应的多个超文本标记语言HTML文件中的数据;识别模块,设置为识别所述页面源数据中的自定义模板源数据;其中,所述自定义模板源数据是引用了外部资源的HTML文件中的数据;第一确定模块,设置为将所述自定义模板源数据添加在所述页面源数据中新创建的区隔DIV标签中,确定所述DIV标签对应的子节点集合;第一添加模块,设置为获取所述子节点集合中的标签所引用的外部资源,并将所述外部资源添加到所述DIV标签中,得到第一待显示页面数据;第一显示模块,设置为基于所述第一待显示页面数据进行页面的渲染显示。
- 一种计算机设备,包括存储器、处理器及存储在所述存储器上并可在所述处理器上运行的计算机程序,其中,所述处理器执行所述程序时实现如权利要求1-7中任一项所述的可视化页面渲染方法。
- 一种计算机可读存储介质,存储有计算机程序,其中,所述程序被处理器执行时实现如权利要求1-7中任一项所述的可视化页面渲染方法。
Priority Applications (2)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
US18/038,054 US20230419016A1 (en) | 2020-12-31 | 2021-11-09 | Visualized Page Rendering Method, Device, Equipment, and Storage Medium |
JP2023516608A JP2023541186A (ja) | 2020-12-31 | 2021-11-09 | 可視化ページレンダリング方法、装置、機器及び記憶媒体 |
Applications Claiming Priority (2)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202011634449.5 | 2020-12-31 | ||
CN202011634449.5A CN113158101B (zh) | 2020-12-31 | 2020-12-31 | 一种可视化页面渲染方法、装置、设备及存储介质 |
Publications (1)
Publication Number | Publication Date |
---|---|
WO2022142743A1 true WO2022142743A1 (zh) | 2022-07-07 |
Family
ID=76878580
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
PCT/CN2021/129470 WO2022142743A1 (zh) | 2020-12-31 | 2021-11-09 | 可视化页面渲染方法、装置、设备及存储介质 |
Country Status (4)
Country | Link |
---|---|
US (1) | US20230419016A1 (zh) |
JP (1) | JP2023541186A (zh) |
CN (1) | CN113158101B (zh) |
WO (1) | WO2022142743A1 (zh) |
Cited By (2)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN115586896A (zh) * | 2022-09-29 | 2023-01-10 | 通号智慧城市研究设计院有限公司 | 基于模板引擎的页面项目开发方法、设备及存储介质 |
CN117331557A (zh) * | 2023-10-24 | 2024-01-02 | 北京饼干科技有限公司 | 一种表单渲染方法、装置、介质及设备 |
Families Citing this family (3)
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的功能定义系统、方法及计算机设备 |
CN115392887B (zh) * | 2022-10-31 | 2023-04-18 | 江西省地质局地理信息工程大队 | 自然资源一体化平台构建方法、装置 |
Citations (5)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN106339226A (zh) * | 2016-08-26 | 2017-01-18 | 南威软件股份有限公司 | 一种网页页面的展示方法和页面展示插件 |
CN108279903A (zh) * | 2018-02-24 | 2018-07-13 | 北京车和家信息技术有限公司 | 页面展示的方法及装置 |
CN109101300A (zh) * | 2018-06-14 | 2018-12-28 | 腾讯科技(深圳)有限公司 | 一种页面渲染方法、装置及终端 |
US20200311174A1 (en) * | 2019-03-29 | 2020-10-01 | Microsoft Technology Licensing, Llc | Content serving service generated html content |
CN113158101A (zh) * | 2020-12-31 | 2021-07-23 | 京东数字科技控股股份有限公司 | 一种可视化页面渲染方法、装置、设备及存储介质 |
Family Cites Families (4)
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 |
-
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
Patent Citations (5)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN106339226A (zh) * | 2016-08-26 | 2017-01-18 | 南威软件股份有限公司 | 一种网页页面的展示方法和页面展示插件 |
CN108279903A (zh) * | 2018-02-24 | 2018-07-13 | 北京车和家信息技术有限公司 | 页面展示的方法及装置 |
CN109101300A (zh) * | 2018-06-14 | 2018-12-28 | 腾讯科技(深圳)有限公司 | 一种页面渲染方法、装置及终端 |
US20200311174A1 (en) * | 2019-03-29 | 2020-10-01 | Microsoft Technology Licensing, Llc | Content serving service generated html content |
CN113158101A (zh) * | 2020-12-31 | 2021-07-23 | 京东数字科技控股股份有限公司 | 一种可视化页面渲染方法、装置、设备及存储介质 |
Non-Patent Citations (1)
Title |
---|
ANONYMOUS: "Interpretation of Vue3.0 Core Source Code - Component Rendering: How is vnode converted into Real DOM?", 21 December 2020 (2020-12-21), XP055948902, Retrieved from the Internet <URL:www.eggcake.cn/posts/2020-12-21-vue3-core-source-code-1> [retrieved on 20220804] * |
Cited By (4)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN115586896A (zh) * | 2022-09-29 | 2023-01-10 | 通号智慧城市研究设计院有限公司 | 基于模板引擎的页面项目开发方法、设备及存储介质 |
CN115586896B (zh) * | 2022-09-29 | 2023-08-04 | 通号智慧城市研究设计院有限公司 | 基于模板引擎的页面项目开发方法、设备及存储介质 |
CN117331557A (zh) * | 2023-10-24 | 2024-01-02 | 北京饼干科技有限公司 | 一种表单渲染方法、装置、介质及设备 |
CN117331557B (zh) * | 2023-10-24 | 2024-05-14 | 北京饼干科技有限公司 | 一种表单渲染方法、装置、介质及设备 |
Also Published As
Publication number | Publication date |
---|---|
US20230419016A1 (en) | 2023-12-28 |
JP2023541186A (ja) | 2023-09-28 |
CN113158101B (zh) | 2023-09-05 |
CN113158101A (zh) | 2021-07-23 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
WO2022142743A1 (zh) | 可视化页面渲染方法、装置、设备及存储介质 | |
US8572494B2 (en) | Framework for development and customization of web services deployment descriptors | |
US9665256B2 (en) | Identifying selected dynamic content regions | |
US9355081B2 (en) | Transforming HTML forms into mobile native forms | |
JP5148612B2 (ja) | 永続保存ポータル | |
US10565293B2 (en) | Synchronizing DOM element references | |
CN109522018B (zh) | 页面处理方法、装置及存储介质 | |
US9940744B2 (en) | Remote font management | |
US7870482B2 (en) | Web browser extension for simplified utilization of web services | |
US20140089786A1 (en) | Automated Processor For Web Content To Mobile-Optimized Content Transformation | |
JP2010519611A (ja) | アプリケーションベースのコピー・アンド・ペースト操作 | |
US20140281859A1 (en) | Enhanced mobilization of existing web sites | |
CN113126990B (zh) | 一种页面开发方法、装置、设备及存储介质 | |
JP2013528859A (ja) | クライアントアプリケーションとウェブページの統合 | |
CN110780874B (zh) | 用于生成信息的方法和装置 | |
CN112148356A (zh) | 文档生成方法、接口开发方法、装置、服务器及存储介质 | |
CN111783004A (zh) | 页面嵌入方法、装置及系统 | |
CN113495730A (zh) | 资源包的生成及解析方法和装置 | |
US9772986B2 (en) | Transforming HTML forms into mobile native forms | |
US20140304301A1 (en) | Identifying Selected Elements in Dynamic Content | |
JP5039946B2 (ja) | クライアント装置およびサーバ装置の間の通信を中継する技術 | |
CN112783482B (zh) | 一种可视化表单生成方法、装置、设备及存储介质 | |
CN112632425B (zh) | 一种离线资源文件的生成方法、装置、设备及存储介质 | |
US20100299626A1 (en) | Systems and Methods of Providing Rich User Interface and Animation to Auxiliary Display Devices | |
CN113721910A (zh) | 界面代码生成方法、装置、电子设备和计算机可读介质 |
Legal Events
Date | Code | Title | Description |
---|---|---|---|
121 | Ep: the epo has been informed by wipo that ep was designated in this application |
Ref document number: 21913486 Country of ref document: EP Kind code of ref document: A1 |
|
ENP | Entry into the national phase |
Ref document number: 2023516608 Country of ref document: JP Kind code of ref document: A |
|
WWE | Wipo information: entry into national phase |
Ref document number: 18038054 Country of ref document: US |
|
NENP | Non-entry into the national phase |
Ref country code: DE |
|
122 | Ep: pct application non-entry in european phase |
Ref document number: 21913486 Country of ref document: EP Kind code of ref document: A1 |