Page rendering optimization method and device, computer equipment and storage medium
By updating the code folding and dynamic code update of the interactive interface page code, the depth and breadth of the page DOM is reduced, the problem of low complex page rendering performance is solved, and more efficient page rendering is achieved.
Patent Information
- Application Number
- CN202411388673.9
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- Filing Date
- 2024-09-30
- Publication Date
- 2025-01-24
AI Technical Summary
Due to the complex functions and content of interactive pages, the types of elements in the page are diverse, and there are complex nesting relationships between page elements, resulting in a large depth of DOM, which increases the time-consuming calculation of the difference between virtual DOM and real DOM, and reduces the Page rendering performance.
By obtaining the page code of the interactive interface, the code type based on the code processing objects in the code is folded to the hierarchical relationship of the page code to obtain the code template. Then, based on the update of the dynamic code in the code template recognition interaction interface, the update data is obtained, and the interaction interface is rendered according to the update data.
The depth and breadth of the page code have been reduced, the time consumption of the difference between the virtual DOM and the real DOM is consumed, and the rendering performance of the page is optimized.
Smart Images
Figure CN119357495A_ABST
Abstract
Description
Technical Field
[0001] The present disclosure relates to the field of computer technology, and in particular to a page rendering optimization method, apparatus, computer equipment, and storage medium. Background Art
[0002] In web applications, page content can be dynamically updated and rendered based on user input or operations. This technology enables users to interact with the page in real time, resulting in a richer and more personalized browsing experience.
[0003] In the relevant page rendering scheme, a lightweight JavaScript object tree can be maintained in memory to simulate the real DOM (Document Object Model) of the page. Specifically, when the user interacts with the page and causes the state of the component to change, a new virtual DOM tree can be created to describe how the page component should appear. Then, the difference between the virtual DOM and the current real DOM of the page can be calculated, and the part of the real DOM that needs to be changed can be updated. However, as the functions and content of interactive pages become more and more complex, the types of elements in the page are becoming more and more diverse. For example, page component types can include common components, form components, button components, display components, etc. Among them, Figure 1 Shown is a schematic diagram of commonly used components in page development.
[0004] It should be understood that during the page development process, there is often a complex nested relationship between page elements, resulting in a large DOM depth for the page, making the difference calculation operation between the virtual DOM and the real DOM time-consuming, thereby reducing the rendering performance of the page. Summary of the invention
[0005] In view of this, the present disclosure provides a page rendering optimization method, apparatus, computer equipment and storage medium to solve the problem of low page rendering performance.
[0006] In a first aspect, the present disclosure provides a page rendering optimization method, the method comprising:
[0007] Get the page code of the interactive interface;
[0008] Perform code folding on the hierarchical relationship of the page code based on the code type of the processing object in the page code to obtain a code template, wherein the code type includes dynamic code, and the dynamic code is used to indicate the code in the page code that updates data in response to the interactive behavior;
[0009] Based on the code template, the update of the dynamic code in the interactive interface is identified, the update data is obtained, and the interactive interface is rendered according to the update data.
[0010] In a second aspect, the present disclosure provides a page rendering optimization device, the device comprising:
[0011] Acquisition module, used to obtain the page code of the interactive interface;
[0012] A folding module, used to perform code folding on the hierarchical relationship of the page code based on the code type of the processing object in the page code to obtain a code template, wherein the code type includes dynamic code, and the dynamic code is used to indicate the code in the page code that updates data in response to the interactive behavior;
[0013] The recognition module is used to recognize the update of dynamic code in the interactive interface based on the code template, obtain the update data, and render the interactive interface according to the update data.
[0014] In a third aspect, the present disclosure provides a computer device, comprising: a memory and a processor, the memory and the processor are communicatively connected to each other, computer instructions are stored in the memory, and the processor executes the page rendering optimization method of the above-mentioned first aspect or any corresponding embodiment thereof by executing the computer instructions.
[0015] In a fourth aspect, the present disclosure provides a computer-readable storage medium having computer instructions stored thereon, the computer instructions being used to enable a computer to execute the page rendering optimization method of the first aspect or any corresponding embodiment thereof.
[0016] In a fifth aspect, the present invention provides a computer program product, comprising computer instructions, wherein the computer instructions are used to enable a computer to execute the page rendering optimization method of the first aspect or any corresponding embodiment thereof.
[0017] In the disclosed embodiment, the page code of the interactive interface can be first obtained, and the hierarchical relationship of the page code can be folded based on the code type of the object processed in the page code to obtain a code template, wherein the code type includes dynamic code, and the dynamic code is used to indicate the code in the page code that updates data in response to interactive behavior. Then, the update of the dynamic code in the interactive interface can be identified based on the code template, the updated data can be obtained, and the interactive interface can be rendered according to the updated data, thereby reducing the depth and breadth of the page code, reducing the time consumption of the difference calculation operation between the virtual DOM and the real DOM, and optimizing the rendering performance of the page. BRIEF DESCRIPTION OF THE DRAWINGS
[0018] In order to more clearly illustrate the specific embodiments of the present disclosure or the technical solutions in the prior art, the drawings required for use in the specific embodiments or the description of the prior art will be briefly introduced below. Obviously, the drawings described below are some embodiments of the present disclosure. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying any creative work.
[0019] Figure 1 It is a schematic diagram of commonly used components in page development;
[0020] Figure 2 is a flow chart of a page rendering optimization method according to an embodiment of the present disclosure;
[0021] Figure 3 is a flow chart of another page rendering optimization method according to an embodiment of the present disclosure;
[0022] Figure 4 is a structural block diagram of a page rendering optimization device according to an embodiment of the present disclosure;
[0023] Figure 5 It is a schematic diagram of the hardware structure of the computer device of the embodiment of the present disclosure. DETAILED DESCRIPTION
[0024] In order to make the purpose, technical solution and advantages of the embodiments of the present disclosure clearer, the technical solution in the embodiments of the present disclosure will be clearly and completely described below in conjunction with the drawings in the embodiments of the present disclosure. Obviously, the described embodiments are part of the embodiments of the present disclosure, rather than all the embodiments. Based on the embodiments in the present disclosure, all other embodiments obtained by those skilled in the art without creative work are within the scope of protection of the present disclosure.
[0025] In conjunction with the application scenarios on which the execution of the page rendering optimization method depends, the application scenarios are described here.
[0026] In web applications, page content can be dynamically updated and rendered based on user input or operations. This technology enables users to interact with the page in real time, resulting in a richer and more personalized browsing experience.
[0027] In the relevant page rendering scheme, a lightweight JavaScript object tree can be maintained in memory to simulate the real DOM (Document Object Model) of the page. Specifically, when the user interacts with the page and causes the state of the component to change, a new virtual DOM tree can be created to describe how the page component should appear. Then, the difference between the virtual DOM and the current real DOM of the page can be calculated, and the part of the real DOM that needs to be changed can be updated. However, as the functions and content of interactive pages become more and more complex, the types of elements in the page are becoming more and more diverse. For example, page component types can include common components, form components, button components, display components, etc. Among them, Figure 1 Shown is a schematic diagram of commonly used components in page development.
[0028] It should be understood that during the page development process, there is often a complex nested relationship between page elements, resulting in a large DOM depth for the page, making the difference calculation operation between the virtual DOM and the real DOM time-consuming, thereby reducing the rendering performance of the page.
[0029] Here, in the relevant page rendering solution, since traditional DOM operations are usually slow, because each update will cause the browser to recalculate the layout and redraw the page, the page rendering process can be optimized through the JavaScript library algorithm. Specifically, the JavaScript library can create a JavaScript object tree in memory, namely the above-mentioned virtual DOM, which corresponds to the actual DOM structure. When the state of the interactive interface changes, the difference between the virtual DOM and the actual DOM is calculated, and only the part of the actual DOM that needs to be changed is updated. This "difference calculation" mechanism greatly improves rendering performance, reduces unnecessary DOM operations, and thus improves the responsiveness of the application.
[0030] In addition to the virtual DOM, the JavaScript library also provides a special syntax extension JSX, which allows developers to write HTML-like structures directly in JavaScript code, making the code more intuitive and easy to read. Traditional front-end development usually requires creating and manipulating DOM elements in JavaScript code, which is often cumbersome and unintuitive. With JSX, developers can write JavaScript and HTML structures in one file at the same time, significantly improving development efficiency.
[0031] However, in the standard implementation of the JavaScript library, when calculating the difference between the virtual DOM and the actual DOM, the JSX written by the developer will be recursively compared. Since the components in the interactive interface may have a complex stacking relationship, the nesting relationship of JSX is relatively complex and deep, which makes the difference calculation operation between the virtual DOM and the real DOM time-consuming, reducing the rendering performance of the page.
[0032] Based on this, the embodiment of the present disclosure provides a page rendering optimization method, which can first obtain the page code of the interactive interface, and perform code folding on the hierarchical relationship of the page code based on the code type of the processing object in the page code to obtain a code template, wherein the code type includes dynamic code, and the dynamic code is used to indicate the code in the page code that updates data in response to interactive behavior. Then, the update of the dynamic code in the interactive interface can be identified based on the code template, the updated data can be obtained, and the interactive interface can be rendered according to the updated data, thereby reducing the depth and breadth of the page code, reducing the time-consuming difference calculation operation between the virtual DOM and the real DOM, and optimizing the rendering performance of the page.
[0033] According to an embodiment of the present disclosure, a process configuration method embodiment is provided. It should be noted that the steps shown in the flowchart of the accompanying drawings can be executed in a computer system such as a set of computer executable instructions, and although a logical order is shown in the flowchart, in some cases, the steps shown or described can be executed in an order different from that shown here.
[0034] It is understandable that before using the technical solutions disclosed in the embodiments of the present disclosure, the types, scope of use, usage scenarios, etc. of the personal information involved in the present disclosure should be informed to the user and the user's authorization should be obtained in an appropriate manner in accordance with relevant laws and regulations.
[0035] For example, in response to receiving an active request from a user, a prompt message is sent to the user to clearly prompt the user that the operation requested to be performed will require obtaining and using the user's personal information. Thus, the user can autonomously choose whether to provide personal information to software or hardware such as an electronic device, application, server, or storage medium that performs the operation of the technical solution of the present disclosure according to the prompt message.
[0036] As an optional but non-limiting implementation, in response to receiving an active request from the user, the prompt information may be sent to the user in the form of a pop-up window, in which the prompt information may be presented in text form. In addition, the pop-up window may also carry a selection control for the user to choose "agree" or "disagree" to provide personal information to the electronic device.
[0037] It is understandable that the above notification and the process of obtaining user authorization are merely illustrative and do not constitute a limitation on the implementation of the present disclosure. Other methods that meet the relevant laws and regulations may also be applied to the implementation of the present disclosure.
[0038] It is understandable that the data involved in this technical solution (including but not limited to the data itself, the acquisition or use of the data) shall comply with the requirements of relevant laws, regulations and relevant provisions.
[0039] According to an embodiment of the present disclosure, an embodiment of a page rendering optimization method is provided. It should be noted that the steps shown in the flowchart of the accompanying drawings can be executed in a computer system such as a set of computer executable instructions, and although a logical order is shown in the flowchart, in some cases, the steps shown or described can be executed in an order different from that shown here.
[0040] In this embodiment, a page rendering optimization method is provided, which can be used for an electronic device installed with a web application. Figure 2 is a flow chart of a page rendering optimization method according to an embodiment of the present disclosure. Figure 1 As shown, the process includes the following steps:
[0041] Step S201, obtaining the page code of the interactive interface.
[0042] In the disclosed embodiments, the interactive interface may be a web page displayed in the web application for interacting with the user, for example, a navigation page that provides the overall navigation structure of the website, helps the user quickly find the required content, a personal center page that displays the user's personal information and related operations, etc. The page code may be a JavaScript code for constructing the interactive interface.
[0043] Step S202, code folding is performed on the hierarchical relationship of the page code based on the code type of the processing object in the page code to obtain a code template, wherein the code type includes dynamic code, and the dynamic code is used to indicate the code in the page code that updates data in response to the interactive behavior.
[0044] In the disclosed embodiment, the processing object may be a basic object in the page code for rendering an interactive page, for example, JSXElement, which contains an object describing the component structure and properties. When rendering a page, a compiler (such as Babel) may convert the JSXElement into a JavaScript object, and pass the JavaScript as a parameter to the DOM.render() method to render it to an actual DOM element.
[0045] In the page code, the code type of the processing object includes not only dynamic code but also static code, where static code is the code that is determined and does not change when the page is loaded. For example, static resource files such as HTML, CSS and JavaScript, as well as static content directly embedded in HTML files, static code is usually used to define the basic structure and style of the web page, and provide some fixed functions and interactions. In addition, dynamic code refers to the code generated or updated according to user behavior or server-side data changes after the page is loaded. Dynamic code is usually implemented using JavaScript, which obtains data by communicating with the server and dynamically modifies the content, style or structure of the page based on this data.
[0046] When folding the page code, the nested relationship between the page codes can be traversed to identify the processing objects corresponding to the dynamic code and the static code respectively, and the page code can be folded according to the processing objects, thereby simplifying the three-dimensional, deep nested relationship into a flat code template. In this code version, the processing objects can be saved according to the traversal order of the processing objects to obtain the code template.
[0047] Step S203, identifying the update of the dynamic code in the interactive interface based on the code template, obtaining the update data, and rendering the interactive interface according to the update data.
[0048] In the disclosed embodiment, after the interactive interface is launched, a set of code templates may be maintained based on the page code of the interactive interface to render the interactive interface model according to the code templates.
[0049] Specifically, when rendering the interactive interface through the JavaScript library algorithm, the dynamic code can be directly identified based on the code template of the interactive interface, and the parameter value changes in the dynamic code before and after the interactive behavior occur can be calculated to obtain updated data, so as to render the interactive page according to the updated data without wasting resources on comparing static codes.
[0050] It can be known from the above description that in the embodiment of the present disclosure, the page code of the interactive interface can be first obtained, and the hierarchical relationship of the page code can be folded based on the code type of the processing object in the page code to obtain a code template, wherein the code type includes dynamic code, and the dynamic code is used to indicate the code in the page code that updates the data in response to the interactive behavior. Then, the update of the dynamic code in the interactive interface can be identified based on the code template, the updated data can be obtained, and the interactive interface can be rendered according to the updated data, thereby reducing the depth and breadth of the page code, reducing the time-consuming difference calculation operation between the virtual DOM and the real DOM, and optimizing the rendering performance of the page.
[0051] In this embodiment, another page rendering optimization method is provided, which can be used for electronic devices installed with web applications. Figure 3 is a flow chart of another page rendering optimization method according to an embodiment of the present disclosure. Figure 3 As shown, the process includes the following steps:
[0052] Step S301, obtain the page code of the interactive interface. Figure 2 Step S201 of the illustrated embodiment will not be described in detail here.
[0053] Step S302, code folding is performed on the hierarchical relationship of the page code based on the code type of the processing object in the page code to obtain a code template, wherein the code type includes dynamic code, and the dynamic code is used to indicate the code in the page code that updates data in response to the interactive behavior.
[0054] Specifically, the above step S302 includes:
[0055] Step S3021: Obtain an abstract syntax tree corresponding to the page code, wherein the abstract syntax tree is used to indicate the hierarchical relationship between processing objects in the page code.
[0056] Step S3022: Determine the code type of the processing object based on the identifier of the processing object and the level of the processing object in the abstract syntax tree.
[0057] Step S3023, encapsulate the processing object based on the code type to obtain the encapsulation code, and the position of the encapsulation code in the code template is obtained based on the hierarchical relationship of the processing object.
[0058] Step S3024: Generate an update function based on the processing object whose code type is dynamic code.
[0059] Step S3025, obtaining a code template based on the encapsulated code and the update function.
[0060] In the disclosed embodiment, the abstract syntax tree may be the above-mentioned page code JSXElementAST, which is used to represent the abstract syntax tree of the processing object, and can be used to describe the code type, attributes, and hierarchical relationship of the processing object in the application corresponding to the JavaScript library. Therefore, a deep traversal can be performed based on the abstract syntax tree to determine the code type of the processing object therein.
[0061] Taking into account that the structures of different types of processing objects are also different, the processing objects of different code types can be encapsulated separately to obtain encapsulation codes, and the code template can be determined based on the hierarchical relationship of the encapsulation codes. Specifically, the target processing object corresponding to the dynamic code can be extracted, and the processing object corresponding to the static code can be folded according to the target processing object to obtain the code template.
[0062] In addition, an update function may be set in the code template, and the identified target processing object may be filled into the update function, so that parameter changes of the target processing object may be read more directly during page rendering, thereby further optimizing page rendering performance.
[0063] Step S303: Identify the update of the dynamic code in the interactive interface based on the code template, obtain the update data, and render the interactive interface according to the update data. Figure 2 Step S203 of the illustrated embodiment will not be described in detail here.
[0064] In an embodiment of the present disclosure, when determining a code template based on the hierarchical relationship of the encapsulated code, the target processing object corresponding to the dynamic code can be extracted, and the processing object corresponding to the static code can be folded according to the target processing object to obtain a code template, thereby simplifying the nested relationship between the processing objects.
[0065] In some optional implementations, the above step S3022, based on the identifier of the processing object and the level of the processing object in the abstract syntax tree, determines the code type of the processing object, including:
[0066] Step a1: if the level of the processing object in the abstract syntax tree is a parent node, the type of the processing object is determined based on the identifier of the processing object.
[0067] Step a2: If the type of the processing object is a component, determine that the code type of the processing object is a dynamic code, and identify the code type of the next processing object.
[0068] Step a3: If the type of the processing object is a native tag, determine the first sub-object corresponding to the processing object based on the abstract syntax tree, and determine the code type of the first sub-object.
[0069] In the embodiment of the present disclosure, the object identifier may be a type identifier of a processing object, and the type identifier may represent a type including an attribute container, a component, a native tag, etc. When determining the code type of a processing object, each processing object may be deeply traversed based on an abstract syntax tree. Therefore, a processing object containing a nested relationship may be identified first, and the processing object may be traversed as a parent node to identify the type of the processing object corresponding to the child node.
[0070] When the type of the processing object is identified as a component, the next processing object can be directly identified, and the stacking relationship inside the component can be traversed based on traversal process 1, where traversal process 1 is used to identify sub-components stacked inside the component.
[0071] In addition, when the type of the processing object is identified as a native tag, since the dynamic part of the native tag can include native tags and components, the nested relationship within the native tag can be determined according to the abstract syntax tree, and through traversal process 2, the first sub-object within the native tag is traversed in sequence according to the nested relationship, and a matching traversal process is executed based on the code type of the first sub-object. Here, the native tag refers to a non-customized tag used in the interactive interface to define the structure, layout and content of the web page.
[0072] Specifically, the above step a3, determining the code type of the first sub-object, includes:
[0073] If the first sub-object is a processing object representing a dynamic attribute, the code type of the first sub-object is determined as an attribute container.
[0074] In the disclosed embodiment, the attribute container is a type used inside the JavaScript library to represent JSX attribute values, wherein the attribute value can be a variety of different data types, including strings, numbers, Boolean values, objects, arrays, etc. Here, the attribute container can be represented as JSXAttrValue::JSXExprContainer.
[0075] It should be understood that the attribute value represented by the attribute container can be a dynamic attribute or a static attribute, wherein a static attribute refers to a fixed string or number used directly in the attribute value, and a dynamic attribute refers to an attribute value dynamically generated through a variable, expression or function call.
[0076] On this basis, the attribute container can be encapsulated according to the type of the attribute value represented by the attribute container, specifically including:
[0077] When the attribute value of the first sub-object is not a literal, the attribute value is identified and marked, and the first sub-object is encapsulated as a first node.
[0078] In the embodiment of the present disclosure, the literal includes the above-mentioned fixed string or number. When the attribute value of the first sub-object is not a literal, it means that the type of the attribute value represented by the first sub-object is a dynamic attribute. At this time, the dynamic part of the first sub-object, that is, the attribute value, can be marked, and based on the marked content, it can be encapsulated as the first node, and the traversal process 2 is stopped, wherein the first node is a non-structural element node that does not participate in typesetting.
[0079] In addition, the above step a3, determining the code type of the first sub-object, further includes:
[0080] If the first sub-object is a processing object representing a dynamic structure, the sub-objects of the first sub-object are deeply traversed to obtain the second sub-object, the code type of the first sub-object is determined as a component, and the code type of the second sub-object is determined based on the identifier of the second sub-object.
[0081] In the embodiment of the present disclosure, the processing object representing the dynamic structure may be a container node including a component and a native tag. For example, the structure of the first sub-object may be represented as: {child} Specifically, the processing object can be represented as JSXElementChild::JSXExprContainer. After determining that the first child object is a processing object representing a dynamic structure, the traversal process 2 can be stopped, and the first child object can be traversed in depth first through the above traversal process 1 to obtain the child node in the first child object, that is, the second child object, and the code type of the second child object is determined based on the identifier of the second child object.
[0082] Next, the first sub-object can be encapsulated, including:
[0083] The dynamic code in the first sub-object is identified and marked, and the first sub-object is encapsulated as a second node.
[0084] In an embodiment of the present disclosure, the dynamic part in the first sub-object can be identified and marked, wherein the dynamic part may include the code of the components and native tags in the first sub-object, attribute values, and other content that may change with the interaction instructions.
[0085] Then, the first sub-object can be encapsulated as a second node according to the markup content. Here, since the first sub-object is an object with a dynamic structure, the second node can be a real Element node that does not participate in typesetting, such as a wrapper node, thereby ensuring the stability of the final generated code template.
[0086] After encapsulating the first sub-object, the second sub-object may also be encapsulated, specifically including:
[0087] (1) If the code type of the second sub-object is a native tag, the second sub-object is encapsulated as a third node based on the calling interface encapsulation of the second sub-object.
[0088] (2) If the code type of the second sub-object is a component, the dynamic code in the second sub-object is identified and marked, and the second sub-object is encapsulated as a second node.
[0089] In the embodiment of the present disclosure, if the code type of the second child object is a native tag, the second child object can be represented as JSXElementChild::JSXElement. When encapsulating the native tag, encapsulation can be performed based on the calling interface Element API, so as to dynamically set or modify the attributes of the element, such as class name, style, content, etc., through the calling interface. Here, the encapsulated third node can be createElement, setAttribute, appendChild, etc.
[0090] It should be understood that, in the process of traversing the abstract syntax tree, when encapsulating the processing object corresponding to the static code, the encapsulation calling interface method can also be used to obtain the third node corresponding to the static code. In addition, if there are still child nodes in the second child object, the second child object can continue to be traversed based on the above traversal process 2.
[0091] In addition, if the code type of the second child object is a component, the second child object can be represented as JSXElementChild::JSXElement. When encapsulating the component, the dynamic part in the first child object can be identified and marked, wherein the dynamic part can include the dynamic code in the second child object, such as attribute values, functions, etc. that can change with the interactive instructions.
[0092] Then, the second sub-object can be encapsulated as the second node according to the marked content, and the traversal process 2 is stopped. If there are still sub-nodes in the second sub-object, the traversal process 1 can be continued to be performed on the second sub-object.
[0093] In the disclosed embodiment, the code type of the processing object can be determined based on the identifier of the processing object and the level of the processing object in the abstract syntax tree, and the processing object can be encapsulated based on the code type of the processing object to obtain encapsulated code, thereby reducing the complexity of the abstract syntax tree, making the page code more modular and structured, and at the same time improving the readability of the page code, facilitating the reading of dynamic code updates.
[0094] In some optional implementations, the above step S3024 generates an update function based on the processing object whose code type is dynamic code, including:
[0095] Step b1, setting a first parameter value and a second parameter value for the dynamic code, the first parameter value is the parameter value of the dynamic code before the interactive behavior occurs, and the second parameter value is the parameter value of the dynamic code after the interactive behavior occurs.
[0096] Step b2: generating an update function for the processing object based on the first parameter value and the second parameter value.
[0097] In the embodiment of the present disclosure, the update function may include the object number and parameter value of the processing object, wherein the parameter value may include a first parameter value and a second parameter value. When rendering the page, the first parameter value and the second parameter value may be directly read based on the update function update, and the difference between the two may be calculated to update the part of the real DOM corresponding to the page code that needs to be changed.
[0098] For example, if the processing object is a child node Child whose object number in the code template is 3, the update function of the processing object can be expressed as: updateChild(3, oldValue, value), wherein oldValue is the first parameter value and value is the second parameter value.
[0099] In some optional implementations, step S3025, obtaining a code template based on the encapsulated code and the update function, includes:
[0100] Step c1, based on the hierarchical relationship of the processing objects in the page code, determine the traversal order of the encapsulation code.
[0101] Step c2, generating an array of processing objects based on the traversal order.
[0102] Step c3, determining the code template according to the encapsulation code, array and the update function.
[0103] In the disclosed embodiment, the array return may be used to indicate the traversal order of the encapsulated code in the abstract syntax tree. When the dynamic code is updated, the corresponding dynamic code may be indexed more quickly based on the array return.
[0104] In the disclosed embodiment, an array may be generated in a code template, so that when the dynamic code of the page code is updated, the corresponding processing object may be directly indexed based on the array, thereby improving the speed of data updating.
[0105] In summary, in the disclosed embodiment, the page code of the interactive interface can be first obtained, and the hierarchical relationship of the page code can be folded based on the code type of the processing object in the page code to obtain a code template, wherein the code type includes dynamic code, and the dynamic code is used to indicate the code in the page code that updates data in response to interactive behavior. Then, the update of the dynamic code in the interactive interface can be identified based on the code template, the updated data can be obtained, and the interactive interface can be rendered according to the updated data, thereby reducing the depth and breadth of the page code, reducing the time-consuming difference calculation operation between the virtual DOM and the real DOM, and optimizing the rendering performance of the page.
[0106] In this embodiment, a page rendering optimization device is also provided, which is used to implement the above-mentioned embodiments and preferred implementation modes, and will not be repeated here. As used below, the term "module" can implement a combination of software and / or hardware of a predetermined function. Although the devices described in the following embodiments are preferably implemented in software, the implementation of hardware, or a combination of software and hardware, is also possible and conceivable.
[0107] This embodiment provides a page rendering optimization device, such as Figure 4 As shown, including:
[0108] The acquisition module 401 is used to acquire the page code of the interactive interface;
[0109] A folding module 402 is used to perform code folding on the hierarchical relationship of the page code based on the code type of the processing object in the page code to obtain a code template, wherein the code type includes dynamic code, and the dynamic code is used to indicate the code in the page code that updates data in response to the interactive behavior;
[0110] The identification module 403 is used to identify the update of the dynamic code in the interactive interface based on the code template, obtain the update data, and render the interactive interface according to the update data.
[0111] In some optional implementations, the folding module 402 is further configured to:
[0112] Obtaining an abstract syntax tree corresponding to the page code, wherein the abstract syntax tree is used to indicate the hierarchical relationship between processing objects in the page code;
[0113] Determine the code type of the processing object based on the identifier of the processing object and the level of the processing object in the abstract syntax tree;
[0114] Encapsulate the processing object based on the code type to obtain the encapsulation code. The position of the encapsulation code in the code template is obtained based on the hierarchical relationship of the processing object.
[0115] Generate an update function based on the processing object whose code type is dynamic code;
[0116] Get code template based on encapsulated code and update function.
[0117] In some optional implementations, the folding module 402 is further configured to:
[0118] If the level of the processing object in the abstract syntax tree is a parent node, the type of the processing object is determined based on the identifier of the processing object;
[0119] If the type of the processing object is a component, the code type of the processing object is determined to be a dynamic code, and the code type of the next processing object is identified;
[0120] If the type of the processing object is a native tag, a first sub-object corresponding to the processing object is determined based on the abstract syntax tree, and a code type of the first sub-object is determined.
[0121] In some optional implementations, the folding module 402 is further configured to:
[0122] If the first sub-object is a processing object representing a dynamic attribute, the code type of the first sub-object is determined as an attribute container.
[0123] In some optional implementations, the folding module 402 is further configured to:
[0124] When the attribute value of the first sub-object is not a literal, the attribute value is identified and marked, and the first sub-object is encapsulated as a first node.
[0125] In some optional implementations, the folding module 402 is further configured to:
[0126] If the first sub-object is a processing object representing a dynamic structure, the sub-objects of the first sub-object are deeply traversed to obtain the second sub-object, the code type of the first sub-object is determined as a component, and the code type of the second sub-object is determined based on the identifier of the second sub-object.
[0127] In some optional implementations, the folding module 402 is further configured to:
[0128] The dynamic code in the first sub-object is identified and marked, and the first sub-object is encapsulated as a second node.
[0129] In some optional implementations, the folding module 402 is further configured to:
[0130] If the code type of the second sub-object is a native tag, encapsulating the second sub-object into a third node based on the calling interface encapsulation of the second sub-object;
[0131] If the code type of the second sub-object is a component, the dynamic code in the second sub-object is identified and marked, and the second sub-object is encapsulated as a second node.
[0132] In some optional implementations, the folding module 402 is further configured to:
[0133] Setting a first parameter value and a second parameter value for the dynamic code, wherein the first parameter value is the parameter value of the dynamic code before the interactive behavior occurs, and the second parameter value is the parameter value of the dynamic code after the interactive behavior occurs;
[0134] An update function is generated for the processing object based on the first parameter value and the second parameter value.
[0135] In some optional implementations, the folding module 402 is further configured to:
[0136] Determine the traversal order of the encapsulated code based on the hierarchical relationship of the processing objects in the page code;
[0137] Generate an array of processed objects based on the traversal order;
[0138] Determine the code template based on the encapsulated code, array, and update function.
[0139] The further functional description of each of the above modules and units is the same as that of the above corresponding embodiments and will not be repeated here.
[0140] The page rendering optimization device in this embodiment is presented in the form of a functional unit, where the unit refers to an ASIC (Application Specific Integrated Circuit) circuit, a processor and memory that executes one or more software or fixed programs, and / or other devices that can provide the above functions.
[0141] The present disclosure also provides a computer device having the above Figure 4 The page rendering optimization device shown.
[0142] See also Figure 5 , Figure 5 is a schematic diagram of a computer device provided by an optional embodiment of the present disclosure, such as Figure 5As shown, the computer device includes: one or more processors 10, a memory 20, and interfaces for connecting various components, including high-speed interfaces and low-speed interfaces. Various components are connected to each other using different buses for communication, and can be installed on a common mainboard or installed in other ways as needed. The processor can process the instructions executed in the computer device, including instructions stored in or on the memory to display the graphical information of the GUI on an external input / output device (such as, a display device coupled to the interface). In some optional embodiments, if necessary, multiple processors and / or multiple buses can be used together with multiple memories and multiple memories. Similarly, multiple computer devices can be connected, and each device provides some necessary operations (for example, as a server array, a group of blade servers, or a multi-processor system). Figure 5 A processor 10 is taken as an example.
[0143] The processor 10 may be a central processing unit, a network processor or a combination thereof. The processor 10 may further include a hardware chip. The hardware chip may be a dedicated integrated circuit, a programmable logic device or a combination thereof. The programmable logic device may be a complex programmable logic device, a field programmable gate array, a general purpose array logic or any combination thereof.
[0144] The memory 20 stores instructions executable by at least one processor 10, so that the at least one processor 10 executes the method shown in the above embodiment.
[0145] The memory 20 may include a program storage area and a data storage area, wherein the program storage area may store an operating system, an application required for at least one function; the data storage area may store data created according to the use of the computer device, etc. In addition, the memory 20 may include a high-speed random access memory, and may also include a non-transient memory, such as at least one disk storage device, a flash memory device, or other non-transient solid-state storage device. In some optional embodiments, the memory 20 may optionally include a memory remotely arranged relative to the processor 10, and these remote memories may be connected to the computer device via a network. Examples of the above-mentioned network include, but are not limited to, the Internet, an intranet, a local area network, a mobile communication network, and combinations thereof.
[0146] The memory 20 may include a volatile memory, such as a random access memory; the memory may also include a non-volatile memory, such as a flash memory, a hard disk or a solid state drive; the memory 20 may also include a combination of the above types of memory.
[0147] The computer device further comprises a communication interface 30 for the computer device to communicate with other devices or a communication network.
[0148] The embodiments of the present disclosure also provide a computer-readable storage medium. The above-mentioned method according to the embodiments of the present disclosure can be implemented in hardware, firmware, or can be implemented as a computer code that can be recorded in a storage medium, or can be implemented as a computer code that is originally stored in a remote storage medium or a non-temporary machine-readable storage medium and will be stored in a local storage medium and downloaded through a network, so that the method described herein can be stored in such software processing on a storage medium using a general-purpose computer, a dedicated processor, or programmable or dedicated hardware. Among them, the storage medium can be a magnetic disk, an optical disk, a read-only storage memory, a random access memory, a flash memory, a hard disk or a solid-state drive, etc.; further, the storage medium can also include a combination of the above-mentioned types of memory. It can be understood that a computer, a processor, a microprocessor controller, or programmable hardware includes a storage component that can store or receive software or computer code. When the software or computer code is accessed and executed by a computer, a processor, or hardware, the method shown in the above embodiment is implemented.
[0149] It is understandable that before using the technical solutions disclosed in the embodiments of the present disclosure, the types, scope of use, usage scenarios, etc. of the personal information involved in the present disclosure should be informed to the user and the user's authorization should be obtained in an appropriate manner in accordance with relevant laws and regulations.
[0150] For example, in response to receiving an active request from a user, a prompt message is sent to the user to clearly prompt the user that the operation requested to be performed will require obtaining and using the user's personal information. Thus, the user can autonomously choose whether to provide personal information to software or hardware such as an electronic device, application, server, or storage medium that performs the operation of the technical solution of the present disclosure according to the prompt message.
[0151] As an optional but non-limiting implementation, in response to receiving an active request from the user, the prompt information may be sent to the user in the form of a pop-up window, in which the prompt information may be presented in text form. In addition, the pop-up window may also carry a selection control for the user to choose "agree" or "disagree" to provide personal information to the electronic device.
[0152] It is understandable that the above notification and the process of obtaining user authorization are merely illustrative and do not constitute a limitation on the implementation of the present disclosure. Other methods that meet the relevant laws and regulations may also be applied to the implementation of the present disclosure.
[0153] A part of the present invention may be applied as a computer program product, such as a computer program instruction, which, when executed by a computer, can call or provide the method and / or technical solution according to the present invention through the operation of the computer. Those skilled in the art should understand that the existence of the computer program instruction in a computer-readable medium includes, but is not limited to, a source file, an executable file, an installation package file, etc., and accordingly, the way in which the computer program instruction is executed by the computer includes, but is not limited to: the computer directly executes the instruction, or the computer compiles the instruction and then executes the corresponding compiled program, or the computer reads and executes the instruction, or the computer reads and installs the instruction and then executes the corresponding installed program. Here, the computer-readable medium may be any available computer-readable storage medium or communication medium accessible to the computer.
[0154] Although the embodiments of the present disclosure have been described in conjunction with the accompanying drawings, those skilled in the art may make various modifications and variations without departing from the spirit and scope of the present disclosure, and such modifications and variations are all within the scope defined by the accompanying description.
Claims
1. A page rendering optimization method, characterized in that: The method comprises: Get the page code of the interactive interface; Performing code folding on the hierarchical relationship of the page code based on the code type of the processing object in the page code to obtain a code template, wherein the code type includes dynamic code, and the dynamic code is used to indicate the code in the page code that updates data in response to the interactive behavior; Based on the code template, the update of the dynamic code in the interactive interface is identified, the update data is obtained, and the interactive interface is rendered according to the update data.
2. The method according to claim 1, characterized in that The code folding of the hierarchical relationship of the page code based on the code type of the page code to obtain a code template includes: Acquire an abstract syntax tree corresponding to the page code, wherein the abstract syntax tree is used to indicate a hierarchical relationship between processing objects in the page code; Determining a code type of the processing object based on an identifier of the processing object and a level of the processing object in the abstract syntax tree; Encapsulating the processing object based on the code type to obtain an encapsulation code, wherein the position of the encapsulation code in the code template is obtained based on the hierarchical relationship of the processing object; Generate an update function based on the processing object whose code type is dynamic code; The code template is obtained based on the encapsulation code and the update function.
3. The method according to claim 2, characterized in that The determining the code type of the processing object based on the identifier of the processing object and the level of the processing object in the abstract syntax tree includes: If the level at which the processing object is located in the abstract syntax tree is a parent node, determining the type of the processing object based on the identifier of the processing object; If the type of the processing object is a component, determining that the code type of the processing object is a dynamic code, and identifying the code type of the next processing object; If the type of the processing object is a native tag, a first sub-object corresponding to the processing object is determined based on the abstract syntax tree, and a code type of the first sub-object is determined.
4. The method according to claim 3, characterized in that: The determining the code type of the first sub-object includes: If the first sub-object is a processing object representing a dynamic attribute, the code type of the first sub-object is determined as an attribute container.
5. The method according to claim 4, characterized in that Encapsulating the processing object based on the code type to obtain the encapsulation code includes: When the attribute value of the first sub-object is not a literal, the attribute value is identified and marked, and the first sub-object is encapsulated as a first node.
6. The method according to claim 3, characterized in that: The determining the code type of the first sub-object includes: If the first sub-object is a processing object representing a dynamic structure, the sub-objects of the first sub-object are deeply traversed to obtain the second sub-object, the code type of the first sub-object is determined as a component, and the code type of the second sub-object is determined based on the identifier of the second sub-object.
7. The method according to claim 6, characterized in that Encapsulating the processing object based on the code type to obtain the encapsulation code includes: The dynamic code in the first sub-object is identified and marked, and the first sub-object is encapsulated as a second node.
8. The method according to claim 6, characterized in that The step of encapsulating the processing object according to the code type to obtain the encapsulation code includes: If the code type of the second sub-object is a native tag, encapsulating the second sub-object as a third node based on the calling interface encapsulation of the second sub-object; If the code type of the second sub-object is a component, the dynamic code in the second sub-object is identified and marked, and the second sub-object is encapsulated as a second node.
9. The method according to claim 2, characterized in that: The step of generating an update function based on the processing object whose code type is a dynamic code comprises: Setting a first parameter value and a second parameter value for the dynamic code, wherein the first parameter value is the parameter value of the dynamic code before the interactive behavior occurs, and the second parameter value is the parameter value of the dynamic code after the interactive behavior occurs; An update function is generated for the processing object based on the first parameter value and the second parameter value.
10. The method according to claim 2, characterized in that The obtaining the code template based on the encapsulation code and the update function includes: Determining a traversal order of the encapsulation code based on a hierarchical relationship of the processing object in the page code; Generate an array of the processing objects based on the traversal order; The code template is determined according to the encapsulation code, the array and the update function.
11. A page rendering optimization device, characterized in that: The device comprises: Acquisition module, used to obtain the page code of the interactive interface; A folding module, configured to perform code folding on the hierarchical relationship of the page code based on the code type of the processing object in the page code to obtain a code template, wherein the code type includes a dynamic code, and the dynamic code is used to indicate a code in the page code that updates data in response to an interactive behavior; The identification module is used to identify the update of the dynamic code in the interactive interface based on the code template, obtain update data, and render the interactive interface according to the update data.
12. A computer device, characterized in that: include: A memory and a processor, wherein the memory and the processor are communicatively connected to each other, the memory stores computer instructions, and the processor executes the page rendering optimization method according to any one of claims 1 to 10 by executing the computer instructions.
13. A computer-readable storage medium, characterized in that: The computer-readable storage medium stores computer instructions, and the computer instructions are used to enable a computer to execute the page rendering optimization method according to any one of claims 1 to 10.
14. A computer program product, characterized in that The method comprises computer instructions, wherein the computer instructions are used to enable a computer to execute the page rendering optimization method according to any one of claims 1 to 10.