Page rendering method, device, system, storage medium and electronic device

Abstract

The embodiment of the present invention relates to a page rendering method, device, system, storage medium and electronic device, and relates to the field of computer technology. The method includes: sending a hypertext transfer protocol request corresponding to a page to be rendered to a backend, and receiving a hypertext markup language file sent by the backend in response to the hypertext transfer protocol request; parsing the hypertext markup language file to obtain page data corresponding to the page to be rendered and a storage address of an entry file; loading a script file of the entry file according to the storage address, and running the script file of the entry file to obtain identification information of a module required for rendering the page to be rendered; loading a script file of the module according to the identification information of the module, and completing the rendering of the page to be rendered according to the script file of the module and the page data, and displaying the rendered page. The embodiment of the present invention improves the rendering efficiency of the page.

Description

Background Art

[0002] In the existing page rendering method, all modules need to be loaded. For example, there are 10 modules in total. Depending on different situations, the page may display 2 or 5 of the 10 modules, or the same module may be displayed 2 or 3 times. When the modules need to be loaded, all modules can be packaged into a script file, and all modules are loaded at once when the page is loaded, and then the display of the modules is controlled according to the data.

[0003] However, the above solution has the following defects: since all modules need to be loaded at one time, there will be a lot of redundant code, which will lead to low rendering efficiency.

[0004] Therefore, it is necessary to provide a new page rendering method and device.

[0005] It should be noted that the information disclosed in the above background technology section is only used to enhance the understanding of the background of the present invention, and therefore may include information that does not constitute prior art known to ordinary technicians in the field. Summary of the invention

[0006] The purpose of the present invention is to provide a page rendering method, a page rendering device, a page rendering system, a computer-readable storage medium and an electronic device, thereby at least to a certain extent overcoming the problem of low page rendering efficiency caused by the limitations and defects of related technologies.

[0007] According to one aspect of the present disclosure, a page rendering method is provided, which is applied to a browser, and the page rendering method includes:

[0008] Sending a hypertext transfer protocol request corresponding to the page to be rendered to a backend, and receiving a hypertext markup language file sent by the backend in response to the hypertext transfer protocol request;

[0009] Parsing the hypertext markup language file to obtain page data corresponding to the page to be rendered and a storage address of an entry file;

[0010] Loading the script file of the entry file according to the storage address, and running the script file of the entry file to obtain identification information of the module required for rendering the page to be rendered;

[0011] The script file of the module is loaded according to the identification information of the module, and the rendering of the page to be rendered is completed according to the script file of the module and the page data, and the rendered page is displayed.

[0012] In an exemplary embodiment of the present disclosure, the page rendering method further includes:

[0013] Based on a preset packaging tool, the module codes and entry files are packaged to generate code blocks of each module, script files of the entry files, version numbers of each module and version numbers of the entry files;

[0014] Storing the code block and the script file of the entry file in a content distribution network;

[0015] The version number of the entry file is stored in the configuration center, so that after receiving the hypertext transfer protocol request, the back end loads the version number from the configuration center and writes the storage address of the entry file generated according to the version number into the hypertext markup language file.

[0016] In an exemplary embodiment of the present disclosure, each of the code blocks corresponds to a script file of the module;

[0017] The version number of the entry file corresponds one-to-one to the version number of each module.

[0018] In an exemplary embodiment of the present disclosure, loading the script file of the module according to the identification information of the module, and completing the rendering of the to-be-rendered page according to the script file of the module and the page data includes:

[0019] obtaining a script file of the module from the content distribution network according to the identification information of the module;

[0020] The script file of the module is run, and the page data is loaded to complete the rendering of the page to be rendered.

[0021] In an exemplary embodiment of the present disclosure, the page rendering method further includes:

[0022] When a change in the version number is detected, the changed version number is stored in the configuration center.

[0023] According to one aspect of the present disclosure, a page rendering method is provided, which is applied to a backend, and the page rendering method includes:

[0024] Receiving a hypertext transfer protocol request corresponding to the page to be rendered sent by the browser, and obtaining a version number of the entry file from the configuration center in response to the hypertext transfer protocol request;

[0025] Generate a storage address of the entry file according to the version number, and write the storage address and page data corresponding to the page to be rendered into a hypertext markup language to obtain a hypertext markup language file;

[0026] The hypertext markup language file is sent to the browser, so that the browser parses the hypertext markup language file to obtain the identification information of the module required for the page to be rendered, and loads the script file of the module according to the identification information, and then completes the rendering of the page to be rendered according to the script file of the module and the page data.

[0027] According to one aspect of the present disclosure, a page rendering device is provided, which is applied to a browser, and the page rendering device includes:

[0028] A file receiving module, used for sending a hypertext transfer protocol request corresponding to the page to be rendered to the backend, and receiving a hypertext markup language file sent by the backend in response to the hypertext transfer protocol request;

[0029] A file parsing module, used to parse the hypertext markup language file to obtain page data corresponding to the page to be rendered and a storage address of an entry file;

[0030] A file loading module, used to load the script file of the entry file according to the storage address, and run the script file of the entry file to obtain the identification information of the module required for rendering the page to be rendered;

[0031] The page rendering module is used to load the script file of the module according to the identification information of the module, complete the rendering of the page to be rendered according to the script file of the module and the page data, and display the rendered page.

[0032] According to one aspect of the present disclosure, a page rendering system is provided, comprising:

[0033] Configuration center, used to store the version number of the entry file;

[0034] Content distribution network, used to store script files of modules and script files of entry files;

[0035] A backend, connected to the configuration center network, configured to receive a hypertext transfer protocol request corresponding to the page to be rendered sent by the browser, and obtain a version number of the entry file from the configuration center in response to the hypertext transfer protocol request; and

[0036] Generate a storage address of the entry file according to the version number, and write the storage address and page data corresponding to the page to be rendered into a hypertext markup language to obtain a hypertext markup language file; and then send the hypertext markup language file to the browser;

[0037] The browser is connected to the configuration center, the content distribution network and the backend network, respectively, and is used to implement any of the page rendering methods described above.

[0038] According to one aspect of the present disclosure, a computer-readable storage medium is provided, on which a computer program is stored. When the computer program is executed by a processor, the page rendering method described in any one of the above is implemented.

[0039] According to one aspect of the present disclosure, there is provided an electronic device, including:

[0040] Processor; and

[0041] A memory, configured to store executable instructions of the processor;

[0042] Wherein, the processor is configured to execute any one of the above-mentioned page rendering methods by executing the executable instructions.

[0043] A page rendering method provided by an embodiment of the present invention includes, on the one hand, sending a hypertext transfer protocol request corresponding to a page to be rendered to a back end, and receiving a hypertext markup language file sent by the back end in response to the hypertext transfer protocol request; then parsing the hypertext markup language file to obtain page data corresponding to the page to be rendered and a storage address of an entry file; then loading a script file of the entry file according to the storage address, and running the script file of the entry file to obtain identification information of a module required for rendering the page to be rendered; finally, loading the script file of the module according to the identification information of the module, and completing the rendering of the page to be rendered according to the script file of the module and the page data, and displaying the rendered page, thereby solving the problem in the prior art that all modules need to be loaded at one time, which results in a lot of redundant codes and thus low rendering efficiency, and improving the rendering efficiency of the page; on the other hand, since only the script file of the module required for the page to be rendered needs to be loaded, the loading efficiency of the script file is improved; on the other hand, by running the script file of the entry file, the identification information of the module required for rendering the page to be rendered is obtained, and then the corresponding script file can be loaded according to the identification information, thereby improving the accuracy of the loaded script file, thereby improving the accuracy of the rendering of the page to be rendered, and improving the user experience.

[0044] It is to be understood that both the foregoing general description and the following detailed description are exemplary and explanatory only and are not restrictive of the invention. BRIEF DESCRIPTION OF THE DRAWINGS

[0045] The accompanying drawings herein are incorporated into and constitute a part of the specification, illustrate embodiments consistent with the present invention, and together with the specification are used to explain the principles of the present invention. Obviously, the accompanying drawings described below are only some embodiments of the present invention, and for those of ordinary skill in the art, other accompanying drawings can be obtained based on these accompanying drawings without creative work.

[0046] Figure 1 A flow chart of a page rendering method according to an exemplary embodiment of the present invention is schematically shown.

[0047] Figure 2 A block diagram of a page rendering system according to an exemplary embodiment of the present invention is schematically shown.

[0048] Figure 3 A flowchart of another page rendering method according to an exemplary embodiment of the present invention is schematically shown.

[0049] Figure 4 A flowchart of another page rendering method according to an exemplary embodiment of the present invention is schematically shown.

[0050] Figure 5 A flowchart of another page rendering method according to an exemplary embodiment of the present invention is schematically shown.

[0051] Figure 6 A block diagram of a page rendering device according to an exemplary embodiment of the present invention is schematically shown.

[0052] Figure 7 A block diagram schematically shows another page rendering device according to an exemplary embodiment of the present invention.

[0053] Figure 8 An electronic device for implementing the above-mentioned page rendering method according to an exemplary embodiment of the present invention is schematically shown. DETAILED DESCRIPTION

[0054] Example embodiments will now be described more fully with reference to the accompanying drawings. However, example embodiments can be implemented in a variety of forms and should not be construed as being limited to the examples set forth herein; on the contrary, these embodiments are provided so that the present invention will be more comprehensive and complete, and the concept of the example embodiments will be fully conveyed to those skilled in the art. The described features, structures, or characteristics may be combined in one or more embodiments in any suitable manner. In the following description, many specific details are provided to provide a full understanding of the embodiments of the present invention. However, those skilled in the art will appreciate that the technical solutions of the present invention may be practiced while omitting one or more of the specific details, or other methods, components, devices, steps, etc. may be adopted. In other cases, known technical solutions are not shown or described in detail to avoid obscuring various aspects of the present invention.

[0055] In addition, the accompanying drawings are only schematic illustrations of the present invention and are not necessarily drawn to scale. The same reference numerals in the figures represent the same or similar parts, and their repeated description will be omitted. Some of the block diagrams shown in the accompanying drawings are functional entities and do not necessarily correspond to physically or logically independent entities. These functional entities can be implemented in software form, or implemented in one or more hardware modules or integrated circuits, or implemented in different networks and / or processor devices and / or microcontroller devices.

[0056] Assume that there are 10 modules in total. Depending on the situation, the page may display 2 or 5 of the 10 modules, or the same module may be displayed 2 or 3 times.

[0057] If all modules are packaged into a JS (JavaScript) file, all modules are loaded at once when the page is loaded, and the display of the modules is controlled according to the data. This will cause the following problems: on the one hand, there is a lot of redundant code, and the user has to wait a long time for loading; on the other hand, if one of the modules is modified, the entire code needs to be reloaded, which does not maximize the code cache utilization.

[0058] If the front end writes each module into a JS file, there are two loading methods:

[0059] One is front-end loading: after the user receives HTML, the front-end code obtains the module information returned by the back-end, and then inserts the script tag into the HTML through the js code to load the JS file of the corresponding module. At this time, there are two modes: modules with version numbers and modules without version numbers. There will be the following problems: when there is no version number, there will be cache problems after the code is updated, and users cannot update to the new code in time; when there is a version number, developers need to manually maintain the version number, and the module needs to be modified manually, which will greatly reduce the modification efficiency and accuracy.

[0060] One is backend loading: when the backend receives the user's HTML request, it inserts the required JS into HTML according to the module to be displayed configured by the backend system and returns it to the user. The user's browser parses and renders the HTML to display the page to the user. This will cause the following problems: if the frontend modifies the module, each time the version number is released, it needs to communicate with the backend, and the backend will modify the version number or code, which will make the modification efficiency low.

[0061] Based on this, this exemplary embodiment first provides a page rendering method, which is applied to the browser side. Of course, those skilled in the art can also run the method of the present invention on other platforms according to needs, and this exemplary embodiment does not specifically limit this. Figure 1 As shown, the page rendering method may include the following steps:

[0062] Step S110: Send a hypertext transfer protocol request corresponding to the page to be rendered to the backend, and receive a hypertext markup language file sent by the backend in response to the hypertext transfer protocol request.

[0063] Step S120: Parse the hypertext markup language file to obtain page data corresponding to the page to be rendered and the storage address of the entry file.

[0064] Step S130: Load the script file of the entry file according to the storage address, and run the script file of the entry file to obtain the identification information of the module required for rendering the page to be rendered.

[0065] Step S140: Load the script file of the module according to the identification information of the module, complete the rendering of the page to be rendered according to the script file of the module and the page data, and display the rendered page.

[0066] In the above page rendering method, on the one hand, a hypertext transfer protocol request corresponding to the page to be rendered is sent to the back end, and a hypertext markup language file sent by the back end in response to the hypertext transfer protocol request is received; then the hypertext markup language file is parsed to obtain the page data corresponding to the page to be rendered and the storage address of the entry file; then the script file of the entry file is loaded according to the storage address, and the script file of the entry file is run to obtain the identification information of the module required for rendering the page to be rendered; finally, the script file of the module is loaded according to the identification information of the module, and the rendering of the page to be rendered is completed according to the script file of the module and the page data, and the rendered page is displayed, which solves the problem that all modules need to be loaded at one time in the prior art, which results in a lot of redundant codes and thus low rendering efficiency, and improves the rendering efficiency of the page; on the other hand, since only the script file of the module required for the page to be rendered needs to be loaded, the loading efficiency of the script file is improved; on the other hand, by running the script file of the entry file, the identification information of the module required for rendering the page to be rendered is obtained, and then the corresponding script file can be loaded according to the identification information, which improves the accuracy of the loaded script file, thereby improving the accuracy of the rendering of the page to be rendered and improving the user experience.

[0067] Hereinafter, the steps involved in the page rendering method according to the exemplary embodiment of the present invention will be explained and illustrated in detail with reference to the accompanying drawings.

[0068] First, the terms involved in the exemplary embodiments of the present invention are explained as follows.

[0069] HTTP: HyperText Transfer Protocol is a simple request-response protocol that usually runs on top of TCP; it specifies what messages a client may send to a server and what responses it may get.

[0070] HTML: Hyper Text Markup Language, Hypertext Markup Language file, in which HTML text is a descriptive text composed of HTML commands. HTML commands can describe text, graphics, animation, sound, table, link, etc.

[0071] CDN, Content Delivery Network, relies on edge servers deployed in various places. Through the load balancing, content distribution, scheduling and other functional modules of the central platform, users can load the required content nearby, reduce network congestion, and improve user access response speed and hit rate.

[0072] Next, the page rendering system involved in the exemplary embodiment of the present invention is explained and illustrated. Figure 2 As shown, the page rendering system may include a browser 210, a backend 220, a configuration center 230, and a content distribution network 240. Among them:

[0073] The configuration center 230 may be used to store the version number of the entry file;

[0074] Content distribution network 240, which can be used to store script files of modules and script files of entry files;

[0075] The back end 220 is connected to the configuration center network, and is used to receive a hypertext transfer protocol request corresponding to the page to be rendered sent by the browser, and obtain the version number of the entry file from the configuration center in response to the hypertext transfer protocol request; and generate a storage address of the entry file according to the version number, and write the storage address and the page data corresponding to the page to be rendered into the hypertext markup language to obtain a hypertext markup language file; and then send the hypertext markup language file to the browser; wherein the back end is the back end server.

[0076] The browser 210 is connected to the configuration center, the content distribution network and the backend network, respectively, and is used to implement the page rendering method described in the exemplary embodiment of the present invention. The browser is a page browser displayed on the front end of the WEB.

[0077] Specifically, when the backend receives the HTTP request sent by the browser, it obtains the latest version number of the entry file from the configuration center and the page data from the database of the backend, then generates the address of the entry file in the configuration center according to the version number of the entry file, writes the address and the page data into the HTML, and then returns the HTML to the browser; after the browser receives the HTML, it parses the HTML code to obtain the storage address of the entry file, and loads the script file of the entry file from the content distribution network according to the storage address, and loads and registers the corresponding module in combination with the data of the identification module returned by the backend in the HTML. The specific loading process may include: inserting a script tag and a script address into the HTML, and then loading the address file from the network; then, running the script file of the module to complete the rendering.

[0078] Among them, part of the content in the script file (entry.js) of the entry file can be as follows:

[0079] let arr1=data.map(item>={

[0080] let temp=item.id.split('-');

[0081] return inport('. / views / ${temp[0]} / ${item.id} / index.vue');

[0082] });

[0083] Promise.all(arr1)

[0084] .then(res=>{

[0085] Let com={};

[0086] Let info={};

[0087] Data.forEach((item,index)=>{

[0088] com[JSON.stringify('${item.sn}')]=res[index].default;

[0089] window[item.id]=data[index].data;

[0090] info[JSON.stringify('${item.sn}')]=data[index].data;

[0091] });

[0092] For(const key in com){

[0093] If(com.has0wnProperty(key)){

[0094] Vue(com.has0wnProperty(key)){

[0095] Vue.component(key,com[key]);

[0096] }

[0097] }

[0098] This.arr=com;

[0099] This.dataInfo=info;

[0100] })

[0101] .catch(()=>{});

[0102] It should be noted here that by running the above code and combining the data of the identification module returned by the backend in HTML, the loading and registration of the corresponding module is completed, thus avoiding the problems of code redundancy and low loading efficiency caused by the need to load all script files in the prior art.

[0103] In the following, steps S110 to S140 are explained and illustrated in combination with the above page rendering system.

[0104] In step S110, a hypertext transfer protocol request corresponding to the page to be rendered is sent to a backend, and a hypertext markup language file sent by the backend in response to the hypertext transfer protocol request is received.

[0105] In this example embodiment, first, when the user enters the page address of a certain page in the browser 210, the browser will send an HTTP request (Hypertext Transfer Protocol request) to the backend 220 (backend server). After the backend server receives the HTTP request, it obtains the latest updated version number of the entry file from the configuration center, and then generates a storage path for the entry file based on the version number; wherein, assuming that the latest updated version number of the entry file is: abc123, the generated storage path is: / / xxx / xxx / abc123.js; wherein / / xxx / xxx / is the storage address of the script file of the entry file in the content distribution network; further, the backend also needs to load the corresponding page data from the database according to the URL of the page to be rendered, and then write the page data and the storage address into HTML to generate the above-mentioned hypertext markup language file, and then send the hypertext markup language file to the browser.

[0106] In step S120, the hypertext markup language file is parsed to obtain page data corresponding to the page to be rendered and a storage address of an entry file.

[0107] In this example embodiment, after the browser receives the above-mentioned hypertext markup language file, it can parse the code of the hypertext markup language file to obtain the page data and the storage address of the entry file in the content distribution network. It should be supplemented here that the page data is stored in the database of the backend system corresponding to the backend server for each page to be rendered, and the backend only needs to load the corresponding page data and the version number of the entry file, and does not need to load the script file of the required module, thus greatly reducing the pressure on the backend server.

[0108] In step S130, the script file of the entry file is loaded according to the storage address, and the script file of the entry file is executed to obtain the identification information of the module required for rendering the page to be rendered.

[0109] In this example embodiment, after obtaining the specific storage address, the script file of the entry file can be loaded from the content distribution network according to the storage address; then the script file is run, and the corresponding module is loaded and registered in combination with the data of the identification module returned by the back end in HTML. The specific loading process may include: inserting a script tag and a script address into HTML, and then loading the address file from the network. The obtained module identification information may be as follows:

[0110]

[0111]

[0112] Through the above method, the corresponding script file can be loaded from the content distribution network according to the module identifier required by the page to be rendered, and it is not necessary to load all the script files, thereby minimizing the loading of script files required by an indefinite number and indefinite type of modules, improving the loading speed, and thus improving the rendering speed of the page.

[0113] In step S140, the script file of the module is loaded according to the identification information of the module, and the rendering of the page to be rendered is completed according to the script file of the module and the page data, and the rendered page is displayed.

[0114] In this example embodiment, first, the script file of the module in the content distribution network is obtained according to the identification information of the module; secondly, the script file of the module is run and the page data is loaded to complete the rendering of the page to be rendered; finally, the rendered page is displayed.

[0115] Figure 3 Another page rendering method according to an exemplary embodiment of the present invention is schematically shown. Figure 3 As shown, the page rendering method may further include steps S310 to S330. Among them:

[0116] In step S310, the codes and entry files of the modules are packaged based on a preset packaging tool to generate code blocks of each module, script files of the entry files, version numbers of each module and version numbers of the entry files.

[0117] In step S320, the code block and the script file of the entry file are stored in a content distribution network.

[0118] In step S330, the version number of the entry file is stored in the configuration center, so that after receiving the hypertext transfer protocol request, the back end loads the version number from the configuration center and writes the storage address of the entry file generated according to the version number into the hypertext markup language file.

[0119] Below, step S310-step S330 will be explained and illustrated. First, the module code and entry file can be packaged based on a preset packaging tool to generate code blocks (Chunk) of each code and the script file of the entry file, so that each module generates an independent component; at the same time, it is also necessary to automatically generate the version number of each code block and the version number of the entry file, and the version number of the entry file corresponds to the version number of each module; wherein, the preset packaging tool can be, for example, a webpack packaging tool, and each code block corresponds to a script file (JS file) of a module; then, the code block and the script file of the entry file are stored in the content distribution network (CDN), specifically, the script file uploaded to the CDN can be, for example: module-1.hash.js, module-2.hash.js and module-3.hash.js, etc.; further, the version number of the entry file is stored in the configuration center, so that the back end obtains the version number from the configuration center after receiving the hypertext transfer protocol request, and writes the storage address of the entry file generated according to the version number into the hypertext markup language file. At the same time, a storage address of the entry file is generated according to the version number of the entry file, and the entry file is stored in the content distribution network according to the storage address.

[0120] Through the above method, the browser and the backend can be decoupled. The browser only needs to obtain the version number of the entry file and the page data from the backend, and does not need to write the module's script file into HTML.

[0121] Furthermore, in order to increase readability, you can use webpackChunkName in the configuration route to set the name of the chunk after packaging, and use the splitChunks property of webpack4 to split the chunks. Specifically, you can use the following code to add module names to the chunk file in the router:

[0122] const module_1=()=>inport( / =webpackChunkName:"module-1"* / '@ / views / module / module-1 / index.vue');

[0123] const module_2=()=>inport( / =webpackChunkName:"module-2"* / '@ / views / module / module-2 / index.vue');

[0124] const module_3=()=>inport( / =webpackChunkName:"module-3"* / '@ / views / module / module-3 / index.vue');

[0125] It should be noted here that the above module naming is only a partial example and does not have any effect on limiting the number of modules.

[0126] Furthermore, the page rendering method also includes: when detecting that the version number has changed, storing the changed version number in the configuration center. This method can solve the problem of cumbersome modification process caused by the need to communicate with the backend each time a new version is released after the frontend modifies the module in the traditional way, and the backend modifies the version number or code, and the frontend of this solution only needs to maintain the version number of the entry file in the configuration center to achieve the online and rollback of all modules. The version number of the module is maintained by engineering tools, which greatly reduces the frontend maintenance cost and test verification cost.

[0127] Figure 4 Another page rendering method according to an exemplary embodiment of the present invention is schematically shown, and the page rendering method can be used in a backend, that is, a backend server. Figure 4 As shown, the page rendering method may further include steps S410 to S430. Among them:

[0128] In step S410, a hypertext transfer protocol request corresponding to the page to be rendered is received from the browser, and a version number of an entry file is obtained from a configuration center in response to the hypertext transfer protocol request.

[0129] In step S420, a storage address of the entry file is generated according to the version number, and the storage address and page data corresponding to the page to be rendered are written into a hypertext markup language to obtain a hypertext markup language file.

[0130] In step S430, the hypertext markup language file is sent to the browser, so that the browser parses the hypertext markup language file to obtain the identification information of the module required for the page to be rendered, and loads the script file of the module according to the identification information, and then completes the rendering of the page to be rendered according to the script file of the module and the page data.

[0131] Figure 4 In the example embodiment schematically shown, on the one hand, it solves the problem that when there is no version number, there will be caching problems after the code is updated, and the user cannot update to the new code in time; on the other hand, it solves the problem that when there is a version number, the developer needs to manually maintain the version number, and the modification module needs to be manually modified, which will greatly reduce the modification efficiency and accuracy; on the other hand, it solves the problem that if the front end modifies the module, it needs to communicate with the back end after each version number is released, and the back end will modify the version number or code, which will make the modification efficiency low.

[0132] Figure 5 Another page rendering method according to an exemplary embodiment of the present invention is schematically shown. Figure 5 As shown, the page rendering method may include the following steps:

[0133] Step S510, using engineering tools to package each module and the main file, and uploading the packaged JS to the CDN;

[0134] Step S520, placing the version number of the entry file entry.js in the configuration center;

[0135] Step S530: When the user requests HTML, the backend requests the configuration center to obtain the version number of the entry file entry.js, and inserts the JS file with the version number into the HTML;

[0136] In step S540, the backend returns the concatenated HTML and the corresponding data to the browser. The browser runs JS, introduces the corresponding module JS as needed according to the ID of the required module in the data, and renders the page.

[0137] The page rendering method provided by the exemplary embodiment of the present invention has at least the following advantages:

[0138] On the one hand, users can load any number and type of modules through configuration. The system will automatically load the JS of the required modules according to the configured data, and only load these modules, ensuring the minimization of code and no redundant requests;

[0139] On the other hand, this method can utilize the characteristics of engineering tools and dynamic components to realize on-demand loading and automatic maintenance of JS version numbers. When displaying on the web page, the code for loading an indefinite number and type of modules is minimized, and the configuration center is added to achieve decoupling of the front and back ends, which greatly saves costs in development work such as module addition and modification, as well as module maintenance.

[0140] The exemplary embodiment of the present invention also provides a page rendering device, which is applied to a browser. Figure 6 As shown, the page rendering device may include a file receiving module 610, a file parsing module 620, a file loading module 630 and a page rendering module 640. Among them:

[0141] The file receiving module 610 may be configured to send a hypertext transfer protocol request corresponding to the page to be rendered to the backend, and receive a hypertext markup language file sent by the backend in response to the hypertext transfer protocol request.

[0142] The file parsing module 620 may be used to parse the hypertext markup language file to obtain page data corresponding to the page to be rendered and a storage address of an entry file.

[0143] The file loading module 630 may be used to load the script file of the entry file according to the storage address, and run the script file of the entry file to obtain identification information of the module required for rendering the page to be rendered.

[0144] The page rendering module 640 can be used to load the script file of the module according to the identification information of the module, complete the rendering of the page to be rendered according to the script file of the module and the page data, and display the rendered page.

[0145] In an exemplary embodiment of the present disclosure, the page rendering device further includes:

[0146] The packaging module can be used to package the module code and entry file based on a preset packaging tool to generate the code block of each module, the script file of the entry file, the version number of each module and the version number of the entry file;

[0147] A first storage module may be used to store the code block and the script file of the entry file in a content distribution network;

[0148] The second storage module can be used to store the version number of the entry file in the configuration center, so that after receiving the hypertext transfer protocol request, the back end loads the version number from the configuration center and writes the storage address of the entry file generated according to the version number into the hypertext markup language file.

[0149] In an exemplary embodiment of the present disclosure, each of the code blocks corresponds to a script file of the module;

[0150] The version number of the entry file corresponds one-to-one to the version number of each module.

[0151] In an exemplary embodiment of the present disclosure, loading the script file of the module according to the identification information of the module, and completing the rendering of the to-be-rendered page according to the script file of the module and the page data includes:

[0152] obtaining a script file of the module from the content distribution network according to the identification information of the module;

[0153] The script file of the module is run, and the page data is loaded to complete the rendering of the page to be rendered.

[0154] In an exemplary embodiment of the present disclosure, the page rendering device may further include:

[0155] The second version number storage module can be used to store the changed version number in the configuration center when a change in the version number is detected.

[0156] The exemplary embodiment of the present invention also provides another page rendering device, which is applied to the backend. Figure 7 As shown, the page rendering device may include a version number acquisition module 710, a data writing module 720 and a file sending module 730. Among them:

[0157] The version number acquisition module 710 may be used to receive a hypertext transfer protocol request corresponding to a page to be rendered sent by a browser, and obtain a version number of an entry file from a configuration center in response to the hypertext transfer protocol request;

[0158] The data writing module 720 may be used to generate a storage address of the entry file according to the version number, and write the storage address and the page data corresponding to the page to be rendered into a hypertext markup language to obtain a hypertext markup language file;

[0159] The file sending module 730 can be used to send the hypertext markup language file to the browser, so that the browser parses the hypertext markup language file to obtain the identification information of the module required for the page to be rendered, and loads the script file of the module according to the identification information, and then completes the rendering of the page to be rendered according to the script file of the module and the page data.

[0160] The specific details of each module in the above-mentioned page rendering device have been described in detail in the corresponding page rendering method, so they will not be repeated here.

[0161] It should be noted that, although several modules or units of the equipment for action execution are mentioned in the above detailed description, this division is not mandatory. In fact, according to an embodiment of the present invention, the features and functions of two or more modules or units described above can be embodied in one module or unit. On the contrary, the features and functions of one module or unit described above can be further divided into being embodied by multiple modules or units.

[0162] In addition, although the steps of the method of the present invention are described in a specific order in the drawings, this does not require or imply that the steps must be performed in this specific order, or that all the steps shown must be performed to achieve the desired results. Additionally or alternatively, some steps may be omitted, multiple steps may be combined into one step, and / or one step may be decomposed into multiple steps, etc.

[0163] In an exemplary embodiment of the present invention, an electronic device capable of implementing the above method is also provided.

[0164] It will be appreciated by those skilled in the art that various aspects of the present invention may be implemented as a system, method or program product. Therefore, various aspects of the present invention may be specifically implemented in the following forms, namely: a complete hardware implementation, a complete software implementation (including firmware, microcode, etc.), or a combination of hardware and software, which may be collectively referred to herein as a "circuit", "module" or "system".

[0165] Refer to the following Figure 8 An electronic device 800 according to this embodiment of the present invention will be described. Figure 8 The electronic device 800 shown is only an example and should not bring any limitation to the functions and scope of use of the embodiments of the present invention.

[0166] like Figure 8 As shown, the electronic device 800 is in the form of a general computing device. The components of the electronic device 800 may include, but are not limited to: the at least one processing unit 810, the at least one storage unit 820, a bus 830 connecting different system components (including the storage unit 820 and the processing unit 810), and a display unit 840.

[0167] The storage unit stores program codes, which can be executed by the processing unit 810, so that the processing unit 810 performs the steps according to various exemplary embodiments of the present invention described in the above “Exemplary Method” section of this specification. For example, the processing unit 810 can perform the following steps: Figure 1 The step S110 shown in the figure is as follows: sending a hypertext transfer protocol request corresponding to the page to be rendered to the back end, and receiving a hypertext markup language file sent by the back end in response to the hypertext transfer protocol request; step S120: parsing the hypertext markup language file to obtain page data corresponding to the page to be rendered and a storage address of an entry file; step S130: loading a script file of the entry file according to the storage address, and running the script file of the entry file to obtain identification information of a module required for rendering the page to be rendered; step S140: loading the script file of the module according to the identification information of the module, and completing the rendering of the page to be rendered according to the script file of the module and the page data, and displaying the rendered page.

[0168] The processing unit 810 may also perform the following steps: Figure 4 The step S410 shown in the figure is: receiving a hypertext transfer protocol request corresponding to the page to be rendered sent by the browser, and obtaining the version number of the entry file from the configuration center in response to the hypertext transfer protocol request; step S420: generating a storage address of the entry file according to the version number, and writing the storage address and the page data corresponding to the page to be rendered into the hypertext markup language to obtain a hypertext markup language file; step S430: sending the hypertext markup language file to the browser, so that the browser parses the hypertext markup language file to obtain the identification information of the module required for the page to be rendered, and loads the script file of the module according to the identification information, and then completes the rendering of the page to be rendered according to the script file of the module and the page data.

[0169] The storage unit 820 may include a readable medium in the form of a volatile storage unit, such as a random access memory unit (RAM) 8201 and / or a cache memory unit 8202 , and may further include a read-only memory unit (ROM) 8203 .

[0170] The storage unit 820 may also include a program / utility 8204 having a set (at least one) of program modules 8205, such program modules 8205 including but not limited to: an operating system, one or more application programs, other program modules, and program data, each of which or some combination may include an implementation of a network environment.

[0171] Bus 830 may represent one or more of several types of bus structures, including a memory unit bus or memory unit controller, a peripheral bus, an accelerated graphics port, a processing unit, or a local bus using any of a variety of bus architectures.

[0172] The electronic device 800 may also communicate with one or more external devices 900 (e.g., keyboards, pointing devices, Bluetooth devices, etc.), may also communicate with one or more devices that enable a user to interact with the electronic device 800, and / or communicate with any device that enables the electronic device 800 to communicate with one or more other computing devices (e.g., routers, modems, etc.). Such communication may be performed via an input / output (I / O) interface 850. Furthermore, the electronic device 800 may also communicate with one or more networks (e.g., local area networks (LANs), wide area networks (WANs), and / or public networks, such as the Internet) via a network adapter 860. As shown, the network adapter 860 communicates with other modules of the electronic device 800 via a bus 830. It should be understood that, although not shown in the figure, other hardware and / or software modules may be used in conjunction with the electronic device 800, including but not limited to: microcode, device drivers, redundant processing units, external disk drive arrays, RAID systems, tape drives, and data backup storage systems, etc.

[0173] Through the description of the above implementation, it is easy for those skilled in the art to understand that the example implementation described here can be implemented by software, or by software combined with necessary hardware. Therefore, the technical solution according to the implementation of the present invention can be embodied in the form of a software product, which can be stored in a non-volatile storage medium (which can be a CD-ROM, a USB flash drive, a mobile hard disk, etc.) or on a network, and includes several instructions to enable a computing device (which can be a personal computer, a server, a terminal device, or a network device, etc.) to execute the method according to the implementation of the present invention.

[0174] In an exemplary embodiment of the present invention, a computer-readable storage medium is also provided, on which a program product capable of implementing the above method of this specification is stored. In some possible implementations, various aspects of the present invention can also be implemented in the form of a program product, which includes a program code, and when the program product is run on a terminal device, the program code is used to enable the terminal device to perform the steps according to various exemplary embodiments of the present invention described in the above "Exemplary Method" section of this specification.

[0175] The program product for implementing the above method according to an embodiment of the present invention may adopt a portable compact disk read-only memory (CD-ROM) and include program code, and may be run on a terminal device, such as a personal computer. However, the program product of the present invention is not limited thereto, and in this document, a readable storage medium may be any tangible medium containing or storing a program, which may be used by or in combination with an instruction execution system, apparatus, or device.

[0176] The program product may use any combination of one or more readable media. The readable medium may be a readable signal medium or a readable storage medium. The readable storage medium may be, for example, but not limited to, an electrical, magnetic, optical, electromagnetic, infrared, or semiconductor system, device or device, or any combination of the above. More specific examples (non-exhaustive list) of readable storage media include: an electrical connection with one or more wires, a portable disk, a hard disk, a random access memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a portable compact disk read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the above.

[0177] Computer readable signal media may include data signals propagated in baseband or as part of a carrier wave, in which readable program code is carried. Such propagated data signals may take a variety of forms, including but not limited to electromagnetic signals, optical signals, or any suitable combination of the above. Readable signal media may also be any readable medium other than a readable storage medium, which may send, propagate, or transmit a program for use by or in conjunction with an instruction execution system, apparatus, or device.

[0178] The program code embodied on the readable medium may be transmitted using any appropriate medium, including but not limited to wireless, wired, optical cable, RF, etc., or any suitable combination of the foregoing.

[0179] Program code for performing the operations of the present invention may be written in any combination of one or more programming languages, including object-oriented programming languages ​​such as Java, C++, etc., and conventional procedural programming languages ​​such as "C" or similar programming languages. The program code may be executed entirely on the user computing device, partially on the user device, as a separate software package, partially on the user computing device and partially on a remote computing device, or entirely on a remote computing device or server. In cases involving a remote computing device, the remote computing device may be connected to the user computing device through any type of network, including a local area network (LAN) or a wide area network (WAN), or may be connected to an external computing device (e.g., through the Internet using an Internet service provider).

[0180] In addition, the above-mentioned figures are only schematic illustrations of the processes included in the method according to an exemplary embodiment of the present invention, and are not intended to be limiting. It is easy to understand that the processes shown in the above-mentioned figures do not indicate or limit the time sequence of these processes. In addition, it is also easy to understand that these processes can be performed synchronously or asynchronously, for example, in multiple modules.

[0181] Other embodiments of the invention will readily occur to those skilled in the art after considering the specification and practicing the invention invented herein. This application is intended to cover any variations, uses or adaptations of the invention that follow the general principles of the invention and include common knowledge or customary techniques in the art that are not invented by the present invention. The specification and examples are to be considered exemplary only, and the true scope and spirit of the invention are indicated by the claims.

Claims

1. A page rendering method, characterized in that: Applied to a browser, the page rendering method includes: Sending a hypertext transfer protocol request corresponding to the page to be rendered to a backend, and receiving a hypertext markup language file sent by the backend in response to the hypertext transfer protocol request; Parsing the hypertext markup language file to obtain page data corresponding to the page to be rendered and a storage address of an entry file; Loading the script file of the entry file according to the storage address, and running the script file of the entry file to obtain identification information of the module required for rendering the page to be rendered; The script file of the module is loaded according to the identification information of the module, and the rendering of the page to be rendered is completed according to the script file of the module and the page data, and the rendered page is displayed.

2. The page rendering method according to claim 1, characterized in that: The page rendering method further includes: Based on a preset packaging tool, the code and entry file of the module are packaged to generate a code block of each module, a script file of the entry file, a version number of each module and a version number of the entry file; Storing the code block and the script file of the entry file in a content distribution network; The version number of the entry file is stored in the configuration center, so that after receiving the hypertext transfer protocol request, the back end loads the version number from the configuration center and writes the storage address of the entry file generated according to the version number of the entry file into the hypertext markup language file.

3. The page rendering method according to claim 2, characterized in that: Each of the code blocks corresponds to a script file of the module; The version number of the entry file corresponds one-to-one to the version number of each module.

4. The page rendering method according to claim 2, characterized in that: Loading the script file of the module according to the identification information of the module, and completing the rendering of the to-be-rendered page according to the script file of the module and the page data includes: Loading the script file of the module from the content distribution network according to the identification information of the module; The script file of the module is run, and the page data is loaded to complete the rendering of the page to be rendered.

5. The page rendering method according to claim 2, characterized in that: The page rendering method further includes: When it is detected that the version number of the entry file has changed, the changed version number is stored in the configuration center.

6. A page rendering method, characterized in that: Applied to the backend, the page rendering method includes: Receiving a hypertext transfer protocol request corresponding to the page to be rendered sent by the browser, and obtaining a version number of the entry file from the configuration center in response to the hypertext transfer protocol request; Generate a storage address of the entry file according to the version number, and write the storage address and page data corresponding to the page to be rendered into a hypertext markup language to obtain a hypertext markup language file; The hypertext markup language file is sent to the browser, so that the browser parses the hypertext markup language file to obtain the identification information of the module required for the page to be rendered, and loads the script file of the module according to the identification information, and then completes the rendering of the page to be rendered according to the script file of the module and the page data.

7. A page rendering device, characterized in that: Applied to a browser, the page rendering device comprises: A file receiving module, used for sending a hypertext transfer protocol request corresponding to the page to be rendered to the backend, and receiving a hypertext markup language file sent by the backend in response to the hypertext transfer protocol request; A file parsing module, used to parse the hypertext markup language file to obtain page data corresponding to the page to be rendered and a storage address of an entry file; A file loading module, used to load the script file of the entry file according to the storage address, and run the script file of the entry file to obtain the identification information of the module required for rendering the page to be rendered; The page rendering module is used to load the script file of the module according to the identification information of the module, complete the rendering of the page to be rendered according to the script file of the module and the page data, and display the rendered page.

8. A page rendering system, characterized in that: include: Configuration center, used to store the version number of the entry file; Content distribution network, used to store script files of modules and script files of entry files; A backend is connected to the configuration center network, and is used to receive a hypertext transfer protocol request corresponding to the page to be rendered sent by the browser, and obtain the version number of the entry file from the configuration center in response to the hypertext transfer protocol request; as well as Generate a storage address of the entry file according to the version number, and write the storage address and page data corresponding to the page to be rendered into a hypertext markup language to obtain a hypertext markup language file; and then send the hypertext markup language file to the browser; The browser is connected to the configuration center, the content distribution network and the backend network, respectively, and is used to implement the page rendering method described in any one of claims 1-5.

9. A computer-readable storage medium having a computer program stored thereon, characterized in that: When the computer program is executed by a processor, the page rendering method according to any one of claims 1 to 6 is implemented.

10. An electronic device, characterized in that: include: processor; as well as A memory, configured to store executable instructions of the processor; Wherein, the processor is configured to execute the page rendering method described in any one of claims 1-6 by executing the executable instructions.

Images