Page display method and device, electronic device and computer-readable storage medium

Abstract

The present application discloses a page display method and device, an electronic device, and a computer-readable storage medium. The method includes: obtaining data to be displayed according to a first operation instruction input by a user for indicating an update of the display content of the current page; comparing the displayed data in the current page with the data to be displayed; and performing rendering calculation and display for the data to be displayed that is different from the displayed data according to the comparison result. The embodiment of the present application utilizes the immutable characteristics of data stored in the form of a persistent data structure to perform data comparison, so that only rendering calculations need to be performed for list items that have not been rendered, which can reduce the amount of calculations during rendering and speed up the page display process.

Description

Technical Field

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

[0002] In the prior art, a display device displays page content (including various forms of text, pictures, videos, etc.) to a user, and updates the displayed content according to operation instructions fed back by the user.

[0003] However, since each update and rendering requires recalculation, these processes will consume a lot of memory resources. With the development of Internet technology, the content presented to users has become more and more complex, and the amount of calculation required has also increased, causing the page rendering to become slower and slower, thus affecting the user's operating experience. Summary of the invention

[0004] The embodiments of the present application provide a page display method and device, an electronic device, and a computer-readable storage medium to solve the defect of large amount of calculation in page rendering in the prior art.

[0005] To achieve the above purpose, the present application provides a page display method, including:

[0006] Acquire data to be displayed according to a first operation instruction input by a user for instructing to update the displayed content of the current page;

[0007] Compare the displayed data in the current page with the data to be displayed;

[0008] According to the comparison result, rendering calculation and display are performed for the data in the to-be-displayed data that is different from the displayed data.

[0009] The present application also provides a page display method, including:

[0010] According to a first operation instruction input by a user for instructing to update the displayed content of the current page, acquiring the data to be displayed in the page data of the current page, wherein the page data of the current page is stored as each node in a tree data structure;

[0011] Compare the nodes corresponding to the displayed data in the current page in the tree data structure with the nodes corresponding to the data to be displayed in the tree data structure;

[0012] According to the comparison result, rendering calculation and display are performed for the data corresponding to the nodes that are not displayed.

[0013] The present application also provides a page display device, including:

[0014] A first acquisition module, used to acquire data to be displayed according to a first operation instruction input by a user for instructing to update the displayed content of the current page;

[0015] A comparison module, used for comparing the displayed data of the current page with the data to be displayed;

[0016] The rendering module is used to perform rendering calculation and display for the data to be displayed that is different from the displayed data according to the comparison result of the comparison module.

[0017] The present application also provides an electronic device, including:

[0018] Memory, used to store programs;

[0019] The processor is used to run the program stored in the memory to execute the above-mentioned page display method.

[0020] An embodiment of the present application further provides a computer-readable storage medium, on which a computer program is stored, and when the program is executed, the above-mentioned page display method is implemented.

[0021] The page display method and device, electronic device and computer-readable storage medium provided in the embodiments of the present application compare the rendered data with the data to be displayed, so that rendering calculations only need to be performed on new page data that has changed compared to the currently displayed data, and only the rendering calculation results of these new page data are used to update the display content, thereby avoiding re-rendering of all page data to be displayed, reducing the amount of calculation during rendering, accelerating the page display process, and enhancing the user experience.

[0022] The above description is only an overview of the technical solution of the present application. In order to more clearly understand the technical means of the present application, it can be implemented in accordance with the contents of the specification. In order to make the above and other purposes, features and advantages of the present application more obvious and easy to understand, the specific implementation methods of the present application are listed below. BRIEF DESCRIPTION OF THE DRAWINGS

[0023] Various other advantages and benefits will become apparent to those of ordinary skill in the art by reading the detailed description of the preferred embodiments below. The accompanying drawings are only for the purpose of illustrating the preferred embodiments and are not to be considered as limiting the present application. Also, the same reference symbols are used throughout the accompanying drawings to represent the same components. In the accompanying drawings:

[0024] Figure 1a A system architecture diagram of the page display method provided in the embodiment of the present application;

[0025] Figure 1bA schematic diagram of a scenario of a page display method provided in an embodiment of the present application;

[0026] Figure 2 A flowchart of an embodiment of the page display method provided by the present application;

[0027] Figure 3a A flowchart of another embodiment of the page display method provided by the present application;

[0028] Figure 3b A flowchart of another embodiment of the page display method provided by the present application;

[0029] Figure 3c A flowchart of another embodiment of the page display method provided by the present application;

[0030] Figure 4a for Figure 3a A scene description diagram of the illustrated embodiment;

[0031] Figure 4b for Figure 3b A scene description diagram of the illustrated embodiment;

[0032] Figure 4c for Figure 3c A scene description diagram of the illustrated embodiment;

[0033] Figure 5 A schematic diagram of the structure of an embodiment of a page display device provided by the present application;

[0034] Figure 6 A schematic diagram of the structure of an electronic device embodiment provided in this application. DETAILED DESCRIPTION

[0035] The exemplary embodiments of the present disclosure will be described in more detail below with reference to the accompanying drawings. Although the exemplary embodiments of the present disclosure are shown in the accompanying drawings, it should be understood that the present disclosure can be implemented in various forms and should not be limited by the embodiments set forth herein. On the contrary, these embodiments are provided to enable a more thorough understanding of the present disclosure and to fully convey the scope of the present disclosure to those skilled in the art.

[0036] At present, with the development of the Internet, users can read a large amount of content through the Internet. However, with the richness of content, it is often difficult to accommodate all the content on one page. Therefore, the prior art usually adopts the method of making such content into a multi-page document so that users can read it in sections by turning pages. However, for some specific topics or themes, it is necessary to present them to users in the form of pictures and texts, and such pictures and texts are not suitable for rigidly dividing them into multiple sections by page, which affects the reading effect of users. Especially with the emergence of touch screen technology, more and more users are accustomed to operating by sliding up and down on the screen. Therefore, long documents are becoming more and more popular with users. Users only need to slide up and down on the screen to view different parts of a long document.

[0037] For example, a long document usually has a length that exceeds the height of the user's screen. Therefore, only a portion of the long document is displayed to the user on the screen. When the user pulls up or down on the portion displayed on the screen, the display device reads the other portions of the long document accordingly based on the user's operation and performs rendering calculations, so that the long document can be displayed on the screen in the form of scrolling up or scrolling down.

[0038] Figure 1a This is a system architecture diagram of the page display method provided in the embodiment of the present application. Figure 1a As shown in , generally, the display device first reads the data of the long document that the user wants to read from a data source such as a server storing a database and stores it in the form of a DOM tree in a storage device such as a cache. After that, the data of the page such as the long document can be placed in the page layout according to the style requirements, so that the page layout with the page data is displayed according to the screen.

[0039] In the above-mentioned scheme of the prior art, it is necessary to perform rendering calculation for the part to be displayed of the long document obtained in response to each screen operation of the user. However, the content of graphic documents is becoming increasingly rich, and the rendering calculation of such rich content will consume a lot of computing resources. In particular, when the user scrolls the page content displayed on the screen, it will cause the reconstruction of the DOM tree, that is, reflux. When the performance of the display device is limited, especially when the user slides frequently, the update of the screen display will be stuck, which seriously affects the user's reading experience.

[0040] In actual use, due to the convenience of sliding operations, users often do not slide up to display other content after reading the current displayed content completely, as in page turning. Instead, they slide up or down after reading the part of the screen that their line of sight is facing. In other words, for the user, he is actually only reading the part of the content that his line of sight is facing, and moves the unread part to the position directly facing his line of sight by sliding up and down as the reading progresses. Therefore, for the display screen, each time the displayed content is updated, in fact only part of the displayed content is new content relative to the displayed content before the sliding operation, and the other content is just the original content that has been moved up or down with the sliding operation. For example, Figure 1b A schematic diagram of a scene of a page display method provided in an embodiment of the present application, see Figure 1b In this case, in the prior art, since it is impossible to distinguish the difference between the displayed content before and after sliding, re-rendering calculation is performed every time the page content is scrolled. Therefore, such rendering calculation for the displayed content that has not actually changed leads to a waste of computing resources and thus affects the display speed.

[0041] Therefore, this application proposes a page display method. Figure 1b A schematic diagram of an application scenario of the page display method provided in an embodiment of the present application, Figure 1b The scenario shown is only one example of a scenario to which the technical solution of the present application can be applied. Figure 1b As shown, in the page display scheme of the embodiment of the present application, when a user views the display of page data through the screen of the display device, the display device obtains the corresponding page data from a data source such as a server storing a database.

[0042] In the embodiment of the present application, the page document of the page data to be displayed to the user can be represented by a DOM structure (Document Object Model), and each element of the document can be stored in each node of the DOM tree. When the user operates on a display device such as a mobile terminal to select the page document for reading, the display device can obtain the page document, such as the code of the document, from a data source, and the display device can display the page document according to the display layout of the user interface, such as Figure 1b The long list layout shown in the figure reads the elements of each node of the DOM tree in a predetermined order, and can put the read elements into the document flow to be placed one by one in each row of the long list layout from top to bottom, that is, each list item, for example Figure 1bIn particular, in the embodiment of the present application, the height of each row in the long list layout can be determined by the attributes of the elements of the page document arranged therein, and its width can be determined by the attributes of the elements arranged therein and the attributes of the display screen.

[0043] In the above case, the user can read the page document, for example, Figure 1b In the process of updating the list items 6-12 displayed on the left side of the , the page display is updated by sliding up and down on the screen according to the reading progress. As described above, during such sliding, even if the user slides a small distance, the user's mobile terminal needs to redraw the page data of the DOM tree structure corresponding to the scrolling of the page content.

[0044] For example, Figure 1b As shown in the figure, in the display state shown on the left, that is, the list items 6-12 in the form of a long list are displayed on the screen, and the user inputs an operation instruction of sliding up through the screen, and the mobile terminal receives the instruction, thereby obtaining the list items 8-14 to be displayed on the screen next from a data source such as a server according to the instruction. After the new display content, that is, the list item 8-14, is obtained. In the prior art, the display content will be redrawn according to the newly obtained display content, that is, the data in the list item 8-14, that is, the DOM tree will be regenerated, and the page layout and rendering calculation will be performed accordingly. However, in an embodiment of the present application, the display content of the obtained page document, such as the data in the list item 8-14, can be compared with the data of the list item 6-12 that has been displayed. For example, various data comparison methods known in the art can be used to perform such a comparison. In the present application, the page data can be stored in a persistent data structure, so that the data stored in the persistent data structure has the characteristic of being unchangeable. Therefore, when comparing, the data can be directly compared to determine whether it is the same data.

[0045] In the embodiment of the present application, according to the result of data comparison, it can be determined that in the acquired content data to be displayed, the list item data 8-12 is the same as the list item data 8-12 in the displayed content data. In other words, in the acquired content data to be displayed, the data of the displayed list items 8-12 has not changed, only the data of the new list items 13-14 has been added, and the data of the displayed list items 6-7 has been removed.

[0046] Therefore, in the embodiment of the present application, the DOM tree can be updated and rendering calculations can be performed only for the newly added list item data 13-14. Therefore, compared with the prior art, the number of nodes of the DOM tree that need to be processed when updating the display can be reduced, and the redrawing caused by the page scrolling operation in the prior art can be avoided, thereby greatly reducing the amount of rendering calculations.

[0047] In the above manner, in the final display, the rendering calculation results of the displayed list items 8-12 and the newly calculated and added list items 13-14 can be directly used for display, thereby completing the update of the displayed content.

[0048] Therefore, a persistent data structure is used to store page data. When a user updates the displayed content, the immutable property of the data stored in the persistent data structure is used to quickly compare the displayed data with the data to be displayed. This allows only rendering calculations to be performed on new page data that has changed compared to the currently displayed data, and only the rendering calculation results of the new page data are used to update the displayed content. This avoids re-rendering of all page data to be displayed, reduces the amount of calculation during rendering, speeds up the page display process, and enhances the user experience.

[0049] The above embodiments are illustrations of the technical principles and exemplary application frameworks of the embodiments of the present application. The specific technical solutions of the embodiments of the present application are further described in detail below through multiple embodiments.

[0050] Embodiment 1

[0051] Figure 2 This is a flowchart of an embodiment of the page display method provided by the present application. The execution subject of the method can be various display terminals or devices with data processing capabilities, for example, a mobile terminal, a computer, or a laptop computer used by a user. Of course, the execution subject can also be a device or chip integrated in these devices, such as a processing module in a mobile terminal, a processor chip in a computer. Figure 2 As shown, the page display method includes the following steps:

[0052] S201, acquiring data to be displayed according to a first operation instruction input by a user for instructing to update displayed content of a current page.

[0053] The user can input various instructions for displaying the page data on the current screen by directly touching the screen of the display device or by input devices such as a mouse and keyboard on his own terminal, such as a mobile terminal or a computer. For example, the homepage of a website can be opened by entering a URL, or a specific page can be opened for display by clicking a link or executing a program. Therefore, the terminal receiving the user operation can obtain the corresponding page data from a data source such as a server storing a database. For example, according to the URL entered by the user, the website's server can send the homepage code to the user's terminal, and then parse it into a DOM structure through a parser, and generate page data after adding CSS styles.

[0054] In the embodiment of the present application, the user is reading the current displayed content, for example, reading Figure 1b During the process of displaying list items 6-12 on the left side, the page display is updated by sliding up and down on the screen according to the reading progress. For example, Figure 1b As shown in the display state shown on the left, that is, list items 6-12 in the form of a long list are displayed on the screen as display content, and the user inputs an operation instruction of sliding upward through the screen, and the mobile terminal receives the instruction, so that the display content to be displayed on the screen next, such as list items 8-14, can be obtained from a data source such as a server according to the instruction.

[0055] S202: Compare the displayed data in the current page with the data to be displayed.

[0056] After obtaining the new display content, that is, list items 8-14. In an embodiment of the present application, the content to be displayed of the obtained page, such as list items 8-14, can be compared as the data to be displayed with the list items 6-12 that have been displayed as the displayed data. In the present application, the page data can be stored in a persistent data structure, and the data can be compared one by one by means of the unchangeable characteristics of the data stored in the persistent data structure. For example, the function in the JS (JavaScript) language commonly used in the page display technology can be used to compare the data. That is, the equal operation in the JS language can be used to determine whether the fields of the current display data and the data to be displayed, that is, the list items are the same. For example, the page data of the page can be represented as an array, each of which is the page data of the display content generated each time a user operation occurs, so that when the user operates the screen display content, such as a swipe up operation, the displayed data and the data to be displayed in the above array can be subjected to the JS equal operation to determine the list items that have changed.

[0057] S203, performing rendering calculation and display for the data to be displayed that is different from the displayed data according to the comparison result.

[0058] In the embodiment of the present application, according to the result of data comparison based on, for example, a persistent data structure as described above, it can be determined that in the acquired content data to be displayed, the list item data 8-12 is the same as the list item data 8-12 in the displayed content data. In other words, in the acquired content data to be displayed, the data of the displayed list items 8-12 is unchanged, only the data of the new list items 13-14 is added, and the data of the displayed list items 6-7 is removed.

[0059] Therefore, in the embodiment of the present application, the DOM tree can be updated only for the newly added list items 13-14 to perform rendering calculations, so that when the final display is displayed, the rendering calculation results of the displayed list items 8-12 and the newly calculated data of the newly added list items 13-14 can be directly used for display, thereby completing the update of the displayed content. Therefore, compared with the prior art, the number of nodes of the DOM tree that need to be processed when updating the display can be reduced, avoiding the redrawing caused by the page scrolling operation in the prior art, thereby greatly reducing the amount of rendering calculations.

[0060] Therefore, a persistent data structure is used to store page data. When a user updates the displayed content, the immutable property of the data stored in the persistent data structure is used to quickly compare the displayed data with the data to be displayed. This allows only rendering calculations to be performed on new page data that has changed compared to the currently displayed data, and only the rendering calculation results of the new page data are used to update the displayed content. This avoids re-rendering of all page data to be displayed, reduces the amount of calculation during rendering, speeds up the page display process, and enhances the user experience.

[0061] Embodiment 2

[0062] Figure 3a A flowchart of another embodiment of the page display method provided by the present application, and Figure 4a for Figure 3a The scene description diagram of the embodiment shown. Figure 3a As shown, the page display method provided in this embodiment may include the following steps:

[0063] S3011, detecting whether the list items currently displayed include the list item at the head of the sequence.

[0064] In an embodiment of the present application, when a user inputs a display instruction for the page data on the current screen by directly touching the screen of the display device or by using an input device such as a mouse or keyboard on his / her terminal, such as a mobile terminal or a computer, the corresponding page data can be obtained from a data source such as a server storing a database according to the user's instruction and rendered as display content to be displayed to the user. In an embodiment of the present application, the page data corresponding to the display content can be a plurality of list items in a sequential order, such as Figure 1b As shown in , and in the final display, the list items at the position corresponding to the screen size are displayed as the display content.

[0065] Therefore, when displaying the current display content, it can be detected whether the currently displayed list items include the list item at the head of the sequence. Figure 4aAs shown in , the list items corresponding to the currently displayed display content are list items 1-7. That is, the currently displayed display content is the portion of the page specified by the user including the top. In other words, the portion currently read by the user is the first list item in the sequence including the page data, that is, list item 1. Therefore, through the detection of step S3011, it can be confirmed whether the currently displayed content is the top of the entire page.

[0066] S3012: Display a refresh component at the top of the displayed content according to a second operation instruction input by the user for instructing to scroll down the displayed content.

[0067] When the currently displayed content is the top of the entire page, if the user inputs an operation instruction to scroll down the displayed content, then because the currently displayed content is already at the top of the page, there is actually no corresponding page data available to update the currently displayed content to display to the user. In this case, you can Figure 4a As shown in , a refresh component can be additionally displayed on the top of the displayed content to prompt the user to the top of the currently displayed page.

[0068] It should be pointed out that in actual applications, users can usually understand from the displayed content that the current displayed content is the top of the page. Therefore, when the user enters the scroll down operation instruction in this case, it is likely that the user wants to refresh the current page, that is, to re-acquire the page data. Of course, it may also be a user's misoperation, and accidentally misoperate the screen while browsing. Therefore, if the displayed content is the top of the page, the user enters the scroll down operation instruction and refreshes it immediately, which may execute the user's misoperation and fail to achieve the user's true intention. Therefore, in step S3012, when the top of the page has been displayed, a refresh component can be displayed according to the user's input operation instruction to scroll down the displayed content. For example, a funnel-shaped picture can be displayed above the displayed content to prompt the user that the page needs to be refreshed and wait for further operation by the user.

[0069] In addition, since it is necessary to wait for further user operations when the user pulls down the currently displayed content, step S3012 may further include: determining the refresh component display position of the refresh component according to the downward scrolling distance indicated by the second operation instruction; and displaying the refresh component at the refresh component display position.

[0070] As described above, when a user input is received to scroll down the displayed content when the displayed content is at the top of the page, a refresh component can be displayed at the top of the displayed content to prompt the user to prepare to refresh the current page, and in the process of waiting for further operation by the user, the display position of the refresh component can also be further determined according to the scrolling distance of the user's continued scrolling operation. For example, as the user continues to scroll down, the display position of the refresh component can be continuously lowered so that the refresh component is always displayed at the top of list item 1. Alternatively, as the user continues to scroll down, the refresh component can always be displayed in the middle of the blank area between the top of list item 1 and the top of the screen. This allows for more flexible display of the refresh component.

[0071] S3013: When the second operation instruction indicates to scroll the displayed content downward to a first predetermined height, obtain update data of the current page.

[0072] As mentioned above, when Figure 4a In the situation shown in , a refresh component is first displayed on top of the current displayed content according to the user's scroll-down operation instruction, and the user can confirm his intention according to the reminder of the refresh component.

[0073] For example, in step S3013, the whole page data can be retrieved only after the operation instruction input by the user indicates that the displayed content is scrolled down to a certain height. For example, in step S3012, after the refresh component is displayed according to the operation instruction input by the user to scroll down the displayed content, the refresh component can be waited until the user continues to scroll down to a certain height, so that it can be confirmed that the user's intention is indeed to refresh the current page, and therefore, the updated data of the current page can be retrieved.

[0074] S3014, determining the data to be displayed in the updated data, and performing rendering calculation and display on the data to be displayed in the updated data.

[0075] When the updated data of the current page is obtained in step S3013, the updated data of the page can be processed in step S3014, such as rebuilding the DOM tree, adding CSS styles, and generating page data, i.e., list items, according to the page layout. The operation of this step after re-obtaining the updated data of the current page is basically the same as the operation of the user opening a new page.

[0076] Therefore, in this embodiment, a refresh component is first displayed to prompt the user based on a scrolling operation instruction input by the user, and the user's further operation is waited for. The refresh operation of the page is initiated when the user inputs a further scrolling operation instruction to a predetermined height, thereby redisplaying the display content of the current page based on the updated data.

[0077] Embodiment 3

[0078] Figure 3b A flowchart of another embodiment of the page display method provided by the present application, and Figure 4b for Figure 3b The scene description diagram of the embodiment shown. Figure 3b As shown, the page display method provided in this embodiment may include the following steps:

[0079] S3021: Detect whether the currently displayed list items include a list item at the end of the sequence.

[0080] According to an embodiment of the present application, when a user inputs a display instruction for the page data on the current screen by directly touching the screen of the display device or by using an input device such as a mouse or keyboard on his / her terminal, such as a mobile terminal or a computer, the corresponding page data can be obtained from a data source such as a server storing a database according to the user's instruction and rendered as display content to be displayed to the user. In an embodiment of the present application, the page data corresponding to the display content can be a plurality of list items in a sequential order, such as Figure 1b As shown in , and in the final display, the list items at the position corresponding to the screen size are displayed as the display content.

[0081] As the user progresses in reading the page, he or she can read different parts of the page content by swiping upwards. When the user is about to read to the bottom of the current page, for example, when the user has read list item n-6 of list items 1-n constituting the page, Figure 4b As shown in , it is possible to detect whether the currently displayed content contains a list item at the end of the data sequence of the page, for example Figure 4b As shown in the left figure of , the current display content includes six list items located at the end of the data sequence of the page, namely, list item n-6 to list item n, so it can be determined that the current display content has included the list item located at the end of the data sequence of the page. That is, the user has read to the end of the page.

[0082] S3022: Display a loading component at the bottom of the displayed content according to a third operation instruction input by the user for instructing to scroll the displayed content upward.

[0083] When the currently displayed content is at the bottom of the entire page, if the user inputs an operation instruction to swipe up to scroll the displayed content, then because the currently displayed content is already at the bottom of the page, there is actually no corresponding page data available to update the currently displayed content to display to the user. In this case, you can Figure 4b As shown on the right side of , a loading component may be additionally displayed at the bottom of the displayed content, for example, below list item n, to prompt the user to the bottom of the currently displayed page.

[0084] It should be pointed out that in actual applications, users usually cannot understand from the displayed content that the current displayed content is the bottom of the page. For example, when a user browses a shopping website, the list items of the page are mainly composed of various commodities, and the user's upward scrolling operation can browse various different commodities, that is, the bottom of the currently loaded page is also a display of various commodities. Therefore, when the user enters the operation instruction of scrolling up in this case, it is usually hoped to continue to browse more content, that is, to obtain more page data. Of course, it may also be a user's misoperation, and accidentally misoperate the screen when browsing. Therefore, if the displayed content is the bottom of the page, the user enters the operation instruction of scrolling up, and it is refreshed immediately, it is possible that the user's misoperation is executed, and the user's true intention is not realized, thereby affecting the user's viewing of the currently displayed commodities. Therefore, in step S3022, when the bottom of the page has been displayed, according to the operation instruction of scrolling down the displayed content input by the user, a loading component can be displayed, for example, a text can be displayed below the displayed content, such as "It is currently the bottom, do you want to browse more" and so on, to prompt the user that more data can be loaded by continuing to scroll up, and wait for further operation of the user.

[0085] S3023: When the third operation instruction indicates to scroll the displayed content upward to a second predetermined height, obtain supplementary data of the current page.

[0086] As mentioned above, when Figure 4b In the situation shown in , a loading component is first displayed at the bottom of the current displayed content according to the user's upward scrolling operation instruction, and the user can confirm his intention according to the reminder of the loading component.

[0087] For example, in step S3023, the loading of more data, i.e., supplementary data of the current page, may be triggered only when the user inputs an operation instruction to scroll the displayed content upward to a certain height. For example, when the user browses a shopping website, more product pictures and introductions may be loaded.

[0088] S3024, performing rendering calculation and display on at least a portion of the supplementary data.

[0089] When the supplementary data is obtained, the steps of the above-mentioned second embodiment can be used to reuse at least some list items of the current display content, and for example, a part of the supplementary data can be displayed at the position where the loading component is displayed. Figure 4bAs shown in , when the supplementary data has been obtained, it is possible to confirm through data comparison according to the steps of the second embodiment that the data to be displayed includes the same data as the displayed data, that is, list items n-5 to n, and the difference is the top list item in the supplementary data displayed at the pull-up refresh component position. Therefore, through the steps of the second embodiment above, the rendering calculation results of the list items n-5 to n can be directly reused, and only the rendering calculation is performed for the top list item in the supplementary data, thereby completing the rendering of the data to be displayed.

[0090] In an embodiment of the present application, the current page browsed by the user may be very long, so the operation of obtaining the updated data of the current page is not limited to the above steps, and for example, the duration of the user's operation on the current page can be detected, and when it is confirmed according to the detection result that the duration of the user's operation on the current page is greater than the first predetermined time threshold, according to the second operation instruction input by the user to indicate scrolling down to display the content or the third operation instruction to indicate scrolling up to display the content, the updated data of the current page is obtained, and the rendering calculation and display are performed based on the data to be displayed in the updated data and for the data to be displayed in the updated data. In this way, by confirming that the user has browsed the current page for a long time, that is, the user may have become bored with the content currently browsed, even if the user has not browsed to the top or the bottom, the data of the current page can be actively updated for the user, thereby better improving the user experience.

[0091] Therefore, in this embodiment, the loading component is first displayed to prompt the user according to the upward scrolling operation instruction input by the user, and the user's further operation is waited for. When the user inputs a further upward scrolling operation instruction to a predetermined height, the display of more data is started, thereby performing rendering calculation and display on a part of the loaded data.

[0092] Embodiment 4

[0093] Figure 3c A flowchart of another embodiment of the page display method provided by the present application, and Figure 4c for Figure 3c The scene description diagram of the embodiment shown. Figure 3b As shown, the page display method provided in this embodiment may include the following steps:

[0094] S3031: Acquire data corresponding to at least one undisplayed list item that is adjacent to the currently displayed list item in sequence order.

[0095] S3032: Perform rendering calculation for data corresponding to the list items that are not displayed.

[0096] In actual use, especially when users use small-screen devices such as mobile terminals to view pages, it is necessary to scroll the displayed content more frequently. Therefore, in the embodiment of the present application, the current displayed content can be displayed, for example Figure 1b When the list items 6-12 are displayed on the left side of the scroll bar, before the user inputs a scroll operation instruction, the data of the list items that are adjacent to the currently displayed list items in sequence order and have not yet been displayed are automatically obtained, for example, Figure 1b The list items 4 and 5 above the list item 6 and the list items 13 and 14 below the list item 12 are displayed on the left side, and the data of these undisplayed list items are rendered and calculated and stored. Therefore, when the user scrolls up after reading the current displayed content list items 6-12, the rendering calculation results of the list items 13 and 14 below the list item 12 can be directly used for rendering, which greatly speeds up the display speed.

[0097] S3033: Acquire data to be displayed according to a first operation instruction input by the user for instructing to update the displayed content of the current page.

[0098] In the embodiment of the present application, the user is reading the current displayed content, for example, reading Figure 1b During the process of displaying list items 6-12 on the left side, the page display is updated by sliding up and down on the screen according to the reading progress. For example, Figure 1b As shown in the display state shown on the left, that is, list items 6-12 in the form of a long list are displayed on the screen as display content, and the user inputs an operation instruction of sliding upward through the screen, and the mobile terminal receives the instruction, so that the display content to be displayed on the screen next, such as list items 8-14, can be obtained from a data source such as a server according to the instruction.

[0099] S3034: Compare the displayed data in the current page with the data to be displayed.

[0100] After obtaining the new display content, that is, list items 8-14. In an embodiment of the present application, the content to be displayed of the obtained page, such as list items 8-14, can be compared as the data to be displayed with the list items 6-12 that have been displayed as the displayed data. In the present application, the page data can be stored in a persistent data structure, and the data can be compared one by one by means of the unchangeable characteristics of the data stored in the persistent data structure. For example, the function in the JS (JavaScript) language commonly used in the page display technology can be used to compare the data. That is, the equal operation in the JS language can be used to determine whether the fields of the current display data and the data to be displayed, that is, the list items are the same. For example, the page data of the page can be represented as an array, each of which is the page data of the display content generated each time a user operation occurs, so that when the user operates the screen display content, such as a swipe up operation, the displayed data and the data to be displayed in the above array can be subjected to the JS equal operation to determine the list items that have changed.

[0101] S3035: Rendering calculation and display are performed for the data to be displayed that is different from the displayed data according to the comparison result.

[0102] In the embodiment of the present application, according to the result of data comparison based on, for example, a persistent data structure as described above, it can be determined that in the acquired content data to be displayed, the list item data 8-12 is the same as the list item data 8-12 in the displayed content data. In other words, in the acquired content data to be displayed, the data of the displayed list items 8-12 is unchanged, only the data of the new list items 13-14 is added, and the data of the displayed list items 6-7 is removed.

[0103] Therefore, in the embodiment of the present application, the DOM tree can be updated only for the newly added list items 13-14 to perform rendering calculations, so that when the final display is made, the displayed list items 8-12 and the newly calculated rendering calculation results of the newly added list items 13-14 can be directly used for display, thereby completing the update of the displayed content. In particular, by using steps S3031 and S3032 in the present embodiment, before the user scrolls the current page so that the displayed content changes to list items 8-14, the data of list items 13 and 14 have been rendered and calculated and stored in advance. Therefore, when it is determined that the content to be displayed includes list items 13 and 14 according to the user's scrolling operation and it is determined through data comparison that list items 13 and 14 need to be rendered and calculated, the rendering calculation results in the cache can be directly used to combine with the previous rendering calculation results of the displayed list items 8-12 for display.

[0104] Therefore, compared with the prior art, the number of nodes of the DOM tree that needs to be processed when updating the display can be reduced, and the redrawing caused by the page scrolling operation in the prior art is avoided, thereby greatly reducing the amount of rendering calculation.

[0105] In addition, currently, some page displays include list items with fixed display positions. For example, the navigation bar of a shopping website, etc. Therefore, these list items need to be displayed in the fixed display position indicated in their attributes. However, when a page includes multiple list items with fixed display positions, for example, Figure 4c As shown in , the current display content shown on the left side includes a list item m at a fixed position that is placed at the top and another list item m+3 that has not yet reached its fixed position. Therefore, during normal scrolling display, as the display content scrolls, the list item m is always at the top of the display content, and the list item m+3 that is to be placed at the top can move to the top position as the scrolling operation progresses. Therefore, in this case, the method of the embodiment of the present application may further include:

[0106] S3036: Detect whether the currently displayed list items include list items with a fixed display position attribute.

[0107] S3037, according to the third operation instruction input by the user for instructing to scroll up the displayed content, when the list item with the fixed display position attribute reaches the fixed display position, the list item is continuously displayed at the fixed display position until a new list item with the fixed display position attribute reaches the position.

[0108] Therefore, through step S3036, it is possible to detect whether the list items of the currently displayed content include list items with a fixed display position attribute, for example, list item m and list item m+4, and when list item m+4 reaches the fixed position indicated by its fixed display position attribute, that is, the top of the screen, it can automatically replace the original list item m as the top list item.

[0109] Therefore, a persistent data structure is used to store page data. When a user updates the displayed content, the immutable property of the data stored in the persistent data structure is used to quickly compare the displayed data with the data to be displayed. This allows only rendering calculations to be performed on new page data that has changed compared to the currently displayed data, and only the rendering calculation results of the new page data are used to update the displayed content. This avoids re-rendering of all page data to be displayed, reduces the amount of calculation during rendering, speeds up the page display process, and enhances the user experience.

[0110] Embodiment 5

[0111] Figure 5A schematic diagram of a structure of an embodiment of a page display device provided in the present application, which can be used to perform the following steps: Figure 2 In the embodiment of the present application, the page display device can be implemented as a mobile terminal, a computer or a laptop computer and other devices with computing and display functions, or can also be applied to the modules or chips inside these devices. Figure 5 As shown, the page display device may include: a first acquisition module 51 , a comparison module 52 , and a rendering module 53 .

[0112] The first acquisition module 51 may be configured to acquire the data to be displayed according to a first operation instruction input by a user for instructing to update the displayed content of the current page.

[0113] In the current Internet environment, users can input various instructions for displaying page data on the current screen on their own terminals, such as mobile terminals or computers, by directly touching the screen of the display device or through input devices such as a mouse and keyboard. For example, the homepage of a website can be opened by entering a URL, or a specific page can be opened for display by clicking a link or executing a program. Therefore, the terminal receiving the user's operation can obtain the corresponding page data from a data source such as a server that stores a database. For example, according to the URL entered by the user, the website's server can send the homepage code to the user's terminal, and then parse it into a DOM structure through a parser, and generate page data after adding CSS styles.

[0114] In the embodiment of the present application, the user uses the page display device of the present embodiment or a device including the page display device of the present application to read the current display content, for example, to read Figure 1b During the process of displaying list items 6-12 on the left side, the page display is updated by sliding up and down on the screen according to the reading progress. For example, Figure 1b As shown in the display state shown on the left, that is, list items 6-12 in the form of a long list are displayed on the screen as display content, and the user inputs an operation instruction of sliding upward through the screen. In this case, the first acquisition module 51 can receive the instruction, so that the display content to be displayed on the screen next, such as list items 8-14, can be obtained from a data source such as a server according to the instruction.

[0115] After acquiring new display content, i.e., list items 8-14. In an embodiment of the present application, the comparison module 52 can be used to compare the displayed data of the current page with the data to be displayed. For example, the content to be displayed of the acquired page, such as list items 8-14, can be compared as the data to be displayed with the list items 6-12 that have been displayed as the displayed data. In the present application, the page data can be stored in a persistent data structure, and the data can be compared one by one by means of the unchangeable characteristics of the data stored in the persistent data structure.

[0116] In the embodiment of the present application, according to the result of data comparison based on, for example, a persistent data structure as described above, it can be determined that in the acquired content data to be displayed, the list item data 8-12 is the same as the list item data 8-12 in the displayed content data. In other words, in the acquired content data to be displayed, the data of the displayed list items 8-12 is unchanged, only the data of the new list items 13-14 is added, and the data of the displayed list items 6-7 is removed.

[0117] Therefore, in the embodiment of the present application, the rendering module 53 can be used to perform rendering calculation and display for the data to be displayed that is different from the displayed data according to the comparison result of the comparison module 52. For example, the DOM tree can be updated only for the newly added list items 13-14 to perform rendering calculation, so that when the final display is made, the rendering calculation results of the displayed list items 8-12 and the newly calculated data of the newly added list items 13-14 can be directly used for display, thereby completing the update of the displayed content. Therefore, compared with the prior art, the number of nodes of the DOM tree that need to be processed when updating the display can be reduced, and the redrawing caused by the page scrolling operation in the prior art can be avoided, thereby greatly reducing the amount of rendering calculation.

[0118] In addition, the page display device according to the embodiment of the present application may further include: a first detection module 54 and a second detection module 55.

[0119] In the embodiment of the present application, when a user inputs a display instruction for the page data on the current screen by directly touching the screen of the display device or by using an input device such as a mouse and keyboard on his / her terminal, such as a mobile terminal or a computer, the first acquisition module 51 can obtain the corresponding page data from a data source such as a server storing a database according to the user's instruction and render it as display content to display to the user. In the embodiment of the present application, the page data corresponding to the display content can be a plurality of list items in a sequential order, such as Figure 1b As shown in , and in the final display, the list items at the position corresponding to the screen size are displayed as the display content.

[0120] Therefore, when displaying the current display content, the first detection module 54 can be used to detect whether the currently displayed list items include the list item at the head of the sequence. Figure 4a As shown in , the list items corresponding to the currently displayed display content are list items 1-7. That is, the currently displayed display content is the portion of the page specified by the user including the top. In other words, the portion currently read by the user is the first list item in the sequence including the page data, that is, list item 1. Therefore, through the detection of the first detection module 54, it can be confirmed whether the currently displayed content is the top of the entire page.

[0121] Similarly, as the user progresses in reading the page, he or she can read different parts of the page content by swiping upwards. When the user is about to read to the bottom of the current page, for example, when the user has read list item n-6 of list items 1-n constituting the page, Figure 4b As shown in , the second detection module 55 can be used to detect whether the currently displayed list items include a list item at the end of the sequence. Figure 4b As shown in the left figure of , the current display content includes six list items located at the end of the data sequence of the page, namely, list item n-6 to list item n, so it can be determined that the current display content has included the list item located at the end of the data sequence of the page. That is, the user has read to the end of the page.

[0122] Therefore, when the first detection module 54 or the second detection module 55 detects that the current display content is already at the top or bottom of the page, the refresh component display module 56 can be used to display the refresh component at the top of the display content according to the second operation instruction input by the user for instructing to scroll down the display content. And the loading component display module 57 can be used to display the loading component at the bottom of the display content according to the third operation instruction input by the user for instructing to scroll up the display content.

[0123] When the currently displayed content is the top of the entire page, if the user inputs an operation instruction to scroll down the displayed content, then because the currently displayed content is already at the top of the page, there is actually no corresponding page data available to update the currently displayed content to display to the user. In this case, you can Figure 4a As shown in , the refresh component display module 56 or the loading component display module 57 can be used to additionally display a refresh component or a loading component at the top or bottom of the displayed content to prompt the user of the top or bottom of the currently displayed page.

[0124] In addition, since it is necessary to wait for further user operations when the user pulls down or scrolls up the currently displayed content, the page display device of the embodiment of the present application may further include: a refresh component position determination module 58, which can be used to determine the refresh component display position of the refresh component according to the downward scrolling distance indicated by the second operation instruction.

[0125] As described above, when the first acquisition module 51 receives the user input to scroll down the displayed content when the displayed content is at the top of the page, the refresh module display component 56 can display the refresh component at the top of the displayed content to prompt the user to prepare to refresh the current page, and in the process of waiting for further operation by the user, the refresh component position determination module 58 can further determine the display position of the refresh component according to the scrolling distance of the user's continued scrolling operation, and the refresh component display module 56 displays the refresh component at the determined position. For example, as the user continues to scroll down, the display position of the refresh component can be continuously lowered so that the refresh component is always displayed at the top of list item 1. Or, as the user continues to scroll down, the refresh component can always be displayed in the middle of the blank area between the top of list item 1 and the top of the screen. This allows the refresh component to be displayed more flexibly.

[0126] As mentioned above, when Figure 4a In the situation shown in , the refresh component display module 56 or the loading component display module 57 first displays the refresh component or the loading component on the top of the current display content according to the user's downward or upward scrolling operation instruction, and the user can confirm his intention based on the reminder of the refresh component or the loading component.

[0127] For example, the first acquisition module 51 may start to reacquire the data of the entire page only when the operation instruction input by the user indicates that the displayed content is scrolled down to a certain height, or may start to acquire the loaded data only when the operation instruction input by the user indicates that the displayed content is scrolled up to a certain height. Thus, the comparison module 52 may further determine the data to be displayed in the updated data or the loaded data, and the rendering module 53 may perform rendering calculation and display on the acquired data to be displayed.

[0128] In addition, in actual use, especially when users use small-screen devices such as mobile terminals to view pages, it is necessary to scroll the displayed content more frequently. Therefore, the page display device of the embodiment of the present application may further include a second acquisition module 59, which can be used to obtain data corresponding to at least one undisplayed list item that is adjacent to the currently displayed list item in sequence order.

[0129] Therefore, in the embodiment of the present application, the current display content can be displayed, for example Figure 1bWhen the list items 6-12 are displayed on the left side of the scroll bar, before the user inputs a scroll operation instruction, the second acquisition module 59 automatically acquires the data of the list items that are adjacent to the currently displayed list items in sequence order and have not yet been displayed, for example, Figure 1b The list items 4 and 5 above the list item 6 and the list items 13 and 14 below the list item 12 are displayed on the left side, and the display module 53 performs rendering calculation and storage for the data of these undisplayed list items. Therefore, when the user scrolls up after reading the current displayed content list items 6-12, the rendering calculation results of the list items 13 and 14 below the list item 12 can be directly used for rendering, which greatly speeds up the display speed.

[0130] In addition, currently, some page displays include list items with fixed display positions. For example, the navigation bar of a shopping website, etc. Therefore, these list items need to be displayed in the fixed display position indicated in their attributes. However, when a page includes multiple list items with fixed display positions, for example, Figure 4c As shown in , the current display content shown on the left side includes a list item m at a fixed position that is placed at the top and another list item m+3 that has not yet reached its fixed position. Therefore, during normal scrolling display, as the display content scrolls, the list item m is always at the top of the display content, and the list item m+3 to be placed at the top can move to the top position with the scrolling operation. Therefore, in this case, the page display device of an embodiment of the present application may further include a third detection module 60, which may be used to detect whether the currently displayed list items include list items with a fixed display position attribute. And the rendering module 53 may be further used to continuously display the list item at the fixed display position when the list item with the fixed display position attribute reaches the fixed display position until a new list item with the fixed display position attribute reaches the position.

[0131] Therefore, a persistent data structure is used to store page data. When a user updates the displayed content, the immutable property of the data stored in the persistent data structure is used to quickly compare the displayed data with the data to be displayed. This allows only rendering calculations to be performed on new page data that has changed compared to the currently displayed data, and only the rendering calculation results of the new page data are used to update the displayed content. This avoids re-rendering of all page data to be displayed, reduces the amount of calculation during rendering, speeds up the page display process, and enhances the user experience.

[0132] Embodiment 6

[0133] The internal functions and structure of the page display device are described above. The device can be implemented as an electronic device, such as a computer, a virtual computer, a laptop, etc. Figure 6 This is a schematic diagram of the structure of an electronic device embodiment provided by this application. Figure 6 As shown, the electronic device includes a memory 61 and a processor 62 .

[0134] The memory 61 is used to store programs. In addition to the above programs, the memory 61 can also be configured to store various other data to support operations on the electronic device. Examples of such data include instructions for any application or method operating on the electronic device, contact data, phone book data, messages, pictures, videos, etc.

[0135] The memory 61 can be implemented by any type of volatile or non-volatile storage device or a combination thereof, such as static random access memory (SRAM), electrically erasable programmable read-only memory (EEPROM), erasable programmable read-only memory (EPROM), programmable read-only memory (PROM), read-only memory (ROM), magnetic memory, flash memory, magnetic disk or optical disk.

[0136] The processor 62 is not limited to a central processing unit (CPU), but may also be a processing chip such as a graphics processing unit (GPU), a field programmable gate array (FPGA), an embedded neural network processor (NPU) or an artificial intelligence (AI) chip. The processor 62 is coupled to the memory 61 and executes the program stored in the memory 61 to execute the page display method shown in the above-mentioned embodiments 1 to 4.

[0137] Further, if Figure 6 As shown, the electronic device may also include: a communication component 63, a power component 64, an audio component 65, a display 66 and other components. Figure 6 Only some components are shown schematically, which does not mean that the electronic device only includes Figure 6 Components shown.

[0138] The communication component 63 is configured to facilitate wired or wireless communication between the electronic device and other devices. The electronic device can access a wireless network based on a communication standard, such as WiFi, 2G, 3G, 4G or 5G, or a combination thereof. In an exemplary embodiment, the communication component 63 receives a broadcast signal or broadcast-related information from an external broadcast management system via a broadcast channel. In an exemplary embodiment, the communication component 63 also includes a near field communication (NFC) module to facilitate short-range communication. For example, the NFC module can be implemented based on radio frequency identification (RFID) technology, infrared data association (IrDA) technology, ultra-wideband (UWB) technology, Bluetooth (BT) technology and other technologies.

[0139] The power supply component 64 provides power to various components of the electronic device. The power supply component 64 may include a power management system, one or more power supplies, and other components associated with generating, managing, and distributing power to the electronic device.

[0140] The audio component 65 is configured to output and / or input audio signals. For example, the audio component 65 includes a microphone (MIC), and when the electronic device is in an operating mode, such as a call mode, a recording mode, and a voice recognition mode, the microphone is configured to receive an external audio signal. The received audio signal can be further stored in the memory 61 or sent via the communication component 63. In some embodiments, the audio component 65 also includes a speaker for outputting audio signals.

[0141] The display 66 includes a screen, which may include a liquid crystal display (LCD) and a touch panel (TP). If the screen includes a touch panel, the screen may be implemented as a touch screen to receive input signals from a user. The touch panel includes one or more touch sensors to sense touch, slide, and gestures on the touch panel. The touch sensor may not only sense the boundary of a touch or slide action, but also detect the duration and pressure associated with the touch or slide operation.

[0142] Those skilled in the art can understand that all or part of the steps of implementing the above-mentioned method embodiments can be completed by hardware related to program instructions. The aforementioned program can be stored in a computer-readable storage medium. When the program is executed, the page display method shown in the above-mentioned embodiments 1 to 4 is implemented. The aforementioned storage medium includes: ROM, RAM, magnetic disk or optical disk and other media that can store program codes.

[0143] Finally, it should be noted that the above embodiments are only used to illustrate the technical solutions of the present application, rather than to limit it. Although the present application has been described in detail with reference to the aforementioned embodiments, those skilled in the art should understand that they can still modify the technical solutions described in the aforementioned embodiments, or replace some or all of the technical features therein with equivalents. However, these modifications or replacements do not cause the essence of the corresponding technical solutions to deviate from the scope of the technical solutions of the embodiments of the present application.

Claims

1. A page display method, characterized in that: include: Acquire data to be displayed according to a first operation instruction input by a user for instructing to update the displayed content of the current page; Compare the displayed data in the current page with the data to be displayed; According to the comparison result, for the data to be displayed that is different from the displayed data, rendering calculation and display are performed; The displayed content of the current page is displayed in the form of multiple list items in a sequential order, and the method further includes: Detecting whether the currently displayed list items include a list item with a fixed display position attribute, wherein the fixed display position attribute is used to indicate a fixed display position of the list item in the displayed content; According to a third operation instruction input by the user for instructing to scroll up the displayed content, when the list item with the fixed display position attribute reaches the fixed display position, the list item is continuously displayed at the fixed display position until a new list item with the fixed display position attribute reaches the position.

2. The page display method according to claim 1, characterized in that: The displayed data and the to-be-displayed data are stored in a persistent data structure.

3. The page display method according to claim 2, characterized in that: The displayed content of the current page is displayed in the form of multiple list items in a sequential order, and the method further includes: Obtain data corresponding to at least one undisplayed list item that is adjacent to the currently displayed list item in sequence order; Perform rendering calculation on the data corresponding to the undisplayed list items.

4. The page display method according to claim 2, characterized in that: The display content of the current page is displayed in the form of multiple list items in a sequential order. Before obtaining the data to be displayed according to the first operation instruction input by the user for instructing to update the display content of the current page, the method further includes: Check whether the currently displayed list items contain the list item at the head of the sequence; When it is confirmed according to the detection result that the currently displayed list items include the list items at the head of the sequence, according to the second operation instruction input by the user for instructing to scroll down the displayed content, a refresh component is displayed on the top of the displayed content; When the second operation instruction indicates to scroll down the displayed content to a first predetermined height, acquiring update data of the current page; Determine the data to be displayed in the updated data, and perform rendering calculation and display on the data to be displayed in the updated data.

5. The page display method according to claim 4, characterized in that: The method of displaying a refresh component on the top of the displayed content according to the second operation instruction input by the user for instructing to scroll down the displayed content comprises: determining a refresh component display position of the refresh component according to the downward scrolling distance indicated by the second operation instruction; The refresh component is displayed at the refresh component display position.

6. The page display method according to claim 2, characterized in that: The display content of the current page is displayed in the form of multiple list items in a sequential order. Before obtaining the data to be displayed according to the first operation instruction input by the user for instructing to update the display content of the current page, the method further includes: Check whether the currently displayed list items contain the list item at the end of the sequence; When it is confirmed according to the detection result that the currently displayed list items include a list item at the end of the sequence, according to a third operation instruction input by the user for instructing to scroll the displayed content upward, displaying a loading component at the bottom of the displayed content; When the third operation instruction indicates to scroll the displayed content upward to a second predetermined height, obtaining the supplementary data of the current page; Rendering calculation and display are performed on at least a portion of the supplementary data.

7. The page display method according to claim 2, characterized in that: The display content of the current page is displayed in the form of multiple list items in a sequential order, and the rendering calculation result is cached, including: The data corresponding to the list item is used as a cache key, and the location information of the list item is used as a value for caching.

8. The page display method according to claim 2, characterized in that: Before acquiring the data to be displayed according to the first operation instruction input by the user for instructing to update the displayed content of the current page, the method further includes: Detect the length of time the user operates on the current page; When it is confirmed according to the detection result that the time duration of the user's operation on the current page is greater than the first predetermined time threshold, acquiring update data of the current page according to a second operation instruction input by the user for instructing to scroll down the displayed content or a third operation instruction for instructing to scroll up the displayed content; Determine the data to be displayed in the updated data, and perform rendering calculation and display on the data to be displayed in the updated data.

9. A page display method, characterized in that: include: According to a first operation instruction input by a user for instructing to update the displayed content of the current page, acquiring the data to be displayed in the page data of the current page, wherein the page data of the current page is stored as each node in a tree data structure; Compare the nodes corresponding to the displayed data in the current page in the tree data structure with the nodes corresponding to the data to be displayed in the tree data structure; According to the comparison result, rendering calculation and display are performed for the data corresponding to the node that is not displayed; The displayed content of the current page is displayed in the form of multiple list items in a sequential order, and the method further includes: Detecting whether the currently displayed list items include a list item with a fixed display position attribute, wherein the fixed display position attribute is used to indicate a fixed display position of the list item in the displayed content; According to a third operation instruction input by the user for instructing to scroll up the displayed content, when the list item with the fixed display position attribute reaches the fixed display position, the list item is continuously displayed at the fixed display position until a new list item with the fixed display position attribute reaches the position.

10. The page display method according to claim 9, characterized in that: The page data of the current page is stored as a document object model structure.

11. A page display device, characterized in that: include: A first acquisition module, used to acquire data to be displayed according to a first operation instruction input by a user for instructing to update the displayed content of the current page; A comparison module, used for comparing the displayed data of the current page with the data to be displayed; A rendering module, configured to perform rendering calculation and display, according to the comparison result of the comparison module, for the data to be displayed that is different from the displayed data; The display content of the current page is displayed in the form of multiple list items in a sequential order, and the device is also used for: Detecting whether the currently displayed list items include a list item with a fixed display position attribute, wherein the fixed display position attribute is used to indicate a fixed display position of the list item in the displayed content; According to a third operation instruction input by the user for instructing to scroll up the displayed content, when the list item with the fixed display position attribute reaches the fixed display position, the list item is continuously displayed at the fixed display position until a new list item with the fixed display position attribute reaches the position.

12. An electronic device, characterized in that: include: Memory, used to store programs; A processor, configured to run the program stored in the memory, so as to execute the page display method as claimed in any one of claims 1 to 9.

13. A computer-readable storage medium having a computer program stored thereon, wherein the program is executed to implement the page display method according to any one of claims 1 to 9.

Images