Webpage display method, electronic equipment and readable storage medium

Abstract

The invention provides a webpage display method, electronic equipment and a readable storage medium, the method is applied to first electronic equipment, and the method comprises the steps that it is detected that a user browses a first part of a first webpage at a first sliding speed, and the first sliding speed is larger than a first sliding speed threshold value; displaying the thumbnail of the first part; detecting that the user browses a second part of the first webpage at a second sliding speed, the second sliding speed being smaller than a second sliding speed threshold value, and the second sliding speed threshold value being smaller than or equal to the first sliding speed threshold value; and displaying the webpage content of the second part. According to the embodiment of the invention, in the process of using the webpage by the user, the focus area which the user wants to view is determined according to the sliding speed of sliding the webpage in the client by the user, and only the focus area is loaded and displayed, so that the loading speed of the webpage is increased, and the user experience is improved.

Description

Technical Field

[0001] The present application relates to the technical field of intelligent terminals, and in particular to a web page display method, an electronic device, and a readable storage medium. Background Art

[0002] Currently, accessing various web pages through browsers or application APP clients has become one of the important channels for people to obtain information. The existing page rendering methods are mainly divided into two categories: client kernel rendering and cloud server collaborative rendering.

[0003] Client kernel rendering means that the client sends a web page request directly to the website without going through any proxy server. For example, the client can send a request to the website directly through the hypertext transfer protocol (HTTP). After the client obtains the website's response to the request, it first parses the response information based on the HTTP protocol, then parses the hypertext markup language (HTML) and downloads the sub-resources, generates a document object model tree (DOM-Tree), completes the web page rendering based on the DOM-Tree, and finally displays the rendered web page on the mobile terminal. Since the interaction between the client and the web server requires continuous and repeated interaction of all rendering-related data information, the amount of interactive data is large, the traffic consumption is large, and the transmission time is long, resulting in a long time for the web page to load after the user clicks the web page control.

[0004] Cloud server collaborative rendering means that the client sends a request to the cloud server, which accesses the web page, parses and renders the page data in the server cluster, and then sends the rendering result to the client through the agreed protocol. The client displays the rendering result on the terminal. Compared with the client kernel rendering solution, cloud server collaborative rendering can reduce the amount of interactive data between the cloud server and the client.

[0005] However, in the cloud server collaborative rendering solution, the cloud server needs to send all the rendered web page data to the client, resulting in a large amount of data interaction between the cloud server and the client. In addition, the client needs to render a complete web page before providing the web page content to the user, which makes the client's web page rendering calculation too large, which will cause the web page to load slowly and affect the user experience.

[0006] Therefore, how to reduce the amount of data processed by the client during web page rendering has become an urgent problem to be solved. Summary of the invention

[0007] The present application provides a web page display method, which is applied to a first electronic device. The method detects that a user browses a first part of a first web page at a first sliding speed, wherein the first sliding speed is greater than a first sliding speed threshold; displays a thumbnail of the first part; detects that a user browses a second part of the first web page at a second sliding speed, wherein the second sliding speed is less than a second sliding speed threshold, and the second sliding speed threshold is less than or equal to the first sliding speed threshold; and displays the web page content of the second part. When a user uses a web page, the focus area that the user wants to view is determined according to the sliding speed of the user sliding the web page in the client, and only the focus area is loaded for display, thereby improving the loading speed of the web page and improving the user experience.

[0008] In a first aspect, an embodiment of the present application provides a web page display method, which is applied to a first electronic device, and is characterized in that the method includes: detecting that a user browses a first part of a first web page at a first sliding speed, wherein the first sliding speed is greater than a first sliding speed threshold; displaying a thumbnail of the first part; detecting that the user browses a second part of the first web page at a second sliding speed, wherein the second sliding speed is less than a second sliding speed threshold, and the second sliding speed threshold is less than or equal to the first sliding speed threshold; and displaying the web page content of the second part.

[0009] It can be understood that the first electronic device is a terminal device, on which a client can be provided. When the first electronic device detects that the user slides quickly, it uses thumbnails to navigate the user. The thumbnail can provide the user with the thumbnail page content corresponding to the page position slid by the quick sliding operation (that is, the thumbnail page content corresponding to the first part). The web page will not be displayed during the quick sliding process, and only a blank page will be provided to the user. When it is detected that the user is not sliding quickly (for example, sliding at the second sliding speed), the page content browsed by the user when not sliding quickly (that is, the page content corresponding to the second part) is displayed in sequence. Furthermore, the web page is not rendered when the user slides quickly, so that only the web page content that the user wants to view (that is, the focus web page) is rendered, which can effectively reduce the amount of calculation of the terminal device, reduce the rendering time, and speed up the loading process of the web page.

[0010] In a possible implementation of the first aspect above, detecting that a user is browsing a first part of a first web page at a first sliding speed includes: detecting a first operation of the user on the first web page, sending a first request to a second electronic device so that the second electronic device preloads web page information of the first web page, wherein the web page information includes multiple rendering blocks of the first web page, display parameters of the rendering blocks, and thumbnails of different parts of the first web page.

[0011] That is, the first electronic device (i.e., a terminal device equipped with a client) can send a first request (e.g., a web page request) to the second electronic device (i.e., a server cluster equipped with a cloud) so that the server can preload web page information of the first web page, such as preloading multiple rendering blocks of the first web page, display parameters of the rendering blocks, and thumbnails of different parts of the first web page (i.e., block resources).

[0012] It can be understood that the cloud can cut the rendering tree used to directly render the complete web page into block resources (i.e., multiple rendering blocks of the first web page, display parameters of the rendering blocks, and thumbnails of different parts of the first web page), and send the block resources to the client on the terminal device, and the client downloads the rendering blocks and display parameters on demand based on the focus area to draw the web page of the focus area. Then, the client draws the web page of the focus area according to the rendering blocks corresponding to the focus area combined with the display parameters, and can skip the web page area during the fast sliding process, and provide the user with the focus area that the user wants to browse.

[0013] In a possible implementation of the first aspect above, displaying a thumbnail of the first part includes: detecting that a user browses the first part of a first web page at a first sliding speed, acquiring a thumbnail of the first part of the first web page; and displaying the thumbnail of the first part.

[0014] That is, when a user's quick swipe is detected, a thumbnail of the corresponding web page can be provided to the user, and a thumbnail corresponding to the first part of the web page content that is quickly swiped across can be displayed on the thumbnail, thereby providing the customer with content navigation of the blank page during the quick swipe process, allowing the user to quickly find the location of the web page they want to view.

[0015] In a possible implementation of the first aspect above, detecting that a user browses the second part of a first web page at a second sliding speed and displaying the web page content of the second part includes: detecting that the user browses the second part of the first web page at a second sliding speed; acquiring a rendering block and display parameters of the rendering block corresponding to the second part from a second electronic device, and displaying the web page content of the second part based on the acquired rendering block and display parameters corresponding to the second part.

[0016] That is, when the user does not swipe quickly, the rendering blocks and display parameters of the rendering blocks corresponding to the webpage position browsed by the user are downloaded in sequence, and the second part of the webpage content is displayed according to the downloaded display parameters and rendering blocks. For example, the display parameters can be identification information of the rendering blocks, and then the connection relationship between multiple rendering blocks is distinguished, so as to accurately arrange the multiple rendering blocks and accurately display the second part of the webpage content.

[0017] In a possible implementation of the first aspect above, the web page content of the second part is displayed based on the acquired rendering blocks and display parameters corresponding to the second part, including: splicing the acquired rendering blocks according to the display parameters to obtain a drawing tree corresponding to the second part; and using the drawing tree corresponding to the second part to draw the web page content of the second part.

[0018] That is, after the rendering blocks are spliced, a rendering tree can be obtained, and the second part of the web page content can be directly drawn. It can be understood that the above-mentioned rendering tree is a description file used to describe how each node on the rendering tree is drawn to the screen. It contains the nodes of the rendering tree and the geometric layout information of each node of the rendering tree. Based on the rendering tree, each node of the rendering tree can be directly drawn to the screen. The terminal device only needs to download the rendering blocks → splice the rendering blocks → use the rendering tree to draw the web page. There is no need to perform the rendering operation again to obtain the rendering tree, nor is there any need to process the rendering tree to obtain the rendering tree, thereby effectively reducing the rendering calculation amount of the terminal device and saving the computing resources of the terminal device.

[0019] In a possible implementation of the first aspect above, the display parameters of the rendering block include meta-information and multiple identification points of the rendering block, and the rendering blocks obtained are spliced ​​according to the display parameters to obtain a rendering tree corresponding to the second part, including: identifying different rendering blocks according to the meta-information; splicing different rendering blocks according to the multiple identification points to obtain the rendering tree corresponding to the second part.

[0020] That is, the meta information is used to identify different rendering blocks, and the identification points are used to link adjacent rendering blocks. Each rendering block contains at least two nodes, and a single node contains web page content data and location data on the web page where the content is located, so that the web page content at the corresponding location can be drawn based on each rendering block, and multiple rendering blocks can also be reversely restored to a drawing tree that can be used to draw a complete client display page. The calculation amount of the restoration process is small, saving the computing resources of the terminal device.

[0021] In a possible implementation of the first aspect, acquiring the rendering block and the display parameters of the rendering block corresponding to the second portion from the second electronic device further includes: acquiring at least one rendering block adjacent to the rendering block of the second portion from the second electronic device.

[0022] It is understandable that the user's sliding operation will cause the focus area (i.e., the page position currently viewed by the user) to change. The first electronic device can detect the user's operation to determine the user's browsing speed, and then predict the rendering blocks to be downloaded according to the user's browsing speed. For example, multiple browsing speed thresholds can be set, and different numbers of rendering blocks can be newly downloaded to the download queue according to different browsing speed thresholds.

[0023] In a possible implementation of the first aspect above, the method further includes: caching rendering blocks corresponding to the second part, and deleting rendering blocks with the largest priority values ​​from the cache according to a first condition, wherein the first condition includes a preset deletion frequency and a priority value of the rendering blocks.

[0024] In some embodiments, the downloaded rendering blocks can be cached in the local cache memory of the terminal device within a specified time period, so that the user does not need to repeatedly download the rendering blocks when repeatedly launching the same web page within the specified time period, thereby reducing the amount of interactive data with the second electronic device.

[0025] It is understandable that if the user repeatedly accesses the same web page Q and the block resources of the web page Q have not been cleared from the cache, repeated downloading of the block resources can be avoided, thereby reducing the amount of data obtained by the client.

[0026] For cached segmented resources, the segmented resources that need to be deleted in the cache can be deleted at a preset deletion frequency to avoid excessive occupation of the cache capacity. In some embodiments, the preset condition may include multiple conditions, such as a preset deletion frequency, a cache duration of a rendering block, a file size of a rendering block, a weight parameter related to the importance of a rendering block, etc.

[0027] In a possible implementation of the first aspect above, the rendering block with the largest priority value is deleted from the cache according to the first condition, including: determining the cache time length value, number value and file volume value of each rendering block; multiplying the cache time length value, number value and file volume value of each rendering block to determine the priority value of each rendering block; and deleting the rendering block with the largest priority value from the cache at a preset deletion frequency.

[0028] That is, the priority value can be a weight score value. The larger the weight score value, the higher the priority of eliminating the rendering block (i.e. deleting the cached rendering block). Therefore, the first rendering block of the web page is deleted as late as possible, ensuring that the first screen of the page can be cached for a longer time, avoiding the homepage showing an empty web page when the user clicks to enter the web page, and ensuring the user's browsing experience.

[0029] In some embodiments, when the first rendering block of the web page is deleted, the display parameters and the file corresponding to the thumbnail control are also deleted.

[0030] In a possible implementation of the first aspect above, after displaying the thumbnail of the first part, it also includes: detecting a third operation of the user on the thumbnail, determining the third part of the first web page according to the third operation, wherein the third operation includes the user clicking an operation on a selection box of the thumbnail; and displaying the web page content of the third part.

[0031] That is, the page thumbnail control may include a check box, which is suspended above the page thumbnail layer, and the user's third operation may be obtained through the check box, such as a click operation, or a drag operation or a long press operation on the check box. The corresponding focus area on the web page is determined by the check box, and the rendering blocks and display parameters of the focus area are spliced ​​into a drawing tree, and then the web page content of the focus area is drawn. It is convenient for users to skip web page content that they are not concerned about. The first electronic device only needs to download the rendering blocks corresponding to the web page content viewed by the user, and also only needs to draw the web page content of the focus area, which effectively reduces the amount of interactive data and rendering calculation of the client in the first electronic device.

[0032] In a possible implementation of the first aspect above, detecting a third operation of the user on the thumbnail, and determining the third part of the first web page according to the third operation, includes: detecting a selected area of ​​the third operation on the thumbnail, and determining the third part of the first web page based on the framed content of the selected area.

[0033] That is, the thumbnail control provides the user with an entry to display the specified area of ​​the web page. When the user drags / clicks / long presses the above check box, the web page position corresponding to the specified position in the thumbnail selected by the check box can be presented to the user. It is convenient for users to skip web page content that they are not interested in. The first electronic device only needs to download the rendering blocks corresponding to the web page content viewed by the user, and also only needs to draw the web page content in the focus area, which effectively reduces the amount of interactive data and rendering calculation of the client in the first electronic device.

[0034] In a possible implementation of the first aspect above, displaying the third part of the web page content includes: obtaining a rendering block corresponding to the third part and display parameters of the rendering block corresponding to the third part from a second electronic device; and displaying the third part of the web page content based on the obtained rendering block and display parameters corresponding to the third part.

[0035] That is, determine the specified position of the web page selected by the user (i.e., the third part), download the rendering blocks and display parameters corresponding to the web page content at the specified position of the web page, and restore the corresponding drawing tree based on the rendering blocks and display parameters to draw the web page content of the third part.

[0036] In a possible implementation of the first aspect above, the first sliding speed and / or the second sliding speed is used to indicate an average speed of a sliding operation of a user sliding the first web page.

[0037] That is, the current sliding speed is the average speed at which the user slides the current web page.

[0038] In other embodiments, the current sliding speed may also be the instantaneous sliding speed before the user slides the finger away from the webpage.

[0039] In a possible implementation of the first aspect above, a method for obtaining the first sliding speed threshold includes: collecting a user's historical sliding speed, inputting the historical sliding speed into a first speed model, and determining a speed offset; superimposing the speed offset on a third sliding speed threshold to determine the first sliding speed threshold, wherein the third sliding speed threshold is a sliding speed threshold preset in the first electronic device.

[0040] In some embodiments, the first sliding speed threshold and the second sliding speed threshold are the same, for example, both are default sliding speed thresholds (ie, the third sliding speed threshold) preset in the first electronic device.

[0041] In other embodiments, the sliding speed threshold can be determined based on a default sliding speed threshold and a speed offset. Among them, the speed offset can be determined by analyzing the user's historical sliding speed according to a preset speed model. For example, the preset speed model can be a speed curve determined for the collected historical sliding speed of the user, so as to achieve self-learning of the user's sliding speed, and then continuously optimize the sliding speed threshold. Since the curvature of the plane curve can determine a unique curve, the offset between the user's habitual sliding speed and the default sliding speed can be calculated based on the first curvature of the speed curve corresponding to the historical sliding speed and the second curvature corresponding to the default sliding speed curve. At this time, by adding the above offset to the default sliding speed threshold, the first sliding speed threshold when the user slides the web page quickly can be determined, and the second sliding speed threshold when the user does not slide the web page quickly can be determined. Thus, the first sliding speed threshold can be greater than the second sliding speed threshold.

[0042] In a second aspect, an embodiment of the present application further provides a web page display method, which is applied to a second electronic device, the method comprising: in response to a first request sent by a first electronic device, preloading web page information of a first web page requested by the first request.

[0043] That is, the second electronic device (i.e., a server cluster provided with a cloud) can obtain a first request from the first electronic device (i.e., a terminal device provided with a client), and the first request can include device information and a web page request, so that the second electronic device can preload the web page information of the first web page. For example, web page resources are obtained based on the web page request, and the web page resources are rendered as a complete web page according to the device information. This saves the computing power of the terminal device and effectively improves the web page loading speed.

[0044] In a possible implementation of the second aspect above, the first request includes device information and a network request of the first electronic device, and, in response to the first request sent by the first electronic device, preloading web page information of the first web page requested by the first request, including: in response to the first request sent by the first electronic device, obtaining web page resources of the first web page, wherein the web page resources are used to represent web page elements and layout positions of web page elements; determining a drawing tree of the first web page based on the web page resources of the first web page; determining multiple rendering blocks of the first web page, display parameters of the rendering blocks, and thumbnails of different parts of the first web page based on the device information of the first electronic device and the drawing tree of the first web page.

[0045] That is, the cloud on the server cluster can preload web pages, where preloading includes pre-rendering the complete original web page, rendering the drawing tree corresponding to the terminal page based on the pre-rendered original web page combined with the device information of the terminal device, splitting the drawing tree into multiple rendering blocks, and obtaining thumbnail controls based on the original web page. As a result, the terminal device only needs to download multiple rendering blocks and restore the rendering block links to the drawing tree to draw the web page content on the screen, effectively reducing the computing workload of the terminal device.

[0046] It can be understood that popular web pages have a high number of views. For the above-mentioned first web page, the cloud on the server cluster can directly cache the requested web page resources, and use the cached web page resources in combination with the device information of different terminal devices to render the corresponding complete web page drawing tree information. There is no need for the cloud to repeatedly request web page resources from the website, which reduces the amount of data interaction in the cloud and speeds up the web page display speed in the cloud.

[0047] In a third aspect, an embodiment of the present application also provides a web page display method, which is applied to an electronic device, wherein the electronic device includes a first electronic device and a second electronic device, and the method includes: the first electronic device detects a first operation of a user on a first web page, and sends a first request to the second electronic device; the second electronic device preloads web page information of the first web page in response to the first request, wherein the web page information includes multiple rendering blocks of the first web page, display parameters of the rendering blocks, and thumbnails of different parts of the first web page; the first electronic device detects that a user browses a second part of the first web page at a second sliding speed, wherein the second sliding speed is less than a second sliding speed threshold, and the second sliding speed is used to indicate the average speed of the user's sliding operation on the first web page; the first electronic device obtains the rendering blocks and display parameters of the rendering blocks corresponding to the second part from the second electronic device, and displays the web page content of the second part based on the obtained rendering blocks and display parameters.

[0048] It can be understood that the first electronic device is a terminal device, on which a client can be arranged. The second electronic device is a server cluster, on which a cloud can be arranged. After obtaining the first operation of the user on the first web page (for example, a hover event or a selection event is monitored), the client can assume that the user has the intention to enter the web page, and at this time sends a request to the cloud so that the cloud preloads the web page. The above-mentioned cloud can cut the drawing tree used to directly render the complete web page into block resources (i.e., multiple rendering blocks of the first web page, display parameters of the rendering blocks, and thumbnails of different parts of the first web page), and send the block resources to the client on the terminal device, and the client downloads the rendering blocks and display parameters on demand based on the focus area to draw the web page of the focus area. Furthermore, the client draws the web page of the focus area according to the rendering blocks corresponding to the focus area in combination with the display parameters, can skip the web page area during the fast sliding process, and can provide the user with the focus area that the user wants to browse in sequence.

[0049] In a possible implementation of the third aspect above, the first request includes device information and a network request of the first electronic device, and the second electronic device preloads the web page information of the first web page in response to the first request, including: the second electronic device obtains web page resources of the first web page in response to the first request, wherein the web page resources are used to represent web page elements and layout positions of web page elements; the second electronic device determines a drawing tree of the first web page based on the web page resources of the first web page; the second electronic device determines multiple rendering blocks of the first web page, display parameters of the rendering blocks, and thumbnails of different parts of the first web page based on the device information of the first electronic device and the drawing tree of the first web page.

[0050] That is, the cloud on the server cluster can preload web pages based on the request sent by the terminal device, where preloading includes pre-rendering the complete original web page, rendering the drawing tree corresponding to the terminal page based on the pre-rendered original web page combined with the device information of the terminal device, splitting the drawing tree into multiple rendering blocks, and obtaining thumbnail controls based on the original web page. As a result, the terminal device only needs to download multiple rendering blocks and restore the rendering block links to the drawing tree to draw the web page content on the screen, effectively reducing the amount of calculation of the terminal device.

[0051] It can be understood that popular web pages have a high number of views. For the above-mentioned first web page, the cloud on the server cluster can directly cache the requested web page resources, and use the cached web page resources in combination with the device information of different terminal devices to render the corresponding complete web page drawing tree information. There is no need for the cloud to repeatedly request web page resources from the website, which reduces the amount of data interaction in the cloud and speeds up the web page display speed in the cloud.

[0052] In a possible implementation of the third aspect above, displaying the second part of the web page content based on the acquired rendering blocks and display parameters includes: the first electronic device splicing the acquired rendering blocks according to the display parameters to obtain a rendering tree corresponding to the second part; and the first electronic device using the rendering tree corresponding to the second part to draw the second part of the web page content.

[0053] That is, after the rendering blocks are spliced, a rendering tree can be obtained, and the second part of the web page content can be directly drawn. It can be understood that the above-mentioned rendering tree is a description file used to describe how each node on the rendering tree is drawn to the screen. It contains the nodes of the rendering tree and the geometric layout information of each node of the rendering tree. Based on the rendering tree, each node of the rendering tree can be directly drawn to the screen. The terminal device only needs to download the rendering blocks → splice the rendering blocks → use the rendering tree to draw the web page. There is no need to perform the rendering operation again to obtain the rendering tree, nor is there any need to process the rendering tree to obtain the rendering tree, thereby effectively reducing the rendering calculation amount of the terminal device and saving the computing resources of the terminal device.

[0054] In a possible implementation of the third aspect above, the display parameters of the rendering block include metadata and multiple identification points of the rendering block, and the first electronic device splices the acquired rendering blocks according to the display parameters to obtain a drawing tree corresponding to the second part, including: the first electronic device identifies different rendering blocks according to the metadata; the first electronic device splices different rendering blocks according to the multiple identification points to obtain a drawing tree corresponding to the second part.

[0055] That is, the meta information is used to identify different rendering blocks, and the identification points are used to link adjacent rendering blocks. Each rendering block contains at least two nodes, and a single node contains web page content data and location data on the web page where the content is located, so that the web page content at the corresponding location can be drawn based on each rendering block, and multiple rendering blocks can also be reversely restored to a drawing tree that can be used to draw a complete client display page. The calculation amount of the restoration process is small, saving the computing resources of the terminal device.

[0056] In a possible implementation of the third aspect above, the first electronic device obtains a rendering block and display parameters of the rendering block corresponding to the second part from the second electronic device, further including: the first electronic device obtains at least one rendering block adjacent to the rendering block of the second part from the second electronic device.

[0057] It is understandable that the user's sliding operation will cause the focus area (i.e., the page position currently viewed by the user) to change. The first electronic device can detect the user's operation to determine the user's browsing speed, and then predict the rendering blocks to be downloaded according to the user's browsing speed. For example, multiple browsing speed thresholds can be set, and different numbers of rendering blocks can be newly downloaded to the download queue according to different browsing speed thresholds.

[0058] In a possible implementation of the third aspect above, the method further includes: the first electronic device caches the rendering blocks corresponding to the second part, and deletes the rendering blocks with the largest priority values ​​from the cache according to a first condition, wherein the first condition includes a preset deletion frequency and a priority value of the rendering blocks.

[0059] In some embodiments, the downloaded rendering blocks can be cached in the local cache memory of the terminal device within a specified time period, so that the user does not need to repeatedly download the rendering blocks when repeatedly launching the same web page within the specified time period, thereby reducing the amount of interactive data with the second electronic device.

[0060] It is understandable that if the user repeatedly accesses the same web page Q and the block resources of the web page Q have not been cleared from the cache, repeated downloading of the block resources can be avoided, thereby reducing the amount of data obtained by the client.

[0061] For cached segmented resources, the segmented resources that need to be deleted in the cache can be deleted at a preset deletion frequency to avoid excessive occupation of the cache capacity. In some embodiments, the preset condition may include multiple conditions, such as a preset deletion frequency, a cache duration of a rendering block, a file size of a rendering block, a weight parameter related to the importance of a rendering block, etc.

[0062] In a possible implementation of the third aspect, the rendering block with the largest priority value is deleted from the cache according to the first condition, including: determining the cache time length value, number value and file volume value of each rendering block; multiplying the cache time length value, number value and file volume value of each rendering block to determine the priority value of each rendering block; and deleting the rendering block with the largest priority value from the cache at a preset deletion frequency.

[0063] That is, the priority value can be a weight score value. The larger the weight score value, the higher the priority of eliminating the rendering block (i.e. deleting the cached rendering block). Therefore, the first rendering block of the web page is deleted as late as possible, ensuring that the first screen of the page can be cached for a longer time, avoiding the homepage showing an empty web page when the user clicks to enter the web page, and ensuring the user's browsing experience.

[0064] In some embodiments, when the first rendering block of the web page is deleted, the display parameters and the file corresponding to the thumbnail control are also deleted.

[0065] In a possible implementation of the third aspect above, the method also includes: the first electronic device detects that a user is browsing a first part of a first web page at a first sliding speed, wherein the first sliding speed is greater than a first sliding speed threshold, the first sliding speed is used to indicate an average speed of a sliding operation of the user sliding the first web page, and the second sliding speed threshold is less than or equal to the first sliding speed threshold; and a thumbnail of the first part is displayed.

[0066] That is, when the first electronic device detects that the user is sliding quickly, it uses thumbnails to navigate the user. The thumbnail can provide the user with the thumbnail page content corresponding to the page position slid by the quick sliding operation (that is, the thumbnail page content corresponding to the first part). The web page will not be displayed during the quick sliding process, and only a blank page will be provided to the user. When it is detected that the user is not sliding quickly (for example, sliding at the second sliding speed), the page content browsed by the user when not sliding quickly (that is, the page content corresponding to the second part) is displayed in sequence. Furthermore, the web page is not rendered when the user slides quickly, so that only the web page content that the user wants to view (that is, the focus web page) is rendered, which can effectively reduce the amount of calculation of the terminal device, reduce the rendering time, and speed up the loading process of the web page.

[0067] In a possible implementation of the third aspect above, after displaying the thumbnail of the first part, it also includes: detecting a third operation of the user on the thumbnail, determining the third part of the first web page according to the third operation, wherein the third operation includes the user clicking an operation on a selection box of the thumbnail; and displaying the web page content of the third part.

[0068] That is, the page thumbnail control may include a check box, which is suspended above the page thumbnail layer, and the user's third operation may be obtained through the check box, such as a click operation, or a drag operation or a long press operation on the check box. The corresponding focus area on the web page is determined by the check box, and the rendering blocks and display parameters of the focus area are spliced ​​into a drawing tree, and then the web page content of the focus area is drawn. It is convenient for users to skip web page content that they are not concerned about. The first electronic device only needs to download the rendering blocks corresponding to the web page content viewed by the user, and also only needs to draw the web page content of the focus area, which effectively reduces the amount of interactive data and rendering calculation of the client in the first electronic device.

[0069] In a possible implementation of the third aspect above, detecting a third operation of the user on the thumbnail, and determining the third part of the first web page according to the third operation, includes: detecting a selected area of ​​the third operation on the thumbnail, and determining the third part of the first web page based on the framed content of the selected area.

[0070] That is, the thumbnail control provides the user with an entry to display the specified area of ​​the web page. When the user drags / clicks / long presses the above check box, the web page position corresponding to the specified position in the thumbnail selected by the check box can be presented to the user. It is convenient for users to skip web page content that they are not interested in. The first electronic device only needs to download the rendering blocks corresponding to the web page content viewed by the user, and also only needs to draw the web page content in the focus area, which effectively reduces the amount of interactive data and rendering calculation of the client in the first electronic device.

[0071] In a possible implementation of the third aspect above, displaying the third part of the web page content includes: the first electronic device obtains a rendering block corresponding to the third part and display parameters of the rendering block corresponding to the third part from the second electronic device; and based on the obtained rendering block and display parameters corresponding to the third part, displays the third part of the web page content.

[0072] That is, determine the specified position of the web page selected by the user (i.e., the third part), download the rendering blocks and display parameters corresponding to the web page content at the specified position of the web page, and restore the corresponding drawing tree based on the rendering blocks and display parameters to draw the web page content of the third part.

[0073] In a possible implementation of the third aspect above, a method for obtaining the first sliding speed threshold includes: collecting a user's historical sliding speed, inputting the historical sliding speed into a first speed model, and determining a speed offset; superimposing the speed offset on a third sliding speed threshold to determine a first sliding speed threshold, wherein the third sliding speed threshold is a sliding speed threshold preset in the first electronic device.

[0074] In some embodiments, the first sliding speed threshold and the second sliding speed threshold are the same, for example, both are default sliding speed thresholds (ie, the third sliding speed threshold) preset in the first electronic device.

[0075] In other embodiments, the sliding speed threshold can be determined based on a default sliding speed threshold and a speed offset. Among them, the speed offset can be determined by analyzing the user's historical sliding speed according to a preset speed model. For example, the preset speed model can be a speed curve determined for the collected historical sliding speed of the user, so as to achieve self-learning of the user's sliding speed, and then continuously optimize the sliding speed threshold. Since the curvature of the plane curve can determine a unique curve, the offset between the user's habitual sliding speed and the default sliding speed can be calculated based on the first curvature of the speed curve corresponding to the historical sliding speed and the second curvature corresponding to the default sliding speed curve. At this time, by adding the above offset to the default sliding speed threshold, the first sliding speed threshold when the user slides the web page quickly can be determined, and the second sliding speed threshold when the user does not slide the web page quickly can be determined. Thus, the first sliding speed threshold can be greater than the second sliding speed threshold.

[0076] In a fourth aspect, an embodiment of the present application further provides an electronic device, comprising: one or more processors; one or more memories; the one or more memories storing one or more programs, and when the one or more programs are executed by the one or more processors, the electronic device executes the web page display method provided by the first aspect and various possible implementations.

[0077] In a fifth aspect, an embodiment of the present application further provides a computer-readable storage medium, characterized in that instructions are stored on the storage medium, and when the instructions are executed on a computer, the computer executes the web page display method provided by the first aspect and various possible implementations.

[0078] In a sixth aspect, an embodiment of the present application further provides a computer program product, characterized in that it includes a computer program / instruction, which, when executed by a processor, implements the web page display method provided by the above-mentioned first aspect and various possible implementations. BRIEF DESCRIPTION OF THE DRAWINGS

[0079] Figure 1A A schematic diagram of a web page rendering scenario is shown;

[0080] Figure 1B A schematic diagram of a rendering method flow in a web page rendering scenario is shown;

[0081] Figure 2 According to some embodiments of the present application, a schematic diagram of a web page is shown;

[0082] Figure 3A According to some embodiments of the present application, a schematic diagram of web page clipping is shown;

[0083] Figure 3B According to some embodiments of the present application, a schematic diagram of a web page display during fast sliding is shown;

[0084] Figure 4A According to some embodiments of the present application, a hardware structure diagram of a terminal device 100 is shown;

[0085] Figure 4B According to some embodiments of the present application, a schematic diagram of interaction between various structures in a system architecture of a terminal device 100 is shown;

[0086] Figure 5A According to some embodiments of the present application, a schematic diagram of a multi-terminal interaction scenario displayed on a web page is shown;

[0087] Figure 5B According to some embodiments of the present application, a schematic diagram of a web page display method flow is shown;

[0088] Figure 6 According to some embodiments of the present application, a schematic flow chart of a method for obtaining block resources is shown;

[0089] FIG. 7A to FIG. 7D According to some embodiments of the present application, a schematic diagram of a clipping structure of a rendering tree is shown;

[0090] Figure 8According to some embodiments of the present application, a schematic diagram of a cache deletion scenario is shown;

[0091] Fig.9A According to some embodiments of the present application, a schematic diagram of web page rendering is shown;

[0092] Fig. 9B According to some embodiments of the present application, another schematic diagram of web page rendering is shown;

[0093] Fig.10 According to some embodiments of the present application, a schematic diagram of an implementation process of rendering and presenting web page content from an edge server is shown;

[0094] Fig.11 According to some embodiments of the present application, a schematic diagram of a web page display following sliding is shown;

[0095] Fig.12 According to some embodiments of the present application, a schematic diagram of web page display based on thumbnail control is shown;

[0096] Fig.13 According to some embodiments of the present application, a schematic software structure block diagram of the terminal device 100 and the cloud 460 is shown;

[0097] Fig.14 A schematic diagram of a web page rendering method is shown. DETAILED DESCRIPTION

[0098] In order to make the purpose, technical solutions and advantages of the embodiments of the present application clearer, the technical solutions in the embodiments of the present application will be described in detail below in conjunction with the accompanying drawings and specific implementation methods.

[0099] The illustrative embodiments of the present application include, but are not limited to, a web page display method, an electronic device, and a computer-readable storage medium.

[0100] Figure 1A A schematic diagram of a web page rendering scenario is shown.

[0101] refer to Figure 1A The user may be a management user of the terminal 100, and the terminal 100 may be connected to the server 200. The terminal 100 may be installed with a client 101 for obtaining a web page request from the user and sending the web page request to the server 200.

[0102] The server 200 may be a cloud server, which may be a server cluster for building a cloud. The server 200 may further include a cloud browser 201 for receiving a web page request sent by the client 101 and sending the web page request to the web server 202 to obtain web page resources from the web server 202. The cloud browser 201 may render and layout the obtained web page resources, obtain the rendered web page and send it to the client 101, so that the client 101 can display the rendered web page to the user.

[0103] It can be understood that the above cloud is a software platform that uses application virtualization technology, integrating multiple functions such as software search, download, use, management, backup, etc. Through this platform, various commonly used software can be encapsulated in an independent virtualized environment, so that the application software will not be coupled with the system.

[0104] Figure 1B Shown above Figure 1A A schematic diagram of a rendering method flow in a web page rendering scenario is shown.

[0105] refer to Figure 1B , the method comprises the following steps:

[0106] S1, the browser local client 101 sends a browsing request to the browser cloud server 201.

[0107] S2, the browser cloud server 201 returns the web page data that has been parsed once to the browser local client 101.

[0108] S3, the browser local client 101 performs secondary analysis on the web page data.

[0109] S4, the browser local client 101 sends a download request to the browser cloud server 201.

[0110] S5, the browser local client 101 downloads the web page elements from the browser cloud server 201.

[0111] S6, the browser local client 101 renders the web page elements.

[0112] S7, the browser local client 101 displays the rendering result on the display output device of the local terminal.

[0113] Combined with the above Figure 1A and Figure 1BIt can be seen that what the browser cloud server 201 transmits back to the client 101 is the complete web page information obtained by preliminary parsing of the web page URL. Therefore, the client 101 needs to perform a secondary URL parsing on the web page information after the preliminary parsing to obtain the complete web page content, such as downloading the web page elements again and rendering the web page elements sequentially to provide the user with web page content.

[0114] For example, refer to Figure 2 , in the client window 203 of the terminal 100, area 203a is rendered first, and then the web page content in area 203b and area 203c is rendered. If the user wants to view the subsequent web page content, it is necessary to render areas 203a, 203b and 203c in window 203 first. If the user only pays attention to part of the focus information on the web page, for example, the user wants to view a single picture at the end of the web page, then the client 101 still needs to render and draw the web page content before the picture in sequence, and finally draw the picture at the end of the web page, resulting in the user having to wait for the client 101 to complete the overall rendering and drawing of the web page before seeing the picture at the end, and the user experience is poor. It can be understood that in this web page rendering method, the client 101 still needs to calculate and process a large amount of redundant information, resulting in a large amount of calculation for the client 101 and a long time required for rendering and drawing.

[0115] It is understandable that this solution will cause the terminal where the client is located to consume a lot of power and is difficult to apply to lightweight devices, such as wearable devices and other Internet of Things (IoT) devices.

[0116] In order to solve the problem that the client calculates and processes a large amount of redundant information, resulting in excessive consumption of client resources, an embodiment of the present application provides a web page display method. When the method determines that the user has the intention to start the web page, for example, when the client of the terminal device detects the user's hover operation or selection operation on the web page, the web page request is sent to the cloud, so that the cloud can preload the web page that the user intends to start before the user starts the web page. For example, preloading can include generating multiple rendering blocks of blocks, display parameters corresponding to the rendering blocks, and thumbnails of the complete web page rendered based on device information and web page resources. For example, the rendering block is the rendering tree information of the block, which can contain web page content, such as articles, images, etc.; the display parameter can be a placeholder for identifying the location of the rendering block on the web page, which can be used to restore the adjacent rendering blocks to the rendering tree to draw the focus area of ​​the web page. Then, in the process of the user using the web page, the user's focus area is determined according to the sliding speed of the user sliding the web page in the client, and the rendering block corresponding to the focus area is downloaded from the cloud for display.

[0117] For example, when the user slides the page at a high speed, for example, sliding over a 10-cm webpage in 1 second, it can be considered that the user is not paying much attention to the content in the webpage area displayed in the current window. At this time, a thumbnail of the webpage can be displayed during the sliding process to provide content navigation for the user, so that the user can easily find the information of interest in the webpage content. When the user slides the page at a low speed, for example, sliding over only 1 cm of the webpage in 1 second, it can be considered that the user is browsing the webpage content displayed in the current window in sequence. In this case, the corresponding rendering blocks are downloaded in sequence during the sliding operation, and the focus area of ​​the webpage is drawn in sequence and presented to the user.

[0118] Through the above solution, the client does not need to render the web page, but directly draws the focus area based on the downloaded rendering blocks, which can effectively reduce the client's calculation workload, reduce the client's rendering time, and reduce the amount of data downloaded by the client.

[0119] It can be understood that the above-mentioned rendering tree is a description file for describing how each node on the rendering tree is drawn to the screen. It contains the nodes of the rendering tree and the geometric layout information of each node of the rendering tree. Based on the rendering tree, each node of the rendering tree can be directly drawn to the screen.

[0120] It is understood that in the embodiment of the present application, whether the user's sliding operation on the webpage is a fast sliding operation can be determined by detecting the current sliding speed of the user's sliding operation. For example, a sliding speed threshold is set, and when it is detected that the current sliding speed corresponding to the sliding track is greater than the sliding speed threshold, the user's sliding operation on the webpage is a fast sliding operation.

[0121] Exemplarily, the current sliding speed is the average speed at which the user slides the current webpage.

[0122] In other embodiments, the current sliding speed may also be the instantaneous sliding speed before the user slides the finger away from the webpage.

[0123] It can be understood that the above sliding speed threshold can be a first sliding speed threshold and a second sliding speed threshold. When the current sliding speed is greater than the first sliding speed threshold, it can be determined that the user operation is a fast sliding, and when the current sliding speed is less than or equal to the second sliding speed threshold, it can be determined that the user operation is a non-fast sliding. Among them, the first sliding speed threshold can be greater than or equal to the second sliding speed threshold.

[0124] In some embodiments, the first sliding speed threshold and the second sliding speed threshold are the same, for example, both are default sliding speed thresholds preset in the electronic device 100 .

[0125] In other embodiments, the sliding speed threshold can be determined based on a default sliding speed threshold and a speed offset. Among them, the speed offset can be determined by analyzing the user's historical sliding speed according to a preset speed model. For example, the preset speed model can be a speed curve determined for the collected historical sliding speed of the user, so as to achieve self-learning of the user's sliding speed, and then continuously optimize the sliding speed threshold. Since the curvature of the plane curve can determine a unique curve, the offset between the user's habitual sliding speed and the default sliding speed can be calculated based on the first curvature of the speed curve corresponding to the historical sliding speed and the second curvature corresponding to the default sliding speed curve. At this time, by adding the above offset to the default sliding speed threshold, the first sliding speed threshold when the user slides the web page quickly can be determined, and the second sliding speed threshold when the user does not slide the web page quickly can be determined. Thus, the first sliding speed threshold can be greater than the second sliding speed threshold.

[0126] It can be understood that the cloud is a software platform deployed on a server cluster.

[0127] In some embodiments, the cloud can crop the web page based on the hardware display parameters of the terminal device to obtain multiple rendering blocks and display parameters corresponding to the multiple rendering blocks. For example, the size of each rendering block and the corresponding display parameters can be determined according to the screen size of the terminal device where the client is located. When the focus area that the user is viewing is determined, a single rendering block and its corresponding display parameters are merged to render a web page layer that occupies the entire screen, avoiding the presentation of an empty web page, and providing the user with a better web browsing experience.

[0128] Combine the following Figure 3A The process of cropping a web page to obtain a minimum rendering block in some embodiments of the present application is described in detail.

[0129] Figure 3A According to some embodiments of the present application, a schematic diagram of web page clipping is shown.

[0130] refer to Figure 3A , the cloud can be based on the page elements 300 and Figure 2 The device information 301 of the terminal device 100 mentioned in the figure renders a web page 302. The page element 300 may include rendering tree data information of the web page, such as web page address, image data, etc. The device information 301 of the terminal device 100 may include screen size, font type, screen resolution, etc., so as to render the rendering tree data information into a web page suitable for display by the terminal device 100.

[0131] It can be understood that the web page 302 is a complete web page rendered by the cloud based on web resources, but the cloud cannot directly draw the drawing tree of the above complete web page on the client's screen. In this application, the cloud can cut the drawing tree used to directly render the complete web page 302 into block resources 303, and send the block resources 303 to the client on the terminal device, and the client downloads the rendering blocks and display parameters on demand based on the focus area to draw the web page in the focus area. Among them, the block resource 303 has three files:

[0132] (1) Page thumbnail control 303a;

[0133] (2) Display parameters 303b of the rendering style without web page content;

[0134] (3) The minimum rendering block 303c cut according to the device screen display size.

[0135] The display parameter 303b is an identifier for identifying the position of a single rendering block on a web page. If the content of a web page is cut into multiple rendering blocks 303c, for example, "1" to "9" in the figure are 9 rendering blocks, there is an identifier linking the rendering tree context on the adjacent rendering blocks after cutting, so that each rendering block can be spliced ​​into a rendering tree for rendering the focus area through the display parameter. For example, when a user scrolls to a certain position in a web page, the display parameters of the rendering block of the web page area can be queried from the web page position, and then the corresponding rendering block is obtained according to the display parameter, and the rendering blocks are spliced ​​through the display parameters to render the web page content of the focus area that the user wants to view.

[0136] In some embodiments, the client detects a user hover operation, determines the web page address associated with the control corresponding to the hover operation, and sends the request information of the web page address to the cloud together with the device information 301. After receiving the web page address, the cloud can request the site of the web page to download the web page resources, obtain the page element 300, and render the complete web page 302 in combination with the device information 301, wherein the device information 301 includes but is not limited to the font type and screen size information. Furthermore, the cloud can crop the rendered web page 302 based on the screen size information in the device information 301, and obtain the display parameters 303b representing the web page position of the rendering block 303c and multiple rendering blocks 303c cropped according to the device screen size. In addition, a page thumbnail can be obtained through the drawing tree of the rendered complete web page 302, thereby constructing a page thumbnail control 303a.

[0137] At this time, if the client detects that the user clicks on the webpage address just hovered, in response to the click, the rendering block corresponding to the current focus area is determined according to the user's sliding operation, and the rendering block corresponding to the current focus area is downloaded from the cloud and cached. If the sliding operation is detected to be a fast sliding, the user stops sliding to determine the focus area, and the client draws the webpage of the focus area according to the rendering block corresponding to the focus area combined with the display parameters, skips the webpage area during the fast sliding process, and provides the user with the focus area that the user wants to browse.

[0138] For example, refer to Figure 3B , when the terminal device 100 detects the user's quick sliding operation 304, the web page areas marked with "2 empty", "3 empty" and "4 empty" by the display parameter passed by the user during the quick sliding operation are not rendered, and are presented as empty web pages. For example, the empty web page displayed in the window 306 can be the display effect of any web page area marked with "2 empty", "3 empty" and "4 empty" by the display parameter. At this time, the client in the terminal device 100 can call out the thumbnail, and use the thumbnail as the layer of the window control to obtain the thumbnail control 305. The thumbnail control 305 includes a selection box 305a, and the content selected by the selection box 305a is the web page area presented in the current window. The thumbnail can provide the user with web page content navigation, which helps the user skip the web page content that he does not care about, and effectively guarantees the user's web browsing experience. When the quick sliding operation is detected to stop, the focus area is "5". At this time, only the rendering block "5" needs to be downloaded to draw the web page content in the focus area corresponding to "5" for the user. Therefore, only the web page content viewed by the user is downloaded and drawn, which effectively reduces the rendering calculation amount on the client, effectively reduces the amount of data interaction between the client and the cloud, and speeds up the display speed of the web page.

[0139] It can be understood that the terminal devices applicable to the above-mentioned web page display method provided in the embodiment of the present application may include but are not limited to mobile phones, folding screen mobile phones, tablet computers, desktops, laptops, handheld computers, netbooks, and electronic devices with screens such as augmented reality (AR) / virtual reality (VR) devices, smart TVs, smart watches, etc. In some embodiments, the terminal devices used in this application are lightweight devices such as IoT devices, such as wearable devices, etc. The screen of the terminal device to which this application is applicable can be either a capacitive touch screen (i.e., a capacitive screen) or a resistive touch screen, which is not limited here.

[0140] Combine the following Figure 4A and Figure 4B The software and hardware structure of the terminal device to which the web page display method provided in the embodiment of the present application is applicable is described in detail.

[0141] Figure 4A According to some embodiments of the present application, a schematic diagram of the hardware structure of a terminal device 100 is shown.

[0142] like Figure 4A As shown, the terminal device 100 may include a processor 110, an external memory interface 120, an internal memory 121, a universal serial bus (USB) interface 130, a charging management module 140, a power management module 141, a battery 142, an antenna 1 (not shown in the figure), an antenna 2 (not shown in the figure), a mobile communication module 150, a wireless communication module 160, an audio module 170, a speaker 170A, a receiver 170B, a microphone 170C, an earphone interface 170D (not shown in the figure), a sensor module 180, a button 190, a motor 191, an indicator 192, a camera 193, a display screen 194, and a subscriber identification module (SIM) card interface 195, etc. The sensor module 180 may include a pressure sensor 180A, a gyroscope sensor 180B, an acceleration sensor 180E, a distance sensor 180F, a touch sensor 180K, an ambient light sensor 180L, etc.

[0143] It is understandable that the structure illustrated in the embodiment of the present application does not constitute a specific limitation on the terminal device 100. In other embodiments of the present application, the terminal device 100 may include more or fewer components than shown in the figure, or combine certain components, or split certain components, or arrange the components differently, which is not limited here.

[0144] The processor 110 may include one or more processing units, for example, the processor 110 may include an application processor (AP), a modem processor, a graphics processor (GPU), an image signal processor (ISP), a controller, a video codec, etc. Among them, different processing units may be independent devices or integrated into one or more processors.

[0145] In some embodiments, the graphics processor may render a web content interface based on the web content and display parameters downloaded from the cloud by the client.

[0146] In some embodiments, the controller generates an operation control signal according to the instruction operation code and timing signal of the processor 110 to complete the control of fetching and executing instructions to execute the web page display method provided in the embodiments of the present application.

[0147] The processor 110 may also be provided with a memory for storing instructions and data.

[0148] In some embodiments, the processor 110 may include one or more interfaces. In some embodiments, the processor 110 may include one or more interfaces. The interface may include an inter-integrated circuit (I2C) interface, an inter-integrated circuit sound (I2S) interface, a pulse code modulation (PCM) interface, a universal asynchronous receiver / transmitter (UART) interface, a mobile industry processor interface (MIPI), a general-purpose input / output (GPIO) interface, a subscriber identity module (SIM) interface, and / or a universal serial bus (USB) interface, etc. Among them, the USB interface 130 can be used to connect a charger to charge the terminal device 100, and can also be used to transmit data between the terminal device 100 and peripheral devices.

[0149] The processor 110 may also be provided with a memory for storing instructions and data. In some embodiments, the memory in the processor 110 is a cache memory. The memory may store instructions or data that the processor 110 has just used or cyclically used. If the processor 110 needs to use the instruction or data again, it may be directly called from the memory. This avoids repeated access, reduces the waiting time of the processor 110, and thus improves the efficiency of the system.

[0150] In some embodiments, the memory may be used to cache web resources, such as web page elements, downloaded by the client from the cloud. In some implementations, the client may also download display parameters from the cloud and cache them in the memory.

[0151] The charging management module 140 is used to receive charging input from the charger. The power management module 141 is used to connect the battery 142, the charging management module 140 and the processor 110. The power management module 141 receives input from the battery 142 and / or the charging management module 140 to power the processor 110, the internal memory 121, the display screen 194, the camera 193, and the wireless communication module 160.

[0152] The wireless communication function of the terminal device 100 can be implemented through the antenna 1, the antenna 2, the mobile communication module 150, the wireless communication module 160, the modem processor and the baseband processor.

[0153] Antenna 1 and antenna 2 are used to transmit and receive electromagnetic wave signals. Each antenna in terminal device 100 can be used to cover a single or multiple communication frequency bands. Different antennas can also be reused to improve antenna utilization.

[0154] The mobile communication module 150 may provide wireless communication solutions including 2G / 3G / 4G / 5G etc. applied to the terminal device 100. The modem processor may include a modulator and a demodulator.

[0155] The wireless communication module 160 can provide wireless communication solutions for application in the terminal device 100, including wireless local area networks (WLAN) (such as wireless fidelity (Wi-Fi) networks), Bluetooth (BT), global navigation satellite system (GNSS), frequency modulation (FM), near field communication technology (NFC), infrared technology (IR), etc.

[0156] In some embodiments, antenna 1 of terminal device 100 is coupled to mobile communication module 150, and antenna 2 is coupled to wireless communication module 160, so that terminal device 100 can communicate with the network and other devices through wireless communication technology.

[0157] The terminal device 100 implements the display function through a GPU, a display screen 194, and an application processor. The GPU is a microprocessor for image processing, which is connected to the display screen 194 and the application processor. The GPU is used to perform mathematical and geometric calculations for graphics rendering. In some embodiments, it can be used to render the current focus rendering block, the corresponding display parameters and the current interface, and render the web page content corresponding to the focus area. The processor 110 may include one or more GPUs that execute program instructions to generate or change display information.

[0158] The display screen 194 is used to display images, videos, etc. The display screen 194 includes a display panel. The display panel can be a liquid crystal display (LCD), an organic light-emitting diode (OLED), an active-matrix organic light-emitting diode or an active-matrix organic light-emitting diode (AMOLED), a flexible light-emitting diode (FLED), Mini-LED, Micro-LED, Micro-OLED, quantum dot light-emitting diodes (QLED), etc. In some embodiments, the terminal device 100 may include 1 or N display screens 194, where N is a positive integer greater than 1.

[0159] The terminal device 100 can realize the shooting function through ISP, camera 193, video codec, GPU, display screen 194 and application processor.

[0160] The ISP is used to process the data fed back by the camera 193. For example, when taking a photo or shooting a video, the shutter is opened, and the light is transmitted to the camera photosensitive element through the lens. The light signal is converted into an electrical signal, and the camera photosensitive element transmits the electrical signal to the ISP for processing and converts it into an image visible to the naked eye. The ISP can also perform algorithm optimization on the noise, brightness, and skin color of the image. The ISP can also optimize the exposure, color temperature and other parameters of the shooting scene. In some embodiments, the ISP can be set in the camera 193.

[0161] The camera 193 is used to capture still images or videos. The object generates an optical image through the lens and projects it onto the photosensitive element. The photosensitive element can be a charge coupled device (CCD) or a complementary metal-oxide-semiconductor (CMOS) phototransistor. The photosensitive element converts the optical signal into an electrical signal, and then passes the electrical signal to the ISP to be converted into a digital image signal. The ISP outputs the digital image signal to the DSP for processing. The DSP converts the digital image signal into an image signal in a standard RGB, YUV or other format. In some embodiments, the terminal device 100 may include 1 or N cameras 193, where N is a positive integer greater than 1.

[0162] Video codecs are used to compress or decompress digital video.

[0163] The external memory interface 120 can be used to connect an external memory card, such as a Micro SD card, to expand the storage capacity of the terminal device 100.

[0164] The internal memory 121 can be used to store computer executable program codes, which include instructions. The internal memory 121 may include a program storage area and a data storage area. Among them, the data storage area can store data created during the use of the terminal device 100 (such as video data obtained by shooting, etc.). In addition, the internal memory 121 may include a high-speed random access memory, and may also include a non-volatile memory, etc. The processor 110 executes various functional applications and data processing of the terminal device 100 by running instructions stored in the internal memory 121 and / or instructions stored in a memory provided in the processor.

[0165] The terminal device 100 can implement audio functions such as music playing and recording through the audio module 170, the speaker 170A, the receiver 170B, the microphone 170C, the headphone jack 170D, and the application processor.

[0166] The pressure sensor 180A is used to sense the pressure signal and can convert the pressure signal into an electrical signal. In some embodiments, the pressure sensor 180A can be disposed on the display screen 194 .

[0167] There are many types of pressure sensors 180A, such as resistive pressure sensors, inductive pressure sensors, capacitive pressure sensors, etc. Capacitive pressure sensors can be at least two parallel plates with conductive materials. When a force acts on the pressure sensor 180A, the capacitance between the electrodes changes. The terminal device 100 determines the intensity of the pressure based on the change in capacitance. When a touch operation acts on the display screen 194, the terminal device 100 detects the intensity of the touch operation based on the pressure sensor 180A. The terminal device 100 can also calculate the position of the touch based on the detection signal of the pressure sensor 180A.

[0168] The gyro sensor 180B may be used to determine the motion posture of the terminal device 100 .

[0169] The acceleration sensor 180E can detect the magnitude of the acceleration of the terminal device 100 in various directions (generally three axes). When the terminal device 100 is stationary, the magnitude and direction of gravity can be detected. It can also be used to identify the posture of the terminal device and applied to applications such as horizontal and vertical screen switching.

[0170] The distance sensor 180F is used to measure the distance. The terminal device 100 can measure the distance by infrared or laser.

[0171] The ambient light sensor 180L is used to sense the brightness of ambient light.

[0172] The touch sensor 180K is also called a "touch panel". The touch sensor 180K can be set on the display screen 194, and the touch sensor 180K and the display screen 194 form a touch screen, also called a "touch screen". The touch sensor 180K is used to detect touch operations acting on or near it. The touch sensor can pass the detected touch operation to the application processor to determine the type of touch event. Visual output related to the touch operation can be provided through the display screen 194. In some embodiments, the user's hover operation and click operation on the web page control can be obtained through the touch sensor 180K.

[0173] Figure 4B According to some embodiments of the present application, a schematic diagram of the interaction between various structures in the system architecture of a terminal device 100 is shown.

[0174] refer to Figure 4B The system architecture of the terminal device 100 may include an application layer 440, an application framework layer 430, a system service layer 420, a kernel layer 410 and a hardware layer 400 in sequence.

[0175] The kernel layer 410 can shield the differences between different kernels and provide basic kernel capabilities to the upper layer, including process / thread management, memory management, file system, network management, and peripheral management.

[0176] The kernel layer 410 may include a kernel abstraction layer 411 and a hardware driver framework 412 .

[0177] The kernel abstract layer 411 (KAL) includes multiple kernels, including the Linux kernel, LiteOS, graphics processing unit (GPU) and other kernels, and supports the selection of suitable OS kernels for different resource-constrained devices. The kernel abstract layer can shield the differences between multiple kernels and provide basic kernel capabilities to the upper layer, including process / thread management, memory management, file system, network management and peripheral management.

[0178] It can be understood that the above-mentioned GPU can be used to construct and render web page resources input into the system.

[0179] The hardware driver foundation 412 (HDF) is used to provide unified peripheral access capabilities and driver development and management framework.

[0180] The system service layer 420 includes distributed task scheduling 423, distributed data management 422 and distributed soft bus 421. The system service layer 420 connects different hardware (sensors, screens, cameras, etc.) on different devices loaded with the same software system in series through distributed task scheduling 423, distributed data management 422 and distributed soft bus 421, so that all devices loaded with the same software system can find different hardware on the distributed soft bus 423.

[0181] It is understandable that the above operating system can be Hongmeng TM Operating System (Harmony TM OS), Android TM (Android TM ) operating system or other operating systems with similar system architecture are not limited here.

[0182] It can be understood that the above-mentioned distributed task scheduling 423 can select the most suitable device to run the distributed task according to the capabilities, locations, business operation status, resource usage of different devices and in combination with the user's habits and intentions.

[0183] The distributed data management 422 can manage data storage and business logic on different devices separately. For example, if device A stores music data but is not equipped with a speaker, and device B is equipped with a speaker, the distributed data management 422 can send the music data stored in device A to device B for playback. It can be understood that the user's data is no longer bound to a single physical device, and the business logic is separated from the data storage.

[0184] The distributed soft bus 421 enables all devices loaded with the same software system to search for different hardware on the distributed soft bus 421. For example, device A can determine through the distributed soft bus 421 that device B is equipped with a speaker.

[0185] The application framework layer 430 can shield the differences of the system service layer 420 and provide a unified interface for the application layer 440, which is conducive to the transplantation and deployment of application codes.

[0186] The application framework layer 430 may include a user interface (UI) framework 431 .

[0187] It can be understood that the UI framework 431 is a UI programming framework, which is an infrastructure for developing UIs provided to application developers, and mainly includes UI controls, such as buttons and lists, etc.; view layout, such as placing or arranging corresponding UI controls; animation mechanism, such as animation design and effect presentation; interactive event processing, such as clicking or sliding, etc., as well as corresponding programming languages ​​and programming models, etc. From the perspective of system operation, the UI programming framework also includes a runtime, which is responsible for resource loading, UI rendering, and event response required when the application is executed in the system.

[0188] The application layer 440 may include system applications and third-party non-system applications, wherein the system applications are native applications of the terminal device 100, while the third-party non-system applications are applications used by other devices when using the native application.

[0189] The application layer 440 includes a client 441 and a system user interface 442 .

[0190] In response to user operations, the client 441 can download multiple rendering blocks obtained by cropping the web page from the cloud, and send the multiple rendering blocks and display parameters to the graphics subsystem 450 for rendering fusion to draw the web page content corresponding to the focus area.

[0191] The system user interface 442 (SystemUI) is a core application of the system and belongs to the application layer 440. It is used to present a corresponding interface to the user to feedback the status of the system and related applications and respond to the execution results of user operations, etc. The user can interact with the system through the corresponding interface controlled by the SystemUI.

[0192] Graphics subsystem 450 includes an interface layer, a framework layer, and an engine layer.

[0193] The interface layer includes an interface service 451 for providing an interface of a graphics native development kit (NDK) capability, such as an interface of a drawing tool such as OpenGL ES.

[0194] The framework layer includes rendering services 452 and display and memory management 452.

[0195] The rendering service 452 can be used to provide rendering capabilities, including but not limited to synchronization of UI messages, rendering node and timing management, and management of rendering mechanisms (such as unified rendering and separate rendering, etc.). The rendering service 452 can convert the control description of the UI framework 431 into rendering tree information, and then perform optimal path rendering according to the corresponding rendering strategy.

[0196] Display and memory management 452 may be used to provide composite display management and memory management capabilities.

[0197] The engine layer includes a graphics library 454. The graphics library 454 may include a two-dimensional (2D) graphics library. The 2D graphics library may be used to provide a 2D graphics drawing application program interface (API).

[0198] In the process of implementing the webpage display method provided by the present application, the screen 194 (not shown in the figure) in the hardware layer can detect the user's touch operation and send the detected touch operation signal to the kernel layer 410. The touch operation can be processed as an input event by the hardware driver framework 412 in the kernel layer 410 and sent to the event notification subsystem 460 located in the application framework layer 430 and the system service layer 420. The event notification subsystem 460 can distribute the received input event to the system user interface 442 in the application layer 440.

[0199] Next, the system user interface 442 can determine the target application to call based on the input event. In some embodiments, the target application may include the client 441. For example, when the user's input event is to click on a web page control in the client 441, the system user interface 442 can obtain the input event and call the corresponding client 441 based on the input event. The client 441 can send the area information corresponding to the rendering block to the display and memory management 452 by calling the interface service 451 of the graphics subsystem 450, such as display parameters consistent with the screen size. The display and memory management 452 generates a buffer queue corresponding to the drawing tree based on the screen size information and display parameters, and then sends the buffer queue to the rendering service 452 to render the focus area layer, and sends the focus area layer to the display and memory management 452 for synthesis and display.

[0200] Here, the display and memory management 452 can synthesize the focus area layer with the current view layer to obtain the rendered focus area. The display and memory management 452 can send the rendered focus area to the system user interface 442 by calling the hardware driver framework 412, and the system user interface 442 can call the interface service provided by the hardware driver framework 412 to complete the sending and display, so that the screen 194 displays the focus area interface synthesized by the focus area layer and the current view.

[0201] In other embodiments, the display and memory management 452 can send the rendered focus area interface to the hardware chip 401 of the hardware layer by calling the interface provided by the hardware driver framework 412 (not shown in the figure), so that the system user interface 442 can display the rendered focus area interface on the screen 194 by calling the interface provided by the hardware driver framework 412 (not shown in the figure).

[0202] In some other embodiments, a preset user touch operation can be registered as a monitoring event in the process. For example, a user click operation can be registered as a click event, and a user cursor hover operation can be registered as a hover event. For example, when the user cursor stays on a webpage control for more than a specified time, it can be determined as a hover operation. When the kernel layer 410 monitors that the input event is a click event or a hover event, the corresponding event processing function is called back.

[0203] For example, when the monitored input event is a click event, the client 441 may be called back to download the focus rendering block corresponding to the current click event from the cloud (not shown in the figure).

[0204] For another example, when the input event is detected as a hover event, the client 441 can be called back to send device information and a web page request corresponding to the hovering point to the cloud (not shown in the figure), such as the size information of the screen 194, the preset font information, the web page website address, etc., so that the cloud can obtain web page resources based on the web page request, and render the entire web page based on the screen size information and the preset font information, and crop the drawing tree corresponding to the rendered web page based on the size information of the screen 194, to obtain multiple rendering blocks and display parameters representing the positions of the rendering blocks on the web page.

[0205] Based on the above Figure 4A The structure of the terminal device 100 shown in FIG. Figure 4B The software interaction process of the terminal device 100 shown in the figure is described in detail below with reference to the specific embodiments and related drawings for the specific implementation process of a web page display method provided by the present application.

[0206] The specific implementation process of a web page display method provided by an embodiment of the present application is described in detail below in conjunction with relevant drawings.

[0207] Figure 5A According to some embodiments of the present application, a schematic diagram of a multi-terminal interaction scenario displayed on a web page is shown.

[0208] refer to Figure 5A, the terminal device 100 includes a client 441. The terminal device 100 detects the user's operation on the web page control on the client 441, and the client 441 goes to the server where the website 470 is located to obtain the web page resources based on the web page information corresponding to the operation, and the client 441 can request the above web page resources on behalf of the cloud 460 deployed on the server cluster. For example, when the terminal device 100 obtains the user's hover operation on the web page control, that is, the terminal device detects that the user has the intention to start the web page control, at this time, the client 441 can send a web page request to the cloud 460 deployed on the server cluster, and then the cloud 460 pre-requests the corresponding resources of the web page from the website 470 on behalf of the cloud 460, so as to render a complete web page on the server cluster where the cloud 460 is located, and the drawing tree of the web page is cropped to obtain display parameters and multiple rendering blocks.

[0209] It can be understood that, before the user starts the webpage control to enter the webpage, the cloud 460 obtains webpage resources, renders the complete webpage, and cuts the complete webpage to obtain block resources. When the user's start-up operation on the webpage control is obtained, such as a click operation, the client 441 can monitor the user's sliding operation on the webpage, and according to the monitored sliding operation, only download the rendering block corresponding to the position of the webpage that the user is browsing, and only draw the content of the webpage that the user is browsing, so that the client does not need to perform rendering processing. This can effectively reduce the amount of data that the client 441 needs to download and render, speed up webpage loading, and reduce the resource consumption of the terminal device 100 where the client 441 is located.

[0210] It is understood that the web page request may include the corresponding interaction protocol, host name, port information and request path. In some embodiments, the web page request may be in a uniform resource locator (URL) format, for example, URL A may be used to request web page resources of resource station A, and URL B may be used to request web page resources of resource station B. The cloud 460 may provide users with a variety of micro services in the cloud, such as edge acceleration services.

[0211] As for the cloud 460, after obtaining the web page resources in advance, the web page resources can be cached in the server cluster where the cloud 460 is located, and the web page resources can be clipped based on the device information of the terminal device 100 to obtain the drawing tree of the complete web page. Figure 3A The block resource 303 is shown. The specific cutting process is described below in conjunction with Figure 5B For the sake of brevity, detailed description is omitted here.

[0212] In some embodiments, an edge service 450 is also deployed on the server cluster. The cloud 460 can push the cropped block resources 303 to the edge service 450, and push the edge service path of the edge service 450 to the client 441, so that the client 441 can directly obtain the block resources from the edge service 450, thereby accelerating the process of the client 441 obtaining the block resources 303.

[0213] It can be understood that the edge service 450 can be deployed on a server that is geographically closer to the terminal device 100. For example, an instance can be established on a server in the same city as the terminal device 100. The core server of the cloud 460 deploys the edge service 450 on the server through the instance to provide edge acceleration services for users. When the terminal device 100 needs to obtain web resources, the server where the edge service 450 is located is closer to the terminal device 100 than the server where the website 470 is located. Therefore, the terminal device 100 directly obtains web resources from the edge service 450 at a faster speed, which accelerates the download of web resources. For example, the cloud 460 caches web page A of resource station A from the website 470, and it takes 2 seconds to send the web resources of web page A from the core server to the terminal device 100. If the cloud 460 caches web page A in the edge service 450, it only takes 0.8 seconds for the terminal device 100 to obtain the web resources of web page A through the path corresponding to the edge service 450, which effectively improves the data transmission speed.

[0214] Combine the following Figure 5B For the above Figure 5A The specific method flow of the web page display scenario shown is described in detail.

[0215] Figure 5B According to some embodiments of the present application, a schematic flow chart of a web page display method is shown.

[0216] like Figure 5B As shown, the interaction process includes the following steps:

[0217] S501, the client 441 monitors a hover event or a selection event of a web page control.

[0218] It can be understood that the client 441 can register a monitoring service in the system process of the terminal device 100, and monitor the user's operation on the web page control through the monitoring service. For example, if it is detected that the user's cursor hovers over the icon of the web page control for a long time, a hover event can be monitored; if it is detected that the user clicks the web page control, a selection event can be monitored. The client 441 can be called back for the above hover event or selection event, so that the client 441 generates a web page request associated with the web page control.

[0219] For example, when the client 441 monitors the hover event, the webpage resources can be preloaded locally at the client 441, or a webpage request can be generated to preload the corresponding webpage resources in conjunction with the cloud 460. In essence, the client 441 can predict the possibility of the user entering the webpage based on the hover event, and preload the corresponding webpage resources accordingly.

[0220] S502, the client 441 retrieves whether the local cache contains valid segmented resources. If the local cache contains valid segmented resources, step S501 is executed to continue to listen for hover or selection events until the user enters the webpage, and steps S513 to S517 can be executed. The client 441 can directly render the focus area based on the segmented resources in the local cache and provide it to the user. If the local cache does not contain valid segmented resources, step S503 is executed to obtain valid segmented resources from the cloud 460.

[0221] It can be understood that the block resources include display parameters, rendering blocks and page thumbnail controls, and the effective block resources refer to the block resources that are consistent with the web resources corresponding to the above-mentioned web page controls. If the client 441 retrieves the block resources that are consistent with the web page resources corresponding to the web page controls in the local terminal device 100, the web page of the focus area can be directly drawn based on the locally cached block resources and provided to the user. It can be understood that the above-mentioned locally cached block resources are historical block resources downloaded from the cloud. If it is detected that there are block resources consistent with the current web page resources in the historical block resources, there is no need to download the block resources corresponding to the current web page for the second time. For example, when the user repeatedly starts the same web page control before clearing the cache and wants to view the same web page, the focus area can be directly drawn using the locally cached block resources, avoiding repeated downloading of block resources, reducing the number of interactions between the client 441 and the cloud 460 or the edge service 450, and reducing the amount of data downloaded by the client 441. If the client 441 does not retrieve the block resources that are consistent with the web page resources corresponding to the web page controls in the local terminal device 100, it is necessary to obtain effective block resources from the cloud 460.

[0222] It can be understood that the specific implementation process of the client 441 obtaining the valid block resources from the cloud 460 will be specifically described in steps S503 to S513 below, and will not be repeated here for the sake of brevity.

[0223] In some embodiments, valid block resources may also be obtained from the edge service 450 to efficiently download the block resources.

[0224] S503, the client 441 sends device information and a web page request to the cloud 460 to obtain block resources.

[0225] It can be understood that the device information may include screen size information, font setting information, etc. of the terminal device 100, and the web page request may include the address of the requested web page. Sending the above information to the cloud 460 can enable the cloud 460 to obtain web page resources based on the web page request, and render the web page resources into a complete web page based on the above device information. In addition, the cloud 460 can crop the rendered complete web page to obtain the above-mentioned block resources.

[0226] It can be understood that the above-mentioned cutting process will be described in detail in step S510 below, and will not be described in detail here.

[0227] S504, the cloud 460 searches the local cache to see if it contains valid page rendering resources. If the local cache contains valid page rendering resources, step S507 is executed to further determine whether the local cache contains valid block resources of device information. If the local cache does not contain valid page resources, step S505 is executed to obtain page rendering resources from the website 470.

[0228] It can be understood that the above-mentioned valid page rendering resources are the rendering tree information of the web page corresponding to the web page control, including rendering elements and meta information, etc. Through the valid page rendering resources, the drawing tree information of the complete web page can be rendered in combination with the device information. The cloud 460 can search whether the local cache of the server cluster contains valid page rendering resources, for example, by verifying the hash value to determine whether there are historically cached web page resources. If the cloud 460 has cached the page rendering resources, there is no need to obtain the page rendering resources from the website site 470 again, and directly enter step S507 to confirm whether it contains valid block resources.

[0229] It can be understood that popular web pages have a higher number of views. For the above web pages, the cloud 460 can directly cache the requested web page resources, and use the cached web page resources in combination with the device information of different terminal devices to render the corresponding complete web page drawing tree information. There is no need for the cloud 460 to repeatedly request web page resources from the website 470, which reduces the data interaction volume of the cloud 460 and thereby speeds up the web page display speed of the cloud 460.

[0230] S505 , the cloud 460 sends a web page request to the website 470 .

[0231] It can be understood that the above-mentioned website site 470 is the site corresponding to the web page called by the web page control. The cloud 460 sends a web page request to the website site 470 based on the address of the web page (for example, it can be a URL address) to obtain page rendering resources, such as the rendering tree corresponding to the web page resources.

[0232] S506 , the website 470 sends page rendering resources to the cloud 460 .

[0233] It is understandable that the website 470 can send page rendering resources, such as web page elements, etc. to the cloud 460 based on the received web page request.

[0234] The cloud 460 obtains the page rendering resources and can parse the hypertext markup language (HTML) document and cascading style sheets (CSS) corresponding to the page rendering resources into a rendering tree to render a corresponding drawing tree of a complete web page.

[0235] It can be understood that the above-mentioned render tree can be obtained by combining a document object model tree (DOM tree) and a cascading style sheets object model (CSSOM).

[0236] DOM is a tree-shaped data structure of HTML document parsed, which is the object representation of HTML document and the interface between external content (such as JavaScript) and HTML elements. CSSOM is the object representation of CSS and also provides related interfaces, such as application programming interface (API), to operate CSS styles that represent the layout of web pages.

[0237] It can be seen that the render tree can contain all visible DOM content on the web page and all CSSOM style information of each node. The render tree can be used to calculate the layout of each visible element in the web page and output it to the drawing process to obtain the drawing tree. Rendering the drawing tree to the screen of the terminal device can form a complete web page.

[0238] It can be understood that the above-mentioned rendering tree is a description file for describing how each node on the rendering tree is drawn to the screen, which includes the nodes of the rendering tree and the geometric layout information of each node of the rendering tree. Based on the rendering tree, each node of the rendering tree can be directly drawn to the screen 194.

[0239] S507, cloud 460 searches the local cache to see if it contains valid segmented resources. If the local cache contains valid segmented resources, execute step S511 to further determine whether to push the valid segmented resources to the edge service. If the local cache does not contain valid segmented resources, execute steps S508 to S510, cloud 460 renders the complete page and crops the drawing tree of the page, the segmented rendering blocks and the display parameters corresponding to the rendering blocks, and can also obtain a page thumbnail based on the complete page. Cloud 460 can also cache page thumbnail controls, rendering blocks, and display parameters to obtain valid segmented resources.

[0240] It is understandable that even if the page rendering resources can be retrieved in the local cache of cloud 460, the device information of the terminal device may change, such as changing the font type or font size, etc., and the historical block resources cannot directly render the web page required by the user at this time. Therefore, the block resources can be divided into valid block resources and invalid block resources, among which the block resources that are consistent with the device information are valid block resources, and the block resources that are inconsistent with the device information are invalid block resources. Therefore, when the local cache of cloud 460 does not contain valid block resources, cloud 460 needs to first render a complete web page based on the page rendering resources, and then crop the complete web page according to the device information to obtain the block resources that meet the device information.

[0241] S508, the cloud 460 pre-renders and stores the web page.

[0242] It can be understood that the webpage pre-rendered by the cloud 460 using the rendering tree is a webpage rendered only based on the webpage resources obtained from the website 470. This webpage is difficult to be directly presented to the user by the terminal device 100, for example, the font is not consistent, the webpage size is inconsistent with the display screen 194 size of the terminal device 100, etc., and cannot meet the user's browsing requirements. Therefore, it is necessary to render the pre-rendered webpage again in combination with the device information in step S509 below to obtain a display page that can be displayed by the client 441.

[0243] Exemplarily, the cloud 460 obtains the page resource requested by the web page request from the website 470, and the page resource may include the web page elements corresponding to the web page content such as HTML, CSS, and images of the website, and constructs a rendering tree based on the above web page elements to complete the rendering of the complete web page, and the above rendered web page content may be clustered and stored. For example, the cloud 460 detects the web page request sent by the client, and based on the web page URL in the web page request, the web page source code may be obtained from the website 470. The web page article content may be parsed according to the web page source code. The article content may be split and clustered for storage, for example, the article content may be segmented, for example, each word may be separated based on a space, so as to convert the word into a feature vector corresponding to the website article, and then clustered based on the similarity between the feature vectors, and the content with high similarity may be stored together in the same designated storage location to realize the classified storage of the web page content. Among them, the clustering algorithm may be a K-means algorithm, which is a clustering algorithm for selecting K cluster clusters from a given data set, and the center of each cluster is the mean of the values ​​contained in the cluster.

[0244] It is understandable that the browsing volume of hot web pages can reach a peak in a short period of time. If different models of terminal devices 100 send web page requests for the same web page to the cloud 460, for example, users all want to browse the web page corresponding to the same hot news at the same time, the cloud 460 can only build a rendering tree based on the web page elements and render a web page content, that is, based on the device information of different models of terminal devices 100, render the rendering blocks required by different clients. This effectively reduces the computing processing of the cloud 460, saves the computing resources of the cloud 460, and avoids computing overload of the cloud 460.

[0245] S509, the cloud 460 renders the client display page.

[0246] It can be understood that the above-mentioned cloud 460 can render a web page that can be displayed on the screen 194 of the terminal device 100 based on the rendered complete web page combined with the device information, for example, adjusting the display size, font size, and font type of the complete web page to the display page provided to the user by the client 441, and then obtaining the rendering tree corresponding to the client display page.

[0247] S510, the cloud 460 cuts the client display page into block resources and stores them.

[0248] It is understood that the cloud 460 can cut the rendering tree corresponding to the client display page obtained after rendering into block resources 303, and store the block resources 303 in a designated storage location cached by the cloud 460. In some embodiments, the block resources 303 have three types of files:

[0249] (1) Page thumbnail control 303a;

[0250] (2) display parameter 303b used to characterize the web page location of the rendering block;

[0251] (3) The minimum rendering block 303c cut according to the device screen display size.

[0252] It is understandable that users may have the same model of terminal devices 100, and their device information is often the same, such as the same font information, the same screen size, etc. If a large number of terminal devices 100 of the same model send web page requests for the same web page to the cloud 460, for example, users all want to browse the web page corresponding to the same hot news at the same time, the cloud 460 can only render a block resource, which can be used for a large number of terminal devices 100 of the same model to download multiple rendering blocks corresponding to the web page, thereby accelerating the loading and display process of the web page content. Furthermore, the computing processing of the cloud 460 is effectively reduced, saving the computing resources of the cloud 460.

[0253] Figure 6 According to some embodiments of the present application, a flowchart of a method for acquiring block resources is shown.

[0254] refer to Figure 6 , the page element 300 is input into the rendering device 601 in the cloud 460, and the rendering device 601 pre-renders the page element 300 to obtain a complete web page (not shown in the figure) that does not contain device information. Then, the device information 301 is input into the rendering device 601, and the client display page 302 is rendered. Based on the size information of the screen 194 of the device information 301 and the font type configured in the terminal device 100, the web page content such as the title, text and web page illustrations in the web page can be rendered to meet the display requirements of the terminal device 100, providing a better browsing experience for the user. In addition, the client display page 302 can be input into the cropping device 602, and the page thumbnail control 303a, the display parameter 303b used to characterize the web page position of the rendering block, and a plurality of minimum rendering blocks 303c cropped according to the device screen display size are obtained by cropping.

[0255] It can be understood that the client display page 302 can be represented by a drawing tree structure. The drawing tree has multiple nodes, each of which contains objects. Each object can be an element corresponding to the content on the web page, or the position of a single web page element on the page. The drawing tree can accurately represent the web page content and the location of each web page content in a document with a logical tree structure. FIG. 7A to FIG. 7D The process of clipping the client display page to obtain block resources is described in detail.

[0256] FIG. 7A to FIG. 7DAccording to some embodiments of the present application, a schematic diagram of a clipping structure of a drawing tree is shown.

[0257] refer to Fig. 7A In some embodiments, the drawing tree corresponding to the client display page 302 can be split into three minimum rendering blocks based on the size information of the screen 194, and the webpage size of each rendering block is consistent with the size of the screen 194. Thus, rendering blocks 701, 702, and 703 can be obtained, each of which contains at least two nodes, and a single node contains webpage content data and location data on the webpage where the content is located, so that the webpage content at the corresponding location can be drawn based on each rendering block. In addition, rendering blocks 701, 702, and 703 can also be reversely restored to a drawing tree that can be used to draw a complete client display page 302.

[0258] In some embodiments, the display parameters may include identification points and meta information of the rendering tiles.

[0259] refer to Figure 7B , the rendering block 701 may include multiple nodes, such as node 7011 and node 7012, and its root node 7014 includes the meta information of the rendering block 701, which can be used to identify the rendering block 701. After the rendering tree is pruned, the connection relationship between the rendering block 701 and the rendering block 702 is pruned, and multiple identification points 7013 are set at the disconnected position, such as identification points 7013a, 7013b, 7013c and 7013d. The above multiple identification points 7013 can link the context rendering blocks, for example, reconnect the rendering block 701 with the rendering block 702. Therefore, by using the above identification points and the meta information of the rendering blocks, the pruned rendering blocks 701, 702 and 703 can be reassembled into a complete client display page 302.

[0260] like Figure 7C As shown, rendering block 702 has a root node 7021, which contains meta information of rendering block 702. Rendering block 702 contains multiple identification points 7022 linked to rendering block 701, and contains multiple identification points 7024 linked to rendering block 703.

[0261] like Fig.7D As shown, the rendering block 703 has a root node 7031, which contains meta information of the rendering block 703. The rendering block 703 contains a plurality of identification points 7032 linked to the rendering block 702.

[0262] It can be understood that the above meta information can be a META tag, which can be used to describe the properties of an HTML web page document, such as author, date and time, web page description, keywords, page refresh, etc. Therefore, the properties of a rendering block can be represented by the META tag, and different rendering blocks can be determined by the META tag.

[0263] Thus, rendering block 701 can be identified by meta information in root node 7014, rendering block 702 can be identified by meta information in root node 7021, and rendering block 703 can be identified by meta information in root node 7031. Furthermore, rendering block 701 can be linked to identification point 7022 of rendering block 702 through identification point 7013. For example, identification point 7013a is linked to identification point 7022a, identification point 7013b is linked to identification point 7022b, identification point 7013c is linked to identification point 7022c, and identification point 7013d is linked to identification point 7022d.

[0264] Furthermore, the rendering block 702 may be linked to the identification point 7032 of the rendering block 703 through the identification point 7024. For example, the identification point 7024a is linked to the identification point 7032a, and the identification point 7024b is linked to the identification point 7032b.

[0265] Furthermore, we can Figure 7B , Figure 7C and Fig.7D Rendering blocks 701, 702, and 703 in the Fig. 7A The rendering tree corresponding to the client display page 302 shown in FIG. 1 implements the clipping process of the client display page 302 to obtain multiple rendering blocks, and can also restore the multiple rendering blocks to the drawing tree of the client display page 302 based on the identification points and the meta information.

[0266] In some embodiments of the present application, after the client 441 connects multiple rendering blocks into a rendering tree, it can directly draw the web page content corresponding to the web page area that the user wants to view based on the obtained rendering tree. In some implementations, the client needs to process the rendering tree before obtaining the rendering tree. In the embodiment of the present application, the client 441 does not need to process the rendering tree, which reduces the computational processing required for rendering and speeds up the loading and display process of the web page content. The client 441 can directly link the rendering tree based on the downloaded rendering block, and directly draw the web page content based on the rendering tree and present it to the user.

[0267] S511, the cloud 460 determines whether the valid block resources have been pushed to the edge service. If the valid block resources have been pushed to the edge service 450, step S513 is executed to return the block resources or the edge acceleration path to facilitate the client 441 to cache the block resources.

[0268] It can be understood that if the valid block resources are not pushed to the edge service 450, step S512 is executed to push the block resources to the edge service 450, and the edge service 450 provides the client 441 with the download of the block resources, thereby achieving efficient data interaction.

[0269] S512 , the cloud 460 pushes the block resources to the edge service 450 .

[0270] It can be understood that compared with the core server of the cloud 460, the server deployed with the edge service 450 is geographically closer to the user, so the block resources can be sent to the client 441 by the edge service 450 to achieve accelerated transmission of the block resources.

[0271] S513, the cloud 460 returns the block resources or edge acceleration path to the client 441.

[0272] It is understood that if the cloud 460 directly returns the block resources to the client 441, the client 441 can obtain and cache the block resources from the cloud 460. If the cloud 460 returns the edge acceleration path to the client 441, the cloud 460 can execute steps S514 and S517 to obtain the block resources from the edge service 450.

[0273] S514 , the client 441 obtains the block resources from the edge service 450 .

[0274] It can be understood that after obtaining the edge acceleration path, the client 441 can obtain the block resources from the edge service 450 based on the edge acceleration path.

[0275] S515, the client 441 caches the block resources and deletes them according to preset conditions.

[0276] It is understandable that the client 441 can cache the acquired segmented resources. If the user repeatedly accesses the same web page Q and the segmented resources of the web page Q have not been cleared from the cache, repeated downloading of the segmented resources can be avoided, thereby reducing the amount of data acquired by the client 441.

[0277] For cached segmented resources, the segmented resources that need to be deleted in the cache can be deleted at a preset deletion frequency to avoid excessive occupation of the cache capacity. In some embodiments, the preset condition may include multiple conditions, such as a preset deletion frequency, a cache duration of a rendering block, a file size of a rendering block, a weight parameter related to the importance of a rendering block, etc.

[0278] For example, refer to Figure 8, start the deletion process (i.e., elimination process) of the block resources that need to be deleted with a preset deletion frequency. Here, in order to determine the rendering blocks that need to be deleted, all rendering blocks can be numbered, such as rendering blocks A-1, A-2, B-1, C-1, C-2, D-1, E-1, and E-2. The larger the value of the rendering block, the larger its weight value. Then, the calculation of the weight value can be added to determine the weight score of a single rendering block. For example, when caching new rendering blocks, rendering blocks with a large total weight are deleted first, for example, A-2 is deleted before A-1. If C-1 is a larger file, the weight value corresponding to the file size is also larger, and it is deleted first.

[0279] In some embodiments, the weight score can be the product of the rendering block number, the cache time of the rendering block, and the rendering block file size. The larger the weight score value, the higher the priority of eliminating the rendering block (i.e. deleting the cached rendering block). In this way, the first rendering block of the web page is deleted as late as possible, ensuring that the first screen of the page can be cached for a longer time, avoiding the homepage showing an empty web page when the user clicks to enter the web page, and ensuring the user's browsing experience.

[0280] In other embodiments, when the first rendering block of the web page is deleted, the display parameter and the file corresponding to the thumbnail control are also deleted.

[0281] S516, the client 441 monitors the click event and draws the homepage of the webpage according to the display parameters and the first rendering block.

[0282] Exemplarily, when the terminal device 100 detects that a user clicks to start a web page control and listens to the click event, the client 441 responds to the click event by downloading display parameters or the first rendering block from the cloud 460 or the edge service 450, and renders the web page homepage corresponding to the first rendering block and the display parameters, and provides the user with the homepage web page content, avoiding providing only display parameters when the user enters the web page, thereby improving the user's web browsing experience.

[0283] For example, refer to Fig.9A , the terminal device 100 displays a client interface 801, which includes a web page control 802. When a user clicks on the web page control 802 803, the client 441 can obtain the web page area 804 divided by the display parameters, the first rendering block 805, and the thumbnail file 806 of the complete page from the cloud 460 or the edge service 450. Furthermore, the client 441 can render and fuse the first rendering block 805 with the corresponding "1 empty" in the web page area 804 marked by the display parameters to obtain the corresponding web page content. Since the size of each rendering block is consistent with the screen size, the complete home page content can be presented to the user, avoiding directly providing the empty display parameters to the user, thereby improving the user's browsing experience.

[0284] For example, refer to Fig. 9B , the terminal device 100 displays a client page 901, which includes a web page control 902. When a user touch operation 903 on the web page control 902 is detected, the home page 904 of the web page is drawn in response to the touch operation 903 based on the implementation shown in step S516 above. At this time, the first rendering block "1" has been fused and rendered in the web page area 905 marked with the display parameter to obtain the home page 904. At this time, the next rendering block "2" can be added to the download queue, so that when a subsequent new sliding operation of the user is detected, the rendering block "2" is fused and rendered with the "2 blank" corresponding to the web page area 905 marked with the display parameter to render the second page.

[0285] S517 : The client 441 draws the page and caches the rendering blocks from the edge service 450 in response to the user browsing operation.

[0286] It can be understood that the above-mentioned user browsing operation can be a sliding operation of the user. For example, the client 441 can detect the sliding operation of the user touching the screen, or can obtain the sliding operation input by the user through the input device, thereby determining the screen position that the user is browsing, for example, the sliding trajectory can be determined according to the screen position information corresponding to the sliding operation, and then the web page position that the user needs to browse can be determined according to the sliding trajectory. The web page position where the focus area is located is determined according to the web page position that the user needs to browse, and the corresponding rendering block is downloaded from the cloud 460 or the edge service 450 according to the placeholder on the web page position to draw the web page content corresponding to the focus area.

[0287] In other embodiments, the user browsing operation can also be obtained through the page thumbnail control. For example, there is a check box on the control. In response to the user dragging the check box to the position on the thumbnail icon corresponding to the page thumbnail control, the content in the check box is used as the web page position that the user wants to browse, and the rendering block corresponding to the web page position is added to the download queue. The rendering block can be combined with the display parameters to draw the web page content that the user wants to browse. Since the check box is draggable, the web page content that the user does not care about can be skipped, and the web page content corresponding to the user-specified position can be directly drawn and presented to the user. This effectively reduces the amount of interactive data of the client 441, and makes it unnecessary for the client 441 to render the web page, but directly draws the focus area web page according to the rendering block.

[0288] It can be understood that, based on the implementation process of the above steps S501 to S517, the web page display method provided by the embodiment of the present application sends the web page request to the cloud by the client listening to the hover or selection event. After the cloud receives the web page request, it pre-renders the complete web page and cuts it into block resources. After the client detects the click event, it obtains the web page browsing position corresponding to the user operation in real time, and then determines the rendering block corresponding to the web page position that the user wants to browse (for example, multiple rendering blocks are determined in sequence according to the sliding operation, or, according to the page thumbnail control started by fast sliding and the rendering block of the user-specified web page position is obtained by the page thumbnail control). And the rendering block is added to the download queue. Then, the client obtains the rendering block from the cloud or edge service according to the download order in the download queue, and sequentially obtains the corresponding rendering block from the download queue and restores it to the drawing tree in combination with the display parameters, and directly draws the web page content corresponding to the focus area according to the drawing tree. Then, the web page content is loaded on demand according to user needs, and the web page content that the user does not pay attention to is skipped, thereby effectively reducing the amount of interactive data of the client 441, and the client 441 does not need to render the web page, directly draws the focus area web page, and reduces the amount of calculation required for rendering.

[0289] Furthermore, since the amount of interactive data of the client 441 and the amount of computing data for rendering the web page are effectively reduced, the web page display method provided in the embodiment of the present application is suitable for terminal devices 100 with low computing power, such as IoT devices, etc., and is also suitable for network environments with low network speeds.

[0290] Regarding the specific implementation process of the above step S517, Fig.10 Provide a detailed introduction.

[0291] Fig.10 According to some embodiments of the present application, a schematic diagram of an implementation process of rendering and presenting web page content from an edge server is shown.

[0292] like Fig.10 As shown, the process may include the following steps:

[0293] S1001, the client 441 detects a user sliding operation, loads a page and caches a rendering block according to the sliding operation.

[0294] It can be understood that the client 441 can detect the sliding operation of the user touching the screen, or can obtain the sliding operation input by the user through the input device, thereby determining the screen position that the user is browsing, for example, the sliding trajectory can be determined according to the screen position information corresponding to the sliding operation, and then the position of the web page that the user needs to browse can be determined according to the sliding trajectory. The rendering block corresponding to the focus area is determined according to the position of the web page that the user needs to browse, and then the corresponding rendering block is downloaded from the cloud 460 or the edge service 450 to draw the web page content corresponding to the focus area. For example, the placeholder corresponding to the position of the web page in the focus area can be determined, and then the corresponding rendering block can be matched according to the placeholder to determine the rendering block that needs to be downloaded.

[0295] For example, reference Fig.11 , the client 441 can obtain the block web page area 1101 corresponding to the complete web page, and the block web page area contains the web page areas corresponding to 9 rendering blocks. It can be understood that the home page "1" has been merged with the block web page area 1101 to provide the user with the home page, and the download task of the second rendering block "2" has been added to the download queue to predict the block resources to be downloaded. When the user's sliding operation from the position of the block web page area "1" to the position of the block web page area "5" is detected, the rendering blocks corresponding to the above-mentioned scrolling page position can be added to the download queue in sequence according to the scrolling page position corresponding to the sliding operation to construct a download task. Then, the downloaded rendering blocks are obtained from the download queue in sequence, and the rendering blocks are merged in sequence with the corresponding display parameters into a drawing tree to draw the web page content corresponding to the focus area. For example, the rendering block "2" in the download queue corresponds to "2 empty" in the block webpage area to render the second page of the webpage, the rendering block "3" in the download queue corresponds to "3 empty" in the block webpage area to render the third page of the webpage, the rendering block "4" in the download queue corresponds to "4 empty" in the block webpage area to render the fourth page of the webpage, and the rendering block "5" in the download queue corresponds to "5 empty" in the block webpage area to render the fifth page of the webpage. Finally, the block webpage area 1101' in which the first to fifth rendering blocks are rendered and the download queue 1102' in which the sixth rendering block to be downloaded is newly added are obtained.

[0296] In some embodiments, if the user does not continue to slide and does not view the positions corresponding to the sixth rendering block "6" to the ninth rendering block "9", the sixth rendering block "6" to the ninth rendering block "9" will no longer be downloaded, and only the rendering block corresponding to the position viewed by the user will be downloaded to reduce the amount of data of the rendering blocks downloaded by the client 441.

[0297] In some embodiments, the rendering blocks downloaded by the client 441 can be cached in the local cache memory of the terminal device 100 within a specified time period, so that the user can repeatedly start the same web page within the specified time period without repeatedly downloading the rendering blocks, thereby reducing the amount of interactive data between the client 441 and the cloud 460.

[0298] S1002, the client 441 detects the browsing speed to predict the block resources to be downloaded.

[0299] It can be understood that the user's sliding operation will cause the focus area (i.e., the page position currently viewed by the user) to change. Therefore, the client 441 can detect the user's operation to determine the user's browsing speed, and then predict the rendering blocks to be downloaded based on the user's browsing speed. For example, multiple browsing speed thresholds can be set, and different numbers of rendering blocks can be newly downloaded to the download queue based on different browsing speed thresholds. Furthermore, the user's browsing speed can be recorded in real time based on the user's operation, and the user's real-time browsing speed can be compared with multiple levels of browsing speed thresholds to determine the browsing speed threshold corresponding to the user's real-time browsing speed.

[0300] For example, a first-level browsing speed threshold P1 and a second-level browsing speed threshold P2 are preset, and the first-level browsing speed threshold P1 corresponds to adding two rendering blocks to be downloaded to the download queue, and the second-level browsing speed threshold P2 corresponds to adding three rendering blocks to be downloaded to the download queue. If it is determined that the user's current browsing speed is H1, and the browsing speed H1 is within the second-level browsing speed threshold P2, the client 441 can add three rendering blocks to be downloaded to the download queue, thereby predicting the rendering blocks that need to be downloaded according to the user's needs, avoiding providing empty web pages to the user, and improving the user's browsing experience.

[0301] S1003 , the client 441 obtains the block resources from the edge service 450 .

[0302] It can be understood that after determining the rendering block to be downloaded, the client 441 can download the corresponding rendering block from the edge service 450. The specific implementation process can refer to step S514 above, which will not be described in detail here.

[0303] S1004, the client 441 detects that the user slides quickly and opens the page thumbnail control.

[0304] Exemplarily, when the client 441 detects that the user slides quickly, the page thumbnail control can be opened to provide the user with an entry to locate the focus area. For example, when the client 441 detects that the user's current sliding speed is greater than the first preset speed threshold, the page thumbnail control is directly called and the page thumbnail control is superimposed on the web page window. Since the page thumbnail control can display thumbnails of the page content, the user can quickly locate the web page location he wants to view based on the thumbnail content displayed by the page thumbnail control, which is convenient for the user to browse.

[0305] It can be understood that the above-mentioned page thumbnail control is a window control, and the content it presents is a thumbnail image of the entire web page, and a selection box can be set on the control. When the user selects the browsing position, the selection box will select the content in the thumbnail, and the content of the focus area will be consistent with the content of the selected thumbnail, thereby providing users with an entry for quickly browsing the web page.

[0306] In some embodiments, an opened page thumbnail control may be first filled with a semi-transparent thumbnail. When the terminal device 100 detects a user's interactive operation on the page thumbnail control (such as a click / long press / drag operation), the semi-transparent thumbnail of the page thumbnail control is changed to an opaque thumbnail to facilitate the user to locate the focus area by referring to the page thumbnail.

[0307] In other embodiments, the opened page thumbnail control may first occupy a smaller position. When the terminal device 100 detects the user's interactive operation on the page thumbnail control (such as click / long press / drag operation), the page thumbnail control is enlarged so that the user can see the web page content in the page thumbnail more clearly, allowing the user to quickly locate the focus area of ​​the web page they want to view.

[0308] In some other embodiments, after the page thumbnail control is turned on, it can be displayed on the interface of the client 441 within a preset time, for example, not closed within 2 seconds, to provide the user with an entry to quickly locate the focus area of ​​the web page. If the user is not detected clicking on the thumbnail control within the preset time, or the user's fast sliding operation is not detected, the page thumbnail control is closed to avoid affecting the user's browsing of the web page content.

[0309] S1005, the client 441 detects the user's operation on the page thumbnail control, locates the focus area, and renders the web page content in the focus area.

[0310] It can be understood that the page thumbnail control can include a check box, which is suspended above the page thumbnail layer, and the user interaction operation can be obtained through the check box, such as dragging / clicking / long pressing the check box. The corresponding focus area on the web page is determined by the check box, and the rendering blocks and display parameters of the focus area are spliced ​​into a drawing tree, and then the web page content of the focus area is drawn. It is convenient for users to skip web page content that they are not concerned about. The client 441 only needs to download the rendering blocks corresponding to the web page content viewed by the user. At the same time, the client 441 also only needs to draw the web page content of the focus area, which effectively reduces the amount of interactive data and rendering calculation of the client 441.

[0311] For example, refer to Fig.12 , the client 441 starts the web page in response to the user's click event, and then obtains the block web page area 1201 where the first rendering block is drawn and the download list 1202 containing the second rendering block to be downloaded. At this time, if it is detected that the user slides quickly, the page thumbnail control 1204 can be displayed on the web page. At this time, if the client 441 obtains the user's selection operation on the focus area through the page thumbnail control 1204 (for example, dragging the selection box 1204a), the rendering block corresponding to the web page position selected by the selection box is added to the download list, thereby skipping some rendering blocks and directly downloading the rendering block corresponding to the web page content that the user expects to view. For example, if it is detected that the user drags the selection box 1204a to browse the web page position corresponding to the fifth rendering block, the rendering block "5" is added to the download queue, and the rendering block "5" is rendered and merged with the "5 empty" in the block web page area to obtain the web page corresponding to the corresponding fifth rendering block. At this time, the second to fourth rendering blocks are not downloaded and merged, and the web page content that the user does not pay attention to is skipped, thereby effectively reducing the amount of interactive data of the client 441 and effectively reducing the amount of computational data for rendering web pages by the client 441.

[0312] S1006, the client 441 detects that the user stops sliding quickly, determines the focus area, and renders the web page content in the focus area.

[0313] It can be understood that when the client 441 detects that the user's quick sliding operation stops, the position where the sliding stops can be used to determine the focus area to be viewed by the user in the web page. At the same time, the position of the check box on the thumbnail icon also changes accordingly, and the focus area currently viewed by the user is selected. The rendering block corresponding to the focus area is added to the download list, and the rendering block is spliced ​​with the corresponding display parameters to form a drawing tree, and the web page content to be viewed by the user can be drawn. Since the thumbnail control is turned on, the user can refer to the position of the check box on the thumbnail picture displayed by the thumbnail control, so that the user can quickly skip the web page content.

[0314] In some embodiments, the rendering blocks corresponding to the web page positions passed during the fast sliding operation do not need to be added to the download queue to avoid the client 441 downloading redundant rendering blocks and reduce the amount of interactive data between the client 441 and the cloud 460 or edge service 450.

[0315] It can be understood that, based on the implementation process of the above steps S1001 to S1006, the web page display method provided by the embodiment of the present application obtains the web page browsing position corresponding to the user operation in real time through the client, and then determines the rendering block corresponding to the web page position that the user wants to browse (for example, multiple rendering blocks are determined in sequence according to the sliding operation, or, the page thumbnail control is started according to the quick sliding and the rendering block of the user-specified web page position is obtained by the page thumbnail control), and the rendering block is added to the download queue. Then, the client obtains the rendering block from the cloud or edge service according to the download order in the download queue, and obtains the corresponding rendering block from the download queue in sequence and combines the display parameters to splice the drawing tree, and directly draws the web page content corresponding to the focus area through the drawing tree. Then, the web page content is loaded on demand according to the user's needs, and the web page content that the user does not pay attention to is skipped, thereby effectively reducing the amount of interactive data between the client 441 and the cloud 460 (or edge service 450), and effectively reducing the amount of computational data for rendering web pages by the client 441.

[0316] Fig.13 According to some embodiments of the present application, a schematic software structure block diagram of the terminal device 100 and the cloud 460 is shown.

[0317] The terminal device 100 includes a resource management module 1301 and a page presentation module 1302 .

[0318] The resource management module 1301 can be used to manage the local cache of the terminal device 100. The specific execution process can refer to steps S501, S502, S513, S514, S515, S516, S517, S1001, S1002, S1003, S1004, S1005 and S1006 above.

[0319] The page presentation module 1302 may be used to synthesize and display the drawn web page contents. The specific execution process may refer to steps S516, S517, S1005 and S1006 above.

[0320] The cloud 460 includes a page rendering module 1303 , a rendering page clipping module 1304 , a cloud resource management module 1305 and an edge acceleration module 1306 .

[0321] The page rendering module 1303 may be used to render complete web page content according to web page elements obtained from the website. The specific execution process may refer to steps S508 and S509 above.

[0322] The rendering page clipping module 1304 may be used to clip the rendering tree corresponding to the rendered web page to obtain block resources. The specific execution process may refer to step S510 above.

[0323] The cloud resource management module 1305 can be used to retrieve whether the local cache of the server cluster contains valid page rendering resources and valid block resources, and can be used to cache valid page rendering resources and valid block resources. The specific execution process can refer to steps S504, S507, S508, S510, S511 and S512 above.

[0324] The edge acceleration module 1306 may be used to push the block resources to the terminal device 100 . The specific execution process may refer to steps S512 , S513 , S514 and S1003 above.

[0325] According to the method provided in the embodiments of the present application, the present application also provides a computer program product, which includes: computer program code, when the computer program code is executed on a computer, the computer implements the steps performed by the electronic device in any one of the above embodiments.

[0326] Fig.14 A schematic flow chart of a web page display method is shown.

[0327] refer to Fig.14 In the web page display method, the server side 1402 can start the corresponding server side browser 1403 on the server side 1402 according to the request of the client side browser 1401, and the server side browser 1403 performs corresponding processing according to the user operation sent by the client side browser 1401, and sends the processing result to the client side browser 1401.

[0328] Specifically, the method comprises the following steps:

[0329] S1411, the client browser 1401 sends a start request to the server 1402.

[0330] S1412, the server side 1402 constructs a rendering instance corresponding to the client browser and starts the server side browser.

[0331] S1413, the server 1402 sends a startup success response to the client browser 1401.

[0332] S1414, the client browser 1401 sends the information input by the user to the client browser and the input focus position information to the server browser 1403.

[0333] S1415, the server-side browser 1403 performs corresponding processing on the server-side browser according to the information and the input focus position information to obtain operation result information.

[0334] S1416, the server browser 1403 sends operation result information to the client browser 1401.

[0335] It can be understood that the above-mentioned web page display method only builds a rendering instance corresponding to the client browser on the server side, and calculates all elements of the landing page according to the client style through the server-side browser. The rendering work is also completed by the server side, which causes a large number of web pages to be repeatedly rendered, and the server-side computing resources are consumed too much.

[0336] In some embodiments of the present application, the terminal device 100 can interact with the page rendering module 1303, the rendering page clipping module 1304, the cloud resource management module 1305 and the edge acceleration module 1306 in the cloud 460 through the resource management module 1301 and the page presentation module 1302 to realize the interaction of the web page request. The terminal device 100 can feedback to the cloud 460 according to the hover event or the selected event. The cloud 460 starts the pre-rendering of the web page, and clips the block resources from the drawing tree corresponding to the rendered complete web page. The terminal device 100 can thus obtain the block resources of the cloud 460, and track the user operation to determine the web page location that the user wants to view, and then download the rendering block corresponding to the web page location specified by the user, and splice the rendering tree based on the rendering block and the corresponding display parameters. Thus, the client 441 can directly draw the web page of the focus area through the drawing tree, realize the loading of the corresponding web page content according to the user's needs, effectively reduce the amount of network interaction data of the terminal device 100, and reduce the rendering calculation amount of the terminal device 100.

[0337] References to "one embodiment" or "an embodiment" in the specification mean that the specific features, structures, or characteristics described in conjunction with the embodiment are included in at least one exemplary implementation or technology disclosed in the present application. The appearance of the phrase "in one embodiment" in various places in the specification does not necessarily all refer to the same embodiment.

[0338] The present application also discloses a device for performing the operations in the text. The device can be constructed specifically for the required purpose or it can include a general-purpose computer selectively activated or reconfigured by a computer program stored in the computer. Such a computer program can be stored in a computer-readable medium, such as, but not limited to, any type of disk, including a floppy disk, an optical disk, a CD-ROM, a magneto-optical disk, a read-only memory (ROM), a random access memory (RAM), an EPROM, an EEPROM, a magnetic or optical card, an application-specific integrated circuit (ASIC) or any type of medium suitable for storing electronic instructions, and each can be coupled to a computer system bus. In addition, the computer mentioned in the specification may include a single processor or may be an architecture involving multiple processors for increased computing power.

[0339] The processes and displays proposed herein are inherently not related to any specific computer or other device. Various general purpose systems may also be used in conjunction with the programs according to the teachings herein, or it may prove convenient to construct more specialized devices to perform one or more method steps. The structures for various of these systems are discussed in the following description. In addition, any specific programming language sufficient to implement the techniques and embodiments disclosed in this application may be used. Various programming languages ​​may be used to implement the present disclosure, such as the web page display method discussed herein.

[0340] Additionally, the language used in this specification has been primarily selected for readability and instructional purposes and may not have been selected to delineate or limit the disclosed subject matter.Accordingly, this disclosure is intended to illustrate but not to limit the scope of the concepts discussed herein.

Claims

1. A web page display method, applied to a first electronic device, characterized in that: The method comprises: detecting that a user browses a first portion of a first webpage at a first sliding speed, wherein the first sliding speed is greater than a first sliding speed threshold; displaying a thumbnail of the first part; It is detected that the user browses the second part of the first webpage at a second sliding speed, wherein the second sliding speed is less than a second sliding speed threshold, and the second sliding speed threshold is less than or equal to the first sliding speed threshold; The webpage content of the second part is displayed.

2. The method according to claim 1, characterized in that The detecting that the user browses the first part of the first webpage at a first sliding speed includes: A first operation of a user on a first web page is detected, and a first request is sent to a second electronic device so that the second electronic device preloads web page information of the first web page, wherein the web page information includes multiple rendering blocks of the first web page, display parameters of the rendering blocks, and thumbnails of different parts of the first web page.

3. The method according to claim 2, characterized in that The displaying of the thumbnail of the first part includes: Detecting that a user browses a first part of a first webpage at a first sliding speed, acquiring a thumbnail of the first part of the first webpage; A thumbnail of the first part is displayed.

4. The method according to claim 2, characterized in that: The detecting that the user browses the second part of the first webpage at the second sliding speed and displaying the webpage content of the second part includes: detecting that the user browses the second part of the first webpage at the second sliding speed; A rendering block corresponding to the second part and display parameters of the rendering block are acquired from the second electronic device, and the webpage content of the second part is displayed based on the acquired rendering block corresponding to the second part and the display parameters.

5. The method according to claim 4, characterized in that The displaying of the webpage content of the second part based on the acquired rendering block corresponding to the second part and the display parameter includes: The rendering blocks obtained by splicing according to the display parameters are obtained to obtain a rendering tree corresponding to the second part; The webpage content of the second part is drawn using the drawing tree corresponding to the second part.

6. The method according to claim 4, characterized in that The display parameters of the rendering block include meta information of the rendering block and a plurality of identification points, and, The rendering blocks obtained by splicing according to the display parameters are obtained to obtain a rendering tree corresponding to the second part, including: identifying different rendering blocks according to the meta information; The different rendering blocks are spliced ​​according to the multiple identification points to obtain a rendering tree corresponding to the second part.

7. The method according to claim 4, characterized in that The acquiring, from the second electronic device, a rendering block corresponding to the second part and a display parameter of the rendering block further includes: At least one rendering block adjacent to the rendering blocks of the second part is obtained from a second electronic device.

8. The method according to claim 4, characterized in that The method further comprises: The rendering blocks corresponding to the second part are cached, and the rendering blocks with the largest priority values ​​are deleted from the cache according to a first condition, wherein the first condition includes a preset deletion frequency and the priority values ​​of the rendering blocks.

9. The method according to claim 8, characterized in that The step of deleting the rendering block with the largest priority value from the cache according to the first condition includes: Determine the cache time length, number and file size of each rendering block; Multiply the cache time length value, number value and file volume value of each rendering block to determine the priority value of each rendering block; The rendering block with the largest priority value is deleted from the cache at the preset deletion frequency.

10. The method according to claim 1, characterized in that After displaying the thumbnail of the first part, the method further includes: Detecting a third operation of the user on the thumbnail, and determining a third part of the first webpage according to the third operation, wherein the third operation includes a click operation of the user on a selection box of the thumbnail; The webpage content of the third part is displayed.

11. The method according to claim 10, characterized in that The detecting a third operation of the user on the thumbnail, and determining a third part of the first webpage according to the third operation, includes: A selected area of ​​the third operation on the thumbnail is detected, and a third part of the first webpage is determined based on the framed content of the selected area.

12. The method according to claim 11, characterized in that The webpage content displaying the third part includes: Acquire, from the second electronic device, a rendering block corresponding to the third portion and a display parameter of the rendering block corresponding to the third portion; Based on the acquired rendering block corresponding to the third part and the display parameters, the webpage content of the third part is displayed.

13. The method according to claim 1, characterized in that The first sliding speed and / or the second sliding speed is used to indicate an average speed of a sliding operation of a user sliding the first webpage.

14. The method according to claim 1, characterized in that The method for obtaining the first sliding speed threshold includes: Collecting a user's historical sliding speed, inputting the historical sliding speed into a first speed model, and determining a speed offset; The speed offset is added to the third sliding speed threshold to determine the first sliding speed threshold, wherein the third sliding speed threshold is a sliding speed threshold preset in the first electronic device.

15. A web page display method, applied to a second electronic device, characterized in that: The method comprises: In response to a first request sent by a first electronic device, web page information of a first web page requested by the first request is preloaded.

16. The method according to claim 15, characterized in that The first request includes device information of the first electronic device and a network request, and, The step of preloading webpage information of a first webpage requested by the first request in response to the first request sent by the first electronic device includes: In response to a first request sent by a first electronic device, obtaining a webpage resource of a first webpage, wherein the webpage resource is used to represent webpage elements and layout positions of the webpage elements; Determining a drawing tree of the first webpage according to the webpage resources of the first webpage; According to the device information of the first electronic device and the rendering tree of the first webpage, a plurality of rendering blocks of the first webpage, display parameters of the rendering blocks, and thumbnails of different parts of the first webpage are determined.

17. A web page display method, applied to an electronic device, wherein the electronic device comprises a first electronic device and a second electronic device, characterized in that: The method comprises: The first electronic device detects a first operation of a user on a first webpage, and sends a first request to a second electronic device; The second electronic device preloads web page information of the first web page in response to the first request, wherein the web page information includes a plurality of rendering blocks of the first web page, display parameters of the rendering blocks, and thumbnails of different parts of the first web page; The first electronic device detects that a user browses a second portion of the first webpage at a second sliding speed, wherein the second sliding speed is less than a second sliding speed threshold, and the second sliding speed is used to indicate an average speed of a sliding operation of the user sliding the first webpage; The first electronic device obtains a rendering block corresponding to the second part and display parameters of the rendering block from the second electronic device, and displays the webpage content of the second part based on the obtained rendering block and display parameters.

18. The method according to claim 17, characterized in that The first request includes device information of the first electronic device and a network request, and, The second electronic device preloads webpage information of the first webpage in response to the first request, including: The second electronic device obtains web page resources of the first web page in response to the first request, wherein the web page resources are used to represent web page elements and layout positions of the web page elements; The second electronic device determines a drawing tree of the first webpage according to the webpage resources of the first webpage; The second electronic device determines a plurality of rendering blocks of the first web page, display parameters of the rendering blocks, and thumbnails of different parts of the first web page according to the device information of the first electronic device and the rendering tree of the first web page.

19. The method according to claim 18, characterized in that The displaying the second part of the webpage content based on the acquired rendering block and the display parameter includes: The first electronic device splices the obtained rendering blocks according to the display parameters to obtain a rendering tree corresponding to the second part; The first electronic device uses the rendering tree corresponding to the second part to draw the webpage content of the second part.

20. The method according to claim 19, characterized in that The display parameters of the rendering block include meta information of the rendering block and a plurality of identification points, and, The first electronic device splices the obtained rendering blocks according to the display parameters to obtain a rendering tree corresponding to the second part, including: The first electronic device identifies different rendering blocks according to the meta information; The first electronic device splices the different rendering blocks according to the multiple identification points to obtain a rendering tree corresponding to the second part.

21. The method according to claim 17, characterized in that The first electronic device acquires a rendering block corresponding to the second part and a display parameter of the rendering block from the second electronic device, further comprising: The first electronic device obtains at least one rendering block adjacent to the rendering blocks of the second portion from the second electronic device.

22. The method according to claim 17, characterized in that The method further comprises: The first electronic device caches rendering blocks corresponding to the second part, and deletes rendering blocks with the largest priority values ​​from the cache according to a first condition, wherein the first condition includes a preset deletion frequency and a priority value of the rendering blocks.

23. The method according to claim 22, characterized in that The step of deleting the rendering block with the largest priority value from the cache according to the first condition includes: Determine the cache time length, number and file size of each rendering block; Multiply the cache time length value, number value and file volume value of each rendering block to determine the priority value of each rendering block; The rendering block with the largest priority value is deleted from the cache at the preset deletion frequency.

24. The method according to claim 17, characterized in that The method further comprises: The first electronic device detects that a user browses a first part of a first webpage at a first sliding speed, wherein the first sliding speed is greater than a first sliding speed threshold, the first sliding speed is used to indicate an average speed of a sliding operation of the user sliding the first webpage, and the second sliding speed threshold is less than or equal to the first sliding speed threshold; A thumbnail of the first part is displayed.

25. The method according to claim 24, characterized in that After displaying the thumbnail of the first part, the method further includes: Detecting a third operation of the user on the thumbnail, and determining a third part of the first webpage according to the third operation, wherein the third operation includes a click operation of the user on a selection box of the thumbnail; The webpage content of the third part is displayed.

26. The method according to claim 25, characterized in that The detecting a third operation of the user on the thumbnail, and determining a third part of the first webpage according to the third operation, includes: A selected area of ​​the third operation on the thumbnail is detected, and a third part of the first webpage is determined based on the framed content of the selected area.

27. The method according to claim 25, characterized in that The webpage content displaying the third part includes: The first electronic device obtains, from the second electronic device, a rendering block corresponding to the third part and a display parameter of the rendering block corresponding to the third part; Based on the acquired rendering block corresponding to the third part and the display parameters, the webpage content of the third part is displayed.

28. The method according to claim 24, characterized in that The method for obtaining the first sliding speed threshold includes: Collecting a user's historical sliding speed, inputting the historical sliding speed into a first speed model, and determining a speed offset; The speed offset is added to the third sliding speed threshold to determine the first sliding speed threshold, wherein the third sliding speed threshold is a sliding speed threshold preset in the first electronic device.

29. An electronic device, characterized in that: include: one or more processors; One or more memories; the one or more memories store one or more programs, and when the one or more programs are executed by the one or more processors, the electronic device executes the web page display method described in any one of claims 1 to 28.

30. A computer-readable storage medium, characterized in that: The storage medium stores instructions, which, when executed on a computer, cause the computer to execute the web page display method according to any one of claims 1 to 28.

Images