CN110110260B - Page rendering method and device and electronic equipment - Google Patents
Page rendering method and device and electronic equipment Download PDFInfo
- Publication number
- CN110110260B CN110110260B CN201910295316.0A CN201910295316A CN110110260B CN 110110260 B CN110110260 B CN 110110260B CN 201910295316 A CN201910295316 A CN 201910295316A CN 110110260 B CN110110260 B CN 110110260B
- Authority
- CN
- China
- Prior art keywords
- page
- rendering
- rendered
- webpage
- mark
- 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
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/957—Browsing optimisation, e.g. caching or content distillation
- G06F16/9574—Browsing optimisation, e.g. caching or content distillation of access to content, e.g. by caching
-
- 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)
- Theoretical Computer Science (AREA)
- Software Systems (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Databases & Information Systems (AREA)
- Human Computer Interaction (AREA)
- Data Mining & Analysis (AREA)
- Information Transfer Between Computers (AREA)
Abstract
The embodiment of the invention provides a page rendering method, a page rendering device and electronic equipment, relates to the technical field of data processing, and can maintain the stability of webpage display performance when a pull-down method is applied, wherein the embodiment of the application comprises the following steps: determining a current display page in a webpage loaded by a terminal, and then acquiring a page to be rendered, wherein the page to be rendered is the current display page or a preset number of pages adjacent to the current display page. And rendering the page to be rendered, and stopping rendering other display pages except the page to be rendered in the webpage.
Description
Technical Field
The present invention relates to the field of data processing technologies, and in particular, to a page rendering method and apparatus, and an electronic device.
Background
Currently, many web pages load page content by using a pull-down page mode. For example: in the microblog webpage, the user can acquire new content by pulling down the webpage.
However, in the prior art, when a terminal loads a web page, a current display page in the web page and a Document Object Model (DOM) element corresponding to each page before the current display page are rendered. With the increase of the loaded content, the number of pages in the web page increases, so that the number of rendered DOM elements also increases, which results in more and more occupied memory resources and Central Processing Unit (CPU) resources, which easily causes the phenomenon of page collapse or jamming, and affects the display performance of the web page.
Disclosure of Invention
The embodiment of the invention aims to provide a page rendering method, a page rendering device and electronic equipment, so as to maintain the stability of the webpage display performance when a pull-down method is applied. The specific technical scheme is as follows:
in a first aspect, a page rendering method is provided, which is applied to a terminal, and the method includes:
determining a current display page in the webpage loaded by the terminal;
acquiring a page to be rendered, wherein the page to be rendered is the current display page or a preset number of pages adjacent to the current display page;
and rendering the page to be rendered, and stopping rendering other display pages except the page to be rendered in the webpage.
Optionally, the obtaining the page to be rendered includes:
updating rendering marks corresponding to pages to be rendered in a preset array into first marks, and updating rendering marks of other pages except the pages to be rendered in the preset array into second marks, wherein the first marks are used for representing that the pages are to be rendered, and the second marks are used for representing that the pages are not to be rendered.
Optionally, the rendering the page to be rendered includes:
traversing each rendering mark in the preset array, and determining the rendering mark as a page of the first mark;
generating a Document Object Model (DOM) element corresponding to the page to be rendered according to the page parameter corresponding to the page with the rendering mark as the first mark;
and rendering the page to be rendered according to the DOM element corresponding to the page to be rendered.
Optionally, the determining a current display page in the webpage loaded by the terminal includes:
acquiring a first distance between the upper edge of a currently displayed webpage in a webpage loaded by the terminal and the upper edge of a first page of the webpage;
determining a page scrolling direction of the webpage;
and determining a current display page in the webpage loaded by the terminal according to the distance between the upper edge of each page of the webpage and the upper edge of the first page of the webpage, the height of each page of the webpage, the first distance and the page rolling direction.
Optionally, the method further includes:
traversing each rendering mark in the preset array, and determining the rendering mark as a page of the second mark;
and respectively generating a Document Object Model (DOM) element for each page with the rendering mark as the second mark according to the height corresponding to the page with the rendering mark as the second mark, wherein the DOM element corresponding to the page with the rendering mark as the second mark comprises the page height, and the rendering mark is that other page parameters except the page height in the DOM element corresponding to the page with the rendering mark as the second mark are empty.
In a second aspect, a page rendering apparatus is provided, which is applied to a terminal, and the apparatus includes:
the determining module is used for determining a current display page in the webpage loaded by the terminal;
an obtaining module, configured to obtain a page to be rendered, where the page to be rendered is the current display page determined by the determining module or a preset number of pages adjacent to the current display page;
and the rendering module is used for rendering the page to be rendered acquired by the acquisition module and stopping rendering other display pages except the page to be rendered in the webpage.
Optionally, the obtaining module is specifically configured to:
updating rendering marks corresponding to pages to be rendered in a preset array into first marks, and updating rendering marks of other pages except the pages to be rendered in the preset array into second marks; the first mark is used for representing that the page is to be rendered, and the second mark is used for representing that the page is not rendered.
Optionally, the rendering module is specifically configured to:
traversing each rendering mark in the preset array, and determining the rendering mark as a page of the first mark;
generating a Document Object Model (DOM) element corresponding to the page to be rendered according to the page parameter corresponding to the page with the rendering mark as the first mark;
and rendering the page to be rendered according to the DOM element corresponding to the page to be rendered.
Optionally, the determining module is specifically configured to:
acquiring a first distance between the upper edge of a currently displayed webpage in a webpage loaded by the terminal and the upper edge of a first page of the webpage;
determining a page scrolling direction of the webpage;
and determining a current display page in the webpage loaded by the terminal according to the distance between the upper edge of each page of the webpage and the upper edge of the first page of the webpage, the height of each page of the webpage, the first distance and the page rolling direction.
Optionally, the apparatus further comprises: a generation module;
the determining module is further configured to traverse each rendering flag in the preset array, and determine that the rendering flag is a page of the second flag;
the generating module is used for respectively generating a Document Object Model (DOM) element for the page of the second mark according to the height corresponding to the page of the second mark determined by the determining module as the rendering mark, wherein the DOM element corresponding to the page of the second mark comprises the page height, and other page parameters except the page height in the DOM element corresponding to the page of the second mark are empty.
In a third aspect, an electronic device is provided, which includes a processor, a communication interface, a memory and a communication bus, wherein the processor, the communication interface and the memory complete communication with each other through the communication bus;
a memory for storing a computer program;
and the processor is used for realizing any page rendering method step when executing the program stored in the memory.
In a fourth aspect, an embodiment of the present invention further provides a computer-readable storage medium, where a computer program is stored in the computer-readable storage medium, and when the computer program is executed by a processor, the computer program implements any of the above-mentioned page rendering method steps.
In a fifth aspect, embodiments of the present invention further provide a computer program product including instructions, which when run on a computer, cause the computer to perform any of the steps of the page rendering method described above.
The page rendering method, the page rendering device and the electronic equipment provided by the embodiment of the invention can determine the current display page in the webpage loaded by the terminal, then acquire the page to be rendered, and then render the page to be rendered. In the embodiment of the invention, only the page to be rendered is rendered, and the page to be rendered is the current display page in the webpage loaded by the terminal or the preset number of pages adjacent to the current display page, namely, only the current display page in the webpage or the preset number of pages adjacent to the current display page are rendered, and the rest pages in the webpage are not rendered. Compared with the current display page in the rendered webpage and each page before the current display page, when the terminal of the embodiment of the invention is applied to render the webpage, the rendered pages are reduced, the computed DOM elements are reduced, and the memory resources and the CPU resources occupied by the rendered webpage are reduced, so that the stability of the webpage display performance when the pull-down method is applied can be maintained.
Of course, not all of the advantages described above need to be achieved at the same time in the practice of any one product or method of the invention.
Drawings
In order to more clearly illustrate the embodiments of the present invention or the technical solutions in the prior art, the drawings used in the description of the embodiments or the prior art will be briefly described below.
Fig. 1 is a flowchart of a page rendering method according to an embodiment of the present invention;
FIG. 2 is an exemplary diagram of a web page provided by an embodiment of the present invention;
FIG. 3 is a flowchart of another page rendering method according to an embodiment of the present invention;
FIG. 4 is a graph illustrating how the CPU occupancy rate varies with the number of pages in a web page according to a pull-down method applied in the prior art according to an embodiment of the present invention;
fig. 5 is a graph illustrating that the CPU occupancy rate varies with the number of pages in a web page by applying a pull-down method according to an embodiment of the present invention;
fig. 6 is a graph illustrating that a page frame rate of a web page applying a pull-down method in the prior art changes with the number of pages in the web page according to an embodiment of the present invention;
fig. 7 is a graph illustrating that a page frame rate of a web page to which a pull-down method is applied varies with the number of pages in the web page according to an embodiment of the present invention;
fig. 8 is a schematic structural diagram of a page rendering apparatus according to an embodiment of the present invention;
fig. 9 is a schematic structural diagram of an electronic device according to an embodiment of the present invention.
Detailed Description
The technical solutions in the embodiments of the present invention will be described below with reference to the drawings in the embodiments of the present invention.
Referring to fig. 1, fig. 1 is a flowchart of a page rendering method provided by an embodiment of the present invention, and is applied to a terminal. The terminal in the embodiment of the invention can be an electronic device such as a mobile phone, a tablet computer or a computer. The method comprises the following steps:
In one embodiment, if the terminal renders the webpage for the first time, it is determined that the currently displayed page is page 1.
In another embodiment, if the terminal does not render the webpage for the first time, the method for determining the currently displayed page may include the following three steps:
the method comprises the following steps: the method comprises the steps of obtaining a first distance between the upper edge of a currently displayed webpage and the upper edge of a first webpage in the webpage loaded by a terminal.
The currently displayed webpage is a part of currently displayed webpage of the webpage loaded by the terminal in a display screen of the terminal.
For example, if the inside of the bold frame in fig. 2 represents the currently displayed web page, the first distance between the upper edge of the currently displayed web page and the upper edge of the first page of the web page is 1200.
Step two: the page scrolling direction of the web page is determined.
Optionally, a difference b-a between a first distance b between the upper edge of the currently displayed webpage and the upper edge of the first page of the webpage, which is determined during the rendering at this time, and a first distance a between the upper edge of the currently displayed webpage and the upper edge of the first page of the webpage, which is determined during the rendering at the last time, may be calculated. If b-a is greater than 0, determining that the page scrolling direction is downward; and if b-a <0, determining that the page scrolling direction is upward.
For example, assuming that the first distance determined in the previous rendering is 800, the first distance determined in the current rendering is 1200, and 1200-.
Step three: and determining the current display page in the webpage loaded by the terminal according to the distance between the upper edge of each page of the webpage and the upper edge of the first page of the webpage, the height of each page of the webpage, the first distance and the page rolling direction.
Optionally, the distance between the upper edge of each page of the web page and the upper edge of the first page of the web page may be obtained, or the distance between the upper edge of each page of the web page and the upper edge of the first page of the web page may be determined according to the sequence number of each page of the web page and the height of each page. The height of the page can be obtained after the page is rendered.
Illustratively, the web page shown in fig. 2 includes 3 pages, and the height of each page is 1000, so that the distance between the upper edge of page 1 and the upper edge of the first page of the web page is 0, the distance between the upper edge of page 2 and the upper edge of the first page of the web page is 1000, and the distance between the upper edge of page 3 and the upper edge of the first page of the web page is 2000. Since the height of each of the 3 pages is 1000, the distance between the lower edge of the page 1 and the upper edge of the first page of the web page is 1000; the distance between the lower edge of page 2 and the upper edge of the first page of the web page is 2000; the distance between the lower edge of page 3 and the first upper page edge of the web page is 3000.
Assuming that the currently displayed page determined in the previous rendering is the page 2, and the page scrolling direction is downward, sequentially judging whether the first distance of the current rendering is between the upper edge and the lower edge of the page from the page 2. Since the distance 1000 between the upper edge of page 2 and the first page upper edge of the web page < first distance 1200< distance 2000 between the lower edge of page 2 and the first page upper edge of the web page. The currently displayed page is determined to be page 2.
It can be understood that, if the page scrolling direction is not determined, it needs to sequentially determine, from page 1 of the web page, whether the rendered first distance is between the upper edge and the lower edge of the page, although this way may also determine the currently displayed page, in the case of many pages in the web page, this way has a large calculation amount, which results in a slow speed for determining the currently displayed page. In the embodiment of the present invention, by obtaining the current display page determined by the previous rendering and the page scrolling direction, it may be sequentially determined whether the first distance of the current rendering is between the upper edge and the lower edge of the page, starting from the current display page determined by the previous rendering. Therefore, the embodiment of the invention reduces the calculation amount for determining the currently displayed webpage and improves the speed for determining the currently displayed webpage, thereby improving the speed of the page rendering method.
And 102, acquiring a page to be rendered.
The page to be rendered is a current display page or a preset number of pages adjacent to the current display page.
In one embodiment, the current display page may be determined to be a page to be rendered.
In another embodiment, the currently displayed page, a first preset number of pages before the currently displayed page, and a second preset number of pages after the currently displayed page may be determined as the pages to be rendered. For example: and determining the current display page, the previous page of the current display page and the next page of the current display page as the page to be rendered.
It can be understood that, in the case of rendering only the currently displayed page, if the page scrolling speed when the user browses the web page is high, the situation that the page has no content or is stuck due to untimely rendering of the web page may occur. Therefore, in the embodiment of the invention, the current display page and the preset number of pages adjacent to the current display page are rendered, so that the situation that the page has no content or is blocked due to untimely webpage rendering can be reduced.
In the embodiment of the invention, the rendering mark corresponding to the page to be rendered in the preset array can be updated to the first mark, and the rendering marks of other pages except the page to be rendered in the preset array are updated to the second mark. The first mark is used for representing that the page is to be rendered, and the second mark is used for representing that the page is not rendered.
For example, the preset array is X ═ 1, 1, 1, 0, and the pages to be rendered are page 2, page 3, and page 4, and the preset array is updated to X ═ 0, 1, 1, 1, 0. Wherein the first flag is 1 and the second flag is 0.
For another example, if the preset array is Boolean array B ═ { true, false, false }, and the page to be rendered is page 2, the preset array is updated to B ═ { false, true, false }. Wherein the first flag is true and the second flag is false.
And 103, rendering the page to be rendered, and stopping rendering other display pages except the page to be rendered in the webpage.
In one embodiment, the page to be rendered may be rendered, and other display pages in the web page except the page to be rendered are not rendered.
The page rendering method provided by the embodiment of the invention can determine the current display page in the webpage loaded by the terminal, then acquire the page to be rendered, and then render the page to be rendered. In the embodiment of the invention, only the page to be rendered is rendered, and the page to be rendered is the current display page in the webpage loaded by the terminal or the preset number of pages adjacent to the current display page, namely, only the current display page in the webpage or the preset number of pages adjacent to the current display page are rendered, and the rest pages in the webpage are not rendered. Compared with the current display page in the rendered webpage and each page before the current display page, when the terminal of the embodiment of the invention is applied to render the webpage, the rendered pages are reduced, the elements of the computed Document Object Model (DOM) are reduced, and the memory resources and the CPU (Central Processing Unit) resources occupied by the rendered webpage are reduced, so that the stability of the webpage display performance when the pull-down method is applied can be maintained.
Optionally, because the calculation amount of each rendering is large, if the number of times of rendering the web page is too frequent, the phenomenon of page collapse or blocking is easily caused, and the display performance of the web page is affected. Therefore, in the embodiment of the present invention, a timed call method (e.g., setTimeout or setInterval) may be used to determine the callback 5-10 times per second, i.e., execute steps 101-103 5-10 times per second. The embodiment of the invention reduces the page callback frequency, so that the calculation amount of page rendering in each second is reduced, and the embodiment of the invention ensures the stability of the display performance of the webpage.
Alternatively, as shown in fig. 3, the step 103 may include the following four steps. Wherein, step 302 may be executed first and then step 303 is executed, or step 303 may be executed first and then step 302 is executed, and the execution order of these two steps is not specifically limited in the present invention.
In one embodiment, the DOM element corresponding to the page may be generated according to page parameters (e.g., a publisher avatar, a publisher name, a body, etc.) of the page obtained from a server of the web page.
For example, if the rendering flag of the page 10 is the first flag, the generated DOM element corresponding to the page 10 includes the first DOM element: and < div id ═ mp-fdpage-10 "style >, which indicates that the page is identified as the tenth page. The first DOM element comprises a plurality of second DOM elements, and each second DOM element corresponds to each page parameter corresponding to the page.
Wherein, the DOM element corresponding to the page with the rendering mark as the second mark comprises: the height of the page; and other page parameters except the page height in the DOM element corresponding to the page with the rendering mark as the second mark are empty.
In one embodiment, if the rendering mark corresponding to the page is the second mark, a DOM element corresponding to the page is generated according to the identifier of the page and the height of the page.
For example, if the rendering flag of the page 1 is the second flag, the generated DOM element corresponding to the page 1 is: < div id ═ mp-fdtage-1 "style ═ height; 4137px "> … </div >, indicating that the height of page 1 is 4137 pixels.
In the embodiment of the invention, a DOM element comprising the page height is generated for the page which is not rendered in the webpage, so that the problem of scroll bar jumping caused by the collapse of the whole height of the webpage can be avoided.
And step 304, rendering the page to be rendered according to the DOM element corresponding to the page to be rendered.
In the embodiment of the invention, the page to be rendered is rendered according to the DOM element corresponding to the page to be rendered; and for the page which is not rendered in the webpage, generating a page which has no content and has the same height as the page which is not rendered according to the DOM element corresponding to the page which is not rendered in the webpage. It can be appreciated that not rendering the DOM corresponding to the page serves to ensure the integrity of the web page.
Illustratively, page 1 and page 2 were rendered if rendered at a previous time. When the rendering is performed at this time, if the pages to be rendered are determined to be page 2, page 3 and page 4, deleting each DOM element corresponding to page 1, and regenerating one DOM element corresponding to page 1 and including the page height of page 1; the DOM element corresponding to page 2 remains unchanged; DOM elements including page parameters are generated for page 3 and page 4, respectively.
According to the page rendering method provided by the embodiment of the invention, when the terminal renders the webpage, the computed DOM elements are reduced, so that the CPU resource occupied by rendering the webpage is reduced. Fig. 4 is a curve of the CPU occupancy rate varying with the number of pages in a web page in the prior art by applying the pull-down method. Fig. 5 is a curve of the CPU occupancy rate varying with the number of pages in a web page by applying the pull-down method in the embodiment of the present invention. In fig. 4 and 5, the horizontal axis represents the number of pages in a web page, and the vertical axis represents the CPU occupancy. Therefore, in the prior art, the CPU occupancy rate is increased along with the increase of the number of pages in the webpage, but the CPU occupancy rate in the embodiment of the invention is always kept stable. When the number of pages in the webpage is large, the CPU occupancy rate in the embodiment of the invention is smaller than that in the prior art. Therefore, the CPU can be kept stable by applying the embodiment of the invention.
Fig. 6 is a curve of the variation of the page frame rate of a web page with the number of pages in the web page by applying the pull-down method in the prior art. Fig. 7 is a curve of the change of the page frame rate of the web page by applying the pull-down method according to the number of pages in the web page in the embodiment of the present invention. In fig. 6 and 7, the horizontal axis represents the number of pages in a web page, and the vertical axis represents the page frame rate of the web page. Therefore, in the prior art, the page frame rate of the web page is reduced as the number of the web pages in the web page is increased, and the page frame rate of the web page in the embodiment of the invention is always kept stable. When the number of pages in the web page is increased, the page frame rate of the web page in the embodiment of the invention is more stable than that of the web page in the prior art. Therefore, the embodiment of the invention can also maintain the stability of the webpage frame rate when the pull-down method is applied.
In addition, because the embodiment of the invention can reduce the memory resources and CPU resources occupied by rendering the webpage, the embodiment of the invention can also improve the fluency of webpage display when the pull-down method is applied.
Corresponding to the above method embodiment, as shown in fig. 8, an embodiment of the present invention further provides a page rendering apparatus applied to a terminal, where the apparatus includes: a determination module 801, an acquisition module 802, and a rendering module 803.
A determining module 801, configured to determine a current display page in a webpage loaded by a terminal;
an obtaining module 802, configured to obtain a page to be rendered, where the page to be rendered is a current display page determined by the determining module 801 or a preset number of pages where the current display page is adjacent to the current display page;
and a rendering module 803, configured to render the page to be rendered acquired by the acquisition module 802, and stop rendering other display pages in the webpage except the page to be rendered.
Optionally, the obtaining module 802 may be specifically configured to:
updating rendering marks corresponding to pages to be rendered in the preset array into first marks, and updating rendering marks of other pages except the pages to be rendered in the preset array into second marks; the first mark is used for representing that the page is to be rendered, and the second mark is used for representing that the page is not rendered.
Optionally, the rendering module 803 may be specifically configured to:
traversing each rendering mark in the preset array, and determining the rendering mark as a page of the first mark;
generating a Document Object Model (DOM) element corresponding to the page to be rendered according to the page parameter corresponding to the page with the rendering mark as the first mark;
and rendering the page to be rendered according to the DOM element corresponding to the page to be rendered.
Optionally, the determining module 801 may be specifically configured to:
acquiring a first distance between the upper edge of a currently displayed webpage in a webpage loaded by a terminal and the upper edge of a first webpage of the webpage;
determining the page scrolling direction of the webpage;
and determining the current display page in the webpage loaded by the terminal according to the distance between the upper edge of each page of the webpage and the upper edge of the first page of the webpage, the height of each page of the webpage, the first distance and the page rolling direction.
Optionally, the apparatus may further include: a generation module;
the determining module 801 may further be configured to traverse each rendering flag in the preset array, and determine that the rendering flag is a page of the second flag;
and the generating module is used for respectively generating a Document Object Model (DOM) element for each page with the rendering mark as the second mark according to the height corresponding to the page with the rendering mark as the second mark determined by the determining module, wherein the DOM element corresponding to the page with the rendering mark as the second mark comprises the page height, and other page parameters except the page height in the DOM element corresponding to the page with the rendering mark as the second mark are empty.
The page rendering device provided by the embodiment of the invention can determine the current display page in the webpage loaded by the terminal, then acquire the page to be rendered, and then render the page to be rendered. In the embodiment of the invention, only the page to be rendered is rendered, and the page to be rendered is the current display page in the webpage loaded by the terminal or the preset number of pages adjacent to the current display page, namely, only the current display page in the webpage or the preset number of pages adjacent to the current display page are rendered, and the rest pages in the webpage are not rendered. Compared with the current display page in the rendered webpage and each page before the current display page, when the terminal of the embodiment of the invention is applied to render the webpage, the rendered pages are reduced, the computed DOM elements are reduced, and the memory resources and the CPU resources occupied by the rendered webpage are reduced, so that the stability of the webpage display performance when the pull-down method is applied can be maintained.
An embodiment of the present invention further provides an electronic device, as shown in fig. 9, which includes a processor 901, a communication interface 902, a memory 903, and a communication bus 904, where the processor 901, the communication interface 902, and the memory 903 complete mutual communication through the communication bus 904,
a memory 903 for storing computer programs;
the processor 901 is configured to implement the steps executed by the terminal in the above method embodiments when executing the program stored in the memory 903.
The communication bus mentioned in the electronic device may be a Peripheral Component Interconnect (PCI) bus, an Extended Industry Standard Architecture (EISA) bus, or the like. The communication bus may be divided into an address bus, a data bus, a control bus, etc. For ease of illustration, only one thick line is shown, but this does not mean that there is only one bus or one type of bus.
The communication interface is used for communication between the electronic equipment and other equipment.
The Memory may include a Random Access Memory (RAM) or a Non-Volatile Memory (NVM), such as at least one disk Memory. Optionally, the memory may also be at least one memory device located remotely from the processor.
The Processor may be a general-purpose Processor, including a Central Processing Unit (CPU), a Network Processor (NP), and the like; but also Digital Signal Processors (DSPs), Application Specific Integrated Circuits (ASICs), Field Programmable Gate Arrays (FPGAs) or other Programmable logic devices, discrete Gate or transistor logic devices, discrete hardware components.
In another embodiment provided by the present invention, a computer-readable storage medium is further provided, in which a computer program is stored, and the computer program, when executed by a processor, implements the steps of any of the above page rendering methods.
In yet another embodiment, a computer program product containing instructions is also provided, which when run on a computer, causes the computer to perform any of the page rendering methods of the above embodiments.
In the above embodiments, the implementation may be wholly or partially realized by software, hardware, firmware, or any combination thereof. When implemented in software, may be implemented in whole or in part in the form of a computer program product. The computer program product includes one or more computer instructions. When loaded and executed on a computer, cause the processes or functions described in accordance with the embodiments of the invention to occur, in whole or in part. The computer may be a general purpose computer, a special purpose computer, a network of computers, or other programmable device. The computer instructions may be stored in a computer readable storage medium or transmitted from one computer readable storage medium to another, for example, from one website site, computer, server, or data center to another website site, computer, server, or data center via wired (e.g., coaxial cable, fiber optic, Digital Subscriber Line (DSL)) or wireless (e.g., infrared, wireless, microwave, etc.). The computer-readable storage medium can be any available medium that can be accessed by a computer or a data storage device, such as a server, a data center, etc., that incorporates one or more of the available media. The usable medium may be a magnetic medium (e.g., floppy Disk, hard Disk, magnetic tape), an optical medium (e.g., DVD), or a semiconductor medium (e.g., Solid State Disk (SSD)), among others.
It is noted that, herein, relational terms such as first and second, and the like may be used solely to distinguish one entity or action from another entity or action without necessarily requiring or implying any actual such relationship or order between such entities or actions. Also, the terms "comprises," "comprising," or any other variation thereof, are intended to cover a non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements does not include only those elements but may include other elements not expressly listed or inherent to such process, method, article, or apparatus. Without further limitation, an element defined by the phrase "comprising an … …" does not exclude the presence of other identical elements in a process, method, article, or apparatus that comprises the element.
All the embodiments in the present specification are described in a related manner, and the same and similar parts among the embodiments may be referred to each other, and each embodiment focuses on the differences from the other embodiments. In particular, as for the apparatus embodiment, since it is substantially similar to the method embodiment, the description is relatively simple, and for the relevant points, reference may be made to the partial description of the method embodiment.
The above description is only for the preferred embodiment of the present invention, and is not intended to limit the scope of the present invention. Any modification, equivalent replacement, or improvement made within the spirit and principle of the present invention shall fall within the protection scope of the present invention.
Claims (5)
1. A page rendering method is applied to a terminal, and comprises the following steps:
determining a current display page in the webpage loaded by the terminal, including:
acquiring a first distance between the upper edge of a currently displayed webpage in a webpage loaded by the terminal and the upper edge of a first page of the webpage;
determining the page rolling direction of the webpage according to the difference between a first distance between the upper edge of the currently displayed webpage and the upper edge of the first page of the webpage, which is determined during the current rendering, and a first distance between the upper edge of the currently displayed webpage and the upper edge of the first page of the webpage, which is determined during the previous rendering;
determining a current display page in the webpage loaded by the terminal according to the distance between the upper edge of each page of the webpage and the upper edge of the first page of the webpage, the height of each page of the webpage, the first distance and the page rolling direction;
acquiring a page to be rendered, wherein the page to be rendered is the current display page or a preset number of pages adjacent to the current display page, and the acquiring the page to be rendered comprises the following steps: updating rendering marks corresponding to pages to be rendered in a preset array into first marks, and updating rendering marks of other pages except the pages to be rendered in the preset array into second marks, wherein the first marks are used for representing that the pages are to be rendered, and the second marks are used for representing that the pages are not to be rendered; rendering the page to be rendered, and stopping rendering other display pages except the page to be rendered in the webpage, including: traversing each rendering mark in the preset array, and determining the rendering mark as a page of the second mark; and respectively generating a Document Object Model (DOM) element for each page with the rendering mark as the second mark according to the height corresponding to the page with the rendering mark as the second mark, wherein the DOM element corresponding to the page with the rendering mark as the second mark comprises the page height, and the rendering mark is that other page parameters except the page height in the DOM element corresponding to the page with the rendering mark as the second mark are empty.
2. The method of claim 1, wherein the rendering the page to be rendered comprises:
traversing each rendering mark in the preset array, and determining the rendering mark as a page of the first mark;
generating a Document Object Model (DOM) element corresponding to the page to be rendered according to the page parameter corresponding to the page with the rendering mark as the first mark;
and rendering the page to be rendered according to the DOM element corresponding to the page to be rendered.
3. A page rendering device is applied to a terminal, and the device comprises:
a determining module, configured to determine a current display page in the web page loaded by the terminal, and specifically configured to:
acquiring a first distance between the upper edge of a currently displayed webpage in a webpage loaded by the terminal and the upper edge of a first page of the webpage;
determining the page rolling direction of the webpage according to the difference between a first distance between the upper edge of the currently displayed webpage and the upper edge of the first page of the webpage, which is determined during the current rendering, and a first distance between the upper edge of the currently displayed webpage and the upper edge of the first page of the webpage, which is determined during the previous rendering;
determining a current display page in the webpage loaded by the terminal according to the distance between the upper edge of each page of the webpage and the upper edge of the first page of the webpage, the height of each page of the webpage, the first distance and the page rolling direction;
an obtaining module, configured to obtain a page to be rendered, where the page to be rendered is the current display page determined by the determining module or a preset number of pages adjacent to the current display page, and the obtaining the page to be rendered includes: updating rendering marks corresponding to pages to be rendered in a preset array into first marks, and updating rendering marks of other pages except the pages to be rendered in the preset array into second marks, wherein the first marks are used for representing that the pages are to be rendered, and the second marks are used for representing that the pages are not to be rendered;
the rendering module is used for rendering the page to be rendered acquired by the acquisition module and stopping rendering other display pages except the page to be rendered in the webpage;
the determining module is further configured to traverse each rendering flag in the preset array, and determine that the rendering flag is a page of the second flag;
and the generating module is used for respectively generating a Document Object Model (DOM) element for the page of the second mark according to the height corresponding to the page of the second mark determined by the determining module, wherein the DOM element corresponding to the page of the second mark comprises the page height, and other page parameters except the page height in the DOM element corresponding to the page of the second mark are empty.
4. The apparatus of claim 3, wherein the rendering module is specifically configured to:
traversing each rendering mark in the preset array, and determining the rendering mark as a page of the first mark;
generating a Document Object Model (DOM) element corresponding to the page to be rendered according to the page parameter corresponding to the page with the rendering mark as the first mark;
and rendering the page to be rendered according to the DOM element corresponding to the page to be rendered.
5. An electronic device is characterized by comprising a processor, a communication interface, a memory and a communication bus, wherein the processor and the communication interface are used for realizing mutual communication by the memory through the communication bus;
a memory for storing a computer program;
a processor for implementing the method steps of claim 1 or 2 when executing a program stored in the memory.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201910295316.0A CN110110260B (en) | 2019-04-12 | 2019-04-12 | Page rendering method and device and electronic equipment |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201910295316.0A CN110110260B (en) | 2019-04-12 | 2019-04-12 | Page rendering method and device and electronic equipment |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN110110260A CN110110260A (en) | 2019-08-09 |
| CN110110260B true CN110110260B (en) | 2021-09-10 |
Family
ID=67483794
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201910295316.0A Active CN110110260B (en) | 2019-04-12 | 2019-04-12 | Page rendering method and device and electronic equipment |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN110110260B (en) |
Families Citing this family (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN111259636B (en) * | 2020-02-07 | 2023-10-13 | 北京字节跳动网络技术有限公司 | Document rendering method and device and electronic equipment |
Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103399866A (en) * | 2013-07-05 | 2013-11-20 | 北京小米科技有限责任公司 | Webpage rendering method, device and equipment |
| CN103853729A (en) * | 2012-11-29 | 2014-06-11 | 腾讯科技（深圳）有限公司 | Page loading method and system |
| CN104166569A (en) * | 2014-08-15 | 2014-11-26 | 北京彩云动力教育科技有限公司 | Front-end page loading method and system |
| CN105160020A (en) * | 2015-09-29 | 2015-12-16 | 北京京东尚科信息技术有限公司 | Webpage rendering method |
| CN105512295A (en) * | 2015-12-10 | 2016-04-20 | 网易（杭州）网络有限公司 | Information representation method and device and information system |
Family Cites Families (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US10318614B2 (en) * | 2015-07-01 | 2019-06-11 | Tnq Books And Journals Private Limited | Transformation of marked-up content into a file format that enables automated browser based pagination |
| US10528647B2 (en) * | 2016-06-10 | 2020-01-07 | Ebay Inc. | Optimization for browser rendering during navigation |
-
2019
- 2019-04-12 CN CN201910295316.0A patent/CN110110260B/en active Active
Patent Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103853729A (en) * | 2012-11-29 | 2014-06-11 | 腾讯科技（深圳）有限公司 | Page loading method and system |
| CN103399866A (en) * | 2013-07-05 | 2013-11-20 | 北京小米科技有限责任公司 | Webpage rendering method, device and equipment |
| CN104166569A (en) * | 2014-08-15 | 2014-11-26 | 北京彩云动力教育科技有限公司 | Front-end page loading method and system |
| CN105160020A (en) * | 2015-09-29 | 2015-12-16 | 北京京东尚科信息技术有限公司 | Webpage rendering method |
| CN105512295A (en) * | 2015-12-10 | 2016-04-20 | 网易（杭州）网络有限公司 | Information representation method and device and information system |
Also Published As
| Publication number | Publication date |
|---|---|
| CN110110260A (en) | 2019-08-09 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US9253013B1 (en) | Efficient delivery of content by virtualization of dynamic interaction with the document object model | |
| CN112770188B (en) | Video playing method and device | |
| US20140304588A1 (en) | Creating page snapshots | |
| CN112667330B (en) | Page display method and computer equipment | |
| CN109144392B (en) | Method and device for processing gesture conflict and electronic equipment | |
| CN109086105B (en) | Page layout conversion method and device and electronic equipment | |
| CN104881273A (en) | Webpage rendering analysis method and terminal device | |
| CN109240591B (en) | Interface display method and device | |
| CN110020383B (en) | Page data request processing method and device | |
| US9645984B2 (en) | Efficient delivery of content by virtualization of static interaction with the document object model | |
| CN110110260B (en) | Page rendering method and device and electronic equipment | |
| CN109635263B (en) | Column width fixed display method and device based on WEB ultra-wide table and electronic equipment | |
| CN111427637A (en) | Page rendering method and device | |
| CN113393294A (en) | Page display method and device, equipment and storage medium | |
| CN111240622B (en) | Drawing method and device | |
| CN111698548B (en) | Video playing method and device | |
| US20220179532A1 (en) | Method and device for responding to user operation | |
| CN112987992B (en) | Navigation element display method and device and electronic equipment | |
| CN115758004A (en) | Webpage table display method and device, computer readable medium and electronic equipment | |
| CN111767206B (en) | Statistical method and device for content unit exposure presentation rate and electronic equipment | |
| CN113721909A (en) | Element scaling monitoring method and device and electronic equipment | |
| CN110049374B (en) | Focus frame determination method and device | |
| CN108804195B (en) | Page display method and device, server and client | |
| CN112464127A (en) | Method and device for adjusting sequence of components in webpage, electronic equipment and storage medium | |
| CN107688636B (en) | Page adaptation method and device |
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 |