Long page rendering method and device and computing equipment
By only creating DOM nodes that can be accommodated in the visual area in the initial state in long page rendering, and updating the element data of these nodes when the page is scrolling, the problem of inefficient long page rendering in the existing technology is solved, and more efficient resource utilization and page rendering effect are achieved.
Patent Information
- Application Number
- CN202510060570.8
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- Filing Date
- 2025-01-14
- Publication Date
- 2025-05-13
AI Technical Summary
In the process of long page rendering, the prior art creates DOM nodes that correspond to all page elements one by one, resulting in inefficient rendering.
By detecting the display instruction of the target long page, obtain the height of the page elements and the height of the visual area, calculate the number of page elements displayed in the visual area in the initial state, create a corresponding number of DOM nodes, and update the element data of these nodes in the page scroll event.
This method improves the efficiency of long page rendering, saves system resources, and ensures accurate rendering and timely updates of page elements.
Smart Images
Figure CN119988765A_ABST
Abstract
Description
Technical Field
[0001] The present application relates to the field of Internet technology, and in particular to a long page rendering method, apparatus, computing device, computer storage medium, and computer program product. Background Art
[0002] With the continuous development of science and technology and society, the emergence of various Internet services has greatly enriched people's work and life. Web pages are important information carriers of Internet services, and their accurate and fast rendering is of great significance to Internet services.
[0003] A long page is a commonly used web page, whose length usually exceeds the height of the visible area of the page. Users need to scroll to browse the complete long page content.
[0004] However, the inventors found in the implementation process that the prior art has the following defects: currently, during the rendering process of a long page, a DOM node corresponding to all page elements is usually created. However, the page rendering efficiency of this page rendering method is low. Summary of the invention
[0005] In view of the above problems, the present application is proposed to provide a long page rendering method, apparatus, computing device, computer storage medium and computer program product that overcome the above problems or at least partially solve the above problems.
[0006] According to a first aspect of the present application, a long page rendering method is provided, comprising:
[0007] Detecting a display instruction of a target long page, and obtaining element heights and a visual area height of each page element of the target long page;
[0008] Calculating a first number of first page elements to be displayed in the visible area in an initial state according to the visible area height and the element height;
[0009] Creating a first number of DOM nodes, and adding element data of each first page element to a corresponding DOM node;
[0010] In response to a page scrolling event, determining a second page element to be displayed in the visible area in a non-initial state;
[0011] Update the element data of the second page element to the corresponding DOM node.
[0012] In an optional implementation, after determining the second page element to be displayed in the visible area in a non-initial state in response to the page scrolling event, the method further includes:
[0013] Determining a second number of second page elements to be displayed in the visible area;
[0014] If the second number is greater than the first number, a third number is determined according to the difference between the second number and the first number, and a third number of DOM nodes is created.
[0015] In an optional implementation, creating a third number of DOM nodes includes: creating a third number of document fragments, and writing element data of the third number of second page elements into corresponding document fragments.
[0016] In an optional implementation, updating the element data of the second page element to the corresponding DOM node includes:
[0017] The element data of the first number of second page elements are updated to the first number of DOM nodes, and the third number of document fragments are inserted into the DOM documents corresponding to the DOM nodes.
[0018] In an optional implementation, inserting the third number of document fragments into the DOM document corresponding to the DOM node includes:
[0019] The third number of document fragments are inserted into the DOM document at one time using a preset function; wherein the preset function is executed before the browser refreshes the page next time.
[0020] In an optional implementation, in response to a page scrolling event, determining a second page element to be displayed in the visible area in a non-initial state includes:
[0021] In response to a page scrolling event, determining a page scrolling distance;
[0022] Calculate the offset according to the page scrolling distance and the element height of each page element;
[0023] Calculate the moving distance according to the page scrolling distance and the offset;
[0024] According to the moving distance, a second page element to be displayed in the visible area in a non-initial state is determined.
[0025] In an optional implementation, the calculating the offset according to the page scrolling distance and the element height of each page element includes:
[0026] Determine a first position of the upper boundary of the current visible area relative to the target long page, and determine a second position after offsetting the first position by the page scrolling distance;
[0027] Determining a target page element corresponding to the second position;
[0028] If the second position is consistent with the upper boundary of the element of the target page element, the offset is determined to be 0;
[0029] If the second position is inconsistent with the upper boundary of the target page element, determine whether the target page element is already displayed in the current visible area; if so, take the distance between the second position and the lower boundary of the target page element as the offset; if not, take the distance between the second position and the upper boundary of the target page element as the offset.
[0030] According to a second aspect of the present application, a long page rendering device is provided, comprising:
[0031] An acquisition module, used for detecting a display instruction of a target long page, and acquiring an element height and a visual area height of each page element of the target long page;
[0032] A first execution module is used to calculate a first number of first page elements to be displayed in the visible area in an initial state according to the visible area height and the element height; create a first number of DOM nodes, and add element data of each first page element to a corresponding DOM node;
[0033] The second execution module is used to determine the second page element to be displayed in the visible area in a non-initial state in response to the page scrolling event; and update the element data of the second page element to the corresponding DOM node.
[0034] In an optional implementation, the second execution module is used to: determine a second number of second page elements to be displayed in the visible area;
[0035] If the second number is greater than the first number, a third number is determined according to the difference between the second number and the first number, and a third number of DOM nodes is created.
[0036] In an optional implementation, the second execution module is used to: create a third number of document fragments, and write the element data of the third number of second page elements into corresponding document fragments.
[0037] In an optional implementation, the second execution module is used to: update the element data of the first number of second page elements to the first number of DOM nodes, and insert the third number of document fragments into the DOM documents corresponding to the DOM nodes.
[0038] In an optional implementation, the second execution module is used to: use a preset function to insert the third number of document fragments into the DOM document corresponding to the DOM node at one time; wherein the preset function is executed before the browser refreshes the page next time.
[0039] In an optional implementation, the second execution module is used to: determine the page scrolling distance in response to a page scrolling event;
[0040] Calculate the offset according to the page scrolling distance and the element height of each page element;
[0041] Calculate the moving distance according to the page scrolling distance and the offset;
[0042] According to the moving distance, a second page element to be displayed in the visible area in a non-initial state is determined.
[0043] In an optional implementation, the second execution module is used to: determine a first position of the upper boundary of the current visible area relative to the target long page, and determine a second position after offsetting the first position by the page scrolling distance;
[0044] Determining a target page element corresponding to the second position;
[0045] If the second position is consistent with the upper boundary of the element of the target page element, the offset is determined to be 0;
[0046] If the second position is inconsistent with the upper boundary of the target page element, determine whether the target page element is already displayed in the current visible area; if so, take the distance between the second position and the lower boundary of the target page element as the offset; if not, take the distance between the second position and the upper boundary of the target page element as the offset.
[0047] According to a third aspect of the present application, there is provided a computing device, comprising: a processor, a memory, a communication interface and a communication bus, wherein the processor, the memory and the communication interface communicate with each other via the communication bus;
[0048] The memory is used to store at least one executable instruction, and the executable instruction enables the processor to execute operations corresponding to the above-mentioned long page rendering method.
[0049] According to a fourth aspect of the present application, a computer storage medium is provided, wherein at least one executable instruction is stored in the storage medium, and the executable instruction enables a processor to perform operations corresponding to the above-mentioned long page rendering method.
[0050] According to a fifth aspect of the present application, a computer program product is provided, comprising at least one executable instruction, wherein the executable instruction enables a processor to perform operations corresponding to the above-mentioned long page rendering method.
[0051] The embodiment of the present application creates a first number of DOM nodes, where the first number is the number of page elements that can be accommodated in the visible area in the initial state. When the subsequent page is scrolled, there is no need to create DOM nodes corresponding to all page elements. It is only necessary to update the element data of the new second page element to the created DOM node, thereby not only saving system resources but also improving the overall page rendering efficiency.
[0052] In an embodiment of the present application, when the second number of second page elements to be displayed in the visible area is less than the first number of created DOM nodes, a third number of DOM nodes is created to ensure accurate rendering of the page elements.
[0053] The embodiment of the present application creates a third number of document fragments and inserts the DOM document corresponding to the DOM node, thereby updating and displaying the page elements and improving the page rendering efficiency.
[0054] The embodiment of the present application updates the element data of a first number of second page elements to a first number of DOM nodes, and inserts a third number of document fragments into the DOM documents corresponding to the DOM nodes, thereby enabling accurate updating of page elements in the visible area.
[0055] The embodiment of the present application uses a preset function to insert a third number of document fragments into the DOM document corresponding to the DOM node at one time. The preset function is executed before the browser refreshes the page next time, which can ensure timely update of the page and improve the page display effect.
[0056] The embodiment of the present application determines the page scrolling distance in response to a page scrolling event; calculates the offset according to the page scrolling distance and the element height of each page element; calculates the moving distance according to the page scrolling distance and the offset; and determines the second page element to be displayed in the visible area in a non-initial state according to the moving distance, so as to avoid the situation where the first page element in the visible area is not fully displayed.
[0057] The embodiment of the present application adopts different offset determination methods according to whether the target page element corresponding to the second position has been exposed, thereby improving the accuracy of offset determination and improving the page display effect.
[0058] 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
[0059] 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:
[0060] Figure 1 A schematic diagram of an operating environment provided for implementing at least one embodiment of the present application is shown;
[0061] Figure 2 A flowchart of a long page rendering method provided in Embodiment 1 of the present application is shown;
[0062] Figure 3 A flow chart of a method for determining an offset provided in Embodiment 1 of the present application is shown;
[0063] Figure 4 A schematic diagram showing a first position and a second position provided in Embodiment 1 of the present application is shown;
[0064] Figure 5 A flowchart of a long page rendering method provided in Embodiment 2 of the present application is shown;
[0065] Figure 6 A structural diagram of a long page rendering device provided in Embodiment 3 of the present application is shown;
[0066] Figure 7 A structural diagram of a computing device provided in Embodiment 4 of the present application is shown. DETAILED DESCRIPTION
[0067] The exemplary embodiments of the present application will be described in more detail below with reference to the accompanying drawings. Although the exemplary embodiments of the present application are shown in the accompanying drawings, it should be understood that the present application can be implemented in various forms and should not be limited by the embodiments set forth herein. On the contrary, these embodiments are provided in order to enable a more thorough understanding of the present application and to fully convey the scope of the present application to those skilled in the art.
[0068] Figure 1 The present invention is applicable to an application environment including, but not limited to, a client 2 , a server 4 , and a network 6 .
[0069] in:
[0070] The server 4 may be composed of a single or multiple computing devices. The multiple computing devices may include virtualized computing instances. Virtualized computing instances may include virtual machines, such as simulations of computer systems, operating systems, servers, etc. The computing device may load a virtual machine based on a virtual image and / or other data defining specific software (e.g., operating system, dedicated application, server) for simulation. As the demand for different types of processing services changes, different virtual machines may be loaded and / or terminated on one or more computing devices. A hypervisor may be implemented to manage the use of different virtual machines on the same computing device.
[0071] The server 4 may be configured to communicate with the client 2, etc., via a network 6. The network 6 includes various network devices, such as routers, switches, multiplexers, hubs, modems, bridges, repeaters, firewalls, proxy devices, and / or the like. The network 6 may include physical links, such as coaxial cable links, twisted pair cable links, optical fiber links, combinations thereof, etc., or wireless links, such as cellular links, satellite links, Wi-Fi links, etc.
[0072] The server 4 can provide storage, reading, downloading, writing, querying, deleting and other services, such as providing static resource download services to clients through multiple domain names.
[0073] Client 2 can be running Windows, Android TM ) or IOS and other operating systems, such as smart phones, tablet devices, laptop computers, virtual reality devices, gaming devices, set-top boxes, car terminals, smart TVs. Based on the above operating systems, various applications, such as browsers, can be run.
[0074] Embodiment 1
[0075] Figure 2 A flowchart of a long page rendering method provided in the first embodiment of the present application is shown. The long page rendering method provided in the embodiment of the present application can be executed on the user side.
[0076] Specifically, Figure 2 As shown, the method comprises the following steps:
[0077] Step S210: Detecting a display instruction of a target long page, and obtaining the element height and the visible area height of each page element of the target long page.
[0078] The target long page is a long page to be displayed. The target long page contains at least one page element. Each page element can display corresponding data. The page elements are arranged in sequence along the height direction of the target long page. The height of each page element is called the element height of the page element.
[0079] After detecting the display instruction of the target long page, the initialization rendering phase of the target long page is entered. In this phase, the element height of each page element of the target long page is first obtained, and the height of the viewport is obtained. Among them, the viewport refers to the webpage content area that the user can directly see in the browser window, and the viewport height is the height of the viewport.
[0080] Step S220, calculating the first number of first page elements to be displayed in the visible area in the initial state according to the visible area height and the element height.
[0081] According to the height of the visible area, the element height of each page element contained in the target long page, and the arrangement order of each page element in the target long page, each page element displayed in the visible area in the initial state can be determined, and this page element is called the first page element. The number of first page elements is the first number, and thus the first number reflects the number of page elements that can be displayed in the visible area in the initial state (the target long page has just been rendered, that is, the first data loading process).
[0082] Step S230: create a first number of DOM nodes, and add element data of each first page element to a corresponding DOM node.
[0083] Different from the prior art, the DOM nodes created in the present application do not correspond one-to-one to all page elements of the target long page, but instead create a first number of DOM nodes, where the first number is the number of page elements that can be accommodated in the visible area in the initial state, that is, the first number is less than the total number of page elements in the target long page.
[0084] After creating the first number of DOM nodes, the element data of each first page element is added to the corresponding DOM node, and the first page element corresponds to the created DOM node one by one. For example, the element data of each first page element can be added to the corresponding DOM node through the v-for instruction of the vue framework, thereby realizing the page rendering in the initial state. At this point, the user can view the first number of first page elements in the visual area.
[0085] In this way, it is not necessary to load the element data of all page elements of the target long page at one time, thereby improving the page rendering efficiency.
[0086] Step S240: In response to the page scrolling event, determine a second page element to be displayed in the visible area in a non-initial state.
[0087] In the specific implementation process, the total height of the page can be calculated according to the element height of each page element of the target long page. The total height of the page is greater than the height of the visible area, and the user can change the page elements displayed in the visible area through corresponding sliding operations. And a scroll listener is set for the outer container where the page element is located. After the container listens to the page scrolling event, it determines that the content displayed in the current visible area needs to change, and it has entered a non-initial state. In the embodiment of the present application, other states other than the initial state are called non-initial states. The page element to be displayed in the visible area in the non-initial state is called the second page element. The first page element and the second page element may overlap, that is, the page element can be either the first page element or the second page element. The first page element and the second page element may also overlap, that is, the page element can be either the first page element or the second page element.
[0088] Specifically, after the container monitors the page scrolling event, it further determines the page scrolling distance, and then determines the second page element to be displayed in the visible area in the non-initial state.
[0089] In an optional implementation, if the page elements in the visible area of the page are updated and displayed directly based on the page scrolling distance, it is easy for the first page element in the visible area to be incompletely displayed, thereby reducing the page display effect. To solve this technical drawback, this implementation determines the page scrolling distance in response to a page scrolling event; calculates an offset based on the page scrolling distance and the element height of each page element; calculates a moving distance based on the page scrolling distance and the offset; and determines a second page element to be displayed in the visible area in a non-initial state based on the moving distance. Specifically, the offset is a relatively small value, which is used to make the upper boundary of the first second page element displayed in the visible area consistent with the boundary of the visible area.
[0090] In the specific implementation process, the following can be used: Figure 3 The steps shown determine the offset:
[0091] S2401, determining a first position of the upper boundary of the current visible area relative to the target long page, and determining a second position after offsetting the first position by the page scrolling distance.
[0092] Determine the first position of the upper boundary of the current visible area relative to the target long page. The current visible area refers to the visible area before the current page scrolling event is detected. Determine the position of the upper boundary of the visible area on the target long page, which is called the first position.
[0093] The position after the first position is offset by the page scrolling distance is called the second position. If the page scrolling event is an upward scrolling, the position after the first position is shifted downward by the page scrolling distance is used as the second position; if the page scrolling event is a downward scrolling, the position after the first position is shifted upward by the page scrolling distance is used as the second position.
[0094] like Figure 4 As shown, before the page scrolls, the upper boundary of the visible area is located at the L1 position (first position) of the target long page. Then, an upward scrolling event of the page is detected, and the page scrolling distance is d1. Then, the L1 position moves downward by d1 and is at the L2 position, which is the second position.
[0095] S2402: Determine a target page element corresponding to the second position.
[0096] The page element corresponding to the second position in the target long page is the target page element, that is, the element area of the target page element overlaps with the second position. Figure 4 As shown, the second position L2 is located in the page element P1, and the page element P1 is the target page element.
[0097] S2403, determining whether the second position is consistent with the upper boundary of the element of the target page; if so, executing step S2404; if not, executing step S2405.
[0098] Determine whether the second position is consistent with the upper boundary of the target page element, that is, determine whether the distance difference between the second position and the upper boundary of the target page element is less than or equal to a preset threshold; if so, execute step S2404; if not, execute step S2405.
[0099] S2404, determine that the offset is 0.
[0100] If the second position is consistent with the upper boundary of the target page element, indicating that the target page element will not be partially displayed after the page is scrolled, the offset is determined to be 0.
[0101] S2405, determine whether the target page element has been displayed in the current visible area; if so, execute step S2406; if not, execute step S2407.
[0102] If the second position is inconsistent with the upper boundary of the target page element, it indicates that the target page element will not be fully displayed according to the page scrolling distance, and then a different offset is further determined according to whether the target page element has been displayed in the current visible area.
[0103] S2406: Use the distance between the second position and the bottom border of the target page element as an offset.
[0104] If the target page element is already displayed in the current visible area, it means that the target page element has been exposed to the user before scrolling. Therefore, it does not need to be displayed in the visible area after scrolling to save system resources. Therefore, the distance between the second position and the lower boundary of the target page element is used as the offset, and the offset direction is upward. Figure 4 As shown, the distance between position L2 and position L4 is used as the offset, and an upward offset is performed.
[0105] S2407: Use the distance between the second position and the upper boundary of the element of the target page element as an offset.
[0106] If the target page element is not displayed in the current visible area, it means that the target page element is not exposed to the user before scrolling, and it needs to be displayed in the visible area after scrolling, so the distance between the second position and the upper boundary of the target page element is used as the offset, and the offset direction is downward. Figure 4 As shown, the distance between position L2 and position L3 is used as the offset, and a downward offset is performed.
[0107] After the offset is determined, the page scrolling distance is offset according to the offset direction and offset to obtain the final moving distance. Figure 4 As shown, the page scrolling distance is d1, if the offset is an upward offset of |L2-L4|, then the moving distance is a downward movement of d1-|L2-L4|; if the offset is a downward offset of |L2-L3|, then the moving distance is a downward movement of d1+|L2-L3|. After determining the moving distance, the starting position of the new second page element to be displayed in the visual area can be determined, and then according to the element height of each page element, it can be determined which ones can be displayed in the visual area.
[0108] Step S250, updating the element data of the second page element to the corresponding DOM node.
[0109] The element data of each determined second page element is updated one by one to the corresponding DOM node, so as to realize the display of the second page element. That is, the element data of the first number of DOM nodes that have been created is updated to the element data of the new corresponding second page element. In addition, the element height of each page element in the embodiment of the present application is an automatic attribute, and the element height is automatically adjusted according to the amount of element data.
[0110] It can be seen that the long page rendering method provided in the embodiment of the present application creates a first number of DOM nodes, where the first number is the number of page elements that can be accommodated in the visible area in the initial state. When the subsequent page is scrolled, there is no need to create DOM nodes corresponding to all page elements. It is only necessary to update the element data of the new second page element to the created DOM node, thereby not only saving system resources but also improving the overall page rendering efficiency.
[0111] Embodiment 1
[0112] Figure 5 A flow chart of a long page rendering method provided in the second embodiment of the present application is shown. The long page rendering method provided in the embodiment of the present application can be executed on the user side.
[0113] Specifically, Figure 5 As shown, the method comprises the following steps:
[0114] Step S510, detect the display instruction of the target long page, obtain the element height and the visible area height of each page element of the target long page; calculate the first number of first page elements to be displayed in the visible area in the initial state according to the visible area height and the element height; create a first number of DOM nodes, and add the element data of each first page element to the corresponding DOM node.
[0115] The specific implementation process of this step can refer to the description of the corresponding part in Example 1, which will not be repeated here.
[0116] Step S520 , in response to a page scrolling event, determining a second page element to be displayed in the visible area in a non-initial state and a second number of second page elements to be displayed in the visible area.
[0117] The number of second page elements currently to be displayed in the visible area is referred to as the second number. In the specific implementation process, the method in Example 1 can be used to determine the first target page element to be displayed in the visible area after the page scrolling event, and then the second page elements that need to be displayed in the visible area after the page scrolling event are determined according to the arrangement order of each page element in the target long page and the element height of each page element, and the second number of second page elements in the visible area is counted.
[0118] Step S530, determine whether the second number is greater than the first number; if so, execute step S540; if not, execute step S560.
[0119] After the second number of the second page elements in the visible area is counted, the second number is verified with the first number, and a matching processing method is adopted according to different verification results.
[0120] Step S540: determine a third number according to the difference between the second number and the first number, create a third number of document fragments, and write element data of the third number of second page elements into corresponding document fragments.
[0121] If the second number is greater than the first number, it indicates that the number of DOM nodes currently created is less than the number of page elements to be displayed in the visible area. In order to ensure the normal display of page elements in the page, when it is determined that the second number is greater than the first number, a third number is determined based on the difference between the second number and the first number, and a third number of DOM nodes is created so that the total number of DOM nodes created matches the number of page elements in the visible area.
[0122] In the specific implementation process, if a DOM node is created by inserting a DOM document stream through appendChild, the page will be redrawn and rearranged each time a DOM node is created, which seriously affects the page rendering performance. In view of this, in order to improve the page rendering efficiency, the present application creates a third number of document fragments, and writes the element data of the third number of second page elements into the corresponding document fragments. For example, the third number of document fragments is created through the function createDocumentFragment(), and the element data of the corresponding second page element is recorded in each document fragment, that is, one document fragment corresponds to the element data of one second page element, thereby obtaining the third number of document fragments.
[0123] Step S550: updating the element data of the first number of second page elements to the first number of DOM nodes, and inserting the third number of document fragments into the DOM documents corresponding to the DOM nodes.
[0124] According to the insertion order from top to bottom, the element data of the first number of second page elements are updated to the first number of DOM nodes, and the element data of the third number of second page elements have been added to the created third number of document fragments, then the created third number of document fragments are inserted into the DOM document corresponding to the DOM nodes.
[0125] In the specific implementation process, a preset function can be used to insert a third number of document fragments into the DOM document corresponding to the first number of DOM nodes created at one time, thereby reducing the number of operations on the DOM document and improving the overall page rendering efficiency. Among them, the preset function is executed before the browser refreshes the page next time, so that the insertion of the DOM document can be completed before the next page refresh task is executed. In this way, the browser can immediately execute the page refresh task after inserting the DOM document, so that the updated page elements can be displayed quickly. If this method is not adopted, if the browser has just executed the refresh page and inserted the DOM document corresponding to the DOM node, it is necessary to wait for a refresh interval before refreshing the page again to complete the display of the new page elements, thereby causing display lag and affecting the page display effect. Specifically, the function requestAnimationFrame() can be used to insert a third number of document fragments into the DOM document corresponding to the DOM node at one time.
[0126] Step S560: Update the element data of the second page element to the corresponding DOM node.
[0127] If the second number is less than or equal to the first number, it means that the number of DOM nodes currently created is equal to or greater than the number of page elements to be displayed in the visible area, and it is only necessary to update the element data of the second page element to the corresponding DOM node.
[0128] In addition, as an alternative implementation, after the first number of DOM nodes are created in the initial state in step S510, a fourth number of DOM nodes may be created as redundant nodes during a system idle period (eg, when no page rendering is performed).
[0129] Further optionally, in the process of creating the fourth number of DOM nodes during the idle period of the system, a placeholder element corresponding to each page element can be generated according to the element height of each page element contained in the target long page, and the placeholder element is consistent with the element height of the corresponding page element, but the placeholder element does not render data and is only used to determine the specific value of the fourth number. Further, the placeholder elements corresponding to the page elements are arranged according to the arrangement order of the page elements to obtain a pre-arrangement page, and the pre-arrangement page is a long page containing each placeholder element but not specific element data. And a sliding window of fixed length is created, and the window height of the sliding window is equal to the height of the visible area. The sliding window starts from the top of the pre-arrangement page and slides continuously according to a preset step length. Every time the sliding window reaches a position, the number of placeholder elements contained in the window is recorded. The sliding is terminated after the sliding window reaches the bottom of the pre-arrangement page. At this time, statistical data of the number of placeholder elements contained in each window is obtained, and the maximum number of placeholder elements in a single window is further determined from the statistical data. The fourth number is determined according to the difference between the maximum value and the first number, for example, the difference between the maximum value and the first number is used as the fourth number, or the difference between the maximum value and the first number + 1 is used as the fourth number. In this way, a first number of DOM nodes can be created in the initial state, and a fourth number of DOM nodes can be created in the idle state, and the sum of the first number and the fourth number is greater than or equal to the maximum number of placeholder elements in a single window, that is, the sum of the first number and the second number can be greater than or equal to the number of page elements in the visible area in all cases.
[0130] It can be seen that the long page rendering method provided in the embodiment of the present application, when the second number of second page elements to be displayed in the visible area is less than the first number of DOM nodes that have been created, inserts the DOM documents corresponding to the DOM nodes by creating a third number of document fragments, thereby realizing the updated display of page elements and improving page rendering efficiency.
[0131] Embodiment 3
[0132] Figure 6 The structure diagram of a long page rendering device provided in the third embodiment of the present application is shown. The long page rendering device 600 specifically includes: an acquisition module 610 , a first execution module 620 and a second execution module 630 .
[0133] The acquisition module 610 is used to detect the display instruction of the target long page, and acquire the element height and the visible area height of each page element of the target long page;
[0134] The first execution module 620 is used to calculate the first number of first page elements to be displayed in the visible area in the initial state according to the visible area height and the element height; create a first number of DOM nodes, and add element data of each first page element to the corresponding DOM node;
[0135] The second execution module 630 is used to determine the second page element to be displayed in the visible area in a non-initial state in response to the page scrolling event; and update the element data of the second page element to the corresponding DOM node.
[0136] In an optional implementation, the second execution module 630 is used to: determine a second number of second page elements to be displayed in the visible area;
[0137] If the second number is greater than the first number, a third number is determined according to the difference between the second number and the first number, and a third number of DOM nodes is created.
[0138] In an optional implementation, the second execution module 630 is used to: create a third number of document segments, and write element data of the third number of second page elements into corresponding document segments.
[0139] In an optional implementation, the second execution module 630 is used to: update the element data of the first number of second page elements to the first number of DOM nodes, and insert the third number of document fragments into the DOM documents corresponding to the DOM nodes.
[0140] In an optional implementation, the second execution module 630 is used to: use a preset function to insert the third number of document fragments into the DOM document corresponding to the DOM node at one time; wherein the preset function is executed before the browser refreshes the page next time.
[0141] In an optional implementation, the second execution module 630 is used to: determine the page scrolling distance in response to a page scrolling event;
[0142] Calculate the offset according to the page scrolling distance and the element height of each page element;
[0143] Calculate the moving distance according to the page scrolling distance and the offset;
[0144] According to the moving distance, a second page element to be displayed in the visible area in a non-initial state is determined.
[0145] In an optional implementation, the second execution module 630 is used to: determine a first position of the upper boundary of the current visible area relative to the target long page, and determine a second position after offsetting the first position by the page scrolling distance;
[0146] Determining a target page element corresponding to the second position;
[0147] If the second position is consistent with the upper boundary of the element of the target page element, the offset is determined to be 0;
[0148] If the second position is inconsistent with the upper boundary of the target page element, determine whether the target page element is already displayed in the current visible area; if so, take the distance between the second position and the lower boundary of the target page element as the offset; if not, take the distance between the second position and the upper boundary of the target page element as the offset.
[0149] It can be seen that the long page rendering device provided in the embodiment of the present application creates a first number of DOM nodes, where the first number is the number of page elements that can be accommodated in the visible area in the initial state. When the subsequent page is scrolled, there is no need to create DOM nodes corresponding to all page elements. It is only necessary to update the element data of the new second page element to the created DOM node, which can not only save system resources but also improve the overall page rendering efficiency.
[0150] Embodiment 4
[0151] Figure 7 A structural diagram of a computing device provided in Example 4 of the present application is shown. The specific embodiments of the present application do not limit the specific implementation of the computing device.
[0152] like Figure 7 As shown, the computing device may include: a processor (processor) 702 , a communications interface (Communications Interface) 704 , a memory (memory) 706 , and a communication bus 708 .
[0153] The processor 702, the communication interface 704, and the memory 706 communicate with each other via a communication bus 708. The communication interface 704 is used to communicate with other devices such as a client or other server network elements. The processor 702 is used to execute a program 710, which can specifically execute the relevant steps in the above-mentioned embodiment of the long page rendering method for a computing device.
[0154] Specifically, the program 710 may include program codes, which include computer operation instructions.
[0155] The processor 702 may be a central processing unit (CPU), or an application-specific integrated circuit (ASIC), or one or more integrated circuits configured to implement the embodiments of the present application. The one or more processors included in the computing device may be processors of the same type, such as one or more CPUs; or may be processors of different types, such as one or more CPUs and one or more ASICs.
[0156] The memory 706 is used to store the program 710. The memory 706 may include a high-speed RAM memory, and may also include a non-volatile memory (non-volatile memory), such as at least one disk memory. The program 710 may be specifically used to enable the processor 702 to perform the operations in the above method embodiment.
[0157] Embodiment 5
[0158] Embodiment 5 of the present application provides a non-volatile computer storage medium, wherein the computer storage medium stores at least one executable instruction or computer program, which enables a processor to perform operations corresponding to the long page rendering method in any of the above method embodiments.
[0159] Embodiment 6
[0160] Embodiment 6 of the present application provides a computer program product, which includes at least one executable instruction or computer program, and the executable instruction or computer program can enable a processor to perform operations corresponding to the long page rendering method in any of the above method embodiments.
[0161] To summarize, according to the computing device, computer storage medium, and computer program product provided in this embodiment, a first number of DOM nodes is created, and the first number is the number of page elements that can be accommodated in the visible area in the initial state. When the subsequent page is scrolled, there is no need to create DOM nodes corresponding to all page elements. It is only necessary to update the element data of the new second page element to the created DOM node, which can not only save system resources but also improve the overall page rendering efficiency.
[0162] The algorithm or display provided here are not inherently related to any specific computer, virtual system or other equipment. Various general systems can also be used together with the teaching based on this. According to the above description, it is obvious to construct the structure required for this type of system. In addition, the present application embodiment is not directed to any specific programming language yet. It should be understood that various programming languages can be utilized to realize the content of the present application described here, and the above description of specific languages is to disclose the best mode of implementation of the present application.
[0163] In the description provided herein, a large number of specific details are described. However, it is understood that the embodiments of the present application can be practiced without these specific details. In some instances, well-known methods, structures and techniques are not shown in detail so as not to obscure the understanding of this description.
[0164] Similarly, it should be understood that in order to streamline the present application and help understand one or more of the various inventive aspects, in the above description of the exemplary embodiments of the present application, the various features of the embodiments of the present application are sometimes grouped together into a single embodiment, figure, or description thereof. However, the disclosed method should not be interpreted as reflecting the following intention: the claimed application requires more features than the features clearly stated in each claim. More specifically, as reflected in the claims below, the inventive aspects are less than all the features of the single embodiment disclosed above. Therefore, the claims following the specific embodiment are hereby expressly incorporated into the specific embodiment, wherein each claim itself serves as a separate embodiment of the present application.
[0165] Those skilled in the art will appreciate that the modules in the devices in the embodiments may be adaptively changed and arranged in one or more devices different from the embodiments. The modules or units or components in the embodiments may be combined into one module or unit or component, and in addition they may be divided into a plurality of submodules or subunits or subcomponents. Except that at least some of such features and / or processes or units are mutually exclusive, all features disclosed in this specification (including the accompanying claims, abstracts and drawings) and all processes or units of any method or device disclosed in this manner may be combined in any combination. Unless otherwise expressly stated, each feature disclosed in this specification (including the accompanying claims, abstracts and drawings) may be replaced by an alternative feature providing the same, equivalent or similar purpose.
[0166] In addition, those skilled in the art will appreciate that, although some embodiments herein include certain features included in other embodiments but not other features, the combination of features of different embodiments is meant to be within the scope of the present application and form different embodiments. For example, in the claims below, any one of the claimed embodiments may be used in any combination.
[0167] The various component embodiments of the present application can be implemented in hardware, or in software modules running on one or more processors, or in a combination thereof. It should be understood by those skilled in the art that a microprocessor or digital signal processor (DSP) can be used in practice to implement some or all functions of some or all components according to the embodiments of the present application. The application can also be implemented as a device or apparatus program (e.g., computer program and computer program product) for executing a part or all of the methods described herein. Such a program implementing the present application can be stored on a computer-readable medium, or can have the form of one or more signals. Such a signal can be downloaded from an Internet website, or provided on a carrier signal, or provided in any other form.
[0168] It should be noted that the above embodiments illustrate the present application rather than limit the present application, and that those skilled in the art may design alternative embodiments without departing from the scope of the appended claims. In the claims, any reference symbol between brackets shall not be constructed as a limitation on the claims. The word "comprising" does not exclude the presence of elements or steps not listed in the claims. The word "one" or "an" preceding an element does not exclude the presence of multiple such elements. The present application may be implemented by means of hardware including several different elements and by means of a suitably programmed computer. In a unit claim that lists several devices, several of these devices may be embodied by the same hardware item. The use of the words first, second, and third, etc. does not indicate any order. These words may be interpreted as names. The steps in the above embodiments, unless otherwise specified, should not be understood as limitations on the order of execution.
Claims
1. A long page rendering method, characterized in that: include: Detecting a display instruction of a target long page, and obtaining element heights and a visual area height of each page element of the target long page; Calculating a first number of first page elements to be displayed in the visible area in an initial state according to the visible area height and the element height; Creating a first number of DOM nodes, and adding element data of each first page element to a corresponding DOM node; In response to a page scrolling event, determining a second page element to be displayed in the visible area in a non-initial state; Update the element data of the second page element to the corresponding DOM node.
2. The method according to claim 1, characterized in that After determining, in response to the page scrolling event, a second page element to be displayed in the visible area in a non-initial state, the method further includes: Determining a second number of second page elements to be displayed in the visible area; If the second number is greater than the first number, a third number is determined according to the difference between the second number and the first number, and a third number of DOM nodes is created.
3. The method according to claim 2, characterized in that The creating a third number of DOM nodes includes: creating a third number of document fragments, and writing element data of the third number of second page elements into corresponding document fragments.
4. The method according to claim 3, characterized in that The updating of the element data of the second page element to the corresponding DOM node comprises: The element data of the first number of second page elements are updated to the first number of DOM nodes, and the third number of document fragments are inserted into the DOM documents corresponding to the DOM nodes.
5. The method according to claim 4, characterized in that Inserting the third number of document fragments into the DOM document corresponding to the DOM node comprises: The third number of document fragments are inserted into the DOM document at one time using a preset function; wherein the preset function is executed before the browser refreshes the page next time.
6. The method according to any one of claims 1 to 5, characterized in that In response to the page scrolling event, determining the second page element to be displayed in the visible area in the non-initial state includes: In response to a page scrolling event, determining a page scrolling distance; Calculate the offset according to the page scrolling distance and the element height of each page element; Calculate the moving distance according to the page scrolling distance and the offset; According to the moving distance, a second page element to be displayed in the visible area in a non-initial state is determined.
7. The method according to claim 6, characterized in that Calculating the offset according to the page scrolling distance and the element height of each page element includes: Determine a first position of the upper boundary of the current visible area relative to the target long page, and determine a second position after offsetting the first position by the page scrolling distance; Determining a target page element corresponding to the second position; If the second position is consistent with the upper boundary of the element of the target page element, the offset is determined to be 0; If the second position is inconsistent with the upper boundary of the target page element, determine whether the target page element is already displayed in the current visible area; if so, take the distance between the second position and the lower boundary of the target page element as the offset; if not, take the distance between the second position and the upper boundary of the target page element as the offset.
8. A long page rendering device, characterized in that: include: An acquisition module, used for detecting a display instruction of a target long page, and acquiring an element height and a visual area height of each page element of the target long page; A first execution module is used to calculate a first number of first page elements to be displayed in the visible area in an initial state according to the visible area height and the element height; create a first number of DOM nodes, and add element data of each first page element to a corresponding DOM node; A second execution module, configured to determine, in response to a page scrolling event, a second page element to be displayed in the visible area in a non-initial state; Update the element data of the second page element to the corresponding DOM node.
9. A computing device, characterized in that include: A processor, a memory, a communication interface and a communication bus, wherein the processor, the memory and the communication interface communicate with each other via the communication bus; The memory is used to store at least one executable instruction, and the executable instruction enables the processor to perform operations corresponding to the long page rendering method according to any one of claims 1 to 7.
10. A computer storage medium, characterized in that: The storage medium stores at least one executable instruction, and the executable instruction enables the processor to perform operations corresponding to the long page rendering method according to any one of claims 1 to 7.
11. A computer program product, characterized in that It includes at least one executable instruction, and the executable instruction enables the processor to perform operations corresponding to the long page rendering method according to any one of claims 1 to 7.