CN104951302A - Webpage rendering method and device - Google Patents
Webpage rendering method and device Download PDFInfo
- Publication number
- CN104951302A CN104951302A CN201510320708.XA CN201510320708A CN104951302A CN 104951302 A CN104951302 A CN 104951302A CN 201510320708 A CN201510320708 A CN 201510320708A CN 104951302 A CN104951302 A CN 104951302A
- Authority
- CN
- China
- Prior art keywords
- node
- size
- absolute coordinates
- visualtree
- webpage
- 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.)
- Pending
Links
Abstract
The invention discloses a webpage rendering method and device. The method includes the steps that a html label in a webpage serves as a node and CSS information is introduced so that a webpage visual tree containing visual information can be built, wherein the CSS information includes display attributes of the node; the size and the absolute coordinates of the node in the visual tree are calculated; according to the size, the absolute coordinates and the display attributes of the node, visibility of the node is calculated so as to render the webpage. Thus, in the aspect of functions, accuracy of visual display of a webpage block can be guaranteed, and in the aspect of performance, the speed requirement of searching and transcoding webpage analysis batch processing is met.
Description
Technical field
The present invention relates to webpage, particularly relate to webpage rendering intent and device.
Background technology
In recent years, along with the fast development of network technology, the information on internet also gets more and more.How effectively to extract from the internet information of magnanimity, utilize and present these information and become challenge.In this context, the large scale system for Webpage search and webpage transcoding has been developed.
In these Webpage searchs and trans-coding system, need web page analysis as basic calculating means.Web page analysis such as may be used for extracting webpage main body, removes webpage impurity information, or identifies structure of web page.Generally speaking, webpage can be divided into some block structures (that is, web page blocks) according to visual position, such as, be positioned at the navigation block at webpage top, be positioned at the recommendation list block of webpage left or right side and be positioned at the text block etc. at webpage center.Carry out above-mentioned web page analysis all to need to identify the visual information of each web page blocks, that is, the features such as the absolute coordinates of each web page blocks in whole webpage, size and observability are determined and identified.
As from the foregoing, the process that above-mentioned Webpage search and webpage transcoding etc. must carry out is carried out in webpage visual information analysis.Browser kernel now provides powerful webpage visual information and plays up function.But powerful realization of playing up function is to sacrifice processing speed for cost.Such as, for red fox (firefox) browser of main flow, the rendering speed of its browser kernel can only reach 10 ~ 20 pages per second after tested.Such rendering speed is obviously unacceptable for all needing the web page analysis of the search/transcoding service processing more than one hundred million rank webpage every day.
From the functional requirement of search/transcoding web page analysis, playing up of webpage visual information does not need the so accurate of picture browser requirement.Such as, for the webpage browsed for user is played up, even just the vision dislocation of a character can be all be difficult to accept.But play up for the webpage of web page analysis, can tolerate that other vision of character level misplaces, only require the accuracy of web page blocks visual layout.
Therefore, need a kind ofly functionally can ensure the accuracy that web page blocks vision shows, webpage rendering intent and the device of the rate request of search/transcoding web page analysis batch processing can be met simultaneously in performance.
Summary of the invention
A technical matters to be solved by this invention is to provide a kind of webpage rendering intent and device, and its webpage that can realize meeting the rate request of search/transcoding web page analysis batch processing while the accuracy ensureing the display of web page blocks vision is played up.
According to an aspect of the present invention, disclose a kind of webpage rendering intent, comprise: HTML (Hypertext Markup Language) (html) label in webpage is introduced CSS (cascading style sheet) (CSS) information as node, to create the webpage tree structure (VisualTree) comprising visual information, wherein CSS information comprises the display properties of node; Calculate size and the absolute coordinates of described VisualTree interior joint; And carry out the observability of computing node according to size of node, coordinate and display properties, to complete playing up webpage.
Thus, the VisualTree of the application of the invention definition, realizes the size of each web page blocks to composition webpage, absolute coordinates and then the calculating to observability, completes the Fast rendering to webpage thus.
Preferably, the node on VisualTree is the node relevant with playing up layout.
So just relate to need node to be processed to be further defined to those in the node playing up layout, thus get rid of such as without the need to the correlation computations of the node of display, improve counting yield further thus.
Preferably, step calculates the size of described VisualTree interior joint and absolute coordinates comprises: carry out rear traversal with the size of computing node and relative coordinate to VisualTree; And according to the described size of node and relative coordinate, pre-reset mechanism is carried out with the absolute coordinates of computing node to VisualTree.
So specify that it is size and the relative coordinate of the mode computing node used from bottom to top further, and use the absolute coordinates of top-down mode computing node, further increase the computing velocity to each web page blocks size and coordinate thus.
Preferably, described method also comprised before the size calculating described VisualTree interior joint and absolute coordinates: be form (table) node or non-table node by all node-classifications on VisualTree.
Like this, optimize calculating by class node, thus the efficiency that raising webpage is played up.
Preferably, non-table node comprises block level node, inline node and floating node, and carries out rear traversal to VisualTree and comprise further with the size of computing node and relative coordinate: use board layout algorithm to calculate table size of node; And/or use the size of painting canvas placement algorithm computing block level node and floating node, and calculate inline size of node according to CSS information; And use painting canvas placement algorithm calculate the size of the father node of above-mentioned table node, block level node, floating node and inline node and draw the relative coordinate of above-mentioned node.
Like this, by different nodes being otherwise the next clear and definite concrete calculating with optimizing node size and relative coordinate of same algorithm, computing velocity can be accelerated further, thus the efficiency that raising webpage is played up.
Preferably, carry out pre-reset mechanism according to the described size of node and relative coordinate to VisualTree to comprise with the absolute coordinates of computing node: the absolute coordinates of root node is initialized as (0,0), use the absolute coordinates of each node of following formulae discovery, until the node of most tip: the absolute coordinates+relative coordinate of absolute coordinates=father node.
Like this, by first the absolute coordinates of root node being decided to be initial point, then asking for absolute coordinates according to the relative coordinate of known each lower level node, just can improve the calculating to web page blocks present position further, thus the efficiency that raising webpage is played up.
Preferably, the observability of computing node comprises: the observability calculating root node according to the size of root node, absolute coordinates and display properties; And the observability calculating each descendant nodes is traveled through downwards from root node.
Like this with regard to specify that the calculating of observability brings into use mode from bottom to top to carry out from root node further, further increase the computing velocity to each web page blocks observability thus, and final raising webpage rendering speed.
Preferably, the observability of each descendant nodes is relevant with the observability of its ancestor node.
So just specify that the top-down deciding means of observability further, further facilitate playing up webpage.
According to another aspect of the present invention, disclose a kind of webpage rendering device, comprise: creating unit, for the html label in webpage is introduced CSS information and comprised the webpage tree structure (VisualTree) of visual information as node to create, wherein CSS information comprises the display properties of node; Size and absolute coordinates computing unit, for calculating size and the absolute coordinates of described VisualTree interior joint; And visibility processing unit, for carrying out the observability of computing node according to size of node, absolute coordinates and display properties to complete playing up webpage.
Preferably, size and absolute coordinates computing unit comprise: size and relative coordinate computing unit, for carrying out rear traversal to VisualTree with the size of computing node and relative coordinate; And absolute coordinates computing unit, for carrying out pre-reset mechanism with the absolute coordinates of computing node according to the described size of node and relative coordinate to VisualTree.
Preferably, webpage rendering device also comprises: taxon, for being table node or non-table node by all node-classifications on VisualTree.
Preferably, non-table node comprises block level node, inline node and floating node, and described size and relative coordinate computing unit also comprise: table node size computing unit, calculates table size of node for using board layout algorithm; And/or non-table node size computing unit, for using the size of painting canvas placement algorithm computing block level node and floating node, calculate inline size of node according to CSS information; And relative coordinate computing unit, calculate the size of the father node of above-mentioned table node, block level node, floating node and inline node for using painting canvas placement algorithm and draw the relative coordinate of above-mentioned node.
Thus, just play up according to express web page of the present invention the support provided on device for realizing.
Accompanying drawing explanation
In conjunction with the drawings disclosure illustrative embodiments is described in more detail, above-mentioned and other object of the present disclosure, Characteristics and advantages will become more obvious, wherein, in disclosure illustrative embodiments, identical reference number represents same parts usually.
Fig. 1 is the indicative flowchart of webpage rendering intent according to an embodiment of the invention.
Fig. 2 is the process flow diagram of the sub-step that step S200 shown in Fig. 1 can comprise.
Fig. 3 is the process flow diagram of an optional step S150 of method shown in Fig. 1.
Fig. 4 is the process flow diagram of the sub-step that step S210 shown in Fig. 2 can comprise.
Fig. 5 is the schematic diagram of an example of board layout algorithm.
Fig. 6 is the schematic diagram of an example of painting canvas placement algorithm.
Fig. 7 is the schematic block diagram of webpage rendering device according to an embodiment of the invention.
Fig. 8 is the schematic block diagram of the optional built structure of size shown in Fig. 7 and absolute coordinates computing unit 200.
Fig. 9 is the schematic diagram of the optional taxon comprised in the rendering device of webpage shown in Fig. 7.
Figure 10 is the schematic block diagram of the optional built structure of size shown in Fig. 8 and relative coordinate computing unit 210.
Embodiment
Below with reference to accompanying drawings preferred implementation of the present disclosure is described in more detail.Although show preferred implementation of the present disclosure in accompanying drawing, but should be appreciated that, the disclosure can be realized in a variety of manners and not should limit by the embodiment of setting forth here.On the contrary, provide these embodiments to be to make the disclosure more thorough and complete, and the scope of the present disclosure intactly can be conveyed to those skilled in the art.
Fig. 1 is the indicative flowchart of webpage rendering intent according to an embodiment of the invention.
In step S100, the html label in webpage is introduced CSS information as node, set up the webpage tree structure (VisualTree) comprising visual information thus, the CSS information wherein introduced comprises the display properties of node.
In step S200, calculate size and the absolute coordinates of VisualTree interior joint.
In step S300, carry out the observability of computing node according to size of node, absolute coordinates and display properties, to complete playing up webpage.
As everyone knows, html (HTML (Hypertext Markup Language)) is used to describe a kind of markup language of webpage, and it uses label to be used for structured message, such as title, paragraph and list etc.CSS (CSS (cascading style sheet)) be then a kind of for structured document (such as, html document) add pattern (such as, font, spacing and color etc.) computerese, be introduced into facilitate and the content of webpage and display distinguished.
According to the layer of structure characteristic of html self, in a label, some subtabs can be comprised.This is visually presented as that a web page blocks can comprise some web page blocks, and this hierarchical relationship that comprises can be nested.Because each html label can represent a web page blocks substantially, therefore the visual information calculating webpage just can be converted into the visual information calculating each web page blocks, namely be the features such as the absolute coordinates of web page blocks in whole webpage, web page blocks size and web page blocks observability, the layout of playing up for web page blocks is exactly the process calculating web page blocks visual information.
In the present invention, by html label in webpage is introduced CSS information as node, the webpage tree structure comprising visual information is set up, i.e. VisualTree.Each node in VisualTree is corresponding with each web page blocks in webpage, and introduce the CSS information defining each web page blocks pattern, therefore by reading the display properties that CSS information comprises, and each size of node calculated in VisualTree and absolute coordinates, just can the observability of computing node, realize thus playing up layout to webpage.
In the prior art, browser kernel carries out webpage wash with watercolours to be needed to carry out with multiple module various mutual and call, and needs a large amount of calculating.Such as, the webpage rendering speed of red fox browser kernel can only reach 10 ~ 20 pages per second after tested.By contrast, in the application of the invention, webpage is played up the calculating being reduced to web page blocks level by self-defining VisualTree, just while ensureing the accuracy required for the scene such as Webpage search and webpage transcoding, greatly can improve webpage rendering speed.Such as, in a preferred embodiment, the rendering speed of more than 600 pages per second is realized with the accuracy of character error.
In addition, said method disclosed in this invention, based on html and CSS, is followed the CSS2.1 specification that W3C (World Wide Web Consortium) is existing completely, is had good compatibility and portability.
In a preferred embodiment, VisualTree only includes the node relevant with playing up layout.Such as, get rid of when creating VisualTree the node that CSS attribute display (display) is none (nothing), because it and layout have nothing to do.
So just relate to need node to be processed to be further defined to those in the node playing up layout, thus get rid of the correlation computations of the node irrelevant with display, improve counting yield thus.It is evident that, VisualTree also can comprise whole node, and this does not affect the effect that the present invention will realize.
Fig. 2 is the process flow diagram of the sub-step that step S200 shown in Fig. 1 can comprise.
In step S210, rear traversal is carried out with the size of computing node and relative coordinate to VisualTree.
In step S220, according to the size of node calculated and relative coordinate, pre-reset mechanism is carried out with the absolute coordinates of computing node to VisualTree.
In a preferred embodiment of the invention, can by root traversal after can carrying out a time to VisualTree to the calculating of node size each in VisualTree and absolute coordinates, then carry out a pre-reset mechanism and realize.
Particularly, the calculating that rear traversal can realize each size of node in VisualTree (i.e. length and width) and relative coordinate is carried out to VisualTree.When traversing root node, global view is limited to this root node and all direct child nodes thereof, therefore, it is possible to the child node calculating this root node is directed to the relative coordinate of its father node.
Carrying out rear traversal to VisualTree is bottom-up traversal.Such as, when body (main body) node A contains two div (segmentation) Node B and C, first can complete the size (i.e. length and width) of two div Node B and C and the calculating of relative coordinate, then complete the size (i.e. length and width) of body node A and the calculating of relative coordinate.
After calculating each size of node and relative coordinate, just can carry out pre-reset mechanism according to the size calculated and relative coordinate to VisualTree, calculate the absolute coordinates of each node thus.
In a preferred embodiment, the method of the absolute coordinates of computing node can be: first the absolute coordinates of root node is initialized as (0,0), travel through from root node, the absolute coordinates that the absolute coordinates of the direct child node of this root node equals this root node adds the relative coordinate of this direct child node; Therefore the algorithm of the absolute coordinates of any one node is: the relative coordinate of absolute coordinates+this node of the father node of absolute coordinates=this node of node.
Such as, root node is body node, is first initialized as (0,0) by the absolute coordinates of body node, travel through from body node, absolute coordinates=body node absolute coordinates+this direct child node relative coordinate of the direct child node of this body node.When after the absolute coordinates calculating direct child node, the absolute coordinates of the direct child node of this direct child node also can adopt which to calculate.The absolute coordinates of all nodes adopts pre-reset mechanism recursive call mode to complete.
Thus, by the description of above preferred embodiment, specify that it is size and the relative coordinate of the mode computing node used from bottom to top further, and use the absolute coordinates of top-down mode computing node, further increase the computing velocity to each web page blocks size and coordinate thus.
Although above has been given the method being come computing node size and absolute coordinates by rear first root twice traversal, but according to disclosing herein, those skilled in the art also can expect that other ask for the method for node size and absolute coordinates, and do not deviated from the spirit and scope of the present invention.
Fig. 3 is the process flow diagram of an optional step S150 of method shown in Fig. 1.
In step S150, be table (form) node or non-table node by the node-classification on VisualTree.
Before the step 200 of computing node size and absolute coordinates, can first classify to the node on VisualTree.The criteria for classification of defined node can be carried out according to CSS information.In a preferred embodiment, according to prior art, node is mainly divided into table node and non-table node.For different nodes, diverse ways can be used to obtain size of node and relative coordinate.
Fig. 4 is the process flow diagram of the sub-step that step S210 shown in Fig. 2 can comprise.
Non-table node (non-t node) comprises block level node, inline node and floating node.Therefore, in a preferred embodiment, diverse ways can be used obtain the size to above-mentioned non-table node and table node (t node) and relative coordinate, optimize counting yield further thus.
In step S211, board layout algorithm is used to calculate table size of node.
In html language, <table> label is used to define html form.Html form is made up of table element and one or more tr and td element, wherein tr element definition table row, td element definition list cell.
On the VisualTree that the present invention defines, table label becomes table node.Because table node is divided into several rows usually, several tr nodes i.e., a tr node is divided into again some row, namely some td nodes are comprised, so a table node is made up of some td nodes, the similar chessboard of whole table node, the grid on the similar chessboard of each td node, the td node with a line constitutes tr node.Td node may inter-bank across row (by the rowspan (row span) of td element and the decision of colspan (row span) attribute), all td height of node that table node is often gone must be consistent, and the td node width often arranged must be consistent; Therefore for the singularity of table node, use board layout algorithm to calculate each table size of node, each grid of chessboard puts into a td node, can solve the ranks consistency problem of table and inter-bank easily across row problem.
In a preferred embodiment, the method using board layout algorithm to calculate each table size of node is specially: with td one by one and fill chessboard line by line, after td determines to be put into which position of chessboard, the relative coordinate of td just determines; After the td of a line fills, just can determine size and the relative coordinate of this row tr; After all tr fill, just can determine the size of whole table.
Fig. 5 is the schematic diagram of an example of table board layout algorithm.As shown in Figure 5, the first half of Fig. 5 take td as the chessboard of cell, and each grid holds a td node, grid be true representative effectively, false is invalid.The latter half of Fig. 5 is corresponding actual table, the first row only has a td, the colspan=6 of this td, namely the size of this td is (1,6), so see that the first row of top chessboard only has first cell to be true, represent and occupied by the td of the first row, all the other are all false, represent unavailable.Similar situation also occurs in the second row, has two td elements, and each td element has attribute colspan=3, and namely the size of this each td is (1,3).The third line has six td elements, and the size of each td is (1,1), and the cell of corresponding top chessboard the third line is all true.
In step S212, use the size of painting canvas placement algorithm computing block level node and floating node, and calculate inline size of node according to CSS information.
Non-Table node can be divided into block level node, inline node and floating node, and wherein inline size of node can directly calculate from CSS information.And for other two kinds of nodes, then generation painting canvas can be used child node to be filled in painting canvas again and calculate its node size to ask for the true high wide method (that is, painting canvas placement algorithm) of painting canvas.Because inline size of node can calculate from CSS information, therefore inline node does not have painting canvas, only the painting canvas of responsible filling block level node.
In a preferred embodiment, use painting canvas placement algorithm to calculate each non-Table size of node to be specially: first generate a painting canvas according to the node width of CSS primary Calculation and the height actual size of representation node (can not), then according to CSS specification, its direct child node is put into painting canvas, after all child nodes put into painting canvas, the true wide height of painting canvas is the actual size of node.
A block level node generates a painting canvas, when carrying out size to block level node and calculating, if the direct child node of this block level node is inline node, such as word, CSS attribute font-size (font size) is then first selected to calculate the son of each word wide, and it is high to utilize CSS attribute line-height (row high) to calculate the row of the every a line of block level intra-node, and then directly and capable high painting canvas to block level node wide according to word number, son is filled, the true wide height of having filled this painting canvas is afterwards this block level size of node.
When the direct child node of this block level node is not inline node, calculating this block level size of node is exactly fill the painting canvas of this block level node in the lump by these child nodes, which space that this child node occupies the painting canvas of block level node can be calculated according to the size of child node, after one of them child node has been filled, need to cut the painting canvas of this block level node, other child nodes can only be filled a vacancy in the remaining space of painting canvas after dicing, after all child nodes have all been filled, the size that the painting canvas of this block level node is occupied is this block level size of node.Such as, node A ' has two sub-Node B ' and C ', when the size of carrying out node A ' calculates, for node A ' generates a painting canvas, then by Node B ' and C ' put into the painting canvas of node A ', and when the size of computing node B ' and C ', be respectively Node B ' and C ' generate a painting canvas.That is, said process is bottom-up, that is, the size of first computing node B ' and C ', then the size of computing node A '.
In step S213, painting canvas placement algorithm is used to calculate the size of the father node of father's joint of above-mentioned table node, block level node, floating node and inline node and draw the relative coordinate of above-mentioned node.
The calculating of the relative coordinate of node completes in the process calculating his father's node size, calculates the relative coordinate of this node based on father node painting canvas initial point in process node being put into his father node layout painting canvas.
The computing method of the relative coordinate of Table node are also the same, and time in this Table node placement to the painting canvas of its father node could be determined by same needs.Father node due to Table node is all generally block level node, therefore when calculating his father's size of node, need to use painting canvas placement algorithm to calculate, namely to need this Table code populates, in the painting canvas of its father node, to determine the relative coordinate of this Table node thus.
Fig. 6 is the schematic diagram of an example of painting canvas placement algorithm.As shown in the figure, gray area represents the position (such as, slider pad left1, right1, right2) be occupied, and white space representative can the position of layout.Can distinguish to some extent by layout areas, the different white space of namely dissimilar sensor selection problem carries out layout.Particularly, in the embodiment in fig 6, for inline piece, as word, span (span) node etc., layout is to No. 3 regions; For slider pad (having the node of CSS attribute float (floating)), layout is to No. 2 regions; And for common block level element, if display is the div element of block (block), then layout is to No. 0 region.After completing the layout of a node, need to cut painting canvas, repartition and occupy region and Free Region.
Thus, by above-mentioned steps S211 ~ S213, diverse ways just can be used to obtain all kinds of size of node and relative coordinate.Owing to employing the ad hoc approach for all kinds of node diagnostic, therefore optimize calculating, thus further increase webpage rendering speed.
It is evident that, step S211 and S212 is without the need to carrying out according to above-mentioned order, and above-mentioned steps can walk abreast or perform with random order, and these changes are all positioned within the spirit and scope of the present invention.
Now, disclose also Fig. 1 again in conjunction with above-mentioned, the observability carrying out computing node according to size of node, absolute coordinates and display properties is further elaborated the step S300 played up of webpage to complete.
The observability key of computing node is the visibility region of computing node.If node content is positioned at visibility region, then illustrate it is visible; Otherwise illustrate it is hiding.
In a preferred embodiment, first the observability calculating each node can calculate the observability of root node.Travel through from root node, and then calculate the observability of direct child node of root node.The visibility region of root node calculates according to this size of node, absolute coordinates and display properties (such as, overflow (spilling) attribute).
Such as, suppose root node A " absolute coordinates for (0; 0); be longly respectively 100 and 80 with wide (size), and the overflow attribute of this node is hidden (overflow attribute is the child node content that hidden (hiding) expression exceeds its visibility region is sightless).Therefore this root node A " visibility region coordinate be (0,0) and size is (100,80).
The observability of child node can according to the coordinate of father node, visibility region, and the display properties of father node and the coordinate of self and size calculate.Child node may not have relevant display properties, but if its ancestor node has such as overflow attribute, then can have influence on the observability of this child node.So visibility processing is not limited to the node of such as overflow attribute, its all descendant nodes can be related to.
Such as, root node A " have child node B ", child node B " coordinate be (50,50), be longly respectively 60 and 70 with wide (size).Due to father node A " (i.e. root node A ") overflow attribute be hidden, so child node B " content in only have and father node A " content in overlapping region to show, the content in all the other regions can be hidden.Therefore according to child node B " father node A " coordinate, visibility region calculate child node B " visibility region coordinate (50,50) and size (50,30).
To sum up, by building VisualTree and such as being realized the calculating of the features such as size (and relative coordinate), absolute coordinates and observability to each web page blocks in webpage by after a completing traversal and pre-reset mechanism, thus the visual information finally completing whole Webpage is played up.
Describe in detail according to a kind of webpage rendering intent of the present invention above with reference to Fig. 1-6.The structure of webpage rendering device and correlation unit thereof is described below with reference to Fig. 7-10.
Very multiunit function of device described below is identical with the function of the corresponding steps described above with reference to Fig. 1-4 respectively.In order to avoid repeating, emphasis describes the unit or apparatus structure that this device and system can have here, then repeats no more for some details, can with reference to corresponding description above.
Fig. 7 is the schematic block diagram of webpage rendering device according to an embodiment of the invention.
As shown in Figure 7, this device comprises creating unit 100, size and absolute coordinates computing unit 200 and visibility processing unit 300.
Html label in webpage is introduced CSS information and is comprised the webpage tree structure (VisualTree) of visual information as node to create by creating unit 300.CSS information comprises the display properties of node.
Size and absolute coordinates computing unit 200 calculate size and the absolute coordinates of described VisualTree interior joint.
Visibility processing unit 300 carrys out the observability of computing node to complete playing up webpage according to size of node, absolute coordinates and display properties.
Fig. 8 is the schematic block diagram of the optional built structure of size shown in Fig. 7 and absolute coordinates computing unit 200.
As shown in Figure 7, size and absolute coordinates computing unit 200 can comprise size and relative coordinate computing unit 210 and absolute coordinates computing unit 220.
Size and relative coordinate computing unit 210 couples of VisualTree carry out rear traversal with the size of computing node and relative coordinate.
Absolute coordinates computing unit 220 carries out pre-reset mechanism with the absolute coordinates of computing node according to the described size of node and relative coordinate to VisualTree.
Fig. 9 is the schematic diagram of the optional taxon comprised in the rendering device of webpage shown in Fig. 7.In a preferred embodiment, webpage rendering device can comprise taxon 150 alternatively.All node-classifications on VisualTree can be table node or non-table node by this taxon 150.
Figure 10 is the schematic block diagram of the optional built structure of size shown in Fig. 8 and relative coordinate computing unit 210.
As shown in Figure 10, size and relative coordinate computing unit 210 can comprise table node size computing unit 211, non-table node size computing unit 212 and relative coordinate computing unit 213.
Table node size computing unit 211 uses board layout algorithm to calculate table size of node.
Non-table node size computing unit 212 uses the size of painting canvas placement algorithm computing block level node and floating node, and calculates inline size of node according to CSS information.
Relative coordinate computing unit 213 uses painting canvas placement algorithm calculate the size of the father node of father's joint of above-mentioned table node, block level node, floating node and inline node and draw the relative coordinate of above-mentioned node.
Disclosed above according to net render method and apparatus of the present invention.Principle of the present invention completes based on traversal of tree, and the calculated amount comprised in ergodic process is controlled, and non recounting calculates.Inventor's Stochastic choice 50000 pages carry out performance test, and single-page on average plays up 1.63ms consuming time, and average webpage rendering speed is 613/s.Compare browser renders speed and improve 30 ~ 60 times.
In effect, the similar Sina homepage baroque page like this, rendering effect is also quite desirable.Except play up in font exist a small amount of inaccurate except, in the visual information of web page blocks is played up still quite accurately.
In addition, a kind of computer program can also be embodied as according to method of the present invention, this computer program comprises computer-readable medium, stores the computer program for performing the above-mentioned functions limited in method of the present invention on the computer-readable medium.Those skilled in the art will also understand is that, may be implemented as electronic hardware, computer software or both combinations in conjunction with various illustrative logical blocks, module, circuit and the algorithm steps described by disclosure herein.
Process flow diagram in accompanying drawing and block diagram show the architectural framework in the cards of the system and method according to multiple embodiment of the present invention, function and operation.In this, each square frame in process flow diagram or block diagram can represent a part for module, program segment or a code, and a part for described module, program segment or code comprises one or more executable instruction for realizing the logic function specified.Also it should be noted that at some as in the realization of replacing, the function marked in square frame also can be different from occurring in sequence of marking in accompanying drawing.Such as, in fact two continuous print square frames can perform substantially concurrently, and they also can perform by contrary order sometimes, and this determines according to involved function.Also it should be noted that, the combination of the square frame in each square frame in block diagram and/or process flow diagram and block diagram and/or process flow diagram, can realize by the special hardware based system of the function put rules into practice or operation, or can realize with the combination of specialized hardware and computer instruction.
Be described above various embodiments of the present invention, above-mentioned explanation is exemplary, and non-exclusive, and be also not limited to disclosed each embodiment.When not departing from the scope and spirit of illustrated each embodiment, many modifications and changes are all apparent for those skilled in the art.The selection of term used herein, is intended to explain best the principle of each embodiment, practical application or the technological improvement to the technology in market, or makes other those of ordinary skill of the art can understand each embodiment disclosed herein.
Claims (12)
1. a webpage rendering intent, comprising:
Html label in webpage is introduced CSS (cascading style sheet) (CSS) information as node, and to create the webpage tree structure (VisualTree) comprising visual information, wherein said CSS information comprises the display properties of node;
Calculate size and the absolute coordinates of described VisualTree interior joint; And
The observability of computing node is carried out, to complete playing up webpage according to size of node, absolute coordinates and display properties.
2. the method for claim 1, the node on wherein said VisualTree is the node relevant with playing up layout.
3. the method for claim 1, the size and the absolute coordinates that wherein calculate described VisualTree interior joint comprise:
Rear traversal is carried out with the size of computing node and relative coordinate to VisualTree; And
According to described size and the relative coordinate of node, pre-reset mechanism is carried out with the absolute coordinates of computing node to VisualTree.
4. method as claimed in claim 3, also comprised before the size calculating described VisualTree interior joint and absolute coordinates:
Be table node or non-table node by the node-classification on VisualTree.
5. method as claimed in claim 4, wherein said non-table node comprises block level node, inline node and floating node, and carries out rear traversal to VisualTree and comprise further with the size of computing node and relative coordinate:
Board layout algorithm is used to calculate table size of node; And/or
Use the size of painting canvas placement algorithm computing block level node and floating node, and calculate inline size of node according to CSS information; And
Painting canvas placement algorithm is used to calculate the size of the father node of above-mentioned table node, block level node, floating node and inline node and draw the relative coordinate of above-mentioned node.
6. method as claimed in claim 3, wherein according to the described size of node and relative coordinate, pre-reset mechanism is carried out to VisualTree and comprise with the absolute coordinates of computing node:
The absolute coordinates of root node is initialized as (0,0), uses the absolute coordinates of each node of following formulae discovery, until the node of most tip:
Absolute coordinates+the relative coordinate of absolute coordinates=father node.
7. the method for claim 1, wherein the observability of computing node comprises:
The observability of root node is calculated according to the size of root node, absolute coordinates and display properties; And
The observability calculating each descendant nodes is traveled through downwards from root node.
8. method as claimed in claim 7, wherein the observability of each descendant nodes is relevant with the observability of its ancestor node.
9. a webpage rendering device, comprising:
Creating unit, for the html label in webpage is introduced CSS information and comprised the webpage tree structure (VisualTree) of visual information as node to create, wherein said CSS information comprises the display properties of node;
Size and absolute coordinates computing unit, for calculating size and the absolute coordinates of described VisualTree interior joint; And
Visibility processing unit, for carrying out the observability of computing node to complete playing up webpage according to size of node, absolute coordinates and display properties.
10. device as claimed in claim 9, wherein said size and absolute coordinates computing unit comprise:
Size and relative coordinate computing unit, for carrying out rear traversal with the size of computing node and relative coordinate to VisualTree; And
Absolute coordinates computing unit, for carrying out pre-reset mechanism with the absolute coordinates of computing node according to the described size of node and relative coordinate to VisualTree.
11. devices as claimed in claim 10, also comprise:
Taxon, for being table node or non-table node by all node-classifications on VisualTree.
12. devices as claimed in claim 11, wherein said non-table node comprises block level node, inline node and floating node, and described size and relative coordinate computing unit also comprise:
Table node size computing unit, calculates table size of node for using board layout algorithm; And/or
Non-table node size computing unit, for using the size of painting canvas placement algorithm computing block level node and floating node, and calculates inline size of node according to CSS information; And
Relative coordinate computing unit, calculates the size of the father node of above-mentioned table node, block level node, floating node and inline node for using painting canvas placement algorithm and draws the relative coordinate of above-mentioned node.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201510320708.XA CN104951302A (en) | 2015-06-11 | 2015-06-11 | Webpage rendering method and device |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201510320708.XA CN104951302A (en) | 2015-06-11 | 2015-06-11 | Webpage rendering method and device |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN104951302A true CN104951302A (en) | 2015-09-30 |
Family
ID=54165974
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201510320708.XA Pending CN104951302A (en) | 2015-06-11 | 2015-06-11 | Webpage rendering method and device |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN104951302A (en) |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN107357926A (en) * | 2017-07-26 | 2017-11-17 | 成都三零盛安信息系统有限公司 | Web page processing method, device and electronic equipment |
| WO2023071629A1 (en) * | 2021-10-28 | 2023-05-04 | 北京字节跳动网络技术有限公司 | Webpage rendering method and apparatus, device and storage medium |
Citations (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101183372A (en) * | 2007-12-21 | 2008-05-21 | 腾讯科技（深圳）有限公司 | Style list processing system and method |
| CN101470728A (en) * | 2007-12-25 | 2009-07-01 | 北京大学 | Method and device for automatically abstracting text of Chinese news web page |
| CN101727461A (en) * | 2008-10-13 | 2010-06-09 | 中国科学院计算技术研究所 | Method for extracting content of web page |
| CN102841790A (en) * | 2012-07-02 | 2012-12-26 | 北京大学 | Web application interface dynamic adapting method for heterogeneous terminal |
| CN102915375A (en) * | 2012-11-08 | 2013-02-06 | 山东大学 | Webpage loading method based on layout zoning |
| CN103365862A (en) * | 2012-03-28 | 2013-10-23 | 北京百度网讯科技有限公司 | Method and equipment for generating pictures corresponding to pages |
-
2015
- 2015-06-11 CN CN201510320708.XA patent/CN104951302A/en active Pending
Patent Citations (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101183372A (en) * | 2007-12-21 | 2008-05-21 | 腾讯科技（深圳）有限公司 | Style list processing system and method |
| CN101470728A (en) * | 2007-12-25 | 2009-07-01 | 北京大学 | Method and device for automatically abstracting text of Chinese news web page |
| CN101727461A (en) * | 2008-10-13 | 2010-06-09 | 中国科学院计算技术研究所 | Method for extracting content of web page |
| CN103365862A (en) * | 2012-03-28 | 2013-10-23 | 北京百度网讯科技有限公司 | Method and equipment for generating pictures corresponding to pages |
| CN102841790A (en) * | 2012-07-02 | 2012-12-26 | 北京大学 | Web application interface dynamic adapting method for heterogeneous terminal |
| CN102915375A (en) * | 2012-11-08 | 2013-02-06 | 山东大学 | Webpage loading method based on layout zoning |
Cited By (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN107357926A (en) * | 2017-07-26 | 2017-11-17 | 成都三零盛安信息系统有限公司 | Web page processing method, device and electronic equipment |
| CN107357926B (en) * | 2017-07-26 | 2020-04-17 | 成都三零盛安信息系统有限公司 | Webpage processing method and device and electronic equipment |
| WO2023071629A1 (en) * | 2021-10-28 | 2023-05-04 | 北京字节跳动网络技术有限公司 | Webpage rendering method and apparatus, device and storage medium |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US9836183B1 (en) | Summarized network graph for semantic similarity graphs of large corpora | |
| CN101937438B (en) | Method and device for extracting webpage content | |
| US7856596B2 (en) | Method and system for separation of content and layout definitions in a display description | |
| JP2023522567A (en) | Generation of integrated circuit layouts using neural networks | |
| US20110282877A1 (en) | Method and system for automatically extracting data from web sites | |
| CN104331438B (en) | To novel web page contents selectivity abstracting method and device | |
| CN103744889B (en) | A kind of method and apparatus for problem progress clustering processing | |
| US20190141110A1 (en) | Design Analysis for Framework Assessment | |
| CN102063620A (en) | Handwriting identification method, system and terminal | |
| US9946813B2 (en) | Computer-readable recording medium, search support method, search support apparatus, and responding method | |
| CN109710771A (en) | Form data extracting method, device and storage medium | |
| CN106202224B (en) | Search processing method and device | |
| CN103544257B (en) | Method and device for webpage quality detection | |
| CN104063492B (en) | Picture merging method and picture combination system | |
| JP5199266B2 (en) | A method, apparatus, and program for facilitating selection of an object on a display screen. | |
| CN104951302A (en) | Webpage rendering method and device | |
| JP4376670B2 (en) | Steiner tree processing apparatus, Steiner tree processing method, and Steiner tree processing program | |
| CN108694192B (en) | Webpage type judging method and device | |
| CN102870107A (en) | Contour based flow layout | |
| CN110083760B (en) | Multi-recording dynamic webpage information extraction method based on visual block | |
| JP2008027302A (en) | Layout evaluation device | |
| US10163787B2 (en) | Semiconductor structure | |
| CN115048599A (en) | Enterprise product interface configuration method, device, equipment and medium | |
| US8132141B2 (en) | Method and apparatus for generating a centerline connectivity representation | |
| CN103678432A (en) | Webpage main body extraction method based on webpage main body features and intermediate true values |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| C06 | Publication | ||
| PB01 | Publication | ||
| C10 | Entry into substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| RJ01 | Rejection of invention patent application after publication | ||
| RJ01 | Rejection of invention patent application after publication |
Application publication date: 20150930 |