CN111274510A - Page rendering method, device and equipment and readable storage medium - Google Patents
Page rendering method, device and equipment and readable storage medium Download PDFInfo
- Publication number
- CN111274510A CN111274510A CN202010042501.1A CN202010042501A CN111274510A CN 111274510 A CN111274510 A CN 111274510A CN 202010042501 A CN202010042501 A CN 202010042501A CN 111274510 A CN111274510 A CN 111274510A
- Authority
- CN
- China
- Prior art keywords
- page
- rendering
- container
- view
- logic
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/957—Browsing optimisation, e.g. caching or content distillation
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/455—Emulation; Interpretation; Software simulation, e.g. virtualisation or emulation of application or operating system execution engines
- G06F9/45533—Hypervisors; Virtual machine monitors
- G06F9/45558—Hypervisor-specific management and integration aspects
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Software Systems (AREA)
- Databases & Information Systems (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Data Mining & Analysis (AREA)
- Information Transfer Between Computers (AREA)
Abstract
The invention relates to the technical field of pedestal operation and maintenance, and discloses a page rendering method, which comprises the following steps: acquiring a request of page rendering, and analyzing a rendering type in the request, wherein the rendering type comprises serial page rendering and parallel page rendering; if the request is analyzed to be the type of serial page rendering, performing serial page rendering; if the request is analyzed to be the type of the parallel page rendering, starting a logic container in a logic layer of the page to be rendered and a view container in a view layer of the page to be rendered; loading a logic code of a webpage through the logic container, and simultaneously loading and obtaining a view code through the view container; and executing the view code through the view container to render the page to be rendered. The invention also discloses a page rendering device, equipment and a computer readable storage medium. According to the invention, the Web application is rendered in a parallel page rendering mode, so that the time consumption can be reduced, and the webpage rendering efficiency is improved.
Description
Technical Field
The present invention relates to the field of computer rendering technologies, and in particular, to a page rendering method, device, and apparatus, and a computer-readable storage medium.
Background
At present, the single-page application SPA solves the problem of white screen caused by resource loading when the routing is switched among different sub-pages. However, the conventional SPA cannot use the view switching effect of the native App in the Hybrid application mode, for example: push stack animation effects, gesture slide navigation, and the like. The MPA of the multi-page application is just opposite, the switching effect of the original App view is kept, and the memory of each page is kept independent, but the white screen caused by resource reloading cannot be avoided. Neither SPA nor MPA achieve an optimal user experience. Generally, only one default rendering mode can be selected, and different rendering modes cannot be selected according to the page rendering request, so that the webpage rendering efficiency is low.
Disclosure of Invention
The invention mainly aims to provide a page rendering method, a page rendering device, page rendering equipment and a computer readable storage medium, and aims to solve the technical problem of low page rendering efficiency.
In order to achieve the above object, the present invention provides a page rendering method, including the steps of:
acquiring a request of page rendering, and analyzing a rendering type in the request, wherein the rendering type comprises serial page rendering and parallel page rendering;
if the request is analyzed to be the type of serial page rendering, performing serial page rendering;
if the request is analyzed to be the type of the parallel page rendering, starting a logic container in a logic layer of the page to be rendered and a view container in a view layer of the page to be rendered;
loading a logic code of a webpage through the logic container, and simultaneously loading and obtaining a view code through the view container;
and executing the view code through the view container to render the page to be rendered.
Optionally, if the request is analyzed as a type of parallel page rendering, the starting of the logical container in the logical 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:
if the request is analyzed to be the type of the parallel page rendering, starting a logic container in a logic layer of the page to be rendered and a view container in a view layer of the page to be rendered, and respectively recording the total T of the time for starting the view container and the time for rendering the page through heartbeat packages which are pre-deployed in the view container and the logic container1And time T of loading/executing logic code of web page2；
Judging the T1Whether or not greater than T2；
If said T is1Greater than T2Then said T is retained1If said T is1Less than or equal to T2Then said T is retained2。
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 analyzed as the type of parallel page rendering, the method further includes the following steps:
establishing mapping map in logic container of logic layer of page to be rendered1And establishing a mapping map in a view container of a view layer of the page to be rendered2；；
Connecting the maps by a common unique identification uniqueid1And the map2Obtaining a corresponding relation, and establishing an association relation between the logic container and the view container according to the corresponding relation;
and realizing message transmission between the logic container and the view container through PostMessage according to the association relationship.
Optionally, after the step of implementing message passing between the logical container and the view container through a PostMessage according to the association relationship, the method further includes the following steps:
judging whether the logic container has DOM operation to be executed or not according to the received user instruction;
and if the logic container has DOM operation to be executed, transmitting the DOM operation to the view container in a message form through the PostMessage.
Optionally, after the step of implementing message passing between the logical container and the view container through a PostMessage according to the association relationship, the method further includes the following steps:
monitoring a view page through an event monitor EventListener, and judging whether an event of user interaction operation exists in the view page;
and if the view page has an event of user interaction operation, taking the event as an input parameter of the EventListener to obtain a response message, sending the response message to the logic layer through the PostMessage, and if not, not processing the response message.
Optionally, before the obtaining a request for page rendering and parsing a rendering type in the request, where the rendering type includes steps of serial page rendering and parallel page rendering, the method further includes the following steps:
presetting a page rendering mode, wherein the mode comprises a synchronous rendering mode and an asynchronous rendering mode;
and encapsulating the interactive control code and the DOM in a view container, and encapsulating the interactive control code and the logic code of the loading/executing webpage in a logic container.
Further, to achieve the above object, the present invention further provides a page rendering apparatus, including the following modules:
the acquisition and analysis module is used for acquiring a request of page rendering and analyzing a rendering type in the request, wherein the rendering type comprises serial page rendering and parallel page rendering;
the serial page rendering module is used for rendering the serial page if the request is analyzed to be the type of rendering the serial page;
the starting container module is used for starting a logic container in a logic layer of the page to be rendered and a view container in a view layer of the page to be rendered if the request is analyzed to be the type of the parallel page rendering;
the loading module is used for loading the view code through the view container while loading the logic code of the webpage through the logic container;
and the rendering module is used for rendering the page to be rendered by executing the view code through the view container.
Optionally, the start container module further comprises the following units:
a recording unit, for starting the logic container in the logic layer of the page to be rendered if the request is analyzed as the type of the parallel page renderingRespectively recording the time for starting the view container and the sum T of the time for rendering the page by the view container in the view layer of the page to be rendered and by the heartbeat package pre-arranged in the view container and the logic container1And time T of loading/executing logic code of web page2；
A judging unit for judging the T1Whether or not greater than T2；
A selection unit for if T1Greater than T2Then said T is retained1If said T is1Less than or equal to T2Then said T is retained2。
Optionally, the page rendering apparatus further includes the following modules:
a mapping module for establishing a mapping map in a logical container of a logical layer of a page to be rendered1And establishing a mapping map in a view container of a view layer of the page to be rendered2；
A building module for connecting the map through a common unique identifier uniqueid1And the map2Obtaining a corresponding relation, and establishing an association relation between the logic container and the view container according to the corresponding relation;
and the transfer module is used for realizing message transfer between the logic container and the view container through the PostMessage according to the association relation.
Optionally, the page rendering apparatus further includes the following modules:
the judging module is used for judging whether the logic container has DOM operation to be executed or not according to the received user instruction;
and the message transmission module is used for transmitting the DOM operation to the view container in a message form through the PostMessage if the logic container has the DOM operation to be executed.
Optionally, the page rendering apparatus further includes the following modules:
the monitoring module is used for monitoring the view page through an event monitor EventListener and judging whether the view page has an event of user interaction operation;
and the sending module is used for taking the event as an input parameter of the EventListener to obtain a response message if the event of the user interaction operation exists in the view page, and sending the response message to the logic layer through the PostMessage.
Optionally, the page rendering apparatus further includes the following modules:
the system comprises a dividing module, a rendering module and a rendering module, wherein the dividing module is used for presetting page rendering modes, and the modes comprise a synchronous rendering mode and an asynchronous rendering mode;
and the packaging module is used for packaging the interactive control code and the DOM in the view container and packaging the interactive control code and the logic code of the loading/execution webpage in the logic container.
Further, to achieve the above object, the present invention also provides a page rendering method device, where the page rendering method device includes a memory, a processor, and a page rendering method program stored on the memory and executable on the processor, and when executed by the processor, the page rendering method program implements the steps of the page rendering method according to any one of the above items.
Further, to achieve the above object, the present invention also provides a computer readable storage medium, on which a page rendering method program is stored, which when executed by a processor implements the steps of the page rendering method according to any one of the above items.
The invention realizes the separation of view rendering and logic execution by isolating the view container and the logic container, the page view adopts independent WebView to perform independent rendering, and the view layer does not have any service logic and only has DOM rendering operation. The user can adopt a serial page rendering mode, a parallel page rendering mode to render the Web application, and a synchronous or asynchronous rendering mode to render the Web application, so that the selection is more flexible and diversified, wherein the time consumption can be reduced by adopting the parallel page rendering mode to render the Web application. The rendering method provided by the invention improves the efficiency of webpage rendering.
Drawings
FIG. 1 is a schematic structural diagram of a page rendering device operating environment according to an embodiment of the present invention;
FIG. 2 is a flowchart illustrating a page rendering method according to a first embodiment of the present invention;
FIG. 3 is a detailed flowchart of step S30 in FIG. 2;
FIG. 4 is a flowchart illustrating a page rendering method according to a second embodiment of the present invention;
FIG. 5 is a flowchart illustrating a page rendering method according to a third embodiment of the present invention;
FIG. 6 is a flowchart illustrating a page rendering method according to a fourth embodiment of the present invention;
FIG. 7 is a flowchart illustrating a fifth embodiment of a page rendering method according to the present invention;
FIG. 8 is a functional block diagram of a page rendering apparatus according to a first embodiment of the present invention;
FIG. 9 is a functional block diagram of a page rendering apparatus according to a second embodiment of the present invention.
The implementation, functional features and advantages of the objects of the present invention will be further explained with reference to the accompanying drawings.
Detailed Description
It should be understood that the specific embodiments described herein are merely illustrative of the invention and are not intended to limit the invention.
The invention provides a page rendering device.
Referring to fig. 1, fig. 1 is a schematic structural diagram of a page rendering device operating environment according to an embodiment of the present invention.
As shown in fig. 1, the page rendering apparatus includes: a processor 1001, such as a CPU, a communication bus 1002, a user interface 1003, a network interface 1004, and a memory 1005. Wherein a communication bus 1002 is used to enable connective communication between these components. The user interface 1003 may include a Display (Display), an input unit such as a Keyboard (Keyboard), and the network interface 1004 may optionally include a standard wired interface, a wireless interface (e.g., WI-FI interface). The memory 1005 may be a high-speed RAM memory or a non-volatile memory (e.g., a magnetic disk memory). The memory 1005 may alternatively be a storage device separate from the processor 1001.
Those skilled in the art will appreciate that the hardware configuration of the page rendering device shown in fig. 1 does not constitute a limitation of the page rendering device, and may include more or fewer components than those shown, or some components in combination, or a different arrangement of components.
As shown in fig. 1, a memory 1005, which is a kind of computer-readable storage medium, may include therein an operating system, a network communication module, a user interface module, and a page rendering program. The operating system is a program for managing and controlling the page rendering device and software resources, and supports the operation of the page rendering program and other software and/or programs.
In the hardware configuration of the page rendering apparatus shown in fig. 1, the network interface 1004 is mainly used for accessing a network; the user interface 1003 is mainly used for detecting a confirmation instruction, an editing instruction, and the like. And the processor 1001 may be configured to call a page rendering program stored in the memory 1005 and perform the operations of the following embodiments of the page rendering method.
Based on the hardware structure of the page rendering device, the page rendering method provided by the invention is provided with various embodiments.
Referring to fig. 2, fig. 2 is a flowchart illustrating a page rendering method according to a first embodiment of the present invention. In this embodiment, the page rendering method includes the following steps:
step S10, acquiring a request of page rendering, and analyzing a rendering type in the request, wherein the rendering type comprises serial page rendering and parallel page rendering;
in this embodiment, it is determined whether a request for serial page rendering exists currently, where the serial page rendering is a conventional rendering manner, that is, in an SPA/MPA execution process, WebView is started, resource loading/logic code execution, and page rendering is performed sequentially. The method comprises the steps that logic codes, view rendering and interaction control codes of the same front-end application are synchronously or asynchronously executed through any two executors in a preset executor set, the purpose is to separate view rendering and logic execution, a container is adopted to execute tasks of loading resources/executing logic codes and page rendering, the preset executor set can be a network view WebView or a JavaScriptcore frame, each sub-page view is independently rendered through a single WebView, a view layer does not have any service logic, and only DOM rendering operation is performed. The container WebView needs to be started first when the loading of resources/execution of logic code is executed.
Step S20, if the request is analyzed to be the type of serial page rendering, then serial page rendering is carried out;
in this embodiment, a serial page rendering manner may consume more time, for example, the time for starting the WebView is 40ms, the time for loading the resource/executing the logic code is 80ms, the time for page rendering is 50ms, and the serial page rendering manner may consume more time, for example, the time for starting the WebView is 40ms, the time for loading the resource/executing the logic code is 80ms, and the time for page rendering is 50ms, so that the total time consumed is T40 ms +80ms +50ms + 170 ms. In the embodiment, the selection of parallel page rendering is also set, so that the rendering mode can be selected more flexibly.
Step S30, if the request is analyzed to be the type of parallel page rendering, starting a logic container in a logic layer of the page to be rendered and a view container in a view layer of the page to be rendered;
in this embodiment, the parallel page rendering refers to a form in which view rendering and logic execution are separated, and if the request is analyzed as the type of the parallel page rendering, a logic container in a logic layer of the page to be rendered and a view container in a view layer of the page to be rendered are started. A logical container is a container used to run logical code, and a view container is a container used to run view code.
Step S40, loading the logic code of the webpage through the view container and obtaining the view code at the same time of loading the logic code of the webpage through the logic container;
in this embodiment, the view starting and the logic code execution are parallel, which can save the rendering time, and the view code is executed through the view container while the logic code of the web page is executed through the logic container, so as to obtain the execution result.
And step S50, the view container executes the view code to render the page to be rendered.
In this embodiment, when a user browses a web page, the web page displays various information by opening a web page element, and a process of opening the web page element and displaying information in the web page may be referred to as a process of rendering the web page. The synchronous rendering mode means that all webpage elements need to be rendered to display information. In the asynchronous rendering mode, when only part of information in the web page is displayed, in this embodiment, a user can flexibly select the rendering mode according to requirements.
Referring to fig. 3, fig. 3 is a detailed flowchart of step S30 in fig. 2. In this embodiment, in S30, if the request is analyzed as a type of parallel page rendering, the starting a logical container in a logical layer of the page to be rendered and a view container in a view layer of the page to be rendered includes the following steps:
step S301, if the request is analyzed to be the type of the parallel page rendering, starting a logic container in a logic layer of the page to be rendered and a view container in a view layer of the page to be rendered, and respectively recording the time for starting the view container and the sum T of the time for rendering the page through heartbeat packages which are pre-deployed in the view container and the logic container1And time T of loading/executing logic code of web page2；
In this embodiment, a serial page rendering mode consumes more time, for example, the time t for starting WebView140ms, time t to load resource/execute logic code280ms, time of page rendering t350ms, the total time consumed is T1＝t1+t2，T2＝t2+t3However, in this embodiment, a parallel page rendering mode is adopted, so that the time and logical container in the view container need to be calculated separately.
Step S302, judging the T1Whether or not greater than T2；
In this embodiment, when rendering is performed by way of parallel page rendering, the total time consumed is t in the view container1+t2T in AND logical container2+t3The larger one, therefore, the T is judged1Whether or not greater than T2。
Step S303, if T is determined1Greater than T2Then said T is retained1；
Step S304, if T is the1Less than or equal to T2Then said T is retained2。
In this embodiment, if the sum T of the time of starting the view container and the time of rendering the page is less than the threshold1Greater than the time T for executing the logic code of the web page2Then said T is retained1Otherwise, the T is reserved2。
Referring to fig. 4, fig. 4 is a flowchart illustrating a page rendering method according to a second embodiment of the present invention. In this embodiment, in the step 30, before 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 analyzed as the type of parallel page rendering, the method further includes the following steps:
step S60, establishing mapping map in the logic container of the logic layer of the page to be rendered1And establishing a mapping map in a view container of a view layer of the page to be rendered2；
In this embodiment, the key step of rendering is DOM operation, and after the logical container and the view container are separated, the logical container part cannot directly operate the DOM part in the view, which 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, and establish a mapping map in the logical container of the logical layer of the page to be rendered1And establishing a mapping map in a view container of a view layer of the page to be rendered2Map, map1And map mapping2By commonuniqueid connection.
Step S70, the map1 and the map2 are connected through a common unique identifier uniqueid to obtain a corresponding relation, and an association relation between a logic container and a view container is established according to the corresponding relation;
in this embodiment, map is passed1And map2The corresponding relation between the logical container and the view container is established.
And step S80, according to the association relationship, implementing message transmission between the logic container and the view container through PostMessage.
In this embodiment, the postMessage allows scripts from different sources to communicate in an asynchronous manner, and cross-document, multi-window, and cross-domain information transfer can be implemented. The SPA main application and the view WebView are synchronized through message transmission, the logic layer executes a DOM operation, and actually sends a corresponding message to the view layer. After the view layer receives the message, the DOM is sequentially mirrored according to the transmitted message, and then the actual view change can be realized.
Referring to fig. 5, fig. 5 is a flowchart illustrating a page rendering method according to a third embodiment of the present invention. In this embodiment, after the step S80, according to the association relationship, implementing message transmission between the logical container and the view container through a PostMessage, the method further includes the following steps:
step S90, judging whether the logic container has DOM operation to be executed according to the received user instruction;
in this embodiment, when the web page is loaded, the logic code is respectively handed to the logic container for execution, the view code is handed to the view container for execution, and the two are executed simultaneously to determine whether the execution DOM operation exists in the current logic container.
Step S100, if the logic container has DOM operation to be executed, the DOM operation is transmitted to the view container in a message form through the PostMessage.
In this embodiment, since the logical container and the view container are independent from each other, it is necessary to call the postMessage to realize mutual message transmission between the two containers, so as to perform cooperative work, thereby processing the complete function of the web page.
Corresponding data can be sent to the view layer through the postMessage, the view layer takes the message to change the message into an instruction which can be identified by the view layer according to convention, and then corresponding operation is carried out. The SPA main application and the view WebView are synchronized through message transmission, the logic layer executes a DOM operation, and actually sends a corresponding message to the view layer. After the view layer receives the message, the DOM is sequentially mirrored according to the transmitted message, and then the actual view change can be realized.
Referring to fig. 6, fig. 6 is a flowchart illustrating a page rendering method according to a fourth embodiment of the present invention. In this embodiment, after the step S80, according to the association relationship, implementing message transmission between the logical container and the view container through a PostMessage, the method further includes the following steps:
step S110, monitoring a view page through an event monitor EventListener, and judging whether the view page has an event of user interaction operation;
in this embodiment, an event listener EventListener monitors a view page, and determines whether an event of user interaction operation exists in the view page. The EventListener is composed of an event class and a monitoring interface, before an event is customized, an event monitoring interface and an event class must be provided, and the event class and the monitoring interface are registered in advance when the event is received, and can be logged out when the event monitoring is not needed. For example, if the event listener pre-defines that the keyPressed method is called when the keyboard is pressed, the keyPressed method may be called in an actual scenario, for example, when the user presses the keyboard.
Step S120, if the view page has the event of the user interaction operation, the event is used as the input parameter of the EventListener to obtain a response message, and the response message is sent to the logic layer through the PostMessage.
In this embodiment, after the event monitor monitors an event, the event monitor may perform feedback on the monitored event, that is, output a response message, and after receiving the response message, send the response message to the logic layer through the PostMessage, where the specific process is as follows: and calling the postMessage method to realize data transfer at a logic layer and a view page layer.
Referring to fig. 7, fig. 7 is a flowchart illustrating a page rendering method according to a fifth embodiment of the present invention. In this embodiment, before the step S10 obtaining a request for page rendering and analyzing a rendering type in the request, where the rendering type includes serial page rendering and parallel page rendering, the method further includes the following steps:
step S130, presetting page rendering modes, wherein the modes comprise a synchronous rendering mode and an asynchronous rendering mode;
in this embodiment, a page rendering mode is preset, where the mode includes a synchronous rendering mode and an asynchronous rendering mode. The method has the advantages that the rendering path can be selected more flexibly according to the service requirement, the synchronous rendering mode refers to the view container and the logic container being started simultaneously, and the asynchronous rendering mode refers to the view container and the logic container being started successively.
Step S140, packaging the interactive control code and the DOM in a view container, and packaging the interactive control code and the logic code of the loading/executing webpage in a logic container.
In this embodiment, the purpose of encapsulating the inter-control code in the view container and the logic container is to implement communication interaction between the view container and the logic container, for example, when a synchronous rendering mode is adopted, in order to more accurately count the time from receiving an instruction for page rendering to completing page rendering, interaction between the view container and the logic container is required, and only the interaction can know the speed of the respective progress. The specific implementation mode is as follows: the method comprises the steps of receiving a request from a client by using an open-source application container engine Docker and using a C/S architecture Docker daemon as a server, obtaining container creation parameters and preset template files according to the request, and achieving the purpose of packaging codes and the like in a view container and a logic container on the basis of the creation parameters and the preset template files and Docker mirror image construction.
Referring to fig. 8, fig. 8 is a functional module diagram of the page rendering apparatus according to the first embodiment of the present invention. In this embodiment, the page rendering apparatus includes:
the acquiring and analyzing module 10 is configured to acquire a request for page rendering and analyze a rendering type in the request, where the rendering type includes serial page rendering and parallel page rendering;
a serial page rendering module 20, configured to perform serial page rendering if the request is analyzed as a type of serial page rendering;
a starting container module 30, configured to start a logical container in a logical layer of the page to be rendered and a view container in a view layer of the page to be rendered if the request is analyzed as the type of parallel page rendering;
the loading module 40 is configured to load the logic code of the web page through the logic container and obtain the view code through the view container at the same time;
and a rendering module 50, configured to render the page to be rendered by executing the view code through the view container.
In this embodiment, view rendering and logic execution are separated by each module of the page rendering device, a page view is independently rendered by using a separate WebView, and a view layer does not have any service logic and only has DOM rendering operation. The user can adopt a serial page rendering mode, a parallel page rendering mode to render the Web application, and a synchronous or asynchronous rendering mode to render the Web application, so that the selection is more flexible and diversified, wherein the time consumption can be reduced by adopting the parallel page rendering mode to render the Web application. The efficiency of webpage rendering is improved.
Referring to fig. 9, fig. 9 is a functional module diagram of a page rendering apparatus according to a second embodiment of the present invention. In this embodiment, the starting container module 30 includes the following units:
a recording unit 301, configured to start a logical container in a logical layer of the page to be rendered and a view layer of the page to be rendered if the request is analyzed as the type of parallel page renderingThe view container records the sum T of the time for starting the view container and the time for rendering the page respectively through the heartbeat packages which are pre-deployed in the view container and the logic container1And time T of loading/executing logic code of web page2；
A judging unit 302 for judging the T1Whether or not greater than T2；
A selection unit 303 for selecting if said T1Greater than T2Then said T is retained1If said T is1Less than or equal to T2Then said T is retained2。
In this embodiment, the run time of each container is recorded by the heartbeat packet of the recording unit, and since this embodiment is a parallel page rendering mode, that is, the view container and the logic container are executed simultaneously, in order to accurately count the time required from the receipt of the page rendering instruction to the completion of the page rendering, the time of each process needs to be recorded by the heartbeat packet. For example, the time for starting the page after receiving the instruction of page rendering is t1Time of page rendering is t2Sum of time to start view container and time to render page T1，T1＝t1+t2(ii) a The time for loading the resource and executing the logic code is T2Because of the parallelism, only the time of maximum duration is reserved. If the page rendering mode is serial, the total time consumed is T1+T2＝T3It is clear that T3Is greater than T1、T2Therefore, the embodiment can save the time for rendering the page.
The invention also provides a computer readable storage medium.
In this embodiment, the computer-readable storage medium stores a page rendering program, and the page rendering program, when executed by a processor, implements the steps of the page rendering method described in any one of the above embodiments.
Through the above description of the embodiments, those skilled in the art will clearly understand that the method of the above embodiments can be implemented by software plus a necessary general hardware platform, and certainly can also be implemented by hardware, but in many cases, the former is a better implementation manner. Based on such understanding, the technical solutions of the present invention may be embodied in the form of a software product, which is stored in a storage medium (e.g., ROM/RAM), and includes instructions for causing a terminal (e.g., a mobile phone, a computer, a server, or a network device) to execute the method according to the embodiments of the present invention.
The present invention is described in connection with the accompanying drawings, but the present invention is not limited to the above embodiments, which are only illustrative and not restrictive, and those skilled in the art can make various changes without departing from the spirit and scope of the invention as defined by the appended claims, and all changes that come within the meaning and range of equivalency of the specification and drawings that are obvious from the description and the attached claims are intended to be embraced therein.
Claims (10)
1. A page rendering method, characterized in that the page rendering method comprises the following steps:
acquiring a request of page rendering, and analyzing a rendering type in the request, wherein the rendering type comprises serial page rendering and parallel page rendering;
if the request is analyzed to be the type of serial page rendering, performing serial page rendering;
if the request is analyzed to be the type of the parallel page rendering, starting a logic container in a logic layer of the page to be rendered and a view container in a view layer of the page to be rendered;
loading a logic code of a webpage through the logic container, and simultaneously loading and obtaining a view code through the view container;
and executing the view code through the view container to render the page to be rendered.
2. The page rendering method according to claim 1, wherein if the request is analyzed as a type of parallel page rendering, the step of starting a logical container in a logical layer of the page to be rendered and a view container in a view layer of the page to be rendered comprises the steps of:
if the request is analyzed to be the type of the parallel page rendering, starting a logic container in a logic layer of the page to be rendered and a view container in a view layer of the page to be rendered, and respectively recording the total T of the time for starting the view container and the time for rendering the page through heartbeat packages which are pre-deployed in the view container and the logic container1And time T of loading/executing logic code of web page2；
Judging the T1Whether or not greater than T2；
If yes, reserving the T1If not, reserving the T2。
3. The page rendering method according to claim 1, wherein before the step of starting the logical container in the logical layer of the page to be rendered and the view container in the view layer of the page to be rendered if the type of the parallel page rendering is parsed from the request, the method further comprises the steps of:
respectively establishing mapping maps in the logic container of the logic layer of the page to be rendered1And establishing a mapping map in a view container of a view layer of the page to be rendered2；
Connecting the maps by a common unique identification uniqueid1And the map2Obtaining a corresponding relation, and establishing an association relation between the logic container and the view container according to the corresponding relation;
and realizing message transmission between the logic container and the view container through PostMessage according to the association relationship.
4. The page rendering method according to claim 3, further comprising, after the step of implementing message passing between the logical container and the view container by a PostMessage according to the association relationship, the steps of:
judging whether the logic container has DOM operation to be executed or not according to the received user instruction;
and if the logic container has DOM operation to be executed, transmitting the DOM operation to the view container in a message form through the PostMessage.
5. The page rendering method according to claim 3, further comprising, after the step of implementing message passing between the logical container and the view container by a PostMessage according to the association relationship, the steps of:
monitoring a view page through an event monitor EventListener, and judging whether an event of user interaction operation exists in the view page;
if so, taking the event as an input parameter of the EventListener to obtain a response message, and sending the response message to the logic layer through the PostMessage.
6. The page rendering method of any one of claims 1-5, wherein before the steps of obtaining a request for page rendering and resolving a rendering type in the request, the rendering type comprising serial page rendering and parallel page rendering, further comprising the steps of:
presetting a page rendering mode, wherein the mode comprises a synchronous rendering mode and an asynchronous rendering mode;
and encapsulating the interactive control code and the DOM in a view container, and encapsulating the interactive control code and the logic code of the loading/executing webpage in a logic container.
7. A page rendering apparatus, characterized in that the page rendering apparatus comprises the following modules:
the acquisition and analysis module is used for acquiring a request of page rendering and analyzing a rendering type in the request, wherein the rendering type comprises serial page rendering and parallel page rendering;
the serial page rendering module is used for rendering the serial page if the request is analyzed to be the type of rendering the serial page;
the starting container module is used for starting a logic container in a logic layer of the page to be rendered and a view container in a view layer of the page to be rendered if the request is analyzed to be the type of the parallel page rendering;
the loading module is used for loading the view code through the view container while loading the logic code of the webpage through the logic container;
and the rendering module is used for rendering the page to be rendered by executing the view code through the view container.
8. The page rendering apparatus of claim 7, wherein the launch container module comprises the following units:
a recording unit, configured to start a logical container in a logical layer of the page to be rendered and a view container in a view layer of the page to be rendered if the request is analyzed as the type of the parallel page rendering, and respectively record a total T of a time for starting the view container and a time for rendering the page by using heartbeat packets pre-deployed in the view container and the logical container1And time T of loading/executing logic code of web page2；
A judging unit for judging the T1Whether or not greater than T2；
A selection unit for if T1Greater than T2Then said T is retained1If said T is1Less than or equal to T2Then said T is retained2。
9. A page rendering device, characterized in that the page rendering device comprises a memory, a processor and a page rendering program stored on the memory and executable on the processor, which when executed by the processor implements the steps of the page rendering method according to any one of claims 1-6.
10. A computer-readable storage medium, on which a page rendering program is stored, which when executed by a processor implements the steps of the page rendering method according to any one of claims 1-6.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010042501.1A CN111274510A (en) | 2020-01-15 | 2020-01-15 | Page rendering method, device and equipment and readable storage medium |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010042501.1A CN111274510A (en) | 2020-01-15 | 2020-01-15 | Page rendering method, device and equipment and readable storage medium |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN111274510A true CN111274510A (en) | 2020-06-12 |
Family
ID=71001059
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202010042501.1A Pending CN111274510A (en) | 2020-01-15 | 2020-01-15 | Page rendering method, device and equipment and readable storage medium |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN111274510A (en) |
Cited By (14)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN111901192A (en) * | 2020-07-15 | 2020-11-06 | 腾讯科技（深圳）有限公司 | Statistical method and device for page access data |
| CN111966354A (en) * | 2020-08-17 | 2020-11-20 | Oppo（重庆）智能科技有限公司 | Page display method and device and computer readable storage medium |
| CN112115393A (en) * | 2020-08-20 | 2020-12-22 | 苏州浪潮智能科技有限公司 | Page loading method, system, device and medium |
| CN112433784A (en) * | 2020-12-10 | 2021-03-02 | 东莞市盟大塑化科技有限公司 | Page loading method, device, equipment and storage medium |
| CN112612449A (en) * | 2020-12-17 | 2021-04-06 | 深圳前海微众银行股份有限公司 | Method, device, equipment and storage medium for synchronizing webpage |
| CN112698826A (en) * | 2021-03-23 | 2021-04-23 | 杭州数式网络科技有限公司 | Low code page creation system, method and equipment |
| CN112748843A (en) * | 2021-01-29 | 2021-05-04 | 腾讯科技（深圳）有限公司 | Page switching method and device, computer equipment and storage medium |
| CN112835580A (en) * | 2021-03-10 | 2021-05-25 | 百度在线网络技术（北京）有限公司 | Instruction processing method, device, equipment and storage medium |
| CN112882710A (en) * | 2021-03-10 | 2021-06-01 | 百度在线网络技术（北京）有限公司 | Rendering method, device and equipment based on client and storage medium |
| CN112882711A (en) * | 2021-03-10 | 2021-06-01 | 百度在线网络技术（北京）有限公司 | Rendering method, device, equipment and storage medium |
| CN112882709A (en) * | 2021-03-10 | 2021-06-01 | 百度在线网络技术（北京）有限公司 | Rendering method, device and equipment based on container engine system and storage medium |
| CN113268687A (en) * | 2021-05-25 | 2021-08-17 | 北京达佳互联信息技术有限公司 | Method and device for determining element rendering position and storage medium |
| CN113672405A (en) * | 2021-08-23 | 2021-11-19 | 上海哔哩哔哩科技有限公司 | Data interaction system and page display method based on data interaction system |
| CN112882709B (en) * | 2021-03-10 | 2024-05-24 | 百度在线网络技术（北京）有限公司 | Rendering method, device, equipment and storage medium based on container engine system |
-
2020
- 2020-01-15 CN CN202010042501.1A patent/CN111274510A/en active Pending
Cited By (19)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN111901192B (en) * | 2020-07-15 | 2023-09-12 | 腾讯科技（深圳）有限公司 | Statistical method and device for page access data |
| CN111901192A (en) * | 2020-07-15 | 2020-11-06 | 腾讯科技（深圳）有限公司 | Statistical method and device for page access data |
| CN111966354A (en) * | 2020-08-17 | 2020-11-20 | Oppo（重庆）智能科技有限公司 | Page display method and device and computer readable storage medium |
| CN112115393A (en) * | 2020-08-20 | 2020-12-22 | 苏州浪潮智能科技有限公司 | Page loading method, system, device and medium |
| CN112115393B (en) * | 2020-08-20 | 2023-01-06 | 苏州浪潮智能科技有限公司 | Page loading method, system, device and medium |
| CN112433784A (en) * | 2020-12-10 | 2021-03-02 | 东莞市盟大塑化科技有限公司 | Page loading method, device, equipment and storage medium |
| CN112612449A (en) * | 2020-12-17 | 2021-04-06 | 深圳前海微众银行股份有限公司 | Method, device, equipment and storage medium for synchronizing webpage |
| CN112748843B (en) * | 2021-01-29 | 2022-06-03 | 腾讯科技（深圳）有限公司 | Page switching method and device, computer equipment and storage medium |
| CN112748843A (en) * | 2021-01-29 | 2021-05-04 | 腾讯科技（深圳）有限公司 | Page switching method and device, computer equipment and storage medium |
| CN112882710A (en) * | 2021-03-10 | 2021-06-01 | 百度在线网络技术（北京）有限公司 | Rendering method, device and equipment based on client and storage medium |
| CN112882709A (en) * | 2021-03-10 | 2021-06-01 | 百度在线网络技术（北京）有限公司 | Rendering method, device and equipment based on container engine system and storage medium |
| CN112882711A (en) * | 2021-03-10 | 2021-06-01 | 百度在线网络技术（北京）有限公司 | Rendering method, device, equipment and storage medium |
| CN112835580A (en) * | 2021-03-10 | 2021-05-25 | 百度在线网络技术（北京）有限公司 | Instruction processing method, device, equipment and storage medium |
| CN112882709B (en) * | 2021-03-10 | 2024-05-24 | 百度在线网络技术（北京）有限公司 | Rendering method, device, equipment and storage medium based on container engine system |
| CN112835580B (en) * | 2021-03-10 | 2024-05-28 | 百度在线网络技术（北京）有限公司 | Instruction processing method, device, equipment and storage medium |
| CN112698826A (en) * | 2021-03-23 | 2021-04-23 | 杭州数式网络科技有限公司 | Low code page creation system, method and equipment |
| CN113268687A (en) * | 2021-05-25 | 2021-08-17 | 北京达佳互联信息技术有限公司 | Method and device for determining element rendering position and storage medium |
| CN113268687B (en) * | 2021-05-25 | 2023-11-28 | 北京达佳互联信息技术有限公司 | Method, device and storage medium for determining element rendering position |
| CN113672405A (en) * | 2021-08-23 | 2021-11-19 | 上海哔哩哔哩科技有限公司 | Data interaction system and page display method based on data interaction system |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN111274510A (en) | Page rendering method, device and equipment and readable storage medium | |
| CN111770490B (en) | Method and equipment for determining terminal behavior analysis | |
| US10298469B2 (en) | Automatic asynchronous handoff identification | |
| CN113628304B (en) | Image processing method, image processing device, electronic equipment and storage medium | |
| CN103973547A (en) | Picture display method and device | |
| CN107509051A (en) | Long-range control method, device, terminal and computer-readable recording medium | |
| CN110704148B (en) | Acquisition method and device of equipment page element, server and storage medium | |
| EP2466943A1 (en) | Method and device for monitoring running state of card | |
| CN109729346B (en) | Remote debugging method and system for television, debugging terminal and television terminal | |
| US20130066950A1 (en) | Service Development Platform, System and Method Thereof | |
| CN106294119B (en) | Test scheduling system and method and terminal equipment | |
| CN114327712A (en) | Cloud application system, window management method and device | |
| CN114218052A (en) | Service interaction graph generation method, device, equipment and storage medium | |
| CN107729207A (en) | A kind of monitoring method and device of application program main thread | |
| CN107295035B (en) | Method and device for sharing content of mobile terminal | |
| CN108289165B (en) | Method and device for realizing camera control based on mobile phone and terminal equipment | |
| CN103744573A (en) | Data quick viewing and analyzing system based on graphic device interface | |
| CN109195021B (en) | Screenshot sharing method and device | |
| CN112698829B (en) | Abnormal resource positioning method and device, storage medium and electronic equipment | |
| CN112351332B (en) | Reservation method of television program, intelligent large screen and computer readable storage medium | |
| CN114546560A (en) | Data sharing method and device, storage medium and electronic equipment | |
| CN114092169A (en) | Ordering test method and system and equipment for executing ordering test method | |
| CN114826886B (en) | Disaster recovery method and device for application software and electronic equipment | |
| CN115766651A (en) | Multi-screen communication method, device, equipment and storage medium | |
| CN102253843A (en) | Method and device for setting photo frame skin |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination |