Dynamic style loading method and system applied to edge computing

Abstract

The invention discloses a dynamic style loading method and system applied to edge computing, belongs to the technical field of edge computing, and aims to solve the technical problem of how to overcome the problems of large loading delay and poor dynamism existing in a traditional style loading mode and improve the performance of webpage application and user experience. Comprising the steps of style demand analysis and preprocessing; edge service node selection and communication; dynamically generating style data; the webpage application analyzes the style data, and the analyzed style is applied to corresponding elements of the page; the client side can be used for caching the downloaded and analyzed WebAssessment module to the local side; and before the WebAssembly module is loaded, the client side can carry out security verification on the WebAssembly module.

Description

Technical Field

[0001] The present invention relates to the field of edge computing technology, and more particularly to a dynamic style loading method and system applied to edge computing. Background Art

[0002] With the rapid development of the internet, web applications are becoming increasingly complex, placing higher demands on the flexibility, efficiency, and dynamism of style loading. Traditional style loading methods have many limitations when dealing with complex and ever-changing web page requirements. The combination of edge computing and WebAssembly technology offers a new approach to solving these problems.

[0003] Edge computing is a computing model that places computation and data storage close to the data source, reducing data transmission latency and improving system responsiveness. WebAssembly is a portable bytecode format that runs efficiently in modern web browsers, delivering near-native performance. Combining edge computing with WebAssembly allows complex computational tasks to be performed on edge service nodes, while leveraging WebAssembly's high performance to provide a new solution for dynamic style loading.

[0004] How to overcome the problems of large loading delay and poor dynamics in traditional style loading methods and improve the performance and user experience of web applications is a technical problem that needs to be solved. Summary of the Invention

[0005] The technical task of the present invention is to address the above shortcomings and provide a dynamic style loading method and system for edge computing to solve the technical problem of how to overcome the problems of large loading delay and poor dynamics in traditional style loading methods, and improve the performance of web applications and user experience.

[0006] In a first aspect, the present invention provides a dynamic style loading method for edge computing, which is applied to a system including a client, an edge service node, and a web page. The style rules pre-compiled on the edge service node are WebAssembly modules. The method includes the following steps:

[0007] Style requirement analysis and preprocessing: For web applications opened by users, traverse the DOM structure of the page and analyze the style requirements of each element;

[0008] Edge service node selection and communication: The user's geographic location is determined based on user information including the user's IP address. The edge service node closest to the user is selected from a pre-configured list of edge service nodes. The web application sends a request to the selected edge service node via the HTTP protocol, including the style requirement information in JSON format.

[0009] Style data generation: After receiving the request, the edge service node loads the corresponding WebAssembly module from local storage or a remote server based on the style requirement information through the WebAssembly module management module. The WebAssembly module dynamically generates style data based on the received style requirement information, internal algorithms, and logic. The style data is encoded in JSON format.

[0010] Style data transmission and application: The edge service node sends the generated style data back to the web application through an HTTP response. The web application parses the style data and applies the parsed style to the corresponding elements on the page.

[0011] Caching and updating: The client can cache the downloaded and parsed WebAssembly module locally. When requesting again, if the WebAssembly module has not changed, the client loads the WebAssembly module from the local cache directly.

[0012] Security and error handling: Before loading the WebAssembly module, the client performs security verification on the WebAssembly module.

[0013] As a preferred, during style requirement analysis and preprocessing, for a button element, analyze whether it needs specific color, font, and border as style requirements. Convert the analyzed style requirements into JSON format data, including storing CSS selectors, property names, and property values as JSON object keys and values respectively.

[0014] As a preferred, during style data transmission and application, the edge service node sends the generated style data back to the web application through an HTTP response, and uses JavaScript to dynamically apply the parsed style to the corresponding elements on the page.

[0015] As a preferred, during caching and updating, when the developer modifies the style rules, the edge service node recompiles and generates a new WebAssembly module, and updates the cache. Correspondingly, the client automatically downloads and replaces the old WebAssembly module after detecting the update of the WebAssembly module.

[0016] As a preferred, during security and error handling, the verification process of the WebAssembly module includes digital signature verification and hash value checking. If an error occurs during style calculation and rendering, the client captures and handles the error. At the same time, the client records error logs for subsequent analysis and debugging by the developer. The errors include WebAssembly module execution failure and style rule parsing error.

[0017] In a second aspect, the application discloses a dynamic style loading system applied to edge computing, which is applied to a system including a client, an edge service node and a webpage, precompiled style rules on the edge service node are WebAssembly modules, and the dynamic style loading system includes a style requirement analysis and preprocessing module, an edge service node selection and communication module, a style data generation module, a style data transmission and application module, a cache and update module and a security and error processing module.

[0018] The style requirement analysis and preprocessing module is used to support the following operation: for a webpage application opened by a user, DOM structure of the page is traversed, and style requirements of each element are analyzed.

[0019] The edge service node selection and communication module is used to support the following operation: a geographical position of the user is determined according to user information including an IP address of the user, an edge service node closest to the user is selected from a preconfigured edge service node list, and the webpage application sends a request to the selected edge service node through an HTTP protocol, wherein the request includes style requirement information in a JSON format.

[0020] The style data generation module is used to support the following operation: after the edge service node receives the request, corresponding WebAssembly modules are loaded from local storage or a remote server according to the style requirement information through a WebAssembly module management module, the WebAssembly modules execute internal algorithms and logic according to the received style requirement information, dynamically generate style data, and the style data is encoded in a JSON format.

[0021] The style data transmission and application module is used to support the following operation: the edge service node sends the generated style data back to the webpage application through an HTTP response, and the webpage application analyzes the style data and applies the analyzed style to corresponding elements of the page.

[0022] The cache and update module is used to support the following operation: the client can cache the downloaded and analyzed WebAssembly modules locally, and the next time the WebAssembly modules are requested, if the WebAssembly modules have not changed, the WebAssembly modules are directly loaded from the local cache.

[0023] The security and error processing module is used to support the following operation: before the WebAssembly modules are loaded, the client performs security verification on the WebAssembly modules.

[0024] As preferred, for a button element, the style requirement analysis and preprocessing module is used to analyze whether it needs a specific color, font, and border as a style requirement, and converts the analyzed style requirement into JSON format data, including storing the CSS selector, property name, and property value as the key and value of the JSON object respectively.

[0025] As preferred, the style data transmission and application module is used to support the edge service node to send the generated style data back to the web application through the HTTP response, and dynamically apply the parsed style to the corresponding elements of the page using JavaScript.

[0026] As preferred, when the developer modifies the style rule, the cache and update module is used to support the edge service node to recompile and generate a new WebAssembly module, and update the cache; correspondingly, the client automatically downloads and replaces the old WebAssembly module after detecting the update of the WebAssembly module.

[0027] As preferred, the verification process of the WebAssembly module includes digital signature verification and hash value checking, and if an error occurs during the style calculation and rendering process, the client captures and handles the error, and at the same time, the client records the error log for the developer to analyze and debug later, wherein the error includes WebAssembly module execution failure and style rule parsing error.

[0028] The dynamic style loading method and system applied to edge computing have the following advantages:

[0029] 1. Improve loading speed: By executing the style generation task on the edge node, the delay of data transmission to the center server is reduced, and the high performance advantage of WebAssembly is utilized to speed up the style generation, thereby improving the page loading speed;

[0030] 2. Enhance dynamicity: It can dynamically generate and apply styles according to user operation behavior and real-time requirements of the page, without reloading the entire page or related resources, improving the dynamicity and interactivity of the web application;

[0031] 3. Reduce server load: The style generation task is dispersed to the edge node for execution, reducing the load of the center server and improving the scalability and stability of the system.

[0032] 4. Improve user experience: Reduce page loading delay and stuttering phenomenon, allowing users to browse the web more smoothly, improving user experience. BRIEF DESCRIPTION OF DRAWINGS

[0033] In order to make the technical solutions in the embodiments of the present application clearer, the accompanying drawings needed in the embodiments or prior art description will be briefly introduced below. Obviously, the accompanying drawings in the following description only constitute some embodiments of the present application, and other accompanying drawings can be obtained by those skilled in the art without any creative effort on the basis of these accompanying drawings.

[0034] The present application will be further described below in conjunction with the accompanying drawings.

[0035] Figure 1 A flowchart of an embodiment 1 of a dynamic style loading method applied to edge computing. DETAILED DESCRIPTION

[0036] The present application will be further described below in conjunction with the accompanying drawings and specific embodiments, so that those skilled in the art can better understand the present application and implement it. However, the embodiments do not limit the present application, and the technical features in the embodiments and the embodiments can be combined with each other without conflict.

[0037] The embodiments of the present application provide a dynamic style loading method and system applied to edge computing, which are used to solve the technical problem of how to overcome the problems of large loading delay and poor dynamicity existing in the traditional style loading method, and improve the performance and user experience of web applications.

[0038] Embodiment 1

[0039] The present application provides a dynamic style loading method applied to edge computing, which is applied to a system including a client, an edge service node and a web page. The precompiled style rules on the edge service node are WebAssembly modules. The method includes six steps of style requirement analysis and preprocessing, edge service node selection and communication, style data generation, style data transmission and application, cache and update, and security and error handling.

[0040] Step S100: style requirement analysis and preprocessing: for the web application opened by the user, the DOM structure of the page is traversed, and the style requirement of each element is analyzed.

[0041] When the user opens the web application, the style analysis module starts working. It will traverse the DOM structure of the page and analyze the style requirement of each element. For example, for a button element, it is analyzed whether it needs specific color, font, border and other styles; the analyzed style rules are converted into JSON format data. For example, the CSS selector, property name and property value are stored as the key and value of the JSON object respectively.

[0042] Step S200 edge service node selection and communication: determine the geographical location of the user according to the user information including the user IP address, select the edge service node closest to the user from the pre-configured edge service node list, and the web application sends a request to the selected edge service node through the HTTP protocol, which includes the style requirement information in JSON format.

[0043] The edge node management module determines the geographical location of the user according to the user's IP address and other information. Then, from the pre-configured edge node list, the edge node closest to the user is selected; the web application sends style requirement information to the selected edge node through the HTTP protocol. The request contains style requirement data in JSON format.

[0044] Step S300 style data generation: after the edge service node receives the request, it loads the corresponding WebAssembly module from local storage or a remote server according to the style requirement information through the WebAssembly module management module. The WebAssembly module executes internal algorithms and logic according to the received style requirement information, dynamically generates style data, and encodes the style data in JSON format.

[0045] After the edge service node receives the request, the WebAssembly module management module loads the corresponding WebAssembly module from local storage or a remote server according to the style requirement information; the WebAssembly module uses the received style requirement data as input, executes internal algorithms and logic, and dynamically generates style data. The generated style data is also encoded in JSON format.

[0046] Step S400 style data transmission and application: the edge service node sends the generated style data back to the web application through the HTTP response, and the web application parses the style data and applies the parsed style to the corresponding elements of the page.

[0047] When transmitting and applying style data, the edge service node sends the generated style data back to the web application through the HTTP response, and uses JavaScript to dynamically apply the parsed style to the corresponding elements of the page.

[0048] Step S500 cache and update: the client can cache the downloaded and parsed WebAssembly module locally, and the next time the request is made, if the WebAssembly module has not changed, the WebAssembly module is loaded directly from the local cache.

[0049] To improve the response speed of subsequent requests, the client can cache the downloaded and parsed WebAssembly module locally. Next time the request is made, if the module has not changed, it is loaded directly from the local cache without the need to download it again from the edge server. When the developer modifies the style rules, the edge server recompiles to generate a new WebAssembly module and updates the cache. After detecting the WebAssembly module update, the client automatically downloads and replaces the old WebAssembly module, ensuring that the user always uses the latest style rules.

[0050] Step S600 security and error handling: Before loading the WebAssembly module, the client performs security verification on the WebAssembly module.

[0051] Before loading the WebAssembly module, the client performs security verification on the WebAssembly module to ensure that the WebAssembly module is from a reliable source and has not been tampered with. The verification process can include digital signature verification, hash value checking, etc. During style calculation and rendering, if an error occurs (such as WebAssembly module execution failure, style rule parsing error, etc.), the client can capture and handle these errors to avoid affecting the normal display of the page. At the same time, the client can record error logs for subsequent analysis and debugging by the developer.

[0052] The method of this embodiment precompiles style rules into WebAssembly modules on the edge server, migrating the style calculation task from the client to the edge server, reducing the computational burden on the client and improving the efficiency of style loading and rendering. By using the caching mechanism of the edge server, the compiled WebAssembly modules are cached, reducing repeated compilation and transmission and improving the overall performance of the system. The client dynamically loads and executes the corresponding WebAssembly module according to user requests, realizing dynamic and personalized styles. Compared with traditional JavaScript dynamic style insertion methods, WebAssembly modules have faster execution speed and lower resource consumption.

[0053] This method deploys a WebAssembly environment on the edge service node, offloads the style calculation task to the edge node close to the user, uses the high-efficiency execution capability of WebAssembly to realize fast style calculation, and through the steps of client request processing, result analysis and application, realizes low-latency loading of dynamic styles, and improves the performance of Web applications and user experience.

[0054] Embodiment 2:

[0055] The application relates to a dynamic style loading system applied to edge computing, which is applied to a system comprising a client, an edge service node and a webpage, precompiled style rules on the edge service node are WebAssembly modules, and the dynamic style loading system comprises a style requirement analysis and preprocessing module, an edge service node selection and communication module, a style data generation module, a style data transmission and application module, a cache and update module and a security and error processing module.

[0056] The style requirement analysis and preprocessing module is used for supporting the following operation: for a webpage application opened by a user, DOM structure of a page is traversed, and style requirements of each element are analyzed.

[0057] When the user opens the webpage application, the style requirement analysis and preprocessing module starts to work, DOM structure of the page is traversed, and style requirements of each element are analyzed. For example, for a button element, whether the button element needs specific color, font, border and other styles is analyzed; and the analyzed style rules are converted into JSON format data. For example, a CSS selector, an attribute name and an attribute value are stored as keys and values of a JSON object respectively.

[0058] The edge service node selection and communication module is used for supporting the following operation: a geographical position of a user is determined according to user information comprising an IP address of the user, a nearest edge service node to the user is selected from a preconfigured edge service node list, and the webpage application sends a request to the selected edge service node through an HTTP protocol, wherein the request comprises JSON format style requirement information.

[0059] The edge node management module determines a geographical position of a user according to user information such as an IP address of the user. Then, a nearest edge node to the user is selected from a preconfigured edge node list; and the webpage application sends style requirement information to the selected edge node through an HTTP protocol. The request comprises JSON format style requirement data.

[0060] The style data generation module is used for supporting the following operation: after the edge service node receives the request, corresponding WebAssembly modules are loaded from local storage or a remote server according to the style requirement information through a WebAssembly module management module, the WebAssembly modules execute internal algorithms and logic according to the received style requirement information, dynamically generate style data, and the style data is encoded in a JSON format.

[0061] After the edge service node receives the request, the WebAssembly module management module loads the corresponding WebAssembly module from the local storage or a remote server according to the style requirement information; the WebAssembly module uses the received style requirement data as input to execute internal algorithms and logic and dynamically generates style data. The generated style data is also encoded in the JSON format.

[0062] The style data transmission and application module is configured to support the following operations: the edge service node sends the generated style data back to the web application through an HTTP response, and the web application parses the style data and applies the parsed style to the corresponding elements of the page.

[0063] The style data transmission and application module supports the edge service node sending the generated style data back to the web application through an HTTP response, and dynamically applying the parsed style to the corresponding elements of the page using JavaScript.

[0064] The cache and update module is configured to support the following operations: the client can cache the downloaded and parsed WebAssembly module locally, and the next time the request is made, if the WebAssembly module has not changed, the WebAssembly module is loaded directly from the local cache.

[0065] To improve the response speed of subsequent requests, the client can cache the downloaded and parsed WebAssembly module locally. The next time the request is made, if the module has not changed, the module is loaded directly from the local cache without the need to download it again from the edge server. When the developer modifies the style rules, the edge server will recompile a new WebAssembly module and update the cache. After the client detects the update of the WebAssembly module, it will automatically download and replace the old WebAssembly module, ensuring that the user always uses the latest style rules.

[0066] The security and error handling module is configured to support the following operations: before loading the WebAssembly module, the client performs security verification on the WebAssembly module.

[0067] Before loading the WebAssembly module, the security and error handling module is used to support the client to perform security verification on the WebAssembly module, to ensure that the WebAssembly module is reliable in origin and has not been tampered with. The verification process can include digital signature verification, hash value checking, etc. During the style calculation and rendering process, if an error occurs (such as WebAssembly module execution failure, style rule parsing error, etc.), the client can capture and handle these errors to avoid affecting the normal display of the page. At the same time, the client can record error logs for subsequent analysis and debugging by the developer.

[0068] The system of the embodiment can execute the method disclosed in embodiment 1 to realize dynamic style loading.

[0069] The dynamic style loading method and system applied to edge computing provided by the present application are described in detail above, and the principles and implementation modes of the present application are described by applying specific examples; the above embodiment descriptions are only used to help understand the method of the present application and its core idea; meanwhile, for those skilled in the art, according to the idea of the present application, the specific implementation modes and application ranges will be changed, and the above descriptions should not be understood as limiting the present application.

Claims

1. A dynamic style loading method applied to edge computing, characterized in that: Applied to a system including a client, an edge service node, and a web page, the edge service node precompiles style rules into a WebAssembly module, and the method includes the following steps: Style requirement analysis and preprocessing: For web applications opened by users, traverse the DOM structure of the page and analyze the style requirements of each element; Edge service node selection and communication: The user's geographic location is determined based on user information including the user's IP address. The edge service node closest to the user is selected from a pre-configured list of edge service nodes. The web application sends a request to the selected edge service node via the HTTP protocol, including the style requirement information in JSON format. Style data generation: After receiving the request, the edge service node loads the corresponding WebAssembly module from local storage or a remote server based on the style requirement information through the WebAssembly module management module. The WebAssembly module executes its internal algorithms and logic based on the received style requirement information to dynamically generate style data. The style data is encoded in JSON format. Style data transmission and application: The edge service node sends the generated style data back to the web application via HTTP response. The web application parses the style data and applies the parsed style to the corresponding elements on the page. Caching and updating: The client can cache the downloaded and parsed WebAssembly module locally. The next time it is requested, if the WebAssembly module has not changed, it will be loaded directly from the local cache. Security and error handling: Before loading a WebAssembly module, the client will perform security verification on the WebAssembly module.

2. The dynamic style loading method for edge computing according to claim 1, characterized in that: During style requirement analysis and preprocessing, for a button element, analyze whether it requires specific colors, fonts, and borders as style requirements, and convert the analyzed style requirements into data in JSON format, including storing CSS selectors, attribute names, and attribute values ​​as keys and values ​​of JSON objects respectively.

3. The dynamic style loading method for edge computing according to claim 1, characterized in that: When style data is transmitted and applied, the edge service node sends the generated style data back to the web application through HTTP response, and uses JavaScript to dynamically apply the parsed style to the corresponding elements of the page.

4. The dynamic style loading method for edge computing according to claim 1, characterized in that: During caching and updating, when the developer modifies the style rules, the edge service node recompiles to generate a new WebAssembly module and updates the cache; correspondingly, after the client detects the WebAssembly module update, it automatically downloads and replaces the old WebAssembly module block.

5. The dynamic style loading method for edge computing according to claim 1, characterized in that: Regarding security and error handling, the WebAssembly module verification process includes digital signature verification and hash value verification. If an error occurs during style calculation and rendering, the client captures and handles the error. The client also records the error log for developers to conduct subsequent analysis and debugging. Errors include WebAssembly module execution failure and style rule parsing errors.

6. A dynamic style loading system for edge computing, characterized in that: Applied to a system including clients, edge service nodes, and web pages, the style rules on the edge service nodes are precompiled as WebAssembly modules. The dynamic style loading system includes a style requirement analysis and preprocessing module, an edge service node selection and communication module, a style data generation module, a style data transmission and application module, a cache and update module, and a security and error handling module. The style requirement analysis and preprocessing module is used to support the following operations: for a web application opened by a user, traverse the DOM structure of the page and analyze the style requirements of each element; The edge service node selection and communication module is used to support the following operations: determining the user's geographic location based on user information including the user's IP address, selecting the edge service node closest to the user from a pre-configured list of edge service nodes, and the web application sending a request to the selected edge service node via the HTTP protocol, including the style requirement information in JSON format; The style data generation module supports the following operations: After receiving a request, the edge service node loads the corresponding WebAssembly module from local storage or a remote server based on the style requirement information through the WebAssembly module management module. The WebAssembly module executes its internal algorithms and logic based on the received style requirement information to dynamically generate style data. The style data is encoded in JSON format. The style data transmission and application module is used to support the following operations: the edge service node sends the generated style data back to the web application through HTTP response, the web application parses the style data and applies the parsed style to the corresponding elements of the page; The cache and update module supports the following operations: the client can cache the downloaded and parsed WebAssembly module locally. On the next request, if the WebAssembly module has not changed, it will be loaded directly from the local cache. The security and error handling module is used to support the following operations: Before loading the WebAssembly module, the client will perform security verification on the WebAssembly module.

7. The dynamic style loading system for edge computing according to claim 6, characterized in that: For a button element, the style requirement analysis and preprocessing module is used to analyze whether it requires specific colors, fonts, and borders as style requirements, and convert the analyzed style requirements into JSON format data, including storing CSS selectors, attribute names, and attribute values ​​as keys and values ​​of JSON objects respectively.

8. The dynamic style loading system for edge computing according to claim 6, characterized in that: The style data transmission and application module is used to support the edge service node to send the generated style data back to the web application through HTTP response, and use JavaScript to dynamically apply the parsed style to the corresponding elements of the page.

9. The dynamic style loading system for edge computing according to claim 6, characterized in that: When developers modify style rules, the cache and update module is used to support edge service nodes to recompile and generate new WebAssembly modules and update the cache. Correspondingly, it supports clients to automatically download and replace old WebAssembly module blocks after detecting WebAssembly module updates.

10. The dynamic style loading system for edge computing according to claim 6, characterized in that: The WebAssembly module verification process includes digital signature verification and hash value verification. If an error occurs during style calculation and rendering, the client captures and handles the error. At the same time, the client records the error log for developers to conduct subsequent analysis and debugging. Errors include WebAssembly module execution failure and style rule parsing errors.

Images