A page loading method and a client and a server for page loading

Abstract

The present invention discloses a page loading method and a client and a server for page loading, and relates to the field of computer technology. A specific implementation of the method includes: sending a page loading request to a server to obtain a pre-rendering file corresponding to a page pre-generated by the server from a content distribution network; loading the pre-rendering file, and sending a dynamic data acquisition request to the server to obtain dynamic data corresponding to the pre-rendering file; rendering the dynamic data in the loaded pre-rendering file to generate a display page. This implementation reduces the time users wait for page loading, improves page loading performance, and thus improves user experience.

Description

Technical Field

[0001] The present invention relates to the field of computer technology, and in particular to a page loading method and a client and a server for page loading. Background Art

[0002] With the development of Internet technology, in order to attract more and more users, complex and cool interactive effects are often used for the pages that users browse. However, as the complexity of the page increases, the amount of data that the page needs to load increases, and the page loading performance gradually decreases. Especially when the page loading time is too long, users will give up browsing the page because they are unwilling to wait, which in turn causes user loss. Therefore, how to improve the page loading performance has become an urgent problem to be solved.

[0003] The loading performance of a page mainly depends on the rendering method used when the page is loaded. Currently, there are two main page rendering methods: server-side rendering and client-side rendering.

[0004] In the process of implementing the present invention, the inventors found that there are at least the following problems in the prior art: when rendering on the server side, especially when the interactive effects are complex and the amount of data to be transmitted is large, the network transmission speed restricts the page loading performance, resulting in a poor user experience; when rendering on the client side, the page content can only be displayed when all the page files are loaded, the user has a long waiting time, and sometimes even a white screen will appear, resulting in a poor user experience. Summary of the invention

[0005] In view of this, an embodiment of the present invention provides a page loading method, which can first directly obtain a pre-rendering file from a content distribution network, thereby reducing the amount of data transmitted from a server, reducing the constraints of network speed on loading performance, and improving page loading performance; at the same time, in the process of loading the pre-rendering file, dynamic data rendering is gradually completed and the page is displayed, so that the user can quickly see the page content, reducing the waiting time and improving the user experience.

[0006] To achieve the above object, according to a first aspect of an embodiment of the present invention, a page loading method is provided, comprising:

[0007] Sending a page loading request to the server to obtain a pre-rendering file corresponding to the page pre-generated by the server from a content distribution network;

[0008] Loading the pre-rendering file, and sending a dynamic data acquisition request to the server to acquire dynamic data corresponding to the pre-rendering file;

[0009] The dynamic data is rendered in the loaded pre-rendered file to generate a presentation page.

[0010] Optionally, the pre-rendering file is generated by the server based on the NODE platform, and the pre-rendering file is composed of one or more pre-rendering floors corresponding to the page;

[0011] The pre-rendered floor includes a floor template, static data corresponding to the floor template, and a blank DOM node corresponding to the dynamic data of the floor template.

[0012] Optionally, the loading of the pre-rendering file and sending a dynamic data request to the server to obtain dynamic data corresponding to the pre-rendering file includes:

[0013] Determine whether the pre-rendered floor is in the visible area of ​​the page screen;

[0014] When the pre-rendered floor is in the visible area of ​​the page screen, a dynamic data acquisition request is sent according to the attributes of the blank DOM node to acquire dynamic data corresponding to the blank DOM node.

[0015] Optionally, rendering the dynamic data in the loaded pre-rendering file to generate a display page includes:

[0016] Rendering the dynamic data in the pre-rendered floor according to the blank DOM node;

[0017] Execute the pre-configured floor method in the pre-rendered floor to generate an interactive display page.

[0018] Optionally, the determining whether the pre-rendered floor is in a visible area of ​​the page screen includes:

[0019] Obtain the height of the visible area of ​​the page and the distance between the pre-rendered floor and the top of the page;

[0020] Determine whether the height of the visible area of ​​the page is greater than the distance between the pre-rendered floor and the top of the page:

[0021] If it is greater than, the pre-rendered floor is in the visible area of ​​the page screen; if it is not greater than, the pre-rendered floor is not in the visible area of ​​the page screen.

[0022] Optionally, the floor method includes one or more of the following: a page layout adaptive method, a picture rotation playing method, a countdown method, and a picture click jump method.

[0023] To achieve the above object, according to a second aspect of an embodiment of the present invention, a page loading method is provided, comprising:

[0024] Receive a page loading request sent by a client, and send a pre-rendered file corresponding to the page in a content distribution network to the client according to the page loading request;

[0025] When receiving the dynamic data acquisition request sent by the client, the dynamic data corresponding to the pre-rendering file is sent to the client, so that the client renders the dynamic data into the pre-rendering file to generate a display page.

[0026] Optionally, when the pre-rendering file does not exist in the content distribution network, the pre-rendering file is generated based on the NODE platform, and the pre-rendering file consists of one or more pre-rendering floors corresponding to the page;

[0027] The pre-rendered floor includes a floor template, static data corresponding to the floor template, and a blank DOM node corresponding to the dynamic data of the floor template.

[0028] Optionally, generating the pre-rendering file based on the NODE platform includes:

[0029] Obtain one or more floor templates corresponding to the page;

[0030] Parsing a floor template identifier from the floor template;

[0031] According to the floor template identifier, obtaining static data corresponding to the floor template;

[0032] Rendering the static data to the floor template, and using DOM nodes to replace the dynamic data in the floor template to generate a pre-rendered floor;

[0033] According to the pre-rendering floor, the pre-rendering file is generated and stored in the content distribution network.

[0034] To achieve the above object, according to a third aspect of an embodiment of the present invention, a client for page loading is provided, comprising: a loading request sending module, a dynamic data acquisition module, and a display page generation module; wherein:

[0035] The loading request sending module is used to send a page loading request to the server to obtain a pre-rendering file corresponding to the page pre-generated by the server from the content distribution network;

[0036] The dynamic data acquisition module is used to load the pre-rendering file and send a dynamic data acquisition request to the server to acquire dynamic data corresponding to the pre-rendering file;

[0037] The display page generation module is used to render the dynamic data in the loaded pre-rendering file to generate a display page.

[0038] Optionally, the pre-rendering file is generated by the server based on the NODE platform, and the pre-rendering file is composed of one or more pre-rendering floors corresponding to the page;

[0039] The pre-rendered floor includes a floor template, static data corresponding to the floor template, and a blank DOM node corresponding to the dynamic data of the floor template.

[0040] Optionally, the loading of the pre-rendering file and sending a dynamic data acquisition request to the server to acquire dynamic data corresponding to the pre-rendering file includes:

[0041] Determine whether the pre-rendered floor is in the visible area of ​​the page screen;

[0042] When the pre-rendered floor is in the visible area of ​​the page screen, a dynamic data acquisition request is sent according to the attributes of the blank DOM node to acquire dynamic data corresponding to the blank DOM node.

[0043] Optionally, rendering the dynamic data in the loaded pre-rendering file to generate a display page includes:

[0044] Rendering the dynamic data in the pre-rendered floor according to the blank DOM node;

[0045] Execute the pre-configured floor method in the pre-rendered floor to generate an interactive display page.

[0046] Optionally, the determining whether the pre-rendered floor is in a visible area of ​​the page screen includes:

[0047] Obtain the height of the visible area of ​​the page and the distance between the pre-rendered floor and the top of the page;

[0048] Determine whether the height of the visible area of ​​the page is greater than the distance between the pre-rendered floor and the top of the page:

[0049] If it is greater than, the pre-rendered floor is in the visible area of ​​the page screen; if it is not greater than, the pre-rendered floor is not in the visible area of ​​the page screen.

[0050] Optionally, the floor method includes one or more of the following: a page layout adaptive method, a picture rotation playing method, a countdown method, and a picture click jump method.

[0051] To achieve the above-mentioned purpose, according to a fourth aspect of an embodiment of the present invention, a server for page loading is provided, comprising: a loading request receiving module and a dynamic data sending module; wherein:

[0052] The loading request receiving module is used to receive a page loading request sent by a client, and send a pre-rendered file corresponding to the page in the content distribution network to the client according to the page loading request;

[0053] The dynamic data sending module is used to send the dynamic data corresponding to the pre-rendering file to the client when receiving the dynamic data acquisition request sent by the client, so that the client renders the dynamic data into the pre-rendering file to generate a display page.

[0054] Optionally, it also includes: a pre-rendering file generation module; wherein,

[0055] The pre-rendering file generation module is used to generate the pre-rendering file based on the NODE platform when the pre-rendering file does not exist in the content distribution network, and the pre-rendering file consists of one or more pre-rendering floors corresponding to the page;

[0056] The pre-rendered floor includes a floor template, static data corresponding to the floor template, and a blank DOM node corresponding to the dynamic data of the floor template.

[0057] Optionally, generating the pre-rendering file based on the NODE platform includes:

[0058] Obtain one or more floor templates corresponding to the page;

[0059] Parsing a floor template identifier from the floor template;

[0060] According to the floor template identifier, obtaining static data corresponding to the floor template;

[0061] Rendering the static data to the floor template, and using DOM nodes to replace the dynamic data in the floor template to generate a pre-rendered floor;

[0062] According to the pre-rendering floor, the pre-rendering file is generated and stored in the content distribution network.

[0063] To achieve the above object, according to a fifth aspect of an embodiment of the present invention, a system for page loading is provided, comprising: a client and a server; wherein:

[0064] The client is used to send a page loading request to the server to obtain a pre-rendering file corresponding to the page pre-generated by the server from the content distribution network; load the pre-rendering file and send a dynamic data acquisition request to the server to obtain dynamic data corresponding to the pre-rendering file; render the dynamic data in the loaded pre-rendering file to generate a display page;

[0065] The server is used to receive the page loading request to send the pre-rendering file in the content distribution network to the client; and send the dynamic data to the client when receiving the dynamic data acquisition request.

[0066] To achieve the above-mentioned purpose, according to the sixth aspect of an embodiment of the present invention, an electronic device for page loading is provided, comprising: one or more processors; a storage device for storing one or more programs, when the one or more programs are executed by the one or more processors, the one or more processors implement any of the methods described in the above-mentioned page loading method.

[0067] To achieve the above-mentioned purpose, according to a seventh aspect of an embodiment of the present invention, a computer-readable medium is provided, on which a computer program is stored, and when the program is executed by a processor, any method described in the above-mentioned page loading method is implemented.

[0068] An embodiment of the above invention has the following advantages or beneficial effects: when loading a page, by directly obtaining the pre-rendered file pre-generated by the server from the content distribution network, the amount of page data directly obtained from the server is reduced, the restriction of network transmission speed on page loading performance is reduced, and the amount of data required to be rendered by the client is reduced, thereby improving page loading performance; at the same time, in the process of loading the pre-rendered file, by obtaining dynamic data in real time and directly rendering to generate a display page, the timeliness of the dynamic data is guaranteed, and the user can quickly see the content of the page, thereby reducing the user's waiting time and improving the user experience.

[0069] The further effects of the above-mentioned non-conventional optional manner will be described below in conjunction with the specific implementation manner. BRIEF DESCRIPTION OF THE DRAWINGS

[0070] The accompanying drawings are used to better understand the present invention and do not constitute an improper limitation of the present invention.

[0071] Figure 1 is a schematic diagram of the main process of a page loading method applied to a client according to an embodiment of the present invention;

[0072] Figure 2a is a floor diagram of a store page according to an embodiment of the present invention;

[0073] Figure 2b is a schematic diagram of a commodity floor according to an embodiment of the present invention;

[0074] Figure 2c is a pre-rendered commodity floor schematic diagram according to an embodiment of the present invention;

[0075] Figure 3 is a schematic diagram of the main process of another page loading method applied to a client according to an embodiment of the present invention;

[0076] Figure 4 is a schematic diagram of the main process of a page loading method applied to a server according to an embodiment of the present invention;

[0077] Figure 5 is a schematic diagram of main modules of a client for page loading according to an embodiment of the present invention;

[0078] Figure 6 is a schematic diagram of main modules of a server for page loading according to an embodiment of the present invention;

[0079] Figure 7 is a schematic diagram of the main structure of a system for page loading according to an embodiment of the present invention;

[0080] Figure 8 is a schematic diagram of the main process of a page loading method applied to a page loading system according to an embodiment of the present invention;

[0081] Fig. 9 is an exemplary system architecture diagram to which embodiments of the present invention may be applied;

[0082] Fig.10 It is a schematic diagram of the structure of a computer system of a terminal device or a server suitable for implementing an embodiment of the present invention. DETAILED DESCRIPTION

[0083] The following is a description of exemplary embodiments of the present invention in conjunction with the accompanying drawings, including various details of the embodiments of the present invention to facilitate understanding, which should be considered as merely exemplary. Therefore, it should be recognized by those of ordinary skill in the art that various changes and modifications may be made to the embodiments described herein without departing from the scope and spirit of the present invention. Similarly, for clarity and conciseness, the description of well-known functions and structures is omitted in the following description.

[0084] Figure 1 is a schematic diagram of the main flow of a page loading method applied to a client according to an embodiment of the present invention. Figure 1 As shown, the page loading method may specifically include the following steps:

[0085] Step S101, sending a page loading request to a server to obtain a pre-rendering file corresponding to the page pre-generated by the server from a content distribution network.

[0086] Among them, the Content Delivery Network (CDN) is a distributed network built and covered on the carrier network, consisting of edge node server groups distributed in different regions. Its purpose is to add a new layer of network architecture to the existing Internet to publish the content of the website to the "edge" of the network closest to the user, so that the user can obtain the required content nearby, solve the network congestion, and improve the response speed of users accessing the website. Therefore, when the client requests to access or load a page, the loading efficiency of the pre-rendered file can be improved by directly obtaining the pre-rendered file generated by the server from the content distribution network, which fundamentally solves the problem of slow page loading caused by low network transmission speed on the server.

[0087] In an optional implementation, the pre-rendered file is generated by the server based on the NODE platform, and the pre-rendered file consists of one or more pre-rendered floors corresponding to the page; the pre-rendered floor includes a floor template, static data corresponding to the floor template, and a blank DOM node corresponding to the dynamic data of the floor template.

[0088] Among them, NODE platform refers to the JavaScript platform running on the server side, which is actually the encapsulation of Google's ChromeV8 engine to generate HTML files. Floor template refers to the HTML template corresponding to one or more floors that constitute the page; each floor is composed of a floor template and corresponding page data; and page data can be divided into static data and dynamic data based on real-time and personalized needs. Among them, static data refers to page data with low frequency of change and no requirements for real-time and personalization, while dynamic data refers to page data with high frequency of change and high requirements for real-time and personalization.

[0089] Specifically, see Figure 2a , taking a store page as an example, the store page is composed of multiple layers from top to bottom, such as the header information layer, the carousel layer, and the product layer. Therefore, when the client loads, it can also be rendered and displayed from top to bottom. Figure 2b It can be seen that the product floor is specifically composed of the product floor template and its product pictures, product names, product prices and other page data. Since the page data such as product pictures and product names change less frequently and the real-time requirements are not high, the same store page can be used for a long time, so it can be classified as static data for pre-rendering. However, product prices fluctuate greatly, especially during product promotions, and they will change frequently and need to be updated in real time. Therefore, they can be classified as dynamic data, which is not pre-rendered but obtained from the server in real time when the page is actually loaded to ensure the timeliness of the data. Figure 2cIt can be seen that the pre-rendered product floor is composed of static data such as product floor templates, product images, product names, etc., and blank DOM nodes are used as placeholders to replace dynamic data such as product prices in the floor template.

[0090] It is understandable that when the server receives the page loading request sent by the client for the first time, that is, the pre-rendered file has not been cached in the content distribution network, it is necessary to pre-generate and store it in the content distribution network together with the rendering file, so that when the page loading request sent by the client is received again, the pre-rendered file in the content distribution network can be directly returned to the client, so as to improve the efficiency of the client in obtaining the pre-rendered file. Specifically, the NODE platform corresponding to the server needs to obtain one or more floor templates constituting the page from the server, and then parse the floor template identifier or floor template ID from the floor template; then obtain the static data corresponding to the floor template stored in the server based on the floor template identifier; finally, by combining the floor template with the static data, and using blank DOM nodes to occupy the position of dynamic data to generate a pre-rendered floor, and then generate a pre-rendered file containing one or more pre-rendered floors. If we still take the generation of pre-rendered product floors as an example, the NODE platform needs to obtain the corresponding static data such as product images and product names according to the product floor template identifier; then, combine the product floor template with static data such as product images and product names, and use blank DOM nodes to occupy the position of dynamic data such as product prices in the floor template to generate pre-rendered product floors (see Figure 2c ). Based on this, after the pre-rendered product floor, pre-rendered carousel floor, pre-rendered header information floor, etc. are generated successively, all pre-rendered floors of the store page are combined to generate the pre-rendered file corresponding to the store page.

[0091] Step S102: load the pre-rendering file, and send a dynamic data acquisition request to the server to acquire dynamic data corresponding to the pre-rendering file.

[0092] In an optional implementation, the loading of the pre-rendering file and sending a dynamic data request to the server to obtain dynamic data corresponding to the pre-rendering file includes: determining whether the pre-rendering floor is in the visible area of ​​the page screen; when the pre-rendering floor is in the visible area of ​​the page screen, sending a dynamic data acquisition request according to the attributes of the blank DOM node to obtain dynamic data corresponding to the blank DOM node.

[0093] That is to say, when the client obtains the pre-rendered file corresponding to the page from the content distribution network, it can directly load the pre-rendered file so that the client user can quickly see the basically completed page except for the static data, avoiding the problem of long waiting time for users due to page loading, and improving the user experience. Furthermore, in order to avoid page freezes caused by rendering the dynamic data corresponding to all pre-rendered floors at one time when there are many pre-rendered floors, the dynamic data corresponding to the pre-rendered floors can be obtained and rendered only when the pre-rendered floors appear in the visible area of ​​the page screen to generate a completed display page. In this way, the page loading performance is guaranteed, and the display page with complete page data can be displayed to the user.

[0094] More specifically, the determining whether the pre-rendering floor in the pre-rendering file is in the visible area of ​​the page screen includes: obtaining the visible area height of the page and the distance between the pre-rendering floor and the top of the page; determining whether the visible area height of the page is greater than the distance between the pre-rendering floor and the top of the page: if greater, the pre-rendering floor is in the visible area of ​​the page screen; if not greater, the pre-rendering floor is not in the visible area of ​​the page screen.

[0095] Step S103: Rendering the dynamic data in the loaded pre-rendering file to generate a display page.

[0096] In an optional embodiment, rendering the dynamic data in the loaded pre-rendered file to generate a display page includes: rendering the dynamic data in the pre-rendered floor according to the blank DOM node; executing the floor method pre-configured in the pre-rendered floor to generate an interactive display page.

[0097] That is to say, after rendering the dynamic data in the pre-rendered floor to generate a complete display page for the user to browse and view, the client can also implement the interactive effect of the page by executing or calling the pre-selected floor method in the floor template to enhance the user experience.

[0098] Specifically, since a floor template may need to execute more than one floor method, and different floor templates may execute the same floor method, that is, the floor method has universality. Therefore, in order to improve the efficiency of page loading, in the actual execution process, a platform for realizing page interaction can uniformly maintain all floor methods, and pre-configure the name of the floor method to be executed and the required parameters in the floor template, and then after rendering the dynamic data in the pre-rendered floor, the floor method is called from the floor method maintenance platform according to the floor method and parameter product in the floor template to realize the interactive function of the page. The floor method includes but is not limited to: page layout adaptive method, picture rotation method, countdown method, picture click jump method, etc. Taking the product floor as an example, the picture rotation method can be used to realize the animation effects such as the alternating display of product pictures on the page, and the click jump method can also be used to enter the product details page when the user clicks the product picture for the user to browse or purchase the product.

[0099] Based on the above embodiment, by directly obtaining the pre-rendering file corresponding to the page from the content distribution network, the loading efficiency of the pre-rendering file is improved, the limitation of the network transmission speed on the page loading performance is reduced, and the page loading performance is improved. At the same time, when the client obtains the pre-rendering file of the page, the page can be displayed directly, so that the client user can quickly see the page without waiting for all the page data to be rendered, which reduces the time the user waits for the page to load and improves the user experience. In addition, when loading the pre-rendering file, the pre-rendered floors that appear in the visible area of ​​the page screen are rendered in batches, which avoids page freezes caused by rendering all the pre-rendered floors at once, further improving the page loading performance and user experience.

[0100] See also Figure 3 Based on the above embodiment, the embodiment of the present invention provides another page loading method applied to a client, and the page loading method may specifically include the following steps:

[0101] Step S301: Send a page loading request to a server to obtain a pre-rendering file corresponding to the page pre-generated by the server from a content distribution network.

[0102] Specifically, the pre-rendered file is generated by the server based on the NODE platform, and the pre-rendered file is composed of one or more pre-rendered floors corresponding to the page; the pre-rendered floors include a floor template, static data corresponding to the floor template, and a blank DOM node corresponding to the dynamic data of the floor template.

[0103] Step S302, when the pre-rendering file is loaded, determine whether the pre-rendering floor is in the visible area of ​​the page screen; if so, continue to execute the following S303; if not, as the page loading time goes by, continue to determine whether the floor is in the visible area of ​​the page screen.

[0104] Specifically, the pre-rendered file corresponding to the store page includes a pre-rendered header information floor, a pre-rendered carousel floor, and a pre-rendered product floor. In the process of loading the pre-rendered file, only when it is determined that the pre-rendered product floor is in the visible area of ​​the page screen, the dynamic data such as the product price corresponding to the pre-rendered product floor will continue to be obtained.

[0105] Step S303: sending a dynamic data acquisition request according to the attribute of the blank DOM node to acquire dynamic data corresponding to the blank DOM node.

[0106] Specifically, still taking the pre-rendered product floor as an example, when the pre-rendered product floor is in the visible area, the attributes of the blank DM node in the pre-rendered product floor, such as the product price, can be read to obtain information such as the product SKU, so that a dynamic data acquisition request can be sent according to the product SKU to obtain the product price data currently corresponding to the product SKU from the server.

[0107] Step S304: Rendering the dynamic data in the pre-rendered floor according to the blank DOM node.

[0108] That is to say, based on obtaining dynamic data such as product prices, the product price data can be filled in the blank DOM nodes in the pre-rendered product floor to generate a product floor containing complete page data for display to the user.

[0109] Step S305, executing the floor method preconfigured in the pre-rendered floor to generate an interactive display page.

[0110] In this way, by only obtaining the dynamic data corresponding to the pre-rendered floors in the visible area of ​​the page and rendering them, the page's different pre-rendered floors are rendered in batches, avoiding page freezes caused by rendering all pre-rendered floors at once, and further improving page loading performance. At the same time, the interactive function of the page is realized by executing the floor method, which not only improves the page loading performance, but also ensures the complex and cool interactive functions of the page, improving the user experience.

[0111] See also Figure 4 Based on the above embodiment, the embodiment of the present invention provides a page loading method applied to a server, and the page loading method may specifically include the following steps:

[0112] Step S401: receiving a page loading request sent by a client, and sending a pre-rendering file corresponding to the page in a content distribution network to the client according to the page loading request.

[0113] In an optional implementation, when the pre-rendering file does not exist in the content distribution network, the pre-rendering file is generated based on the NODE platform, and the pre-rendering file consists of one or more pre-rendering floors corresponding to the page; the pre-rendering floor includes a floor template, static data corresponding to the floor template, and a blank DOM node corresponding to the dynamic data of the floor template.

[0114] It is understandable that when the server receives the page loading request sent by the client for the first time, that is, the pre-rendering file has not been cached in the content distribution network, it is necessary to pre-generate the pre-rendering file based on the NODE platform and store it in the content distribution network, so that when the server receives the page loading request for the same page sent by the client again, the pre-rendering file in the content distribution network is directly returned to the client, so as to improve the efficiency of the client in obtaining the pre-rendering file.

[0115] More specifically, the generation of the pre-rendered file based on the NODE platform includes: obtaining one or more floor templates corresponding to the page; parsing the floor template identifier from the floor template; obtaining static data corresponding to the floor template according to the floor template identifier; rendering the static data to the floor template, and using DOM nodes to replace the dynamic data in the floor template to generate a pre-rendered floor; generating the pre-rendered file according to the pre-rendered floor and storing it in the content distribution network.

[0116] If we still take the generation of pre-rendered product floors as an example, the NODE platform needs to obtain the corresponding static data such as product images and product names stored on the server according to the product floor template identifier; then, combine the product floor template with static data such as product images and product names, and use blank DOM nodes to occupy the position of dynamic data such as product prices in the floor template to generate pre-rendered product floors (see Figure 2c ), and then the pre-rendering file corresponding to the page can be generated by combining one or more pre-rendering floors corresponding to the page.

[0117] Step S402: upon receiving a dynamic data acquisition request sent by the client, sending the dynamic data corresponding to the pre-rendering file to the client, so that the client renders the dynamic data into the pre-rendering file to generate a display page.

[0118] It is worth noting that when a dynamic data acquisition request is received from the client, instead of sending dynamic data acquisition requests corresponding to all pages to the client at once, only the dynamic data corresponding to the pre-rendered floors in the visible area of ​​the page screen are sent to the client, so that the client can render dynamic data in batches, avoiding page freezes caused by one-time rendering, and at the same time reducing the dependence of one-time transmission of a large amount of dynamic data on network speed, thereby improving page loading performance.

[0119] Based on the above embodiments, by generating a page pre-rendering file with a DOM structure based on the static data, floor template and DOM node corresponding to the page and storing it in the content distribution network, the efficiency of the client in obtaining the pre-rendering file is improved, thereby improving the page loading performance; and the client can directly load the pre-rendering file to display the page to the client user, avoiding the link of the client waiting for the static data to be rendered, and the client does not need to wait for all the page data to be rendered before seeing the page content, thereby improving the user experience. At the same time, by sending dynamic data to the client only when receiving a dynamic data acquisition request corresponding to a pre-rendering template in the visible area sent by the client, the timeliness of the dynamic data is guaranteed, and the client can render the dynamic data in batches, avoiding the jamming caused by rendering all the dynamic data corresponding to the pre-rendering floors at one time, thereby improving the page loading performance.

[0120] See also Figure 5 Based on the above embodiments, the embodiment of the present invention provides a client 500 for page loading, including: a loading request sending module 501, a dynamic data acquisition module 502, and a display page generation module 503; wherein,

[0121] The loading request sending module 501 is used to send a page loading request to the server to obtain a pre-rendering file corresponding to the page pre-generated by the server from the content distribution network;

[0122] The dynamic data acquisition module 502 is used to load the pre-rendering file and send a dynamic data acquisition request to the server to acquire dynamic data corresponding to the pre-rendering file;

[0123] The display page generating module 503 is used to render the dynamic data in the loaded pre-rendering file to generate a display page.

[0124] In an optional implementation, the pre-rendered file is generated by the server based on the NODE platform, and the pre-rendered file consists of one or more pre-rendered floors corresponding to the page; the pre-rendered floor includes a floor template, static data corresponding to the floor template, and a blank DOM node corresponding to the dynamic data of the floor template.

[0125] In an optional implementation, the loading of the pre-rendering file and sending a dynamic data acquisition request to the server to obtain dynamic data corresponding to the pre-rendering file includes: determining whether the pre-rendering floor is in the visible area of ​​the page screen; when the pre-rendering floor is in the visible area of ​​the page screen, sending a dynamic data acquisition request according to the attributes of the blank DOM node to obtain dynamic data corresponding to the blank DOM node.

[0126] In an optional embodiment, rendering the dynamic data in the loaded pre-rendered file to generate a display page includes: rendering the dynamic data in the pre-rendered floor according to the blank DOM node; executing the floor method pre-configured in the pre-rendered floor to generate an interactive display page.

[0127] In an optional implementation, determining whether the pre-rendered floor is in the visible area of ​​the page screen includes: obtaining the visible area height of the page and the distance between the pre-rendered floor and the top of the page; determining whether the visible area height of the page is greater than the distance between the pre-rendered floor and the top of the page: if greater than, the pre-rendered floor is in the visible area of ​​the page screen; if not greater than, the pre-rendered floor is not in the visible area of ​​the page screen.

[0128] In an optional implementation, the floor method includes one or more of the following: a page layout adaptive method, a picture rotation playing method, a countdown method, and a picture click jump method.

[0129] See also Figure 6 Based on the above embodiment, the embodiment of the present invention provides a server 600 for page loading, including: a loading request receiving module 601, a dynamic data sending module 603; wherein,

[0130] The loading request receiving module 601 is used to receive a page loading request sent by a client, and send a pre-rendered file corresponding to the page in the content distribution network to the client according to the page loading request;

[0131] The dynamic data sending module 603 is used to send the dynamic data corresponding to the pre-rendering file to the client when receiving the dynamic data acquisition request sent by the client, so that the client renders the dynamic data into the pre-rendering file to generate a display page.

[0132] In an optional implementation, it further includes: a pre-rendering file generation module 602; wherein,

[0133] The pre-rendering file generation module 602 is used to generate the pre-rendering file based on the NODE platform when the pre-rendering file does not exist in the content distribution network, and the pre-rendering file is composed of one or more pre-rendering floors corresponding to the page; the pre-rendering floor includes a floor template, static data corresponding to the floor template, and a blank DOM node corresponding to the dynamic data of the floor template.

[0134] In an optional implementation, the generating the pre-rendering file based on the NODE platform includes: obtaining one or more floor templates corresponding to the page; parsing a floor template identifier from the floor template; obtaining static data corresponding to the floor template according to the floor template identifier; rendering the static data to the floor template, and using a DOM node to replace the dynamic data in the floor template to generate a pre-rendered floor; generating the pre-rendering file according to the pre-rendered floor and storing it in the content distribution network.

[0135] join Figure 7 Based on the above embodiments, the embodiment of the present invention provides a system 700 for page loading, including: a client 500 and a server 600; wherein,

[0136] The client 500 is used to send a page loading request to the server to obtain a pre-rendering file corresponding to the page pre-generated by the server from the content distribution network; load the pre-rendering file and send a dynamic data acquisition request to the server to obtain dynamic data corresponding to the pre-rendering file; render the dynamic data in the loaded pre-rendering file to generate a display page;

[0137] The server 600 is used to receive the page loading request to send the pre-rendering file in the content distribution network to the client; when receiving the dynamic data acquisition request, the server 600 sends the dynamic data to the client.

[0138] See also Figure 8 Based on the above embodiment, the present invention provides a method applied to the above system for page loading, which may specifically include the following steps:

[0139] Step S801: The client sends a page loading request to the server.

[0140] Step S802: the server receives a page loading request sent by the client.

[0141] Step S803: the server generates a pre-rendering file corresponding to the page based on the NODE platform and stores it in the content distribution network.

[0142] It is understandable that the server generates a pre-rendered file only when it receives a page load request for the same page for the first time, that is, when the content distribution network (CDN) has not yet stored the pre-rendered file, and directly sends the pre-rendered file in the content distribution network to the client when it receives a page load request for the same page again. The pre-rendered file is composed of one or more pre-rendered floors, and the pre-rendered floors include floor templates, static data, and DOM nodes corresponding to the dynamic data of the floor templates.

[0143] Step S804: the server sends the pre-rendered file in the content distribution network to the client.

[0144] Step S805, the client receives the pre-rendered file stored in the content distribution network by the server. In this way, compared with directly obtaining the pre-rendered file from the server, the client can obtain the pre-rendered file more quickly, reducing the limitation of network speed on page loading performance, and the client user does not need to wait for the rendering of static data, thereby improving the user experience.

[0145] Step S806, the client loads the pre-rendered file. It is understandable that, although the pre-rendered file does not contain dynamic data, a blank DOM node is used to occupy the position of the dynamic data in the pre-rendered page, so the pre-rendered file is a loadable HTML file with a complete DOM structure, which can be directly displayed to the client user, reducing the time the client user waits for the page to load and improving the user experience.

[0146] Step S807: the client sends a dynamic data acquisition request to the server to acquire dynamic data corresponding to the pre-rendered floors in the visible area of ​​the page screen.

[0147] Step S808: the server receives the dynamic data acquisition request sent by the client.

[0148] Step S809: the server sends the dynamic data corresponding to the pre-rendered floor to the client.

[0149] Step S810: The client receives dynamic data corresponding to the pre-rendered floor sent by the server.

[0150] Step S811: The client renders the dynamic data in the pre-rendered floor to generate a display page.

[0151] Step S812: the client executes the floor method pre-selected and configured in the pre-rendered floor to generate an interactive display page.

[0152] Fig. 9An exemplary system architecture 900 is shown to which the page loading method or the page loading device according to the embodiment of the present invention can be applied.

[0153] like Fig. 9 As shown, system architecture 900 may include terminal devices 901, 902, 903, network 904 and server 905. Network 904 is used to provide a medium for communication links between terminal devices 901, 902, 903 and server 905. Network 904 may include various connection types, such as wired, wireless communication links or optical fiber cables, etc.

[0154] Users can use terminal devices 901, 902, 903 to interact with server 905 through network 904 to receive or send messages, etc. Various communication client applications can be installed on terminal devices 901, 902, 903, such as shopping applications, web browser applications, search applications, instant messaging tools, email clients, social platform software, etc.

[0155] The terminal devices 901 , 902 , and 903 may be various electronic devices having a display screen and supporting web browsing, including but not limited to smart phones, tablet computers, laptop computers, and desktop computers, etc.

[0156] The server 905 may be a server that provides various services, such as a backend management server that provides support for shopping websites browsed by users using the terminal devices 901, 902, and 903. The backend management server may analyze and process the received data such as store access requests, and feed back the processing results (such as store pages) to the terminal device.

[0157] It should be noted that the page loading method provided in the embodiment of the present invention is generally executed by the server 905 , and accordingly, the page loading device is generally disposed in the server 905 .

[0158] It should be understood that Fig. 9 The number of terminal devices, networks and servers in the embodiment is only for illustration. Any number of terminal devices, networks and servers may be provided according to implementation requirements.

[0159] Reference below Fig.10 , which shows a schematic diagram of the structure of a computer system 1000 of a terminal device suitable for implementing an embodiment of the present invention. Fig.10 The terminal device 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.

[0160] like Fig.10As shown, the computer system 1000 includes a central processing unit (CPU) 1001, which can perform various appropriate actions and processes according to a program stored in a read-only memory (ROM) 1002 or a program loaded from a storage part 1008 into a random access memory (RAM) 1003. In the RAM 1003, various programs and data required for the operation of the system 1000 are also stored. The CPU 1001, the ROM 1002, and the RAM 1003 are connected to each other via a bus 1004. An input / output (I / O) interface 1005 is also connected to the bus 1004.

[0161] The following components are connected to the I / O interface 1005: an input section 1006 including a keyboard, a mouse, etc.; an output section 1007 including a cathode ray tube (CRT), a liquid crystal display (LCD), etc., and a speaker, etc.; a storage section 1008 including a hard disk, etc.; and a communication section 1009 including a network interface card such as a LAN card, a modem, etc. The communication section 1009 performs communication processing via a network such as the Internet. A drive 1010 is also connected to the I / O interface 1005 as needed. A removable medium 1011, such as a magnetic disk, an optical disk, a magneto-optical disk, a semiconductor memory, etc., is installed on the drive 1010 as needed, so that a computer program read therefrom is installed into the storage section 1008 as needed.

[0162] In particular, according to the embodiments disclosed in the present invention, the process described above with reference to the flowchart can be implemented as a computer software program. For example, the embodiments disclosed in the present invention include a computer program product, which includes a computer program carried on a computer-readable medium, and the computer program includes a program code for executing the method shown in the flowchart. In such an embodiment, the computer program can be downloaded and installed from the network through the communication part 1009, and / or installed from the removable medium 1011. When the computer program is executed by the central processing unit (CPU) 1001, the above-mentioned functions defined in the system of the present invention are executed.

[0163] It should be noted that the computer-readable medium shown in the present invention may be a computer-readable signal medium or a computer-readable storage medium or any combination of the above two. The computer-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 of computer-readable storage media may include, but are not limited to: an electrical connection with one or more wires, a portable computer 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. In the present invention, a computer-readable storage medium may be any tangible medium containing or storing a program that can be used by or in combination with an instruction execution system, device or device. In the present invention, a computer-readable signal medium may include a data signal propagated in a baseband or as part of a carrier wave, which carries a computer-readable program code. This propagated data signal may take a variety of forms, including but not limited to electromagnetic signals, optical signals, or any suitable combination of the above. Computer-readable signal media may also be any computer-readable medium other than computer-readable storage media, which may send, propagate or transmit a program for use by or in conjunction with an instruction execution system, apparatus or device. The program code contained on the computer-readable medium may be transmitted using any appropriate medium, including but not limited to: wireless, wire, optical cable, RF, etc., or any suitable combination of the above.

[0164] The flow chart and block diagram in the accompanying drawings illustrate the possible architecture, function and operation of the system, method and computer program product according to various embodiments of the present invention. In this regard, each box in the flow chart or block diagram can represent a module, a program segment, or a part of a code, and the above-mentioned module, program segment, or a part of a code contains one or more executable instructions for realizing the specified logical function. It should also be noted that in some alternative implementations, the functions marked in the box can also occur in a different order from the order marked in the accompanying drawings. For example, two boxes represented in succession can actually be executed substantially in parallel, and they can sometimes be executed in the opposite order, depending on the functions involved. It should also be noted that each box in the block diagram or flow chart, and the combination of the boxes in the block diagram or flow chart can be implemented with a dedicated hardware-based system that performs a specified function or operation, or can be implemented with a combination of dedicated hardware and computer instructions.

[0165] The modules involved in the embodiments of the present invention may be implemented in software or hardware. The modules described may also be set in a processor, for example, may be described as: a processor includes a loading request sending module, a dynamic data acquisition module, and a display page generation module. The names of these modules do not constitute a limitation on the modules themselves in certain cases. For example, the display page generation module may also be described as "a module for rendering the dynamic data in the loaded pre-rendered file to generate a display page".

[0166] As another aspect, the present invention also provides a computer-readable medium, which may be included in the device described in the above embodiment; or it may exist independently without being assembled into the device. The above computer-readable medium carries one or more programs, and when the above one or more programs are executed by a device, the device includes: sending a page loading request to a server to obtain a pre-rendering file corresponding to the page pre-generated by the server from a content distribution network; loading the pre-rendering file, and sending a dynamic data acquisition request to the server to obtain dynamic data corresponding to the pre-rendering file; rendering the dynamic data in the loaded pre-rendering file to generate a display page

[0167] According to the technical solution of the embodiment of the present invention, when loading a page, the amount of page data directly obtained from the server is reduced by directly obtaining the pre-rendered file pre-generated by the server from the content distribution network, reducing the restriction of the network transmission speed on the page loading performance, and improving the page loading performance; at the same time, in the process of loading the pre-rendered file, dynamic data is obtained and directly rendered to generate a display page, so that the user can quickly see the content of the page, reducing the user's waiting time and improving the user experience.

[0168] The above specific implementations do not constitute a limitation on the protection scope of the present invention. It should be understood by those skilled in the art that various modifications, combinations, sub-combinations and substitutions may occur depending on design requirements and other factors. Any modification, equivalent substitution and improvement made within the spirit and principle of the present invention shall be included in the protection scope of the present invention.

Claims

1. A page loading method, characterized in that: include: Sending a page loading request to the server to obtain a pre-rendering file corresponding to the page pre-generated by the server from a content distribution network; The pre-rendering file is generated by the server based on the NODE platform, and the pre-rendering file is composed of one or more pre-rendering floors corresponding to the page; The pre-rendered floor includes a floor template, static data corresponding to the floor template, and a blank DOM node corresponding to the dynamic data of the floor template; Load the pre-rendering file, and send a dynamic data acquisition request to the server to obtain dynamic data corresponding to the blank DOM node; Rendering the dynamic data in the loaded pre-rendering file to generate a display page includes: rendering the dynamic data in the pre-rendering floor according to the blank DOM node.

2. The page loading method according to claim 1, characterized in that: The loading of the pre-rendering file and sending a dynamic data request to the server to obtain dynamic data corresponding to the pre-rendering file includes: Determine whether the pre-rendered floor is in the visible area of ​​the page screen; When the pre-rendered floor is in the visible area of ​​the page screen, a dynamic data acquisition request is sent according to the attributes of the blank DOM node to acquire dynamic data corresponding to the blank DOM node.

3. The page loading method according to claim 2, characterized in that: The step of rendering the dynamic data in the loaded pre-rendered file to generate a display page further includes: Execute the pre-configured floor method in the pre-rendered floor to generate an interactive display page.

4. The page loading method according to claim 2, characterized in that: The determining whether the pre-rendered floor is in a visible area of ​​the page screen includes: Obtain the height of the visible area of ​​the page and the distance between the pre-rendered floor and the top of the page; Determine whether the height of the visible area of ​​the page is greater than the distance between the pre-rendered floor and the top of the page: if greater, the pre-rendered floor is in the visible area of ​​the page screen; if not greater, the pre-rendered floor is not in the visible area of ​​the page screen.

5. The page loading method according to claim 3, characterized in that: The floor method includes one or more of the following: a page layout adaptive method, a picture rotation playing method, a countdown method, and a picture click jump method.

6. A page loading method, characterized in that: include: Receive a page loading request sent by a client, and send a pre-rendered file corresponding to the page in a content distribution network to the client according to the page loading request; The pre-rendering file is generated based on the NODE platform when the pre-rendering file does not exist in the content distribution network, and the pre-rendering file is composed of one or more pre-rendering floors corresponding to the page; The pre-rendered floor includes a floor template, static data corresponding to the floor template, and a blank DOM node corresponding to the dynamic data of the floor template; When receiving the dynamic data acquisition request sent by the client, the dynamic data corresponding to the blank DOM node is sent to the client, so that the client renders the dynamic data to the pre-rendering file to generate a display page.

7. The page loading method according to claim 6, characterized in that: The generating the pre-rendering file based on the NODE platform includes: Obtain one or more floor templates corresponding to the page; Parsing a floor template identifier from the floor template; According to the floor template identifier, obtaining static data corresponding to the floor template; Rendering the static data to the floor template, and using DOM nodes to replace the dynamic data in the floor template to generate a pre-rendered floor; According to the pre-rendering floor, the pre-rendering file is generated and stored in the content distribution network.

8. A client for page loading, characterized in that: include: Loading request sending module, dynamic data acquisition module, display page generation module; among them, The loading request sending module is used to send a page loading request to the server to obtain a pre-rendered file corresponding to the page pre-generated by the server from the content distribution network; the pre-rendered file is generated by the server based on the NODE platform, and the pre-rendered file is composed of one or more pre-rendered floors corresponding to the page; the pre-rendered floor includes a floor template, static data corresponding to the floor template, and a blank DOM node corresponding to the dynamic data of the floor template; The dynamic data acquisition module is used to load the pre-rendering file and send a dynamic data acquisition request to the server to obtain dynamic data corresponding to the blank DOM node; The display page generation module is used to render the dynamic data in the loaded pre-rendering file to generate a display page, including: rendering the dynamic data in the pre-rendering floor according to the blank DOM node.

9. A server for page loading, characterized in that: include: Loading request receiving module, dynamic data sending module; wherein, The loading request receiving module is used to receive a page loading request sent by a client, and send a pre-rendered file corresponding to the page in the content distribution network to the client according to the page loading request; the pre-rendered file is generated based on the NODE platform when the pre-rendered file does not exist in the content distribution network, and the pre-rendered file is composed of one or more pre-rendered floors corresponding to the page; the pre-rendered floor includes a floor template, static data corresponding to the floor template, and a blank DOM node corresponding to the dynamic data of the floor template; The dynamic data sending module is used to send the dynamic data corresponding to the blank DOM node to the client when receiving the dynamic data acquisition request sent by the client, so that the client renders the dynamic data to the pre-rendering file to generate a display page.

10. A system for page loading, characterized in that: include: Client and server; among them, The client is used to send a page loading request to the server to obtain a pre-rendered file corresponding to the page pre-generated by the server from a content distribution network; the pre-rendered file is generated by the server based on the NODE platform, and the pre-rendered file is composed of one or more pre-rendered floors corresponding to the page; the pre-rendered floor includes a floor template, static data corresponding to the floor template, and a blank DOM node corresponding to the dynamic data of the floor template; load the pre-rendered file, and send a dynamic data acquisition request to the server to obtain the dynamic data corresponding to the blank DOM node; render the dynamic data in the loaded pre-rendered file to generate a display page, including: according to the blank DOM node, rendering the dynamic data in the pre-rendered floor; The server is used to receive the page loading request to send the pre-rendered file in the content distribution network to the client; when receiving the dynamic data acquisition request, the dynamic data corresponding to the blank DOM node is sent to the client.

11. An electronic device for page loading, characterized in that: include: one or more processors; a storage device for storing one or more programs, When the one or more programs are executed by the one or more processors, the one or more processors implement the method according to any one of claims 1 to 5.

12. A computer readable medium having a computer program stored thereon, characterized in that: When the program is executed by a processor, the method according to any one of claims 1 to 5 is implemented.

Images