Page rendering method, terminal equipment and server

Abstract

The invention provides a page rendering method, terminal equipment and a server, and relates to the technical field of computers, in particular to the technical field of electronic commerce, the technical field of page optimization and the like. According to the specific implementation scheme, a storage address of an icon generation script is received from a server; accessing the storage address to obtain an icon generation script; and executing the icon generation script to generate a corresponding icon in the page. The page rendering speed can be increased.

Description

Technical Field

[0001] The present disclosure relates to the field of computer technologies, and in particular to the fields of e-commerce technologies, page optimization technologies, etc. Background Art

[0002] E-commerce (abbreviation: EC) generally refers to a new type of business operation model in which, under the open network environment of the Internet, based on the client / server application mode, buyers and sellers conduct various business activities without meeting face to face, realizing consumers' online shopping, online transactions between merchants, online electronic payment, and various business activities, transaction activities, financial activities, and related integrated service activities.

[0003] In the field of e-commerce, the client installed with a browser renders and displays a product page by accessing a server. The page rendering speed is directly related to the user experience. Therefore, how to improve the page rendering speed is a technical problem to be solved. Summary of the Invention

[0004] The present disclosure provides a page rendering method, a terminal device, and a server.

[0005] According to one aspect of the present disclosure, there is provided a page rendering method applied to a terminal device, the method including:

[0006] Receiving a storage address of an icon generation script from a server;

[0007] Accessing the storage address to obtain the icon generation script;

[0008] Executing the icon generation script to generate a corresponding icon in the page.

[0009] According to another aspect of the present disclosure, there is provided a page rendering method applied to a server, the method including:

[0010] Sending a storage address of an icon generation script to a terminal device, where the icon generation script is used for the terminal device to generate a corresponding icon.

[0011] According to another aspect of the present disclosure, there is provided a terminal device, including:

[0012] A receiving module, configured to receive a storage address of an icon generation script from a server;

[0013] A first obtaining module, configured to access the storage address to obtain the icon generation script;

[0014] An icon generation module, configured to execute the icon generation script to generate a corresponding icon in the page.

[0015] According to another aspect of the present disclosure, there is provided a server, including:

[0016] A sending module, configured to send the storage address of an icon generation script to a terminal device, where the icon generation script is used for the terminal device to generate a corresponding icon.

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

[0018] At least one processor; and

[0019] A memory communicatively connected to the at least one processor; wherein,

[0020] The memory stores instructions executable by the at least one processor, and when the instructions are executed by the at least one processor, the at least one processor is enabled to execute any method in the embodiments of the present disclosure.

[0021] According to another aspect of the present disclosure, there is provided a non-transitory computer-readable storage medium storing computer instructions, wherein the computer instructions are used to cause the computer to execute any method in the embodiments of the present disclosure.

[0022] According to another aspect of the present disclosure, there is provided a computer program product, including a computer program, which implements any method in the embodiments of the present disclosure when executed by a processor.

[0023] In the embodiments of the present disclosure, the terminal device receives the storage address of the icon generation script from the server, obtains the icon generation script by using the storage address, and the terminal device executes the icon generation script to generate a corresponding icon; the technical solution proposed in the embodiments of the present disclosure avoids the terminal device directly receiving icons from the server. Since the data volume of the icon generation script is much smaller than that of the icon, therefore, the embodiments of the present disclosure can reduce the data transmission volume during the rendering process, relieve the data transmission pressure, thereby improving the data transmission speed, and further improving the page rendering speed.

[0024] It should be understood that the content described in this part is not intended to identify the key or important features of the embodiments of the present disclosure, nor is it used to limit the scope of the present disclosure. Other features of the present disclosure will become easily understood through the following description. BRIEF DESCRIPTION OF THE DRAWINGS

[0025] The drawings are used to better understand the solution and do not constitute a limitation to the present disclosure. Among them:

[0026] Figure 1 is the implementation process of the page rendering method proposed in the embodiments of the present disclosure Figure 1 ;

[0027] Figure 2 is a schematic diagram of the interaction content between the terminal device and the server in two rendering stages.

[0028] Figure 3 It is a flowchart of the implementation for the terminal device in an embodiment of the present disclosure to receive the storage address of the icon generation script from the server;

[0029] Figure 4 It is the implementation process of the page rendering method proposed in an embodiment of the present disclosure Figure 2 ;

[0030] Figure 5 It is a schematic structural diagram of the terminal device 500 according to an embodiment of the present disclosure;

[0031] Figure 6 It is a schematic structural diagram of the terminal device 600 according to an embodiment of the present disclosure;

[0032] Figure 7 It is a schematic structural diagram of the server 700 according to an embodiment of the present disclosure;

[0033] Figure 8 It is a schematic structural diagram of the server 800 according to an embodiment of the present disclosure;

[0034] Figure 9 It shows a schematic block diagram of an example electronic device 900 that can be used to implement the embodiments of the present disclosure. Detailed implementation manners

[0035] The following makes an explanation of the exemplary embodiments of the present disclosure in conjunction with the accompanying drawings. Various details of the embodiments of the present disclosure are included to facilitate understanding, and they should be considered merely exemplary. Therefore, those of ordinary skill in the art should recognize that various changes and modifications can be made to the embodiments described herein without departing from the scope of the present disclosure. Similarly, for the sake of clarity and conciseness, the description of well-known functions and structures is omitted below.

[0036] The term "and / or" herein represents three possible relationships. For example, A and / or B can represent: A exists alone, A and B exist simultaneously, and B exists alone. The term "at least one" herein represents any one of multiple types or any combination of at least two of multiple types. For example, including at least one of A, B, and C can represent including any one or more elements selected from the set composed of A, B, and C. The terms "first" and "second" herein represent referring to multiple similar technical terms and distinguishing them, and do not mean limiting the order or limiting to only two. For example, the first feature and the second feature refer to two types / two features. The first feature can be one or more, and the second feature can also be one or more.

[0037] To better illustrate the present disclosure, some nouns or terms involved in the embodiments of the present application are first explained:

[0038] (1) HyperText Markup Language (HTML): HTML can refer to the standard markup language used to create web pages. HTML is the foundation of web pages, which defines the structure and content of web pages.

[0039] (2) Server-Side Rendering (SSR): A technology that uses the server to generate and render web pages. Since server-side rendering requires directly rendering web pages on the server, the development complexity of server-side rendering is relatively high, and the resource requirements for the server are also relatively high.

[0040] (3) Client-Side Rendering (CSR): A technology that uses the client to generate and render web pages. Since client-side rendering mainly uses scripts such as JavaScript (JS) to dynamically construct and update pages on the client, the speed of client-side rendering is relatively slow, and it is easy to cause page lags and rendering delays.

[0041] (4) Cookie: Cookie can refer to the data temporarily stored by the server in txt format on the client (such as a terminal device). The server can use Cookies to implement personalized page construction for users (or terminal devices). Taking an e-commerce service platform as an example, the Cookie can include the user browsing records, client parameter information, or user browsing time temporarily stored by the e-commerce service platform in txt format on the client.

[0042] (5) JavaScript (JS) script: JavaScript script is a scripting language mainly used to add dynamic and interactive functions to web pages.

[0043] (6) Canvas: In computer programming, Canvas can refer to the area used to draw graphics and text on a web page. Usually, Canvas can be called by JavaScript scripts to generate pictures or text.

[0044] (7) Two-Dimensional (2D) rendering context: The 2D rendering context can refer to an interface used to describe 2D graphics rendering. Specifically, the 2D rendering context can provide a set of attributes and methods for drawing graphics, text, and images.

[0045] (8) ctx variable: In Canvas, the ctx variable can be used to represent the graphics context.

[0046] (9) count variable: In the Canvas, this count variable can be used to store a count value or quantity.

[0047] In the e-commerce field, a client installed with a browser accesses a server to render and display product pages. The page rendering speed is directly related to the user experience. If the page loading and rendering speed is too slow, it will lead to a decline in the user experience and have adverse effects such as reducing the advertising conversion rate.

[0048] A typical scenario is as follows: Currently, in order to boost sales, e-commerce operates various marketing activities, and there are countdown reminders, top returns, business icons, etc. during the event. For such icons, the general technical solution in the industry is to send icons from the server to the terminal device and display them in a carousel replacement manner. However, this way of sending icons will load excessive resources, resulting in poor page performance. For example, the data volume of an ordinary icon is about 100k. The server sends one or more icons to the terminal device, resulting in a large data volume of the sent icons, increasing the page loading time and reducing the user experience.

[0049] To solve the problems such as excessive transmission data volume and long page loading time caused by sending icons during the page rendering process, the embodiments of the present disclosure propose a page rendering method, which can be applied to a system including a terminal device and a server. Among them, the terminal device can be a device installed with a browser, and the terminal device can include, but is not limited to, electronic devices such as mobile phones, computers, intelligent voice interaction devices, smart home appliances, vehicle-mounted terminals, game consoles, e-book readers, multimedia playback devices, and wearable devices. The server can include an e-commerce service platform, and the e-commerce service platform can include a front-end and a back-end, each responsible for different functions and responsibilities; specifically, the front-end can refer to the part that can directly interact with users, such as the page of the e-commerce business platform; the back-end can refer to the part used to store and process the business logic and business data generated by the front-end.

[0050] Figure 1 is the implementation process of the page rendering method proposed by the embodiments of the present disclosure Figure 1 , this method can be applied to a terminal device, and this method includes the following steps:

[0051] S110. Receive the storage address of the icon generation script from the server;

[0052] S120. Access the storage address to obtain the icon generation script;

[0053] S130. Execute the icon generation script to generate the corresponding icon on the page.

[0054] In the embodiments of the present disclosure, the icon generation script may include a pre-written JavaScript script for generating icons, and the icon generation script may be stored in a server or other databases. Of course, according to different application scenarios and requirements, the icon generation script may also include pre-written Python scripts, Shell scripts, Ruby scripts, TypeScript scripts, Go scripts, etc.

[0055] For example, in the application scenario of countdown reminder, if the icons in the embodiments of the present disclosure include countdown icons, the specific code included in the icon generation script and the specific functions corresponding to each section of the code may be as follows:

[0056]

[0057]

[0058] In the exemplary icon generation script, the embodiments of the present disclosure can call Canvas through JavaScript to generate a countdown icon named Canvas with a width and height of 200 pixels each.

[0059] Since a timer function is set in the exemplary icon generation script, the embodiments of the present disclosure can update the countdown icon once every second, so as to achieve the purpose of real-time updating of the icon without manual operation.

[0060] The terminal device receives the storage address of the icon generation script from the server, obtains the icon generation script using the storage address, and executes the icon generation script to generate the corresponding icon. Compared with the prior art, the terminal device does not need to directly obtain the icon from the server. That is to say, in the page rendering process of the embodiments of the present disclosure, the server does not need to send the icon to the terminal device, but sends the storage address of the icon generation script to the terminal device; since the data volume of the storage address is much smaller than that of the icon (the former is about 100 bytes and the latter is about 100K bytes), it is possible to reduce the data volume transmitted during the page rendering process, reduce the page loading time and rendering time, and thus improve the user experience.

[0061] In some embodiments, after obtaining the icon generation script, the terminal device may also save the icon generation script. Among them, the icon generation script may be stored in the memory of the terminal device or in any local storage space of the terminal device, and the embodiments of the present disclosure do not limit this.

[0062] In the subsequent process, when an icon needs to be displayed, the terminal device can directly generate the corresponding icon using the icon generation script, without the need to re-obtain the icon generation script using the storage address. In this way, the data transmission volume can be further saved, and the page loading speed and rendering speed can be improved. In addition, storing the icon generation script in the terminal device can reduce the client's dependence on the server, thereby reducing problems such as page rendering delay or page rendering lag caused by network problems or server failures.

[0063] In some embodiments, the page rendering method proposed by the embodiments of the present disclosure can be divided into the following two stages:

[0064] The first stage uses the server-side rendering (SSR) method. In this stage, the generation and rendering process of the web page content are completed on the server side. For example, after receiving the access request from the client, the server executes the rendering logic of the web page and generates the complete HTML page content. The generated HTML page content contains all the initialization data and the already rendered page content. Then, the server sends the hypertext markup language (HTML) page content to the client for display. The content rendered in the first stage mainly includes the content of the first screen (or called the landing page), that is, the first page shown after the user clicks on an advertisement or searches using a search engine. Using the SSR rendering method can provide a faster initial loading speed and better search engine optimization (SEO), because the server already includes the complete content when generating the page.

[0065] The second stage uses the client-side rendering (CSR) method. In this stage, the generation and rendering of the web page content are both completed on the client side (i.e., the browser). For example, after receiving the access request from the client, the server sends a JS file containing an HTML string to the client; the client parses and executes the JS file to obtain the corresponding data, and uses the data to generate and render the page. The content rendered in the second stage mainly includes the content of the non-first screen (or called the non-landing page). This rendering method facilitates multiple interactions between the user and the page.

[0066] Figure 2 It is a schematic diagram of the interaction content between the terminal device and the server in the two rendering stages. As Figure 2As shown, the embodiments of the present disclosure can render a page by combining the first rendering stage (i.e., the stage using SSR rendering technology) and the second rendering stage (i.e., the stage using CSR rendering technology). Specifically, the terminal device sends an access request to the server. After receiving the access request, the server generates HTML page content using the access request. The HTML page content includes the storage address of the icon generation script and may also include the elements of the first screen page; the server can also generate a JS file, which may include the elements of the non-first screen page. The server sends the generated HTML page content to the terminal device, and the terminal device displays the HTML page content, thereby realizing the rendering of the first screen page content; the server can also send the generated JS file to the terminal device, and the terminal device parses and executes the JS file, thereby rendering the non-first screen page content. It should be noted that Figure 2 the reference numerals in

[0067] In some embodiments, in the page rendering method proposed by the embodiments of the present disclosure, the terminal device receives the storage address of the icon generation script in the above first rendering stage (i.e., the stage using SSR rendering technology). As Figure 3 shown, the terminal device receiving the storage address of the icon generation script from the server may include:

[0068] S310. Sending an access request to the server;

[0069] S320. Receiving the HTML page content generated by the server according to the access request, where the HTML page content includes the storage address of the icon generation script.

[0070] This process uses SSR rendering technology. For example, after a user enters a Uniform Resource Locator (URL) request in the browser of the terminal device, the browser sends a Hyper Text Transfer Protocol (HTTP) request to the server to request the resource corresponding to the URL. The server will respond to this request and send the resource back to the browser, and the browser will then parse and display these resources.

[0071] Compared with the CSR rendering method, the SSR rendering method can reduce the first screen loading time, improve the page rendering speed, and optimize the user experience. At the same time, since the embodiments of the present disclosure can render the content of the first screen in the server, the processing burden on the client is reduced, and the page performance and response speed are improved.

[0072] Specifically, the server renders the page according to the HTTP request to generate the HTML page content, and the HTML page content includes the storage address of the icon generation script. For example, the HTML page content includes <script src＝'https:www.tubiao.com test.js'>< / script> , in the embodiments of the present disclosure, the storage address of the icon generation script included in the HTML page content is https: / / www.tubiao.com / test.js.

[0073] Further, after the terminal device obtains the storage address of the icon generation script based on the HTML page content, it can also obtain the icon generation script based on the obtained storage address of the icon generation script. In one implementation, the method for the terminal device to obtain the icon generation script includes:

[0074] Parse the HTML page content to obtain the storage address of the icon generation script;

[0075] Access the storage address of the icon generation script to obtain the icon generation script.

[0076] Specifically, the method for the terminal device to obtain the storage address of the icon generation script may include the following steps:

[0077] Step 1: Parse the HTML page content through any tool for parsing HTML to obtain the parsed HTML page content. For example, parse the HTML page content through a Python library, a Java library, or the Developer Tools of a browser to obtain the parsed HTML page content.

[0078] Step 2: Search for the element associated with the icon generation script in the parsed HTML page content, such as a script tag ( <script>)、链接标签(<link>)等。

[0079] 步骤三、确定与图标生成脚本相关联的元素的属性信息。

[0080] 例如，确定该脚本标签的源(src，source)属性、或链接标签的超文本引用(href，hypertext reference)属性。其中，脚本标签的src属性可以用于确定脚本所对应的源文件，href属性可以用于确定脚本所对应的外部路径。

[0081] 步骤四、根据与图标生成脚本相关联的元素的属性信息，获取图标生成脚本的存储地址。

[0082] 例如，如果与图标生成脚本相关联的元素的属性信息包括src属性，那么本公开实施例可以通过该src属性获取该图标生成脚本所对应的源文件，并基于该源文件获取该图标生成脚本的存储地址。或者，如果该与图标生成脚本相关联的元素的属性信息包括href属性，那么本公开实施例可以通过该href属性获取该图标生成脚本所对应的外部路径，并基于该外部路径获取该图标生成脚本的存储地址。

[0083] 进一步地，在获取图标生成脚本之后，终端设备可以基于命令执行工具访问图标生成脚本的存储地址，从而获取该图标生成脚本。其中，该命令执行工具可以包括CommandLine URL Viewer或GNU Wget等。

[0084] 通过下发图标生成脚本的存储地址至终端设备的方式，能够进一步降低渲染页面时需要服务器下发的资源数据，从而降低页面渲染的延迟程度和卡顿程度，进而提高用户在浏览页面时的体验感受。

[0085] 另外，该渲染阶段可以实现对首页(或称为落地页)的渲染，因此，服务器向终端设备发送的HTML页面内容可以为首屏页面内容。在一些实施方式中，该HTML页面内容中还可以包含多个首屏页面元素；该多个首屏页面元素可以由终端设备的参数信息确定。

[0086] 具体地，终端设备的参数信息可以包括终端设备的屏幕尺寸、型号和屏幕分辨率中的至少之一。其中，终端设备的屏幕尺寸可以用于确定终端设备的可视区域大小，终端设备的型号可以用于确定终端设备的硬件配置和性能，终端设备的屏幕分辨率可以用于确定终端设备的显示清晰度。

[0087] 基于终端设备的参数信息确定的首屏页面元素能够在终端设备上具有良好的显示效果，即该首屏页面元素能够在终端设备上以较高的清晰度和较高的准确度显示。此外，由于基于终端设备的参数信息确定的首屏页面元素与终端设备的性能较为匹配，因此，基于终端设备的参数信息确定的首屏页面元素，能够提高首屏页面渲染的流畅性。

[0088] 一示例中，该首屏页面元素可以包括HTML页面内容中的产品物料，包括用于介绍产品的图片、文字、视频文件等。这类内容的数据量较大，并且在终端设备的显示屏幕中占据的空间也较大。如果一次性返回过多的这类内容，很容易造成页面卡顿或者页面渲染延迟，进而影响用户浏览体验。

[0089] 为了解决上述问题，本公开实施例中，HTML页面内容中包含的首屏页面元素可以根据终端设备的参数信息确定。在一些实施方式中，本公开实施例可以通过Cookie信息确定该终端设备的参数信息。其中，Cookie信息可以包含服务器存储至终端设备的数据，如终端设备的参数信息、用户浏览时间或用户浏览记录等。

[0090] 以Cookie信息包含终端设备的参数信息为例，当终端设备首次发送HTTP请求至服务器时，服务器会将该终端设备的参数信息以Cookie信息的形式存储在该终端设备的内存中，或任一本地存储空间中。之后，在终端设备非首次(如第二次或第三次等)发送HTTP请求至服务器时，通常会在HTTP请求中携带该Cookie信息，从而使服务器在接收到该HTTP请求时，根据该Cookie信息快速识别该终端设备的参数信息，进而便于服务器根据终端设备的参数信息，个性化地定制针对该终端设备的HTML页面内容。

[0091] 具体地，以参数信息包括屏幕尺寸为例，在终端设备非首次发送HTTP请求至服务器时，服务器根据HTTP请求中包含的Cookie信息，确定终端设备的屏幕尺寸；在屏幕尺寸较小的情况下，HTML页面内容中可以包含较少的首屏页面元素；在屏幕尺寸较大的情况下，HTML页面内容中可以包含较多的首屏页面元素。通过这种方式，可以根据终端设备的参数信息，动态设置返回物料资源的数量，只下发满足首屏内容的物料资源，从而减少页面卡顿或页面渲染延迟。对于剩余的非首屏资源(如第二屏资源、第三屏资源等)，可以在第二个渲染阶段(即采用CSR渲染技术的阶段)发送至客户端。

[0092] 例如，终端设备在从服务器接收图标生成脚本的存储地址之后，还包括：

[0093] 从服务器接收JS文件，该JS文件中包含非首屏页面元素；

[0094] 解析并执行该JS文件，以获取对应数据；

[0095] 使用该数据生成并渲染非首屏页面。

[0096] 其中，该非首屏页面元素可以包括HTML页面内容中的产品物料，包括用于介绍产品的图片、文字或视频文件等。

[0097] 一示例中，本公开实施例可以通过JS编译器或前端资源打包工具等解析该JS文件，以获取对应数据；之后，通过文档对象模型(DOM，Document Object Model)动态地调整并处理从JS文件中获取的数据，以得到该非首屏页面。

[0098] 其中，该数据可以包括JavaScript对象表示法(JSON，JavaScript ObjectNotatio)、HTML字符串、可扩展标记语言(XML，Extensible Markup Language)、纯文本或自定义格式的数据等。

[0099] 本公开实施例通过先采用SSR技术渲染首屏内容、后采用CSR渲染技术渲染非首屏内容，能够结合SSR渲染技术和CSR渲染技术的优势，既能够提高首屏的加载速度，又能够提供更好的搜索引擎优化和用户体验。具体地，在服务器端使用SSR技术渲染首屏内容，可以加快页面加载速度、降低终端设备的资源消耗、支持性能较低的终端设备等等；而在终端设备使用CSR技术渲染非首屏内容，可以提供更丰富的交互和动态效果，提高用户体验。

[0100] 在电商领域中，终端设备访问服务器时，服务器通常会向终端设备下发一个或多个商品图片，终端设备渲染该一个或多个商品图片，并将该商品图片在终端设备的屏幕上显示。由于商品图片的数据量较大，导致商品图片下发和渲染的时间较长；可能导致终端设备在发送访问请求之后，迟迟无法打开完整的页面，影响用户体验。为了解决该问题，本公开实施例提出的渲染方法可以在渲染首页(或称为落地页)时，先下发并渲染低分辨率的商品图片；之后再下发并渲染高分辨率的商品图片，用该高分辨率的商品图片替换该低分辨率的商品图片；商品图片的下发和渲染过程无需用户重新发起请求。通过这种方式，用户在发送访问请求之后，终端设备首先显示一个低分辨率图片，保证了终端设备的显示屏幕上能够迅速地显示首页内容；待对应的高分辨率图片下发并渲染完成之后，终端设备的显示屏幕上的低分辨率图片被替换为高分辨率图片，使得商品图片显示更为清晰。可见，这种方式既提高了渲染速度，又不影响页面中图片的清晰程度。

[0101] 相应地，以第一首屏图片为低分辨率的商品图片，第二首屏图片为高分辨率的商品图片为例，上述首屏页面元素中，包含第一首屏图片；

[0102] 上述非首屏页面元素中，包含第二首屏图片；

[0103] 其中，第一首屏图片展示的内容与第二首屏图片展示的内容相同，并且第二首屏图片的分辨率高于第一首屏图片的分辨率。

[0104] 例如，在该第二首屏图片未加载完成之前，用户可以浏览到该第一首屏图片；在第二首屏图片加载完成之后，由于终端设备会利用第二首屏图片替换该第一首屏图片，因此在第二首屏图片加载完成之后，用户无需向服务器再次发送访问请求，即可浏览到该第二首屏图片。

[0105] 一示例中，该第一首屏图片可以通过以下至少一种方式获取：

[0106] 方式一、减少第二首屏图片的尺寸，以获取第一首屏图片。

[0107] 通常情况下，可以通过减少图片尺寸的方式降低该图片的分辨率。因此，在本公开实施例中，可以通过减少第二首屏图片的尺寸，获取第一首屏图片。该获取第一首屏图片的方式实现操作简单、且往往不会影响图片的质量。

[0108] 方式二、直接利用图像编辑工具，降低第二首屏图片的分辨率，以得到第一首屏图片。该获取第一首屏图片的方式实现操作简单、且能够精准地控制图片的分辨率。

[0109] 在电商领域中，如果电商服务平台采用上述方式向用户展示商品图片(即在高分辨率的商品图片加载完成之前，将该低分辨率的商品图片快速显示在终端设备上，在高分辨率的商品图片加载完成之后，利用高分辨率的商品图片替换低分辨率的商品图片)，往往会降低用户的等待时间，提高用户的浏览速度和体验感受，进而促进用户对该电商服务平台的满意程度、以及该电商服务平台的转化率。

[0110] 此外，在本公开实施例中，上述非首屏页面元素和 / 或首屏页面元素中，包含固定元素内容；

[0111] 该方法还包括：

[0112] 渲染固定元素内容，并将该固定元素内容进行显示；

[0113] 保存该固定元素内容。

[0114] 其中，固定元素内容可以包括在页面上多次出现的元素、具有特定功能的元素、或能够辅助用户快速获取所需功能的元素。例如，在电商领域中，该固定元素可以包括收藏图标、搜索图标、购物车图标、帮助图标、分享图标和点赞图标等。

[0115] 进一步地，为了便于后续处理，还可以将该固定元素保存中终端设备的存储空间，从而在后续需要显示固定元素内容时，终端设备可以直接利用从内部存储空间直接调用该固定元素，从而进一步节约数据传输量，提高页面加载速度和渲染速度。具体地，该固定元素内容可以存储至终端设备的内存中，也可以存储至终端设备的任一本地存储空间中，本公开实施例对此并不做限制。

[0116] 本公开实施例还提出一种页面渲染方法，该页面渲染方法可以应用于服务器，如电商服务器。图4是本公开实施例提出的页面渲染方法的实现流程图二，该方法可以应用于服务器，该方法包括以下步骤：

[0117] S410、向终端设备发送图标生成脚本的存储地址，该图标生成脚本用于供终端设备生成对应的图标。

[0118] 例如，服务器可以接收终端设备发送的访问请求，并基于该访问请求向终端设备发送图标生成脚本的存储地址，例如，该图标生成脚本的存储地址可以为<script src＝'https:www.tubiao.com / test.js'>< / script> .

[0119] In the embodiments of the present disclosure, it is not necessary to render the complete icon requested by the terminal device during rendering, but only the storage address of the icon generation script corresponding to the complete icon needs to be sent to the terminal device, thereby reducing the operation steps that the server needs to execute; in addition, since the amount of data included in the storage address of the icon generation script is much smaller than the amount of data included in the complete icon, therefore, the embodiments of the present disclosure can reduce the amount of data transmitted during page rendering, reduce the page loading time and rendering time, and thus improve the user experience.

[0120] In some embodiments, sending the storage address of the icon generation script to the terminal device includes:

[0121] Receive a send access request from the terminal device;

[0122] Render the page according to the access request to generate HTML page content, which includes the storage address of the icon generation script;

[0123] Send the HTML page content to the terminal device.

[0124] In some embodiments, the HTML page content includes the first-screen page content.

[0125] In some embodiments, it further includes,

[0126] Obtain the parameter information of the terminal device;

[0127] Determine multiple first-screen page elements included in the HTML page content according to the parameter information of the terminal device.

[0128] Among them, the first-screen page elements may include product materials in the HTML page content, including pictures, texts, or video files for introducing products, etc.

[0129] In some embodiments, the parameter information of the terminal device includes:

[0130] At least one of the screen size, model, and screen resolution of the terminal device.

[0131] In one example, the screen size of the terminal device can be used to determine the visible area size of the terminal device, the model of the terminal device can be used to determine the hardware configuration and performance of the terminal device, and the display clarity of the terminal device.

[0132] In some embodiments, it further includes,

[0133] Send a JS file to the terminal device, which contains non-first-screen page elements; the JS file is used for the terminal device to generate and render the non-first-screen page.

[0134] Among them, the non-first-screen page elements may include product materials in the HTML page content, including pictures, texts, or video files for introducing products, etc.

[0135] In some embodiments, the first-screen page content includes a first first-screen picture;

[0136] The non-first-screen page content includes a second first-screen picture;

[0137] The content shown in the first first-screen picture is the same as the content shown in the second first-screen picture, and the resolution of the second first-screen picture is higher than that of the first first-screen picture.

[0138] In some embodiments, the non-first-screen page elements and / or the first-screen page elements include fixed element content.

[0139] Among them, the fixed element content may include elements that appear multiple times on the page, elements with specific functions, or elements that can assist users in quickly obtaining the required functions. For example, in the e-commerce field, the fixed elements may include a favorite icon, a search icon, a shopping cart icon, a help icon, a share icon, a like icon, etc.

[0140] Embodiments of the present disclosure disclose a terminal device 500, Figure 5 which is a schematic structural diagram of a terminal device 500 according to an embodiment of the present disclosure, including:

[0141] A receiving module 510, configured to receive the storage address of the icon generation script from the server;

[0142] A first obtaining module 520, configured to access the storage address to obtain the icon generation script;

[0143] An icon generation module 530, configured to execute the icon generation script to generate corresponding icons on the page.

[0144] In some embodiments, the first obtaining module 520 is further configured to save the icon generation script.

[0145] In some embodiments, the receiving module 510 is configured to:

[0146] Send an access request to the server;

[0147] Receive the HTML page content generated by the server according to the access request, and the HTML page content includes the storage address of the icon generation script.

[0148] In some embodiments, the HTML page content includes the content of the first screen page.

[0149] In some embodiments, the HTML page content further includes a plurality of first screen page elements;

[0150] The plurality of first screen page elements are determined by the parameter information of the terminal device.

[0151] In some embodiments, the parameter information of the terminal device includes:

[0152] At least one of the screen size, model, and screen resolution of the terminal device.

[0153] In some embodiments, after the first obtaining module 520 receives the storage address of the icon generation script from the server, it is further configured to:

[0154] Receive a JS file from the server, and the JS file includes non-first screen page elements;

[0155] Parse and execute the JS file to obtain the corresponding data;

[0156] Use the data to generate and render non-first-screen pages.

[0157] In some embodiments, among the first-screen page elements, there is a first first-screen picture;

[0158] Among the non-first-screen page elements, there is a second first-screen picture;

[0159] The content shown in the first first-screen picture is the same as the content shown in the second first-screen picture, and the resolution of the second first-screen picture is higher than that of the first first-screen picture.

[0160] In some embodiments, among the non-first-screen page elements and / or the first-screen page elements, there is fixed element content;

[0161] Figure 6 It is a schematic structural diagram of a terminal device 600 according to an embodiment of the present disclosure, as Figure 6 shown. In some embodiments, the terminal device 600 further includes:

[0162] A rendering and saving module 640, configured to render the fixed element content and display the fixed element content; save the fixed element content.

[0163] In some embodiments, the first obtaining module 520 is configured to:

[0164] Parse the HTML page content to obtain the storage address of the icon generation script;

[0165] Access the storage address of the icon generation script to obtain the icon generation script.

[0166] An embodiment of the present disclosure discloses a server 700, Figure 7 which is a schematic structural diagram of a server 700 according to an embodiment of the present disclosure, including:

[0167] A first sending module 710, configured to send the storage address of the icon generation script to the terminal device, and the icon generation script is used for the terminal device to generate corresponding icons.

[0168] In some embodiments, the first sending module 710 is configured to

[0169] Receive a sending access request from the terminal device;

[0170] Perform page rendering according to the access request to generate HTML page content, and the HTML page content includes the storage address of the icon generation script;

[0171] Send the HTML page content to the terminal device.

[0172] In some embodiments, the HTML page content includes the content of the first screen page.

[0173] Figure 8 It is a schematic structural diagram of a server 800 according to an embodiment of the present disclosure. As Figure 8 shown, in some embodiments, the server 800 further includes:

[0174] A second acquisition module 820, configured to acquire parameter information of the terminal device;

[0175] A determination module 830, configured to determine multiple first screen page elements included in the HTML page content according to the parameter information of the terminal device.

[0176] In some embodiments, the parameter information of the terminal device includes:

[0177] At least one of the screen size, model, and screen resolution of the terminal device.

[0178] In some embodiments, it further includes a second sending module 840, configured to send a JS file to the terminal device, where the JS file includes non-first screen page elements; the JS file is used for the terminal device to generate and render a non-first screen page.

[0179] In some embodiments, the content of the first screen page includes a first first screen picture;

[0180] The content of the non-first screen page includes a second first screen picture;

[0181] The content shown by the first first screen picture is the same as the content shown by the second first screen picture, and the resolution of the second first screen picture is higher than that of the first first screen picture.

[0182] In some embodiments, the non-first screen page elements and / or the first screen page elements include fixed element content.

[0183] For the specific functions and examples of the modules and sub-modules of the device according to the embodiments of the present disclosure, reference may be made to the relevant descriptions of the corresponding steps in the above method embodiments, which will not be elaborated here.

[0184] In the technical solution of the present disclosure, the acquisition, storage, and application of the user's personal information involved all comply with the provisions of relevant laws and regulations and do not violate public order and good customs.

[0185] According to the embodiments of the present disclosure, the present disclosure further provides an electronic device, a readable storage medium, and a computer program product.

[0186] Figure 9FIG. 0 shows a schematic block diagram of an exemplary electronic device 900 that can be used to implement embodiments of the present disclosure. The electronic device is intended to represent various forms of digital computers, such as, for example, laptop computers, desktop computers, workstations, personal digital assistants, servers, blade servers, mainframe computers, and other suitable computers. The electronic device can also represent various forms of mobile devices, such as, for example, personal digital assistants, cellular phones, smart phones, wearable devices, and other similar computing devices. The components shown herein, their connections and relationships, and their functions are merely exemplary and are not intended to limit the implementation of the present disclosure described and / or claimed herein.

[0187] As Figure 9 shown, the device 900 includes a computing unit 901 that can perform various appropriate actions and processes in accordance with a computer program stored in a read-only memory (ROM) 902 or a computer program loaded from a storage unit 908 into a random access memory (RAM) 903. In the RAM 903, various programs and data required for the operation of the device 900 can also be stored. The computing unit 901, the ROM 902, and the RAM 903 are connected to each other via a bus 904. An input / output (I / O) interface 905 is also connected to the bus 904.

[0188] A plurality of components in the device 900 are connected to the I / O interface 905, including: an input unit 906, such as a keyboard, a mouse, etc.; an output unit 907, such as various types of displays, speakers, etc.; a storage unit 908, such as a magnetic disk, an optical disk, etc.; and a communication unit 909, such as a network card, a modem, a wireless communication transceiver, etc. The communication unit 909 allows the device 900 to exchange information / data with other devices via a computer network such as the Internet and / or various telecommunication networks.

[0189] The computing unit 901 can be various general-purpose and / or special-purpose processing components with processing and computing capabilities. Some examples of the computing unit 901 include, but are not limited to, a central processing unit (CPU), a graphics processing unit (GPU), various dedicated artificial intelligence (AI) computing chips, various computing units running machine learning model algorithms, a digital signal processor (DSP), and any suitable processor, controller, microcontroller, etc. The computing unit 901 executes the various methods and processes described above, such as the page rendering method. For example, in some embodiments, the page rendering method can be implemented as a computer software program tangibly embodied in a machine-readable medium, such as the storage unit 908. In some embodiments, part or all of the computer program can be loaded and / or installed onto the device 900 via the ROM 902 and / or the communication unit 909. When the computer program is loaded into the RAM 903 and executed by the computing unit 901, one or more steps of the page rendering method described above can be executed. Alternatively, in other embodiments, the computing unit 901 can be configured to execute the page rendering method in any other suitable manner (e.g., by means of firmware).

[0190] Various embodiments of the systems and techniques described above in this document can be implemented in digital electronic circuitry, integrated circuit systems, field-programmable gate arrays (FPGA), application-specific integrated circuits (ASIC), application-specific standard products (ASSP), systems-on-chip (SOC), complex programmable logic devices (CPLD), computer hardware, firmware, software, and / or combinations thereof. These various embodiments can include: implemented in one or more computer programs that can be executed and / or interpreted on a programmable system including at least one programmable processor, which can be a special-purpose or general-purpose programmable processor that receives data and instructions from a storage system, at least one input device, and at least one output device, and transmits the data and instructions to the storage system, the at least one input device, and the at least one output device.

[0191] The program code for implementing the methods of the present disclosure can be written in any combination of one or more programming languages. These program codes can be provided to the processor or controller of a general-purpose computer, a special-purpose computer, or other programmable data processing device, such that when the program codes are executed by the processor or controller, the functions / operations specified in the flowcharts and / or block diagrams are implemented. The program codes can be executed entirely on the machine, partially on the machine, as an independent software package partially on the machine and partially on a remote machine, or entirely on a remote machine or server.

[0192] In the context of this disclosure, a machine-readable medium can be a tangible medium that can contain or store a program for use by or in connection with an instruction execution system, apparatus, or device. A machine-readable medium can be a machine-readable signal medium or a machine-readable storage medium. A machine-readable medium can include, but is not limited to, electronic, magnetic, optical, electromagnetic, infrared, or semiconductor systems, apparatus, or devices, or any suitable combination of the foregoing. More specific examples of a machine-readable storage medium would include an electrical connection based on one or more wires, a portable computer diskette, 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 disc read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the foregoing.

[0193] In order to provide interaction with a user, the systems and techniques described herein can be implemented on a computer having: a display device (e.g., a CRT (cathode ray tube) or LCD (liquid crystal display) monitor) for displaying information to the user; and a keyboard and a pointing device (e.g., a mouse or a trackball) by which the user can provide input to the computer. Other kinds of devices can also be used to provide interaction with the user; for example, the feedback provided to the user can be any form of sensory feedback (e.g., visual feedback, auditory feedback, or tactile feedback); and input from the user can be received in any form (including acoustic input, speech input, or tactile input).

[0194] The systems and techniques described herein can be implemented in a computing system including backend components (e.g., as a data server), or a computing system including middleware components (e.g., an application server), or a computing system including frontend components (e.g., a user computer having a graphical user interface or a web browser through which the user can interact with an implementation of the systems and techniques described herein), or a computing system including any combination of such backend components, middleware components, or frontend components. The components of the system can be interconnected by any form or medium of digital data communication (e.g., a communication network). Examples of communication networks include: a local area network (LAN), a wide area network (WAN), and the Internet.

[0195] A computer system can include a client and a server. The client and the server are generally remote from each other and typically interact through a communication network. The client-server relationship is generated by computer programs running on the respective computers and having a client-server relationship with each other. The server can be a cloud server, a server of a distributed system, or a server incorporating a blockchain.

[0196] It should be understood that the various forms of processes shown above can be used, with steps reordered, added or deleted. For example, the steps described in the present disclosure can be executed in parallel, sequentially, or in different orders, as long as the desired results of the technical solutions disclosed in the present disclosure can be achieved, and no limitation is imposed herein.

[0197] The above specific embodiments do not constitute a limitation on the protection scope of the present disclosure. Those skilled in the art should understand that various modifications, combinations, sub - combinations and substitutions can be made according to design requirements and other factors. Any modifications, equivalent substitutions and improvements made within the principles of the present disclosure shall be included within the protection scope of the present disclosure.

Claims

1. A page rendering method, applied to a terminal device, the method comprising: Receiving a storage address of an icon generation script from a server; Accessing the storage address to obtain the icon generation script; Executing the icon generation script to generate a corresponding icon on the page.

2. The method according to claim 1, further comprising saving the icon generation script.

3. The method according to claim 1 or 2, wherein, The receiving a storage address of an icon generation script from a server includes: Sending an access request to the server; Receiving the hypertext markup language (HTML) page content generated by the server according to the access request, the HTML page content including the storage address of the icon generation script.

4. The method according to claim 3, wherein, The HTML page content includes the first-screen page content.

5. The method according to claim 4, wherein The HTML page content further includes a plurality of first-screen page elements; The plurality of first-screen page elements are determined by parameter information of the terminal device.

6. The method according to claim 5, wherein, The parameter information of the terminal device includes: At least one of the screen size, model, and screen resolution of the terminal device.

7. After receiving a storage address of an icon generation script from a server according to claim 5 or 6, the method further comprises: Receiving a JS file from the server, the JS file including non-first-screen page elements; Parsing and executing the JS file to obtain corresponding data; Using the data to generate and render a non-first-screen page.

8. According to the method of claim 7, wherein Among the first-screen page elements, there is a first first-screen picture; Among the non-first-screen page elements, there is a second first-screen picture; The content shown by the first first-screen picture is the same as the content shown by the second first-screen picture, and the resolution of the second first-screen picture is higher than that of the first first-screen picture.

9. The method according to claim 7 or 8, wherein Among the non-first-screen page elements and / or the first-screen page elements, there is fixed element content; The method further comprises: Rendering the fixed element content and displaying the fixed element content; Saving the fixed element content.

10. The method according to claim 3, wherein, The accessing the storage address to obtain the icon generation script includes: Parsing the HTML page content to obtain the storage address of the icon generation script; Accessing the storage address of the icon generation script to obtain the icon generation script.

11. A page rendering method, applied to a server, the method comprising: Sending a storage address of an icon generation script to a terminal device, the icon generation script being used for the terminal device to generate a corresponding icon.

12. The method according to claim 11, wherein, The sending a storage address of an icon generation script to a terminal device includes: Receiving a sending access request from a terminal device; Performing page rendering according to the access request to generate HTML page content, the HTML page content including the storage address of the icon generation script; Sending the HTML page content to the terminal device.

13. The method according to claim 12, wherein The HTML page content includes the first-screen page content.

14. According to the method of claim 13, further comprising Obtaining parameter information of the terminal device; Determining a plurality of first-screen page elements included in the HTML page content according to the parameter information of the terminal device.

15. The method according to claim 14, wherein, The parameter information of the terminal device includes: At least one of the screen size, model, and screen resolution of the terminal device.

16. The method according to claim 14 or 15, further comprising sending a JS file to the terminal device, the JS file containing non-first-screen page elements; the JS file is used for the terminal device to generate and render a non-first-screen page.

17. The method according to claim 16, wherein among the first-screen page elements, a first first-screen picture is included; among the non-first-screen page elements, a second first-screen picture is included; the content shown in the first first-screen picture is the same as the content shown in the second first-screen picture, and the resolution of the second first-screen picture is higher than the resolution of the first first-screen picture.

18. The method according to claim 16 or 17, wherein, Among the non-first-screen page elements and / or the first-screen page elements, fixed element content is included.

19. A terminal device, comprising: a receiving module, configured to receive the storage address of an icon generation script from a server; a first obtaining module, configured to access the storage address to obtain the icon generation script; an icon generation module, configured to execute the icon generation script to generate corresponding icons in a page.

20. A server, comprising: a sending module, configured to send the storage address of an icon generation script to a terminal device, the icon generation script being used for the terminal device to generate corresponding icons.

21. An electronic device, comprising: at least one processor; and a memory communicatively connected to the at least one processor; wherein, the memory stores instructions executable by the at least one processor, and the instructions are executed by the at least one processor so that the at least one processor can execute the method according to any one of claims 1-10 or 11-18.

22. A non-transitory computer-readable storage medium storing computer instructions, wherein, The computer instructions are used to cause the computer to execute the method according to any one of claims 1-10 or 11-18.

23. A computer program product, comprising a computer program, the computer program realizing the method according to any one of claims 1-10 or 11-18 when executed by a processor.

Images