Web page rendering control method, control device, and computer readable medium
By establishing a relationship between DOM elements and screen height, only valid DOM elements are rendered, thus solving the browser load problem caused by displaying complex data lists and achieving efficient webpage rendering and improved terminal performance.
Patent Information
- Application Number
- CN201811416778.5
- Authority / Receiving Office
- CN · China
- Patent Type
- Patents(China)
- Current Assignee / Owner
- Filing Date
- 2018-11-26
- Publication Date
- 2026-01-16
- Estimated Expiration
- 2038-11-26
AI Technical Summary
In the mobile internet environment, when displaying data lists in complex business scenarios, it can lead to increased CPU and memory load on the terminal, resulting in screen freezes and crashes. Existing technologies can store data in segments, but still require redrawing invalid DOM elements, increasing the browser's rendering load.
Establish a relationship between n visible DOM elements and screen height, render only valid DOM elements, manage data display through data containers and rendering containers, and dynamically refresh the page by listening for page scrolling operations.
Reduce browser rendering load, improve parsing efficiency, avoid rendering invalid DOM elements, and enhance terminal performance.
Smart Images
Figure CN111222302B_ABST
Abstract
Description
TECHNICAL FIELD
[0001] The present application relates to the technical field of computer, in particular to a webpage rendering control method, a webpage rendering control device and a computer readable medium. BACKGROUND
[0002] There are many complex business scenarios in the mobile Internet environment, often accompanied by a large amount of data support, such as commodity list, order list, history record, notification record and the like. When the browser application retrieves these data, the data list formed by the records meeting the conditions can reach more than 100,000. When such a data list is displayed, the load of the terminal is increased, resulting in the increase of CPU usage and memory usage, and even the phenomenon of screen freezing and flashing on some low-end terminals.
[0003] The current mainstream method for long list is to store the data in segments on the server side, and the user obtains as much data as needed from the server. When new data is obtained, the old data is hidden by CSS. In fact, the old data is still in the page, but it is not visible. Due to the 60 times per second drawing mechanism of the browser, the DOM elements that should not be redrawn are also redrawn. As the number of invalid DOM elements increases, the drawing load of the browser increases. SUMMARY
[0004] Therefore, the embodiments of the present application provide a webpage rendering control method and a webpage rendering control device, which establish a relationship between n visible DOM elements and the screen height, and only render the effective DOM elements when rendering the webpage, thereby reducing the drawing load of the browser.
[0005] According to a first aspect of the present application, a webpage rendering control method is provided, comprising:
[0006] creating a data container, wherein the data container stores data that has not been rendered;
[0007] obtaining the screen height of the current terminal;
[0008] obtaining a DOM tree generated according to the webpage content analysis;
[0009] obtaining n visible DOM elements in the DOM tree according to the screen height, wherein the absolute value of the difference between the sum of the heights of the n visible DOM elements and the screen height is less than a set threshold, and n is an integer greater than or equal to 1;
[0010] obtaining the respective data that has not been rendered for the n visible DOM elements from the data container; and
[0011] putting the unrendered data of the n visible DOM elements into a rendering container for rendering.
[0012] Optionally, the sum of the heights of the n visible DOM elements is equal to the screen height.
[0013] Optionally, the method further comprises:
[0014] listening to a user operation;
[0015] calculating a moving amount according to a vertical sliding distance of the user operation and an average height of the n visible DOM elements, and
[0016] moving out the currently rendered data from the rendering container according to the moving amount, and moving in the historically rendered data or the unrendered data into the rendering container; and
[0017] re-rendering to realize webpage refreshing.
[0018] Optionally, the moving out the currently rendered data from the rendering container according to the moving amount, and the moving in the historically rendered data or the unrendered data into the rendering container comprises:
[0019] creating a first history container and a second history container;
[0020] when the sliding direction is downward, moving out the currently rendered data from the rendering container into the second history container, and moving in the historically rendered data from the first history container into the rendering container;
[0021] when the sliding direction is upward, moving out the currently rendered data from the rendering container into the first history container, and moving in the historically rendered data from the second history container into the rendering container.
[0022] Optionally, the method further comprises: when the sliding direction is upward, if the second history container is empty, moving out the unrendered data from the data container into the rendering container.
[0023] Optionally, the method further comprises: obtaining start coordinates and end coordinates of the user sliding, and calculating a sliding distance and a sliding direction according to the start coordinates and the end coordinates.
[0024] Optionally, each visible DOM element is a list element.
[0025] According to a second aspect of the embodiment of the present application, a control device for webpage rendering is provided, comprising:
[0026] a container creating unit configured to create a data container, wherein the data container stores unrendered data;
[0027] a first height obtaining unit, configured to obtain a screen height of a current terminal;
[0028] a second height calculating unit, configured to obtain n visible DOM elements in the DOM tree according to the screen height, wherein an absolute value of a difference between a sum of heights of the n visible DOM elements and the screen height is less than a set threshold, and n is an integer greater than or equal to 1;
[0029] a data obtaining unit, configured to obtain, from the data container, unrendered data of each of the n visible DOM elements; and
[0030] a webpage rendering unit, configured to place the unrendered data of each of the n visible DOM elements in a rendering container for rendering, so as to realize webpage presentation.
[0031] Optionally, the sum of the heights of the n visible DOM elements is equal to the screen height.
[0032] Optionally, the method further comprises:
[0033] a movement calculating unit, configured to calculate a movement according to a sliding distance of a user operation and an average height of the n visible DOM elements;
[0034] a data moving-in and moving-out unit, configured to move, according to the movement, unrendered data of the current rendering out of the rendering container, and move historical rendered data or unrendered data into the rendering container; and
[0035] a webpage re-rendering unit, configured to re-render, so as to realize webpage refreshing.
[0036] Optionally, the data moving-in and moving-out unit comprises:
[0037] when the sliding direction is downward, moving the unrendered data of the current rendering out of the rendering container into the second historical container, and moving the historical rendered data out of the first historical container into the rendering container;
[0038] when the sliding direction is upward, moving the unrendered data of the current rendering out of the rendering container into the first historical container, and moving the historical rendered data out of the second historical container into the rendering container, and when the sliding direction is upward, if the second historical container is empty, moving unrendered data out of the data container into the rendering container.
[0039] According to a third aspect of an embodiment of the present application, a computer readable storage medium is provided, which stores computer instructions, and the computer instructions are executed to implement the control method.
[0040] According to a fourth aspect of the embodiments of the present application, a control device is provided, comprising:
[0041] a memory for storing computer instructions;
[0042] a processor coupled to the memory, the processor being configured to execute the control method according to the above based on the computer instructions stored in the memory.
[0043] The embodiments of the present application have the following advantages or beneficial effects: n visible DOM elements are obtained according to the screen height, the absolute value of the difference between the sum of the heights of the n visible DOM elements and the screen height is less than a set threshold, only the n effective DOM elements are rendered when the webpage is presented, and the rendering of the ineffective DOM elements is avoided, thereby reducing the drawing load of the browser. BRIEF DESCRIPTION OF DRAWINGS
[0044] The above and other objects, features and advantages of the present application will become more apparent from the following description of the embodiments of the present application taken with reference to the accompanying drawings, in which:
[0045] Figure 1 is a flowchart of the control method of webpage rendering according to the embodiments of the present application;
[0046] Figure 2 is a flowchart of the control method of webpage rendering according to the embodiments of the present application; Figure 1 is a flowchart of the control method of webpage rendering according to the embodiments of the present application;
[0047] Figure 3 and 4 are operation diagrams of moving data in and out of the rendering container applied to the control method according to the embodiments of the present application;
[0048] Figure 5 is a structural diagram of the control device of webpage rendering according to the embodiments of the present application;
[0049] Figure 6 is a structural diagram of the control device of webpage rendering according to another embodiment of the present application. DETAILED DESCRIPTION
[0050] The present application is described below based on the embodiments, but the present application is not limited to only these embodiments. In the following detailed description of the present application, some specific details are described in detail. The present application can also be completely understood without the description of these details by those skilled in the art. In order to avoid confusion of the essence of the present application, the well-known methods, processes and flows are not described in detail. In addition, the drawings are not necessarily drawn to scale.
[0051] Figure 1is a flow chart of a control method of webpage rendering according to an embodiment of the present application. The control method according to the embodiment is especially suitable for controlling the initial rendering of a list on the browser side. Of course, the embodiment is not limited to this, and the embodiment can also be used to control the rendering of other types of DOM elements. The control method comprises the following steps.
[0052] In step S101, a data container is created.
[0053] The data container is a storage space opened in the memory. When the browser side receives new list data, the data container will be put into the data container, so the data container stores unrendered data.
[0054] In step S102, the screen height of the current terminal is obtained, and the DOM tree generated according to the webpage content analysis is obtained.
[0055] The screen height refers to the available height of the display screen of the current terminal, which is generally measured in pixels. The WEB application on the terminal can obtain the available window height of the display screen as the screen height in this step based on HTML and JS technology. When the browser displays the webpage, it first generates a DOM tree according to the webpage content. The DOM tree includes a plurality of DOM elements, each of which has its own attributes, such as size, height, etc.
[0056] In step S103, n visible DOM elements are obtained according to the screen height.
[0057] In this step, a relationship expression is established between the height of the first n visible DOM elements in the DOM tree obtained by webpage content analysis and the screen height of the display screen, so that the absolute value of the difference between the sum of the heights of the first n visible DOM elements and the screen height is less than a set threshold value, and n is an integer greater than or equal to 1. In some cases, the sum of the heights of the n visible DOM elements of the DOM tree is exactly equal to the screen height. In some cases, the sum of the heights of the n visible DOM elements of the DOM tree is slightly greater than the screen height, and in other cases, the sum of the heights of the n visible DOM elements of the DOM tree is slightly less than the screen height. The relationship expression between the sum of the heights of the n visible DOM elements of the DOM tree and the screen height can be determined by setting the threshold value. That is, the absolute value of the difference between the sum of the heights of the n visible DOM elements and the screen height is less than a set threshold value, n is an integer greater than or equal to 1, and the set threshold value is greater than or equal to 0.
[0058] In step S104, the unrendered data of each of the n visible DOM elements is obtained from the data container.
[0059] In this step, according to the height of the n visible DOM elements, the number of data of each of the n visible DOM trees is calculated, so as to obtain the respective data of the n visible DOM elements in the data container.
[0060] In step S105, the data of each of the n visible DOM elements is placed in the rendering container for rendering, so as to realize the webpage rendering. It can be understood that this step includes generating a rendering tree and drawing the position of each node in the screen according to the rendering tree, so as to realize the webpage rendering.
[0061] In this embodiment, by obtaining the n visible DOM elements according to the screen height, it is determined that the n visible DOM elements are effective DOM, and when rendering the DOM tree, only the n effective DOM elements are rendered, so as to avoid the rendering of ineffective DOM elements. The control method can reduce the drawing load of the browser and improve the parsing efficiency of the browser.
[0062] The above control method can be realized as a browser plug-in embedded in the browser. Of course, the control method can also be combined with the existing browser technology to obtain a new browser.
[0063] It can be understood that when the sum of the heights of the n visible DOM elements is slightly greater than the screen height, the nth visible DOM element should have a part that cannot be displayed on the screen, and the remaining part needs to be seen by sliding up; and when the sum of the heights of the n visible DOM elements is slightly less than the screen height, there is a blank area at the bottom of the screen, and there is an ideal case that the sum of the heights of the n visible DOM elements is equal to the screen height. When the sum of the heights of the n visible DOM elements is slightly greater than or slightly less than the screen height, one processing way is to proportionally reduce or enlarge the n visible DOM elements, so that the sum of the heights of the n visible DOM elements is equal to the screen height.
[0064] Further, each visible DOM element corresponds to a list, and each list contains the same number (at least one) of data, so that when the data is obtained from the data container according to the height of the DOM element, the same number of data is obtained from the data container each time.
[0065] Figure 2 is shown Figure 1 The control method shown in is followed by a number of steps. As described above, Figure 1 The control method shown in can be used for the initial presentation of the list, and Figure 2 is shown
[0066] In step S201, the user behavior is listened to.
[0067] According to the WEB technology, the user's operation on the display screen can be captured, such as sliding and clicking. When the list is on the browser page, the user can slide up and down the list to realize list scrolling up and down. By obtaining the coordinate of the sliding start and the coordinate of the sliding end, the sliding direction can be determined, i.e. whether it is sliding up or sliding down.
[0068] In step S202, the moving amount is calculated according to the vertical sliding distance and the average height of the n visible DOM elements.
[0069] Suppose the coordinate of the sliding start is (x1, y1), the coordinate of the sliding end is (x2, y2), the vertical sliding distance is s=y2-y1, the heights of the n visible DOM elements are N1, N2, …, Nn respectively, the average height H=(N1+N2+…Nn) / n, and then the moving amount is obtained by L=Ls / H. x1, y1, x2, y2 are positive numbers greater than zero, N1, N2, …, Nn are positive numbers greater than zero, n is a positive integer, and L is a positive integer.
[0070] In step S203, the current rendered data is removed from the rendering container according to the moving amount, and the historical rendered data or the unrendered data is moved into the rendering container.
[0071] The moving amount is used to represent the amount of data moved in and out of the rendering container. In this step, the actual data movement is performed according to the moving amount. For example, when sliding down, the current rendered data is removed from the rendering container, and then the historical rendered data is moved into the rendering container; when sliding up, the current rendered data is removed from the rendering container, and then the historical rendered data or the unrendered data is moved into the rendering container.
[0072] In step S204, re-rendering is performed.
[0073] After the moving in and out operation of the rendering container is completed, re-rendering is performed. The steps of the re-rendering are basically the same as those of S105, i.e. the rendering tree is regenerated and the position of each node in the screen is drawn according to the new rendering tree, so as to realize webpage refreshing.
[0074] In this embodiment, by listening to the sliding operation, the moving amount is calculated based on the vertical sliding distance, and the data in the rendering container is removed according to the moving amount, and other data is moved into the rendering container, and then re-rendering is performed, so as to realize webpage refreshing. The steps of this embodiment are Figure 1 The steps of this embodiment are additional steps of the embodiment of
[0075] In an alternative embodiment, a history container is created to store the rendered history data. When the user first slides down the list, the history container is empty at this time, and the new data needs to be loaded from the data container to the rendering container, while the same amount of data is moved from the rendering container to the history container. After several times of sliding down, several pieces of data are transferred from the rendering container to the history container. Then, the user slides up, and the data needs to be moved from the rendering container to the history container, and then from the history container to the rendering container.
[0076] For the convenience of operation, two history containers can be created, for example, history container T and history container B in Figure 3 and 4 When sliding up for the first time, the history containers T and B do not contain any data, and the data to be loaded has not been rendered, so the data needs to be obtained from the data container to the rendering container 301. After several times of sliding up, all the data in the data container is transferred to the history containers T and B. At this time, when sliding up, as shown in Figure 3 , the rendering container 301 first uses the shift method to take out the unwanted value (corresponding to step 1), and pushes this value to the history data T container (corresponding to step 2), and the history container B uses the unshift method to take out the value (corresponding to step 3), and pushes this value to the rendering container 301 (corresponding to step 4). In this example, one piece of data is moved in and out each time, so the above method needs to be executed L times. When sliding down, as shown in Figure 4 , the rendering container 301 first uses the pop method to take out the unwanted value (corresponding to step 5), and this value is received by the history data B container according to the unshift method (corresponding to step 6), and the history data T container uses the pop method to take out the value (corresponding to step 7), and this value is received by the rendering container 301 according to the unshift method (corresponding to step 8). Similarly, the method is executed L times.
[0077] From the above example, it can be seen that the steps of moving data out of and into the rendering container are completed through the interaction process of the rendering container and the two history containers.
[0078] It should be pointed out that although the DOM element in the above embodiment can be a list, it can also be other DOM elements. Whether the list element or other DOM elements, the control method of the embodiment of the application can be applied.
[0079] Figure 5 is a structural diagram of a control device for webpage rendering according to an embodiment of the application. The control device comprises a first height obtaining unit 502 and a second height obtaining unit 502, a container creating unit 503, a data obtaining unit 504, and a webpage rendering unit 505.
[0080] The container creating unit 503 is configured to create a data container, and the data transmitted from the server is first stored in the data container, and the data container stores the list data which has not been rendered.
[0081] The first height obtaining unit 501 is configured to obtain the screen height of the current terminal. The screen height can be obtained by using the method window.screen.availHeight in JS.
[0082] The second height calculating unit 502 is configured to obtain n visible DOM elements in the DOM tree according to the screen height, wherein the absolute value of the difference between the sum of the heights of the n visible DOM elements and the screen height is less than a set threshold, and n is an integer greater than or equal to 1. Optionally, the heights of the n visible DOM elements are adjusted so that the sum of the heights of the n visible DOM elements is equal to the screen height. The adjustment can be performed according to the proportional relationship between the heights of the DOM tree, i.e., the heights of the n visible DOM elements are uniformly adjusted, or the heights of the n visible DOM elements are adjusted according to a preset standard.
[0083] The data obtaining unit is configured to obtain the respective unrendered data of the n visible DOM elements from the data container, i.e., to obtain the respective unrendered data of the n visible DOM elements from the data container according to the heights of the n visible DOM elements.
[0084] The webpage rendering unit is configured to place the respective data of each visible DOM element in a rendering container for rendering, so as to realize webpage presentation. The webpage rendering unit includes generating a rendering tree and rendering by using the rendering tree, thereby realizing webpage presentation.
[0085] According to the control device, the n visible DOM elements are obtained according to the screen height, the absolute value of the difference between the sum of the heights of the n visible DOM elements and the screen height is less than a set threshold, thereby determining that the n visible DOM elements are effective DOM elements, and only the n effective DOM elements are rendered when the DOM tree is rendered, thereby avoiding the rendering of ineffective DOM elements.
[0086] Optionally, the control device further includes a movement calculating unit configured to calculate a movement according to the sliding distance of the user operation and the average height of the n visible DOM elements; a data moving-in and moving-out unit configured to move out the currently rendered data from the rendering container according to the movement, and then move in the historical rendered data or the data which has not been rendered into the rendering container; and a webpage re-rendering unit configured to re-render, so as to realize webpage refreshing.
[0087] Optionally, the data moving-in and moving-out unit comprises: a history container creating module, configured to create a first history container and a second history container; a moving implementing module, configured to move the currently rendered data from the rendering container to the second history container and move the history rendered data from the first history container to the rendering container when the sliding direction is downward; move the currently rendered data from the rendering container to the first history container and move the history rendered data from the second history container to the rendering container when the sliding direction is upward; and move the data that has never been rendered from the data container to the rendering container when the second history container is empty and the sliding direction is upward.
[0088] Figure 6 Figure 1 is a structural diagram of a web page rendering control device according to an embodiment of the present application. Figure 6 The device shown is merely an example and should not constitute any limitation on the function and use range of the embodiments of the present application.
[0089] Reference Figure 6 The device comprises a processor 601, a memory 602 and an input and output device 603 connected through a bus. The memory 602 comprises a read-only memory (ROM) and a random access memory (RAM), and the memory 602 stores various computer instructions and data required for performing system functions, and the processor 601 reads various computer instructions from the memory 602 to perform various appropriate actions and processes. The input and output device comprises an input part of a keyboard, a mouse, etc.; an output part of a cathode ray tube (CRT), a liquid crystal display (LCD), etc., and a speaker, etc.; a storage part of a hard disk, etc.; and a communication part of a network interface card such as a LAN card, a modem, etc. The memory 602 also stores the following computer instructions to complete the operations specified by the device of the embodiments of the present application: creating a data container storing data that has never been rendered; obtaining a screen height of a current terminal; obtaining a DOM tree generated according to content analysis of a web page; obtaining n visible DOM elements in the DOM tree according to the screen height, wherein the absolute value of the difference between the sum of the heights of the n visible DOM elements and the screen height is less than a set threshold, and n is an integer greater than or equal to 1; obtaining respective data that has never been rendered for the n visible DOM elements from the data container; and placing the respective data that has never been rendered for the n visible DOM elements in a rendering container for rendering.
[0090] Correspondingly, the embodiments of the present application provide a computer readable storage medium storing computer instructions, which, when executed, implement the operations specified by the above method.
[0091] The flowcharts and block diagrams in the drawings illustrate the possible architectural, functional and operational scenarios of systems, methods and apparatuses of the present application. The blocks on the flowcharts and block diagrams can represent modules, program segments, or simply codes, which are executable instructions for implementing specified logical functions. It should also be noted that the executable instructions for implementing specified logical functions can be recombined to generate new modules and program segments. Therefore, the blocks of the drawings and the order of the blocks are only used to better illustrate the processes and steps of the embodiments, and should not be considered as a limitation on the application itself.
[0092] The various modules or units of the system can be implemented by hardware, firmware or software. The software includes, for example, coded programs formed by various programming languages such as JAVA, C / C++ / C#, SQL, etc. Although the steps and the order of the steps of the embodiments of the present application are given in the methods and the method diagrams, the executable instructions for implementing the specified logical functions of the steps can be recombined to generate new steps. The order of the steps should not be limited to the order of the steps in the methods and the method diagrams, and can be adjusted at any time according to the needs of the functions. For example, some steps characterized by the present application are executed in parallel or in reverse order.
[0093] The system and method according to the present application can be deployed on a single or multiple servers. For example, different modules can be deployed on different servers respectively to form dedicated servers. Alternatively, the same functional units, modules or systems can be deployed on multiple servers in a distributed manner to alleviate the load pressure. The servers include, but are not limited to, multiple PC machines, PC servers, blade machines, supercomputers, etc. in the same local area network and connected through the Internet.
[0094] The above only describes the preferred embodiments of the present application, and is not intended to limit the present application. For those skilled in the art, the present application can have various modifications and changes. Any modifications, equivalent replacements, improvements, etc. within the spirit and principles of the present application should be included in the protection scope of the present application.
Claims
1. A method for controlling webpage rendering, characterized in that, The method comprises: creating a data container storing unrendered data; obtaining a screen height of a current terminal; obtaining a DOM tree generated according to web content analysis; obtaining n visible DOM elements in the DOM tree according to the screen height, wherein the absolute value of the difference between the sum of the heights of the n visible DOM elements and the screen height is less than a set threshold, and n is an integer greater than or equal to 1; obtaining unrendered data of the n visible DOM elements from the data container; and rendering the unrendered data of the n visible DOM elements in a rendering container, wherein the rendering comprises generating a rendering tree, and then drawing the position of each node in the screen according to the rendering tree, thereby realizing web page presentation, and the rendering tree only renders the n visible DOM elements.
2. The control method according to claim 1, characterized by, The sum of the heights of the n visible DOM elements is equal to the screen height.
3. The control method according to claim 1, characterized by, The method further comprises: listening to user operations; calculating a movement amount according to the longitudinal sliding distance of the user operation and the average height of the n visible DOM elements, and moving the currently rendered data out of the rendering container according to the movement amount, and moving historical rendered data or unrendered data into the rendering container; and re-rendering to realize web page refreshing.
4. The control method according to claim 3, characterized by The moving of the currently rendered data out of the rendering container according to the movement amount, and the moving of the historical rendered data or unrendered data into the rendering container comprise: creating a first historical container and a second historical container; when the sliding direction is downward, moving the currently rendered data out of the rendering container into the second historical container, and moving the historical rendered data out of the first historical container into the rendering container; when the sliding direction is upward, moving the currently rendered data out of the rendering container into the first historical container, and moving the historical rendered data out of the second historical container into the rendering container.
5. The control method according to claim 4, characterized by The control method further comprises: when the sliding direction is upward, if the second historical container is empty, moving the unrendered data out of the data container into the rendering container.
6. The control method according to claim 3, characterized by The method further comprises: obtaining the start coordinate and the end coordinate of the user sliding, and calculating the sliding distance and the sliding direction according to the start coordinate and the end coordinate.
7. The control method according to claim 6, characterized by Each visible DOM element is a list element.
8. A control device for webpage rendering, characterized in that, The method comprises: a container creating unit configured to create a data container storing unrendered data; a first height obtaining unit configured to obtain a screen height of a current terminal; a second height calculating unit configured to obtain n visible DOM elements in a DOM tree generated according to web content analysis according to the screen height, wherein the absolute value of the difference between the sum of the heights of the n visible DOM elements and the screen height is less than a set threshold, and n is an integer greater than or equal to 1; a data obtaining unit configured to obtain unrendered data of the n visible DOM elements from the data container; and a rendering unit configured to render the unrendered data of the n visible DOM elements in a rendering container. a webpage rendering unit configured to place the unrendered data of each of the n visible DOM elements in a rendering container for rendering, wherein the rendering comprises generating a rendering tree and then drawing the position of each node in the screen according to the rendering tree, thereby realizing webpage presentation, and the rendering tree only renders the n visible DOM elements.
9. The control device of claim 8, wherein The sum of the heights of the n visible DOM elements is equal to the screen height.
10. The control device of claim 8, wherein Further comprising: a movement amount calculation unit configured to calculate a movement amount based on the sliding distance of the user operation and the average height of the n visible DOM elements; a data moving-in and moving-out unit configured to move out the currently rendered data from the rendering container according to the movement amount, and then move in the historically rendered data or the unrendered data into the rendering container; and a webpage re-rendering unit configured to re-render to realize webpage refresh. The data moving-in and moving-out unit comprises:
11. The control device of claim 10, wherein a history container creation module configured to create a first history container and a second history container; a movement implementation module configured to, when the sliding direction is downward, move out the currently rendered data from the rendering container into the second history container, and move in the historically rendered data from the first history container into the rendering container; when the sliding direction is upward, move out the currently rendered data from the rendering container into the first history container, and move in the historically rendered data from the second history container into the rendering container, and when the sliding direction is upward, if the second history container is empty, move out the unrendered data from the data container into the rendering container. The computer readable storage medium stores computer instructions, and the computer instructions are executed to realize the control method according to any one of claims 1 to 7.
12. A computer-readable storage medium, characterized in that, comprising:
13. A control device characterized by comprising: a memory configured to store computer instructions; a processor coupled to the memory, and configured to execute the computer instructions stored in the memory to realize the control method according to any one of claims 1 to 7.
Citation Information
Patent Citations
Webpage data display method and device
CN106933931A