Web front-end big data performance management optimization method and system

Abstract

The invention provides a web front-end big data performance management optimization method and a web front-end big data performance management optimization system, which are applied to the field of computer systems based on a specific web calculation model. According to the system, a Vue2 framework optimization scheme is adopted, on one hand, through non-response type data binding, a Vue response type system is abandoned, interlayer data is manually synchronized through event monitoring, and performance loss caused by large-scale response type data is avoided; on the other hand, by setting virtual rolling optimization superior to that in the prior art, on-demand rendering of dynamic form items is achieved, and the number of nodes is reduced. And on the other hand, by reasonably setting big data processing memory management and utilizing static data binding and component lightweight design, memory occupation during rolling is reduced, and browser memory recovery efficiency is improved. Therefore, the system can solve the performance problem of a large dynamic form page based on inter-layer collaboration and multiple inventive concept collaboration superior to the prior art, the front-end big data informatization development efficiency is improved, and the code maintainability and reconfigurable capability are improved.

Description

Technical Field

[0001] This invention is applied in the field of computer systems based on a specific web computing model, and also involves information and digital data processing, belonging to the new generation of information technology, and particularly relates to a web front-end big data performance management and optimization method and system. Background Technology

[0002] In the development of web front-end applications, it is often necessary to consider the efficiency and robustness of processing large-scale data. When faced with processing needs involving large amounts of data, such as ultra-large forms and dynamic forms, how to perform efficient and accurate data interaction has become one of the urgent problems to be solved in web front-end development.

[0003] For web users and developers, current performance optimization solutions for rendering large amounts of data on web front-ends mainly include the following: First, virtual scrolling technology: The framework only retains the visible line and a small number of buffered nodes before and after it in memory. Using absolute positioning and dynamic offsets, it quickly reclaims elements leaving the viewport and fills in new data when scrolling occurs, thus compressing the linearly growing DOM size to a constant level. Second, batch rendering: Data is rendered asynchronously in batches. Batch rendering breaks the operation of building a macro DOM at once into time slices, gradually inserting nodes during the idle intervals of the message loop, thereby avoiding long tasks blocking interactive responses. Third, lazy loading and infinite scrolling: Data is loaded on demand. Fourth, server-side rendering (SSR) technology: Static HTML content is generated by the server, reducing the initial rendering burden on the browser client.

[0004] How to avoid the above-mentioned defects in existing technologies, and thus improve the efficiency of front-end big data information development, and enhance the maintainability and refactorability of code, has become another focus of web front-end development.

[0005] Based on this, this invention proposes a web front-end big data performance management optimization method and system, applied to the field of computer systems based on specific web computing models. The system employs a Vue2 framework optimization scheme. On one hand, it abandons the Vue reactive system by using non-responsive data binding and manually synchronizing data between layers through event listeners, avoiding performance degradation caused by large-scale reactive data. On the other hand, it optimizes virtual scrolling, superior to existing technologies, by combining list scrolling to achieve on-demand rendering of dynamic form items, reducing the number of nodes. Furthermore, it rationally configures front-end big data processing memory management, utilizing static data binding and lightweight component design to reduce memory usage during scrolling and improve browser memory reclamation efficiency. Thus, the web front-end big data performance management optimization system, based on inter-layer collaboration and the synergy of multiple inventive concepts superior to existing technologies, can solve the performance problems of large dynamic form pages, improve the efficiency of front-end big data information development, and enhance code maintainability and refactorability. Summary of the Invention

[0006] The present invention aims to provide a web front-end big data performance management and optimization system that is superior to existing technologies.

[0007] To achieve the above objectives, the technical solution of the present invention is as follows: A web front-end big data performance management and optimization system, applied to dynamically generating interactive forms, the system comprising: The first dynamically generated interactive form data regulation layer manages form data and CRUD logic, and encapsulates data operation methods. The first dynamically generated interactive form data regulation layer further includes: first information, used to store a first type of specific method, wherein the first type of specific method is associated with relevant methods that need to send requests to obtain data between and within layers; The second information, which is a function structure, is used to implement all of the following functions: obtaining dictionary options for conditions, creating promise objects, and caching error fallbacks; and the third information, which is used to control the flow of promise objects; Container implementation and reactive prohibition layer: Enable virtual scroll container, dynamically render form items, prohibit the use of Vue reactive data, and synchronize data by manually binding; Signaling processing and middleware layer: Handles business logic, interacts with the response prohibition layer through the publish-subscribe pattern and container, and calls the first dynamically generated interactive form data regulation layer interface to update data.

[0008] Ideally, the collaborative processing of front-end ultra-large dynamic forms and general dynamic forms differs from the existing layered model: on the one hand, it optimizes page performance by deautomating the collaborative execution of a large amount of dynamic form content through large-scale response; on the other hand, it optimizes virtual scrolling by coordinating the differentiated settings of the number of nodes.

[0009] Preferably, the container implementation and the response prohibition layer abandon the Vue reactive system, and manually synchronize the container implementation and the response prohibition layer with the first dynamically generated interactive form data regulation layer data through event listeners, so as to avoid the performance loss caused by large-scale reactive data.

[0010] Preferably, the container implementation and response prohibition layer further includes: By combining list-based scrolling, dynamic form items can be rendered on demand, reducing the number of DOM nodes.

[0011] Preferably, the first dynamically generated interactive form data regulation layer uses a set of data pool data acquisition methods to obtain the index of the index list.

[0012] Preferably, the web front-end big data performance management and optimization system also reduces memory usage during scrolling and improves browser memory reclamation efficiency based on static data binding and component lightweighting.

[0013] Preferably, the signaling processing and middleware layer configures a specific controller object to process singleton pattern data objects, while enabling index list refresh and setting dictionary processing modes.

[0014] Simultaneously, this invention also proposes a web front-end big data performance management and optimization method, applied to the web front-end big data performance management and optimization system described above. The method includes the following steps: Step 1: Use the first dynamically generated interactive form data regulation layer to manage form data and CRUD logic, and encapsulate data operation methods; Step 2: Use the first information in the first dynamically generated interactive form data regulation layer to store the first type of specific method. The first type of specific method is associated with the relevant methods that need to make requests to obtain data between and within layers. Step 3: Use the second information of the function structure in the first dynamically generated interactive form data regulation layer to implement all the following functions: obtain dictionary options for conditions, create promise objects, cache error fallback; and use the third information, which is used to control the flow of promise objects; Step 4: Use a container to implement and disable the responsive layer. Enable the virtual scroll container, dynamically render form items, disable Vue reactive data, and manually bind synchronized data. Step 5: Use signaling processing and middleware layer to process business logic, implement interaction with response prohibition layer through publish-subscribe pattern and container, and call the first dynamically generated interactive form data regulation layer interface to update data.

[0015] Meanwhile, the present invention also proposes a computer program product, which includes computer instructions that execute the web front-end big data performance management and optimization method described above when the processor runs.

[0016] Meanwhile, the present invention also proposes a computer-readable storage medium storing a processor-executable program, which, when executed by a processor, is used to perform the web front-end big data performance management optimization method described above.

[0017] This invention proposes a web front-end big data performance management optimization method and system, applied to the field of computer systems based on a specific web computing model. The system employs a Vue2 framework optimization scheme. On one hand, it abandons the Vue reactive system by using non-responsive data binding and manually synchronizing data between layers through event listeners, avoiding performance degradation caused by large-scale reactive data. On the other hand, it optimizes virtual scrolling, superior to existing technologies, by combining list scrolling to achieve on-demand rendering of dynamic form items, reducing the number of nodes. Furthermore, it rationally configures front-end big data processing memory management, utilizing static data binding and lightweight component design to reduce memory usage during scrolling and improve browser memory reclamation efficiency. Thus, the web front-end big data performance management optimization system, based on inter-layer collaboration and the synergy of multiple inventive concepts superior to existing technologies, can solve the performance problems of large dynamic form pages, improve the efficiency of front-end big data information development, and enhance code maintainability and refactorability. Attached Figure Description

[0018] Figure 1 This is a basic example diagram of the web front-end big data performance management and optimization system shown in this invention; Figure 2 This is another basic example diagram of the first dynamically generated interactive form data regulation layer in the web front-end big data performance management and optimization system shown in this invention; Figure 3 This is an example diagram of a container implementation and response prohibition layer in the web front-end big data performance management and optimization system claimed in this invention; Figure 4 This is one of the signaling processing and middleware layer embodiments in the web front-end big data performance management and optimization system claimed in this invention; Figure 5 This is one of the specific embodiments of the web front-end big data performance management and optimization method process that is claimed in this invention. Detailed Implementation

[0019] The following describes in detail several embodiments and beneficial effects of the web front-end big data performance management and optimization system and method claimed in this invention, in order to facilitate a more detailed examination and breakdown of this invention.

[0020] To better understand the technical solution of the present invention, the embodiments of the present invention will be described in detail below with reference to the accompanying drawings.

[0021] It should be understood that the described embodiments are merely some, not all, of the embodiments of the present invention. All other embodiments obtained by those skilled in the art based on the embodiments of the present invention without inventive effort are within the scope of protection of the present invention.

[0022] The terminology used in the embodiments of this invention is for the purpose of describing particular embodiments only and is not intended to limit the invention. The singular forms “a,” “the,” and “the” as used in the embodiments of this invention and the appended claims are also intended to include the plural forms unless the context clearly indicates otherwise.

[0023] It should be understood that the term "and / or" used in this article is merely a description of the relationship between related objects, indicating that three relationships can exist. For example, A and / or B can represent: A existing alone, A and B existing simultaneously, and B existing alone. Additionally, the character " / " in this article generally indicates that the preceding and following related objects have an "or" relationship.

[0024] It should be understood that although the terms "first," "second," etc., may be used to describe the methods and corresponding apparatus in the embodiments of the present invention, these keywords should not be limited to these terms. These terms are only used to distinguish the keywords from each other. For example, without departing from the scope of the embodiments of the present invention, the first dynamically generated interactive form data regulation layer, the first information, etc., may also be referred to as the second dynamically generated interactive form data regulation layer, the second information, etc., and conversely, the second dynamically generated interactive form data regulation layer, the second information, etc., may also be referred to as the first dynamically generated interactive form data regulation layer, the first information.

[0025] Depending on the context, the word "if" as used herein can be interpreted as "when," "when," "in response to determination," or "in response to detection." Similarly, depending on the context, the phrases "if determination" or "if detection (of the stated condition or event)" can be interpreted as "when determination" or "in response to determination," "when detection (of the stated condition or event)," or "in response to detection (of the stated condition or event)."

[0026] As per the instruction manual Figure 1- Appendix Figure 5 The diagram illustrates the interconnection relationships and corresponding methods among the modules of the web front-end big data performance management and optimization system claimed in this invention. As a preferred embodiment that can be superimposed, each main node can preferably interconnect with other main nodes for data and instruction transmission. Of course, as another preferred embodiment that can be superimposed, some nodes may not have interconnection with some other nodes, or may be allowed to disable or enable interconnection with other nodes.

[0027] Instruction manual attached Figure 1 This document presents the overall architecture diagram of the web front-end big data performance management and optimization system claimed in this invention. (See attached specification.) Figure 1 As shown: The system is used to dynamically generate interactive forms, including: The first dynamically generated interactive form data regulation layer manages form data and CRUD logic, and encapsulates data operation methods. Instruction manual attached Figure 2 This document presents the overall architecture diagram of the web front-end big data performance management and optimization system claimed in this invention. (See attached specification.) Figure 2 As shown, the first dynamically generated interactive form data regulation layer further includes: first information, used to store a first type of specific method, which is associated with relevant methods that need to send requests to obtain data between and within layers; second information, which is a function structure used to implement all of the following functions: obtaining dictionary options for conditions, creating promise objects, and caching error fallback; and third information, which is used to control the flow of promise objects; Container implementation and reactive prohibition layer: Enable virtual scroll container, dynamically render form items, prohibit the use of Vue reactive data, and synchronize data by manually binding; Signaling processing and middleware layer: Handles business logic, interacts with the response prohibition layer through the publish-subscribe pattern and container, and calls the first dynamically generated interactive form data regulation layer interface to update data.

[0028] As a preferred, stackable implementation, the collaborative processing of large dynamic forms and general dynamic forms on the front end differs from the existing layered model: on the one hand, it optimizes page performance by deautomating the collaborative execution of a large amount of dynamic form content through large-scale response; on the other hand, it achieves virtual scrolling optimization through differentiated settings of the number of nodes.

[0029] Instruction manual attached Figure 3 This illustration shows the container implementation and response prohibition layer of the web front-end big data performance management and optimization system claimed in this invention. (See attached specification.) Figure 3As shown, as another preferred embodiment that can be stacked, the container implementation and the response prohibition layer abandon the Vue reactive system. Instead, the container implementation and the response prohibition layer are manually synchronized with the first dynamically generated interactive form data regulation layer through event listeners, thus avoiding performance loss caused by large-scale reactive data.

[0030] As another preferred embodiment that can be overlaid, the container implementation and response prohibition layer further includes: By combining list-based scrolling, dynamic form items can be rendered on demand, reducing the number of DOM nodes.

[0031] As another preferred embodiment that can be overlaid, the first dynamically generated interactive form data regulation layer uses a set of data pool data acquisition methods to obtain the index of the index list.

[0032] As another preferred embodiment that can be superimposed, the web front-end big data performance management and optimization system also reduces memory usage during scrolling and improves browser memory reclamation efficiency based on static data binding and component lightweighting.

[0033] Instruction manual attached Figure 4 This illustration shows the signaling processing and middleware layer of the web front-end big data performance management and optimization system claimed in this invention. (See attached specification.) Figure 4 As shown, as another preferred embodiment that can be overlaid, the signaling processing and middleware layer sets a specific controller object to process singleton pattern data objects, while enabling index list refresh and setting dictionary processing modes.

[0034] In particular, to further distinguish it from the prior art, as another preferred embodiment that can be superimposed: The first dynamically generated interactive form data regulation layer also has a special initialization process: including obtaining model data and index list data from a specific model interface, as well as obtaining and confirming the list index; The first dynamically generated interactive form data regulation layer also restricts the data pool mapping relationship in the singleton pattern, for example, to a many-to-one data mapping relationship, and configures the data method set filtering mechanism corresponding to the data pool. For example, as another preferred embodiment that can be overlaid, a specific JSON is stored in a specific corresponding data pool.

[0035] The first dynamically generated interactive form data regulation layer also defines the prerequisites for caching promise objects and when the data cache is fed back as a promise object.

[0036] As another preferred embodiment that can be overlaid: the signaling processing and middleware layer also performs the work of updating the index list, and modifies the associated statistical indexes based on the update of the index list.

[0037] As another preferred embodiment that can be overlaid: the container implementation and response prohibition layer also set specific control refresh strategies, for example, adopting a seamless refresh and secondary focus mode for specific controls, displaying the illusion of continuous input in the presentation layer to smooth the user experience.

[0038] Simultaneously, this invention also proposes a web front-end big data performance management and optimization method, applied to the web front-end big data performance management and optimization system described above. (See attached specification.) Figure 5 This paper illustrates one specific embodiment of the web front-end big data performance management optimization method claimed in this invention. The method includes the following steps: Step S102: Use the first dynamically generated interactive form data regulation layer to manage form data and CRUD logic, and encapsulate data operation methods; Step S104: Use the first information in the first dynamically generated interactive form data regulation layer to store the first type of specific method, the first type of specific method is associated with the relevant methods that need to make requests to obtain data between and within layers; Step S106: Use the second information of the function structure in the first dynamically generated interactive form data regulation layer to implement all the following functions: obtain dictionary options of conditions, create promise objects, cache error fallback; and use the third information, which is used to control the flow of promise objects; Step S108: Use a container to implement and disable the responsive layer to enable the virtual scroll container, dynamically render form items, disable the use of Vue reactive data, and manually bind synchronized data; Step S110: Use signaling processing and middleware layer to process business logic, implement interaction with response prohibition layer through publish-subscribe pattern and container, and call the first dynamically generated interactive form data regulation layer interface to update data.

[0039] Simultaneously, this invention also proposes a computer program product comprising computer instructions that, when executed by a processor, perform the web front-end big data performance management optimization method described above. This invention further proposes a computer-readable storage medium storing a processor-executable program that, when executed by a processor, performs the web front-end big data performance management optimization method described above.

[0040] This invention proposes a web front-end big data performance management optimization method and system, applied to the field of computer systems based on a specific web computing model. The system employs a Vue2 framework optimization scheme. On one hand, it abandons the Vue reactive system by using non-responsive data binding and manually synchronizing data between layers through event listeners, avoiding performance degradation caused by large-scale reactive data. On the other hand, it optimizes virtual scrolling, superior to existing technologies, by combining list scrolling to achieve on-demand rendering of dynamic form items, reducing the number of nodes. Furthermore, it rationally configures front-end big data processing memory management, utilizing static data binding and lightweight component design to reduce memory usage during scrolling and improve browser memory reclamation efficiency. Thus, the web front-end big data performance management optimization system, based on inter-layer collaboration and the synergy of multiple inventive concepts superior to existing technologies, can solve the performance problems of large dynamic form pages, improve the efficiency of front-end big data information development, and enhance code maintainability and refactorability.

[0041] In all the above embodiments, in order to achieve certain special data transmission and read / write function requirements, the above methods and corresponding devices can be expanded by adding devices, modules, components, hardware, pin connections or memory, processor differences during operation.

[0042] Those skilled in the art will clearly understand that, for the sake of convenience and brevity, the specific working processes of the methods, devices, and units described above can be referred to the corresponding processes in the foregoing method embodiments, and will not be repeated here.

[0043] In the embodiments provided by this invention, it should be understood that the disclosed systems, apparatuses, and methods can be implemented in other ways. For example, the apparatus embodiments described above are merely illustrative; for instance, the division of method steps is only a logical or functional division, and in actual implementation, there may be other division methods. For example, multiple units or components may be combined or integrated into another system, or some features may be ignored or not executed. Furthermore, the couplings or direct couplings or communication connections shown or discussed may be indirect couplings or communication connections through some interfaces, apparatuses, or units, and may be electrical, mechanical, or other forms.

[0044] The units described as steps in the method and separate components of the apparatus may or may not be logically or physically separate, and may not be physical units. That is, they may be located in one place or distributed across multiple network units. Some or all of the units can be selected to achieve the purpose of this embodiment according to actual needs.

[0045] Furthermore, the method steps and their implementations, as well as the functional units, in the various embodiments of the present invention can be integrated into one processing unit, or each unit can exist physically separately, or two or more units can be integrated into one unit. The integrated unit described above can be implemented in hardware or in the form of hardware plus software functional units.

[0046] The above-described methods and apparatus can be implemented as integrated units in the form of software functional units, which can be stored in a computer-readable storage medium. These software functional units, stored in a storage medium, include several instructions to cause a computer device (which may be a personal computer, server, or network device, etc.) or processor to execute some steps of the methods described in the various embodiments of the present invention. The aforementioned storage medium includes various media capable of storing program code, such as USB flash drives, portable hard drives, read-only memory (ROM), random access memory (RAM), NVRAM, magnetic disks, or optical disks.

[0047] The above description is only a preferred embodiment of the present invention and is not intended to limit the present invention. Any modifications, equivalent substitutions, improvements, etc., made within the spirit and principles of the present invention should be included within the scope of protection of the present invention.

[0048] It should be noted that the above embodiments are only used to more clearly explain and illustrate the technical solutions of the present invention, and are not intended to limit them. Although the present invention has been described in detail with reference to the foregoing embodiments, those skilled in the art should understand that modifications can still be made to the technical solutions described in the foregoing embodiments, or equivalent substitutions can be made to some of the technical features. These modifications or substitutions do not cause the essence of the corresponding technical solutions to deviate from the spirit and scope of the technical solutions of the embodiments of the present invention.

Claims

1. A web front-end big data performance management and optimization system, applied to dynamically generating interactive forms, the system comprising: The first dynamically generated interactive form data regulation layer manages form data and CRUD logic, and encapsulates data operation methods. The first dynamically generated interactive form data regulation layer further includes: first information, used to store a first type of specific method, wherein the first type of specific method is associated with relevant methods that need to send requests to obtain data between and within layers; The second information, which is a function structure, is used to implement all of the following functions: obtaining dictionary options for conditions, creating promise objects, and caching error fallbacks; and the third information, which is used to control the flow of promise objects; Container implementation and reactive prohibition layer: Enable virtual scroll container, dynamically render form items, prohibit the use of Vue reactive data, and synchronize data by manually binding; Signaling processing and middleware layer: Handles business logic, interacts with the response prohibition layer through the publish-subscribe pattern and container, and calls the first dynamically generated interactive form data regulation layer interface to update data.

2. The web front-end big data performance management and optimization system as described in claim 1, wherein: The collaborative processing of large dynamic forms and regular dynamic forms on the front end differs from the existing layered model: on the one hand, it optimizes page performance by deautomating the collaborative execution of a large amount of dynamic form content through large-scale response; on the other hand, it optimizes virtual scrolling by coordinating the different settings of the number of nodes.

3. The web front-end big data performance management and optimization system as described in claim 2, wherein: The container implementation and response prohibition layer abandon the Vue reactive system. Instead, the container implementation and response prohibition layer are manually synchronized with the first dynamically generated interactive form data regulation layer through event listeners, thus avoiding performance loss caused by large-scale reactive data.

4. The web front-end big data performance management and optimization system as described in claim 3, wherein: The container implementation and response prohibition layer also includes: By combining list-based scrolling, dynamic form items can be rendered on demand, reducing the number of DOM nodes.

5. The web front-end big data performance management and optimization system as described in claim 4, characterized in that: The first dynamically generated interactive form data regulation layer uses a set of data pool data acquisition methods to obtain the index of the index list.

6. The web front-end big data performance management and optimization system as described in claim 4, wherein, The web front-end big data performance management and optimization system also reduces memory usage during scrolling and improves browser memory reclamation efficiency based on static data binding and component lightweighting.

7. The web front-end big data performance management and optimization system as described in claim 5, wherein, The signaling processing and middleware layer configures a specific controller object to handle singleton data objects, while enabling index list refresh and setting dictionary processing modes.

8. A web front-end big data performance management and optimization method, applied to the web front-end big data performance management and optimization system as described in any one of claims 1-7, the method comprising the following steps: Step 1: Use the first dynamically generated interactive form data regulation layer to manage form data and CRUD logic, and encapsulate data operation methods; Step 2: Use the first information in the first dynamically generated interactive form data regulation layer to store the first type of specific method. The first type of specific method is associated with the relevant methods that need to make requests to obtain data between and within layers. Step 3: Use the second information of the function structure in the first dynamically generated interactive form data regulation layer to implement all the following functions: obtain dictionary options for conditions, create promise objects, cache error fallback; and use the third information, which is used to control the flow of promise objects; Step 4: Use a container to implement and disable the responsive layer. Enable the virtual scroll container, dynamically render form items, disable Vue reactive data, and manually bind synchronized data. Step 5: Use signaling processing and middleware layer to process business logic, implement interaction with response prohibition layer through publish-subscribe pattern and container, and call the first dynamically generated interactive form data regulation layer interface to update data.

9. A computer program product comprising computer instructions that, when executed by a processor, perform the web front-end big data performance management optimization method as described in claim 8.

10. A computer-readable storage medium storing a processor-executable program, characterized in that, The processor-executable program, when executed by the processor, is used to perform the web front-end big data performance management optimization method as described in claim 8.

Images