H5 page material providing and loading method, system, device and equipment
The CDN caches page files, which solves the problem of low response efficiency of H5 page loading requests, and achieves more efficient resource access and user experience improvement.
Patent Information
- Application Number
- CN202411243661.7
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- Filing Date
- 2024-09-05
- Publication Date
- 2024-12-13
AI Technical Summary
During the H5 page production process, the client's load request response efficiency is low, mainly due to the high pressure of the centralized server and the delay caused by the long distance from the user.
Through the content distribution network (CDN) node caches page files, clients can directly obtain the required resources from the closest CDN node, reducing dependence on centralized servers and improving response efficiency.
Through CDN cache optimization, the client's H5 load request response efficiency is significantly improved, the server storage pressure is reduced, and the user experience is improved.
Smart Images

Figure CN119128300A_ABST
Abstract
Description
Technical Field
[0001] The present invention relates to the field of Internet application technology, and in particular to a method, system, device and equipment for providing and loading H5 page materials. Background Art
[0002] Fifth-generation Hypertext Markup Language 5 (HTML5) pages, also known as H5 pages, are widely used by major internet companies due to their flexible publishing process and rich user-side view presentation. However, when creating H5 pages, page material configuration is a crucial part.
[0003] In related technologies, users, through the client, directly send a loading request to the server to obtain data related to the page material and then load the H5 page. The server here can be understood as a centralized server, that is, all functions that interact with the client are completed by the centralized server. Due to reasons such as the high pressure on the centralized server and the fact that the centralized server is generally far away from the user, the response efficiency of the client's H5 loading request is low. Summary of the Invention
[0004] The purpose of the embodiments of the present invention is to provide a method, system, device, and apparatus for providing and loading H5 page materials, so as to improve the response efficiency of H5 loading requests from clients. The specific technical solutions are as follows:
[0005] In a first aspect, a method for providing H5 page materials is provided, which is applied to a page file production device and a page file storage device, wherein the storage device includes a content delivery network (CDN) node, including:
[0006] The production device is used to generate material configuration data, write the material configuration data into a page file, and send the page file to a CDN node;
[0007] The CDN node is used to cache the page file, and in response to receiving a loading request sent by the first client, sends the target page file corresponding to the target resource bit identifier associated with the target H5 page to the first client, so that the first client loads the target H5 page based on the target page file, wherein the loading request corresponds to the target resource bit identifier associated with the target H5 page.
[0008] Optionally, in response to receiving the loading request sent by the first client, the CDN node sends a target page file corresponding to the target resource bit identifier associated with the target H5 page to the first client, including:
[0009] The CDN node is used to receive a loading request triggered by the first client when detecting a script tag in the current H5 page, obtain the page file based on the URL of the page file, and send the page file to the first client, wherein the loading request carries the uniform resource locator URL of the page file specified by the src attribute of the script tag.
[0010] Optionally, the storage device includes a CDN root node and a plurality of CDN child nodes in a hierarchical structure;
[0011] The production device is used to send the generated page file to the CDN root node, so that multiple CDN child nodes synchronize the page file from the CDN root node.
[0012] Optionally, the production device is used to send the generated page file to the target CDN node and record the node identifier and / or node address of the target CDN node, so that when an updated page file with a resource bit identifier corresponding to the page file is subsequently obtained, the updated page file is sent to the target CDN node.
[0013] Optionally, the production device is used to extract the target field in the material configuration data as the processed material configuration data in response to receiving the release request, and the target field represents the field in the material configuration data except the field used only for assisting the operator configuration.
[0014] Optionally, the production device writes the generated material configuration data into a page file, including:
[0015] The production device is used to convert the target field into JSON data in key-value format; serialize the JSON data in key-value format to obtain a corresponding string, and assign the string corresponding to the JSON data in key-value format to a variable of the window object; write the assigned variable of the window object into a page file, which is a JS file.
[0016] In a second aspect, a method for loading H5 page materials is provided, which is applied to a loading device, wherein a first client is deployed in the loading device, including:
[0017] In response to opening the target H5 page, sending a load request corresponding to the target resource bit identifier associated with the target H5 page to the CDN node, so that the CDN node receives the load request and sends the target page file corresponding to the target resource bit identifier associated with the target H5 page to the first client;
[0018] receiving the target page file;
[0019] The target H5 page is loaded based on the target page file.
[0020] Optionally, before loading the H5 page based on the target page file, the method further includes:
[0021] Obtain the business data corresponding to the target resource bit identifier from the business server;
[0022] The loading of the target H5 page based on the target page file includes:
[0023] The target page file and the business data are rendered to corresponding positions in the target H5 page, where the corresponding position is a resource position in the target H5 page corresponding to the target resource position identifier.
[0024] Optionally, the sending a loading request corresponding to the target resource bit identifier associated with the target H5 page to the CDN node includes:
[0025] When a script tag in the target H5 page is detected, a loading request is triggered to be sent to the CDN node, and the loading request carries the uniform resource locator URL of the page file specified by the src attribute of the script tag.
[0026] Optionally, the sending a loading request corresponding to the target resource bit identifier associated with the target H5 page to the CDN node includes:
[0027] Determine the CDN node closest to the loading device, and send a loading request corresponding to the target resource bit identifier associated with the target H5 page to the CDN node.
[0028] In a third aspect, an H5 page material loading system is provided, comprising: a page file production device, a page file storage device, and a loading device deployed with a first client, wherein the storage device comprises a content delivery network CDN node;
[0029] The production device is used to generate material configuration data, write the generated material configuration data into a page file, and send the page file to a CDN node;
[0030] The CDN node is used to cache the page file;
[0031] The first client is configured to, in response to opening a target H5 page, send a loading request corresponding to a target resource bit identifier associated with the target H5 page to the CDN node;
[0032] The CDN node is further configured to receive a loading request sent by a first client and send a target page file corresponding to a target resource bit identifier associated with a target H5 page to the first client;
[0033] The first client is further configured to load a target H5 page based on the target page file.
[0034] In a fourth aspect, an H5 page material configuration system is provided, comprising: a configuration device deployed with a second client, a page file production device, and a page file storage device, wherein the storage device comprises a content delivery network CDN node;
[0035] The second client is configured to display at least one material, the at least one material being a material corresponding to an H5 page; for each material, in response to receiving a configuration request for the material, display an editing page, the editing page including a material configuration editor; and receive a configuration operation for the material through the material configuration editor, the configuration operation being used to determine material configuration data for the material;
[0036] The production device is configured to obtain the material configuration data, write the generated material configuration data into a page file, and send the page file to a CDN node;
[0037] The CDN node is used to cache the page file, and in response to receiving a loading request sent by the first client, sends the target page file corresponding to the target resource bit identifier associated with the target H5 page to the first client, so that the first client loads the target H5 page based on the target page file, wherein the loading request corresponds to the target resource bit identifier associated with the target H5 page.
[0038] In a fifth aspect, an H5 page material providing device is provided, which is applied to a page file production device and a page file storage device, wherein the storage device includes a content delivery network (CDN) node, the production device includes a generation module, a writing module, and a first sending module, and the CDN node includes a cache module and a second sending module. The device includes:
[0039] The generating module is used to generate material configuration data;
[0040] The writing module is used to write the material configuration data into the page file;
[0041] The first sending module is used to send the page file to the CDN node;
[0042] The cache module is used to cache the page file;
[0043] The second sending module is used to send a target page file corresponding to the target resource bit identifier associated with the target H5 page to the first client in response to receiving a loading request sent by the first client, so that the first client loads the target H5 page based on the target page file, wherein the loading request corresponds to the target resource bit identifier associated with the target H5 page.
[0044] In a sixth aspect, an H5 page material loading device is provided, which is applied to a loading device, wherein a first client is deployed in the loading device, including:
[0045] a sending module, configured to, in response to opening a target H5 page, send a load request corresponding to a target resource bit identifier associated with the target H5 page to a CDN node, so that the CDN node receives the load request and sends a target page file corresponding to the target resource bit identifier associated with the target H5 page to the first client;
[0046] A receiving module, configured to receive the target page file;
[0047] A loading module is used to load the target H5 page based on the target page file.
[0048] In a seventh aspect, an electronic device is provided, comprising a processor, a communication interface, a memory, and a communication bus, wherein the processor, the communication interface, and the memory communicate with each other via the communication bus;
[0049] Memory for storing computer programs;
[0050] The processor is configured to implement the method steps described in any one of the first aspect or the second aspect when executing the program stored in the memory.
[0051] In another aspect of the present invention, a computer-readable storage medium is provided, wherein a computer program is stored in the computer-readable storage medium. When the computer program is executed by a processor, the method described in any one of the first and second aspects is implemented.
[0052] In another aspect of the present invention, a computer program product comprising instructions is provided, which, when executed on a computer, enables the computer to execute any one of the methods described in the first or second aspect.
[0053] In an embodiment of the present invention, after the production device generates material configuration data and writes the material configuration data into a page file, the page file is sent to a CDN node included in the storage device. The CDN node caches the page file. In this way, the CDN node can respond to receiving a loading request sent by the first client and send the target page file corresponding to the target resource bit identifier associated with the target H5 page to the first client, so that the first client can load the target H5 page based on the target page file. Compared to accessing a centralized server, by caching the page file through the CDN node, the client can access the page file written with the material configuration data through the CDN node, which can improve the response efficiency of the client's H5 loading request. BRIEF DESCRIPTION OF THE DRAWINGS
[0054] In order to more clearly illustrate the embodiments of the present invention or the technical solutions in the prior art, the following briefly introduces the drawings required for describing the embodiments or the prior art.
[0055] Figure 1 This is a flowchart of a method for providing H5 page materials in an embodiment of the present invention;
[0056] Figure 2 Schematic diagram of the structure of the CDN node included in the storage structure in an embodiment of the present invention;
[0057] Figure 3 This is a flowchart of a method for loading H5 page materials in an embodiment of the present invention;
[0058] Figure 4 This is a schematic diagram of a client loading data in an embodiment of the present invention;
[0059] Figure 5 This is a structural diagram of an H5 page material loading system in an embodiment of the present invention;
[0060] Figure 6 This is a structural diagram of the H5 page material configuration system in an embodiment of the present invention;
[0061] Figure 7 is a schematic diagram of a specific embodiment of the present invention;
[0062] Figure 8 This is a schematic diagram of creating an HTML page by combining material configuration data in an embodiment of the present invention;
[0063] Figure 9 This is a structural diagram of an apparatus for providing H5 page material according to an embodiment of the present invention;
[0064] Figure 10 This is a structural diagram of an H5 page material loading device in an embodiment of the present invention;
[0065] Figure 11 Schematic diagram of the structure of an electronic device in an embodiment of the present invention. DETAILED DESCRIPTION
[0066] The technical solutions in the embodiments of the present invention will be described below with reference to the accompanying drawings in the embodiments of the present invention.
[0067] The embodiment of the present invention provides an H5 page material providing method, which is applied to a production device of a page file and a storage device of a page file, wherein the storage device includes a content delivery network (CDN) node, such as Figure 1 Shown, including:
[0068] S101, a production device is used to generate material configuration data, write the material configuration data into a page file, and send the page file to a CDN node;
[0069] S102, a CDN node is used to cache page files, and in response to receiving a loading request sent by the first client, sends a target page file corresponding to the target resource bit identifier associated with the target H5 page to the first client, so that the first client loads the target H5 page based on the target page file, wherein the loading request corresponds to the target resource bit identifier associated with the target H5 page.
[0070] In an embodiment of the present invention, after the production device generates material configuration data and writes the material configuration data into a page file, the page file is sent to a CDN node included in the storage device. The CDN node caches the page file. In this way, the CDN node can respond to receiving a loading request sent by the first client and send the target page file corresponding to the target resource bit identifier associated with the target H5 page to the first client, so that the first client can load the target H5 page based on the target page file. Compared to accessing a centralized server, by caching the page file through the CDN node, the client can access the page file written with the material configuration data through the CDN node, which can improve the response efficiency of the client's H5 loading request.
[0071] It can also be understood as CDN cache optimization, that is, using CDN to cache material data, greatly improving the loading experience of the user-side H5 page.
[0072] In addition, this method can also reduce the storage pressure of the server.
[0073] The first client may be understood as a client facing a user who actually accesses (or is referred to as a real access), and may specifically be a browser or the like.
[0074] In S101, the production device may generate material configuration data based on interaction with the second client. Specifically, the process may include: the second client being configured to display at least one material, where the at least one material corresponds to an H5 page; displaying an edit page for each material in response to receiving a configuration request for the material, where the edit page includes a material configuration editor; receiving a configuration operation on the material via the material configuration editor, where the configuration operation is used to determine material configuration data for the material; and the production device being configured to obtain the material configuration data, write the generated material configuration data to a page file, and send the page file to a CDN node.
[0075] The second client can be understood as a client for operators, which can specifically be a browser or the like.
[0076] In order to describe the entire invention more clearly, the process of generating material configuration data based on the interaction between the production device and the second client will not be expanded here. This process will be described in detail later.
[0077] The production device may send the obtained page file to all CDN nodes included in the storage device, or may send it only to some CDN nodes included in the storage device.
[0078] Among them, the production equipment can upload the page file to the CDN node through the file upload interface provided by the CDN node.
[0079] In S102, when the production device sends the obtained page file to all CDN nodes included in the storage device, the first client accesses the target page file it desires to access from any CDN node. Specifically, the first client can send a load request corresponding to the target resource bit identifier associated with the target H5 page to any CDN node. In response to receiving the load request sent by the first client, the CDN node sends the target page file corresponding to the target resource bit identifier associated with the target H5 page to the first client. In this way, the first client can load the target H5 page based on the target page file.
[0080] When the production device sends the obtained page file to some CDN nodes included in the storage device, the first client can also send a loading request corresponding to the target resource bit identifier associated with the target H5 page to any CDN node. In response to receiving the loading request sent by the first client, the CDN node can first check whether it has cached the target page file corresponding to the loading request. If so, it sends the target page file corresponding to the target resource bit identifier associated with the target H5 page to the first client; if not, the CDN node can first obtain the target page file from other CDN nodes, and then send the target page file to the first client.
[0081] In one implementation method, the first client obtains resources from the CDN node with the best network path from the client, that is, the first client sends a loading request to the CDN node closest to the loading device. In this way, the access speed and efficiency can be further improved, and the user experience can be enhanced.
[0082] Among them, the first client sends a loading request corresponding to the target resource bit identifier associated with the target H5 page to the CDN node, which may include: the first client detects the user's operation of opening the H5 page, or simply understood as, when the user opens an H5 page through the first client, the H5 page can be understood as the target H5 page. An H5 page can be associated with at least one resource bit identifier, which is known in advance. When the user opens the target H5 page through the first client, the first client can send a loading request corresponding to the target resource bit identifier associated with the target H5 page to the CDN node.
[0083] In the case where the production device sends the obtained page file to some CDN nodes included in the storage device, when the operator needs to update the published target page file, in order to ensure that the update can be accurately synchronized to the CDN node storing the target page file, the embodiment of the present invention also provides a corresponding mechanism:
[0084] The production device is used to send the generated page file to the target CDN node and record the node identifier and / or node address of the target CDN node, so that when an updated page file with a resource bit identifier corresponding to the page file is obtained later, the updated page file can be sent to the target CDN node.
[0085] In this way, if the operator re-edits the material, the production equipment obtains the updated material configuration data for the material, and then obtains the updated page file, it can ensure that the operator's update of the material can be accurately synchronized to the CDN node that stores the corresponding target page file. In this way, during the actual access process, the actual accessing user can obtain the updated target page file from the CDN node to ensure that the actual accessing user can use the updated material to edit the H5 page, etc.
[0086] In an optional embodiment, the storage device includes a CDN root node and a plurality of CDN child nodes in a hierarchical structure;
[0087] The production device is used to send the generated page files to the CDN root node, so that multiple CDN child nodes synchronize the page files from the CDN root node.
[0088] The hierarchical structure may include a tree structure, etc.
[0089] The root node and child nodes synchronize page files at a set time interval, which can be determined by actual needs or experience, such as 5 seconds, 10 seconds, 20 seconds, 1 minute, etc.
[0090] In an example, Figure 2 As shown, the storage structure includes a root node A and multiple child nodes. Root node A is the parent node of child nodes B and C. Child node B is the parent node of child nodes D and E. Child node C is the parent node of child nodes F and G. Starting from root node A, each parent node synchronizes page files with each child node. For example, every 10 seconds, root node A synchronizes its own page files to its child nodes: child nodes B and C. Child node B also synchronizes its own page files to its child nodes: child nodes D and E. Child node C also synchronizes its own page files to its child nodes: child nodes F and G. Every 10 seconds, child node A synchronizes its own page files to its child nodes: child nodes F and G.
[0091] In an optional embodiment, in response to receiving a loading request sent by the first client, the CDN node sends a target page file corresponding to the target resource bit identifier associated with the target H5 page to the first client, including:
[0092] The CDN node is used to receive a loading request triggered by the first client when a script tag in the current H5 page is detected, obtain the page file based on the URL of the page file, and send the page file to the first client.
[0093] The loading request carries the Uniform Resource Locator (URL) of the page file specified by the source code (src) attribute of the script tag.
[0094] In an optional embodiment, the production device is used to extract the target field in the material configuration data as the processed material configuration data in response to receiving the release request, and the target field represents the field in the material configuration data except for the field used only to assist the operator in configuration.
[0095] For example, during the material editing process, the operator can provide the operator with an editing interface through the second client, and a "Publish" button can be displayed in the editing interface. When the operator clicks the "Publish" button, a publish request is triggered. When the production equipment receives the publish request, it can extract the specified fields in the material configuration data of the material.
[0096] In one possible implementation, after obtaining the material configuration data, the production device saves the material configuration data to a database. In response to receiving a publishing request, the production device can retrieve the material configuration data from the database or directly process the material configuration data in the database. Specifically, the target field in the material configuration data is extracted as the processed material configuration data.
[0097] The target field may include a field name and a field value.
[0098] For example, the database is MongoDB (a database based on distributed file storage). The data structure in MongoDB includes field names, field types, field descriptions, and field values. In response to receiving the publish request, the production device only retains the field names and field values in the data structure.
[0099] The above process of extracting the target fields from the material configuration data as the processed material configuration data can also be understood as a data reduction process.
[0100] In an optional embodiment, the production device writes the generated material configuration data into the page file, including:
[0101] The production device is used to convert the target field into a data exchange format (JavaScript Object Notation, JSON) in a key-value pair format; serialize the JSON data in the key-value format to obtain a corresponding string, and assign the string corresponding to the JSON data in the key-value format to a variable of a window object; and write the assigned variable of the window object to a page file, which is a directly interpreted scripting language (JavaScript, JS) file.
[0102] The page file can be named with a resource bit identifier (ID).
[0103] This process is also called JSON assembly of materials. After the operator edits and previews the materials, the production equipment assembles and integrates the data, and simplifies it into JSON structure data in key-value format. This data is assigned to a variable of the window object and written into the JS file.
[0104] In the embodiment of the present invention, the JS file includes JSON data. The client loads the material configuration data by loading the JS file, that is, it can use highly streamlined JSON data for communication, effectively reducing the bandwidth pressure of the service and realizing efficient JSON data communication.
[0105] The embodiment of the present invention also provides an H5 page material loading method, which is applied to a loading device, wherein a first client is deployed in the loading device, such as Figure 3 As shown, this may include:
[0106] S301, in response to opening a target H5 page, sending a load request corresponding to a target resource identifier associated with the target H5 page to a CDN node, so that the CDN node receives the load request and sends a target page file corresponding to the target resource identifier associated with the target H5 page to the first client;
[0107] S302, receiving a target page file;
[0108] S303, loading the target H5 page based on the target page file.
[0109] In an embodiment of the present invention, when accessing page materials, the client in the loading device can send a loading request corresponding to the target resource bit identifier associated with the target H5 page to the CDN node. In response to receiving the loading request sent by the first client, the CDN node sends the target page file corresponding to the target resource bit identifier associated with the target H5 page to the first client. In this way, the client in the loading device receives the target page file and can load the target H5 page based on the target page file. Compared to accessing a centralized server, the client in the loading device can access the page file written with the material configuration data through the CDN node, which can improve the response efficiency of the client's H5 loading request.
[0110] In an optional embodiment, before loading the H5 page based on the target page file, the method further includes: obtaining business data corresponding to the target resource bit identifier from the business server;
[0111] S303 includes:
[0112] Render the target page file and business data to the corresponding position in the target H5 page, where the corresponding position is the resource position in the target H5 page corresponding to the target resource position identifier.
[0113] The business server and the aforementioned production equipment and storage devices can all be understood as the backend. Here, to make it easier to understand the relationship between the various entities, the production equipment can also be understood as the configuration server.
[0114] Material configuration data can be understood as static data specific to the material, also known as static material. Simply put, this data remains the same for all users accessing the content and does not change over a short period of time. This data can also be considered cold data. In embodiments of the present invention, this data can be retrieved and stored locally on the client at regular intervals, reducing communication costs between the client and the server.
[0115] Different actual access users may have different business needs, and business data changes dynamically. This part of data can also be called user-side dynamic data. Because it changes dynamically, it can also be understood as hot data.
[0116] In the embodiment of the present invention, static data and dynamic data are distinguished. Figure 4 As shown, static materials are obtained by production equipment and cached by CDN nodes, while dynamic data is obtained by the business server. The first client interacts with the CDN node to obtain static materials, while the first client interacts with the business server to obtain dynamic data, thus achieving the separation of hot and cold data.
[0117] In an optional embodiment, the first client can send a data acquisition request to the business server, the data acquisition request carries the target resource bit identifier; obtain the business data corresponding to the target resource bit identifier from the business server; and render the target page file and business data obtained from the CDN node to the corresponding position in the H5 page.
[0118] In this embodiment of the present invention, the static content of a page and the dynamic data of the page are separated into two network requests. Specifically, a first client sends a load request to a CDN node. Upon receiving the load request, the CDN node sends the target page file corresponding to the target resource identifier associated with the target H5 page to the first client, thereby obtaining the static content of the page through a single network request. Separately, a data acquisition request is sent to the service server, carrying the target resource identifier, to obtain the business data corresponding to the target resource identifier from the service server, thereby obtaining the dynamic data of the page through another network request.
[0119] In an optional embodiment, sending a load request corresponding to a target resource bit identifier associated with a target H5 page to a CDN node in S301 includes:
[0120] When a script tag is detected in the target H5 page, a loading request is sent to the CDN node, and the loading request carries the uniform resource locator URL of the page file specified by the src attribute of the script tag.
[0121] For example, when the operator edits the material in an H5 page through the second client, the production equipment can generate material configuration data, and write the material configuration data into the page file corresponding to the resource location identifier associated with the H5 page, and send the page file to the CDN node, which is used to cache the page file. At this time, the front-end programmer can know the storage address of the page file and can write the address into the src attribute of the corresponding script tag. In this way, during the actual user access process, when the actual user opens the above-mentioned H5 page, the first client triggers a loading request when detecting the script tag in the H5 page, and sends the loading request to the CDN node. After the CDN node receives the loading request triggered by the first client when detecting the script tag in the H5 page, it can obtain the page file corresponding to the target resource location identifier associated with the above-mentioned H5 page based on the URL of the page file, and send the page file to the first client.
[0122] In an optional embodiment, sending a load request corresponding to a target resource bit identifier associated with a target H5 page to a CDN node in S301 includes:
[0123] Determine the CDN node closest to the loading device and send a loading request corresponding to the target resource bit identifier associated with the target H5 page to the CDN node.
[0124] The first client is deployed in the loading device. That is, the first client sends a loading request to the CDN node closest to the loading device. In other words, the first client obtains resources from the CDN node with the best network path to the client. This can further improve access speed and efficiency, and enhance user experience.
[0125] The embodiment of the present invention also provides an H5 page material loading system, such as Figure 5 As shown, it includes: a page file production device 40, a page file storage device 41 and a loading device 42 deployed with a first client 420, wherein the storage device 41 includes a content delivery network CDN node 410;
[0126] The production device 40 is used to generate material configuration data, write the generated material configuration data into a page file, and send the page file to the CDN node 410;
[0127] CDN node 410, used to cache page files;
[0128] The first client 420 is configured to, in response to opening the target H5 page, send a loading request corresponding to the target resource bit identifier associated with the target H5 page to the CDN node 410;
[0129] The CDN node 410 is further configured to receive a loading request sent by the first client and send a target page file corresponding to a target resource bit identifier associated with the target H5 page to the first client;
[0130] The first client 420 is further configured to load a target H5 page based on the target page file.
[0131] In an embodiment of the present invention, after the production device generates material configuration data and writes the material configuration data into a page file, the page file is sent to a CDN node included in the storage device. The CDN node caches the page file. In this way, the CDN node can respond to receiving a loading request sent by the first client and send the target page file corresponding to the target resource bit identifier associated with the target H5 page to the first client, so that the first client can load the target H5 page based on the target page file. Compared to accessing a centralized server, by caching the page file through the CDN node, the client can access the page file written with the material configuration data through the CDN node, which can improve the response efficiency of the client's H5 loading request.
[0132] The steps implemented between the various parts of the H5 page material providing system in the embodiment of the present invention and the interactions between different parts have been described in the H5 page material providing method in the above embodiment. Please refer to the above embodiment and no further details will be given here.
[0133] The embodiment of the present invention also provides an H5 page material configuration system, such as Figure 6 As shown, it includes: a configuration device 50 deployed with a second client 500, a page file production device 40 and a page file storage device 41, the storage device includes a content delivery network CDN node 410;
[0134] The second client 500 is configured to display at least one material corresponding to an H5 page; display an edit page for each material in response to receiving a configuration request for the material, the edit page including a material configuration editor; and receive a configuration operation for the material via the material configuration editor, the configuration operation being used to determine material configuration data for the material.
[0135] The production device 40 is used to obtain material configuration data, write the generated material configuration data into a page file, and send the page file to the CDN node 410;
[0136] The CDN node 410 is used to cache page files, and in response to receiving a loading request sent by the first client, sends a target page file corresponding to the target resource bit identifier associated with the target H5 page to the first client 420, so that the first client 420 loads the target H5 page based on the target page file, wherein the loading request corresponds to the target resource bit identifier associated with the target H5 page.
[0137] In this embodiment of the present invention, at least one asset corresponding to an H5 page is displayed. For each asset, in response to receiving a configuration request for the asset, an editing page is displayed. The editing page includes an asset configuration editor. Configuration operations performed on the asset via the asset configuration editor are received, and asset configuration data for the asset is determined based on the configuration operations. This allows for flexible asset configuration via the asset configuration editor within the editing interface, simplifying the process of configuring page assets.
[0138] Furthermore, the efficiency of H5 page configuration can be improved. Moreover, without excessive manual interaction, the configuration burden on developers is reduced, which in turn reduces labor costs.
[0139] In addition, because hard-coded data can usually only be modified by editing the source code and recompiling the executable file. The method of configuring page materials by hard coding in the related art will also result in the operation personnel also needing to communicate with the developers during the material update process, and then the developers will recode, and each time the material is changed, the page needs to be republished. In the embodiment of the present invention, by displaying at least one material corresponding to the H5 page, for each material, in response to receiving an editing request for the material, an editing page is displayed, the configuration operation of the material through the material configuration editor is received, and based on the configuration operation, the material configuration data for the material is determined. In this way, the operation personnel can update the material at any time without relying on the R&D personnel to put the code online, that is, to achieve independent update.
[0140] Furthermore, in the embodiment of the present invention, page materials are configured through a server different from the business server, such as the above-mentioned production equipment, without relying on the business server. On the one hand, this reduces the pressure on the business server and alleviates the development cost of the business server; on the other hand, it does not need to rely on the structured data of the business server, so that operators can configure extremely flexible data structures and support the mixed use of multiple data structures. The underlying storage does not rely on the structured database, and can meet the flexible business configuration requirements of the H5 page, that is, realize flexible configuration.
[0141] Each H5 page can contain multiple resource locations, and each resource location requires at least one material.
[0142] Among them, the materials can include data types such as strings, pictures, rich text, registration system, time, color, etc.
[0143] In one possible implementation, these data types can be obtained by secondary development based on el-input (input box). Specifically, secondary development based on el-input (input box) to obtain different types of data can be implemented based on methods in related technologies, which will not be repeated here.
[0144] The second client 500 displaying at least one material can also be understood as displaying a configurable resource.
[0145] In one implementation, the second client 500 displays at least one material including: sending a material configuration request carrying a target resource location identifier to a production device; obtaining at least one material required for a resource location in an H5 page corresponding to the target resource location identifier, and displaying the at least one material.
[0146] For example, an operator can open an initial page to be produced, display an input box on the initial page, and when the operator enters the target resource location identifier in the input box and clicks "Confirm," a material configuration request carrying the target resource location identifier can be triggered. Thus, upon receiving the material configuration request for the target resource location identifier, the production device 40 can obtain at least one material required for the resource location in the H5 page corresponding to the target resource location identifier and return it to the second client 500, which can then display the at least one obtained material.
[0147] Alternatively, the operator opens the initial page to be created and can select, click, or otherwise determine the resource location to be edited. For example, by using a location represented by two-dimensional coordinates, the second client 500 can identify the determined resource location as the target resource location and then send a resource configuration request containing the resource location identifier of the target resource location to the production device 40. In this way, the second client 500 can obtain from the production device 40 at least one resource required for the resource location in the H5 page corresponding to the target resource location identifier and display the obtained at least one resource location.
[0148] The initial page here can also be understood as a HyperText Markup Language (HTML) template.
[0149] In another possible implementation, the second client 500 displays at least one material, which may include: receiving a material configuration request carrying a target page identifier; obtaining at least one material required for at least one resource position contained in the H5 page corresponding to the target page identifier, and displaying at least one material.
[0150] For example, the operator can open the initial page to be produced on the second client, such as a browser, and can use the page identifier of the initial page as the target page identifier, and the second client can send a material configuration request carrying the target page identifier to the production device 40. Because each H5 page can contain multiple resource positions, and each resource position requires at least one material, after the production device 40 receives the material configuration request carrying the target page identifier, it can feed back the materials required for the multiple resource positions contained in the page corresponding to the target page identifier to the second client 500, and the second client 500 can display the acquired materials. Specifically, the corresponding materials can be displayed separately for different resource positions, for example, the materials corresponding to different resource positions can be displayed separately through different pages, or the materials corresponding to different resource positions can be displayed separately through different layers of the page. The specific display method can be determined according to actual needs, and the embodiment of the present invention is not limited to this.
[0151] The second client 500 can display an "Edit" option for each material displayed. When it is detected that the "Edit" option is clicked, it can also be understood as receiving a configuration request for the material. Moreover, when the configuration request for the material is received, an editing page including a material configuration editor can be displayed, that is, clicking Edit can jump to the editing page.
[0152] The material configuration editor is used to provide options for performing specific configuration operations on materials. For example, for materials whose data type is image, options such as scaling and cropping can be provided for users to choose from.
[0153] Material editing supports strings, images, colors, time, rich text, registration system and advanced tables. Among them, advanced tables support array data output, and the array can contain strings, images, colors, time, rich text and registration system type data.
[0154] In the embodiment of the present invention, each material is processed separately, that is, each material is supported to be edited, previewed and published independently.
[0155] After the second client 500 displays the editing interface including the material configuration editor, the operator can perform specific configuration operations through the material configuration editor and receive the configuration operations on the material through the material configuration editor. It can also be understood as detecting the user's operations on the material through the material configuration editor. In this way, the material configuration data for the material can be determined based on the configuration operations.
[0156] In one implementation, the second client 500 may determine the material configuration data for the material based on the configuration operation. In another implementation, the second client 500 may send the editing operation data to the production device, and the production device may determine the material configuration data for the material based on the editing operation data.
[0157] In the embodiment of the present invention, the material is displayed through the front end (second client 500) and an editing interface including a material configuration editor is provided, so that the page material can be configured through the material configuration editor, that is, visual editing of the page material is achieved.
[0158] The following combination Figure 7 , the H5 page material configuration process, H5 page material provision process and H5 page material loading process provided in the above embodiment are described in detail.
[0159] 1. Material visual editing:
[0160] The visual backend provides a variety of page resource management functions, and each resource can be independently edited, previewed, and published. Material editing supports strings, images, colors, time, rich text, registration system, and advanced tables. Advanced tables support array data output, and arrays can contain strings, images, colors, time, rich text, and registration system types of data.
[0161] Specifically, a visual configuration backend for the material is built. The front end is built using a component library (Element UI). The back end is based on an enterprise-level network infrastructure framework (Egg.js) and uses a MongoDB cluster to provide services. The homepage uses a table component (el-table) to display all configurable resources. Clicking Edit jumps to the edit page. The front end mentioned here is the second client for operators in the above embodiment.
[0162] The editing page contains a material configuration editor that supports data types such as strings, images, rich text, registration system, time, color, etc. These data types are secondary developed based on el-input.
[0163] Furthermore, when the operator clicks the Save button, the data is saved to the MongoDB database. Alternatively, the data can be saved to a Remote Dictionary Server (Redis) cluster.
[0164] In the embodiment of the present invention, the front end can be built through VUE, which is a progressive front-end learning framework based on a directly interpreted scripting language (JavaScript), including a routing plug-in (VUE-Router), a component library (Element UI) and a scaffolding tool (Vue cli).
[0165] VUE-Router routing plug-in:
[0166] VUE's single-page application is based on routing and components. Routing is used to set access paths and map paths to components. In VUE-Router single-page applications, switching between paths is actually switching components. Routing is the path manager for SPA (single-page application). In layman's terms, VUE-Router is the link path management system for web applications (WebApp).
[0167] Element UI is a component library based on Vue 2.0, a component library for developers, designers, and product managers. It provides supporting design resources to help your website take shape quickly.
[0168] Vue cli is a scaffolding tool for quickly building a Vue project. Using Vue cli, you can quickly build a VUE development environment and the corresponding web packaging tool (webpack) configuration.
[0169] After the operator edits and previews the material, the production equipment assembles and integrates the data, reducing it to a JSON structure in key-value format. This data is assigned to a variable in the window object and written to a JS file.
[0170] It can also be understood as data simplification and release.
[0171] When a user clicks "Publish," the data stored in the MongoDB database is streamlined. The data structure in MongoDB includes field names, field types, field descriptions, and field values. During the data streamlining process, only field names and field values are retained and converted into JSON data in key-value format. The JSON data is serialized into a string, assigned to the variable of the window object, and written to a file. The file is named after the resource ID and ends with .js. The file is then uploaded to the CDN using the file upload interface provided by the CDN. The user here is an operations staff member.
[0172] 2. Resource distribution:
[0173] JS files are distributed through CDN and stored on various CDN nodes. Users who actually access the site can obtain resources from the node with the best network path to their site, thereby improving access speed and efficiency.
[0174] Specifically, CDN distribution can be implemented through a Quality Control Engineer (QCE) virtual machine. The CDN includes a management node (Master), worker nodes (Worker) such as Worker1, Worker2, Worker3, and Worker4, and may also include agents.
[0175] The first client can interact with the CDN through the management node. For example, the production equipment uploads the resource location file obtained in the above embodiment to the management node. After receiving the data request sent by the first client, the resource location file can be first transmitted to the working node that interacts with the first client. Then, the working node sends the resource location file to the first client. In the process of CDN distribution, load balancing processing can also be performed through the Agent. The embodiment of the present invention does not limit the deployment of CDN nodes and the interaction between the first client and the CDN nodes, and can be processed with reference to the CDN distribution method in the relevant technology.
[0176] In the embodiment of the present invention, CDN is used to distribute the material configuration file, which effectively reduces the bandwidth pressure on the server side and improves the user side experience through a streamlined JSON data structure and CDN network optimization cache.
[0177] 3.H5 page reference resources:
[0178] The H5 page references the JS file on the CDN through the script tag, obtains the required material configuration data from the window object, and renders it to the page.
[0179] Use the script tag in your HTML5 page to load a JavaScript file stored on a CDN. After loading, a global variable named window.res_ (resource ID) is attached to the window object. The data is formatted as key-value JSON data. Use JavaScript code to render the data to the corresponding location on the HTML5 page.
[0180] In this way, the operator configures the materials through the visual background. After the configuration is completed, the system (the system composed of the above front-end and back-end) assembles the data and publishes the JSON file to the CDN. During the actual access process, the H5 page can directly reference this JSON file to complete the material display.
[0181] The embodiments of the present invention allow operators to configure extremely flexible data structures, supporting the mixed use of multiple data structures. The underlying storage does not rely on a structured database, enabling flexible configuration. Material configuration uses flexible unstructured data, no longer relying on structured data on the server side, significantly improving the flexibility of operational page configuration. Furthermore, operators can update materials at any time without relying on R&D personnel to release code, achieving independent updates.
[0182] Furthermore, the data structure of operationally edited assets is compressed to ensure minimal data sent to the CDN, achieving data streamlining. Furthermore, configured assets are stored on the CDN as JSON files, minimizing pressure on the business server. Furthermore, unlike traditional centralized server-based asset distribution, leveraging the CDN for asset distribution significantly enhances the user experience.
[0183] In one possible implementation, in addition to obtaining the aforementioned material configuration data from the aforementioned production equipment, embodiments of the present invention may also obtain business data corresponding to the target resource location identifier from the business server. Furthermore, the resource location file and business data are rendered to corresponding locations within the H5 page. The corresponding locations are the locations within the H5 page corresponding to the resource location corresponding to the target resource location identifier. In other words, the H5 page is produced using the obtained material configuration data.
[0184] This embodiment of the present invention utilizes the aforementioned CDN-based H5 page material visualization configuration solution to isolate business data from static materials through a dedicated page material configuration JSON file. Specifically, the business server processes user-side dynamic data, while static materials are retrieved through interaction with the client via the aforementioned production equipment, thus achieving hot and cold data separation.
[0185] In summary, the present invention provides a solution for visually configuring H5 page assets and achieving hot and cold data separation. Furthermore, through CDN-based cache optimization, the response rate to user loading requests during actual access is increased, improving the user experience.
[0186] Use the obtained material configuration data to create H5 pages such as Figure 8 As shown, the server, such as the production device in the above embodiment, provides an HTML template to the first client. The first client then obtains material data and renders the HTML template, thereby generating an HTML page. The obtained material data may include two parts: static material, such as the page file (i.e., JS file) obtained in the above embodiment obtained by the first client from the production device; and dynamic data, such as business data obtained by the first client from the business server.
[0187] In one method, the first client can obtain the JS file obtained in the above embodiment from the production equipment, and put the JS file into the resource management system (RMS) data source. At the same time, the business data obtained from the business service end can also be put into the RMS data source. In this way, the client can obtain material data from the RMS data source to render the HTML template, thereby obtaining an HTML page.
[0188] Among them, the process of rendering through the material data obtained above can also be understood as template pre-rendering. Other renderings, such as display effects, can also be performed during the H5 page production process.
[0189] In addition to the above-mentioned CDN distribution function, the backend provided by the embodiment of the present invention (the system where the production equipment and storage equipment are located) can also provide Hubble monitoring, (Venus) logging, distributed messaging system (RocketMQ), hot chat push and other functions.
[0190] Corresponding to the H5 page material providing method in the above embodiment, the embodiment of the present invention further provides an H5 page material providing device, which is applied to a page file production device and a page file storage device, the storage device includes a content distribution network CDN node, the production device includes a generation module, a writing module and a first sending module, and the CDN node includes a cache module and a second sending module. Figure 9 As shown, the device includes:
[0191] Generating module 901, used to generate material configuration data;
[0192] A writing module 902 is used to write the material configuration data into the page file;
[0193] A first sending module 903 is used to send the page file to the CDN node;
[0194] Cache module 904, used to cache page files;
[0195] The second sending module 905 is used to send the target page file corresponding to the target resource bit identifier associated with the target H5 page to the first client in response to receiving the loading request sent by the first client, so that the first client loads the target H5 page based on the target page file, wherein the loading request corresponds to the target resource bit identifier associated with the target H5 page.
[0196] Optionally, the second sending module 905 is specifically used to receive a loading request triggered by the first client when a script tag in the current H5 page is detected, and obtain the page file based on the URL of the page file, and send the page file to the first client, wherein the loading request carries the uniform resource locator URL of the page file specified by the src attribute of the script tag.
[0197] Optionally, the storage device includes a CDN root node and a plurality of CDN child nodes in a hierarchical structure;
[0198] The first sending module 903 is specifically configured to send the generated page file to the CDN root node, so that the multiple CDN child nodes synchronize the page file from the CDN root node.
[0199] Optionally, the first sending module 903 is specifically used to send the generated page file to the target CDN node and record the node identifier and / or node address of the target CDN node, so that when an updated page file with a resource bit identifier corresponding to the page file is subsequently obtained, the updated page file is sent to the target CDN node.
[0200] Optionally, the production equipment further comprises an extraction module;
[0201] The extraction module is used to extract the target field in the material configuration data as the processed material configuration data in response to receiving the publishing request, where the target field represents the field in the material configuration data except the field used only for assisting the operator in configuration.
[0202] Optionally, the writing module 902 is specifically used to convert the target field into JSON data in key-value format; serialize the JSON data in key-value format to obtain the corresponding string, and assign the string corresponding to the JSON data in key-value format to the variable of the window object; write the assigned variable of the window object into the page file, which is a JS file.
[0203] Corresponding to the H5 page material loading method in the above embodiment, the embodiment of the present invention further provides an H5 page material loading device, which is applied to a loading device, wherein a first client is deployed in the loading device. Figure 10 As shown, the device includes:
[0204] The sending module 1001 is configured to, in response to opening a target H5 page, send a load request corresponding to a target resource identifier associated with the target H5 page to a CDN node, so that the CDN node receives the load request and sends a target page file corresponding to the target resource identifier associated with the target H5 page to the first client;
[0205] Receiving module 1002, used for receiving a target page file;
[0206] The loading module 1003 is used to load the target H5 page based on the target page file.
[0207] Optionally, the device further comprises:
[0208] The acquisition module is used to obtain the business data corresponding to the target resource bit identifier from the business server before loading the H5 page based on the target page file;
[0209] The loading module 1003 is specifically used to render the target page file and business data to the corresponding position in the target H5 page, and the corresponding position is the resource position corresponding to the target resource position identifier in the target H5 page.
[0210] Optionally, the sending module 1001 is specifically configured to trigger sending a loading request to a CDN node when a script tag in a target H5 page is detected, wherein the loading request carries the uniform resource locator URL of the page file specified by the src attribute of the script tag.
[0211] Optionally, the sending module 1001 is specifically configured to determine a CDN node that is closest to the loading device, and to send a loading request corresponding to a target resource bit identifier associated with the target H5 page to the CDN node.
[0212] The embodiment of the present invention further provides an electronic device, such as Figure 11 As shown, it includes a processor 1101, a communication interface 1102, a memory 1103 and a communication bus 1104, wherein the processor 1101, the communication interface 1102, and the memory 1103 communicate with each other through the communication bus 1104;
[0213] Memory 1103, used for storing computer programs;
[0214] The processor 1101 is configured to implement the steps of the above-mentioned H5 page material providing method or H5 page material loading method when executing the program stored in the memory 1103 .
[0215] The communication bus mentioned in the terminal can be a Peripheral Component Interconnect (PCI) bus or an Extended Industry Standard Architecture (EISA) bus. This communication bus can be divided into an address bus, a data bus, a control bus, etc. For ease of illustration, only one thick line is used in the figure, but this does not mean that there is only one bus or only one type of bus.
[0216] The communication interface is used for communication between the above terminal and other devices.
[0217] The memory may include random access memory (RAM) or non-volatile memory, such as at least one disk storage. Alternatively, the memory may be at least one storage device located away from the processor.
[0218] The above-mentioned processor can be a general-purpose processor, including a central processing unit (CPU), a network processor (NP), etc.; it can also be a digital signal processor (DSP), an application-specific integrated circuit (ASIC), a field-programmable gate array (FPGA) or other programmable logic devices, discrete gate or transistor logic devices, and discrete hardware components.
[0219] In another embodiment provided by the present invention, a computer-readable storage medium is also provided, in which a computer program is stored. When the computer program is executed by a processor, the H5 page material providing method or H5 page material loading method described in any of the above embodiments is implemented.
[0220] In another embodiment provided by the present invention, a computer program product containing instructions is also provided. When the computer is run on the computer, the computer executes the H5 page material providing method or H5 page material loading method described in any of the above embodiments.
[0221] In the above embodiments, all or part of the embodiments can be implemented by software, hardware, firmware, or any combination thereof. When implemented using software, all or part of the embodiments can be implemented in the form of a computer program product. The computer program product includes one or more computer instructions. When the computer program instructions are loaded and executed on a computer, all or part of the processes or functions described in the embodiments of the present invention are generated. The computer can be a general-purpose computer, a special-purpose computer, a computer network, or other programmable device. The computer instructions can be stored in a computer-readable storage medium or transmitted from one computer-readable storage medium to another computer-readable storage medium. For example, the computer instructions can be transmitted from one website, computer, server, or data center to another website, computer, server, or data center via a wired (e.g., coaxial cable, optical fiber, digital subscriber line (DSL)) or wireless (e.g., infrared, wireless, microwave, etc.) method. The computer-readable storage medium can be any available medium that can be accessed by a computer or a data storage device such as a server or data center that includes one or more available media. The available medium can be a magnetic medium (e.g., a floppy disk, a hard disk, a tape), an optical medium (e.g., a DVD), or a semiconductor medium (e.g., a solid-state drive (SSD)).
[0222] It should be noted that, in this document, relational terms such as first and second, etc., are used only to distinguish one entity or operation from another entity or operation, and do not necessarily require or imply the existence of any such actual relationship or order between these entities or operations. Moreover, the terms "comprises," "comprising," or any other variants thereof are intended to cover non-exclusive inclusion, so that a process, method, article, or device comprising a series of elements includes not only those elements, but also other elements not explicitly listed, or elements inherent to such process, method, article, or device. In the absence of further limitations, an element defined by the phrase "comprising a ..." does not exclude the presence of other identical elements in the process, method, article, or device comprising the element.
[0223] Each embodiment in this specification is described in a related manner. Similar portions between the various embodiments can be referenced to each other. Each embodiment focuses on the differences between the other embodiments. In particular, the system, device, electronic device, computer-readable storage medium, and computer program product embodiments are generally similar to the method embodiments, so their descriptions are relatively simplified. For related portions, reference can be made to the descriptions of the method embodiments.
[0224] The above description is only a preferred embodiment of the present invention and is not intended to limit the scope of protection of the present invention. Any modifications, equivalent replacements, improvements, etc. made within the spirit and principles of the present invention are included in the scope of protection of the present invention.
Claims
1. A method for providing H5 page material, characterized in that: A production device for page files and a storage device for page files, wherein the storage device includes a content distribution network CDN node, including: The production device is used to generate material configuration data, write the material configuration data into a page file, and send the page file to a CDN node; The CDN node is used to cache the page file, and in response to receiving a loading request sent by the first client, sends a target page file corresponding to the target resource bit identifier associated with the target H5 page to the first client, so that the first client loads the target H5 page based on the target page file, wherein the loading request corresponds to the target resource bit identifier associated with the target H5 page.
2. The method according to claim 1, characterized in that In response to receiving the loading request sent by the first client, the CDN node sends a target page file corresponding to the target resource bit identifier associated with the target H5 page to the first client, including: The CDN node is used to receive a loading request triggered by the first client when a script tag in the current H5 page is detected, obtain the page file based on the URL of the page file, and send the page file to the first client, wherein the loading request carries the uniform resource locator URL of the page file specified by the src attribute of the script tag.
3. The method according to claim 1, characterized in that The storage device includes a CDN root node and a plurality of CDN sub-nodes having a hierarchical structure; The production device is used to send the generated page file to the CDN root node, so that multiple CDN child nodes synchronize the page file from the CDN root node.
4. The method according to claim 1, characterized in that The production device is used to send the generated page file to the target CDN node and record the node identifier and / or node address of the target CDN node, so that when an updated page file with a resource bit identifier corresponding to the page file is obtained later, the updated page file can be sent to the target CDN node.
5. The method according to claim 1, characterized in that The production device is used to extract the target field in the material configuration data as the processed material configuration data in response to receiving the publishing request, and the target field represents the field in the material configuration data except the field used only for assisting the operator configuration.
6. The method according to claim 5, characterized in that The production device writes the generated material configuration data into a page file, including: The production device is used to convert the target field into JSON data in key-value format; serialize the JSON data in key-value format to obtain a corresponding string, and assign the string corresponding to the JSON data in key-value format to a variable of the window object; write the assigned variable of the window object into a page file, which is a JS file.
7. A method for loading H5 page material, characterized in that: Applied to a loading device, wherein a first client is deployed in the loading device, including: In response to opening the target H5 page, sending a loading request corresponding to the target resource position identifier associated with the target H5 page to the CDN node, so that the CDN node receives the loading request and sends a target page file corresponding to the target resource position identifier associated with the target H5 page to the first client; Receiving the target page file; The target H5 page is loaded based on the target page file.
8. The method according to claim 7, characterized in that Before loading the H5 page based on the target page file, the method further includes: Obtain the business data corresponding to the target resource bit identifier from the business server; The loading of the target H5 page based on the target page file includes: The target page file and the business data are rendered to corresponding positions in the target H5 page, where the corresponding position is a resource position in the target H5 page corresponding to the target resource position identifier.
9. The method according to claim 7, characterized in that: The step of sending a loading request corresponding to a target resource bit identifier associated with a target H5 page to a CDN node includes: When a script tag in the target H5 page is detected, a loading request is triggered to be sent to the CDN node, and the loading request carries the uniform resource locator URL of the page file specified by the src attribute of the script tag.
10. The method according to claim 7, characterized in that The step of sending a loading request corresponding to a target resource bit identifier associated with a target H5 page to a CDN node includes: Determine the CDN node closest to the loading device, and send a loading request corresponding to the target resource bit identifier associated with the target H5 page to the CDN node.
11. An H5 page material loading system, characterized in that: include: A page file production device, a page file storage device, and a loading device deployed with a first client, wherein the storage device includes a content delivery network CDN node; The production device is used to generate material configuration data, write the generated material configuration data into a page file, and send the page file to a CDN node; The CDN node is used to cache the page file; The first client is used for sending a loading request corresponding to the target resource bit identifier associated with the target H5 page to the CDN node in response to opening the target H5 page; The CDN node is further configured to receive a loading request sent by a first client, and send a target page file corresponding to a target resource bit identifier associated with a target H5 page to the first client; The first client is also used to load the target H5 page based on the target page file.
12. An H5 page material configuration system, characterized in that: include: A configuration device of a second client, a page file production device and a page file storage device are deployed, wherein the storage device includes a content delivery network CDN node; The second client is used to display at least one material, and the at least one material is a material corresponding to the H5 page; For each material, in response to receiving a configuration request for the material, displaying an editing page, the editing page including a material configuration editor; receiving a configuration operation on the material through the material configuration editor, the configuration operation being used to determine material configuration data for the material; The production device is used to obtain the material configuration data, write the generated material configuration data into a page file, and send the page file to a CDN node; The CDN node is used to cache the page file, and in response to receiving a loading request sent by the first client, sends a target page file corresponding to the target resource bit identifier associated with the target H5 page to the first client, so that the first client loads the target H5 page based on the target page file, wherein the loading request corresponds to the target resource bit identifier associated with the target H5 page.
13. An H5 page material providing device, characterized in that: A production device for page files and a storage device for page files, the storage device comprising a content distribution network CDN node, the production device comprising a generation module, a writing module and a first sending module, the CDN node comprising a cache module and a second sending module, the apparatus comprising: The generating module is used to generate material configuration data; The writing module is used to write the material configuration data into the page file; The first sending module is used to send the page file to the CDN node; The cache module is used to cache the page file; The second sending module is used to send a target page file corresponding to a target resource bit identifier associated with a target H5 page to the first client in response to receiving a loading request sent by the first client, so that the first client loads the target H5 page based on the target page file, wherein the loading request corresponds to the target resource bit identifier associated with the target H5 page.
14. An H5 page material loading device, characterized in that: Applied to a loading device, wherein a first client is deployed in the loading device, including: A sending module, configured to send a loading request corresponding to a target resource position identifier associated with the target H5 page to a CDN node in response to opening the target H5 page, so that the CDN node receives the loading request and sends a target page file corresponding to the target resource position identifier associated with the target H5 page to the first client; A receiving module, used for receiving the target page file; A loading module is used to load the target H5 page based on the target page file.
15. An electronic device, characterized in that: It includes a processor, a communication interface, a memory and a communication bus, wherein the processor, the communication interface and the memory communicate with each other through the communication bus; Memory, used to store computer programs; A processor, for implementing the method steps described in any one of claims 1 to 10 when executing a program stored in a memory.
16. A computer-readable storage medium, characterized in that: The computer-readable storage medium stores a computer program, and when the computer program is executed by a processor, the method steps described in any one of claims 1 to 10 are implemented.
Citation Information
Patent Citations
Method, system and equipment based on contents provided by peer-to-peer storage network
CN101610162A
Method and device for loading webpage in browser
CN104063460A
H5 page loading method and system
CN108132991A
Electronic device, terminal page loading method and storage medium
CN108763525A
Page display method and device, equipment and readable storage medium
CN110096659A
