WEB front-end configuration picture performance optimization method, electronic equipment and storage medium

Abstract

The invention provides a WEB front-end configuration picture performance optimization method, electronic equipment and a storage medium, and belongs to the technical field of configuration picture operation and display.The method comprises the steps that variables bound to all controls of a WEB front-end configuration picture are obtained from a variable database based on picture service; the configuration picture comprises a plurality of controls, and each control is bound with at least one variable; when the configuration picture is operated based on the picture service, each control of the configuration picture is rendered, variable data is subscribed and pushed based on the data distribution intermediate service and the WEB server communication library, and the variable data is stored in the front-end data pool; the variable data is a variable bound to each control; and obtaining corresponding variable data in the front-end data pool based on the rendered controls, and loading and displaying the obtained variable data. According to the scheme, the WEB front-end data loading time can be shortened.

Description

Technical Field

[0001] The present application relates to the technical field of configuration screen operation and display, and specifically to a WEB front-end configuration screen performance optimization method, electronic device and storage medium. Background Art

[0002] For a long time, the operation and display of the configuration screen has been one of the most important functions of the intelligent integrated control platform. Both operators and managers need to monitor the plant by viewing the running configuration screen. In actual engineering projects, engineers usually configure a large number of controls and graphics in the control screen. At the same time, these controls will be bound to many measurement points, variables, etc., to more accurately display the relevant status of the controls through data.

[0003] However, when running this type of configuration screen, the process of loading data on the WEB (World Wide Web) front end will take a lot of time and consume a lot of front-end resources. Therefore, how to reduce the time of loading data on the WEB front end has become a problem to be solved. Summary of the invention

[0004] The purpose of this application is to provide a method for optimizing the performance of a WEB front-end configuration screen, an electronic device and a storage medium, which can solve the problem in the prior art that processes such as WEB front-end data loading will take a lot of time.

[0005] In a first aspect, an embodiment of the present application provides a method for optimizing the performance of a WEB front-end configuration screen, the method comprising: Based on the screen service, the variables bound to each control of the WEB front-end configuration screen are obtained in the variable database; the configuration screen contains multiple controls, and each control is bound to at least one variable; When the configuration screen is run based on the screen service, each control of the configuration screen is rendered, and at the same time, variable data is subscribed and pushed based on the data distribution intermediate service and the WEB server communication library, and the variable data is stored in the front-end data pool; the variable data is the variable bound to each control; Based on the rendered controls, the corresponding variable data is obtained from the front-end data pool, and the obtained variable data is loaded and displayed.

[0006] In a possible implementation of the first aspect, subscribing to and pushing variable data based on a data distribution intermediate service and a WEB server communication library, and storing the variable data in a front-end data pool includes: Based on the data distribution intermediate service, a variable subscription message is sent to the WEB server communication library; based on the WEB server communication library, variable data is pushed to the front-end data pool according to the variable subscription message.

[0007] In a possible implementation of the first aspect, before obtaining the variables bound to each control of the WEB front-end configuration screen in the variable database based on the screen service, the method further includes: Based on the screen configuration tool, multiple controls and graphics are configured to obtain a configuration screen, which is then saved and / or previewed; based on the screen service, variables bound to each control of the configuration screen are collected, and the collected variables are stored in a variable database.

[0008] In a possible implementation of the first aspect, there are multiple configuration screens; the method includes: Based on the screen service, the variables bound to each control of each configuration screen are obtained in the variable database; when each configuration screen is run based on the screen service, each control of each configuration screen is rendered, and at the same time, the corresponding variable data is subscribed and pushed based on the data distribution intermediate service and the WEB server communication library, and the variable data is stored in the front-end data pool; the variable data is the variable bound to each control of each configuration screen; based on each control that has been rendered on each configuration screen, the corresponding variable data is obtained in the front-end data pool, and the obtained variable data is loaded and displayed.

[0009] In a possible implementation of the first aspect, the method includes: The first configuration screen is run based on the screen service, and the preloading function is executed at the same time to preload the second configuration screen; the second configuration screen is in a preloading state; when jumping to the second configuration screen in the preloading state, the second configuration screen is displayed.

[0010] In a possible implementation of the first aspect, there are multiple preloading screens in a preloading state; and the method includes: Based on the screen service, configure the preloading function in the current screen; run the current screen, generate the DOM structure of each preloading screen based on the preloading function, and obtain the static resources of each preloading screen; preload each preloading screen according to the DOM structure and static resources of each preloading screen; when running the current screen, the obtained screen list includes the current configuration screen and each preloading screen; Configure the preloading mark of each preloading screen to true, configure the preloading mark of the current configuration screen to false, and configure the CSS style of the DOM structure of each preloading screen to be hidden; when running each preloading screen, adjust the CSS style of each preloading screen to display to display each preloading screen.

[0011] In a possible implementation manner of the first aspect, the method further includes: When the number of preloading screens exceeds the maximum preloading number, the first preloading screen is removed.

[0012] In a possible implementation manner of the first aspect, the method further includes: When running a screen with a preloading event, the DOM structure and static resources of each preloading screen are stored; the screen with the preloading event is the current screen; when switching to each preloading screen at any time, each preloading screen is rendered based on the corresponding DOM structure and static resources.

[0013] In a second aspect, an embodiment of the present application provides a device for optimizing performance of a WEB front-end configuration screen, the device comprising: The acquisition unit is used to acquire the variables bound to each control of the WEB front-end configuration screen in the variable database based on the screen service; the configuration screen contains multiple controls, and each control is bound to at least one variable; The processing unit is used to render each control of the configuration screen when the configuration screen is run based on the screen service, and to subscribe to and push variable data based on the data distribution intermediate service and the WEB server communication library, and store the variable data in the front-end data pool; the variable data is the variable bound to each control; The display unit is used to obtain corresponding variable data in the front-end data pool based on each rendered control, and load and display the obtained variable data.

[0014] In a third aspect, an embodiment of the present application provides an electronic device, comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein when the processor executes the computer program, any one of the WEB front-end configuration screen performance optimization methods described in the first aspect is implemented.

[0015] In a fourth aspect, an embodiment of the present application provides a computer-readable storage medium, which stores a computer program. When the computer program is executed by a processor, the method for optimizing the performance of the WEB front-end configuration screen in the first aspect is implemented.

[0016] In a fifth aspect, an embodiment of the present application provides a computer program product. When the computer program product is run on an electronic device, the electronic device executes any one of the WEB front-end configuration screen performance optimization methods in the first aspect.

[0017] The present application scheme first obtains the variables bound to each control of the WEB front-end configuration screen, and then renders each control when running the configuration screen. At the same time, it subscribes to and pushes variable data based on the data distribution intermediate service and the WEB server communication library, and stores the variable data in the front-end data pool. Finally, it obtains the corresponding variable data in the front-end data pool and loads and displays it.

[0018] The present application solution performs data subscription and push while the screen is being rendered. There is no need to wait for the data to be pushed to the front end before visual display after the screen rendering is completed. This can reduce the time for loading data on the WEB front end, reduce the consumption of front-end resources, optimize the data loading performance of the WEB front-end configuration screen, and has strong ease of use and practicality.

[0019] Other features and advantages of the present application will be described in detail in the subsequent detailed description. BRIEF DESCRIPTION OF THE DRAWINGS

[0020] In order to more clearly illustrate the technical solutions in the embodiments of the present application, the drawings required for use in the embodiments or the description of the prior art will be briefly introduced below. Obviously, the drawings described below are only some embodiments of the present application. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying creative labor.

[0021] Figure 1 It is a schematic diagram of the steps of the WEB front-end configuration screen performance optimization method provided in an embodiment of the present application; Figure 2 It is a flow chart of collecting variables provided in an embodiment of the present application; Figure 3 It is a schematic diagram of the front-end data loading process in the prior art provided by the embodiment of the present application; Figure 4 It is a schematic diagram of the front-end data loading process of the present application scheme provided by the embodiment of the present application; Figure 5 is a schematic diagram of a process for displaying a preload screen provided in an embodiment of the present application; Figure 6 It is a structural schematic diagram of a WEB front-end configuration screen performance optimization device provided in an embodiment of the present application; Figure 7 It is a schematic diagram of the structure of an electronic device provided in an embodiment of the present application. DETAILED DESCRIPTION

[0022] In the following description, specific details such as specific system structures, technologies, etc. are provided for the purpose of illustration rather than limitation, so as to provide a thorough understanding of the embodiments of the present application. However, it should be clear to those skilled in the art that the present application may also be implemented in other embodiments without these specific details. In other cases, detailed descriptions of well-known systems, devices, circuits, and methods are omitted to prevent unnecessary details from obstructing the description of the present application.

[0023] It should be understood that when used in this specification and the appended claims, the term "comprising" indicates the presence of described features, integers, steps, operations, elements and / or photovoltaic components, but does not exclude the presence or addition of one or more other features, integers, steps, operations, elements, photovoltaic components and / or combinations thereof.

[0024] It should also be understood that the terms used in this application specification are only for the purpose of describing specific embodiments and are not intended to limit the application. As used in this application specification and the appended claims, unless the context clearly indicates otherwise, the singular forms "a", "an" and "the" are intended to include plural forms.

[0025] It should be further understood that the term “and / or” used in the specification and appended claims refers to any combination and all possible combinations of one or more of the associated listed items, and includes these combinations.

[0026] As used in this specification and the appended claims, the term "if" may be interpreted as "when" or "upon" or "in response to determining" or "in response to detecting," depending on the context. Similarly, the phrases "if it is determined" or "if [described condition or event] is detected" may be interpreted as meaning "upon determination" or "in response to determining" or "upon detection of [described condition or event]" or "in response to detecting [described condition or event]," depending on the context.

[0027] In addition, in the description of the present application, the terms "first", "second", "third", etc. are only used to distinguish the description and cannot be understood as indicating or implying relative importance.

[0028] References to "one embodiment" or "some embodiments" etc. described in the specification of this application mean that one or more embodiments of the present application include specific features, structures or characteristics described in conjunction with the embodiment. Therefore, the statements "in one embodiment", "in some embodiments", "in some other embodiments", "in some other embodiments", etc. that appear in different places in this specification do not necessarily refer to the same embodiment, but mean "one or more but not all embodiments", unless otherwise specifically emphasized in other ways. The terms "including", "comprising", "having" and their variations all mean "including but not limited to", unless otherwise specifically emphasized in other ways.

[0029] For a long time, the operation and display of configuration screens has been one of the most important functions of the intelligent integrated management and control platform. Both operators and managers need to monitor the plant by viewing the running configuration screens, and use this to analyze various transients, data and accidents in the plant. This is also a key link in the main path of plant construction.

[0030] In actual engineering projects, engineers usually configure a large number of controls, graphics elements, etc. in the control screen. At the same time, these controls will be bound to many measurement points, variables, etc., to more accurately display the relevant status of the controls through data.

[0031] However, when running this type of configuration screen, the process of loading data on the WEB front end will take a lot of time and consume a lot of front-end resources. This situation will also have a certain degree of impact on the timely viewing, understanding and mastering of various visual monitoring information of the plant by operators or managers. Therefore, how to reduce the time of loading data on the WEB front end has become a problem to be solved.

[0032] In response to the above-mentioned defects, an embodiment of the present application provides a performance optimization of a WEB front-end configuration screen. First, the variables bound to each control of the WEB front-end configuration screen are obtained, and then each control is rendered when the configuration screen is running. At the same time, variable data is subscribed and pushed based on the data distribution intermediate service and the WEB server communication library, and the variable data is stored in the front-end data pool. Finally, the corresponding variable data is obtained in the front-end data pool, and loaded and displayed.

[0033] The present application solution performs data subscription and push while the screen is being rendered. There is no need to wait for the data to be pushed to the front end before visual display after the screen rendering is completed. This can reduce the time for WEB front-end data loading, reduce the consumption of front-end resources, and optimize the data loading performance of the WEB front-end configuration screen, so that operating operators or managers can timely view, understand and master various visual monitoring information of the plant station, and has strong ease of use and practicality.

[0034] The specific process implemented by this application is introduced below through specific embodiments.

[0035] See also Figure 1 , Figure 1 Schematic diagram of the steps of the WEB front-end configuration screen performance optimization method provided by the embodiment of the present application. Figure 1 As shown, the method may include the following steps: S101, based on the screen service, obtaining the variables bound to each control of the WEB front-end configuration screen in the variable database; the configuration screen contains multiple controls, and each control is bound to at least one variable.

[0036] In some embodiments, a configuration screen may contain tens of thousands of controls, graphics elements, etc., and each control may be bound to a variable according to different configuration requirements, and there is no limit on the number of variables.

[0037] According to an implementation of the present application, before obtaining the variables bound to each control of the WEB front-end configuration screen in the variable database based on the screen service, the method may further include the following steps: Based on the screen configuration tool, multiple controls and graphics are configured to obtain a configuration screen, and the configuration screen is saved and / or previewed. Based on the screen service, the variables bound to each control of the configuration screen are collected, and the collected variables are stored in the variable database.

[0038] Among them, the screen configuration tool is a tool for configuring the screen, and the screen can be configured in advance.

[0039] It should be noted that for the monitoring screen of the station, it is necessary to obtain the monitored visual information in real time. This embodiment can collect variables in advance, reducing the time for repeatedly collecting variables each time the screen is opened.

[0040] See also Figure 2 , Figure 2 is a flow chart of collecting variables provided in the embodiment of the present application. Figure 2 As shown, the process of collecting variables is as follows: When the screen configuration is completed, click Save or Preview the screen. At this time, the variables bound to the screen are collected through the screen service, and the screen ID (Identity document) and variable information are stored in the variable database.

[0041] S102, when the configuration screen is run based on the screen service, each control of the configuration screen is rendered, and at the same time, variable data is subscribed and pushed based on the data distribution intermediate service and the WEB server communication library, and the variable data is stored in the front-end data pool; the variable data is the variable bound to each control.

[0042] In some embodiments, the screen rendering is to render the controls in the configuration screen. The WEB server communication library is SignalR, which is a real-time WEB server communication library that allows WEB applications to broadcast data to multiple users or subscribers instantly.

[0043] It should be noted that in order to reduce the time of loading data on the WEB front-end, there is no need to wait for the data to be pushed to the front-end before it can be displayed after the screen rendering is completed. When the configuration screen is running, the screen rendering and data subscription push are carried out simultaneously, and the pushed data is temporarily stored in the front-end data pool.

[0044] According to an implementation of the present application, based on the data distribution intermediate service and the WEB server communication library, subscribing to push variable data and storing the variable data in the front-end data pool may include the following steps: Based on the data distribution intermediate service, send variable subscription messages to the WEB server communication library. Based on the WEB server communication library, push variable data to the front-end data pool according to the variable subscription message.

[0045] S103, acquiring corresponding variable data in the front-end data pool based on each rendered control, and loading and displaying the acquired variable data.

[0046] This embodiment improves the time of data collection, subscription, and push, reduces unnecessary data collection processes, and stores the collected variables. The data subscription and push processes are immediately started when the screen is running, and the variable data is temporarily stored in the front-end data pool, so that the corresponding controls and the like can use the corresponding variable data in the future.

[0047] See also Figure 3 , Figure 3 Schematic diagram of the front-end data loading process in the prior art provided by the embodiment of the present application. Figure 3 As shown, whether one or more pictures are opened, when the pictures are running, the front-end data loading process in the prior art is as follows: Each time a screen is opened, the configured controls are first rendered, and then all the variables bound to the controls are collected through the screen service. After the variables are collected, the variables are filtered through a series of logics, and then a message subscribing to the variables is sent to the data distribution intermediate service. The subscription message is then sent to SignalR through the service, and SignalR pushes the subscribed variable data to the screen, and finally the control uses the bound variable data for display.

[0048] See also Figure 4 , Figure 4 It is a schematic diagram of the front-end data loading process of the present application scheme provided in an embodiment of the present application.

[0049] When there are many controls and graphics elements configured in the screen, and many bound variables, the display speed will be slow when the screen is running. Therefore, optimization is performed based on the original front-end data loading solution.

[0050] like Figure 4As shown, the front-end data loading process of the present application solution is as follows: when the configuration is completed, click Save or Preview the screen. At this time, the variables bound to the screen are collected through the screen service, and the screen ID and variables and other information are stored in the variable database. When the configuration screen is running, the variables bound to the screen have been collected, and a message to subscribe to the variables is sent directly to the data distribution intermediate service, and then the subscription message is sent to SignalR through the service. SignalR pushes the subscribed variable data to the screen and temporarily stores the variable data in the front-end data pool.

[0051] At the same time, when the configuration screen is running, the controls and other components also start to render. After the rendering is completed, the controls and other components directly obtain the required variable data from the front-end data pool. When the configuration screen is closed, the variables temporarily stored in the front-end data pool are also destroyed at the same time.

[0052] This embodiment saves the time of collecting variables each time the running screen is opened, and also saves the time of collecting data, subscribing data, and pushing data each time the screen is opened, waiting for the control to be rendered. While the control is rendering, data subscription and data push will be carried out at the same time, and data can be directly obtained from the data pool when rendering is completed, which greatly improves the efficiency of front-end data loading.

[0053] According to an implementation of the present application, there are multiple configuration screens, and the method may include the following steps: Based on the screen service, the variables bound to each control of each configuration screen are obtained in the variable database. When running each configuration screen based on the screen service, each control of each configuration screen is rendered, and the corresponding variable data is subscribed and pushed based on the data distribution intermediate service and the WEB server communication library, and the variable data is stored in the front-end data pool.

[0054] The variable data is the variable bound to each control in each configuration screen.

[0055] Based on the rendering of each control on each configuration screen, the corresponding variable data is obtained in the front-end data pool, and the obtained variable data is loaded and displayed.

[0056] It should be noted that the specific implementation principle of this embodiment is substantially the same as the data loading and display principle corresponding to a configuration screen in the above embodiment, and will not be repeated here.

[0057] In the prior art, when running a configuration screen, the screen rendering process will take a lot of time and consume a lot of front-end resources. Therefore, how to reduce the screen rendering time becomes a problem to be solved.

[0058] According to one embodiment of the present application, the method may include the following steps: The first configuration screen is run based on the screen service, and a preload function is executed at the same time to preload the second configuration screen; the second configuration screen is in a preload state. When jumping to the second configuration screen in the preload state, the second configuration screen is displayed.

[0059] In one embodiment, assuming that there are two configuration screens, while the first configuration screen is running, the second configuration screen is preloaded by executing the preload function. When the second configuration screen is running, the second configuration screen is directly displayed without waiting for the first configuration screen to finish running before loading and displaying. Therefore, the display speed of the configuration screen is greatly improved, and the screen rendering speed is also improved, and the screen rendering performance is optimized.

[0060] For example, when screen A is opened, the preload function is executed to preload screen B. At this time, screen B will not be opened, but only in the preload state. When you need to jump to screen B, the preload function will greatly increase the display speed of screen B. The preload script function is designed as follows: The parameter list is: screen name string type, required; screen parameter any type, can be empty; variable directory replacement any type, can be empty; maximum preload number of the same screen, when the maximum number is exceeded, the earliest preloaded screen will be removed, the default is 1, can be empty; function return value void (empty), can be empty.

[0061] An example of a preload script function is as follows: / / Preload the screen at runtime preload("mimic1"); / / Preload the screen and pass parameters at runtime preload("mimic11", { title: 'test', n1: "@XR.Number0", n2: '@XR.Number1', n3: '@XR.Number2', }); / / Preload the screen and replace the variable directory at runtime preload("mimic1", null, { targetPath: "mimic1.A1.A1-1", replacePath: "mimic1.B2.B2-2" }); / / Maximum number of preloaded images preload("mimic1", null,null,2).

[0062] According to an embodiment of the present application, there are multiple preloading screens in the preloading state, and the method may include the following steps: Configure the preloading function in the current screen based on the screen service. Run the current screen, and generate the DOM (Document Object Model, which is the programming interface of HTML and XML documents) structure of each preloading screen based on the preloading function, and obtain the static resources of each preloading screen. Preload each preloading screen according to the DOM structure and static resources of each preloading screen.

[0063] When the current screen is running, a screen list can be obtained, which includes the current configuration screen and various preloaded screens.

[0064] The preload flag of each preload screen is configured to be true, the preload flag of the current configuration screen is configured to be false, and the CSS (Cascading Style Sheets, a computer language used to add styles to structured documents) style of the DOM structure of each preload screen is configured to be hidden. When running each preload screen, the CSS style of each preload screen is adjusted to be displayed to display each preload screen.

[0065] In some embodiments, in the initialization script event of any screen, a preload screen is configured through the preload function. When running this screen with the preload event, a list of screens can be obtained first, and the screen list includes the current screen and the screen after executing the preload script.

[0066] For example, the current screen is A, and a preload script is configured in screen A to preload screens B and C. After running screen A, the screen list will contain screens A, B, and C. The preload flags of screens B and C are configured to true, indicating that screens B and C are preloaded screens; the preload flag of running screen A is configured to false (default is false), indicating that screen A is not a preloaded screen.

[0067] At this time, screen A is loaded normally, and the preloaded screens B and C will generate the DOM structure of screens B and C in advance when screen A is opened, and request the static resources required for preloading screens B and C in advance. Since the preload mark of screens B and C is true, the CSS style of the DOM tree (DOM structure) of screens B and C will be set to not display, so screens B and C will not be displayed. When you need to open screen B or C, you only need to adjust the CSS style of screen B or C to display, so the speed of demonstrating screens B and C is greatly improved.

[0068] The number of preloaded screens has an upper limit. According to an embodiment of the present application, the method may further include the following steps: when the number of preloaded screens exceeds the maximum preloaded number, the first preloaded screen is removed to reduce the number of preloaded screens, and another screen may be preloaded. If multiple screens need to be preloaded, the preloaded screens that are ranked first may be deleted in chronological order.

[0069] According to one embodiment of the present application, the method may further include the following steps: When running a screen with a preload event, the DOM structure and static resources of each preload screen are stored; the screen with the preload event is the current screen. When switching to each preload screen at any time, each preload screen is rendered based on the corresponding DOM structure and static resources.

[0070] In some embodiments, once the screen with the preload event has been run, the preloaded screen DOM structure will always exist. When the screen is switched to and run at any time, the screen rendering will also be very fast.

[0071] In the embodiment of the present application, the screen rendering method is optimized and the front-end script preloading function preload is designed. By configuring the life cycle event during screen configuration or using this function in any control script, multiple specified screens can be preloaded when any screen is opened, and functions such as parameter transfer between screens, variable directory replacement, and setting the maximum number of screens to be preloaded can be realized.

[0072] See also Figure 5 , Figure 5 is a schematic diagram of a process for displaying a preloaded screen provided in an embodiment of the present application. Figure 5 As shown, the process of displaying the preloading screen is as follows: When the running screen is opened and the screen is initialized, the preloading function is executed, and the DOM structure of the preloading screen is rendered and configured to be hidden. When jumping to the preloading screen, the DOM structure of the preloading screen is configured to be displayed in the current screen.

[0073] The WEB front-end configuration screen performance optimization method provided in the embodiment of the present application first obtains the variables bound to each control of the WEB front-end configuration screen, then renders each control when running the configuration screen, and at the same time subscribes to and pushes variable data based on the data distribution intermediate service and the WEB server communication library, and stores the variable data in the front-end data pool, and finally obtains the corresponding variable data in the front-end data pool, and loads and displays it.

[0074] In addition, the screen rendering method is optimized and the front-end script preloading function preload is designed. When configuring the screen, you can configure the life cycle event or use this function in any control script to preload multiple specified screens when opening any screen.

[0075] This application solution will greatly improve the data loading speed to provide users with a better experience and reduce waiting time. Especially for the monitoring screen of the station, it is necessary to obtain the monitoring visualization information in real time. Using this solution, variables can be collected in advance, reducing the time for repeated variable collection each time the screen is opened.

[0076] While the screen is being rendered, data is subscribed and pushed, which avoids the need to wait for data to be pushed to the front end before visual display after the screen rendering is completed. This solution uses the preload function to download the required resources in advance when rendering the screen, without waiting until they are used to download them. You can see the content that needs to be displayed on the subsequent screen faster, and see the complete monitoring screen faster.

[0077] Since the variables have been collected by saving or previewing the screen during screen configuration, the workload of repeated data collection each time the screen is opened is greatly reduced, reducing the consumption of front-end resources. Simultaneous screen rendering and data subscription push also effectively improve the efficiency of front-end resource consumption.

[0078] When rendering a screen, once a screen with a preload event has been run, the DOM structure of the preloaded screen will always exist. When the screen is switched to run at any time, the screen rendering will be very fast without re-downloading related resources. Only the first load consumes front-end resources, and the consumption of front-end performance will be greatly reduced afterwards.

[0079] It should be understood that the size of the serial numbers of the steps in the above embodiments does not mean the order of execution. The execution order of each process should be determined by its function and internal logic, and should not constitute any limitation on the implementation process of the embodiments of the present application.

[0080] Corresponding to the method of the above embodiment, Figure 6 1 is a schematic diagram of the structure of the WEB front-end configuration screen performance optimization device provided in the embodiment of the present application. For the convenience of explanation, only the parts related to the embodiment of the present application are shown.

[0081] Reference Figure 6 , the device comprises: The acquisition unit 601 is used to acquire the variables bound to each control of the WEB front-end configuration screen in the variable database based on the screen service; the configuration screen contains multiple controls, and each control is bound to at least one variable; The processing unit 602 is used to render each control of the configuration screen when the configuration screen is run based on the screen service, and to subscribe to and push variable data based on the data distribution intermediate service and the WEB server communication library, and store the variable data in the front-end data pool; the variable data is the variable bound to each control; The display unit 603 is used to obtain corresponding variable data in the front-end data pool based on each rendered control, and load and display the obtained variable data.

[0082] According to one embodiment of the present application, the processing unit 602 is also used to send a variable subscription message to the WEB server communication library based on the data distribution intermediate service; based on the WEB server communication library, push variable data to the front-end data pool according to the variable subscription message.

[0083] According to one embodiment of the present application, the acquisition unit 601 is also used to configure multiple controls and graphic elements based on the screen configuration tool, obtain the configuration screen, save and / or preview the configuration screen; based on the screen service, collect the variables bound to each control of the configuration screen, and store the collected variables in the variable database.

[0084] According to an embodiment of the present application, there are multiple configuration screens; the acquisition unit 601, the processing unit 602 and the display unit 603 are also used for: Based on the screen service, the variables bound to each control of each configuration screen are obtained in the variable database; when each configuration screen is run based on the screen service, each control of each configuration screen is rendered, and at the same time, the corresponding variable data is subscribed and pushed based on the data distribution intermediate service and the WEB server communication library, and the variable data is stored in the front-end data pool; the variable data is the variable bound to each control of each configuration screen; based on each control that has been rendered on each configuration screen, the corresponding variable data is obtained in the front-end data pool, and the obtained variable data is loaded and displayed.

[0085] According to another embodiment of the present application, the device includes: The preloading unit 604 is used to run the first configuration screen based on the screen service and execute the preloading function to preload the second configuration screen; the second configuration screen is in a preloading state; The second display unit 605 is used to display the second configuration screen when jumping to the second configuration screen in the preloaded state.

[0086] According to an embodiment of the present application, there are multiple preloading screens in the preloading state; the preloading unit 604 and the second display unit 605 are also used for: Based on the screen service, configure the preloading function in the current screen; run the current screen, generate the DOM structure of each preloading screen based on the preloading function, and obtain the static resources of each preloading screen; preload each preloading screen according to the DOM structure and static resources of each preloading screen; when running the current screen, the obtained screen list includes the current configuration screen and each preloading screen; Configure the preloading mark of each preloading screen to true, configure the preloading mark of the current configuration screen to false, and configure the CSS style of the DOM structure of each preloading screen to be hidden; when running each preloading screen, adjust the CSS style of each preloading screen to display to display each preloading screen.

[0087] According to an implementation manner of the present application, the preloading unit 604 is further configured to remove the first preloading screen when the number of preloading screens exceeds the maximum preloading number.

[0088] According to an embodiment of the present application, the second display unit 605 is further used for: When running a screen with a preloading event, the DOM structure and static resources of each preloading screen are stored; the screen with the preloading event is the current screen; when switching to each preloading screen at any time, each preloading screen is rendered based on the corresponding DOM structure and static resources.

[0089] It should be noted that the information interaction, execution process, etc. between the above-mentioned devices / units are based on the same concept as the method embodiment of the present application. Their specific functions and technical effects can be found in the method embodiment part and will not be repeated here.

[0090] Those skilled in the art can clearly understand that for the convenience and simplicity of description, only the division of the above-mentioned functional units and modules is used as an example for illustration. In actual applications, the above-mentioned functions can be assigned to different functional units and modules as needed, that is, the internal structure of the device can be divided into different functional units or modules to complete all or part of the functions described above. The functional units and modules in the embodiments 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 above-mentioned integrated unit can be implemented in the form of hardware or in the form of software functional units. In addition, the specific names of the functional units and modules are only for the convenience of distinguishing each other, and are not used to limit the scope of protection of this application. The specific working process of the units and modules in the above-mentioned system can refer to the corresponding process in the aforementioned method embodiment, which will not be repeated here.

[0091] See also Figure 7 , Figure 7 Schematic diagram of the structure of the electronic device 7 provided in the embodiment of the present application. Figure 7 As shown, the electronic device 7 of this embodiment includes: at least one processor 701 ( Figure 7 Only one is shown in the figure), a memory 703, and a computer program 702 stored in the memory 703 and executable on at least one processor 701, wherein the processor 701 implements the steps in the above method embodiment when executing the computer program 702.

[0092] The electronic device 7 may be a computing device such as a desktop computer, a notebook, a PDA, or a mobile phone. The electronic device 7 may include, but is not limited to, a processor 701 and a memory 703. Those skilled in the art will appreciate that Figure 7 It is only an example of the electronic device 7 and does not constitute a limitation on the electronic device 7. It may include more or fewer components than shown in the figure, or a combination of certain components, or different components. For example, it may also include input and output devices, network access devices, etc.

[0093] The processor 701 may be a central processing unit (CPU), or other general-purpose processors, digital signal processors (DSP), application-specific integrated circuits (ASIC), field-programmable gate arrays (FPGA) or other programmable logic devices, discrete gate or transistor logic devices, discrete hardware photovoltaic modules, etc. A general-purpose processor may be a microprocessor or any conventional processor, etc.

[0094] In some embodiments, the memory 703 may be an internal storage unit of the electronic device 7, such as a hard disk or memory of the electronic device 7. In other embodiments, the memory 703 may also be an external storage device of the electronic device 7, such as a plug-in hard disk, a smart memory card (Smart Media Card, SMC), a secure digital card (SecureDigital, SD), a flash card (Flash Card), etc. equipped on the electronic device 7. Further, the memory 703 may also include both an internal storage unit of the electronic device 7 and an external storage device. The memory 703 is used to store an operating system, an application program, a boot loader (Boot Loader), data, and other programs, such as program codes of a computer program, etc. The memory 703 may also be used to temporarily store data that has been output or is to be output.

[0095] If the above-mentioned integrated unit is implemented in the form of a software functional unit and sold or used as an independent product, it can be stored in a computer-readable storage medium. Based on this understanding, when the present application implements all or part of the processes in the above-mentioned embodiment method, it can be completed by instructing the relevant hardware through a computer program, and the computer program can be stored in a computer-readable storage medium. When the computer program is executed by the processor, it can implement the steps applied to the above-mentioned method embodiment. Among them, the computer program includes computer program code, which can be in source code form, object code form, executable file or some intermediate form. The computer-readable storage medium may at least include: any entity or device that can carry the computer program code to the computing device / electronic device, recording medium, computer memory, read-only memory (ROM, Read-Only Memory), random access memory (RAM, Random Access Memory), electric carrier signal, telecommunication signal and software distribution medium, such as USB flash drive, mobile hard disk, disk or optical disk. In some jurisdictions, according to legislation and patent practice, computer-readable storage media cannot be electric carrier signals and telecommunication signals.

[0096] An embodiment of the present application further provides a computer-readable storage medium, which stores a computer program. When the computer program is executed by a processor, the steps in the above-mentioned method embodiments are implemented.

[0097] An embodiment of the present application provides a computer program product. When the computer program product is run on an electronic device, the electronic device executes the steps in the above-mentioned method embodiments.

[0098] In the above embodiments, the description of each embodiment has its own emphasis. For parts that are not described or recorded in detail in a certain embodiment, reference can be made to the relevant descriptions of other embodiments.

[0099] Those of ordinary skill in the art will appreciate that the units and algorithm steps of each example described in conjunction with the embodiments disclosed herein can be implemented in electronic hardware, or a combination of computer software and electronic hardware. Whether these functions are performed in hardware or software depends on the specific application and design constraints of the technical solution. Professional and technical personnel can use different methods to implement the described functions for each specific application, but such implementation should not be considered to be beyond the scope of this application.

[0100] In the embodiments provided in the present application, it should be understood that the disclosed devices / electronic devices and methods can be implemented in other ways. The device / electronic device embodiments described above are merely schematic, and the division of the above modules or units is only a logical function division. There may be other division methods in actual implementation, such as multiple units or photovoltaic components can be combined or integrated into another system, and some features can be ignored and not executed. Another point is that the indirect coupling, direct coupling or communication connection between each other shown or discussed can be an indirect coupling, direct coupling or communication connection through some interfaces, devices or units, which can be electrical, mechanical or other forms.

[0101] The units described above as separate components may or may not be physically separated, and the components shown as units may or may not be physical units, that is, they may be located in one place or distributed on multiple network units. Some or all of the units may be selected according to actual needs to achieve the purpose of the solution of this embodiment.

[0102] The above embodiments are only used to illustrate the technical solutions of the present application, rather than to limit them. Although the present application has been described in detail with reference to the above embodiments, those skilled in the art should understand that they can still modify the technical solutions described in the above embodiments, or make equivalent replacements for some of the technical features therein. These modifications or replacements do not deviate the essence of the corresponding technical solutions from the spirit and scope of the technical solutions of the embodiments of the present application, and should all be included in the protection scope of the present application.

Claims

1. A method for optimizing the performance of a WEB front-end configuration screen, characterized in that: The method comprises: Based on the screen service, the variables bound to each control of the WEB front-end configuration screen are obtained in the variable database; the configuration screen contains multiple controls, and each control is bound to at least one variable; When the configuration screen is run based on the screen service, each control of the configuration screen is rendered, and variable data is subscribed and pushed based on the data distribution intermediate service and the WEB server communication library, and the variable data is stored in the front-end data pool; the variable data is the variable bound to each control; Based on each control that has been rendered, corresponding variable data is obtained from the front-end data pool, and the obtained variable data is loaded and displayed.

2. The WEB front-end configuration screen performance optimization method according to claim 1, characterized in that: Subscribe to push variable data based on data distribution intermediate service and WEB server communication library, and store the variable data in the front-end data pool, including: Based on the data distribution intermediate service, sending a variable subscription message to the WEB server communication library; Based on the WEB server communication library, variable data is pushed to the front-end data pool according to the variable subscription message.

3. The WEB front-end configuration screen performance optimization method according to claim 1, characterized in that: Before obtaining the variables bound to the various controls of the WEB front-end configuration screen in the variable database based on the screen service, the method further includes: Based on the screen configuration tool, multiple controls and graphic elements are configured to obtain the configuration screen, and the configuration screen is saved and / or previewed; Based on the screen service, the variables bound to the various controls of the configuration screen are collected, and the collected variables are stored in the variable database.

4. The WEB front-end configuration screen performance optimization method according to claim 1, characterized in that: The configuration screen is multiple; the method comprises: Based on the screen service, obtaining the variables bound to each control of each configuration screen in the variable database; When running each configuration screen based on the screen service, each control of each configuration screen is rendered, and at the same time, corresponding variable data is subscribed and pushed based on the data distribution intermediate service and the WEB server communication library, and the variable data is stored in the front-end data pool; the variable data is the variable bound to each control of each configuration screen; Based on each control rendered on each configuration screen, corresponding variable data is obtained in the front-end data pool, and the obtained variable data is loaded and displayed.

5. The method for optimizing the performance of a WEB front-end configuration screen according to any one of claims 1 to 4, characterized in that: The method comprises: Running the first configuration screen based on the screen service, and executing the preloading function at the same time to preload the second configuration screen; the second configuration screen is in a preloading state; When jumping to the second configuration screen in the preloaded state, the second configuration screen is displayed.

6. The WEB front-end configuration screen performance optimization method according to claim 5, characterized in that: There are multiple preloading screens in the preloading state; the method includes: Configuring a preload function in the current picture based on the picture service; Run the current screen, generate the DOM structure of each preloaded screen based on the preload function, and obtain the static resources of each preloaded screen; Preload each preloaded screen according to its DOM structure and static resources; when running the current screen, the obtained screen list includes the current configuration screen and each preloaded screen; Configure the preload flag of each preload screen to true, configure the preload flag of the current configuration screen to false, and configure the CSS style of the DOM structure of each preload screen to be hidden; When each preloading screen is running, the CSS style of each preloading screen is adjusted to display, so as to display each preloading screen.

7. The WEB front-end configuration screen performance optimization method according to claim 6 is characterized in that: The method further comprises: When the number of preloading screens exceeds the maximum preloading number, the first preloading screen is removed.

8. The WEB front-end configuration screen performance optimization method according to claim 6 is characterized in that: The method further comprises: When running a screen with a preload event, the DOM structure and static resources of each preloaded screen are stored; the screen with the preload event is the current screen; When switching to each preloading screen at any time, each preloading screen is rendered based on the corresponding DOM structure and static resources.

9. An electronic device comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, characterized in that: When the processor executes the computer program, the method for optimizing the performance of the WEB front-end configuration screen described in any one of claims 1 to 8 is implemented.

10. A computer-readable storage medium storing a computer program, characterized in that: When the computer program is executed by a processor, the method for optimizing the performance of a WEB front-end configuration screen described in any one of claims 1 to 8 is implemented.

Images