Page processing method and device, electronic equipment, related medium and program product
Patent Information
- Application Number
- CN202510520696.9
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- Filing Date
- 2025-04-23
- Publication Date
- 2026-10-23
AI Technical Summary
然而,由于加载截图所需时间通常较长,特别是在高分辨率情况下,这导致相关技术对于加速页面渲染起到的帮助有限
[0024]考虑到响应于渲染请求生成的渲染指令一般不支持存储,无法用于页面重打开时的页面对象重渲染,本公开实施例在生成渲染指令后,执行渲染指令,在执行过程中记录执行参数,基于执行参数生成存储格式的代理渲染指令,并在存储器中存储代理渲染指令。由于代理渲染指令是存储格式的,就能够用于页面重打开时的页面对象重渲染。具体地,响应于对目标页面的重渲染请求,从存储器中获取代理渲染指令。然后,将代理渲染指令还原成渲染指令。执行还原出的渲染指令,就可以在目标页面上重渲染目标页面对象。本公开实施例通过重放渲染指令,在实现了页面重打开时的页面对象重渲染的同时,能够充分利用渲染引擎来加速渲染,相较于相关技术中加载截图的方案,能够大大提升页面对象的渲染效率。
Smart Images

Figure CN122964381A_ABST
Abstract
Description
Technical Field
[0001] This disclosure relates to the field of computers, and in particular to a page processing method, apparatus, electronic device, related media, and program product. Background Technology
[0002] Page rendering refers to the process of transforming low-level code into a visual page. The low-level code typically contains rendering instructions for rendering specific page objects. Taking Hyper Text Markup Language (HTML) as an example, the Canvas is an element provided by HTML for drawing graphics, capable of dynamically generating complex graphics, animations, and visualizations. Therefore, canvas-based rendering instructions are widely used. When a page object needs to be rendered, rendering instructions are generally generated and executed to render the page object. When the page is reopened, the rendering instructions need to be regenerated and executed, resulting in inefficient page rendering.
[0003] Because the underlying design of general rendering commands does not support storage, to improve rendering efficiency when the page is reopened, the common technique is to take a screenshot of the page object rendered by the rendering commands and store it. The stored screenshot is then loaded directly when the page is reopened. However, since loading screenshots typically takes a long time, especially at high resolutions, this technique offers limited help in accelerating page rendering. Summary of the Invention
[0004] This disclosure provides a page processing method, apparatus, electronic device, related medium, and program product that can improve the rendering efficiency of page objects when the page is reopened.
[0005] According to one aspect of this disclosure, a page processing method is provided, comprising: In response to a rendering request to render a target page object on the target page, generate rendering instructions in a non-storage format; Execute the rendering instructions to render the target page object on the target page, and record the execution parameters during the execution of the rendering instructions; Based on the execution parameters, a proxy rendering instruction in a storage format is generated and stored in the memory; In response to a re-rendering request for the target page, the proxy rendering instruction is retrieved from the memory, the proxy rendering instruction is restored to the rendering instruction, and the rendering instruction is executed to re-render the target page object on the target page.
[0006] According to one aspect of this disclosure, a page processing method is provided for a first node, the page processing method comprising: In response to the second node's rendering request to render the target page object on the target page, a non-storage format rendering instruction is generated; Execute the rendering instructions and record the execution parameters during the execution of the rendering instructions; Based on the execution parameters, a proxy rendering instruction in a storage format is generated and stored in the memory; In response to the second node's request to re-render the target page, the proxy rendering instruction is retrieved from the memory and sent to the second node so that the second node restores the proxy rendering instruction to the rendering instruction and executes the rendering instruction to re-render the target page object on the target page.
[0007] According to one aspect of this disclosure, a page processing method is provided for a second node, the page processing method comprising: A rendering request for rendering the target page object on the target page is sent to the first node, so that the first node generates a non-storage format rendering instruction, executes the rendering instruction, records the execution parameters during the execution of the rendering instruction, generates a storage format proxy rendering instruction based on the execution parameters, and stores the proxy rendering instruction in the memory; The re-rendering request for the target page is sent to the first node; Receive the proxy rendering instruction sent by the first node, the proxy rendering instruction being retrieved by the first node from the memory; The proxy rendering instruction is restored to the rendering instruction, and the rendering instruction is executed to re-render the target page object on the target page.
[0008] According to one aspect of this disclosure, a page processing apparatus is provided, comprising: The generation module is used to generate rendering instructions in non-storage format in response to rendering requests for rendering target page objects on the target page. A recording module is used to execute the rendering instructions to render the target page object on the target page, and to record execution parameters during the execution of the rendering instructions; A storage module is used to generate proxy rendering instructions in a storage format based on the execution parameters, and to store the proxy rendering instructions in a memory; The restore module is configured to, in response to a re-rendering request for the target page, retrieve the proxy rendering instruction from the memory, restore the proxy rendering instruction to the rendering instruction, and execute the rendering instruction to re-render the target page object on the target page.
[0009] In the above scheme, the recording module is further used for: Create a proxy object to act as the rendering instructions; During the execution of the rendering instructions, the execution parameters are recorded through the proxy object.
[0010] In the above scheme, the proxy object includes a property assignment proxy method and a method invocation proxy method, the execution parameters include property assignment parameters or method invocation parameters, and the recording module is further used for: In response to triggering an attribute assignment operation during the execution of the rendering instruction, the attribute assignment proxy method in the proxy object is called to record the attribute assignment parameters of the attribute assignment operation; In response to a method invocation operation triggered during the execution of the rendering instruction, the method invocation proxy method in the proxy object is invoked to record the method invocation parameters of the method invocation operation.
[0011] In the above scheme, the recording module is further used for: Determine the update frequency of the target page; When the update frequency is less than the update frequency threshold, the proxy object is destroyed. When the update frequency is greater than or equal to the update frequency threshold, the proxy object is disabled. The disabled proxy object is to be enabled again when the target page is updated next time.
[0012] In the above scheme, the storage module is further used for: The target first syntax template used by the rendering instruction is determined, wherein the target first syntax template is one of a plurality of first syntax templates, and the plurality of first syntax templates correspond to different second syntax templates respectively; Based on the execution parameters and the target second syntax template corresponding to the target first syntax template, the proxy rendering instruction in storage format is generated; The restoration module is also used for: Determine the target second syntax template used by the proxy rendering instruction; Extract the execution parameters from the proxy rendering instructions; Based on the execution parameters and the target first syntax template corresponding to the target second syntax template, the rendering instructions in non-storage format are generated.
[0013] In the above scheme, the execution parameters include an operation identifier key and operation parameter values, and the storage module is further used for: The operation parameter values are serialized to obtain serialized values; Based on the operation identifier key and the serialization value, the proxy rendering instruction in storage format is generated; The restoration module is also used for: Extract the operation identifier key and the serialized value from the proxy rendering instruction; The serialized value is deserialized to obtain the operation parameter value; Based on the operation identifier key and the operation parameter value, the rendering instruction in non-storage format is generated.
[0014] In the above scheme, the execution parameters include an operation identifier key and an operation parameter value. The operation parameter value includes the creation method name of the rendering style object and the creation method parameter value. The restore module is further used for: Extract the operation identifier key, the creation method name, and the creation method parameter values from the proxy rendering instruction; The rendering style object is created based on the creation method name and the creation method parameter values; Based on the operation identifier key and the rendering style object, the rendering instructions are generated in a non-storage format.
[0015] In the above scheme, the execution parameters of the rendering instruction include the resource location of the target resource, and the restoration module is further configured to: A request to acquire the target resource is triggered based on the resource location; If the target resource is not obtained through the acquisition request at the first time point, the rendering instruction is executed to re-render the target page object on the target page according to the default resource; When the target resource is obtained through the acquisition request at the second time point, the rendering instruction is re-executed to re-render the target page object on the target page according to the target resource, wherein the second time point is later than the first time point.
[0016] In the above scheme, the storage module is further used for: The proxy rendering instruction is encrypted using the key to obtain the encrypted proxy rendering instruction. The encrypted proxy rendering instructions are stored in the memory; The key is generated based at least on the page identifier of the target page; The restoration module is also used for: Retrieve the encrypted proxy rendering instructions from the memory; The encrypted proxy rendering instruction is decrypted using the key to obtain the proxy rendering instruction.
[0017] In the above scheme, the page processing device also includes a frame rendering module, used for: Obtain the page template of the target page, the page template being injected with the key; The page frame of the target page is rendered according to the page template, and the page frame is used to contain the target page object; The storage module is also used for: The proxy rendering instruction is encrypted using the key in the page template to obtain the encrypted proxy rendering instruction.
[0018] In the above scheme, the storage module is further used for: The proxy rendering instructions are compressed to obtain compressed proxy rendering instructions; The compressed proxy rendering instructions are stored in the memory; The restoration module is also used for: Retrieve the compressed proxy rendering instructions from the memory; The compressed proxy rendering instruction is decompressed to obtain the proxy rendering instruction.
[0019] In the above scheme, the number of rendering instructions includes multiple types, and the storage module is further used for: In the memory, the proxy rendering instructions corresponding to the multiple rendering instructions are stored in the execution order of the multiple rendering instructions; The restoration module is also used for: Retrieve multiple proxy rendering instructions stored in the execution order from the memory, restore each proxy rendering instruction to its corresponding rendering instruction, and execute the multiple rendering instructions in the execution order.
[0020] According to one aspect of this disclosure, a page processing apparatus is provided for a first node, the page processing apparatus comprising: The first node generation module is used to generate non-storage format rendering instructions in response to the rendering request of the second node to render the target page object on the target page. The first node recording module is used to execute the rendering instructions and record the execution parameters during the execution of the rendering instructions; The first node storage module is used to generate a proxy rendering instruction in a storage format based on the execution parameters, and store the proxy rendering instruction in the memory; The first node sending module is configured to, in response to the second node's request to re-render the target page, retrieve the proxy rendering instruction from the memory, send the proxy rendering instruction to the second node, so that the second node restores the proxy rendering instruction to the rendering instruction, executes the rendering instruction, and re-renders the target page object on the target page.
[0021] According to one aspect of this disclosure, a page processing apparatus is provided for a second node, the page processing apparatus comprising: The second node sending module is used to send the rendering request for rendering the target page object on the target page to the first node, so that the first node generates a non-storage format rendering instruction, executes the rendering instruction, records the execution parameters during the execution of the rendering instruction, generates a storage format proxy rendering instruction based on the execution parameters, and stores the proxy rendering instruction in the memory. The second node sending module is also used to send a re-rendering request for the target page to the first node; The second node receiving module is used to receive the proxy rendering instruction sent by the first node, wherein the proxy rendering instruction is obtained by the first node from the memory; The second node restoration module is used to restore the proxy rendering instruction to the rendering instruction, execute the rendering instruction, and re-render the target page object on the target page.
[0022] According to one aspect of this disclosure, an electronic device is provided, including a memory and a processor, the memory storing a computer program, the processor executing the computer program to implement the page processing method as described above.
[0023] According to one aspect of this disclosure, a computer-readable storage medium is provided that stores a computer program, which, when executed by a processor, implements the page processing method described above. According to one aspect of this disclosure, a computer program product is provided, the computer program product comprising a computer program that is read and executed by a processor of an electronic device, causing the electronic device to perform the page processing method as described above.
[0024] Considering that rendering instructions generated in response to rendering requests generally do not support storage and cannot be used for re-rendering of page objects when the page is reopened, this embodiment of the present disclosure executes the rendering instructions after generation, records execution parameters during execution, generates a proxy rendering instruction in storage format based on the execution parameters, and stores the proxy rendering instruction in memory. Since the proxy rendering instruction is in storage format, it can be used for re-rendering of page objects when the page is reopened. Specifically, in response to a re-rendering request for the target page, the proxy rendering instruction is retrieved from memory. Then, the proxy rendering instruction is restored to the rendering instruction. Executing the restored rendering instruction allows the target page object to be re-rendered on the target page. This embodiment of the present disclosure, by replaying the rendering instruction, achieves re-rendering of page objects when the page is reopened while fully utilizing the rendering engine to accelerate rendering. Compared to the screenshot loading solution in related technologies, it can greatly improve the rendering efficiency of page objects.
[0025] Other features and advantages of this disclosure will be set forth in the following description and will be apparent in part from the description or may be learned by practicing the disclosure. The objectives and other advantages of this disclosure may be realized and obtained by means of the structures particularly pointed out in the description, claims and drawings. Attached Figure Description
[0026] The accompanying drawings are provided to further understand the technical solutions of this disclosure and constitute a part of the specification. They are used together with the embodiments of this disclosure to explain the technical solutions of this disclosure and do not constitute a limitation on the technical solutions of this disclosure. Figure 1 This is a system architecture diagram of a system to which the page processing method according to an embodiment of the present disclosure is applied; Figure 2 This is a schematic diagram illustrating the principle of a page processing method implemented by a terminal according to an embodiment of the present disclosure; Figure 3 This is a schematic diagram illustrating the principle of a page processing method according to an embodiment of the present disclosure, which is jointly implemented by a first node and a second node. Figure 4 This is a schematic diagram illustrating the principle of a page processing method according to an embodiment of the present disclosure, which is jointly implemented by a first node and a plurality of second nodes. Figure 5A This is a first schematic diagram illustrating the application of a page processing method according to an embodiment of the present disclosure to an electronic document scenario; Figure 5B This is a second schematic diagram illustrating the application of the page processing method according to embodiments of the present disclosure to an electronic document scenario; Figure 5C This is a third schematic diagram illustrating the application of the page processing method according to embodiments of the present disclosure to an electronic document scenario; Figure 6A This is a first schematic diagram illustrating the application of a page processing method according to an embodiment of the present disclosure to a video playback scenario; Figure 6B This is a second schematic diagram illustrating the application of the page processing method according to an embodiment of the present disclosure to a video playback scenario; Figure 7 This is a general flowchart of a page processing method according to an embodiment of the present disclosure; Figure 8 yes Figure 7 A detailed flowchart of step 720; Figure 9 This is a schematic diagram illustrating the relationship between the created proxy object and the rendering instructions; Figure 10 It is about Figure 7 A detailed flowchart of steps 730 and 740; Figure 11 It is about Figure 7 Another specific flowchart for steps 730 and 740; Figure 12 It is about Figure 11 A schematic diagram of the principle; Figure 13 It is about Figure 7 Another specific flowchart for steps 730 and 740; Figure 14 It is about Figure 13 A schematic diagram of the principle; Figure 15 This is a schematic diagram illustrating the principle of storing multiple proxy rendering instructions sequentially and executing multiple rendering instructions sequentially. Figure 16 This is a flowchart illustrating the overall process of the page processing method provided in the embodiments of this disclosure, achieved through the first node and the second node. Figure 17 This is a schematic diagram illustrating the principle of synchronous and asynchronous execution of rendering instructions; Figure 18 This is a schematic diagram illustrating the principle of a combined SSR and LCSR implementation scheme. Figure 19 This is a schematic diagram illustrating the principle of encrypting / decrypting recorded rendering commands; Figure 20 This is a block diagram of a page processing apparatus according to an embodiment of the present disclosure; Figure 21 This is a block diagram of a page processing apparatus applied to a first node according to an embodiment of the present disclosure; Figure 22This is a block diagram of a page processing apparatus applied to a second node according to an embodiment of the present disclosure; Figure 23 A terminal structure diagram is shown for implementing the page processing method provided in the embodiments of this disclosure; Figure 24 A server architecture diagram is shown for implementing the page processing method provided in the embodiments of this disclosure. Detailed Implementation To make the objectives, technical solutions, and advantages of this disclosure clearer, the following detailed description is provided in conjunction with the accompanying drawings and embodiments. It should be understood that the specific embodiments described herein are merely illustrative and are not intended to limit the scope of this disclosure.
[0027] Before providing a further detailed description of the embodiments of this disclosure, the terms and concepts used in these embodiments are explained, and they are subject to the following interpretations: 1) Page rendering: This refers to the process of transforming a series of low-level codes (such as HTML, CSS, JavaScript, etc.) into a visual page that can be viewed and interacted with through a series of processing steps. For example, when a request to access a webpage is received, the relevant code of the webpage is parsed and processed, and finally the webpage's title, body content, images, links, and other elements are displayed on the screen according to a predetermined layout and style. This complete process is called page rendering.
[0028] 2) Page Objects: These are various renderable entities with specific attributes involved in the page rendering process. They can be basic elements on the page, such as a button, an image, or a text paragraph, or complex components composed of multiple basic elements, such as a form component containing input boxes, dropdown menus, and a submit button. Each page object can have its own unique attributes, such as the text content of a button, the source address of an image, the position and size of the component, etc. These attributes determine the display effect of the page object on the page.
[0029] 3) Rendering directives: These are commands used to instruct how to render page objects. Rendering directives specify the various operations and parameter settings that page objects must follow during the rendering process, including but not limited to the drawing position, size, fill color, line style, text content, and font format of the page objects. Rendering directives exist in a specific format and can be recognized and executed by the rendering engine or related processing programs. Taking HTML5's Canvas as an example, the directive "context.fillRect(x, y, width, height)" is used to draw a rectangular area with a width of `width` and a height of `height` at the specified position (x, y) and fill it; this is a typical rendering directive. It's worth noting that the underlying design mechanism of rendering directives usually adopts Immediate Mode. Immediate Mode is designed to focus on instant rendering; it emphasizes that when a rendering directive is executed, the system immediately performs rendering operations according to the directive to quickly present the page object to the screen, rather than for data storage. Therefore, rendering directives typically do not support storage.
[0030] 4) Execution parameters: These are parameters generated or involved during the execution of rendering instructions, reflecting the relevant states and information of the rendering process. Execution parameters record the specific details of the rendering instructions during execution. For example, when drawing a graphic object, execution parameters may include the graphic's start and end coordinates, line width, color value, fill mode, etc.; when displaying text, execution parameters may cover information such as the text's font type, font size, alignment, and the text content itself.
[0031] 5) Proxy rendering instructions: also known as recorded rendering instructions, refers to instructions obtained by saving the execution parameters in a storable format. Proxy rendering instructions are not used to be executed, but are used to restore the rendering instructions when necessary.
[0032] 6) Proxy object: refers to an instance object used to proxy (or wrap) rendering instructions. When rendering instructions are executed, execution parameters can be recorded through specific methods in the proxy object.
[0033] Page rendering refers to the process of transforming low-level code into a visual page. The low-level code typically contains rendering instructions for rendering specific page objects. Taking Hyper Text Markup Language (HTML) as an example, the Canvas is an element provided by HTML for drawing graphics, capable of dynamically generating complex graphics, animations, and visualizations. Therefore, canvas-based rendering instructions are widely used. When a page object needs to be rendered, rendering instructions are generally generated and executed to render the page object. When the page is reopened, the rendering instructions need to be regenerated and executed, resulting in inefficient page rendering.
[0034] Because the underlying design mechanism of general rendering instructions does not support storage, in order to improve rendering efficiency when the page is reopened, the relevant technology usually involves taking a screenshot of the page object rendered by the rendering instructions and storing it. The stored screenshot is then loaded directly when the page is reopened. However, this technology has at least the following problems: 1) Screenshots are usually large in size, and loading them usually takes a long time, especially at high resolutions. This limits the technology's ability to accelerate page rendering; 2) The loaded screenshots are static and cannot provide interactive functions, such as clicking buttons, filling out forms, or navigating. This results in a lack of interaction based on the page, significantly degrading the user experience; 3) Screenshots lack responsive design capabilities. For different screen sizes, the loaded screenshots may be distorted or cropped, leading to display errors. For example, a screenshot obtained on a computer may not fully display important information when viewed on a mobile phone.
[0035] To address this, this disclosure provides a page processing method, apparatus, electronic device, related medium, and program product. Considering that rendering instructions generated in response to rendering requests generally do not support storage and cannot be used for re-rendering of page objects when the page is reopened, this disclosure, after generating the rendering instructions, executes the rendering instructions, records execution parameters during execution, generates a proxy rendering instruction in storage format based on the execution parameters, and stores the proxy rendering instruction in memory. Since the proxy rendering instruction is in storage format, it can be used for re-rendering of page objects when the page is reopened. Specifically, in response to a re-rendering request for the target page, the proxy rendering instruction is retrieved from memory. Then, the proxy rendering instruction is restored to a rendering instruction. Executing the restored rendering instruction allows the target page object to be re-rendered on the target page. Compared with related technologies, the embodiments of this disclosure can achieve at least the following technical effects: 1) By replaying rendering instructions, while realizing the re-rendering of page objects when the page is reopened, the rendering engine can be fully utilized to accelerate rendering. Compared with the screenshot loading solution in related technologies, the rendering efficiency of page objects can be greatly improved; 2) Re-rendering is still based on the rendering engine. The re-rendered page objects support dynamics and can provide interactive functions such as clicking buttons, filling in forms, or navigating, thereby improving the user experience; 3) It can adapt to different screen sizes and ensure display consistency on different screen sizes / different devices.
[0036] System architecture and scenario description of the embodiments disclosed herein Figure 1 This is a system architecture diagram of the page processing method according to embodiments of the present disclosure. It includes a terminal 140, an Internet 130, a gateway 120, a server 110, etc.
[0037] Terminal 140 can take various forms, including desktop computers, laptops, PDAs (personal digital assistants), mobile phones, vehicle terminals, and dedicated terminals. Furthermore, it can be a single device or a collection of multiple devices. For example, multiple desktop computers can be interconnected via a local area network, sharing a single monitor to work collaboratively, forming a single terminal 140. Terminal 140 can communicate with the Internet 130 via wired or wireless means to exchange data.
[0038] Server 110 refers to a computer system capable of providing certain services to terminal 140. Compared to ordinary terminal 140, server 110 has higher requirements in terms of stability, security, and performance. Server 110 can be a single high-performance computer in a network platform, a cluster of multiple high-performance computers, a portion of a single high-performance computer (e.g., a virtual machine), or a combination of portions of multiple high-performance computers (e.g., virtual machines). Server 110 can also communicate with the Internet 130 via wired or wireless means to exchange data.
[0039] Gateway 120, also known as an internetwork connector or protocol converter, is a computer system or device that acts as a translator, enabling network interconnection at the transport layer. It bridges the gap between two systems using different communication protocols, data formats, languages, or even completely different architectures. Gateways can also provide filtering and security functions. Messages sent from terminal 140 to server 110 are forwarded to the corresponding server 110 via gateway 120. Messages sent from server 110 to terminal 140 are also forwarded to the corresponding terminal 140 via gateway 120.
[0040] In some embodiments, the page processing method provided in this disclosure can be implemented via terminal 140. For example... Figure 2 As shown, in response to a rendering request to render a target page object on a target page, terminal 140 generates a non-storage-format rendering instruction; terminal 140 executes the rendering instruction to render the target page object on the target page, and records execution parameters during the execution of the rendering instruction; based on the execution parameters, terminal 140 generates a storage-format proxy rendering instruction and stores the proxy rendering instruction in the terminal memory; in response to a re-rendering request for the target page, terminal 140 retrieves the proxy rendering instruction from the terminal memory, restores the proxy rendering instruction to the rendering instruction, and executes the rendering instruction to re-render the target page object on the target page. In the above method, the entire page rendering and re-rendering process is completed locally on the terminal, which is suitable for scenarios with limited server resources or no network; moreover, it can avoid data transmission over the network, thereby improving page rendering efficiency; and, since relevant data during the rendering process (such as proxy rendering instructions) is stored locally on the terminal, it avoids the risk of leakage that may occur during network transmission, thus better protecting privacy and data security.
[0041] In some embodiments, the page processing method provided in this disclosure can be implemented jointly by a first node and a second node. Here, the first node is implemented as a server 110, and the second node is implemented as a terminal 140, for example. Figure 3As shown, terminal 140 sends a rendering request for rendering a target page object on the target page to server 110; server 110 responds to the rendering request by generating a non-storage format rendering instruction; server 110 executes the rendering instruction and records execution parameters during the execution process; based on the execution parameters, server 110 generates a storage format proxy rendering instruction and stores the proxy rendering instruction in the server's memory; terminal 140 sends a re-rendering request for the target page to server 110; server 110 responds to the re-rendering request by retrieving the proxy rendering instruction from the server's memory and sending the proxy rendering instruction to terminal 140; terminal 140 restores the proxy rendering instruction to the rendering instruction and executes the rendering instruction to re-render the target page object on the target page. In the above-described approach, the server typically possesses more powerful computing resources and processing capabilities. The server is responsible for generating rendering instructions and recording execution parameters, enabling it to perform these tasks more efficiently. The server stores the proxy rendering instructions in a storage format within its memory, achieving centralized data management. This facilitates data backup, maintenance, and updates, and also allows for unified management and analysis of proxy rendering instructions for different pages. The terminal only needs to restore and execute the received proxy rendering instructions, placing relatively low demands on its computing power and storage. This allows for better adaptation to various terminal devices with different performance levels, expanding the applicability of the embodiments of this disclosure.
[0042] In some embodiments, the page processing method provided in this disclosure can be implemented by a first node and multiple second nodes, and all the multiple second nodes can access the target page. Here, the first node is implemented as a server 110, and the second node is implemented as a terminal 140, for example. Figure 4As shown, taking terminals 140-1 and 140-2 as examples, terminal 140-1 sends a rendering request to server 110 to render the target page object on the target page. Server 110 responds to the rendering request by generating a non-stored rendering instruction. Server 110 executes the rendering instruction and records execution parameters during the execution process. Based on the execution parameters, server 110 generates a stored-format proxy rendering instruction and stores the proxy rendering instruction in the server's memory. Terminal 140-2 sends a re-rendering request to server 110. Server 110 responds to the re-rendering request by retrieving the proxy rendering instruction from the server's memory and sending the proxy rendering instruction to terminal 140-2. Terminal 140-2 restores the proxy rendering instruction to the rendering instruction and executes the rendering instruction to re-render the target page object on the target page. It is worth noting that the re-rendering request initiated by terminal 140-2 can be understood as a rendering request initiated by terminal 140-2 after terminal 140-1 has initiated its rendering request. In this way, when multiple terminals can access the target page, the proxy rendering instructions stored on the server can be shared by multiple terminals. That is, the proxy rendering instructions stored on the server can be used to respond to the re-rendering requests initiated by each terminal, which can avoid redundant calculations and resource waste, and improve the overall resource utilization. Furthermore, multiple terminals re-rendering based on the same proxy rendering instructions can ensure that the target page displayed on different terminals is consistent, providing a good synchronization experience. In addition, it has good scalability. No matter how much the number of terminals increases, the requests initiated by each terminal can be effectively handled through centralized management and scheduling of the server, meeting the needs of large-scale terminal usage.
[0043] The embodiments disclosed herein can be applied in various scenarios, such as Figures 5A to 5C The electronic document scenario shown and Figures 6A to 6B The video playback scene shown.
[0044] (a) Electronic document scenario.
[0045] Electronic documents are documents stored in electronic media in the form of digital signals, created, edited, stored, transmitted, and viewed through terminals or other electronic devices. They can be presented in various formats, including but not limited to text, images, audio, and video, and can carry various types of information. They rely on electronic technology to realize their functions and applications. In electronic document scenarios, electronic document applications display pages so that users can perform editing operations, such as creating tables, adding or deleting rows and columns, and adding or deleting data. For ease of understanding, this will be combined with... Figure 2 The architecture shown illustrates an electronic document scenario. Of course, other architectures provided in the embodiments of this disclosure can also be applied to electronic document scenarios.
[0046] like Figure 5AAs shown, page 510 of the electronic document application running on terminal 140 is displayed. Page 510 includes various views, such as "Member Assignment," "Task Progress Dashboard," "Task Priority Dashboard," and "Task List." The currently displayed view is the "Task List" view. The "Task List" view includes task bars corresponding to multiple users. Each user's task bar includes the tasks that user needs to perform. For example, in user 1's task bar, it shows that user 1's tasks include data tracking reporting, collaborative space construction, and product page optimization. It is worth noting that in Figure 5A In the example shown, the "Task List" view is rendered based on rendering instructions, so it is named Page Object 520.
[0047] In an electronic document scenario, the page object to be rendered on page 510 may be updated frequently. For example... Figure 5B As shown, page object 520 includes multiple taskbars corresponding to different users, arranged from top to bottom as the taskbar for user 1, user 2, and user 3. At this time, terminal 140 receives an operation (editing operation) to insert the taskbar for user 3 onto the taskbar for user 2, triggering a rendering request to render a new page object (referred to as page object 530) on page 510. In response to the rendering request to render page object 530 on page 510, terminal 140 generates a non-storage format rendering instruction; terminal 140 executes the rendering instruction to render page object 530 on page 510, as follows... Figure 5C As shown, in page object 530, the taskbar corresponding to user 3 is located above the taskbar corresponding to user 2.
[0048] In electronic document scenarios, users of terminal 140 may need to repeatedly open page 510. For example, if the user of terminal 140 is a manager, they may need to frequently open page 510 to view subordinates' work tasks. Therefore, in this embodiment of the disclosure, terminal 140 records execution parameters during the execution of rendering instructions; based on the execution parameters, terminal 140 generates a proxy rendering instruction in a storage format and stores the proxy rendering instruction in the terminal memory; in response to a re-rendering request for page 510, terminal 140 retrieves the proxy rendering instruction from the terminal memory, restores the proxy rendering instruction to the rendering instruction, and executes the rendering instruction to render page object 530 on page 510. In this way, page object 530 can be rendered quickly, reducing user waiting time. At the same time, the re-rendered page object 530 supports dynamic behavior. For example, the display order of the taskbars corresponding to user 1, user 2, and user 3 can be arbitrarily adjusted, which can improve the user experience. In addition, the re-rendered page object 530 can be displayed correctly for different screen sizes and different devices, that is, the taskbars corresponding to user 1, user 2, and user 3 can be displayed without content omissions or display misalignments.
[0049] (ii) Video playback scenario.
[0050] Video playback refers to the transmission of multimedia content in digital signal form via a network or storage medium. In a video playback scenario, the video playback application displays a playback page, allowing users to browse the videos and perform actions such as play, pause, fast forward, adjust volume, and switch resolution. For ease of understanding, this will be combined with... Figure 3 The architecture shown illustrates a video playback scenario. Of course, other architectures provided in this disclosure can also be applied to video playback scenarios.
[0051] like Figure 6A As shown, page 610 of a video playback application running on terminal 140 is illustrated. Page 610 includes page object 620, which refers to the area where the video is located, including the video playback box, progress bar, play / pause button, etc., but does not include the video itself.
[0052] In video playback scenarios, users of terminal 140 may need to repeatedly open page 610. For example, if the video playing on page 610 is a live video stream, and there are many viewers, the live video stream often fails to load or experiences playback stuttering. In this case, the user will trigger the reopening of page 610. To address this, in this embodiment, server 110 records execution parameters during the execution of rendering instructions (rendering instructions are used to render page object 620 on page 610); server 110 generates a proxy rendering instruction in a storage format based on the execution parameters and stores the proxy rendering instruction in the server memory; in response to a re-rendering request from terminal 140 to render page object 620 on page 610, server 110 retrieves the proxy rendering instruction from the server memory and sends the proxy rendering instruction to terminal 140; terminal 140 restores the proxy rendering instruction to the rendering instruction and executes the rendering instruction to render page object 620 on page 610. Figure 6B As shown, a re-rendered page object 620 is displayed, showing a completely new video frame. This allows page object 620 to be rendered quickly to support video playback without requiring additional time to wait for it to finish rendering; simultaneously, the re-rendered page object 620 supports dynamic behavior, such as... Figure 6B As shown, the re-rendered page object 620 includes play / pause buttons, allowing users to play / pause videos by clicking the play / pause buttons, thus improving the user experience. At the same time, for different screen sizes and different devices, the re-rendered page object 620 can display the video playback box, progress bar, play / pause buttons, etc. correctly, and the video playback box can accurately and appropriately accommodate the video, that is, the video screen will not exceed the video playback box, nor will it only occupy a part of the video playback box.
[0053] It is worth noting that, Figures 1 to 4 The system architecture shown and Figures 5A to 6B The scenarios shown are for the purpose of more clearly illustrating the technical solutions of the embodiments of this disclosure, and do not constitute a limitation on the technical solutions provided by the embodiments of this disclosure. As those skilled in the art will know, with the evolution of page processing technology and the emergence of new business scenarios, the technical solutions provided by the embodiments of this disclosure are also applicable to similar technical problems.
[0054] General Description of Embodiments in this Disclosure According to one embodiment of this disclosure, a page processing method, apparatus, electronic device, related media, and program product are provided.
[0055] The page processing method of this disclosure can be executed on terminal 140, on server 110, or partly on terminal 140 and partly on server 110.
[0056] Taking the page processing method of this disclosure embodiment executed on terminal 140 as an example, as follows: Figure 7 As shown, a page processing method according to an embodiment of this disclosure includes: Step 710: In response to a rendering request to render a target page object on the target page, generate rendering instructions in a non-storage format; Step 720: Execute rendering instructions to render the target page object on the target page, and record execution parameters during the execution of rendering instructions; Step 730: Based on the execution parameters, generate proxy rendering instructions in storage format and store the proxy rendering instructions in memory; Step 740: In response to the re-rendering request for the target page, retrieve the proxy rendering instructions from the memory, restore the proxy rendering instructions to the rendering instructions, and execute the rendering instructions to re-render the target page object on the target page.
[0057] First, a brief description of steps 710-740 above will be given.
[0058] Page rendering refers to the process of transforming a series of low-level codes (such as HTML, CSS, JavaScript, etc.) into a visual page that can be viewed and interacted with through a series of processes. A page object refers to various renderable entities with specific attributes involved in the page rendering process. It can be a basic element on the page, such as a button, an image, or a text paragraph, or it can be a complex component composed of multiple basic elements, such as a form component containing input boxes, drop-down menus, and a submit button. During page rendering, one or more page objects need to be rendered. For ease of understanding, the following explanation uses rendering a target page object on a target page as an example to illustrate steps 710-740 above. Here, the target page refers to any page, and the target page object refers to the page object that needs to be rendered on the target page.
[0059] In step 710, in response to a rendering request to render a target page object on the target page, a non-storage format rendering instruction is generated. In this embodiment of the disclosure, the rendering request is triggered when the target page object needs to be rendered on the target page for the first time, while subsequent re-rendering requests are triggered when the target page object needs to be rendered on the target page for subsequent times. For example, at a first time point, a target page object is created on the target page, and the target page object needs to be rendered. Since this is the first rendering, a rendering request is triggered. At a second time point after the first time point, the same target page object needs to be re-rendered (e.g., the target page is closed and reopened), and a re-rendering request is triggered. At a third time point after the second time point, the target page is updated, such as modifying the text content in the target page object, adjusting the size of the target page object, modifying the fill color of the target page object, deleting / adding the target page object, etc. At this time, a new target page object needs to be rendered. Since the new target page object is being rendered for the first time, a rendering request is triggered. It is worth noting that the above-mentioned rendering request to render a target page object on the target page can also be understood as a rendering request for the target page itself, that is, the target page object needs to be rendered during the rendering process of the target page.
[0060] Once a rendering request to render the target page object on the target page has been triggered, the rendering process for the target page object will begin. During this process, rendering instructions are first generated. A rendering instruction is a command that instructs how to render the target page object. It specifies the various operations and parameter settings that the target page object must follow during rendering, including but not limited to the drawing position, size, fill color, line style, text content, and font format of the target page object. The underlying design mechanism of rendering instructions typically uses Immediate Mode. Immediate Mode is designed to focus on real-time rendering; it emphasizes that when a rendering instruction is executed, rendering operations are performed immediately according to the rendering instruction to quickly present the target page object to the screen, rather than for data storage. Therefore, rendering instructions typically do not support storage; that is, the generated rendering instructions are in a non-storage format. In some embodiments, the type of rendering instruction can be a Canvas rendering instruction.
[0061] After generating the rendering instructions, the process proceeds to step 720, which involves executing the rendering instructions to render the target page object on the target page. Considering that rendering instructions are not stored in a specific format, it is impossible to re-render the target page object by storing the rendering instructions. Therefore, this embodiment records execution parameters during the execution of the rendering instructions. Execution parameters refer to parameters generated or involved during the execution of the rendering instructions that reflect the relevant states and information of the rendering process. Execution parameters record the specific details of the rendering instructions during execution. For example, when rendering a graphic, execution parameters may include the graphic's start coordinates, end coordinates, line width, color value, fill mode, etc.; when rendering text, execution parameters may cover information such as the text's font type, font size, alignment, and the text content itself.
[0062] After recording the execution parameters, the process proceeds to step 730, where proxy rendering instructions in a storage format are generated based on the execution parameters and stored in memory. Essentially, this process stores non-storage-format rendering instructions using a storage format. It's worth noting that although proxy rendering instructions are formally called instructions, they do not have the function of being executed to render the target page object; they are only used to store execution parameters. Furthermore, the type of memory is not limited; it can be persistent or non-persistent. Persistent memory includes hard disk drives (HDDs) and solid-state drives (SSDs), while non-persistent memory includes random access memory (RAM) and cache memory. For example, considering the high data read / write efficiency of cache memory, it can be used to store proxy rendering instructions, thereby helping to improve the rendering efficiency of the target page object.
[0063] Based on the stored proxy rendering instructions, in step 740, in response to a re-rendering request for the target page, the proxy rendering instructions are retrieved from memory, restored to rendering instructions, and executed to re-render the target page object on the target page. The triggering condition for the re-rendering request is not limited; it can be a request to close and reopen the target page. For a triggered re-rendering request for the target page (which can also be understood as a re-rendering request to re-render the target page object on the target page), the proxy rendering instructions are retrieved from memory, the execution parameters are extracted from the proxy rendering instructions, and the rendering instructions are restored. Finally, the rendering instructions are executed to re-render the target page object on the target page. Since the rendering instructions restored in step 740 and the rendering instructions generated in step 710 contain the same execution parameters, their consistency is guaranteed, thus ensuring that the re-rendered target page object displays the same effect as the initial rendering.
[0064] It is worth noting that when faced with a re-rendering request, regenerating the rendering instructions would take a lot of time to organize and format the data related to the target page object in order to generate the rendering instructions. However, the embodiments of this disclosure only need to construct the execution parameters according to the syntax rules of the rendering instructions to restore the rendering instructions. Compared with the method of regenerating the rendering instructions, there is no need to perform time-consuming operations such as organizing and formatting, which is obviously more efficient and faster, and can re-render the target page object on the target page more quickly. Furthermore, the embodiments disclosed herein utilize a rendering engine (or related processing program) to execute the restored rendering instructions to achieve re-rendering, which is more efficient than loading screenshots. The reasons for this are likely multifaceted: for example, a rendering engine can directly utilize hardware acceleration (such as GPU acceleration) to quickly render the target page object onto the screen, while loading screenshots requires loading the screenshot into memory before displaying it on the screen, and cannot utilize hardware acceleration, thus resulting in lower efficiency; another example is that rendering instructions typically only contain necessary execution parameters, such as coordinates, colors, and textures, and only a short rendering instruction needs to be executed during re-rendering to achieve fast rendering, while a screenshot is a complete image, usually with a large amount of data, and screenshots often contain a lot of irrelevant information, so loading screenshots takes more time.
[0065] It is worth noting that step 740 can be executed multiple times if the target page is not updated. That is, re-rendering can be achieved by restoring the rendering instructions for re-rendering requests initiated at different times.
[0066] It's worth noting that a single target page typically involves multiple rendering instructions. This could be because there are multiple target page objects, or because a single target page object requires multiple rendering instructions to render. For example, if the target page object is a colored rectangle, it needs to be drawn using one rendering instruction, such as `context.fillRect(50, 50, 100, 100)`, and filled with color using another instruction, such as `context.fillStyle = 'blue'`. Alternatively, it could be a combination of both.
[0067] In steps 710-740 above, considering that rendering instructions generated in response to rendering requests generally do not support storage and cannot be used for re-rendering of page objects when the page is reopened, this embodiment of the present disclosure executes the rendering instructions after they are generated, records execution parameters during execution, generates a proxy rendering instruction in storage format based on the execution parameters, and stores the proxy rendering instruction in memory. Since the proxy rendering instruction is in storage format, it can be used for re-rendering of page objects when the page is reopened. Specifically, in response to a re-rendering request for the target page, the proxy rendering instruction is retrieved from memory. Then, the proxy rendering instruction is restored to the rendering instruction. Executing the restored rendering instruction allows the target page object to be re-rendered on the target page. This embodiment of the present disclosure, by replaying the rendering instruction, achieves re-rendering of page objects when the page is reopened, while fully utilizing the rendering engine to accelerate rendering. Compared to the screenshot loading solution in related technologies, it can greatly improve the rendering efficiency of page objects; at the same time, the re-rendered page object supports dynamic interaction, providing interactive functions such as clicking buttons, filling out forms, or navigation; and it can adapt to different screen sizes, ensuring display consistency on different screen sizes / different devices.
[0068] Steps 710-740 will now be described in detail. Since step 710 has already been described in considerable detail above, it will not be repeated here.
[0069] Detailed description of step 720 like Figure 7 As shown, in step 720, a rendering instruction is executed to render the target page object on the target page, and the execution parameters are recorded during the execution of the rendering instruction.
[0070] During the initial rendering of the target page object, generated rendering instructions are executed to render the target page object on the target page, and execution parameters are recorded during the execution of the rendering instructions. There are no restrictions on how the execution parameters are recorded; for example, the rendering instructions themselves can be modified to add code for recording, so that the execution parameters are automatically stored in a log or a specific data structure during the execution of the rendering instructions.
[0071] In some embodiments, the execution parameters include an operation identifier key and an operation parameter value. The operation identifier key is used to identify the rendering operation triggered during the execution of the rendering instruction, such as an attribute assignment operation or a method call operation; the operation parameter value is a parameter related to the triggered rendering operation.
[0072] In some embodiments, such as Figure 8 As shown, Figure 7 The illustrated step 720 includes: Step 810: Create a proxy object for proxying rendering instructions; Step 820: During the execution of rendering instructions, the execution parameters are recorded through the proxy object.
[0073] Steps 810 to 820 will now be described in detail.
[0074] In step 810, a proxy object is created to proxy rendering instructions.
[0075] First, let's introduce the definition of a proxy object. A proxy object is a design pattern and language feature that allows for the recording, control, or other custom processing of operations on another object (such as property assignment, method calls, and other rendering operations).
[0076] Based on this, in this embodiment of the disclosure, a proxy object can be created for proxying rendering instructions. For example... Figure 9 As shown, creating a proxy object to act as a proxy for rendering instructions is equivalent to encapsulating the rendering instructions inside the proxy object. In this way, the proxy object can record or control the execution of rendering instructions.
[0077] In step 820, during the execution of rendering instructions, execution parameters are recorded through a proxy object.
[0078] Based on the creation of a proxy object for handling rendering instructions, execution parameters can be recorded through the proxy object during the execution of the rendering instructions. For example, the proxy object includes a proxy method for recording execution parameters. Once the rendering instruction is executed, the proxy method in the proxy object is called to record the execution parameters. It is worth noting that the "method" in the proxy method and method call involved in this disclosure is a concept in object-oriented programming, specifically referring to a function used to perform a specific task or operation.
[0079] Proxy objects are non-intrusive, meaning that using a proxy object does not require modifying the code of the rendering instructions themselves; it simply records the execution process of the rendering instructions. Because the rendering instructions themselves do not need to be changed, proxy objects can be easily integrated into existing codebases. When it is necessary to record execution parameters, only the proxy object needs to be created, without affecting other existing functionalities.
[0080] It's worth noting that proxying rendering instructions via a proxy object can refer to proxying the rendering context invoked by the rendering instruction. The rendering instruction uses the rendering context to perform rendering. Taking Canvas rendering instructions as an example, Canvas rendering instructions typically call the context (rendering context) to perform rendering. The context is obtained through the `getContext` method and provides a series of methods and properties for rendering on the Canvas. For example, the `fillRect` method is used to draw the fill rectangle, the `strokeText` method is used to draw the text border, and the `lineWidth` property is used to set the line width. Therefore, when there are multiple rendering instructions, a proxy object can be used to proxy the rendering context, thus achieving unified proxying for multiple rendering instructions. For example, by proxying the context, a proxy object can be used to proxy multiple Canvas rendering instructions. This approach avoids code redundancy caused by adding code to each rendering instruction.
[0081] In some embodiments, the proxy object includes a property assignment proxy method and a method invocation proxy method. The execution parameters include property assignment parameters or method invocation parameters. During the execution of rendering instructions, the execution parameters are recorded through the proxy object, including: in response to a property assignment operation being triggered during the execution of rendering instructions, calling the property assignment proxy method in the proxy object to record the property assignment parameters of the property assignment operation; and in response to a method invocation operation being triggered during the execution of rendering instructions, calling the method invocation proxy method in the proxy object to record the method invocation parameters of the method invocation operation.
[0082] Here, considering that property assignment operations or method calls may be triggered during the execution of rendering instructions, the created proxy object includes two types of proxy methods: a property assignment proxy method (collectSetter method) and a method call proxy method (collectMethod method). During the execution of rendering instructions, if a property assignment operation is triggered, the property assignment proxy method in the proxy object is called to record the property assignment parameters; if a method call operation is triggered, the method call proxy method in the proxy object is called to record the method call parameters.
[0083] As mentioned above, execution parameters can include an operation identifier key and an operation parameter value. For attribute assignment operations, the execution parameter is specifically the attribute assignment parameter. The operation identifier key in the attribute assignment parameter is the attribute name, and the operation parameter value is the attribute value. For example, in the rendering directive `context.fillStyle = 'red'`, `fillStyle` is an attribute of the `context` rendering context, specifically used to define the color, gradient, or pattern used when filling a shape. `red` is the attribute value assigned to the `fillStyle` attribute, specifically the color red. In this example, the operation identifier key is the attribute name `fillStyle`, and the operation parameter value is the attribute value `red`.
[0084] For method call operations, the execution parameters are specifically the method call parameters. The operation identifier key in the method call parameters is the method name, and the operation parameter value is the method argument passed to the method. For example, the rendering instruction is `context.clearRect(0, 0, 100, 100)`. `clearRect` is a method of the `context` rendering context, specifically used to clear the drawn content within a specified rectangular area. `(0, 0, 100, 100)` are the parameters passed to the `clearRect` method. The first parameter value 0 represents the x-coordinate of the top-left corner of the rectangle, the second parameter value 0 represents the y-coordinate of the top-left corner of the rectangle, the third parameter value 100 represents the width of the rectangle, and the fourth parameter value 100 represents the height of the rectangle. In this example, the operation identifier key is the method name `clearRect`, and the operation parameter value is the method argument `(0, 0, 100, 100)`.
[0085] In this way, the corresponding proxy method in the proxy object can be called in a targeted manner according to the type of rendering operation triggered during the execution of the rendering instruction, so as to accurately record the execution parameters. For example, the property assignment parameters are recorded for property assignment operations, and the method call parameters are recorded for method call operations.
[0086] In some embodiments, after recording execution parameters through a proxy object, the page processing method further includes performing any of the following processes: destroying the proxy object; or disabling the proxy object, wherein the disabled proxy object is used to enable the target page on the next update.
[0087] Here, after recording the execution parameters through the proxy object, the proxy object's task is complete, and it can be processed.
[0088] One approach is to destroy the proxy object, for example, using the `dispose` method. This releases the system resources occupied by the proxied object, allowing them to be used for other tasks. After destroying the proxy object, if the target page generates new rendering instructions during the next update, and the proxy object is needed to record the execution parameters of these new instructions, then the proxy object needs to be recreated.
[0089] Another approach is to disable the proxy object (without destroying it). The disabled proxy object is then reactivated the next time the target page is updated. For example, the `unProxy` method can be used to cancel the proxy relationship between the proxy object and the rendering directive, thus disabling the proxy object. If a new rendering directive is generated during the next update of the target page, the `Proxy` method can be used to establish a proxy relationship between the proxy object and the new rendering directive, thus reactivating the proxy object. This approach improves the reusability of the proxy object, allowing it to be reused long-term after creation, while avoiding the overhead of repeatedly creating proxy objects.
[0090] In practical applications, any of the above-mentioned handling methods can be manually configured to manage the proxy object. In some embodiments, the most suitable handling method can also be automatically selected. For example, the update frequency of the target page can be determined; when the update frequency is less than the update frequency threshold, the proxy object is destroyed; when the update frequency is greater than or equal to the update frequency threshold, the proxy object is disabled, and the disabled proxy object is used to be enabled the next time the target page is updated. The update frequency of the target page can be obtained by statistically analyzing the historical update data of the target page. When the update frequency is less than the update frequency threshold, it indicates that it is not necessary to frequently record execution parameters through the proxy object, therefore the proxy object is destroyed, thereby freeing up system resources for other tasks; when the update frequency is greater than or equal to the update frequency threshold, it indicates that it is necessary to frequently record execution parameters through the proxy object, therefore, to avoid the huge overhead caused by frequently creating proxy objects, the proxy object is disabled, and the disabled proxy object is used to be enabled the next time the target page is updated.
[0091] like Figure 8 As shown, this embodiment of the disclosure creates a proxy object for handling rendering instructions. During the execution of the rendering instructions, the proxy object records the execution parameters, thus achieving non-intrusive recording without modifying the rendering instruction code itself. Furthermore, the proxy object can support recording the execution parameters of multiple rendering instructions, effectively avoiding code redundancy.
[0092] Joint detailed description of steps 730 and 740 In some embodiments, such as Figure 10 As shown, Figure 7The illustrated step 730 includes: Step 1010: Determine the target first syntax template used by the rendering instruction, wherein the target first syntax template is one of a variety of first syntax templates, and the variety of first syntax templates correspond to different second syntax templates. Step 1020: Based on the execution parameters and the target second syntax template corresponding to the target first syntax template, generate a proxy rendering instruction in storage format; Step 1030: Store the proxy rendering instructions in memory; like Figure 10 As shown, Figure 7 The illustrated step 740 includes: Step 1040: In response to the re-rendering request for the target page, retrieve the proxy rendering instruction from the memory; Step 1050: Determine the target second syntax template used by the proxy rendering instruction; Step 1060: Extract execution parameters from proxy rendering instructions; Step 1070: Based on the execution parameters and the target first syntax template corresponding to the target second syntax template, generate rendering instructions in non-storage format; Step 1080: Execute rendering instructions to re-render the target page object on the target page.
[0093] Steps 1010 to 1080 will be described in detail below.
[0094] In step 1010, the target first syntax template used by the rendering instruction is determined, wherein the target first syntax template is one of a variety of first syntax templates, and the variety of first syntax templates correspond to different second syntax templates.
[0095] Here, the first syntax template represents the syntax template applicable to rendering instructions, and the second syntax template represents the syntax template applicable to proxy rendering instructions. Syntax templates specify the syntax symbols and / or syntax structures to be used in generating the corresponding instructions, but are not limited in this regard. Rendering instructions can be generated using any of the multiple first syntax templates, depending on the rendering operation to be triggered by the rendering instruction. Taking Canvas rendering instructions as an example, the rendering operation to be triggered can be a property assignment operation or a method call operation. The first syntax template corresponding to a property assignment operation is `context.key = 'value'`, where `key` represents the property name and `value` represents the property value; the first syntax template corresponding to a method call operation is `context.key(value)`, where `key` represents the method name and `value` represents the method parameters. Based on this, the target first syntax template used by the rendering instruction can be determined.
[0096] It's worth noting that different first syntax templates correspond to different second syntax templates. This can be understood as each rendering operation uniquely corresponding to one first syntax template and one second syntax template. For example, the second syntax template for property assignment is `const record=`${key}[${value}]`, and the second syntax template for method call is `const record=`${key}(${value})`. In summary, the second syntax template for property assignment uses square brackets `{}` to separate `key` and `value`, while the second syntax template for method call uses parentheses `()`. That is, the syntax notation used is different. Here, `${key}` is a placeholder; during the actual instruction generation, `${key}` will be replaced with the actual value stored in the `key` variable, and the same applies to `${value}`.
[0097] In step 1020, a proxy rendering instruction in storage format is generated based on the execution parameters and the target second syntax template corresponding to the target first syntax template.
[0098] Here, a target second syntax template corresponding to the target first syntax template can be determined from a variety of second syntax templates. Then, based on the execution parameters and the target second syntax template, a proxy rendering instruction in a storage format is generated.
[0099] In step 1030, proxy rendering instructions are stored in memory.
[0100] Step 1030 has been described in detail above and will not be repeated here.
[0101] In step 1040, in response to a re-rendering request for the target page, a proxy rendering instruction is retrieved from memory.
[0102] Step 1040 has been described in detail above and will not be repeated here.
[0103] In step 1050, the target second syntax template used by the proxy rendering instruction is determined.
[0104] Here, after retrieving the proxy rendering instructions from memory, the target second syntax template used by the proxy rendering instructions is determined.
[0105] In step 1060, execution parameters are extracted from the proxy rendering instructions.
[0106] Since the target second syntax template specifies how execution parameters are stored, execution parameters can be accurately extracted from proxy rendering instructions.
[0107] In step 1070, a non-storage format rendering instruction is generated based on the execution parameters and the target first syntax template corresponding to the target second syntax template.
[0108] Since the correspondence between the first and second syntax templates is known, after determining the target second syntax template used by the proxy rendering instruction, the target first syntax template corresponding to the target second syntax template can be further determined. Then, based on the execution parameters and the target first syntax template, a non-stored format rendering instruction is generated to realize the restoration of the rendering instruction.
[0109] For example, if the rendering operation is specifically a property assignment operation, then the proxy rendering instruction using `const record=`${key}[${value}]` can be restored to the rendering instruction using `context.key = 'value'`; as another example, if the rendering operation is specifically a method call operation, then the proxy rendering instruction using `const record=`${key}(${value})` can be restored to the rendering instruction using `context.key(value)`.
[0110] In step 1080, rendering instructions are executed to re-render the target page object on the target page.
[0111] Step 1080 has been described in detail above and will not be repeated here.
[0112] like Figure 10 As shown, this embodiment of the present disclosure clarifies the correspondence between the first syntax template and the second syntax template. Based on the target first syntax template used by the rendering instruction, a proxy rendering instruction is generated based on the target second syntax template corresponding to the target first syntax template. The rendering instruction is restored based on the target first syntax template, which can ensure the standardization and accuracy of the whole process and ensure that the rendering instruction can be accurately restored.
[0113] In some embodiments, such as Figure 11 As shown, Figure 7 The illustrated step 730 includes: Step 1110: Serialize the operation parameter values to obtain serialized values; Step 1120: Generate proxy rendering instructions in storage format based on the operation identifier key and serialization value; Step 1130: Store the proxy rendering instructions in memory; like Figure 11 As shown, Figure 7 The illustrated step 740 includes: Step 1140: In response to the re-rendering request for the target page, retrieve the proxy rendering instruction from the memory; Step 1150: Extract the operation identifier key and serialization value from the proxy rendering instruction; Step 1160: Deserialize the serialized value to obtain the operation parameter value; Step 1170: Generate rendering instructions in non-storage format based on the operation identifier key and operation parameter value; Step 1180: Execute rendering instructions to re-render the target page object on the target page.
[0114] Steps 1110 to 1180 described above will now be described in detail.
[0115] In step 1110, the operation parameter values are serialized to obtain serialized values.
[0116] like Figure 12 As shown, the execution parameters include an operation identifier key and an operation parameter value. Considering that the operation parameter value may contain various complex data types such as reference types, and that data of such reference types does not support storage, in this embodiment of the disclosure, the operation parameter value is serialized, that is, the operation parameter value is converted into a string format that can be stored, to obtain a serialized value. For example, the operation parameter value can be serialized using the JSON.stringify method to obtain a serialized value in JSON string format.
[0117] It is worth noting that operation identifier keys are usually simple strings or fixed identifiers, which have clear semantics and fixed formats. Therefore, they do not need to be serialized and can be kept in their original format.
[0118] In step 1120, a proxy rendering instruction in storage format is generated based on the operation identifier key and the serialization value.
[0119] After serializing the operation parameter values, a proxy rendering instruction in a storage format is generated based on the operation identifier key and the serialized value. Combined with... Figure 10 In the example corresponding to the embodiment, assuming that the serialization process is implemented using the JSON.stringify method, the second syntax template corresponding to the property assignment operation is const record=`${key}[${JSON.stringify(value)}]`, and the second syntax template corresponding to the method call operation is const record=`${key}(${JSON.stringify(value)})`.
[0120] In step 1130, proxy rendering instructions are stored in memory.
[0121] Step 1130 has been described in detail above and will not be repeated here.
[0122] In step 1140, in response to a re-rendering request for the target page, a proxy rendering instruction is retrieved from memory.
[0123] Step 1140 has been described in detail above and will not be repeated here.
[0124] In step 1150, the operation identifier key and serialization value are extracted from the proxy rendering instruction.
[0125] For example, if the syntax template used by the proxy rendering instruction is known, the operation identifier key and serialization value can be accurately extracted from the proxy rendering instruction.
[0126] In step 1160, the serialized value is deserialized to obtain the operation parameter value.
[0127] Since rendering instructions need to be generated based on the operation parameter values, the serialized values are deserialized to obtain the operation parameter values. Taking the JSON.stringify method as an example for serializing the operation parameter values, the JSON.parse method can be used to deserialize the serialized values.
[0128] In step 1170, a non-storage format rendering instruction is generated based on the operation identifier key and the operation parameter value.
[0129] Since the original operation parameter values have been obtained, rendering instructions in non-storage format can be generated based on the operation identifier key and the operation parameter values.
[0130] In step 1180, rendering instructions are executed to re-render the target page object on the target page.
[0131] Step 1180 has been described in detail above and will not be repeated here.
[0132] like Figure 11 As shown, the embodiments of this disclosure effectively solve the compatibility problem of operation parameter values during storage through serialization and deserialization processing, improve the reliability and stability of rendering instruction restoration and execution, reduce the complexity of data storage, enhance adaptability to different data structures, and facilitate efficient re-rendering of target page objects.
[0133] In some embodiments, such as Figure 13 As shown, Figure 7 The illustrated step 730 includes: Step 1310: Based on the execution parameters, generate proxy rendering instructions in storage format; Step 1320: Encrypt the proxy rendering instruction according to the key to obtain the encrypted proxy rendering instruction, wherein the key is generated based at least on the page identifier of the target page; Step 1330: Store the encrypted proxy rendering instructions in the memory; like Figure 13 As shown, Figure 7 The illustrated step 740 includes: Step 1340: In response to the re-rendering request for the target page, retrieve the encrypted proxy rendering instruction from the memory; Step 1350: Decrypt the encrypted proxy rendering command according to the key to obtain the proxy rendering command; Step 1360: Restore the proxy rendering instruction to the rendering instruction, execute the rendering instruction, and re-render the target page object on the target page.
[0134] Steps 1310 to 1360 described above will now be described in detail.
[0135] In step 1310, proxy rendering instructions in storage format are generated based on the execution parameters.
[0136] Step 1310 has been described in detail above and will not be repeated here.
[0137] In step 1320, the proxy rendering instruction is encrypted according to the key to obtain the encrypted proxy rendering instruction, wherein the key is generated based at least on the page identifier of the target page.
[0138] If generated proxy rendering instructions are directly stored in memory, they are easily stolen by attackers, leading to the leakage of relevant data from the target page, thus posing a security risk. To address this, such as... Figure 14 As shown, in this embodiment of the disclosure, the proxy rendering instruction is encrypted using a key to obtain an encrypted proxy rendering instruction.
[0139] The key is generated based at least on the page identifier of the target page. Since different pages have different page identifiers, the key corresponding to each page is guaranteed to be unique. Even if the key for a certain page is leaked, it is difficult for an attacker to use that key to decrypt data on other pages, thus achieving data security isolation between different pages and effectively protecting the privacy and security of each page. Of course, in addition to the page identifier of the target page, other factors can be considered when generating the key. For example, the device identifier (such as the serial number) of the electronic device used to render the target page can be referenced, ensuring that different electronic devices have their own unique keys for the same target page. Alternatively, if the target page requires online access via an account, the account identifier (account ID) of the logged-in account on the electronic device used to render the target page can be referenced, ensuring that different accounts have their own unique keys for the same target page. Furthermore, a preset string can be referenced to generate the key; if the preset string is not leaked, even if an attacker knows other reference factors, they cannot directly generate the key. It is understandable that the more factors considered when generating the key, the more difficult the generated key is to crack, the stronger the security of the data encryption / decryption process, and the higher the level of sophistication.
[0140] It is worth noting that this disclosure does not limit the algorithm used to generate the key; for example, a hash algorithm can be used. Similarly, this disclosure does not limit the encryption algorithm used for encryption processing; for example, symmetric encryption algorithms such as the Data Encryption Standard (DES) or Advanced Encryption Standard (AES) can be used. Asymmetric encryption algorithms can also be used; if an asymmetric encryption algorithm is used, the generated key must include both an encryption key and a decryption key.
[0141] In some embodiments, when executing a rendering instruction to render a target page object on a target page, the page processing method further includes: obtaining a page template of the target page, wherein the page template is injected with a key; rendering a page frame of the target page according to the page template, wherein the page frame is used to contain the target page object; and encrypting the proxy rendering instruction according to the key to obtain an encrypted proxy rendering instruction, including: encrypting the proxy rendering instruction according to the key in the page template to obtain an encrypted proxy rendering instruction.
[0142] During the rendering process of the target page, in addition to executing rendering instructions to render the target page object, the page template (such as an HTML template) of the target page is also obtained, and the page frame of the target page is rendered according to the page template. The page frame refers to the basic structure and layout framework of the target page. The page frame provides an overall organization and presentation method for the content of the target page, much like the framework of a building, supporting and planning the appearance and function of the entire target page. Figure 5A For example, the portion of page 510 excluding page object 520 can be considered as a page frame.
[0143] In addition to the code used to render the page framework, the page template also includes a pre-injected key. This allows the proxy rendering instructions to be encrypted using the key in the page template, resulting in encrypted proxy rendering instructions.
[0144] The key obtained from the page template can be stored locally. This way, during the re-rendering of the target page, the locally stored key can be used to decrypt the encrypted proxy rendering instructions. Alternatively, considering that the page template of the target page still needs to be obtained to render the page frame during the re-rendering process, the key in the page template obtained during the re-rendering process can be used to decrypt the encrypted proxy rendering instructions. This avoids the risk of leakage caused by storing the key locally.
[0145] The above method binds the key to the page template, ensuring that the key is closely linked to the target page rendering process. During page rendering, the page template is obtained as the basis for rendering the page framework, and the key is also introduced along with it. This eliminates the need for additional complex key transmission mechanisms and reduces the risk of the key being exposed, lost, or tampered with during transmission.
[0146] In step 1330, the encrypted proxy rendering instructions are stored in the memory.
[0147] Here, the encrypted proxy rendering instructions are stored in memory. In this way, even if an attacker steals the encrypted proxy rendering instructions from memory without knowing the key, they will not be able to reconstruct the real proxy rendering instructions.
[0148] In step 1340, in response to a re-rendering request for the target page, an encrypted proxy rendering instruction is retrieved from memory.
[0149] When a re-rendering request for the target page is triggered, the encrypted proxy rendering instructions are retrieved from memory.
[0150] In step 1350, the encrypted proxy rendering instruction is decrypted according to the key to obtain the proxy rendering instruction.
[0151] Here, based on the same encryption algorithm used in the encryption process, the encrypted proxy rendering instruction is decrypted according to the key to obtain the proxy rendering instruction.
[0152] In step 1360, the proxy rendering instruction is restored to the rendering instruction, and the rendering instruction is executed to re-render the target page object on the target page.
[0153] Step 1360 has been described in detail above and will not be repeated here.
[0154] like Figure 13 As shown, this embodiment generates proxy rendering instructions based on execution parameters, encrypts them using a key generated at least based on the page identifier of the target page, and stores the encrypted proxy rendering instructions in a memory. When a re-rendering request is received, the key is used to decrypt the proxy rendering instructions, thereby effectively ensuring the security of the proxy rendering instructions during storage, preventing them from being illegally read or tampered with, and avoiding the leakage and malicious modification of sensitive data. At the same time, generating a key at least based on the page identifier enables differentiation and targeting of the encryption / decryption process for different pages, further enhancing security. Furthermore, the encryption / decryption process is closely integrated with the rendering process, ensuring that the correct instructions can be accurately obtained and executed during re-rendering, thus guaranteeing the accuracy and reliability of the target page re-rendering while ensuring data security.
[0155] In some embodiments, storing proxy rendering instructions in memory includes: compressing the proxy rendering instructions to obtain compressed proxy rendering instructions; storing the compressed proxy rendering instructions in memory; retrieving proxy rendering instructions from memory includes: retrieving the compressed proxy rendering instructions from memory; and decompressing the compressed proxy rendering instructions to obtain proxy rendering instructions.
[0156] Here, after generating the proxy rendering instruction, it can be compressed according to preset compression rules to obtain a compressed proxy rendering instruction. The compressed proxy rendering instruction has a smaller data size than the original proxy rendering instruction. Compression rules can be applied to execution parameters within the proxy rendering instruction, converting them into shorter parameters, such as converting the property name `fillStyle` to `A` and the method name `clearRect` to `B`. Of course, compression rules can also be applied to other content within the proxy rendering instruction, or to the proxy rendering instruction as a whole; there are no limitations on this.
[0157] During the re-rendering process, compressed proxy rendering instructions are retrieved from memory and decompressed according to the same compression rules to obtain the proxy rendering instructions. For example, if the compressed proxy rendering instructions include A, then A is converted to fillStyle; and if the compressed proxy rendering instructions include B, then B is converted to clearRect.
[0158] The above method, by compressing the proxy rendering instructions before storing them in memory, effectively reduces the storage space occupied in memory and improves storage efficiency, making it particularly suitable for scenarios with a large number of proxy rendering instructions. During the re-rendering process, decompression is performed according to the same compression rules, which can accurately restore the original proxy rendering instructions, ensuring the accuracy and stability of the re-rendering process.
[0159] In some embodiments, compression schemes can also be combined with encryption schemes. For example, storing proxy rendering instructions in memory includes: compressing the proxy rendering instructions to obtain compressed proxy rendering instructions; encrypting the compressed proxy rendering instructions according to a key to obtain encrypted proxy rendering instructions; storing the encrypted proxy rendering instructions in memory; retrieving proxy rendering instructions from memory includes: retrieving the encrypted proxy rendering instructions from memory; decrypting the encrypted proxy rendering instructions according to a key to obtain compressed proxy rendering instructions; and decompressing the compressed proxy rendering instructions to obtain the proxy rendering instructions. This optimizes storage performance and enhances security.
[0160] In some embodiments, the number of rendering instructions includes multiple instructions. Storing proxy rendering instructions in memory includes: storing proxy rendering instructions corresponding to multiple rendering instructions in memory according to the execution order of the multiple rendering instructions; retrieving proxy rendering instructions from memory, restoring the proxy rendering instructions to rendering instructions, and executing rendering instructions includes: retrieving multiple proxy rendering instructions stored in memory according to the execution order, restoring each proxy rendering instruction to its corresponding rendering instruction, and executing the multiple rendering instructions according to the execution order.
[0161] Here, there are multiple rendering instructions, and these instructions have a specific execution order. During the initial rendering process, these multiple rendering instructions are executed sequentially in order to render the target page object on the target page.
[0162] It's worth noting that for multiple rendering instructions, if they are not executed in the correct order, unpredictable consequences may occur, leading to unsatisfactory rendering results. For example, in Canvas, the shape drawn first will be covered by the shape drawn later. Suppose the first rendering instruction is used to draw a red circle, and the second rendering instruction is used to draw a blue square, with the square and circle overlapping. If the first rendering instruction is executed first, then the second, the overlapping part will be displayed as blue; if the second rendering instruction is executed first, then the first, the overlapping part will be displayed as red. As another example, when implementing animation using Canvas, it's necessary to clear the content of the previous frame before drawing new content. If this execution order is not followed, circles will continuously overlap and be drawn, resulting in an unsmooth animation.
[0163] For the reasons mentioned above, such as Figure 15 As shown, in this embodiment of the disclosure, proxy rendering instructions corresponding to multiple rendering instructions are stored sequentially in the memory according to the execution order of the multiple rendering instructions. Sequential storage can be understood as storing according to the execution order; the storage location of the proxy rendering instructions reflects the execution order. The specific implementation method of sequential storage is not limited. For example, multiple proxy rendering instructions can be stored using an array or a list. Arrays and lists are linear data structures that store elements sequentially, and the position (index) of an element within them represents the order. Alternatively, a primary key or timestamp field can be added to the memory to represent the order.
[0164] During the re-rendering process, multiple proxy rendering instructions stored in execution order are retrieved from memory. Each proxy rendering instruction is then restored to its corresponding rendering instruction, and these instructions are executed in the order they were originally executed. This process accurately reproduces the rendering effect from the initial rendering, avoiding uncontrollable consequences such as abnormal graphics overlay and choppy animations caused by disordered execution order of rendering instructions.
[0165] In some embodiments, storing proxy rendering instructions in memory includes: associating and storing the proxy rendering instructions with the page identifier of the target page in memory; retrieving the proxy rendering instructions from memory includes: querying the memory based on the page identifier of the target page to obtain the proxy rendering instructions. This achieves two advantages: firstly, it enables precise data management and rapid location. When a large number of proxy rendering instructions are stored in memory, the unique index of the page identifier of the target page allows for quick and accurate retrieval of the corresponding proxy rendering instruction for the target page, greatly improving data retrieval efficiency and shortening re-rendering time; secondly, it effectively avoids data confusion and erroneous calls. By associating with page identifiers, it ensures that proxy rendering instructions for different pages are stored independently, preventing incorrect proxy rendering instructions from being obtained during target page re-rendering due to disordered storage, thus ensuring the accuracy and stability of the re-rendering process.
[0166] In some embodiments, the execution parameters include an operation identifier key and an operation parameter value. The operation parameter value includes the creation method name and creation method parameter value of the rendering style object. Restoring the proxy rendering instruction into a rendering instruction includes: extracting the operation identifier key, creation method name, and creation method parameter value from the proxy rendering instruction; creating a rendering style object based on the creation method name and creation method parameter value; and generating a non-storage format rendering instruction based on the operation identifier key and the rendering style object.
[0167] Here, the execution parameters include the operation identifier key and the operation parameter value. The operation parameter value includes the creation method name of the rendering style object and the creation method parameter value. The rendering style object is an abstract entity that encapsulates data related to a specific rendering style. Considering that the internal data of the rendering style object is the key to the implementation of the rendering style, and there is currently no unified standard format to directly store the rendering style object, the creation method name and creation method parameter value of the rendering style object are directly recorded during the process of recording the execution parameters.
[0168] Taking Canvas as an example, suppose the rendering instruction is `context.fillStyle = gradient`, and `gradient = context.createLinearGradient(0, 0, 100, 100)`. Here, `gradient` represents a gradient object (a type of rendering style object) used to create a color gradient fill effect, rather than a single color fill; `createLinearGradient` is the method name used to create the gradient object (called the creation method name); `[0, 0, 100, 100]` are the parameters passed to the method used to create the gradient object (called the creation method parameter values). The first parameter value 0 represents the x-coordinate of the gradient's starting point, the second parameter value 0 represents the y-coordinate of the gradient's starting point, the third parameter value 100 represents the x-coordinate of the gradient's ending point, and the fourth parameter value 100 represents the y-coordinate of the gradient's ending point. During the execution of this rendering instruction, the operation identifier `fillStyle`, the creation method name `createLinearGradient`, and the creation method parameter values `[0, 0, 100, 100]` are recorded.
[0169] Then, during the re-rendering process, the operation identifier key, creation method name, and creation method parameter values are extracted from the proxy rendering instructions. Based on the creation method name and creation method parameter values, a rendering style object is created, for example, executing `constgradient = context.createLinearGradient(0, 0, 100, 100)`. Then, based on the operation identifier key and the rendering style object, a non-stored rendering instruction is generated, for example, `context.fillStyle = gradient`.
[0170] The above method solves the problem that the rendering style object itself is difficult to store directly by recording and storing the creation method name and creation method parameter values of the rendering style object; during the re-rendering process, the rendering style object can be created based on the creation method name and creation method parameter values, so as to achieve accurate restoration of the rendering style object and ensure that the final displayed rendering style is consistent with the rendering style during the first rendering.
[0171] In some embodiments, the execution parameters of the rendering instruction include the resource location of the target resource. Executing the rendering instruction to re-render the target page object on the target page includes: triggering a request to acquire the target resource based on the resource location; if the target resource is not acquired through the acquisition request at a first time point, executing the rendering instruction to re-render the target page object on the target page based on the default resource; and if the target resource is acquired through the acquisition request at a second time point, re-executing the rendering instruction to re-render the target page object on the target page based on the target resource, wherein the second time point is later than the first time point.
[0172] Here, the execution parameters of the rendering command include the location of the target resource. The type of the target resource is not limited; it can be text, image, or video, etc. The resource location can be a local file on the electronic device or a network file on the internet; similarly, there are no restrictions.
[0173] During the re-rendering process, a request to retrieve the target resource is triggered based on the resource location specified in the rendering command. If the target resource is not retrieved through the retrieval request at the first time point, the rendering command is executed to re-render the target page object on the target page based on the default resource. If the target resource is retrieved through the retrieval request at the first time point, the rendering command is executed to re-render the target page object on the target page based on the target resource. The default resource is a pre-defined resource; for example, if the target resource is an image, the default resource could be a blank image (transparent image). If the target resource is retrieved through the retrieval request at the second time point after the first time point, and the first time point is later than the first time point, the rendering command is re-executed to re-render the target page object on the target page based on the target resource.
[0174] By employing the above method, when the target resource is not obtained at the first available time point, the default resource is used to re-render the target page object, ensuring that the target page object is rendered promptly and avoiding lag caused by long waiting times, thus improving the user experience. Subsequently, when the target resource is obtained at the second available time point, it is used to re-render the target page object, ensuring the accuracy and completeness of the final presented content.
[0175] It is worth noting that the above methods apply not only to the re-rendering process but also to the initial rendering process.
[0176] In some embodiments, executing a rendering instruction to re-render a target page object on a target page includes: performing a validation process on the rendering instruction; when the validation of the rendering instruction is successful, executing the rendering instruction to re-render the target page object on the target page; the page processing method further includes: when the validation of the rendering instruction fails, regenerating the rendering instruction and executing the regenerated rendering instruction to re-render the target page object on the target page.
[0177] Here, after reconstructing the rendering instructions, they can be validated. The specific validation method can be set according to the specific rendering operation of the rendering instructions. For example, validation can be based on data type and / or valid value range. For the rendering instruction context.fillRect(x, y, width, height), the parameter values x, y, width, and height can be validated. If x, y, width, and height are all numeric types, and width and height are both non-negative, the validation is successful; otherwise, the validation fails. Another example is validation based on the execution order of the rendering instructions. For instance, when drawing a path, a new path needs to be started first using a rendering instruction containing the beginPath method, and then the path needs to be closed using a rendering instruction containing the closePath method. If the above execution order is met, the validation is successful; otherwise, the validation fails.
[0178] When the rendering instruction verification is successful, it proves that the restored rendering instruction is correct. Therefore, the rendering instruction is executed to re-render the target page object on the target page. When the rendering instruction verification fails, it proves that the restored rendering instruction is inconsistent with the initially generated rendering instruction. If the rendering instruction is forcibly executed in this case, an error may occur, leading to re-rendering failure. Even if no error occurs, the display effect of the re-rendered target page object may be disordered. Therefore, the rendering instruction is regenerated according to the generation logic in step 710, and the regenerated rendering instruction is executed to re-render the target page object on the target page, thereby ensuring the accurate display effect of the re-rendered target page object. It is worth noting that there may be various reasons for the restored rendering instruction verification to fail, such as the proxy rendering instruction being corrupted during storage or transmission, or the algorithm used to restore the rendering instruction malfunctioning.
[0179] Interaction Solution Taking the page processing method of this embodiment, implemented jointly by a first node and a second node, as an example, the first node can be implemented as a server 110, and the second node can be implemented as a terminal 140, but is not limited thereto. Figure 16 As shown, a page processing method according to an embodiment of this disclosure includes: Step 1610: The second node will send the rendering request for the target page object on the target page to the first node; Step 1620: The first node responds to the second node's rendering request for the target page and generates rendering instructions in a non-storage format. Step 1630: The first node executes the rendering instructions and records the execution parameters during the execution of the rendering instructions; Step 1640: The first node generates a proxy rendering instruction in storage format based on the execution parameters and stores the proxy rendering instruction in memory; Step 1650: The second node sends a re-rendering request for the target page to the first node; Step 1660: The first node responds to the second node's re-rendering request for the target page by retrieving the proxy rendering instruction from the memory; Step 1670: The first node sends a proxy rendering command to the second node; Step 1680: The second node restores the proxy rendering instruction to the rendering instruction and executes the rendering instruction to re-render the target page object on the target page.
[0180] The following is a detailed description of steps 1610-1680 above.
[0181] In step 1610, the second node sends the rendering request for rendering the target page object on the target page to the first node.
[0182] This disclosure relates to a first node and a second node. Taking a target page as an example, which is a page in a specific application, the second node can be a terminal running the application client, and the first node can be the application's backend server. When the second node triggers the first rendering request for the target page object, it sends the rendering request to the first node.
[0183] A rendering request is triggered the first time a target page object needs to be rendered on the target page. For example, if the second node has already displayed the target page, which includes some page objects, and then the second node receives an edit operation on the target page, it determines that a new page object, namely the target page object, needs to be rendered based on this edit operation. Therefore, a rendering request for the target page object is triggered.
[0184] In step 1620, the first node responds to the second node's rendering request for the target page by generating rendering instructions in a non-storage format.
[0185] When the first node receives a rendering request for the target page from the second node, it generates rendering instructions in a non-storage format.
[0186] It is worth noting that, in order to enable the first node to generate rendering instructions, a homogeneous development model can be adopted. The homogeneous development model is a web development model in which the same set of code logic (specifically, the rendering-related code in this embodiment) can run on both the second and first nodes. Therefore, based on the homogeneous development model, both the first and second nodes have the ability to generate rendering instructions.
[0187] In step 1630, the first node executes the rendering instruction and records the execution parameters during the execution of the rendering instruction.
[0188] After generating rendering instructions, the first node executes the rendering instructions and records the execution parameters during the process. It's worth noting that since the first node lacks the actual conditions for rendering the target page (e.g., it lacks a browser environment), its purpose in executing rendering instructions is merely to record execution parameters; it does not actually render the page, meaning the execution result is empty.
[0189] In some embodiments, recording execution parameters during the execution of rendering instructions includes: the first node creating a proxy object to act as a proxy for the rendering instructions; and the first node recording execution parameters through the proxy object during the execution of the rendering instructions.
[0190] In some embodiments, the proxy object includes a property assignment proxy method and a method invocation proxy method. The execution parameters include property assignment parameters or method invocation parameters. During the execution of rendering instructions, the first node records the execution parameters through the proxy object, including: in response to a property assignment operation being triggered during the execution of rendering instructions, the first node calls the property assignment proxy method in the proxy object to record the property assignment parameters of the property assignment operation; in response to a method invocation operation being triggered during the execution of rendering instructions, the first node calls the method invocation proxy method in the proxy object to record the method invocation parameters of the method invocation operation.
[0191] In some embodiments, after recording execution parameters through a proxy object, the page processing method further includes: the first node determining the update frequency of the target page; when the update frequency is less than the update frequency threshold, the first node destroys the proxy object; when the update frequency is greater than or equal to the update frequency threshold, the first node disables the proxy object, and the disabled proxy object is used to be enabled the next time the target page is updated.
[0192] In step 1640, the first node generates a proxy rendering instruction in storage format based on the execution parameters and stores the proxy rendering instruction in memory.
[0193] The first node generates proxy rendering instructions in a storage format based on the recorded execution parameters, thus converting rendering instructions into proxy rendering instructions. Then, the first node stores the proxy rendering instructions in its local memory.
[0194] In some embodiments, the first node may send the proxy rendering instruction to the second node immediately upon generating the proxy rendering instruction, so that the second node restores the proxy rendering instruction to the rendering instruction and executes the rendering instruction to re-render the target page object on the target page; the first node may also wait until it receives a re-rendering request from the second node before sending the proxy rendering instruction to the second node, so that the second node restores the proxy rendering instruction to the rendering instruction and executes the rendering instruction to re-render the target page object on the target page.
[0195] For example, to ensure that the target page displayed by the second node is updated in a timely manner, the first node can send the proxy rendering instruction to the second node immediately when generating the proxy rendering instruction.
[0196] For example, considering that the second node is currently displaying the target page, to avoid interrupting user operations and disrupting the user's reading experience due to forced re-rendering, the first node can wait until it receives the re-rendering request from the second node before sending the proxy rendering instruction to the second node. In this way, since the re-rendering request is initiated by the second node, it can be guaranteed that the re-rendering process meets the second node's needs. Furthermore, the first node can send a re-rendering prompt to the second node when generating the proxy rendering instruction to notify the second node that it can initiate a re-rendering request. The re-rendering prompt could be something like "The page has been updated, please refresh the display," although the format is not limited to this.
[0197] In step 1650, the second node sends a re-rendering request for the target page to the first node.
[0198] When the second node needs to re-render the target page, it sends a re-rendering request for the target page to the first node.
[0199] In step 1660, the first node responds to the second node's request to re-render the target page by retrieving proxy rendering instructions from memory.
[0200] When the first node receives a re-rendering request for the target page from the second node, it retrieves the proxy rendering instruction from the memory.
[0201] In step 1670, the first node sends a proxy rendering instruction to the second node.
[0202] In step 1680, the second node restores the proxy rendering instruction to the rendering instruction and executes the rendering instruction to re-render the target page object on the target page.
[0203] When the second node receives the proxy rendering instruction, it restores the proxy rendering instruction to the rendering instruction and executes the rendering instruction to re-render the target page object on the target page.
[0204] In some embodiments, the first node generates a proxy rendering instruction in a stored format based on execution parameters, including: the first node determining a target first syntax template used by the rendering instruction, wherein the target first syntax template is one of multiple first syntax templates, and the multiple first syntax templates correspond to different second syntax templates; the first node generates a proxy rendering instruction in a stored format based on the execution parameters and a target second syntax template corresponding to the target first syntax template; the second node restores the proxy rendering instruction to a rendering instruction, including: the second node determining a target second syntax template used by the proxy rendering instruction; the second node extracting execution parameters from the proxy rendering instruction; and the second node generating a non-stored rendering instruction based on the execution parameters and a target first syntax template corresponding to the target second syntax template. Here, both the first node and the second node store the correspondence between the first syntax template and the second syntax template.
[0205] In some embodiments, the execution parameters include an operation identifier key and an operation parameter value. A first node generates a proxy rendering instruction in storage format based on the execution parameters, including: the first node serializes the operation parameter value to obtain a serialized value; the first node generates a proxy rendering instruction in storage format based on the operation identifier key and the serialized value; a second node restores the proxy rendering instruction to a rendering instruction, including: the second node extracts the operation identifier key and the serialized value from the proxy rendering instruction; the second node deserializes the serialized value to obtain the operation parameter value; and the second node generates a non-storage format rendering instruction based on the operation identifier key and the operation parameter value.
[0206] In some embodiments, the execution parameters include an operation identifier key and an operation parameter value. The operation parameter value includes the creation method name and creation method parameter value of the rendering style object. The second node restores the proxy rendering instruction to the rendering instruction, including: the second node extracts the operation identifier key, creation method name, and creation method parameter value from the proxy rendering instruction; the second node creates a rendering style object based on the creation method name and creation method parameter value; and the second node generates a non-storage format rendering instruction based on the operation identifier key and the rendering style object.
[0207] In some embodiments, the execution parameters of the rendering instruction include the resource location of the target resource. Executing the rendering instruction to re-render the target page object on the target page includes: a second node triggering a request to acquire the target resource based on the resource location; if the target resource is not acquired through the acquisition request at a first time point, the second node executes the rendering instruction to re-render the target page object on the target page based on the default resource; if the target resource is acquired through the acquisition request at a second time point, the second node re-executes the rendering instruction to re-render the target page object on the target page based on the target resource, wherein the second time point is later than the first time point.
[0208] In some embodiments, storing proxy rendering instructions in memory includes: a first node encrypting the proxy rendering instructions according to a key to obtain encrypted proxy rendering instructions; the first node storing the encrypted proxy rendering instructions in memory; wherein the key is generated at least based on the page identifier of the target page; retrieving proxy rendering instructions from memory includes: the first node retrieving the encrypted proxy rendering instructions from memory; the first node decrypting the encrypted proxy rendering instructions according to the key to obtain proxy rendering instructions.
[0209] In some embodiments, storing proxy rendering instructions in memory includes: a first node compressing the proxy rendering instructions to obtain compressed proxy rendering instructions; the first node storing the compressed proxy rendering instructions in memory; retrieving proxy rendering instructions from memory includes: the first node retrieving the compressed proxy rendering instructions from memory; and the first node decompressing the compressed proxy rendering instructions to obtain proxy rendering instructions.
[0210] In some embodiments, the number of rendering instructions includes multiple instructions. Storing proxy rendering instructions in memory includes: a first node storing proxy rendering instructions corresponding to multiple rendering instructions in memory according to the execution order of the multiple rendering instructions; retrieving proxy rendering instructions from memory includes: the first node retrieving multiple proxy rendering instructions stored in memory according to the execution order; and a second node restoring the proxy rendering instructions into rendering instructions and executing the rendering instructions includes: the second node restoring each proxy rendering instruction into its corresponding rendering instruction and executing the multiple rendering instructions in the execution order. It is worth noting that the multiple proxy rendering instructions sent from the first node to the second node can be arranged sequentially according to the execution order, so that the second node can clearly determine the execution order and execute the multiple rendering instructions in that order.
[0211] like Figure 16As shown, the page processing method provided in this embodiment can be implemented jointly by a first node and a second node. Most operations, such as generating rendering instructions, converting rendering instructions into proxy rendering instructions, and storing proxy rendering instructions, are implemented by the first node. For the second node, it only needs to restore the received proxy rendering instructions to rendering instructions and execute them. In this way, the second node can quickly re-render, and the whole process does not require the second node's local storage space, which can reduce the requirements for the storage and computing power of the second node. It is also applicable to low-performance second nodes.
[0212] Example of the specific usage process of the page processing method in this embodiment of the disclosure For ease of understanding, this paper uses an example of a rendering instruction type of Canvas rendering instruction (i.e., the rendering instruction in the following example refers to the Canvas rendering instruction) and an application scenario of electronic documents to illustrate the page processing method provided in the embodiments of this disclosure.
[0213] First, the two rendering modes applicable to the embodiments of this disclosure are introduced: Local-Cache-Side Rendering (LCSR) mode and Server-Side Rendering (SSR) mode. In LCSR mode, the client (i.e., the client running on the terminal) stores the recorded rendering instructions (corresponding to the proxy rendering instructions mentioned above) in its local memory. During re-rendering, the recorded rendering instructions are retrieved from the local memory and replayed as rendering instructions, which are then executed to achieve re-rendering. In SSR mode, the server stores the recorded rendering instructions in its local memory. When the client needs to re-render, the server sends the recorded rendering instructions from its memory to the client. The client replays the recorded rendering instructions as rendering instructions and executes them to achieve re-rendering.
[0214] This disclosure embodiment utilizes a recording and playback tool to process rendering instructions. The processing performed by the recording and playback tool can be divided into two processes: recording and playback. During recording, rendering instructions are executed. During this execution, execution parameters are recorded using a proxy object. Thus, upon completion of rendering instruction execution, a recorded rendering instruction can be generated based on the execution parameters recorded by the proxy object. It's worth noting that upon completion of rendering instruction execution, the proxy object can be disposed or unproxened, depending on the specific application scenario. For example, in electronic document scenarios, editing operations on the displayed target page are frequently received, meaning the target page is frequently updated. Therefore, the proxy object can be unproxened, allowing it to be directly reactivated during the next recording, avoiding the significant overhead of frequently creating proxy objects. During playback, a playback method (called ReplayRecord) is injected into the Script scope. The recorded rendering instruction is used as a variable in the playback method, and it is then replayed as a rendering instruction. Finally, the replayed rendering instruction is mounted onto the HTML template (page template) for execution.
[0215] Taking the integration of a recording and playback tool in an SSR scenario as an example, a user on the client side can open the target page for editing. The server receives this editing operation (which triggers the initial rendering of the new page object, i.e., the target page object). The server executes the rendering process and stores the recorded rendering instructions in the SSR cache (or server cache). The SSR cache is a local cache on the server, and the recording rendering instructions can be stored using script tags. When the user reopens the target page, the server retrieves the recording rendering instructions from the SSR cache and sends them to the client. The client then replays these instructions as rendering instructions and executes them to re-render the target page object.
[0216] Taking the integration of a recording and playback tool in an LCSR scenario as an example, a user on the client side can open the target page for editing. Upon receiving the editing operation, the client executes the rendering process and stores the recorded rendering instructions in the LCSR cache (or client-side cache). When the user reopens the target page, if the SSR cache is not found (meaning the server does not retrieve the recorded rendering instructions from the SSR cache), the client retrieves the recorded rendering instructions from the LCSR cache, replays them as rendering instructions, and executes them to re-render the target page object. The LCSR cache can be localStorage or IndexedDB, and this is not limited to these methods.
[0217] The implementation details of the above content will be explained in detail below.
[0218] I. Recording.
[0219] In SSR mode, the recording process is executed on the server; in LCSR mode, the recording process is executed on the client. Recording mainly includes two processes: recording execution parameters and generating recording rendering instructions.
[0220] 1) Record execution parameters.
[0221] By proxying context calls in rendering instructions, all execution parameters of the rendering instructions can be recorded. First, context calls can be categorized into property assignment operations and method calls. For property assignment operations, the setter method needs to be proxied to record the property name and value; for method calls, the getter method needs to be proxied to record the method name and passed parameters.
[0222] In this embodiment of the disclosure, proxy can be implemented through a proxy object Proxy. That is, the context call is wrapped by the Proxy. Once the context is called to implement the property assignment operation, the collectSetter method in the Proxy will be executed to record the property name and property value. The collectSetter method is used to proxy the setter method. Once the context is called to implement the method call operation, the collectMethod method in the Proxy will be executed to record the method name and method parameters. The collectMethod method is used to proxy the getter method.
[0223] 2) Generate recording and rendering instructions.
[0224] Taking the rendering directive `context.fillStyle = 'red'` as an example, this directive is used to assign property values. After recording it through the proxy object, the execution parameters can be obtained as follows: {"target":context,"key":"fillstyle","value":"red"} Using square brackets [] as syntax symbols for assembly, we can obtain: const record=`${key}[${value}]`; Considering that the value may be reference type data, and that this embodiment involves cross-platform transmission, the value is serialized using JSON.stringify, and represented as follows: const record=`${key}[${JSON.stringify(value)}]`; Finally, add the instruction separator to obtain the complete recording and rendering instructions: const record=`${key}[${JSON.stringify(value)}];`; The above example uses a rendering directive for property assignment. The same applies to rendering directives for method calls. For instance, using `context.clearRect(0, 0, 100, 100)` as an example, after recording it through a proxy object, the execution parameters can be obtained as follows: {"target":context,"key":"clearRect","value":[0, 0, 100, 100]} Using parentheses () as syntax symbols for assembly, serializing the value using JSON.stringify, and adding a command delimiter, the complete recording and rendering commands are obtained as follows: const record=`${key}(${JSON.stringify(value)});`; It is worth noting that the above recording and rendering instructions use the Script tag format, but in actual application scenarios, they are not limited to this.
[0225] II. Replay.
[0226] The playback part is executed on the client side, mainly including two processes: parsing and executing the recorded rendering instructions, and asynchronous execution.
[0227] 1) Record the parsing and execution of rendering commands.
[0228] Taking the recording and rendering command as `record=`clearRect([0, 0, 100, 100]);` as an example (serialization processing is omitted), the following will be performed sequentially: ① Based on the syntax symbols in the recorded rendering instructions, determine whether the rendering operation is a property assignment operation or a method call operation. In the example above, since parentheses are used as syntax symbols, it is determined that the rendering operation is a method call operation. ② Separate the content according to the syntax symbols and extract the key and value respectively. For example, in the example above, the content is separated by parentheses (), and clearRect and [0, 0, 100, 100] are extracted respectively. ③ Generate rendering instructions based on the key and value, as well as the syntax template applicable to the rendering instructions and corresponding to the rendering operation. For example, the rendering instruction is context.clearRect(0,0,100,100).
[0229] It's worth noting that when the value includes the name of the method that creates the rendering style object and the values of its parameters, the rendering style object needs to be recreated based on those parameters. For example, if the recorded rendering command is `record=`fillStyle({"args":[0,0,100,100],"key":"createLinearGradient"});`;`, then the method name is `createLinearGradient`, and the parameter value is `[0,0,100,100]`. Therefore, the rendering style object `gradient` needs to be recreated, i.e., `const gradient=context.createLinearGradient(0,0,100,100)`. Then, the rendering command is generated again, i.e., `context.fillStyle = gradient`.
[0230] 2) Asynchronous execution.
[0231] In real-world applications, rendering commands may not be executed synchronously. For example... Figure 17 As shown, taking the rendering directive context.fillStyle = img as an example, there are two cases when this rendering directive needs to be executed: If the client already has an image resource (i.e., img resource), the rendering directive is executed directly, that is, in this case, the rendering directive can be executed synchronously; if the client does not have an image resource, it is necessary to request the image resource according to the resource location (src) of the image resource. Before the image resource is requested, a transparent image is used to replace the image resource and the rendering directive is executed, that is, img = transparent. After the image resource is requested, the rendering directive is re-executed (asynchronously).
[0232] In asynchronous execution scenarios, replacing image resources with transparent images first can prevent display lag on the target page and improve user experience. After requesting the image resources, the rendering instructions are re-executed to ensure the accuracy and completeness of the final content.
[0233] III. Implementation of the combination of SSR and LCSR modes.
[0234] Here, we will take the combined implementation of SSR mode and LCSR mode as an example for explanation. In this combined implementation, SSR caching is used first, and LCSR caching is used second.
[0235] like Figure 18 As shown, the implementation process is as follows: 1) The server provides the HTML template for the target page. It is worth noting that in other services, the server can also be replaced by a gateway, a Content Delivery Network (CDN), etc., without any restrictions. 2) The backend for frontend (BFF) programming layer queries the SSR cache for the corresponding recording and rendering instructions based on the page identifier (or document ID) of the target page. If the instructions exist (SSR cache hit), the recording and rendering instructions are injected into the HTML template and the HTML template is sent to the client. 3) If the SSR cache does not contain the recording rendering instruction corresponding to the page identifier (SSR cache miss), the BFF layer inserts a script, i.e., a local playback script, into the HTML template and sends the HTML template to the client. The local playback script reads the recording rendering instruction corresponding to the page identifier in the LCSR cache and replays it as a rendering instruction for execution. 4) After receiving the HTML template, the client parses the HTML template and then renders the target page.
[0236] It's worth noting that the BFF layer is a proxy service situated between the client and the server, providing customized interfaces for specific clients. By introducing the BFF layer, the server only needs to provide general basic services, which are then adapted and converted by the BFF layer, thus decoupling the server and client and reducing the development workload on the server side. Of course, in some embodiments, the BFF layer may not be introduced, meaning that the operations performed by the BFF layer can also be implemented by the server.
[0237] In some embodiments, the recorded rendering instructions can be compressed before being stored in the SSR cache or LCSR cache, and a corresponding decompression operation can be performed when retrieving them. This can reduce the storage pressure on the SSR cache or LCSR cache.
[0238] In some embodiments, the recording and rendering instructions can be encrypted before being stored in the LCSR cache. This way, even if an attacker obtains the encrypted recording and rendering instructions from the LCSR cache, they cannot directly extract the information or execute them, thus improving data security in electronic document scenarios.
[0239] like Figure 19 As shown, this embodiment of the disclosure designs a symmetric encryption / decryption process to process the data in the LCSR cache based on the target page opening process. The BFF layer can combine the document ID, account ID, and a preset string for hash processing to obtain a hash string, which is then used as the encryption / decryption key. Using the document ID and account ID as reference factors ensures that the generated key is isolated for different documents (i.e., different pages) and different accounts; using the preset string as a reference factor ensures that even if the hash algorithm used for hash processing is cracked, this preset string is still required to generate a valid key, meaning that attackers cannot directly generate a key based on the document ID and account ID, thus improving key security. It is worth noting that if a fixed account is used to access a fixed page, as long as the hash algorithm used for hash processing remains unchanged, the key can be guaranteed to be unique and unchanging, meaning that the same key can be used every time the page is accessed through that account.
[0240] exist Figure 19 In the process, when the BFF layer receives the HTML template, it generates a key according to the key generation rules mentioned above and injects the key into the HTML template. In this way, the client can obtain the key from the HTML template. On one hand, the client can use the key to encrypt the recording and rendering instructions and store the encrypted instructions in the LCSR cache; on the other hand, the client can also retrieve the encrypted recording and rendering instructions from the LCSR cache and decrypt them using the key.
[0241] In some embodiments, the encryption / decryption process described above can be encapsulated as a general underlying capability, that is, encryption / decryption can be automatically implemented by encapsulating the underlying library, and the encryption / decryption is imperceptible to the upper-layer business logic. Based on this design, the security of business data can be guaranteed, and the business logic can be made more focused and pure.
[0242] The embodiments disclosed herein have at least the following technical effects: 1) By recording rendering instructions, the problem of the server being unable to transmit rendering instructions can be solved, that is, the recorded rendering instructions that can be transmitted can be used to replace the non-transmittable rendering instructions; by playing back the recorded rendering instructions, it can be ensured that the same rendering logic is used for rendering on the client, which can avoid content differences. In addition, the server and client adopt an isomorphic development model, which makes maintenance and debugging easier.
[0243] 2) On the client side, rendering is achieved by executing the replayed rendering instructions, which can support user input or other interactive behaviors, such as users clicking buttons, filling out forms, or performing navigation operations; at the same time, it can utilize hardware acceleration to improve rendering efficiency; and it has responsive design capabilities, which can ensure the consistency of display effects for different screen sizes / different devices, that is, ensure the complete display of content.
[0244] 3) In LCSR mode, recorded rendering commands are cached locally, offering advantages such as small file size and fast parsing. Furthermore, since LCSR mode is no longer server-dependent, it can run independently on the client side, serving as a standalone solution independent of SSR mode and reducing server costs. Additionally, due to these characteristics, LCSR mode does not need to handle cross-platform issues like SSR mode, offering greater compatibility.
[0245] Description of apparatus and devices according to embodiments of this disclosure It is understood that although the steps in the above flowcharts are shown sequentially according to the arrows, these steps are not necessarily executed in the order indicated by the arrows. Unless explicitly stated in this embodiment, there is no strict order restriction on the execution of these steps, and they can be executed in other orders. Moreover, at least some steps in the above flowcharts may include multiple steps or multiple stages. These steps or stages are not necessarily completed at the same time, but can be executed at different times. The execution order of these steps or stages is not necessarily sequential, but can be performed alternately or in turn with other steps or at least some of the steps or stages in other steps.
[0246] It should be noted that in all specific embodiments of this disclosure, when processing is required based on rendering instructions and other related data, permission or consent from the relevant parties is obtained first. Furthermore, the collection, use, and processing of this data comply with relevant laws, regulations, and standards. In addition, when embodiments of this disclosure require obtaining rendering instructions and other related data, separate permission or consent from the relevant parties is obtained through pop-ups or redirection to a confirmation page. Only after obtaining the separate permission or consent of the relevant parties is the necessary rendering instructions and other related data required for the normal operation of the embodiments of this disclosure obtained.
[0247] Reference Figure 20 , Figure 20 This is a schematic diagram of the structure of a page processing apparatus 2000 provided in an embodiment of the present disclosure. The page processing apparatus 2000 includes: The generation module 2010 is used to generate non-storage format rendering instructions in response to a rendering request to render a target page object on the target page. The recording module 2020 is used to execute rendering instructions to render the target page object on the target page, and to record execution parameters during the execution of the rendering instructions; Storage module 2030 is used to generate proxy rendering instructions in storage format based on execution parameters and store the proxy rendering instructions in memory; The restore module 2040 is used to respond to a re-rendering request for the target page by retrieving proxy rendering instructions from memory, restoring the proxy rendering instructions into rendering instructions, and executing the rendering instructions to re-render the target page object on the target page. In some embodiments, the recording module 2020 is further configured to: create a proxy object for proxying rendering instructions; and record execution parameters through the proxy object during the execution of rendering instructions.
[0248] In some embodiments, the proxy object includes a property assignment proxy method and a method invocation proxy method, and the execution parameters include property assignment parameters or method invocation parameters. The recording module 2020 is further configured to: in response to a property assignment operation being triggered during the execution of a rendering instruction, call the property assignment proxy method in the proxy object to record the property assignment parameters of the property assignment operation; and in response to a method invocation operation being triggered during the execution of a rendering instruction, call the method invocation proxy method in the proxy object to record the method invocation parameters of the method invocation operation.
[0249] In some embodiments, the recording module 2020 is further configured to: determine the update frequency of the target page; destroy the proxy object when the update frequency is less than the update frequency threshold; and disable the proxy object when the update frequency is greater than or equal to the update frequency threshold. The disabled proxy object is used to be enabled the next time the target page is updated.
[0250] In some embodiments, the storage module 2030 is further configured to: determine the target first syntax template used by the rendering instruction, wherein the target first syntax template is one of a plurality of first syntax templates, and the plurality of first syntax templates correspond to different second syntax templates; generate a proxy rendering instruction in storage format based on the execution parameters and the target second syntax template corresponding to the target first syntax template; the restoration module 2040 is further configured to: determine the target second syntax template used by the proxy rendering instruction; extract the execution parameters from the proxy rendering instruction; and generate a non-storage format rendering instruction based on the execution parameters and the target first syntax template corresponding to the target second syntax template.
[0251] In some embodiments, the execution parameters include an operation identifier key and an operation parameter value. The storage module 2030 is further configured to: serialize the operation parameter value to obtain a serialized value; and generate a proxy rendering instruction in storage format based on the operation identifier key and the serialized value. The restoration module 2040 is further configured to: extract the operation identifier key and the serialized value from the proxy rendering instruction; deserialize the serialized value to obtain the operation parameter value; and generate a rendering instruction in non-storage format based on the operation identifier key and the operation parameter value.
[0252] In some embodiments, the execution parameters include an operation identifier key and an operation parameter value. The operation parameter value includes the creation method name and creation method parameter value of the rendering style object. The restoration module 2040 is further configured to: extract the operation identifier key, creation method name, and creation method parameter value from the proxy rendering instruction; create a rendering style object based on the creation method name and creation method parameter value; and generate a non-storage format rendering instruction based on the operation identifier key and the rendering style object.
[0253] In some embodiments, the execution parameters of the rendering instruction include the resource location of the target resource. The restoration module 2040 is further configured to: trigger an acquisition request for the target resource based on the resource location; when the target resource is not acquired through the acquisition request at a first time point, execute the rendering instruction to re-render the target page object on the target page based on the default resource; when the target resource is acquired through the acquisition request at a second time point, re-execute the rendering instruction to re-render the target page object on the target page based on the target resource, wherein the second time point is later than the first time point.
[0254] In some embodiments, the storage module 2030 is further configured to: encrypt the proxy rendering instruction according to the key to obtain an encrypted proxy rendering instruction; and store the encrypted proxy rendering instruction in a memory; wherein the key is generated at least based on the page identifier of the target page; the restoration module 2040 is further configured to: retrieve the encrypted proxy rendering instruction from the memory; and decrypt the encrypted proxy rendering instruction according to the key to obtain the proxy rendering instruction.
[0255] In some embodiments, the page processing apparatus 2000 further includes a frame rendering module (not shown), configured to: obtain a page template of a target page, the page template being injected with a key; render a page frame of the target page according to the page template, the page frame being used to contain the target page object; the storage module 2030 is further configured to: encrypt the proxy rendering instruction according to the key in the page template to obtain an encrypted proxy rendering instruction.
[0256] In some embodiments, the storage module 2030 is further configured to: compress the proxy rendering instructions to obtain compressed proxy rendering instructions; and store the compressed proxy rendering instructions in a memory; the restoration module 2040 is further configured to: retrieve the compressed proxy rendering instructions from the memory; and decompress the compressed proxy rendering instructions to obtain proxy rendering instructions.
[0257] In some embodiments, the number of rendering instructions includes multiple ones. The storage module 2030 is further configured to: store in the memory proxy rendering instructions corresponding to the multiple rendering instructions respectively in the execution order of the multiple rendering instructions; the restoration module 2040 is further configured to: retrieve the multiple proxy rendering instructions stored in the execution order from the memory, restore each proxy rendering instruction to the corresponding rendering instruction, and execute the multiple rendering instructions in the execution order.
[0258] Reference Figure 21 , Figure 21 This is a schematic diagram of the structure of a page processing apparatus 2100 provided in an embodiment of the present disclosure. The page processing apparatus 2100 includes: The first node generation module 2110 is used to generate non-storage format rendering instructions in response to the rendering request of the second node to render the target page object on the target page. The first node recording module 2120 is used to execute rendering instructions and record execution parameters during the execution of rendering instructions; The first node storage module 2130 is used to generate proxy rendering instructions in storage format based on execution parameters and store the proxy rendering instructions in memory. The first node sending module 2140 is used to respond to the second node's request to re-render the target page, retrieve the proxy rendering instruction from the memory, send the proxy rendering instruction to the second node, so that the second node restores the proxy rendering instruction to the rendering instruction, executes the rendering instruction, and re-renders the target page object on the target page.
[0259] In some embodiments, the first node recording module 2120 is further configured to: create a proxy object for proxying rendering instructions; and record execution parameters through the proxy object during the execution of rendering instructions.
[0260] In some embodiments, the proxy object includes a property assignment proxy method and a method invocation proxy method, and the execution parameters include property assignment parameters or method invocation parameters. The first node recording module 2120 is further configured to: in response to a property assignment operation being triggered during the execution of a rendering instruction, call the property assignment proxy method in the proxy object to record the property assignment parameters of the property assignment operation; and in response to a method invocation operation being triggered during the execution of a rendering instruction, call the method invocation proxy method in the proxy object to record the method invocation parameters of the method invocation operation.
[0261] In some embodiments, the first node recording module 2120 is further configured to: determine the update frequency of the target page; destroy the proxy object when the update frequency is less than the update frequency threshold; and disable the proxy object when the update frequency is greater than or equal to the update frequency threshold. The disabled proxy object is used to be enabled when the target page is updated next time.
[0262] In some embodiments, the first node storage module 2130 is further configured to: determine the target first syntax template used by the rendering instruction, wherein the target first syntax template is one of a plurality of first syntax templates, and the plurality of first syntax templates correspond to different second syntax templates; generate a proxy rendering instruction in storage format based on the execution parameters and the target second syntax template corresponding to the target first syntax template, so that the second node determines the target second syntax template used by the proxy rendering instruction, extracts the execution parameters from the proxy rendering instruction, and generates a non-storage format rendering instruction based on the execution parameters and the target first syntax template corresponding to the target second syntax template.
[0263] In some embodiments, the execution parameters include an operation identifier key and an operation parameter value. The first node storage module 2130 is further configured to: serialize the operation parameter value to obtain a serialized value; generate a proxy rendering instruction in storage format based on the operation identifier key and the serialized value, so that the second node extracts the operation identifier key and the serialized value from the proxy rendering instruction, performs deserialization on the serialized value to obtain the operation parameter value, and generates a non-storage format rendering instruction based on the operation identifier key and the operation parameter value.
[0264] In some embodiments, the first node storage module 2130 is further configured to: encrypt the proxy rendering instruction according to the key to obtain an encrypted proxy rendering instruction; and store the encrypted proxy rendering instruction in a memory; wherein the key is generated at least based on the page identifier of the target page; the first node sending module 2140 is further configured to: retrieve the encrypted proxy rendering instruction from the memory; and decrypt the encrypted proxy rendering instruction according to the key to obtain the proxy rendering instruction.
[0265] In some embodiments, the first node storage module 2130 is further configured to: compress the proxy rendering instruction to obtain a compressed proxy rendering instruction; and store the compressed proxy rendering instruction in a memory; the first node sending module 2140 is further configured to: retrieve the compressed proxy rendering instruction from the memory; and decompress the compressed proxy rendering instruction to obtain a proxy rendering instruction.
[0266] In some embodiments, the number of rendering instructions includes multiple ones. The first node storage module 2130 is further configured to: store in the memory, in the order of execution of the multiple rendering instructions, the proxy rendering instructions corresponding to the multiple rendering instructions respectively; the first node sending module 2140 is further configured to: retrieve the multiple proxy rendering instructions stored in the order of execution from the memory, and send the multiple proxy rendering instructions arranged in the order of execution to the second node, so that the second node restores each proxy rendering instruction to the corresponding rendering instruction, and executes the multiple rendering instructions in the order of execution, so as to re-render the target page object on the target page.
[0267] Reference Figure 22 , Figure 22 This is a schematic diagram of the structure of a page processing apparatus 2200 provided in an embodiment of the present disclosure. The page processing apparatus 2200 includes: The second node sending module 2210 is used to send the rendering request of the target page object on the target page to the first node, so that the first node generates a non-storage format rendering instruction, executes the rendering instruction, records the execution parameters during the execution of the rendering instruction, generates a storage format proxy rendering instruction based on the execution parameters, and stores the proxy rendering instruction in the memory. The second node sending module 2210 is also used to send a re-rendering request for the target page to the first node; The second node receiving module 2220 is used to receive the proxy rendering instruction sent by the first node, which is obtained by the first node from the memory. The second node restoration module 2230 is used to restore the proxy rendering instructions into rendering instructions and execute the rendering instructions to re-render the target page object on the target page.
[0268] In some embodiments, the second node restoration module 2230 is further configured to: determine the target second syntax template used by the proxy rendering instruction, wherein the target second syntax template is one of a plurality of second syntax templates, and the plurality of second syntax templates correspond to different first syntax templates; extract execution parameters from the proxy rendering instruction; and generate a non-storage format rendering instruction based on the execution parameters and the target first syntax template corresponding to the target second syntax template.
[0269] In some embodiments, the execution parameters include an operation identifier key and an operation parameter value. The second node restoration module 2230 is further configured to: extract the operation identifier key and the serialization value from the proxy rendering instruction; perform deserialization processing on the serialization value to obtain the operation parameter value; and generate a non-storage format rendering instruction based on the operation identifier key and the operation parameter value.
[0270] In some embodiments, the execution parameters include an operation identifier key and an operation parameter value. The operation parameter value includes the creation method name and creation method parameter value of the rendering style object. The second node restoration module 2230 is further configured to: extract the operation identifier key, creation method name, and creation method parameter value from the proxy rendering instruction; create a rendering style object based on the creation method name and creation method parameter value; and generate a non-storage format rendering instruction based on the operation identifier key and the rendering style object.
[0271] In some embodiments, the execution parameters of the rendering instruction include the resource location of the target resource. The second node restoration module 2230 is further configured to: trigger an acquisition request for the target resource based on the resource location; when the target resource is not acquired through the acquisition request at the first time point, execute the rendering instruction to re-render the target page object on the target page based on the default resource; when the target resource is acquired through the acquisition request at the second time point, re-execute the rendering instruction to re-render the target page object on the target page based on the target resource, wherein the second time point is later than the first time point.
[0272] In some embodiments, the second node receiving module 2220 is further configured to: receive proxy rendering instructions sent by the first node in an order of execution; the second node restoration module 2230 is further configured to: restore each proxy rendering instruction to a corresponding rendering instruction, and execute multiple rendering instructions in an order of execution to re-render the target page object on the target page.
[0273] Reference Figure 23 , Figure 23 To implement the page processing method of this embodiment, the terminal 140 includes the following components: a radio frequency (RF) circuit 2310, a memory 2315, an input unit 2330, a display unit 2340, a sensor 2350, an audio circuit 2360, a wireless fidelity (WiFi) module 2370, a processor 2380, and a power supply 2390. Those skilled in the art will understand that... Figure 23 The terminal structure shown does not constitute a limitation on mobile phones or computers and may include more or fewer components than shown, or combine certain components, or have different component arrangements.
[0274] The RF circuit 2310 can be used to receive and transmit signals during information transmission or calls. In particular, it receives downlink information from the base station and processes it with the processor 2380; in addition, it transmits uplink data to the base station.
[0275] The memory 2315 can be used to store software programs and modules. The processor 2380 executes various terminal functions and data processing by running the software programs and modules stored in the memory 2315.
[0276] The input unit 2330 can be used to receive input numeric or character information, and to generate key signal inputs related to the settings and function control of the terminal. Specifically, the input unit 2330 may include a touch panel 2331 and other input devices 2332.
[0277] Display unit 2340 can be used to display input or provided information, as well as various menus of the terminal. Display unit 2340 may include display panel 2341.
[0278] Audio circuitry 2360, speaker 2361, and microphone 2362 provide an audio interface.
[0279] In this embodiment, the processor 2380 included in the terminal can execute the page processing method of the previous embodiment. The terminals disclosed in this embodiment include, but are not limited to, mobile phones, computers, intelligent voice interaction devices, smart home appliances, vehicle terminals, and aircraft. The embodiments of this invention can be applied to various scenarios, including but not limited to cloud technology, artificial intelligence, smart transportation, and assisted driving.
[0280] Reference Figure 24 , Figure 24 The structural block diagram of a server implementing the page processing method of this disclosure is shown below. The server 110 can vary significantly due to different configurations or performance characteristics. It may include one or more Central Processing Units (CPUs) 2422 (e.g., one or more processors) and a memory 2432, and one or more storage media 2430 (e.g., one or more mass storage devices) for storing application programs 2442 or data 2444. The memory 2432 and storage media 2430 may be temporary or persistent storage. The program stored in the storage media 2430 may include one or more modules (not shown in the diagram), each module including a series of instruction operations on the server 2400. Furthermore, the CPU 2422 may be configured to communicate with the storage media 2430 and execute the series of instruction operations in the storage media 2430 on the server 2400.
[0281] Server 2400 may also include one or more power supplies 2426, one or more wired or wireless network interfaces 2450, one or more input / output interfaces 2458, and / or one or more operating systems 2441, such as Windows Server™, Mac OS X™, Unix™, Linux™, FreeBSD™, etc.
[0282] The processor in server 2400 can be used to execute the page processing method of the present disclosure embodiments.
[0283] This disclosure also provides a computer-readable storage medium for storing a computer program for executing the page processing methods of the foregoing embodiments.
[0284] This disclosure also provides a computer program product comprising a computer program. A processor of an electronic device reads and executes the computer program, causing the electronic device to perform the page processing method described above.
[0285] The terms “first,” “second,” “third,” “fourth,” etc. (if present) in this disclosure and the accompanying drawings are used to distinguish similar objects and are not necessarily used to describe a particular order or sequence. It should be understood that such data can be interchanged where appropriate so that embodiments of this disclosure described herein can be implemented, for example, in orders other than those illustrated or described herein. Furthermore, the terms “comprising” and “including,” and any variations thereof, are intended to cover non-exclusive inclusion; for example, a process, method, system, product, or apparatus that includes a series of steps or units is not necessarily limited to those steps or units explicitly listed, but may include other steps or units not explicitly listed or inherent to such processes, methods, products, or apparatus.
[0286] It should be understood that in this disclosure, "at least one item" means one or more, and "more than one" means two or more. "And / or" is used to describe the relationship between related objects, indicating that three relationships can exist. For example, "A and / or B" can represent three cases: only A exists, only B exists, and both A and B exist simultaneously, where A and B can be singular or plural. The character " / " generally indicates that the preceding and following related objects are in an "or" relationship. "At least one of the following" or similar expressions refer to any combination of these items, including any combination of single or plural items. For example, at least one of a, b, or c can represent: a, b, c, "a and b", "a and c", "b and c", or "a and b and c", where a, b, and c can be single or multiple.
[0287] It should be understood that in the description of the embodiments of this disclosure, "multiple" means two or more, "greater than", "less than", "exceeding" etc. are understood to exclude the number itself, and "above", "below", "within" etc. are understood to include the number itself.
[0288] In the several embodiments provided in this disclosure, it should be understood that the disclosed systems, apparatuses, and methods can be implemented in other ways. For example, the apparatus embodiments described above are merely illustrative; for instance, the division of units is only a logical functional division, and in actual implementation, there may be other division methods. For example, multiple units or components may be combined or integrated into another system, or some features may be ignored or not executed. Furthermore, the coupling or direct coupling or communication connection shown or discussed may be through some interfaces, or indirect coupling or communication connection between apparatuses or units, and may be electrical, mechanical, or other forms.
[0289] The units described as separate components may or may not be physically separate. The components shown as units may or may not be physical units; that is, they may be located in one place or distributed across multiple network units. Some or all of the units can be selected to achieve the purpose of this embodiment according to actual needs.
[0290] Furthermore, the functional units in the various embodiments of this disclosure can be integrated into one processing unit, or each unit can exist physically separately, or two or more units can be integrated into one unit. The integrated unit can be implemented in hardware or as a software functional unit.
[0291] If the integrated unit is implemented as a software functional unit and sold or used as an independent product, it can be stored in a computer-readable storage medium. Based on this understanding, the technical solution of this disclosure, in essence, or the part that contributes to the prior art, or all or part of the technical solution, can be embodied in the form of a software product. This computer software product is stored in a storage medium and includes several instructions (computer programs) to cause an electronic device (which may be a personal computer, server, or network device, etc.) to execute all or part of the steps of the methods of the various embodiments of this disclosure. The aforementioned storage medium includes various media capable of storing computer programs, such as USB flash drives, portable hard drives, read-only memory (ROM), random access memory (RAM), magnetic disks, or optical disks.
[0292] It should also be understood that the various implementation methods provided in this disclosure can be combined arbitrarily to achieve different technical effects. In this disclosure, the terms "module" or "unit" refer to a computer program or part of a computer program that has a predetermined function and works with other related parts to achieve a predetermined goal, and can be implemented wholly or partially using software, hardware (such as processing circuitry or memory), or a combination thereof. Similarly, a processor (or multiple processors or memory) can be used to implement one or more modules or units. Furthermore, each module or unit can be part of an overall module or unit that includes the functionality of that module or unit.
[0293] The above is a detailed description of the embodiments of this disclosure. However, this disclosure is not limited to the above embodiments. Those skilled in the art can make various equivalent modifications or substitutions without departing from the spirit of this disclosure. All such equivalent modifications or substitutions are included within the scope defined by the claims of this disclosure.
Claims
1. A page processing method, characterized in that, include: In response to a rendering request to render a target page object on the target page, generate rendering instructions in a non-storage format; Execute the rendering instructions to render the target page object on the target page, and record the execution parameters during the execution of the rendering instructions; Based on the execution parameters, a proxy rendering instruction in a storage format is generated and stored in the memory; In response to a re-rendering request for the target page, the proxy rendering instruction is retrieved from the memory, the proxy rendering instruction is restored to the rendering instruction, and the rendering instruction is executed to re-render the target page object on the target page.
2. The page processing method according to claim 1, characterized in that, The process of recording execution parameters during the execution of the rendering instructions includes: Create a proxy object to act as the rendering instructions; During the execution of the rendering instructions, the execution parameters are recorded through the proxy object.
3. The page processing method according to claim 2, characterized in that, The proxy object includes a property assignment proxy method and a method invocation proxy method. The execution parameters include property assignment parameters or method invocation parameters. During the execution of the rendering instruction, the execution parameters are recorded through the proxy object, including: In response to triggering an attribute assignment operation during the execution of the rendering instruction, the attribute assignment proxy method in the proxy object is called to record the attribute assignment parameters of the attribute assignment operation; In response to a method invocation operation triggered during the execution of the rendering instruction, the method invocation proxy method in the proxy object is invoked to record the method invocation parameters of the method invocation operation.
4. The page processing method according to claim 2, characterized in that, After recording the execution parameters through the proxy object, the page processing method further includes: Determine the update frequency of the target page; When the update frequency is less than the update frequency threshold, the proxy object is destroyed. When the update frequency is greater than or equal to the update frequency threshold, the proxy object is disabled. The disabled proxy object is to be enabled again when the target page is updated next time.
5. The page processing method according to claim 1, characterized in that, The step of generating proxy rendering instructions in storage format based on the execution parameters includes: The target first syntax template used by the rendering instruction is determined, wherein the target first syntax template is one of a plurality of first syntax templates, and the plurality of first syntax templates correspond to different second syntax templates respectively; Based on the execution parameters and the target second syntax template corresponding to the target first syntax template, the proxy rendering instruction in storage format is generated; The step of restoring the proxy rendering instruction to the rendering instruction includes: Determine the target second syntax template used by the proxy rendering instruction; Extract the execution parameters from the proxy rendering instructions; Based on the execution parameters and the target first syntax template corresponding to the target second syntax template, the rendering instructions in non-storage format are generated.
6. The page processing method according to claim 1, characterized in that, The execution parameters include an operation identifier key and an operation parameter value. The step of generating proxy rendering instructions in a storage format based on the execution parameters includes: The operation parameter values are serialized to obtain serialized values; Based on the operation identifier key and the serialization value, the proxy rendering instruction in storage format is generated; The step of restoring the proxy rendering instruction to the rendering instruction includes: Extract the operation identifier key and the serialized value from the proxy rendering instruction; The serialized value is deserialized to obtain the operation parameter value; Based on the operation identifier key and the operation parameter value, the rendering instruction in non-storage format is generated.
7. The page processing method according to claim 1, characterized in that, The execution parameters include an operation identifier key and an operation parameter value. The operation parameter value includes the creation method name of the rendering style object and the creation method parameter value. Restoring the proxy rendering instruction to the rendering instruction includes: Extract the operation identifier key, the creation method name, and the creation method parameter values from the proxy rendering instruction; The rendering style object is created based on the creation method name and the creation method parameter values; Based on the operation identifier key and the rendering style object, the rendering instructions are generated in a non-storage format.
8. The page processing method according to claim 1, characterized in that, The execution parameters of the rendering instruction include the resource location of the target resource. Executing the rendering instruction to re-render the target page object on the target page includes: A request to acquire the target resource is triggered based on the resource location; If the target resource is not obtained through the acquisition request at the first time point, the rendering instruction is executed to re-render the target page object on the target page according to the default resource; When the target resource is obtained through the acquisition request at the second time point, the rendering instruction is re-executed to re-render the target page object on the target page according to the target resource, wherein the second time point is later than the first time point.
9. The page processing method according to claim 1, characterized in that, Storing the proxy rendering instructions in memory includes: The proxy rendering instruction is encrypted using the key to obtain the encrypted proxy rendering instruction. The encrypted proxy rendering instructions are stored in the memory; The key is generated based at least on the page identifier of the target page; The step of retrieving the proxy rendering instructions from the memory includes: Retrieve the encrypted proxy rendering instructions from the memory; The encrypted proxy rendering instruction is decrypted using the key to obtain the proxy rendering instruction.
10. The page processing method according to claim 9, characterized in that, When the rendering instruction is executed to render the target page object on the target page, the page processing method further includes: Obtain the page template of the target page, the page template being injected with the key; The page frame of the target page is rendered according to the page template, and the page frame is used to contain the target page object; The step of encrypting the proxy rendering instruction according to the key to obtain the encrypted proxy rendering instruction includes: The proxy rendering instruction is encrypted using the key in the page template to obtain the encrypted proxy rendering instruction.
11. The page processing method according to claim 1, characterized in that, Storing the proxy rendering instructions in memory includes: The proxy rendering instructions are compressed to obtain compressed proxy rendering instructions; The compressed proxy rendering instructions are stored in the memory; The step of retrieving the proxy rendering instructions from the memory includes: Retrieve the compressed proxy rendering instructions from the memory; The compressed proxy rendering instruction is decompressed to obtain the proxy rendering instruction.
12. The page processing method according to claim 1, characterized in that, The number of rendering instructions includes multiple items, and storing the proxy rendering instructions in memory includes: In the memory, the proxy rendering instructions corresponding to the multiple rendering instructions are stored in the execution order of the multiple rendering instructions; The step of retrieving the proxy rendering instruction from the memory, restoring the proxy rendering instruction to the rendering instruction, and executing the rendering instruction includes: Retrieve multiple proxy rendering instructions stored in the execution order from the memory, restore each proxy rendering instruction to its corresponding rendering instruction, and execute the multiple rendering instructions in the execution order.
13. A page processing method, characterized in that, For the first node, the page processing method includes: In response to the second node's rendering request to render the target page object on the target page, a non-storage format rendering instruction is generated; Execute the rendering instructions and record the execution parameters during the execution of the rendering instructions; Based on the execution parameters, a proxy rendering instruction in a storage format is generated and stored in the memory; In response to the second node's request to re-render the target page, the proxy rendering instruction is retrieved from the memory and sent to the second node so that the second node restores the proxy rendering instruction to the rendering instruction and executes the rendering instruction to re-render the target page object on the target page.
14. A page processing method, characterized in that, For the second node, the page processing method includes: A rendering request for rendering the target page object on the target page is sent to the first node, so that the first node generates a non-storage format rendering instruction, executes the rendering instruction, records the execution parameters during the execution of the rendering instruction, generates a storage format proxy rendering instruction based on the execution parameters, and stores the proxy rendering instruction in the memory; The re-rendering request for the target page is sent to the first node; Receive the proxy rendering instruction sent by the first node, the proxy rendering instruction being retrieved by the first node from the memory; The proxy rendering instruction is restored to the rendering instruction, and the rendering instruction is executed to re-render the target page object on the target page.
15. A page processing apparatus, characterized in that, include: The generation module is used to generate rendering instructions in non-storage format in response to rendering requests for rendering target page objects on the target page. A recording module is used to execute the rendering instructions to render the target page object on the target page, and to record execution parameters during the execution of the rendering instructions; A storage module is used to generate proxy rendering instructions in a storage format based on the execution parameters, and to store the proxy rendering instructions in a memory; The restore module is configured to, in response to a re-rendering request for the target page, retrieve the proxy rendering instruction from the memory, restore the proxy rendering instruction to the rendering instruction, and execute the rendering instruction to re-render the target page object on the target page.
16. A page processing apparatus, characterized in that, For the first node, the page processing device includes: The first node generation module is used to generate non-storage format rendering instructions in response to the rendering request of the second node to render the target page object on the target page. The first node recording module is used to execute the rendering instructions and record the execution parameters during the execution of the rendering instructions; The first node storage module is used to generate a proxy rendering instruction in a storage format based on the execution parameters, and store the proxy rendering instruction in the memory; The first node sending module is configured to, in response to the second node's request to re-render the target page, retrieve the proxy rendering instruction from the memory, send the proxy rendering instruction to the second node, so that the second node restores the proxy rendering instruction to the rendering instruction, executes the rendering instruction, and re-renders the target page object on the target page.
17. A page processing apparatus, characterized in that, For the second node, the page processing device includes: The second node sending module is used to send the rendering request for rendering the target page object on the target page to the first node, so that the first node generates a non-storage format rendering instruction, executes the rendering instruction, records the execution parameters during the execution of the rendering instruction, generates a storage format proxy rendering instruction based on the execution parameters, and stores the proxy rendering instruction in the memory. The second node sending module is also used to send a re-rendering request for the target page to the first node; The second node receiving module is used to receive the proxy rendering instruction sent by the first node, wherein the proxy rendering instruction is obtained by the first node from the memory; The second node restoration module is used to restore the proxy rendering instruction to the rendering instruction, execute the rendering instruction, and re-render the target page object on the target page.
18. An electronic device comprising a memory and a processor, wherein the memory stores a computer program, characterized in that, When the processor executes the computer program, it implements the page processing method according to any one of claims 1 to 12, or the page processing method according to claim 13, or the page processing method according to claim 14.
19. A computer-readable storage medium storing a computer program, characterized in that, When the computer program is executed by a processor, it implements the page processing method according to any one of claims 1 to 12, or the page processing method according to claim 13, or the page processing method according to claim 14.
20. A computer program product, the computer program product comprising a computer program, characterized in that, The computer program is read and executed by the processor of the electronic device, causing the electronic device to perform the page processing method according to any one of claims 1 to 12, or the page processing method according to claim 13, or the page processing method according to claim 14.