CN111427637B - Page rendering method and device - Google Patents
Page rendering method and device Download PDFInfo
- Publication number
- CN111427637B CN111427637B CN201910026155.5A CN201910026155A CN111427637B CN 111427637 B CN111427637 B CN 111427637B CN 201910026155 A CN201910026155 A CN 201910026155A CN 111427637 B CN111427637 B CN 111427637B
- Authority
- CN
- China
- Prior art keywords
- page
- range
- rendering
- user
- visual range
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Active
Links
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/451—Execution arrangements for user interfaces
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- Theoretical Computer Science (AREA)
- Human Computer Interaction (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
The present disclosure provides a page rendering method, including: when a page is scrolled, acquiring the scroll speed and the scroll direction of the page; and when the scrolling speed meets a preset condition, rendering the page in the user visual range and the page in a preset range extending from the user visual range to the direction opposite to the scrolling direction. The present disclosure also provides a page rendering apparatus, a computer device, and a computer-readable storage medium.
Description
Technical Field
The present disclosure relates to the field of computer technology, and more particularly, to a page rendering method and apparatus.
Background
When a page is presented to a user, page rendering is required. In the prior art, one way is to render the entire page, whether or not the page is in the user's visual range, and the other way is to render only the page in the current user's visual range.
The first mode is very stuck when a large number of nodes to be rendered exist in the page, and takes a large amount of time for page rendering, so that the waiting time of the user is long, and the user requirement is not met.
The second approach saves the page rendering time compared with the first approach, but since only the pages in the user's visual range are rendered each time, when the page is scrolled, all the pages in the changed user's visual range need to be re-rendered, the user still needs to wait, and sometimes a splash phenomenon occurs.
Disclosure of Invention
In view of this, the present disclosure provides an improved page rendering method and apparatus.
One aspect of the present disclosure provides a page rendering method, including: when a page is scrolled, acquiring the scroll speed and the scroll direction of the page; and when the scrolling speed meets a preset condition, rendering the page in the user visual range and the page in a preset range extending from the user visual range to the direction opposite to the scrolling direction.
According to an embodiment of the present disclosure, the obtaining the scroll speed of the page includes: and acquiring the rolling distance of the page in the previous first preset time at intervals of the first preset time, and determining that the rolling speed of the page meets preset conditions when the rolling distance is smaller than a preset threshold value, otherwise determining that the rolling speed of the page does not meet the preset conditions.
According to an embodiment of the present disclosure, the rendering of the page within the user-viewable range and the page within the predetermined range extending from the user-viewable range to the direction opposite to the scrolling direction includes: calculating the current user visual range; calculating a first proportion of a rolling distance of the page in a previous first preset time relative to the size of the user visual range along the rolling direction; when the first ratio is an integer, the predetermined range is equal to a first predetermined integer multiple of the user viewable range; when the first ratio is not an integer, the difference value between the minimum integer greater than the first ratio and the first ratio is a second ratio, and the preset range is equal to the user visible range of the second ratio times; rendering a page node within a predetermined range extending from the current user viewable range to a direction opposite to the scrolling direction.
According to an embodiment of the present disclosure, the rendering of the page node within the current user-viewable range and a predetermined range extending from the current user-viewable range to a direction opposite to the scrolling direction includes: acquiring a first list comprising nodes needing rendering in the whole page; traversing the first list, and placing nodes which fall within the current user visual range and a preset range extending from the current user visual range to the direction opposite to the scrolling direction into a second list; traversing the second list, and rendering the nodes in the second list.
According to an embodiment of the present disclosure, the above method further includes: when the rolling speed does not accord with a preset condition, starting a delay function; and rendering the page in the user visual range and the page in the preset range extending from the user visual range to the direction opposite to the scrolling direction when the delay time of the delay function is over. The delay time of the delay function is a second preset time, and when the page rolls in the second preset time, the delay function is reset.
According to an embodiment of the present disclosure, the above method further includes: and when the page is not scrolled, rendering the page in the visual range of the user every third preset time.
According to an embodiment of the present disclosure, the rendering the page in the user visible range at intervals of the third preset time includes: implanting a timer in a page, wherein the timing period of the timer is a third preset time; calculating the current user visual range when the timer starts to re-time; and rendering the page nodes in the current user visual range.
Another aspect of the present disclosure provides a page rendering apparatus, including an acquisition module and a processing module. The acquisition module is used for acquiring the scrolling speed and the scrolling direction of the page when the page scrolls. And the processing module is used for rendering the page in the user visual range and the page in the preset range extending from the user visual range to the direction opposite to the scrolling direction when the scrolling speed accords with the preset condition.
According to an embodiment of the present disclosure, the acquiring the scroll speed of the page includes: the acquisition module is used for acquiring the rolling distance of the page in the previous first preset time at intervals of the first preset time, and determining that the rolling speed of the page meets preset conditions when the rolling distance is smaller than a preset threshold value, otherwise determining that the rolling speed of the page does not meet the preset conditions.
According to an embodiment of the present disclosure, the processing module rendering a page within a user-viewable range and a page within a predetermined range extending from the user-viewable range to a direction opposite to the scrolling direction includes: the processing module is used for calculating the current user visual range; calculating a first proportion of a rolling distance of the page in a previous first preset time relative to the size of the user visual range along the rolling direction; when the first ratio is an integer, the predetermined range is equal to a first predetermined integer multiple of the user viewable range; when the first ratio is not an integer, the difference value between the minimum integer greater than the first ratio and the first ratio is a second ratio, and the preset range is equal to the user visible range of the second ratio times; rendering a page node within a predetermined range extending from the current user viewable range to a direction opposite to the scrolling direction.
According to an embodiment of the present disclosure, the processing module rendering the current user viewable range and page nodes within a predetermined range extending from the current user viewable range to a direction opposite the scrolling direction comprises: the processing module is used for acquiring a first list comprising nodes needing rendering in the whole page; traversing the first list, and placing nodes which fall within the current user visual range and a preset range extending from the current user visual range to the direction opposite to the scrolling direction into a second list; traversing the second list, and rendering the nodes in the second list.
According to an embodiment of the disclosure, the apparatus further includes a first auxiliary processing module, configured to start a delay function when the rolling speed does not meet a preset condition; rendering a page within a user visual range and a page within a predetermined range extending from the user visual range to a direction opposite to the scrolling direction when a delay time of the delay function is ended; the delay time of the delay function is a second preset time, and when the page rolls in the second preset time, the delay function is reset.
According to an embodiment of the disclosure, the apparatus further includes a second auxiliary processing module, configured to render the page in the user visible range every third preset time when the page is not scrolled.
According to an embodiment of the present disclosure, the rendering the page in the user visible range by the second auxiliary processing module every third preset time includes: the second auxiliary processing module is used for implanting a timer in the page, and the timing period of the timer is a third preset time; calculating the current user visual range when the timer starts to re-time; and rendering the page nodes in the current user visual range.
Another aspect of the present disclosure provides a computer device comprising a memory, a processor and a computer program stored on the memory and executable on the processor, the processor implementing the method as described above when executing the program.
Another aspect of the present disclosure provides a computer-readable storage medium storing computer-executable instructions that, when executed, are configured to implement a method as described above.
Another aspect of the present disclosure provides a computer program comprising computer executable instructions which when executed are for implementing a method as described above.
According to the embodiment of the disclosure, the problem that the test results of each test platform are scattered, independent and cannot be shared can be at least partially solved/lightened/inhibited/even avoided, and therefore the test results compatible with different platforms and different test frames can be integrated uniformly, and the subsequent technical effects of uniform display and processing are facilitated.
Drawings
The above and other objects, features and advantages of the present disclosure will become more apparent from the following description of embodiments thereof with reference to the accompanying drawings in which:
FIG. 1 schematically illustrates an exemplary system architecture to which page rendering methods and apparatus may be applied, according to embodiments of the present disclosure;
FIG. 2 schematically illustrates a flow chart of a page rendering method according to an embodiment of the disclosure;
FIG. 3A schematically illustrates a flow chart of a page rendering method according to another embodiment of the present disclosure;
FIG. 3B schematically illustrates a relationship diagram of a user viewable range and a predetermined range according to an embodiment of the disclosure;
FIG. 4 schematically illustrates a block diagram of a page rendering apparatus according to an embodiment of the disclosure;
FIG. 5 schematically illustrates a block diagram of a page rendering apparatus according to another embodiment of the disclosure; and
Fig. 6 schematically shows a block diagram of a computer device adapted to implement the above-described method according to an embodiment of the present disclosure.
Detailed Description
Hereinafter, embodiments of the present disclosure will be described with reference to the accompanying drawings. It should be understood that the description is only exemplary and is not intended to limit the scope of the present disclosure. In the following detailed description, for purposes of explanation, numerous specific details are set forth in order to provide a thorough understanding of the embodiments of the present disclosure. It may be evident, however, that one or more embodiments may be practiced without these specific details. In addition, in the following description, descriptions of well-known structures and techniques are omitted so as not to unnecessarily obscure the concepts of the present disclosure.
The terminology used herein is for the purpose of describing particular embodiments only and is not intended to be limiting of the disclosure. The terms "comprises," "comprising," and/or the like, as used herein, specify the presence of stated features, steps, operations, and/or components, but do not preclude the presence or addition of one or more other features, steps, operations, or components.
All terms (including technical and scientific terms) used herein have the same meaning as commonly understood by one of ordinary skill in the art unless otherwise defined. It should be noted that the terms used herein should be construed to have meanings consistent with the context of the present specification and should not be construed in an idealized or overly formal manner.
Where expressions like at least one of "A, B and C, etc. are used, the expressions should generally be interpreted in accordance with the meaning as commonly understood by those skilled in the art (e.g.," a system having at least one of A, B and C "shall include, but not be limited to, a system having a alone, B alone, C alone, a and B together, a and C together, B and C together, and/or A, B, C together, etc.). Where a formulation similar to at least one of "A, B or C, etc." is used, in general such a formulation should be interpreted in accordance with the ordinary understanding of one skilled in the art (e.g. "a system with at least one of A, B or C" would include but not be limited to systems with a alone, B alone, C alone, a and B together, a and C together, B and C together, and/or A, B, C together, etc.).
The embodiment of the disclosure provides a page rendering method and a device capable of applying the method. The method comprises a state monitoring process and a rendering process, wherein in the state monitoring process, when the page is monitored to be rolled, the rolling speed and the rolling direction of the page are obtained, if the rolling speed of the page accords with a preset condition, the page in a user visual range and the page in a preset range extending from the user visual range to the direction opposite to the rolling direction are rendered.
Fig. 1 schematically illustrates an exemplary system architecture 100 in which page rendering methods and apparatuses may be applied, according to embodiments of the present disclosure. It should be noted that fig. 1 is only an example of a system architecture to which embodiments of the present disclosure may be applied to assist those skilled in the art in understanding the technical content of the present disclosure, but does not mean that embodiments of the present disclosure may not be used in other devices, systems, environments, or scenarios.
As shown in fig. 1, a system architecture 100 according to this embodiment may include terminal devices 101, 102, 103, a network 104, and a server 105. The network 104 is used as a medium to provide communication links between the terminal devices 101, 102, 103 and the server 105. The network 104 may include various connection types, such as wired, wireless communication links, or fiber optic cables, among others.
The user may interact with the server 105 via the network 104 using the terminal devices 101, 102, 103 to receive or send messages or the like. Various communication client applications, such as shopping class applications, web browser applications, search class applications, instant messaging tools, mailbox clients, social platform software, etc. (by way of example only) may be installed on the terminal devices 101, 102, 103.
The terminal devices 101, 102, 103 may be a variety of electronic devices having a display screen and supporting web browsing, including but not limited to smartphones, tablets, laptop and desktop computers, and the like.
The server 105 may be a server providing various services, such as a background management server (by way of example only) providing support for websites browsed by users using the terminal devices 101, 102, 103. The background management server may analyze and process the received data such as the user request, and feed back the processing result (e.g. the web page, information, or data obtained or generated according to the user request) to the terminal devices 101, 102, 103, where the user browses the corresponding processing result through the page displayed on the terminal devices 101, 102, 103.
The terminal devices 101, 102, 103 need to render pages when presenting the pages to the user, and the page rendering method provided by the embodiments of the present disclosure may be generally executed by the terminal devices 101, 102, 103. Accordingly, the page rendering apparatus provided by the embodiments of the present disclosure may be generally provided in the terminal devices 101, 102, 103.
It should be understood that the number of terminal devices, networks and servers in fig. 1 is merely illustrative. There may be any number of terminal devices, networks, and servers, as desired for implementation.
Fig. 2 schematically illustrates a flow chart of a page rendering method according to an embodiment of the disclosure.
As shown in fig. 2, the method includes acquiring a scroll speed and a scroll direction of a page when the page is scrolled in operation S201.
Then, in operation S202, when the scroll speed meets a preset condition, pages within a user-viewable range and pages within a predetermined range extending from the user-viewable range to a direction opposite to the scroll direction are rendered.
In this operation, when the scroll speed of the page meets the preset condition, the range that the current user can see is taken as the user visual range, if the scroll direction of the page is upward, it means that the user desires to browse the contents below the current user visual range, and therefore, the user visual range and the page within the predetermined range extending downward from the user visual range are rendered, and if the scroll direction of the page is downward, it means that the user desires to browse the contents above the current user visual range, and therefore, the user visual range and the page within the predetermined range extending upward from the user visual range are rendered.
It can be seen that, according to the scrolling speed and the scrolling direction when the user scrolls the page, the method shown in fig. 2 predicts the page entering the user visual range after prediction, not only renders the page entering the user visual range, but also renders the page entering the user visual range in advance, that is, continuously realizes the predicted rendering of the page based on the page browsing behavior of the user. Therefore, when the user continues to scroll the page to browse, the pre-rendered page part enters the visual range of the user, repeated rendering does not need to take time, the number of rendering tasks to be executed at the same time is reduced, and the waiting time of the user is shortened.
In one embodiment of the present disclosure, the step S201 of obtaining the scroll speed of the page includes: and acquiring the rolling distance of the page in the previous first preset time at intervals of the first preset time, and determining that the rolling speed of the page meets preset conditions when the rolling distance is smaller than a preset threshold value, otherwise determining that the rolling speed of the page does not meet the preset conditions. It can be seen that, in this embodiment, the page rolling speed is represented by using the page rolling distance within a certain time, where the page rolling speed accords with a preset condition, which means that the page rolling speed is slower, which means that the user is browsing the page content normally, for example, the user is reading an article on the page, whereas the page rolling speed does not accord with a preset condition, which means that the page rolling speed is faster, which means that the user is currently scrolling the page and does not browse the page content, for example, the user wants to pull the page to the evaluation content below, and the page content does not need to be browsed in the process of scrolling the page. The purpose of the current page rolling of the user is predicted through the page rolling speed, the fact that the predicted rendering mode is adopted for the page part which the user really needs to browse and pay attention to is ensured, and computing resources are saved.
In one embodiment of the present disclosure, the rendering of the page within the user-viewable range and the page within the predetermined range extending from the user-viewable range to the direction opposite to the scrolling direction in operation S202 includes: calculating the current user visual range; calculating a first proportion of a rolling distance of the page in a previous first preset time relative to the size of the user visual range along the rolling direction; rendering a page node within a predetermined range extending from the current user viewable range to a direction opposite to the scrolling direction. Wherein when the first ratio is an integer, the predetermined range is equal to a first predetermined integer multiple of the user viewable range; when the first ratio is not an integer, the difference between the minimum integer greater than the first ratio and the first ratio is a second ratio, and the predetermined range is equal to the user visible range of the second ratio times.
For example, when a page is scrolled up and the scroll distance is 0.4 times the height of the user visual range, the predetermined range is equal to 0.6 times the user visual range, and then, in addition to rendering the page within the current user visual range, a page within the user visual range 0.6 times below the current user visual range is also rendered in advance; when the page is scrolled up and the scroll distance is 1 time the height of the user visual range, the predetermined range may be equal to 1 time the user visual range, 2 times the user visual range, and so on, and other integer times the user visual range, then in addition to rendering the page within the current user visual range, an integer multiple of the user visual range below the current user visual range is also previously rendered.
According to the embodiment, when the page is rendered, the sum of the part of the visual range of the user rendered each time and the part of the pre-rendered predetermined range is an integer multiple of the visual range of the user, namely the maximum range which the user can browse each time, accords with the behavior habit of the user for browsing the page, and achieves the optimal effect of predicting the rendering.
Specifically, as an optional embodiment, the rendering the current user viewable area and the page node within the predetermined range extending from the current user viewable area to the direction opposite to the scrolling direction includes: acquiring a first list comprising nodes needing rendering in the whole page; traversing the first list, and placing nodes which fall within the current user visual range and a preset range extending from the current user visual range to the direction opposite to the scrolling direction into a second list; traversing the second list, and rendering the nodes in the second list.
When the rendering is performed each time, since some page nodes are pre-rendered in the previous prediction rendering, the page nodes do not need to be rendered again this time, so that the nodes needing to be rendered in the scope needing to be rendered are reduced, that is, the rendering tasks needing to be processed simultaneously each time are reduced, the rendering efficiency is improved, and the waiting time of a user is reduced.
In one embodiment of the present disclosure, the method shown in fig. 2 further comprises: when the rolling speed does not accord with a preset condition, starting a delay function; rendering a page within a user visual range and a page within a predetermined range extending from the user visual range to a direction opposite to the scrolling direction when a delay time of the delay function is ended; the delay time of the delay function is a second preset time, and when the page rolls in the second preset time, the delay function is reset.
In this embodiment, the method shown in fig. 2 includes not only the operation S202, but also the case that the page scrolling speed does not meet the preset condition is further described, when the page scrolling speed does not meet the preset condition, it indicates that the user does not need to browse the content in the process of scrolling the page, that is, the user does not re-render the page in the process of scrolling the page at a higher speed and more frequent scrolling, until the user slows down the page scrolling speed, and it indicates that the user does not render the page according to the operation S202 when beginning to pay attention to the content of the page, so that the user can be prevented from frequently performing computing rendering when the user scrolls the page rapidly and continuously, and computing resources can be saved.
On the basis of the above embodiments, as an alternative embodiment, the method shown in fig. 2 further includes: and when the page is not scrolled, rendering the page in the visual range of the user every third preset time.
Specifically, the rendering the page in the user visible range at intervals of the third preset time includes: implanting a timer in a page, wherein the timing period of the timer is a third preset time; calculating the current user visual range when the timer starts to re-time; and rendering the page nodes in the current user visual range.
The method illustrated in fig. 2 is further described below with reference to fig. 3A-3B in conjunction with the exemplary embodiment.
Fig. 3A schematically illustrates a flow chart of a page rendering method according to another embodiment of the present disclosure.
As shown in fig. 3A, the method includes operations S301 to S307, where each operation occurs after an event that a user opens page a is detected, specifically as follows:
in operation S301, it is determined whether scrolling of page a occurs, and operation S302 is performed if yes, and operation S307 is performed if not.
In operation S302, the scroll speed and the scroll direction of the page a are acquired.
In this operation S302, when the page is scrolled, on the one hand, to obtain the scroll time, the scroll speed of the page a may be determined according to the scroll distance d of the page a within a certain time, for example, every first preset time, the scroll distance d of the page a within the previous first preset time is obtained, the first preset time is fixed, and a larger scroll distance d indicates a larger scroll speed of the page a within the previous first preset time.
On the other hand, the scrolling direction is acquired, the page scrolling direction is recorded as the direction, the direction is set as a numerical value type variable, and the value range is 0 and 1.0 indicates that the page scroll direction is down (the mouse wheel scroll direction is up, in other embodiments the mouse wheel scroll direction may be opposite, depending on the particular setting); 1 indicates that the page scroll direction is up (the mouse wheel scroll direction is down, in other embodiments the mouse wheel scroll direction may be reversed, depending on the particular setting).
Specifically, there are two methods for judging the page scrolling direction:
the scrollTop () method may be used. Storing $ (window) before page scrolling, wherein the value of scrollTop () is a, and the value of scrollTop () is b when scrolling, and if a is less than b, direction=1; when a > b, direction=0; var=e||window. For IE, google browser: wheel delta > 0, pulley up rolling direction=0; wheel delta < 0, pulley roll direction downward=0; for FireFox browser, e.details > 0, direction=0; e.details < 0, direction=1.
In operation S303, it is determined whether the scroll speed of the page a meets the preset condition, and operation S304 is performed if yes, and otherwise operation S305 is performed.
In the present operation S303, after obtaining the rolling distance d of the page a within the previous first preset time, a page rolling distance threshold distance is defined, and whether the rolling speed of the page a meets the preset condition is analyzed according to the comparison between the current page rolling distance d and the distance value. When d < distance, the scrolling speed of the page A is lower, and when d > distance, the scrolling speed of the page A is higher.
In operation S304, a page within a user-viewable range and a page within a predetermined range extending from the user-viewable range to a direction opposite to the scroll direction are rendered.
When d < distance, the scroll speed of the page A is lower, which indicates that the focus of the user is on the page content, and the predicted rendering is performed on the page in the visual range of the user and the page which is about to enter the visual range of the user. Predicting the page rolling direction of the next step of the user according to the recorded direction value, and when the direction=0, representing the page to roll downwards, and rendering the current user visual window and the node needing to be re-rendered in the window with the preset range and the size above the current user visual window in advance; when direction=1, it means that the page scrolls upward, rendering in advance the current user viewable window and the nodes below it that need to be re-rendered within the predetermined range size window.
First, the user visibility window of page A is calculated, such as from the clientHeight attribute of page A:
var height＝
document.documentElement.clientHeight||document.body.clientHeight。
calculating a first proportion of a rolling distance d of the page A in the previous first preset time relative to the size of the user visual range window along the rolling direction; when the first ratio is an integer, the predetermined range is equal to a first predetermined integer multiple of the user viewable range window; when the first proportion is not an integer, the difference value between the minimum integer greater than the first proportion and the first proportion is a second proportion, and the preset range is equal to the user visual range window of which the second proportion is multiplied; and rendering the current user visual range window and page nodes in a preset range extending from the current user visual range window to the direction opposite to the scrolling direction. The following examples illustrate:
fig. 3B schematically illustrates a relationship diagram of a user viewable range and a predetermined range according to an embodiment of the disclosure.
As shown in fig. 3B, the user visual range of the page a at the time t1 is x1, the user visual range at the time t2 is x2 after the first preset time reaches the time t2, the page a can be seen to scroll upwards, the scroll distance of the page a in the time t2-t1 is d, the first proportion=d/x1=0.4 is set to x1=1, x2=1, d=0.4, the first proportion is not an integer, the smallest integer larger than the first proportion is 1, the second proportion=1-0.4=0.6, that is, the predetermined range y1 is equal to the user visual range of 0.6 times, the current user visual range x2 and the page in the user visual range of 0.6 times downwards from the user visual range x2 are rendered, and the predicted rendering range y2=x2+y1 corresponding to the time t2 is shown on the rightmost side.
The specific rendering process may be: nodes that need to be rendered, such as nodes in a page that need to be periodically rendered, that appear within the predicted rendering range y2 are calculated. Specifically, a list of all the nodes in page a that need to be re-rendered (whether or not the node appears in the predicted rendering range y2, this list will be referred to as list A1 hereinafter) may be obtained first. There are many ways to acquire a node: such as getElementById (), getElementsByName (), getElementsByTagName (), etc. Then traversing the list A1 to obtain nodes appearing in the predicted rendering range y2, and putting the nodes into a new list B1, wherein the nodes in the list B1 are the calculated nodes appearing in the predicted rendering range y2 and needing to be rendered. The list B2 is then traversed, re-rendering the nodes within the list B2.
In operation S305, a delay function is started, and when it is monitored that the page a is scrolled, it is determined whether the delay time corresponding to the delay function is over, if yes, operation S304 is executed, otherwise, operation S306 is executed.
In operation S306, the delay function is reset, and the operation returns to operation S305.
For operations S305 to S306, when d > distance, which indicates that the page scrolling speed is high, starting a delay function is called: a delay function F (the main function of this function is to prevent frequent calculation of page scroll distance, rendering of pages when the user toggles the mouse wheel quickly and continuously); if the page scroll occurs again in 300ms (or in a custom time frame), the delay function F is reset. When the waiting time exceeds the time set by the delay function, the page is rendered according to the above operation S304.
In operation S307, pages within the user' S visual range are rendered every predetermined time period.
For example, the present operation S307 may be implemented by the following procedure: a global timer is implanted in the page a, and the timing period of the global timer is the predetermined time period, and the global timer can be implanted by using a javascript method, and also uses a setTimeout or setInterval method, which is not limited herein. In a state where the page remains unswept, each time the global timer starts to re-time, the following steps are performed:
first, the user visibility window of page A is calculated, such as from the clientHeight attribute of page A:
var height＝
document.documentElement.clientHeight||document.body.clientHeight。
then, after calculating the user visual range window, the nodes needing to be rendered, such as the nodes needing to be periodically rendered in the page, appearing in the user visual range window are calculated. Specifically, a list of all the nodes in page a that need to be re-rendered (whether or not the node appears in the user's visual scope window, the list is included, hereinafter referred to as list A1) may be obtained. There are many ways to acquire a node: such as getElementById (), getElementsByName (), getElementsByTagName (), etc. Then traversing the list A1 to obtain nodes appearing in the visual range window of the user, and putting the nodes into a new list B2, wherein the nodes in the list B2 are the calculated nodes needing to be rendered in the visual range window of the user.
Next, list B2 is traversed, and nodes within list B2 are re-rendered.
And repeating the process according to the timing period of the global timer until the page A is monitored to scroll.
The embodiments of the present disclosure repeatedly execute the operations S301 to S307, and for a page containing a large number of periodic rendering tasks, the method may not only improve the performance of page execution, but also implement predictive rendering according to the user' S historical behavior. The method has the advantages that only the nodes needing to be re-rendered in the current visual range are rendered, the nodes outside the visual range do not contain the re-rendering range, and the number of rendering tasks needing to be executed at the same time is reduced; and the screen rolling speed is determined according to the page rolling distance, the access behavior of the user is recorded, the next page access direction of the user is predicted, the rendering in advance is realized, the probability of page screen flash is reduced, and the waiting time of the user is shortened.
Fig. 4 schematically shows a block diagram of a page rendering apparatus according to an embodiment of the present disclosure.
As shown in fig. 4, the page rendering apparatus 400 includes an acquisition module 410 and a processing module 420.
The obtaining module 410 is configured to obtain a scrolling speed and a scrolling direction of a page when the page scrolls;
The processing module 420 is configured to render a page within a user visible range and a page within a predetermined range extending from the user visible range to a direction opposite to the scrolling direction when the scrolling speed meets a preset condition.
In one embodiment of the present disclosure, the obtaining module 410 obtaining the scroll speed of the page includes: the obtaining module 410 is configured to obtain, at intervals of a first preset time, a rolling distance of the page in a previous first preset time, and determine that the rolling speed of the page meets a preset condition when the rolling distance is smaller than a preset threshold, or determine that the rolling speed of the page does not meet the preset condition otherwise.
In one embodiment of the present disclosure, the processing module 420 rendering a page within a user viewable range and a page within a predetermined range extending from the user viewable range to a direction opposite the scrolling direction includes: the processing module 420 is used for calculating the current user visual range; calculating a first proportion of a rolling distance of the page in a previous first preset time relative to the size of the user visual range along the rolling direction; when the first ratio is an integer, the predetermined range is equal to a first predetermined integer multiple of the user viewable range; when the first ratio is not an integer, the difference value between the minimum integer greater than the first ratio and the first ratio is a second ratio, and the preset range is equal to the user visible range of the second ratio times; rendering a page node within a predetermined range extending from the current user viewable range to a direction opposite to the scrolling direction.
Wherein, as an alternative embodiment, the processing module 420 renders the current user visual range and the page nodes within the predetermined range extending from the current user visual range to the direction opposite to the scrolling direction, including: the processing module 420 is configured to obtain a first list including nodes to be rendered in the entire page; traversing the first list, and placing nodes which fall within the current user visual range and a preset range extending from the current user visual range to the direction opposite to the scrolling direction into a second list; traversing the second list, and rendering the nodes in the second list.
Fig. 5 schematically illustrates a block diagram of a page rendering apparatus according to another embodiment of the present disclosure.
As shown in fig. 5, the page rendering apparatus 500 includes an acquisition module 410, a processing module 420, a first auxiliary processing module 430, and a second auxiliary processing module 440.
Wherein, the acquiring module 410 and the processing module 420 are described above, and repeated parts are not described again.
The first auxiliary processing module 430 is configured to start a delay function when the scrolling speed does not meet a preset condition; rendering a page within a user visual range and a page within a predetermined range extending from the user visual range to a direction opposite to the scrolling direction when a delay time of the delay function is ended; the delay time of the delay function is a second preset time, and when the page rolls in the second preset time, the delay function is reset.
In another embodiment of the present disclosure, the second auxiliary processing module 440 is configured to render the page in the user visible range every third preset time when the page is not scrolled.
Wherein optionally, the rendering the page in the visual range of the user by the second auxiliary processing module 440 at every third preset time includes: the second auxiliary processing module 440 is configured to implant a timer in the page, where a timing period of the timer is a third preset time; calculating the current user visual range when the timer starts to re-time; and rendering the page nodes in the current user visual range.
In other embodiments, the page rendering apparatus 500 shown in fig. 5 may be also configured by the acquisition module 410, the processing module 420, and the first auxiliary processing module 430, or the page rendering apparatus 500 may be configured by the acquisition module 410, the processing module 420, and the second auxiliary processing module 440.
It should be noted that, in the embodiment of the apparatus portion, the implementation manner, the solved technical problem, the realized function, and the achieved technical effect of each module/unit/subunit and the like are the same as or similar to the implementation manner, the solved technical problem, the realized function, and the achieved technical effect of each corresponding step in the embodiment of the method portion, and are not described herein again.
Any number of modules, sub-modules, units, sub-units, or at least some of the functionality of any number of the sub-units according to embodiments of the present disclosure may be implemented in one module. Any one or more of the modules, sub-modules, units, sub-units according to embodiments of the present disclosure may be implemented as split into multiple modules. Any one or more of the modules, sub-modules, units, sub-units according to embodiments of the present disclosure may be implemented at least in part as a hardware circuit, such as a Field Programmable Gate Array (FPGA), a Programmable Logic Array (PLA), a system-on-chip, a system-on-substrate, a system-on-package, an Application Specific Integrated Circuit (ASIC), or in any other reasonable manner of hardware or firmware that integrates or encapsulates the circuit, or in any one of or a suitable combination of three of software, hardware, and firmware. Alternatively, one or more of the modules, sub-modules, units, sub-units according to embodiments of the present disclosure may be at least partially implemented as computer program modules, which when executed, may perform the corresponding functions.
For example, any of the acquisition module 410, the processing module 420, the first auxiliary processing module 430, and the second auxiliary processing module 440 may be combined in one module to be implemented, or any of the modules may be split into a plurality of modules. Alternatively, at least some of the functionality of one or more of the modules may be combined with at least some of the functionality of other modules and implemented in one module. According to embodiments of the present disclosure, at least one of the acquisition module 410, the processing module 420, the first auxiliary processing module 430, and the second auxiliary processing module 440 may be implemented at least in part as hardware circuitry, such as a Field Programmable Gate Array (FPGA), a Programmable Logic Array (PLA), a system on a chip, a system on a substrate, a system on a package, an Application Specific Integrated Circuit (ASIC), or may be implemented in hardware or firmware in any other reasonable manner of integrating or packaging the circuitry, or in any one of or a suitable combination of three of software, hardware, and firmware. Alternatively, at least one of the acquisition module 410, the processing module 420, the first auxiliary processing module 430 and the second auxiliary processing module 440 may be at least partially implemented as computer program modules, which when executed, may perform the respective functions.
Fig. 6 schematically shows a block diagram of a computer device adapted to implement the above-described method according to an embodiment of the present disclosure. The computer device illustrated in fig. 6 is merely an example and should not be construed as limiting the functionality and scope of use of embodiments of the present disclosure.
As shown in fig. 6, a computer device 600 according to an embodiment of the present disclosure includes a processor 601 that can perform various appropriate actions and processes according to a program stored in a Read Only Memory (ROM) 602 or a program loaded from a storage section 608 into a Random Access Memory (RAM) 603. The processor 601 may include, for example, a general purpose microprocessor (e.g., a CPU), an instruction set processor and/or an associated chipset and/or a special purpose microprocessor (e.g., an Application Specific Integrated Circuit (ASIC)), or the like. Processor 601 may also include on-board memory for caching purposes. The processor 601 may comprise a single processing unit or a plurality of processing units for performing different actions of the method flows according to embodiments of the disclosure.
In the RAM 603, various programs and data required for the operation of the apparatus 600 are stored. The processor 601, the ROM 602, and the RAM 603 are connected to each other through a bus 604. The processor 601 performs various operations of the method flow according to the embodiments of the present disclosure by executing programs in the ROM 602 and/or the RAM 603. Note that the program may be stored in one or more memories other than the ROM 602 and the RAM 603. The processor 601 may also perform various operations of the method flow according to embodiments of the present disclosure by executing programs stored in the one or more memories.
According to an embodiment of the present disclosure, the device 600 may further include an input/output (I/O) interface 605, the input/output (I/O) interface 605 also being connected to the bus 604. The device 600 may also include one or more of the following components connected to the I/O interface 605: an input portion 606 including a keyboard, mouse, etc.; an output portion 607 including a Cathode Ray Tube (CRT), a Liquid Crystal Display (LCD), and the like, a speaker, and the like; a storage section 608 including a hard disk and the like; and a communication section 609 including a network interface card such as a LAN card, a modem, or the like. The communication section 609 performs communication processing via a network such as the internet. The drive 610 is also connected to the I/O interface 605 as needed. Removable media 611 such as a magnetic disk, an optical disk, a magneto-optical disk, a semiconductor memory, or the like is installed as needed on drive 610 so that a computer program read therefrom is installed as needed into storage section 608.
According to embodiments of the present disclosure, the method flow according to embodiments of the present disclosure may be implemented as a computer software program. For example, embodiments of the present disclosure include a computer program product comprising a computer program embodied on a computer readable storage medium, the computer program comprising program code for performing the method shown in the flowcharts. In such an embodiment, the computer program may be downloaded and installed from a network through the communication portion 609, and/or installed from the removable medium 611. The above-described functions defined in the system of the embodiments of the present disclosure are performed when the computer program is executed by the processor 601. The systems, devices, apparatus, modules, units, etc. described above may be implemented by computer program modules according to embodiments of the disclosure.
The present disclosure also provides a computer-readable storage medium that may be embodied in the apparatus/device/system described in the above embodiments; or may exist alone without being assembled into the apparatus/device/system. The computer-readable storage medium carries one or more programs which, when executed, implement methods in accordance with embodiments of the present disclosure.
According to embodiments of the present disclosure, the computer-readable storage medium may be a non-volatile computer-readable storage medium, which may include, for example, but is not limited to: a portable computer diskette, a hard disk, a Random Access Memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), a portable compact disc read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the foregoing. In the context of this disclosure, a computer-readable storage medium may be any tangible medium that can contain, or store a program for use by or in connection with an instruction execution system, apparatus, or device. For example, according to embodiments of the present disclosure, the computer-readable storage medium may include ROM 602 and/or RAM 603 and/or one or more memories other than ROM 602 and RAM 603 described above.
The flowcharts and block diagrams in the figures illustrate the architecture, functionality, and operation of possible implementations of systems, methods and computer program products according to various embodiments of the present disclosure. In this regard, each block in the flowchart or block diagrams may represent a module, segment, or portion of code, which comprises one or more executable instructions for implementing the specified logical function(s). It should also be noted that, in some alternative implementations, the functions noted in the block may occur out of the order noted in the figures. For example, two blocks shown in succession may, in fact, be executed substantially concurrently, or the blocks may sometimes be executed in the reverse order, depending upon the functionality involved. It will also be noted that each block of the block diagrams or flowchart illustration, and combinations of blocks in the block diagrams or flowchart illustration, can be implemented by special purpose hardware-based systems which perform the specified functions or acts, or combinations of special purpose hardware and computer instructions.
Those skilled in the art will appreciate that the features recited in the various embodiments of the disclosure and/or in the claims may be combined in various combinations and/or combinations, even if such combinations or combinations are not explicitly recited in the disclosure. In particular, the features recited in the various embodiments of the present disclosure and/or the claims may be variously combined and/or combined without departing from the spirit and teachings of the present disclosure. All such combinations and/or combinations fall within the scope of the present disclosure.
The embodiments of the present disclosure are described above. However, these examples are for illustrative purposes only and are not intended to limit the scope of the present disclosure. Although the embodiments are described above separately, this does not mean that the measures in the embodiments cannot be used advantageously in combination. The scope of the disclosure is defined by the appended claims and equivalents thereof. Various alternatives and modifications can be made by those skilled in the art without departing from the scope of the disclosure, and such alternatives and modifications are intended to fall within the scope of the disclosure.
Claims (12)
1. A method of page rendering, comprising:
when a page is scrolled, acquiring the scroll speed and the scroll direction of the page;
when the scrolling speed meets a preset condition, rendering a page in a user visual range and a page in a preset range extending from the user visual range to a direction opposite to the scrolling direction;
wherein the rendering of the page within the user viewable range and the page within the predetermined range extending from the user viewable range to the direction opposite to the scrolling direction includes:
calculating the current user visual range;
calculating a first proportion of a rolling distance of the page in a previous first preset time relative to the size of the user visual range along the rolling direction;
When the first ratio is an integer, the predetermined range is equal to a first predetermined integer multiple of the user viewable range;
when the first ratio is not an integer, the difference value between the minimum integer greater than the first ratio and the first ratio is a second ratio, and the preset range is equal to the user visible range of the second ratio times;
rendering a page node within a predetermined range extending from the current user visual range to a direction opposite to the scrolling direction;
wherein rendering the current user viewable area and page nodes within a predetermined range extending from the current user viewable area in a direction opposite to the scrolling direction comprises:
acquiring a first list comprising nodes needing rendering in the whole page;
traversing the first list, and placing nodes which fall within the current user visual range and a preset range extending from the current user visual range to the direction opposite to the scrolling direction into a second list;
traversing the second list, and rendering the nodes in the second list.
2. The method of claim 1, wherein the obtaining the scroll speed of the page comprises:
And acquiring the rolling distance of the page in the previous first preset time at intervals of the first preset time, and determining that the rolling speed of the page meets preset conditions when the rolling distance is smaller than a preset threshold value, otherwise determining that the rolling speed of the page does not meet the preset conditions.
3. The method of claim 1, further comprising:
when the rolling speed does not accord with a preset condition, starting a delay function;
rendering a page within a user visual range and a page within a predetermined range extending from the user visual range to a direction opposite to the scrolling direction when a delay time of the delay function is ended;
the delay time of the delay function is a second preset time, and when the page rolls in the second preset time, the delay function is reset.
4. The method of claim 1, further comprising:
and when the page is not scrolled, rendering the page in the visual range of the user every third preset time.
5. The method of claim 4, wherein the rendering the page in the user-viewable area every third preset time comprises:
implanting a timer in a page, wherein the timing period of the timer is a third preset time;
Calculating the current user visual range when the timer starts to re-time;
and rendering the page nodes in the current user visual range.
6. A page rendering apparatus comprising:
the acquisition module is used for acquiring the rolling speed and the rolling direction of the page when the page is rolled;
the processing module is used for rendering the page in the user visual range and the page in the preset range extending from the user visual range to the direction opposite to the scrolling direction when the scrolling speed accords with the preset condition;
wherein the processing module rendering the page within the user viewable range and the page within the predetermined range extending from the user viewable range to a direction opposite the scrolling direction comprises:
the processing module is used for calculating the current user visual range; calculating a first proportion of a rolling distance of the page in a previous first preset time relative to the size of the user visual range along the rolling direction; when the first ratio is an integer, the predetermined range is equal to a first predetermined integer multiple of the user viewable range; when the first ratio is not an integer, the difference value between the minimum integer greater than the first ratio and the first ratio is a second ratio, and the preset range is equal to the user visible range of the second ratio times; rendering a page node within a predetermined range extending from the current user visual range to a direction opposite to the scrolling direction;
The processing module rendering the current user viewable range and page nodes within a predetermined range extending from the current user viewable range to a direction opposite the scrolling direction includes:
the processing module is used for acquiring a first list comprising nodes needing rendering in the whole page; traversing the first list, and placing nodes which fall within the current user visual range and a preset range extending from the current user visual range to the direction opposite to the scrolling direction into a second list; traversing the second list, and rendering the nodes in the second list.
7. The apparatus of claim 6, wherein the means for obtaining the scroll speed of the page comprises:
the acquisition module is used for acquiring the rolling distance of the page in the previous first preset time at intervals of the first preset time, and determining that the rolling speed of the page meets preset conditions when the rolling distance is smaller than a preset threshold value, otherwise determining that the rolling speed of the page does not meet the preset conditions.
8. The apparatus of claim 6, further comprising:
the first auxiliary processing module is used for starting a delay function when the rolling speed does not accord with a preset condition; rendering a page within a user visual range and a page within a predetermined range extending from the user visual range to a direction opposite to the scrolling direction when a delay time of the delay function is ended; the delay time of the delay function is a second preset time, and when the page rolls in the second preset time, the delay function is reset.
9. The apparatus of claim 6, further comprising:
and the second auxiliary processing module is used for rendering the page in the visual range of the user at intervals of a third preset time when the page is not scrolled.
10. The apparatus of claim 9, wherein the second auxiliary processing module rendering the page within the user's visual range every third preset time comprises:
the second auxiliary processing module is used for implanting a timer into the page, and the timing period of the timer is a third preset time; calculating the current user visual range when the timer starts to re-time; and rendering the page nodes in the current user visual range.
11. A computer device comprising a memory, a processor and a computer program stored on the memory and executable on the processor, the processor implementing the page rendering method of any one of claims 1 to 5 when the program is executed.
12. A computer readable storage medium having stored thereon executable instructions which when executed by a processor cause the processor to perform the page rendering method of any of claims 1 to 5.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201910026155.5A CN111427637B (en) | 2019-01-10 | 2019-01-10 | Page rendering method and device |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201910026155.5A CN111427637B (en) | 2019-01-10 | 2019-01-10 | Page rendering method and device |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN111427637A CN111427637A (en) | 2020-07-17 |
| CN111427637B true CN111427637B (en) | 2023-09-22 |
Family
ID=71545761
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201910026155.5A Active CN111427637B (en) | 2019-01-10 | 2019-01-10 | Page rendering method and device |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN111427637B (en) |
Families Citing this family (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113010824A (en) * | 2021-03-05 | 2021-06-22 | 北京明略软件系统有限公司 | Method and system for realizing unlimited scrolling of long list of web pages |
| CN113467871A (en) * | 2021-06-28 | 2021-10-01 | 康键信息技术（深圳）有限公司 | H5 page display method, device, equipment and storage medium |
| CN114510190B (en) * | 2022-04-18 | 2022-07-29 | 苏州万店掌网络科技有限公司 | Front-end page rendering method, device, equipment and storage medium |
Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN104281677A (en) * | 2014-09-29 | 2015-01-14 | 百度在线网络技术（北京）有限公司 | Page displaying method and device |
| CN105160020A (en) * | 2015-09-29 | 2015-12-16 | 北京京东尚科信息技术有限公司 | Webpage rendering method |
| CN106547454A (en) * | 2015-09-16 | 2017-03-29 | 阿里巴巴集团控股有限公司 | Display packing and device |
| WO2017113711A1 (en) * | 2015-12-31 | 2017-07-06 | 乐视控股（北京）有限公司 | Page browsing method and device |
Family Cites Families (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US9367641B2 (en) * | 2012-12-27 | 2016-06-14 | Qualcomm Innovation Center, Inc. | Predictive web page rendering using a scroll vector |
-
2019
- 2019-01-10 CN CN201910026155.5A patent/CN111427637B/en active Active
Patent Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN104281677A (en) * | 2014-09-29 | 2015-01-14 | 百度在线网络技术（北京）有限公司 | Page displaying method and device |
| CN106547454A (en) * | 2015-09-16 | 2017-03-29 | 阿里巴巴集团控股有限公司 | Display packing and device |
| CN105160020A (en) * | 2015-09-29 | 2015-12-16 | 北京京东尚科信息技术有限公司 | Webpage rendering method |
| WO2017113711A1 (en) * | 2015-12-31 | 2017-07-06 | 乐视控股（北京）有限公司 | Page browsing method and device |
Also Published As
| Publication number | Publication date |
|---|---|
| CN111427637A (en) | 2020-07-17 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| KR102278657B1 (en) | Automatically determining a size for a content item for a web page | |
| AU2011101579A4 (en) | Selective rendering of off-screen content | |
| CN103853417B (en) | The rolling Pagination Display method and apparatus of network dynamic picture | |
| CN111427637B (en) | Page rendering method and device | |
| US20130111368A1 (en) | Creating and maintaining images of browsed documents | |
| CN104834637B (en) | Webpage picture display method and device | |
| CN107656911B (en) | Form processing method and system | |
| US20090085921A1 (en) | Populate Web-Based Content Based on Space Availability | |
| WO2016107325A1 (en) | Page resource loading method and device based on mobile terminal | |
| CN111258736B (en) | Information processing method and device and electronic equipment | |
| CN108062336B (en) | Media information processing method and device | |
| CN113505302A (en) | Method, device and system for supporting dynamic acquisition of buried point data and electronic equipment | |
| CN115357834A (en) | Page jump method, device, equipment and storage medium | |
| CN113393294A (en) | Page display method and device, equipment and storage medium | |
| US9612734B1 (en) | Random access browser scrolling for large pages | |
| CN112965916B (en) | Page testing method, page testing device, electronic equipment and readable storage medium | |
| CN113032073A (en) | Page display method and device based on operation behaviors | |
| CN111259291B (en) | View display method and device and electronic equipment | |
| CN110457632B (en) | Webpage loading processing method and device | |
| US20170269893A1 (en) | Remote rendering of locally displayed content | |
| CN110888583B (en) | Page display method, system and device and electronic equipment | |
| CN115775290A (en) | Animation frame rate processing method, device, equipment and storage medium | |
| CN113688336A (en) | Page data loading method and loading device | |
| CN114510309B (en) | Animation effect setting method, device, equipment and medium | |
| CN113449230A (en) | Method and system for determining exposure element, client and server |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |