Page implementation method and device, electronic equipment and storage medium
By generating simulation node tree objects and rendering simulation controls, the performance degradation caused by multiple interactive controls is solved, and the effect of effectively improving front-end performance on a single page is achieved.
Patent Information
- Application Number
- CN202311833046.7
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- Filing Date
- 2023-12-27
- Publication Date
- 2025-06-27
AI Technical Summary
When there are too many interactive controls on a single page, modifying the properties of one of the interactive controls will trigger a large number of diff algorithm verification, resulting in degradation of front-end performance and even page stuttering and fake death.
By generating mock node tree objects, record the control properties of multiple interactive controls, and render the mock controls in the page. When the user triggers the simulation control, the properties of the target interaction control are determined based on the simulation node tree object, and the corresponding target interaction control is rendered in the page.
There is only one interactive control that occupies a lot of resources at a time on a single page, which effectively improves the front-end performance and avoids page lag and fake death.
Smart Images
Figure CN120215935A_ABST
Abstract
Description
Technical Field
[0001] This application relates to the field of computer technologies, and particularly to a page implementation method, apparatus, electronic device, and storage medium. Background Art
[0002] Vue is a front-end framework built on the ideas of data-driven and componentization, which is used to help developers develop user interfaces. When the page structure is relatively complex, directly creating and modifying real DOM nodes in Vue will seriously slow down the front-end performance. Therefore, Vue introduced virtual DOM nodes in version 2.0. When the attributes of virtual DOM nodes are updated, it will trigger the diff algorithm verification of Vue, that is, first compare the differences between the old and new virtual DOM nodes, and then only update the actually changed parts.
[0003] Generally, the diff algorithm verification of Vue will not consume too many resources. However, when the number of interactive controls on a single page is too large, if the attribute of one of the interactive controls is modified, due to the data binding feature of Vue, it will trigger a large number of diff algorithm verifications, resulting in a decline in front-end performance and even situations such as page freezing and unresponsiveness, which greatly affects the user experience. Summary of the Invention
[0004] To solve the above problems in the prior art, embodiments of this application provide a page implementation method, apparatus, electronic device, and storage medium to improve front-end performance and thus avoid situations such as page freezing and unresponsiveness.
[0005] In a first aspect, embodiments of this application provide a page implementation method, and the method includes:
[0006] Generating a simulated node tree object based on data bound to multiple interactive controls; the simulated node tree object records the control attributes of the multiple interactive controls;
[0007] Rendering multiple simulated controls in the page according to the simulated node tree object, where the multiple simulated controls are text display boxes in the styles of the multiple interactive controls, and the multiple simulated controls correspond to the multiple interactive controls one by one;
[0008] Responding to a trigger operation on any target simulated control, and determining the target control attribute of the target interactive control corresponding to the target simulated control among the control attributes of the multiple interactive controls recorded in the simulated node tree object;
[0009] Rendering the corresponding target interactive control in the page according to the target control attribute.
[0010] In a possible implementation, the control property includes a control type, and rendering the corresponding target interaction control in the page according to the target control property includes:
[0011] Determine the control type of the target interaction control;
[0012] Render the corresponding target interaction control in the page according to the control type of the target interaction control.
[0013] In a possible implementation, rendering the corresponding target interaction control in the page according to the control type of the target interaction control includes:
[0014] If the target interaction control is an input control, use the input event to obtain the input value, and render the corresponding target interaction control in the page according to the input value;
[0015] If the target interaction control is a select control, use the virtual loading method to render the corresponding target interaction control in the page.
[0016] In a possible implementation, the using the virtual loading method to render the corresponding target interaction control in the page includes:
[0017] In the data bound to multiple interaction controls, determine the first data to be displayed corresponding to the target alternative in the drop-down list of the select control; the target alternative is a preset number of alternatives in the drop-down list;
[0018] Render the target alternative in the drop-down list of the select control according to the first data to be displayed.
[0019] In a possible implementation, after rendering the target alternative in the drop-down list of the select control, the method further includes:
[0020] In response to a scroll operation on the select control, determine the second data to be displayed corresponding to the alternative to be displayed in the drop-down list in the data bound to multiple interaction controls;
[0021] Render the alternative to be displayed in the drop-down list of the select control according to the second data to be displayed.
[0022] In a possible implementation, after rendering the corresponding target interaction control in the page according to the target control property, the method further includes:
[0023] In response to an operation of releasing the target interaction control, or in response to an operation of triggering a submission event, determine, among the data bound to multiple interaction controls, the target data bound to the target interaction control;
[0024] Update the simulated node tree object according to the target data.
[0025] In a possible implementation manner, after updating the simulated node tree object according to the target data, the method further includes:
[0026] Re-render the target simulated control according to the updated simulated node tree object to replace the target interaction control.
[0027] In a second aspect, an embodiment of the present application provides a page implementation device, and the device includes:
[0028] A simulation unit, configured to generate a simulated node tree object based on data bound to multiple interaction controls; the control attributes of the multiple interaction controls are recorded in the simulated node tree object;
[0029] Render multiple simulated controls in the page according to the simulated node tree object, where the multiple simulated controls are text display boxes in the styles of the multiple interaction controls, and the multiple simulated controls correspond to the multiple interaction controls one by one;
[0030] A rendering unit, configured to, in response to a trigger operation on any target simulated control, determine, among the control attributes of the multiple interaction controls recorded in the simulated node tree object, the target control attribute of the target interaction control corresponding to the target simulated control;
[0031] Render the corresponding target interaction control in the page according to the target control attribute.
[0032] In a possible implementation manner, the rendering unit is specifically configured to:
[0033] Determine the control type of the target interaction control;
[0034] Render the corresponding target interaction control in the page according to the control type of the target interaction control.
[0035] In a possible implementation manner, the rendering unit is specifically configured to:
[0036] If the target interaction control is an input control, obtain an input value using an input event, and render the corresponding target interaction control in the page according to the input value;
[0037] If the target interactive control is a select control, the corresponding target interactive control is rendered on the page using virtual loading.
[0038] In a possible implementation manner, the rendering unit is specifically configured to:
[0039] In the data bound to multiple interactive controls, determine the first data to be displayed corresponding to the target alternative in the drop-down list of the select control; the target alternative is a preset number of alternatives in the drop-down list;
[0040] Render the target alternative in the drop-down list of the select control according to the first data to be displayed.
[0041] In a possible implementation manner, the rendering unit is further configured to:
[0042] In response to a scrolling operation on the select control, determine the second data to be displayed corresponding to the alternative to be displayed in the drop-down list in the data bound to multiple interactive controls;
[0043] Render the alternative to be displayed in the drop-down list of the select control according to the second data to be displayed.
[0044] In a possible implementation manner, the rendering unit is further configured to:
[0045] In response to an operation of releasing the target interactive control, or in response to an operation of triggering a submission event, determine the target data bound to the target interactive control in the data bound to multiple interactive controls;
[0046] Update the simulated node tree object according to the target data.
[0047] In a possible implementation manner, the rendering unit is further configured to:
[0048] Re-render the target simulated control according to the updated simulated node tree object to replace the target interactive control.
[0049] In a third aspect, an embodiment of the present application provides an electronic device, including a memory and a processor, where a computer program is stored on the memory and can run on the processor, and when the computer program is executed by the processor, the method described in any one of the methods of the page implementation method in the first aspect is implemented.
[0050] Fourthly, an embodiment of the present application provides a computer-readable storage medium, in which a computer program is stored. When the computer program is executed by a processor, the method described in any one of the methods of the first aspect for page implementation is implemented.
[0051] The technical solution provided by the embodiment of the present application at least brings the following beneficial effects:
[0052] A page implementation method, device, electronic device and storage medium provided by an embodiment of the present application can present a simulation control in the style of an interaction control to a user. The simulation control is a text display box. When the user triggers the simulation control, an interaction control is rendered to replace the simulation control. Since the rendering speed of the simulation control is much higher than that of the interaction control, presenting the simulation control to the user and then rendering the target interaction control corresponding to the target simulation control according to the trigger operation of the user for any target simulation control, with only one interaction control that occupies more resources on a single page each time, can effectively improve the front-end performance. BRIEF DESCRIPTION OF THE DRAWINGS
[0053] In order to more clearly illustrate the technical solutions in the embodiments of the present application, the drawings required for description in the embodiments will be briefly introduced below. Obviously, the drawings in the following description are only some embodiments of the present application. For those of ordinary skill in the art, other drawings can be obtained based on these drawings without creative efforts.
[0054] Figure 1 It is a flowchart of a page implementation method provided by an embodiment of the present application;
[0055] Figure 2 It is a schematic structural diagram of a page implementation device provided by an embodiment of the present application;
[0056] Figure 3 It is a schematic structural diagram of an electronic device provided by an embodiment of the present application. DETAILED DESCRIPTION OF THE EMBODIMENTS
[0057] In order to make the purpose, technical solutions and advantages of the present application clearer, the present application will be further described in detail below with reference to the drawings. Obviously, the described embodiments are only some embodiments of the present application, rather than all embodiments. All other embodiments obtained by those of ordinary skill in the art based on the embodiments in the present application without creative efforts belong to the scope of protection of the present application.
[0058] It should be noted that the terms "including" and "having" and their variants involved in the documents of this application are intended to cover non-exclusive inclusion. For example, a process, method, system, product, or device that includes a series of steps or units does not necessarily have to be limited to those clearly listed steps or units, but may include other steps or units that are not clearly listed or are inherent to these processes, methods, products, or devices.
[0059] Vue is a front-end framework built on the ideas of data-driven and componentization, used to help developers develop user interfaces. Compared with other single-page applications, Vue is lighter and more performant. Vue introduced virtual DOM nodes in version 2.0, aiming to solve the problem that directly creating and modifying real DOM nodes would seriously slow down the front-end performance and have low maintainability when the page structure is relatively complex. Virtual DOM nodes can help websites achieve the best balance between efficiency and maintainability, so they are introduced by Vue as one of its basic features.
[0060] When the virtual DOM node is updated, it will trigger the diff algorithm verification of Vue to determine whether it is necessary to update the attributes of the real DOM node corresponding to this virtual DOM node. Generally, the diff algorithm verification of Vue will not consume too many resources. However, in some cases, a large number of interactive controls need to be created in batches with formatted data on a single page. For example, when building a joint operation and maintenance platform, the number of interactive controls on a single page may reach several thousand or even tens of thousands. At this time, if the attributes of one of the interactive controls are modified, due to the data binding feature of Vue, it will trigger a large number of diff algorithm verifications, resulting in a serious slowdown of the front-end performance and even page freezing and unresponsiveness.
[0061] Based on this, the embodiments of this application provide a page implementation method, device, electronic device, and storage medium, which can present simulation controls to the user, and then render the target interactive control corresponding to the target simulation control according to the trigger operation of the user for any target simulation control, realizing that there is only one interactive control that occupies more resources on a single page each time, and effectively improving the front-end performance.
[0062] Figure 1 The flowchart of a page implementation method provided by the embodiments of this application is shown as Figure 1 shown, and this page implementation method may include the following steps:
[0063] Step S101, generating a simulated node tree object based on the data bound to multiple interactive controls.
[0064] The real DOM nodes of Vue will consume a large amount of processing resources, which will seriously reduce the front-end performance when a large amount of data needs to be loaded and rendered on the front-end. Therefore, Vue introduced virtual DOM nodes in version 2.0. However, the virtual DOM nodes of Vue may trigger a large number of diff algorithm validations during updates. That is to say, using virtual DOM nodes to load and render a large amount of data may also reduce the front-end performance.
[0065] In the page implementation method provided in the embodiments of the present application, the real DOM nodes of the interactive controls or the virtual DOM nodes corresponding to the real DOM nodes are not generated. Instead, the interactive controls corresponding to the real DOM nodes are replaced with simulated controls processed into the styles of interactive controls, and the simulated controls are text display boxes that occupy a small amount of processing resources.
[0066] In order to render the above-mentioned simulated controls, it is necessary to obtain the data bound to multiple interactive controls in the current page. Then, based on the data bound to multiple interactive controls, a simulated node tree object is generated. The simulated node tree object records the control attributes of multiple interactive controls on the current page.
[0067] Step S102, render multiple simulated controls in the page according to the simulated node tree object.
[0068] After generating the simulated node tree object, the preset simulated control configuration can be read in the simulated node tree object. Then, multiple simulated controls are rendered in the page according to the preset simulated control configuration. The simulated control configuration can be the type, size, and position of the simulated control. Multiple simulated controls correspond to multiple interactive controls one by one.
[0069] So far, the work of replacing interactive controls with simulated controls is completed. Since the text display box only needs to occupy a small amount of processing resources, using a text display box processed into the style of an interactive control to replace an interactive control that occupies a large amount of processing resources can greatly improve the front-end performance.
[0070] In an optional implementation manner, after rendering multiple simulated controls, if there are default values, the simulated controls can be initialized according to the simulated node tree object.
[0071] Step S103, in response to a trigger operation on any target simulated control, determine the target control attribute of the target interactive control corresponding to the target simulated control among the control attributes of the multiple interactive controls recorded in the simulated node tree object.
[0072] Although the above-mentioned simulated controls have the same presentation style as the interactive controls, the simulated controls do not have the property of being interactive. Therefore, after rendering multiple simulated controls, it is necessary to continuously listen for click events. If a trigger operation by the user on any target simulated control among the multiple simulated controls is detected, then in response to the trigger operation on the target simulated control, the target control property of the target interactive control corresponding to the simulated control can be determined among the control properties of the multiple interactive controls recorded in the simulated node tree object.
[0073] Among them, the trigger operation on any one of the multiple simulated controls can be the selection operation by the user on any one of the simulated controls.
[0074] Step S104, render the corresponding target interactive control in the page according to the target control property.
[0075] Among them, the control property includes the control type.
[0076] After determining the control type of the target interactive control, the corresponding target interactive control can be rendered in the page according to the control type of the target interactive control.
[0077] In an alternative implementation, if the control type of the target interactive control is an input control, then the input value can be obtained using the input event, and the corresponding target interactive control can be rendered in the page according to the input value.
[0078] In another alternative implementation, if the control type of the target interactive control is a select control, then the corresponding target interactive control can be rendered in the page using the virtual loading method.
[0079] Since the problem of slow front-end performance may also occur when there are too many alternative items in the select control, therefore, the virtual loading method can be adopted to load the data of some alternative items at a time.
[0080] Specifically, among the data bound to the multiple interactive controls, the first data to be displayed corresponding to the target alternative item in the drop-down list of the select control can be determined.
[0081] Among them, the target alternative item can be a preset number of alternative items in the drop-down list of the select control. For example, it can be the first 6 alternative items in the drop-down list of the select control.
[0082] Furthermore, after determining the first data to be displayed corresponding to the target alternative item in the drop-down list of the select control, the target alternative item in the drop-down list of the select control can be rendered according to the first data to be displayed.
[0083] So far, the rendering of some alternative options in the select control has been completed. Therefore, it is still necessary to continuously monitor the scrolling event to facilitate real-time supplementation of subsequent data.
[0084] In some embodiments, if a scrolling operation on the select control is detected, the second data to be displayed corresponding to the alternative options to be displayed in the dropdown list can be determined from the data bound to multiple interactive controls. The alternative options to be displayed are the alternative options that have not been rendered.
[0085] Furthermore, the alternative options to be displayed in the dropdown list of the select control can be rendered according to the second data to be displayed.
[0086] In an alternative implementation, in response to the operation of releasing the target interactive control, or in response to the operation of triggering a submission event, the target data bound to the target interactive control can be determined from the data bound to multiple interactive controls, and the target data can be updated to the simulated node tree object.
[0087] Exemplarily, the operation of releasing the target interactive control can be an operation that causes the current target interactive control to lose focus. For example, it can be an operation where the user exits the current target interactive control, or it can be an operation where the user selects another interactive control.
[0088] Furthermore, after the user completes the interaction operation with the current interactive control, the processing resources occupied by the interactive control can be released, and the target simulated control can be re-rendered according to the updated simulated node tree object to replace the target interactive control.
[0089] Specifically, in response to the operation of releasing the target interactive control, the rendering of the target interactive control can be stopped, thereby releasing the processing resources occupied by the target interactive control. Furthermore, the target simulated control can be re-rendered according to the updated simulated node tree object to replace the target interactive control.
[0090] In the page implementation method provided by the embodiments of the present application, the real DOM nodes or virtual DOM nodes of the interactive controls are not generated. What is presented to the user is a simulated control in the style of an interactive control, and the simulated control is a text display box. When the user triggers the simulated control, the interactive control is then rendered to replace the simulated control. Since the rendering speed of the simulated control is much higher than that of the interactive control, presenting the simulated control to the user and then rendering the target interactive control corresponding to the target simulated control according to the triggering operation of the user on any target simulated control, there is only one interactive control that occupies more resources on a single page, thereby effectively improving the front-end performance.
[0091] Based on the same inventive concept, a structural schematic diagram of a page implementation device is also provided in the embodiments of the present invention, as Figure 2As shown in the figure, the page implementation device includes:
[0092] A simulation unit 201, configured to generate a simulated node tree object based on data bound to a plurality of interactive controls; the simulated node tree object records control attributes of the plurality of interactive controls;
[0093] Render a plurality of simulated controls in the page according to the simulated node tree object, the plurality of simulated controls are text display boxes in the styles of the plurality of interactive controls, and the plurality of simulated controls correspond to the plurality of interactive controls one by one;
[0094] A rendering unit 202, configured to, in response to a trigger operation on any target simulated control, determine a target control attribute of a target interactive control corresponding to the target simulated control among the control attributes of the plurality of interactive controls recorded in the simulated node tree object;
[0095] Render a corresponding target interactive control in the page according to the target control attribute.
[0096] In a possible implementation manner, the rendering unit 202 is specifically configured to:
[0097] Determine the control type of the target interactive control;
[0098] Render a corresponding target interactive control in the page according to the control type of the target interactive control.
[0099] In a possible implementation manner, the rendering unit 202 is specifically configured to:
[0100] If the target interactive control is an input control, obtain an input value using an input event, and render a corresponding target interactive control in the page according to the input value;
[0101] If the target interactive control is a select control, render a corresponding target interactive control in the page using a virtual loading method.
[0102] In a possible implementation manner, the rendering unit 202 is specifically configured to:
[0103] Determine first data to be displayed corresponding to a target alternative in a drop-down list in a select control from the data bound to the plurality of interactive controls; the target alternative is a preset number of alternatives in the drop-down list;
[0104] Render the target alternative in the drop-down list of the select control according to the first data to be displayed.
[0105] In a possible implementation manner, the rendering unit 202 is further configured to:
[0106] In response to a scrolling operation on a select control, determine, from the data bound to multiple interactive controls, second data to be displayed corresponding to the options to be displayed in the dropdown list.
[0107] Render, based on the second data to be displayed, the options to be displayed in the dropdown list of the select control.
[0108] In a possible implementation, the rendering unit 202 is further configured to:
[0109] In response to an operation of releasing the target interactive control or an operation of triggering a submission event, determine, from the data bound to multiple interactive controls, target data bound to the target interactive control;
[0110] Update the simulated node tree object based on the target data.
[0111] In a possible implementation, the rendering unit 202 is further configured to:
[0112] Rerender the target simulated control based on the updated simulated node tree object to replace the target interactive control.
[0113] Based on the same inventive concept, an embodiment of the present application further provides an electronic device, which may be a terminal with a browser. The electronic device at least includes a memory for storing data and a processor. For the processor for data processing, when performing processing, it may be implemented by a microprocessor, a CPU, a GPU (Graphics Processing Unit), a DSP, or an FPGA. For the memory, operation instructions are stored in the memory, and the operation instructions may be computer-executable code, and each step in the process of the page implementation method in the above embodiment of the present application is implemented through the operation instructions.
[0114] Figure 3 A schematic structural diagram of an electronic device provided by an embodiment of the present application. As Figure 3 shown, the electronic device 300 includes a memory 301, a processor 302, a data acquisition module 303, and a bus 304. The memory 301, the processor 302, and the data acquisition module 303 are all connected through the bus 304, and the bus 304 is used for transmitting data between the memory 301, the processor 302, and the data acquisition module 303.
[0115] Among them, the memory 301 can be used to store software programs and modules. The processor 302 executes various functional applications and data processing of the electronic device 300 by running the software programs and modules stored in the memory 301, such as the page implementation method provided in the embodiments of the present application. The memory 301 mainly includes a program storage area and a data storage area. Among them, the program storage area can store an operating system, application programs of at least one application, etc.; the data storage area can store data created according to the use of the electronic device 300. In addition, the memory 301 may include high-speed random access memory, and may also include non-volatile memory, such as at least one magnetic disk storage device, a flash memory device, or other volatile solid-state storage devices.
[0116] The processor 302 is the control center of the electronic device 300, connecting various parts of the entire electronic device 300 through the bus 304 and various interfaces and lines. By running or executing the software programs and / or modules stored in the memory 301, and by calling the data stored in the memory 301, it executes various functions of the electronic device 300 and processes data. Optionally, the processor 302 may include one or more processing units, such as a CPU, a GPU (Graphics Processing Unit), a digital processing unit, etc.
[0117] The embodiments of the present application also provide a computer-readable storage medium. Computer-executable instructions are stored in the computer storage medium. When the computer program is executed by a processor, it can be used to implement the page implementation method described in any embodiment of the present application.
[0118] In some possible implementation manners, various aspects of the page implementation method provided in the present application can also be implemented in the form of a program product, which includes program code. When the program product runs on a computer device, the program code is used to cause the computer device to execute the steps of the page implementation method according to various exemplary embodiments of the present application described above in this specification. For example, the computer device can execute the process of the page implementation method as Figure 2 shown.
[0119] Those skilled in the art should understand that the embodiments of the present application can be provided as a method, a system, or a computer program product. Therefore, the present application can adopt the form of a complete hardware embodiment, a complete software embodiment, or an embodiment combining software and hardware aspects. Moreover, the present application can adopt the form of a computer program product implemented on one or more computer-usable storage media (including but not limited to disk memories, CD-ROMs, optical memories, etc.) containing computer-usable program code.
[0120] This application is described with reference to the flowcharts and / or block diagrams of methods, apparatus (systems), and computer program products according to the present application. It should be understood that each flow and / or block in the flowchart and / or block diagram, and the combination of flows and / or blocks in the flowchart and / or block diagram, can be implemented by computer program instructions. These computer program instructions can be provided to the processors of general-purpose computers, special-purpose computers, embedded processors, or other programmable data visualization devices to generate a machine, such that the instructions executed by the processors of the computer or other programmable data visualization devices produce means for implementing the functions specified in the flow Figure 1 one or more flows and / or blocks Figure 1 or means for implementing the functions specified in a block or multiple blocks.
[0121] These computer program instructions can also be stored in a computer-readable memory that can direct a computer or other programmable data visualization device to work in a specific manner, such that the instructions stored in the computer-readable memory produce a manufactured article including instruction means that implement the functions specified in the flow Figure 1 one or more flows and / or blocks Figure 1 or means for implementing the functions specified in a block or multiple blocks.
[0122] These computer program instructions can also be loaded onto a computer or other programmable data visualization device, such that a series of operational steps are executed on the computer or other programmable device to generate a computer-implemented process, and thus the instructions executed on the computer or other programmable device provide steps for implementing the functions specified in the flow Figure 1 one or more flows and / or blocks Figure 1 or means for implementing the functions specified in a block or multiple blocks.
[0123] Obviously, those skilled in the art can make various modifications and variations to this application without departing from the spirit and scope of this application. Thus, if these modifications and variations of this application fall within the scope of the claims of this application and their equivalent technologies, this application is also intended to include these modifications and variations.
Claims
1. A page implementation method, characterized in that, The method includes: Generating a simulated node tree object based on data bound to multiple interactive controls; the control attributes of the multiple interactive controls are recorded in the simulated node tree object; Rendering multiple simulated controls in a page according to the simulated node tree object, where the multiple simulated controls are text display boxes in the styles of the multiple interactive controls, and the multiple simulated controls correspond to the multiple interactive controls one by one; Responding to a trigger operation on any target simulated control, and determining the target control attribute of the target interactive control corresponding to the target simulated control among the control attributes of the multiple interactive controls recorded in the simulated node tree object; Rendering the corresponding target interactive control in the page according to the target control attribute.
2. The method according to claim 1, wherein The control attribute includes a control type, and the rendering the corresponding target interactive control in the page according to the target control attribute includes: Determining the control type of the target interactive control; Rendering the corresponding target interactive control in the page according to the control type of the target interactive control.
3. The method according to claim 2, wherein The rendering the corresponding target interactive control in the page according to the control type of the target interactive control includes: If the target interactive control is an input control, obtaining an input value using an input event, and rendering the corresponding target interactive control in the page according to the input value; If the target interactive control is a select control, rendering the corresponding target interactive control in the page using a virtual loading method.
4. The method according to claim 3, characterized in that, The rendering the corresponding target interactive control in the page using a virtual loading method includes: Determining first data to be displayed corresponding to a target alternative in a dropdown list in the select control from the data bound to the multiple interactive controls; the target alternative is a preset number of alternatives in the dropdown list; Rendering the target alternative in the dropdown list in the select control according to the first data to be displayed.
5. The method according to claim 4, wherein After rendering the target alternative in the dropdown list in the select control, the method further includes: Responding to a scrolling operation on the select control, and determining second data to be displayed corresponding to an alternative to be displayed in the dropdown list from the data bound to the multiple interactive controls; Rendering the alternative to be displayed in the dropdown list in the select control according to the second data to be displayed.
6. The method according to claim 1, wherein After rendering the corresponding target interactive control in the page according to the target control attribute, the method further includes: Responding to an operation of releasing the target interactive control, or responding to an operation of triggering a submission event, and determining target data bound to the target interactive control from the data bound to the multiple interactive controls; Updating the simulated node tree object according to the target data.
7. The method according to claim 6, wherein After updating the simulated node tree object according to the target data, the method further includes: Re-rendering the target simulated control according to the updated simulated node tree object to replace the target interactive control.
8. A page implementation device, characterized in that The device includes: A simulation unit for generating a simulated node tree object based on data bound to a plurality of interactive controls; the control attributes of the plurality of interactive controls are recorded in the simulated node tree object; Rendering a plurality of simulated controls in a page according to the simulated node tree object, the plurality of simulated controls being text display boxes in the styles of the plurality of interactive controls, and the plurality of simulated controls corresponding to the plurality of interactive controls one by one; A rendering unit for determining, in the control attributes of the plurality of interactive controls recorded in the simulated node tree object, a target control attribute of a target interactive control corresponding to the target simulated control in response to a trigger operation on any target simulated control; Rendering the corresponding target interactive control in the page according to the target control attribute.
9. An electronic device, characterized in that, Comprising a memory and a processor, a computer program is stored on the memory and can run on the processor, and when the computer program is executed by the processor, the method according to any one of claims 1 to 7 is implemented.
10. A computer-readable storage medium storing a computer program therein, characterized in that: When the computer program is executed by the processor, the method according to any one of claims 1 to 7 is implemented.