Page rendering method, device, equipment and readable storage medium

Through the separation of parallel page rendering method and view container logical container, the problem of inefficient view switching effect and resource loading in Hybrid application mode is solved, and efficient web rendering and flexible rendering method selection is achieved.

CN111274510BActive Publication Date: 2025-08-15PING AN BANK CO LTD
View PDF 1 Cites 0 Cited by

Patent Information

Application Number
CN202010042501.1
Authority / Receiving Office
CN · China
Patent Type
Patents(China)
Current Assignee / Owner
Filing Date
2020-01-15
Publication Date
2025-08-15
Estimated Expiration
2040-01-15

Smart Images

  • Figure CN111274510B_ABST
    Figure CN111274510B_ABST
Patent Text Reader

Abstract

The present invention relates to the field of scaffolding operation and maintenance technology, and discloses a page rendering method, comprising the following steps: obtaining a page rendering request and parsing the rendering type in the request, wherein the rendering type includes serial page rendering and parallel page rendering; if the request is parsed as a serial page rendering type, serial page rendering is performed; if the request is parsed as a parallel page rendering type, a logic container in the logic layer of the page to be rendered and a view container in the view layer of the page to be rendered are started; while loading the logic code of the web page through the logic container, the view code is loaded and obtained through the view container; and the view code is executed through the view container to render the page to be rendered. The present invention also discloses a page rendering device, equipment, and computer-readable storage medium. The present invention uses a parallel page rendering mode to render Web applications, which can reduce time consumption and improve the efficiency of web page rendering.
Need to check novelty before this filing date? Find Prior Art

Description

Technical Field

[0001] The present invention relates to the field of computer rendering technology, and in particular to a page rendering method, apparatus, device, and computer-readable storage medium. Background Art

[0002] Currently, single-page applications (SPAs) solve the problem of white screens caused by resource loading when switching between sub-pages. However, traditional SPAs, in hybrid application mode, cannot utilize native app view transition effects, such as push stack animations and gesture-based navigation. Multi-page applications (MPAs), on the other hand, retain the original app's view transition effects and keep each page in independent memory. However, they cannot avoid white screens caused by resource reloading. Neither SPAs nor MPAs can provide an optimal user experience. Generally, they can only select a default rendering method, and cannot change it based on page rendering requests. This leads to inefficient web page rendering. Summary of the Invention

[0003] The main purpose of the present invention is to provide a page rendering method, device, equipment and computer-readable storage medium, aiming to solve the technical problem of low page rendering efficiency.

[0004] To achieve the above object, the present invention provides a page rendering method, which includes the following steps:

[0005] Obtain a page rendering request and parse the rendering type in the request, where the rendering type includes serial page rendering and parallel page rendering;

[0006] If the request is parsed as a serial page rendering type, serial page rendering is performed;

[0007] If the request is parsed as a parallel page rendering type, starting a logic container in the logic layer of the page to be rendered and a view container in the view layer of the page to be rendered;

[0008] While loading the logic code of the web page through the logic container, the view code is loaded and obtained through the view container;

[0009] The view code is executed by the view container to render the page to be rendered.

[0010] Optionally, if the request is parsed as a parallel page rendering type, starting a logic container in the logic layer of the page to be rendered and a view container in the view layer of the page to be rendered includes the following steps:

[0011] If the request is parsed as a parallel page rendering type, the logic container in the logic layer of the page to be rendered and the view container in the view layer of the page to be rendered are started, and the heartbeat packets pre-deployed in the view container and the logic container are used to record the total time T1 of starting the view container and the time T2 of loading / executing the logic code of the web page.

[0012] Determine whether T1 is greater than T2;

[0013] If T1 is greater than T2, T1 is retained; if T1 is less than or equal to T2, T2 is retained.

[0014] Optionally, before the step of starting the logic container in the logic layer of the page to be rendered and the view container in the view layer of the page to be rendered if the request is parsed as a parallel page rendering type, the following steps are also included:

[0015] A mapping map1 is created in a logic container of a logic layer of a page to be rendered, and a mapping map2 is created in a view container of a view layer of a page to be rendered;

[0016] Connecting the map1 and the map2 through a common unique identifier uniqueid to obtain a corresponding relationship, and establishing an association relationship between the logical container and the view container based on the corresponding relationship;

[0017] According to the association relationship, message transmission between the logic container and the view container is achieved through PostMessage.

[0018] Optionally, after the step of implementing message transmission between the logic container and the view container through PostMessage according to the association relationship, the following steps are further included:

[0019] Based on the received user instructions, determine whether there is a DOM operation to be performed on the logical container;

[0020] If there is a DOM operation to be performed in the logical container, the DOM operation is passed to the view container in the form of a message through PostMessage.

[0021] Optionally, after the step of implementing message transmission between the logic container and the view container through PostMessage according to the association relationship, the following steps are further included:

[0022] Monitor the view page through the event listener EventListener to determine whether there is an event of user interaction operation on the view page;

[0023] If there is an event of user interaction on the view page, the event is used as the input parameter of EventListener to obtain a response message, and the response message is sent to the logic layer through PostMessage. If not, no processing is performed.

[0024] Optionally, before the step of obtaining a request for page rendering and parsing the rendering type in the request, where the rendering type includes serial page rendering and parallel page rendering, the following steps are further included:

[0025] Presetting a page rendering method, wherein the method includes a synchronous rendering method and an asynchronous rendering method;

[0026] Encapsulate the interactive control code and DOM in the view container, and encapsulate the interactive control code and the logic code for loading / executing web pages in the logic container.

[0027] Furthermore, to achieve the above-mentioned purpose, the present invention also provides a page rendering device, which includes the following modules:

[0028] An acquisition and parsing module, configured to acquire a page rendering request and parse the rendering type in the request, wherein the rendering type includes serial page rendering and parallel page rendering;

[0029] A serial page rendering module, configured to perform serial page rendering if the request is parsed as a serial page rendering type;

[0030] A container module is started, which is used to start the logic container in the logic layer of the page to be rendered and the view container in the view layer of the page to be rendered if the request is parsed as a parallel page rendering type;

[0031] A loading module, configured to load and obtain the view code through the view container while loading the logic code of the web page through the logic container;

[0032] The rendering module is used to execute the view code through the view container to render the page to be rendered.

[0033] Optionally, the startup container module further includes the following units:

[0034] a recording unit, if the request is parsed as a parallel page rendering type, starting a logic container in the logic layer of the page to be rendered and a view container in the view layer of the page to be rendered, and recording, through heartbeat packets pre-deployed in the view container and the logic container, a total of the time T1 for starting the view container, the time for page rendering, and the time T2 for loading / executing the logic code of the web page;

[0035] A judging unit, configured to judge whether T1 is greater than T2;

[0036] The selection unit is configured to retain T1 if T1 is greater than T2, and retain T2 if T1 is less than or equal to T2.

[0037] Optionally, the page rendering device further includes the following modules:

[0038] A mapping module, configured to establish a mapping map1 in a logic container of a logic layer of a page to be rendered, and to establish a mapping map2 in a view container of a view layer of a page to be rendered;

[0039] An establishment module is used to connect the map1 and the map2 through a common unique identifier uniqueid to obtain a corresponding relationship, and establish an association relationship between the logical container and the view container according to the corresponding relationship;

[0040] The transmission module is used to realize message transmission between the logic container and the view container through PostMessage according to the association relationship.

[0041] Optionally, the page rendering device further includes the following modules:

[0042] A judgment module is used to judge whether there is a DOM operation to be executed in the logical container according to the received user instruction;

[0043] The message passing module is used to pass the DOM operation in the form of a message to the view container through PostMessage if there is a DOM operation to be executed in the logic container.

[0044] Optionally, the page rendering device further includes the following modules:

[0045] The monitoring module is used to monitor the view page through the event listener EventListener to determine whether there is an event of user interaction operation on the view page;

[0046] The sending module is used to use the event as the input parameter of EventListener if there is an event of user interaction operation on the view page, obtain a response message, and send the response message to the logic layer through PostMessage.

[0047] Optionally, the page rendering device further includes the following modules:

[0048] A division module is used to pre-set a page rendering mode, wherein the mode includes a synchronous rendering mode and an asynchronous rendering mode;

[0049] The encapsulation module is used to encapsulate the interactive control code and DOM in the view container, and to encapsulate the interactive control code and the logic code for loading / executing web pages in the logic container.

[0050] Furthermore, to achieve the above-mentioned purpose, the present invention also provides a page rendering method device, which includes a memory, a processor, and a page rendering method program stored in the memory and executable on the processor. When the page rendering method program is executed by the processor, the steps of the page rendering method as described in any one of the above items are implemented.

[0051] Furthermore, to achieve the above-mentioned purpose, the present invention also provides a computer-readable storage medium, on which a page rendering method program is stored. When the page rendering method program is executed by a processor, the steps of the page rendering method as described in any one of the above items are implemented.

[0052] The present invention separates view rendering from logic execution by isolating the view container from the logic container. A separate WebView is used for independent rendering of the page view. The view layer does not carry any business logic, only DOM rendering operations. Users can render web applications using either serial or parallel page rendering modes, or synchronous or asynchronous rendering methods, making the choices more flexible and diverse. Using the parallel page rendering mode can reduce time consumption. The rendering method provided by the present invention improves the efficiency of web page rendering. BRIEF DESCRIPTION OF THE DRAWINGS

[0053] Figure 1 This is a schematic diagram of the structure of the operating environment of the page rendering device involved in the embodiment of the present invention;

[0054] Figure 2 This is a flow chart of a first embodiment of a page rendering method according to the present invention;

[0055] Figure 3 for Figure 2 Step S30 is a schematic diagram of a detailed process flow;

[0056] Figure 4 This is a flow chart of a second embodiment of the page rendering method of the present invention;

[0057] Figure 5 This is a flow chart of a third embodiment of the page rendering method of the present invention;

[0058] Figure 6 This is a flow chart of a fourth embodiment of the page rendering method of the present invention;

[0059] Figure 7 This is a flow chart of a fifth embodiment of the page rendering method of the present invention;

[0060] Figure 8 This is a schematic diagram of the functional modules of the first embodiment of the page rendering device of the present invention;

[0061] Figure 9 This is a schematic diagram of the functional modules of the second embodiment of the page rendering device of the present invention.

[0062] The purpose, features and advantages of the present invention will be further described with reference to the accompanying drawings and in conjunction with the embodiments. DETAILED DESCRIPTION

[0063] It should be understood that the specific embodiments described herein are only used to explain the present invention and are not intended to limit the present invention.

[0064] The present invention provides a page rendering device.

[0065] Reference Figure 1 , Figure 1 This is a schematic diagram of the structure of the page rendering device operating environment involved in the embodiment of the present invention.

[0066] like Figure 1 As shown, the page rendering device includes: a processor 1001, such as a CPU, a communication bus 1002, a user interface 1003, a network interface 1004, and a memory 1005. Among them, the communication bus 1002 is used to realize the connection and communication between these components. The user interface 1003 may include a display screen (Display), an input unit such as a keyboard (Keyboard), and the network interface 1004 may optionally include a standard wired interface, a wireless interface (such as a WI-FI interface). The memory 1005 may be a high-speed RAM memory or a stable memory (non-volatile memory), such as a disk memory. The memory 1005 may also be a storage device independent of the aforementioned processor 1001.

[0067] Those skilled in the art will understand that Figure 1 The hardware structure of the page rendering device shown in the figure does not constitute a limitation on the page rendering device, and may include more or fewer components than shown in the figure, or combine certain components, or arrange the components differently.

[0068] like Figure 1 As shown, the memory 1005 as a computer-readable storage medium may include an operating system, a network communication module, a user interface module, and a page rendering program. The operating system is a program that manages and controls page rendering devices and software resources, and supports the operation of the page rendering program and other software and / or programs.

[0069] exist Figure 1In the hardware structure of the page rendering device shown, the network interface 1004 is primarily used to access the network; the user interface 1003 is primarily used to detect confirmation instructions and editing instructions, etc. The processor 1001 can be used to call the page rendering program stored in the memory 1005 and perform the operations of the various embodiments of the following page rendering method.

[0070] Based on the above-mentioned hardware structure of the page rendering device, various embodiments of the page rendering method of the present invention are proposed.

[0071] Reference Figure 2 , Figure 2 1 is a flow chart of a first embodiment of a page rendering method according to the present invention. In this embodiment, the page rendering method includes the following steps:

[0072] Step S10: obtaining a page rendering request and parsing a rendering type in the request, wherein the rendering type includes serial page rendering and parallel page rendering;

[0073] In this embodiment, it is determined whether there is a request for serial page rendering at present. Serial page rendering is a traditional rendering method, that is, during the execution of SPA / MPA, WebView is started, resources are loaded / logic code is executed, and page rendering is performed in sequence. Through any two executors in the preset executor set, the logic code, view rendering and interactive control code of the same front-end application are executed synchronously or asynchronously. The purpose is to separate view rendering and logic execution, and use a container to perform the tasks of loading resources / executing logic code and page rendering. The preset executor set can be a network view WebView or a JavaScriptCore framework. Each sub-page view uses a separate WebView for independent rendering. The view layer does not have any business logic, only DOM rendering operations. Before executing the loading of resources / executing logic code, it is necessary to start the container WebView first.

[0074] Step S20: If the request is parsed as a serial page rendering type, serial page rendering is performed;

[0075] In this embodiment, serial page rendering consumes a lot of time. For example, the time to start WebView is 40ms, the time to load resources / execute logic code is 80ms, and the time to render the page is 50ms. The total time consumed is T = 40ms + 80ms + 50ms = 170ms. In this embodiment, the option of parallel page rendering is also provided, so that the rendering method can be selected more flexibly.

[0076] Step S30: If the request is parsed as a parallel page rendering type, a logic container in the logic layer of the page to be rendered and a view container in the view layer of the page to be rendered are started;

[0077] In this embodiment, parallel page rendering refers to a form of separation between view rendering and logic execution. If the request is parsed as a parallel page rendering type, the logic container in the logic layer of the page to be rendered and the view container in the view layer of the page to be rendered are started. Because this is a form of separation between view rendering and logic execution, the logic container and the view container are started simultaneously, that is, view startup and logic code execution are parallel. The logic container is used to run the logic code, and the view container is used to run the view code.

[0078] Step S40, while loading the logic code of the web page through the logic container, load and obtain the view code through the view container;

[0079] In this embodiment, view startup and logic code execution are parallel, which can save rendering time. While the logic code of the web page is executed through the logic container, the view code is executed through the view container to obtain the execution result.

[0080] Step S50: Execute the view code through the view container to render the page to be rendered.

[0081] In this embodiment, when a user browses a webpage, the webpage displays various information by opening webpage elements. The process of opening webpage elements and displaying information is referred to as webpage rendering. Synchronous rendering requires that all webpage elements are rendered before information is displayed. Asynchronous rendering displays only a portion of the webpage information. In this embodiment, users can flexibly select a rendering method based on their needs.

[0082] Reference Figure 3 , Figure 3 for Figure 2 In this embodiment, if the request is parsed as a parallel page rendering type, starting the logic container in the logic layer of the page to be rendered and the view container in the view layer of the page to be rendered includes the following steps:

[0083] Step S301: If the request is parsed as a parallel page rendering type, a logic container in the logic layer of the page to be rendered and a view container in the view layer of the page to be rendered are started. The heartbeat packets pre-deployed in the view container and the logic container are used to record the time of starting the view container, the total time T1 for page rendering, and the time T2 for loading / executing the logic code of the web page.

[0084] In this embodiment, serial page rendering consumes more time. For example, the time t1 for starting WebView is 40ms, the time t2 for loading resources / executing logic code is 80ms, and the time t3 for page rendering is 50ms. The total time consumed is T1=t1+t2, T2=t2+t3. However, since parallel page rendering is adopted in this embodiment, the time in the view container and the logic container need to be calculated separately.

[0085] Step S302, determining whether T1 is greater than T2;

[0086] In this embodiment, when rendering is performed by parallel page rendering, the total time consumed is the larger one of t1+t2 in the view container and t2+t3 in the logic container. Therefore, it is determined whether T1 is greater than T2.

[0087] Step S303: if T1 is greater than T2, retain T1;

[0088] Step S304: If T1 is less than or equal to T2, retain T2.

[0089] In this embodiment, if the sum of the time for starting the view container and the time for page rendering T1 is greater than the time T2 for executing the logic code of the web page, then T1 is retained; otherwise, T2 is retained.

[0090] Reference Figure 4 , Figure 4 This is a flow chart of a second embodiment of the page rendering method of the present invention. In this embodiment, in step 30, if the request is parsed as a parallel page rendering type, the following steps are further included before starting the logical container in the logic layer of the page to be rendered and the view container in the view layer of the page to be rendered:

[0091] Step S60: creating a mapping map1 in a logic container of the logic layer of the page to be rendered, and creating a mapping map2 in a view container of the view layer of the page to be rendered;

[0092] In this embodiment, the key step of rendering is DOM operation. After the logical container and the view container are separated, the logical container part cannot directly operate the DOM part in the view. This requires establishing a mapping relationship between the logical container and the view container so that the separated logical container part can operate the DOM part in the view. A mapping map1 is established in the logical container of the logic layer of the page to be rendered, and a mapping map2 is established in the view container of the view layer of the page to be rendered. Mapping map1 and mapping map2 are connected by a common uniqueid.

[0093] Step S70: connecting the map1 and the map2 via their common unique identifier uniqueid to obtain a corresponding relationship, and establishing an association relationship between the logical container and the view container based on the corresponding relationship;

[0094] In this embodiment, an association relationship between the logical container and the view container is established through the correspondence between map1 and map2.

[0095] Step S80: Based on the association relationship, message transmission between the logic container and the view container is implemented through PostMessage.

[0096] In this embodiment, postMessage allows scripts from different sources to communicate asynchronously, enabling cross-document, multi-window, and cross-domain information transfer. The SPA main application and the WebView view are synchronized via message passing. Therefore, when the logic layer performs a DOM operation, it actually sends a corresponding message to the view layer. Upon receiving the message, the view layer mirrors the DOM operations in turn based on the passed message to implement the actual view change.

[0097] Reference Figure 5 , Figure 5 This is a flow chart of a third embodiment of the page rendering method of the present invention. In this embodiment, after implementing message transmission between the logic container and the view container via PostMessage based on the association relationship in step S80, the method further includes the following steps:

[0098] Step S90: determining whether there is a DOM operation to be executed in the logical container according to the received user instruction;

[0099] In this embodiment, when loading a web page, the logic code will be executed by the logic container and the view code will be executed by the view container respectively. The two will be executed at the same time to determine whether there is any DOM operation to be executed in the current logic container.

[0100] Step S100: If there is a DOM operation to be executed in the logic container, the DOM operation is passed to the view container in the form of a message via PostMessage.

[0101] In this embodiment, since the logic container and the view container are independent of each other, it is necessary to call postMessage to send messages between the two containers so as to work together and process the complete functions of the web page.

[0102] PostMessage sends the corresponding data to the view layer. The view layer receives the message, converts it into commands that the view layer can understand according to the agreement, and then performs the corresponding operation. The SPA main application and the WebView view are synchronized through message passing. Therefore, when the logic layer performs a DOM operation, it actually sends a corresponding message to the view layer. After receiving the message, the view layer mirrors the DOM operations based on the passed message to implement the actual view change.

[0103] Reference Figure 6 , Figure 6 This is a flow chart of a fourth embodiment of the page rendering method of the present invention. In this embodiment, after implementing message transmission between the logic container and the view container via PostMessage based on the association relationship in step S80, the method further includes the following steps:

[0104] Step S110, monitoring the view page through the event listener EventListener to determine whether there is an event of user interaction operation on the view page;

[0105] In this embodiment, the view page is monitored through the event listener EventListener to determine whether there is an event of user interaction operation on the view page. EventListener consists of an event class and a listening interface. Before customizing an event, an event listening interface and an event class must be provided. After receiving the event, in this embodiment, it is pre-registered. When the event monitoring is no longer needed, it can also be unregistered. For example, if the event listener predefines the call of the keyPressed method when the keyboard is pressed, the keyPressed method can be called in actual scenarios, such as when the user presses the keyboard.

[0106] Step S120: If there is an event of user interaction operation on the view page, the event is used as an input parameter of EventListener to obtain a response message, and the response message is sent to the logic layer through PostMessage.

[0107] In this embodiment, after the event listener listens to an event, it will give feedback to the listened event, that is, output a response message. After receiving the response message, the response message will be sent to the logic layer through PostMessage. The specific process is: calling the postMessage method to realize data transmission between the logic layer and the view page layer.

[0108] Reference Figure 7 , Figure 7This is a flowchart of a fifth embodiment of the page rendering method of the present invention. In this embodiment, before obtaining a page rendering request in step S10 and parsing the rendering type in the request, which includes serial page rendering and parallel page rendering, the following steps are also included:

[0109] Step S130, presetting a page rendering mode, wherein the mode includes a synchronous rendering mode and an asynchronous rendering mode;

[0110] In this embodiment, a page rendering method is pre-set, including synchronous rendering and asynchronous rendering. The advantage of this division is that the rendering path can be selected more flexibly according to business needs. Synchronous rendering means that the view container and the logic container are started at the same time, while asynchronous rendering means that the view container and the logic container are started one after another.

[0111] Step S140 : Encapsulate the interactive control code and the DOM in a view container, and encapsulate the interactive control code and the logic code for loading / executing the web page in a logic container.

[0112] In this embodiment, the purpose of encapsulating the mutual control code in the view container and the logical container is to enable communication and interaction between the view container and the logical container. For example, when synchronous rendering is used, interaction between the view container and the logical container is required to more accurately calculate the time from receiving the page rendering instruction to completing the page rendering. Only through interaction can the speed of each progress be determined. Specifically, this is achieved by using the open source application container engine Docker, with the client-server architecture Docker daemon as the server, receiving requests from clients, obtaining container creation parameters and preset template files based on the requests, and then building the Docker image based on the creation parameters and preset template files to achieve the purpose of encapsulating the code in the view container and the logical container.

[0113] Reference Figure 8 , Figure 8 This is a functional module diagram of the first embodiment of the page rendering device of the present invention. In this embodiment, the page rendering device includes:

[0114] An acquisition and parsing module 10 is used to acquire a page rendering request and parse the rendering type in the request, where the rendering type includes serial page rendering and parallel page rendering;

[0115] A serial page rendering module 20 is configured to perform serial page rendering if the request is parsed as a serial page rendering type;

[0116] The container start module 30 is configured to start a logic container in the logic layer of the page to be rendered and a view container in the view layer of the page to be rendered if the request is parsed as a parallel page rendering type;

[0117] A loading module 40 is configured to load and obtain a view code through the view container while loading the logic code of the web page through the logic container;

[0118] The rendering module 50 is configured to execute the view code through the view container to render the page to be rendered.

[0119] In this embodiment, the various modules of the page rendering device separate view rendering and logic execution. A separate WebView is used for independent rendering of the page view. The view layer does not carry any business logic, only DOM rendering operations. Users can render web applications in either serial or parallel page rendering mode, or in synchronous or asynchronous rendering modes, providing greater flexibility and variety. Using parallel page rendering mode can reduce time consumption and improve web page rendering efficiency.

[0120] Reference Figure 9 , Figure 9 This is a functional module diagram of the second embodiment of the page rendering device of the present invention. In this embodiment, the startup container module 30 includes the following units:

[0121] Recording unit 301, if the request is parsed as a parallel page rendering type, starts a logic container in the logic layer of the page to be rendered and a view container in the view layer of the page to be rendered, and records the time T1 of starting the view container, the total time T1 of page rendering, and the time T2 of loading / executing the logic code of the webpage respectively through heartbeat packets pre-deployed in the view container and the logic container;

[0122] A judging unit 302 is configured to judge whether T1 is greater than T2;

[0123] The selection unit 303 is configured to retain T1 if T1 is greater than T2, and retain T2 if T1 is less than or equal to T2.

[0124] In this embodiment, the running time of each container is recorded through the heartbeat packet of the recording unit. Since this embodiment is a parallel page rendering method, that is, the view container and the logic container are executed at the same time, in order to accurately count the time from receiving the page rendering instruction to completing the page rendering, it is necessary to record the time of each process through the heartbeat packet. For example, the time to start the page after receiving the page rendering instruction is t1, and the time to render the page is t2. The sum of the time to start the view container and the time to render the page is T1, T1=t1+t2; the time to load resources and execute logic code is T2. Because it is parallel, only the time with the longest duration is retained. If it is a serial page rendering method, the total time consumed is T1+T2=T3. Obviously, T3 is greater than T1 and T2. Therefore, this embodiment can save the time of rendering the page.

[0125] The present invention also provides a computer-readable storage medium.

[0126] In this embodiment, a page rendering program is stored on the computer-readable storage medium. When the page rendering program is executed by the processor, the steps of the page rendering method described in any of the above embodiments are implemented.

[0127] Through the description of the above embodiments, those skilled in the art can clearly understand that the above-mentioned embodiment methods can be implemented by means of software plus the necessary general hardware platform, or of course by hardware, but in many cases the former is a better embodiment. Based on this understanding, the technical solution of the present invention, or the part that contributes to the prior art, can be embodied in the form of a software product, which is stored in a storage medium (such as ROM / RAM) and includes a number of instructions for enabling a terminal (which can be a mobile phone, computer, server or network device, etc.) to execute the methods described in each embodiment of the present invention.

[0128] The embodiments of the present invention are described above in conjunction with the accompanying drawings, but the present invention is not limited to the above-mentioned specific implementation methods. The above-mentioned specific implementation methods are merely illustrative and not restrictive. Under the guidance of the present invention, ordinary technicians in this field can also make many forms without departing from the scope of protection of the purpose of the present invention and the claims. Any equivalent structure or equivalent process transformation made using the contents of the description and drawings of the present invention, or directly or indirectly used in other related technical fields, all fall within the protection of the present invention.

Claims

1. A page rendering method, characterized in that: The page rendering method includes the following steps: By applying the container engine Docker and using the C / S architecture Docker daemon as the server, it receives requests from customers, obtains container creation parameters and preset template files based on the requests, and builds view containers and logical containers based on the creation parameters and preset template files and the Docker image. Obtain a page rendering request and parse the rendering type in the request, where the rendering type includes serial page rendering and parallel page rendering; If the request is parsed as a serial page rendering type, serial page rendering is performed; A mapping map1 is established in the logic container of the logic layer of the page to be rendered, and a mapping map2 is established in the view container of the view layer of the page to be rendered; Connecting the map1 and the map2 through a common unique identifier uniqueid to obtain a corresponding relationship, and establishing an association relationship between the logical container and the view container based on the corresponding relationship; According to the association relationship, message transmission between the logic container and the view container is realized through PostMessage; If the request is parsed as a parallel page rendering type, the logic container in the logic layer of the page to be rendered and the view container in the view layer of the page to be rendered are started to separate view rendering and logic execution. The page view is rendered independently using a separate WebView. The view layer does not have any business logic, only DOM rendering operations; While loading the logic code of the web page through the logic container, the view code is loaded and obtained through the view container; Executing the view code through the view container to render the page to be rendered; If the request is parsed as a parallel page rendering type, starting a logic container in the logic layer of the page to be rendered and a view container in the view layer of the page to be rendered includes the following steps: If the request is parsed as a parallel page rendering type, the logic container in the logic layer of the page to be rendered and the view container in the view layer of the page to be rendered are started, and the heartbeat packets pre-deployed in the view container and the logic container are used to record the total time T1 of starting the view container and the time T2 of loading / executing the logic code of the web page. Determine whether T1 is greater than T2; If so, retain the T1; if not, retain the T2.

2. The page rendering method according to claim 1, wherein After the step of implementing message transmission between the logic container and the view container through PostMessage according to the association relationship, the following steps are also included: Based on the received user instructions, determine whether there is a DOM operation to be performed on the logical container; If there is a DOM operation to be performed in the logical container, the DOM operation is passed to the view container in the form of a message through PostMessage.

3. The page rendering method according to claim 1, wherein After the step of implementing message transmission between the logic container and the view container through PostMessage according to the association relationship, the following steps are also included: Monitor the view page through the event listener EventListener to determine whether there is an event of user interaction operation on the view page; If so, the event is used as an input parameter of EventListener to obtain a response message, and the response message is sent to the logic layer via PostMessage.

4. The page rendering method according to any one of claims 1 to 3, characterized in that Before the step of obtaining a page rendering request and parsing the rendering type in the request, wherein the rendering type includes serial page rendering and parallel page rendering, the following steps are also included: Presetting a page rendering method, wherein the method includes a synchronous rendering method and an asynchronous rendering method; Encapsulate the interactive control code and DOM in the view container, and encapsulate the interactive control code and the logic code for loading / executing web pages in the logic container.

5. A page rendering device, characterized in that: The page rendering device includes the following modules: The encapsulation module is used to receive requests from clients by using the Docker application container engine and the client / server architecture Docker daemon as the server, obtain container creation parameters and preset template files according to the requests, and build view containers and logical containers based on the creation parameters and preset template files and the Docker image; An acquisition and parsing module, configured to acquire a page rendering request and parse the rendering type in the request, wherein the rendering type includes serial page rendering and parallel page rendering; A serial page rendering module, configured to perform serial page rendering if the request is parsed as a serial page rendering type; A mapping module, configured to establish a mapping map1 in a logic container of a logic layer of a page to be rendered, and to establish a mapping map2 in a view container of a view layer of a page to be rendered; An establishment module is used to connect the map1 and the map2 through a common unique identifier uniqueid to obtain a corresponding relationship, and establish an association relationship between the logical container and the view container according to the corresponding relationship; A transmission module, configured to implement message transmission between the logic container and the view container through PostMessage according to the association relationship; Start the container module, which is used to start the logic container in the logic layer of the page to be rendered and the view container in the view layer of the page to be rendered if the request is parsed as a parallel page rendering type, so as to separate view rendering and logic execution. The page view uses a separate WebView for independent rendering. The view layer does not have any business logic, only DOM rendering operations; A loading module, configured to load and obtain the view code through the view container while loading the logic code of the web page through the logic container; A rendering module, configured to execute the view code through the view container to render the page to be rendered; The startup container module includes the following units: a recording unit, if the request is parsed as a parallel page rendering type, starting a logic container in the logic layer of the page to be rendered and a view container in the view layer of the page to be rendered, and recording, through heartbeat packets pre-deployed in the view container and the logic container, a total of the time T1 for starting the view container, the time for page rendering, and the time T2 for loading / executing the logic code of the web page; A judging unit, configured to judge whether T1 is greater than T2; The selection unit is configured to retain T1 if T1 is greater than T2, and retain T2 if T1 is less than or equal to T2.

6. The page rendering device according to claim 5, wherein: The page rendering device also includes the following modules: A judgment module is used to judge whether there is a DOM operation to be executed in the logical container according to the received user instruction; The message passing module is used to pass the DOM operation in the form of a message to the view container through PostMessage if there is a DOM operation to be executed in the logic container.

7. The page rendering device according to claim 5, wherein: The page rendering device also includes the following modules: The monitoring module is used to monitor the view page through the event listener EventListener to determine whether there is an event of user interaction operation on the view page; The sending module is used to use the event as the input parameter of EventListener if there is an event of user interaction operation on the view page, obtain a response message, and send the response message to the logic layer through PostMessage.

8. The page rendering device according to any one of claims 5 to 7, wherein: The page rendering device also includes the following modules: A division module is used to pre-set a page rendering mode, wherein the mode includes a synchronous rendering mode and an asynchronous rendering mode; The encapsulation module is used to encapsulate the interactive control code and DOM in the view container, and to encapsulate the interactive control code and the logic code for loading / executing web pages in the logic container.

9. A page rendering device, characterized in that: The page rendering device includes a memory, a processor, and a page rendering program stored in the memory and executable on the processor. When the page rendering program is executed by the processor, the steps of the page rendering method according to any one of claims 1 to 4 are implemented.

10. A computer-readable storage medium, characterized in that The computer-readable storage medium stores a page rendering program, which, when executed by a processor, implements the steps of the page rendering method according to any one of claims 1 to 4.

Citation Information

Patent Citations

  • Image processing method and terminal device

    CN106600521A