Page rendering method and device

Abstract

The invention discloses a page rendering method and device, and relates to the technical field of front ends. A specific embodiment of the method comprises the following steps: in response to a page access request, dividing page contents of a to-be-accessed page into a plurality of floors, and grouping the plurality of floors to obtain at least one data group; in response to the view rendering request, acquiring a view number corresponding to a to-be-rendered view, and performing odd-even judgment on the view number; under the condition that the view number is an odd number, using the first card to obtain a data set of a sequence number corresponding to the view number, and performing view rendering based on a first page container corresponding to the first card; and under the condition that the view numbers are even numbers, acquiring a data set of a sequence number corresponding to the view numbers by using the second card, and performing view rendering based on a second page container corresponding to the second card. According to the embodiment, the memory consumed by page rendering is saved, the performance bottleneck of the APP is not triggered, and display abnormalities such as blank screen and lagging are avoided.

Description

Technical Field

[0001] The present invention relates to the field of front-end technology, and in particular to a method and device for page rendering. Background Art

[0002] H5 (HTML5, a language description method for building web page content) pages are increasingly becoming the main channel for application APP (short for Application) operators to deliver flexible and changeable operational content such as activities and promotions due to their flexibility in development and deployment. At present, there are usually two solutions for H5 page rendering: one is to pre-load the static resources corresponding to the H5 page to the local hard disk. When the H5 page is opened in the APP, the static resources are directly loaded from the local, and then the rendering method in the code is executed to render the H5 page; the other solution is to divide the content of the H5 page into multiple floors, and pre-expand H5 pages of a certain height according to the height of each floor. When the H5 page is opened in the APP, the static resources and data of the floors visible in the first screen are first loaded and the first screen view is rendered. When the user slides down the page, the remaining floors are rendered.

[0003] In the process of implementing the present invention, the inventors found that there are at least the following problems in the prior art:

[0004] With the existing H5 page rendering solution, as users continue to scroll down the H5 page, the entire H5 page content becomes more and more, and the page rendering consumes more and more memory, which triggers the performance bottleneck of the APP and easily causes display anomalies such as black screen and freeze. Summary of the invention

[0005] In view of this, an embodiment of the present invention provides a method and device for page rendering, which can save the memory consumed by page rendering, thereby not triggering the performance bottleneck of the APP and avoiding display abnormalities such as black screen and freeze.

[0006] To achieve the above-mentioned purpose, according to one aspect of an embodiment of the present invention, a method for page rendering is provided, comprising: in response to a page access request, dividing the page content of a page to be accessed into multiple floors, and grouping the multiple floors to obtain no less than one data group, wherein the data group has a sequence number; in response to a view rendering request, obtaining a view number corresponding to the view to be rendered, and performing an odd-even judgment on the view number, wherein the view number corresponds to the sequence number of the data group; when the view number is an odd number, using a first card to obtain a data group with a sequence number corresponding to the view number, and performing view rendering on the obtained data group based on a first page container corresponding to the first card, and adding the rendered view to a view list container that supports scrolling according to the view number; when the view number is an even number, using a second card to obtain a data group with a sequence number corresponding to the view number, and performing view rendering on the obtained data group based on a second page container corresponding to the second card, and adding the rendered view to a view list container that supports scrolling according to the view number for page rendering.

[0007] Optionally, when the view number is 1, a first card is used to obtain a data group with a sequence number corresponding to the view number, and a view rendering is performed on the obtained data group based on a first page container corresponding to the first card, including: using a first card to obtain a data group with a sequence number corresponding to the view number, initializing a first page container corresponding to the first card and preloading static resources corresponding to the first page container; using the obtained data group and the static resources as rendering data, and performing a view rendering on the rendering data based on the first page container corresponding to the first card.

[0008] Optionally, when the view number is 2, a second card is used to obtain a data group with a sequence number corresponding to the view number, and a view rendering is performed on the obtained data group based on a second page container corresponding to the second card, including: using a second card to obtain a data group with a sequence number corresponding to the view number, initializing a second page container corresponding to the second card and preloading static resources corresponding to the second page container; using the obtained data group and the static resources as rendering data, and performing a view rendering on the rendering data based on the second page container corresponding to the second card.

[0009] Optionally, the view rendering request is generated in the following cases: when the multiple floors are grouped to obtain no less than one data group; or when it is determined that a condition for triggering rendering of the next view is met based on a user's sliding operation on the page.

[0010] Optionally, determining whether a condition for triggering rendering of the next view is met based on a user's sliding operation on the page includes: obtaining a sliding direction based on the user's sliding operation on the page; determining the number of pixels that have not yet been displayed in the current view based on the sliding direction; and determining that the condition for triggering rendering of the next view is met when the number of pixels does not exceed a set threshold.

[0011] Optionally, grouping the multiple floors to obtain no less than one data group includes: grouping the floors in the order of the multiple floors according to the height of each floor and a preset card height value range to obtain no less than one data group.

[0012] Optionally, the preset card height value is greater than the display screen height.

[0013] Optionally, adding the rendered view to a view list container supporting scrolling according to the view number includes: adding the rendered view as a child of the view list container to a corresponding position of the view list container supporting scrolling according to the view number.

[0014] According to another aspect of an embodiment of the present invention, a device for page rendering is provided, comprising: a page data division module, for dividing the page content of a page to be accessed into multiple floors in response to a page access request, and grouping the multiple floors to obtain no less than one data group, wherein the data group has a sequence number; a view number acquisition module, for acquiring the view number corresponding to the view to be rendered in response to a view rendering request, and performing an odd-even judgment on the view number, wherein the view number corresponds to the sequence number of the data group; a first view rendering module, for acquiring the data group with a sequence number corresponding to the view number using a first card when the view number is an odd number, performing view rendering on the acquired data group based on a first page container corresponding to the first card, and adding the rendered view to a view list container that supports scrolling according to the view number; and a second view rendering module, for acquiring the data group with a sequence number corresponding to the view number using a second card when the view number is an even number, performing view rendering on the acquired data group based on a second page container corresponding to the second card, and adding the rendered view to a view list container that supports scrolling according to the view number for page rendering.

[0015] According to another aspect of an embodiment of the present invention, there is provided an electronic device, comprising: one or more processors; a storage device for storing one or more programs, wherein when the one or more programs are executed by the one or more processors, the one or more processors implement the page rendering method provided by an embodiment of the present invention.

[0016] According to another aspect of an embodiment of the present invention, a computer-readable medium is provided, on which a computer program is stored. When the program is executed by a processor, the page rendering method provided by an embodiment of the present invention is implemented.

[0017] An embodiment of the above invention has the following advantages or beneficial effects: by responding to a page access request, the page content of the page to be accessed is divided into multiple floors, and the multiple floors are grouped to obtain no less than one data group, and the data group has a sequence number; in response to a view rendering request, the view number corresponding to the view to be rendered is obtained, and the view number is judged to be odd or even, wherein the view number corresponds to the sequence number of the data group; when the view number is an odd number, the first card is used to obtain the data group with the sequence number corresponding to the view number, and the obtained data group is rendered based on the first page container corresponding to the first card, and the rendered view is added to the view list container that supports scrolling according to the view number; when the view number is an even number, the second card is used to obtain the data group with the sequence number corresponding to the view number. The technical solution of obtaining a data group with a corresponding sequence number, rendering a view of the obtained data group based on the second page container corresponding to the second card, and adding the rendered view to the view list container that supports scrolling for page rendering according to the view number can manage and obtain page rendering data through cards, so that the amount of data rendered each time will not be too large, avoiding the problem of APP system performance bottleneck caused by excessive rendering memory usage; based on the reuse of two cards and the corresponding two page containers, page rendering is performed alternately, so that each page container will only render the floors in the current card, and there will be no situation where one page container renders many floors, saving the memory consumed by page rendering, thereby not triggering the performance bottleneck of the APP, and avoiding display abnormalities such as black screen and freeze.

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

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

[0020] Figure 1 is a schematic diagram of main steps of a method for page rendering according to an embodiment of the present invention;

[0021] Figure 2 It is a schematic diagram of the implementation principle of a page rendering method according to an embodiment of the present invention;

[0022] Figure 3 is a schematic diagram of a page initialization process according to an embodiment of the present invention;

[0023] Figure 4is a schematic diagram of a rendering process of a first view according to an embodiment of the present invention;

[0024] Figure 5 is a schematic diagram of a rendering process of a second view according to an embodiment of the present invention;

[0025] Figure 6 is a schematic diagram of main modules of a device for page rendering according to an embodiment of the present invention;

[0026] Figure 7 is an exemplary system architecture diagram to which embodiments of the present invention may be applied;

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

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

[0029] It should be noted that the collection, collection, updating, analysis, processing, use, transmission, storage and other aspects of user personal information involved in the technical solution of the present invention are in compliance with the provisions of relevant laws and regulations, are used for legitimate purposes, and do not violate public order and good morals. Necessary measures are taken for user personal information to prevent illegal access to user personal information data and maintain the security of user personal information, network security and national security.

[0030] At present, in Android system APP, H5 pages are mostly embedded to achieve flexible and changeable page functions. At present, there are mainly two rendering solutions for H5 pages, namely preloading and lazy loading. However, these two solutions have some problems and shortcomings to a greater or lesser extent, especially when the H5 page has a lot of content. Whether preloading or lazy loading, or mixed use, as users continue to scroll down the H5 page, the entire H5 page content becomes more and more, and the H5 page container (for example: WebView, a web page view) consumes more and more memory, which will trigger the performance bottleneck of the APP, and it is very easy to have abnormal display phenomena such as black screen and freeze.

[0031] In order to solve the above-mentioned technical problems existing in the prior art, the present invention provides a method and device for page rendering, which splits the H5 page content and reuses cards to render the corresponding floors, thereby avoiding performance bottlenecks in scenarios where the H5 page content opened in the APP is large, thereby avoiding abnormal display phenomena such as mobile phone freezes and black screens.

[0032] In the introduction of the embodiments of the present invention, the technical terms and their definitions are as follows:

[0033] Android: Android is a free and open source operating system based on the Linux kernel (excluding GNU components);

[0034] APP: App is the abbreviation of Application in English. Nowadays, APP mostly refers to third-party applications on smart phones. In this invention, it specifically refers to third-party applications on Android phones.

[0035] List container (ListView, RecyclerView): A control provided by the Android system for displaying a list. Each view in the list is called a subitem. In the embodiment of the present invention, since the list container stores views one by one, it is also called a view list container;

[0036] First screen: The first screen refers to the first screen of content that appears on the mobile phone screen after opening the H5 page. Users need to scroll down to display the second and third screens of content on the mobile phone screen;

[0037] UI view: UI is the abbreviation of User Interface. View means that this UI is only a part of the user interface. In the present invention, it specifically refers to the view of each sub-item in the list container;

[0038] Floor: The floor in this invention refers to an independent UI view with certain functions in an H5 page. For example, an H5 page may have a header area, a poster carousel area, a product list area, a lottery area, etc. from top to bottom. Each of these specific areas can be summarized as a floor. Then this H5 page is composed of floors one by one;

[0039] Card: The card in the present invention belongs to a specific technical concept, specifically referring to a concept similar to a container formed by multiple specific floors and their corresponding data;

[0040] WebView: WebView is the core view class in the WebKit framework, used to manage the interaction between the WebFrame and WebFrameView classes. In this invention, it specifically refers to the container of the H5 page;

[0041] H5 page: H5 page refers to a web page developed based on HTML5 technology, and in the present invention, it specifically refers to a web page displayed in a mobile APP;

[0042] JSB: JSB is the abbreviation of JavaScript Bridge, which is used to enable two-way communication between the Web end and the Native end. In the present invention, WebView is the Native end, and the H5 page is the Web end. They use JSB to communicate the data that the current H5 page needs to render.

[0043] Figure 1 Schematic diagram of the main steps of the method for page rendering according to an embodiment of the present invention. Figure 1 As shown, the page rendering method of the embodiment of the present invention mainly includes the following steps S101 to S104. Among them, step S103 and step S104 introduce the view rendering process of different view numbers.

[0044] Step S101: In response to a page access request, the page content of the page to be accessed is divided into multiple floors, and the multiple floors are grouped to obtain no less than one data group, and the data group has a sequence number. When a user requests to access a certain page, a page access request is generated. At this time, after receiving the page access request, the server of the APP will divide the page content of the page to be accessed to obtain multiple floors and form floor list data. At the same time, the floor list data can also be temporarily stored in the cache of the APP in advance. Then, the floors are grouped to obtain multiple data groups, and each data group is used as a data item for card management. Among them, the floors obtained by page division are sequential, so accordingly, when grouping the floors, they will also be grouped according to the order of the floors, and each group is also sequential.

[0045] In one embodiment of the present invention, grouping the multiple floors to obtain no less than one data group may specifically include: grouping the floors according to the order of the multiple floors, according to the height of each floor and the preset card height value range, to obtain no less than one data group. Wherein, the preset card height value is greater than the display screen height. In one embodiment, the preset card height value may be, for example, 1.5 times the display screen height, and the card height value range may be, for example, a height value in which the card height value fluctuates up and down by a certain amount. For example, the card height value range selects 1.4 times the display screen height to 1.6 times the display screen height. When grouping the floors, the floor heights may be accumulated in sequence according to the order of the floors until the accumulated height falls within the preset card height value range, and the floors are grouped together. In this way, when rendering a page view, a set of floor data corresponding to a view may be directly obtained for rendering, avoiding the problem of excessive memory consumption caused by rendering more content at one time.

[0046] Step S102: In response to the view rendering request, obtain the view number corresponding to the view to be rendered, and perform an odd-even judgment on the view number, wherein the view number corresponds to the sequence number of the data group. In an embodiment of the present invention, in order to avoid the performance bottleneck problem caused by rendering when the H5 page content is too much, the present invention uses two cards to alternately obtain data, and associates and binds the card with the page container (for example: WebView). Only two page containers are needed to alternately render the page view. Each page container will only render the data obtained by the card associated with it, and there will be no situation where one page container renders many floors corresponding to cards, thereby avoiding the situation where more and more memory consumption occurs and will not trigger the performance bottleneck of the APP.

[0047] Since only two cards and two page containers are needed in the present invention, and they are used alternately for view rendering, it is possible to determine which card and which page container to use according to the parity of the view number of the view to be rendered.

[0048] According to one of the embodiments of the present invention, the view rendering request is generated in the following cases: when the multiple floors are grouped to obtain no less than one data group; or when the user's sliding operation on the page determines that the conditions for triggering the rendering of the next view are met. Among them, the case where the multiple floors are grouped to obtain no less than one data group is the case where the page content is divided and grouped by floors according to the page access request, at which time the first view of the page can be rendered and displayed; the case where the user's sliding operation on the page determines that the conditions for triggering the rendering of the next view are met is the case where the user needs to access the previous view or the next view according to the user's sliding operation on the page.

[0049] According to an embodiment of the present invention, determining whether a condition for triggering rendering of the next view is met according to a user's sliding operation on a page may specifically include: obtaining a sliding direction according to the user's sliding operation on the page; determining the number of pixels that have not been displayed in the current view according to the sliding direction; and determining whether a condition for triggering rendering of the next view is met when the number of pixels does not exceed a set number threshold. Specifically, firstly determine whether to display the previous view or the next view of the current view according to the user's sliding direction, and use the view to be displayed as the next view. Among them, if you swipe up, the next view will be displayed. At this time, it is necessary to determine whether the number of pixels (or height) that have not been displayed at the bottom of the current view exceeds the set number threshold (or height threshold), for example, determine whether the number of pixels that have not been displayed exceeds 1000, or determine whether the height that has not been displayed exceeds 5 cm, etc. If not, it is determined that the conditions for triggering rendering of the next view are met; if you swipe down, the previous view will be displayed. At this time, it is necessary to determine whether the number of pixels (or height) that have not been displayed at the top of the current view exceeds the set number threshold (or height threshold). If not, it is determined that the conditions for triggering rendering of the next view are met.

[0050] Figure 2 FIG. 1 is a schematic diagram of the implementation principle of a page rendering method according to an embodiment of the present invention. Figure 2 As shown, in an embodiment of the present invention, card 1 is bound to WebView1, card 2 is bound to WebView2, and the height of each card is greater than the height of the display screen. When rendering the first view, the data group obtained by card 1 includes floor 1, floor 2, and floor 3, and WebView1 is used to render the data group obtained by card 1 to obtain the first view. As the user slides or scrolls the page upward, the second view needs to be displayed at this time. The data group obtained by card 2 includes floor 4 and floor 5, and WebView2 is used to render the data group obtained by card 2 to obtain the second view. When the user continues to scroll the page upward, when the third view needs to be displayed, card 1 will be reused to obtain data for rendering. Specifically, the data group obtained by card 1 includes floor 6 and floor 7, and WebView1 is used to render the data group obtained by card 1 to obtain the third view. By analogy, page rendering can be achieved using two cards and two WebViews, and each WebView will only render the floor corresponding to the current card, thereby avoiding the problem of APP system reaching performance bottlenecks due to the consumption of a large amount of content for page rendering.

[0051] Step S103: When the view number is an odd number, use the first card to obtain the data group with the sequence number corresponding to the view number, and render the view of the obtained data group based on the first page container corresponding to the first card, and add the rendered view to the view list container that supports scrolling according to the view number. In an embodiment of the present invention, since the sum of the heights of the floors included in the card may be dynamically updated, the height of the page container WebView corresponding to the card will also be dynamically updated according to the total height of these floors, and the scrolling effect of itself will be lost. Therefore, the present invention needs to initialize a view list container that supports scrolling to store each view to replace the scrolling effect of WebView. Among them, the view list container is, for example, a native control ListView (list view) or RecyclerView (recycler view) that supports scrolling effects. When the user slides or scrolls the page, the view list container will achieve a scrolling effect to drive the page view saved in the view list container to scroll and display.

[0052] According to the technical solution of the present invention, when the view number is an odd number, for example, to display the view Figure 1 ,See Figure 3 ,See Figure 5 When the view is odd-numbered, the first card will be used to obtain the data group with the sequence number corresponding to the view number, and the obtained data group will be rendered based on the first page container corresponding to the first card. For example, when the view number is 1, the data group with the sequence number 1 will be obtained through the first card, and then the view will be rendered using the first page container. It should be noted here that the view number and the sequence number of the data group are corresponding, for example, they all start from 1 and increase by 1 each time.

[0053] In one embodiment of the present invention, when the view number is 1, a first card is used to obtain a data group with a sequence number corresponding to the view number, and a view rendering is performed on the obtained data group based on a first page container corresponding to the first card. Specifically, it may include: using the first card to obtain a data group with a sequence number corresponding to the view number, initializing a first page container corresponding to the first card and preloading static resources corresponding to the first page container; using the obtained data group and the static resources as rendering data, and performing a view rendering on the rendering data based on the first page container corresponding to the first card.

[0054] In particular, when rendering page views with odd view numbers, the rendering of the page view with view number 1 (i.e., the first page view with an odd view number) is quite special, and it is necessary to initialize the first page container and preload the static resources corresponding to the first page container (such as Html format, JavaScript code, CSS style file, etc.). Afterwards, when the first page container is used again, it is not necessary to initialize the first page container and load static resources again.

[0055] Step S104: When the view number is an even number, use the second card to obtain the data group with the sequence number corresponding to the view number, and perform view rendering on the obtained data group based on the second page container corresponding to the second card, and add the rendered view to the view list container that supports scrolling according to the view number for page rendering.

[0056] According to the technical solution of the present invention, when the view number is an even number, for example, to display the view Figure 2 ,See Figure 4 ,See Figure 6 When the view is numbered as an even number, the second card will be used to obtain the data group with the sequence number corresponding to the view number, and the view of the obtained data group will be rendered based on the second page container corresponding to the second card. For example, when the view number is 2, the data group with the sequence number of 2 will be obtained through the second card, and then the view will be rendered using the second page container.

[0057] In one embodiment of the present invention, when the view number is 2, a second card is used to obtain a data group with a sequence number corresponding to the view number, and a view rendering is performed on the obtained data group based on a second page container corresponding to the second card. Specifically, it may include: using a second card to obtain a data group with a sequence number corresponding to the view number, initializing a second page container corresponding to the second card and preloading static resources corresponding to the second page container; using the obtained data group and the static resources as rendering data, and performing a view rendering on the rendering data based on the second page container corresponding to the second card.

[0058] In particular, when rendering page views with even view numbers, the rendering of page view with view number 2 (i.e., the first page view with an even view number) is quite special, and it is necessary to initialize the second page container and preload the static resources corresponding to the second page container (such as Html format, JavaScript code, CSS style file, etc.). Afterwards, when the second page container is used again, it is not necessary to initialize the second page container and load static resources again.

[0059] Figure 3It is a schematic diagram of the page initialization process of an embodiment of the present invention. When a user requests to access a page, two new asynchronous threads will be started in addition to the UI main thread to perform page initialization operations together. Specifically, the UI main thread initializes a view list container that can support scrolling in the Android system. Because WebView only receives the floor data of the current card, the height of this WebView is dynamically updated according to the total height of these floors, and the effect of its own scrolling is lost, so the scrolling effect of the native view list container is needed to replace the scrolling effect of WebView. An asynchronous thread generates a data group that can be obtained by the card. This thread mainly processes the data content of the entire H5 page, divides the page content into floors, and groups the floor list to obtain a data group. Another asynchronous thread is used to initialize WebView and preload the static resources of the WebView. After the static resources are loaded, a message will be sent to the UI main thread, indicating that the current WebView is in a state where data can be received and rendered. The above three threads can be used to initialize the page asynchronously.

[0060] Figure 4 1 is a schematic diagram of the rendering process of the first view of an embodiment of the present invention. After completing the page initialization operation, the first view of the page can be rendered. Specifically, firstly, the data group 1 with the sequence number 1 is obtained through the card 1, and the data group 1 is sent to the initialized page container 1. The page container 1 sends the loaded static resources and the data group 1 to the rendering layer 1 through the JSB communication method, so that the rendering layer 1 executes the rendering method in the JavaScript to render the UI view. Figure 1 , as a child of the view list container. Finally, the rendered UI view Figure 1 Add it to position 1 in the view list container for display. For example, Figure 1 Add to Figure 2 In the figure, the data groups corresponding to floor 1, floor 2 and floor 3 are rendered and displayed at the position of the view obtained.

[0061] Figure 5 2 is a schematic diagram of the rendering process of the second view of an embodiment of the present invention. When the user slides on the page and determines that the second view needs to be rendered, firstly, the data group 2 with the sequence number 2 is obtained through the card 2, and the data group 2 is sent to the initialized page container 2. The page container 2 sends the loaded static resources and the data group 2 to the rendering layer 2 through the JSB communication method, so that the rendering layer 2 executes the rendering method in the JavaScript to render the UI view. Figure 2 Finally, the rendered UI view Figure 2Add it to position 2 in the view list container for display. For example, the rendered UI view Figure 2 Add to Figure 2 In the figure, the data groups corresponding to floors 4 and 5 are rendered and displayed at the position of the view obtained.

[0062] After that, when the user continues to slide on the page and determines that a third view needs to be rendered, card 1 will be reused for processing. Figure 1 Since it is already off-screen (i.e., invisible), you can reuse card 1 used to render the first view. First, get data group 3 with sequence number 3 through card 1, and send data group 3 to page container 1. Page container 1 sends data group 3 to rendering layer 1 through JSB communication, so that rendering layer 1 executes the rendering method in JavaScript and renders the UI view. Figure 3 Finally, render the UI view Figure 3 Add it to the view list container at position 3 for display. Similarly, no matter how much content the entire H5 page has, it can be rendered and displayed by alternately reusing card 1 and card 2. The number of floors will be controllable (there will not be a phenomenon of rendering many floors), and the performance bottleneck of the APP system will not be triggered, avoiding freezes, black screens, and other phenomena.

[0063] Figure 6 Schematic diagram of the main modules of the apparatus for page rendering according to an embodiment of the present invention. Figure 6 As shown, the page rendering apparatus 600 of the embodiment of the present invention mainly includes a page data division module 601 , a view number acquisition module 602 , a first view rendering module 603 and a second view rendering module 604 .

[0064] The page data division module 601 is used to divide the page content of the page to be accessed into multiple floors in response to the page access request, and group the multiple floors to obtain no less than one data group, and the data group has a sequence number;

[0065] A view number acquisition module 602 is used to respond to a view rendering request, acquire a view number corresponding to a view to be rendered, and perform parity determination on the view number, wherein the view number corresponds to a sequence number of the data group;

[0066] A first view rendering module 603 is used to, when the view number is an odd number, use a first card to obtain a data group with a sequence number corresponding to the view number, perform view rendering on the obtained data group based on a first page container corresponding to the first card, and add the rendered view to a view list container that supports scrolling according to the view number;

[0067] The second view rendering module 604, when the view number is an even number, uses the second card to obtain the data group with the sequence number corresponding to the view number, and performs view rendering on the obtained data group based on the second page container corresponding to the second card, and adds the rendered view to the view list container that supports scrolling according to the view number for page rendering.

[0068] According to one embodiment of the present invention, when the view number is 1, the first view rendering module 603 can also be used to: use the first card to obtain the data group with the sequence number corresponding to the view number, initialize the first page container corresponding to the first card and preload the static resources corresponding to the first page container; use the obtained data group and the static resources as rendering data, and perform view rendering on the rendering data based on the first page container corresponding to the first card.

[0069] According to another embodiment of the present invention, when the view number is 2, the second view rendering module 604 can also be used to: use the second card to obtain the data group with the sequence number corresponding to the view number, initialize the second page container corresponding to the second card and preload the static resources corresponding to the second page container; use the obtained data group and the static resources as rendering data, and perform view rendering on the rendering data based on the second page container corresponding to the second card.

[0070] According to another embodiment of the present invention, the view rendering request is generated in the following cases: when the multiple floors are grouped to obtain no less than one data group; or when it is determined that the conditions for triggering rendering of the next view are met based on the user's sliding operation on the page.

[0071] According to another embodiment of the present invention, determining whether a condition for triggering rendering of a next view is met based on a user's sliding operation on a page includes: obtaining a sliding direction based on the user's sliding operation on the page; determining the number of pixels that have not yet been displayed in the current view based on the sliding direction; and determining that a condition for triggering rendering of the next view is met when the number of pixels does not exceed a set threshold.

[0072] According to another embodiment of the present invention, the page data division module 601 can also be used to: group the floors in the order of the multiple floors according to the height of each floor and a preset card height value range to obtain no less than one data group.

[0073] According to yet another embodiment of the present invention, the preset card height value is greater than the display screen height.

[0074] According to another embodiment of the present invention, the second view rendering module 604 may also be used to: add the rendered view as a sub-item of the view list container to a corresponding position of the view list container supporting scrolling according to the view number.

[0075] According to the technical solution of an embodiment of the present invention, by responding to a page access request, the page content of the page to be accessed is divided into multiple floors, and the multiple floors are grouped to obtain no less than one data group, and the data group has a sequence number; in response to a view rendering request, the view number corresponding to the view to be rendered is obtained, and the view number is judged to be odd or even, wherein the view number corresponds to the sequence number of the data group; when the view number is an odd number, the first card is used to obtain the data group with the sequence number corresponding to the view number, and the obtained data group is rendered based on the first page container corresponding to the first card, and the rendered view is added to the view list container that supports scrolling according to the view number; when the view number is an even number, the second card is used to obtain the sequence number corresponding to the view number. The technical solution of obtaining a data group with a number, and rendering a view of the obtained data group based on the second page container corresponding to the second card, and adding the rendered view to the view list container that supports scrolling for page rendering according to the view number can manage and obtain page rendering data through cards, so that the amount of data rendered each time will not be too large, avoiding the problem of APP system performance bottleneck caused by excessive rendering memory usage; based on the reuse of two cards and the corresponding two page containers, page rendering is performed alternately, so that each page container will only render the floors in the current card, and there will be no situation where one page container renders many floors, saving the memory consumed by page rendering, thereby not triggering the performance bottleneck of the APP, and avoiding display abnormalities such as black screen and freeze.

[0076] Figure 7 An exemplary system architecture 700 is shown to which the method or apparatus for page rendering according to an embodiment of the present invention may be applied.

[0077] like Figure 7 As shown, system architecture 700 may include terminal devices 701, 702, 703, network 704 and server 705. Network 704 is used to provide a medium for communication links between terminal devices 701, 702, 703 and server 705. Network 704 may include various connection types, such as wired, wireless communication links or optical fiber cables, etc.

[0078] Users can use terminal devices 701, 702, and 703 to interact with server 705 through network 704 to receive or send messages, etc. Various communication client applications can be installed on terminal devices 701, 702, and 703, such as shopping applications, web browser applications, search applications, instant messaging tools, social platform software, etc. (only as examples).

[0079] The terminal devices 701 , 702 , and 703 may be various electronic devices having a display screen and supporting web browsing, including but not limited to smart phones, tablet computers, laptop computers, and desktop computers.

[0080] The server 705 may be a server that provides various services, such as a background management server that provides support for shopping websites browsed by users using the terminal devices 701 , 702 , and 703 (only as an example). The background management server can respond to the page access request and other data received, divide the page content of the page to be accessed into multiple floors, and group the multiple floors to obtain no less than one data group, wherein the data group has a sequence number; respond to the view rendering request, obtain the view number corresponding to the view to be rendered, and perform an odd-even judgment on the view number, wherein the view number corresponds to the sequence number of the data group; when the view number is an odd number, use the first card to obtain the data group with the sequence number corresponding to the view number, and perform view rendering on the obtained data group based on the first page container corresponding to the first card, and add the rendered view to the view list container that supports scrolling according to the view number; when the view number is an even number, use the second card to obtain the data group with the sequence number corresponding to the view number, and perform view rendering on the obtained data group based on the second page container corresponding to the second card, and add the rendered view to the view list container that supports scrolling according to the view number for page rendering and other processing, and feed back the processing result (such as the rendered view - just an example) to the terminal device.

[0081] It should be noted that the page rendering method provided in the embodiment of the present invention is generally executed by the server 705 , and accordingly, the page rendering device is generally set in the server 705 .

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

[0083] Reference below Figure 8 , which shows a schematic diagram of the structure of a computer system 800 of a terminal device or server suitable for implementing an embodiment of the present invention. Figure 8The terminal device or server shown is only an example and should not bring any limitation to the functions and scope of use of the embodiments of the present invention.

[0084] like Figure 8 As shown, the computer system 800 includes a central processing unit (CPU) 801, which can perform various appropriate actions and processes according to a program stored in a read-only memory (ROM) 802 or a program loaded from a storage part 808 into a random access memory (RAM) 803. In the RAM 803, various programs and data required for the operation of the system 800 are also stored. The CPU 801, the ROM 802, and the RAM 803 are connected to each other via a bus 804. An input / output (I / O) interface 805 is also connected to the bus 804.

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

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

[0087] It should be noted that the computer-readable medium shown in the present invention may be a computer-readable signal medium or a computer-readable storage medium or any combination of the above two. The computer-readable storage medium may be, for example, but not limited to, an electrical, magnetic, optical, electromagnetic, infrared, or semiconductor system, device or device, or any combination of the above. More specific examples of computer-readable storage media may include, but are not limited to: an electrical connection with one or more wires, a portable computer disk, a hard disk, a random access memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a portable compact disk read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the above. In the present invention, a computer-readable storage medium may be any tangible medium containing or storing a program that can be used by or in combination with an instruction execution system, device or device. In the present invention, a computer-readable signal medium may include a data signal propagated in a baseband or as part of a carrier wave, which carries a computer-readable program code. This propagated data signal may take a variety of forms, including but not limited to electromagnetic signals, optical signals, or any suitable combination of the above. Computer-readable signal media may also be any computer-readable medium other than computer-readable storage media, which may send, propagate or transmit a program for use by or in conjunction with an instruction execution system, apparatus or device. The program code contained on the computer-readable medium may be transmitted using any appropriate medium, including but not limited to: wireless, wire, optical cable, RF, etc., or any suitable combination of the above.

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

[0089] The units or modules involved in the embodiments of the present invention may be implemented by software or hardware. The units or modules described may also be provided in a processor, for example, may be described as: a processor including a page data partitioning module, a view number acquisition module, a first view rendering module, and a second view rendering module. Among them, the names of these units or modules do not constitute a limitation on the units or modules themselves in certain circumstances, for example, the page data partitioning module may also be described as "a module for dividing the page content of the page to be accessed into multiple floors in response to a page access request, and grouping the multiple floors to obtain no less than one data group".

[0090] As another aspect, the present invention further provides a computer-readable medium, which may be included in the device described in the above embodiment; or may exist independently without being assembled into the device. The computer-readable medium carries one or more programs. When the one or more programs are executed by a device, the device includes: in response to a page access request, dividing the page content of the page to be accessed into multiple floors, and grouping the multiple floors to obtain no less than one data group, wherein the data group has a sequence number; in response to a view rendering request, obtaining a view number corresponding to the view to be rendered, and performing an odd-even judgment on the view number, wherein the view number corresponds to the sequence number of the data group; when the view number is an odd number, using a first card to obtain a data group with a sequence number corresponding to the view number, and performing view rendering on the obtained data group based on a first page container corresponding to the first card, and adding the rendered view to a view list container that supports scrolling according to the view number; when the view number is an even number, using a second card to obtain a data group with a sequence number corresponding to the view number, and performing view rendering on the obtained data group based on a second page container corresponding to the second card, and adding the rendered view to a view list container that supports scrolling according to the view number for page rendering.

[0091] According to the technical solution of an embodiment of the present invention, by responding to a page access request, the page content of the page to be accessed is divided into multiple floors, and the multiple floors are grouped to obtain no less than one data group, and the data group has a sequence number; in response to a view rendering request, the view number corresponding to the view to be rendered is obtained, and the view number is judged to be odd or even, wherein the view number corresponds to the sequence number of the data group; when the view number is an odd number, the first card is used to obtain the data group with the sequence number corresponding to the view number, and the obtained data group is rendered based on the first page container corresponding to the first card, and the rendered view is added to the view list container that supports scrolling according to the view number; when the view number is an even number, the second card is used to obtain the sequence number corresponding to the view number. The technical solution of obtaining a data group with a number, and rendering a view of the obtained data group based on the second page container corresponding to the second card, and adding the rendered view to the view list container that supports scrolling for page rendering according to the view number can manage and obtain page rendering data through cards, so that the amount of data rendered each time will not be too large, avoiding the problem of APP system performance bottleneck caused by excessive rendering memory usage; based on the reuse of two cards and the corresponding two page containers, page rendering is performed alternately, so that each page container will only render the floors in the current card, and there will be no situation where one page container renders many floors, saving the memory consumed by page rendering, thereby not triggering the performance bottleneck of the APP, and avoiding display abnormalities such as black screen and freeze.

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

Claims

1. A method for page rendering, characterized in that: include: In response to a page access request, dividing the page content of the page to be accessed into a plurality of floors, and grouping the plurality of floors to obtain no less than one data group, wherein the data group has a sequence number; In response to a view rendering request, obtaining a view number corresponding to the view to be rendered, and performing parity determination on the view number, wherein the view number corresponds to a sequence number of the data group; When the view number is an odd number, a data group having a sequence number corresponding to the view number is obtained by using a first card, and a view rendering is performed on the obtained data group based on a first page container corresponding to the first card, and the rendered view is added to a view list container supporting scrolling according to the view number; When the view number is an even number, a second card is used to obtain a data group with a sequence number corresponding to the view number, and a view rendering is performed on the obtained data group based on a second page container corresponding to the second card, and the rendered view is added to a view list container that supports scrolling according to the view number for page rendering.

2. The method according to claim 1, characterized in that When the view number is 1, using a first card to obtain a data group with a sequence number corresponding to the view number, and performing view rendering on the obtained data group based on a first page container corresponding to the first card, including: Using a first card to obtain a data group with a sequence number corresponding to the view number, initializing a first page container corresponding to the first card and preloading static resources corresponding to the first page container; The acquired data group and the static resource are used as rendering data, and view rendering is performed on the rendering data based on a first page container corresponding to the first card.

3. The method according to claim 1, characterized in that When the view number is 2, using a second card to obtain a data group with a sequence number corresponding to the view number, and performing view rendering on the obtained data group based on a second page container corresponding to the second card, including: Using a second card to obtain a data group with a sequence number corresponding to the view number, initializing a second page container corresponding to the second card and preloading static resources corresponding to the second page container; The acquired data group and the static resource are used as rendering data, and view rendering is performed on the rendering data based on a second page container corresponding to the second card.

4. The method according to claim 1, characterized in that The view rendering request is generated in the following situations: In the case where the plurality of floors are grouped to obtain not less than one data group; Alternatively, when it is determined that the conditions for triggering rendering of the next view are met based on the user's sliding operation on the page.

5. The method according to claim 4, characterized in that The conditions for triggering the rendering of the next view are determined based on the user's sliding operation on the page, including: According to the user's sliding operation on the page, obtain the sliding direction; Determine the number of pixels that have not yet been displayed in the current view according to the sliding direction; When the number of pixels does not exceed a set threshold, it is determined that a condition for triggering rendering of the next view is met.

6. The method according to claim 1, characterized in that The multiple floors are grouped to obtain at least one data group, including: In the order of the multiple floors, the floors are grouped according to the height of each floor and a preset card height value range to obtain no less than one data group.

7. The method according to claim 6, characterized in that The preset card height value is greater than the display screen height.

8. The method according to claim 1, characterized in that Add the rendered view to a scrollable view list container according to the view number, including: According to the view number, the rendered view is added as a child of the view list container to the corresponding position of the view list container that supports scrolling.

9. A device for page rendering, characterized in that: include: A page data division module, for responding to a page access request, dividing the page content of the page to be accessed into a plurality of floors, and grouping the plurality of floors to obtain no less than one data group, wherein the data group has a sequence number; A view number acquisition module, used for obtaining a view number corresponding to a view to be rendered in response to a view rendering request, and performing parity determination on the view number, wherein the view number corresponds to a sequence number of the data group; A first view rendering module is used to, when the view number is an odd number, use a first card to obtain a data group with a sequence number corresponding to the view number, perform view rendering on the obtained data group based on a first page container corresponding to the first card, and add the rendered view to a view list container that supports scrolling according to the view number; The second view rendering module uses the second card to obtain the data group with the sequence number corresponding to the view number when the view number is an even number, and performs view rendering on the obtained data group based on the second page container corresponding to the second card, and adds the rendered view to the view list container that supports scrolling according to the view number for page rendering.

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

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

Images