CN109165364A - A kind of page rendering method, apparatus, equipment and storage medium - Google Patents
A kind of page rendering method, apparatus, equipment and storage medium Download PDFInfo
- Publication number
- CN109165364A CN109165364A CN201811063147.XA CN201811063147A CN109165364A CN 109165364 A CN109165364 A CN 109165364A CN 201811063147 A CN201811063147 A CN 201811063147A CN 109165364 A CN109165364 A CN 109165364A
- Authority
- CN
- China
- Prior art keywords
- rendering
- page
- rendered
- layer
- elements
- 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.)
- Granted
Links
Landscapes
- Image Generation (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
The embodiment of the invention discloses a kind of page rendering method, apparatus, equipment and storage mediums, this method comprises: obtaining the display frame rate of the page;The number of elements binding occurrence in the page to be rendered in each rendering layer is determined according to the display frame rate;According to the determining number of elements binding occurrence, the level allocation strategy of element included by the page to be rendered is determined, wherein the level allocation strategy includes element included by the number of plies and every layer;According to the level allocation strategy and element property data, the rendering layer of the page to be rendered is rendered and shown, DOM and Canvas are solved the problems, such as due to respective defect bring consistency difference and is realized complicated, to realize the equalization point for taking into account EMS memory occupation and rendering speed, optimize rendering effect and loading velocity.
Description
Technical field
The present embodiments relate to Web page rendering technology more particularly to a kind of page rendering method, apparatus, equipment and
Storage medium.
Background technique
DOM Document Object Model (DOM) skill for generally using browser to provide in conventional techniques, when rendering a webpage
Art, and painting canvas (Canvas) can then be used to render in large quantities in some web games.Wherein, DOM is HTML and XML document
Programming interface connects web page and script or program language;Painting canvas (Canvas) element is a part of HTML5, is permitted
Perhaps scripting language dynamic rendering bit image.
In the implementation of the present invention, the discovery prior art has following technological deficiency: the use process of DOM to inventor
In, although rendering speed is fast, a large amount of memories are easily occupied, and render difference that is not flexible, and can realizing because of different browsers
It is different, it is difficult to guarantee consistency;Although Canvas is few to the occupancy of memory, complexity is realized, and when page rendering region is excessive
It is easy to make the time-consuming problem of rendering.
Summary of the invention
The embodiment of the present invention provides a kind of page rendering method, apparatus, equipment and storage medium, to realize that taking into account memory accounts for
With the equalization point with rendering speed, optimize rendering effect and loading velocity.
In a first aspect, the embodiment of the invention provides a kind of page rendering methods, this method comprises:
Obtain the display frame rate of the page;
The number of elements binding occurrence in the page to be rendered in each rendering layer is determined according to the display frame rate;
According to the determining number of elements binding occurrence, the level distribution plan of element included by the page to be rendered is determined
Slightly, wherein the level allocation strategy includes element included by the number of plies and every layer;
According to the level allocation strategy and element property data, the rendering layer of the page to be rendered is rendered simultaneously
Display.
Further, the number of elements binding occurrence in the page to be rendered in each rendering layer is determined according to the display frame rate
Include:
If the display frame rate is less than preset frame rate value, page to be rendered is adjusted according to preset frame rate element mapping model
The number of elements binding occurrence in face in each rendering layer.
Further, further includes:
The number of elements binding occurrence is initialized according to device parameter.
Further, the device parameter includes following at least one: browser type, device type and equipment are differentiated
Rate.
Further, described according to the determining number of elements binding occurrence, determine element included by the page to be rendered
Level allocation strategy, comprising:
According to the element total quantity of the page to be rendered and the number of elements binding occurrence, the wash with watercolours that the page to be rendered includes is determined
The number of plies of layer is contaminated, and according to the number of plies, by each Elemental partition to each rendering layer;Or
It distributes to rendering layer, each element of the page to be rendered if any wash with watercolours successively according to setting rule
The number of elements that dye layer is distributed then increases rendering layer newly beyond the number of elements binding occurrence.
Further, described according to the determining number of elements binding occurrence, determine element included by the page to be rendered
Level allocation strategy, comprising:
Obtain the corresponding element property data of each element that the page to be rendered includes;
According to the element property data, the corresponding rendering channel type of each element is determined, wherein the rendering layer class
Type includes DOM and Canvas;
According to the number of elements binding occurrence, by each Elemental partition to the rendering layer of the correspondence rendering channel type,
Wherein, each rendering channel type in the page to be rendered is correspondingly arranged at least one rendering layer.
Further, according to the number of elements binding occurrence, by each Elemental partition to the correspondence rendering channel type
Rendering layer, comprising:
Determine the corresponding rendering frequency of each element;
The element is ranked up according to the rendering frequency;
According to the ranking results of each element, each order of elements is distributed corresponding extremely to the rendering channel type
A few rendering layer, wherein the number of elements in each rendering layer is matched with the number of elements binding occurrence.
Further, according to the number of elements binding occurrence, by each Elemental partition to the correspondence rendering channel type
Rendering layer, comprising:
Determine the corresponding rendering frequency of each element;
The rendering frequency of each element is matched at least two default rendering frequency ranges;
According to matching relationship, it is corresponding at least that each Elemental partition is preset to rendering frequency range into the rendering channel type
One rendering layer, wherein the number of elements in each rendering layer is matched with the number of elements binding occurrence.
Further, further includes:
Obtain the interaction coordinate of the user interactive operation inputted on the shown page;
According to the corresponding control area of each element on the interactive coordinate and the shown page, element to be adjusted is determined;
According to the element to be adjusted and the user interactive operation, the attribute of an element variation number to be rendered is determined
According to;
The element property data of the page to be rendered are updated according to the attribute change data.
Further, the control area of at least partly element of the shown page is retouched using scalable vector graphics
It states.
Further, according to the element to be adjusted and the user interactive operation, the category of the element to be rendered is determined
Property delta data includes:
Call the call back function of the element to be adjusted;
The call back function is executed, the element property data of element to be rendered are generated according to the user interactive operation, is made
For attribute change data, wherein the element to be rendered is identical or not identical as the element to be adjusted.
Further, in the rendering according to the level allocation strategy and element property data, to the page to be rendered
Before layer is rendered and is shown, further includes:
User interactive operation is obtained by manipulation layer, and attribute of an element to be adjusted is determined according to the user interactive operation
Delta data;
The element property data of the page to be rendered are updated according to the attribute change data by data Layer.
Further, according to the level allocation strategy and element property data, to the rendering layer of the page to be rendered
It is rendered and is shown, comprising:
Determine the element to be rendered in the page to be rendered;
Rendering layer where determining the element to be rendered according to the level allocation strategy;
Rendering layer where the element to be rendered is rendered, and is shown.
Further, it is executing according to the determining number of elements binding occurrence, is determining member included by the page to be rendered
When the level allocation strategy of element, further includes:
If detect predetermined condition, the adjustment of level allocation strategy is forbidden to operate, and by history level allocation strategy
As current level allocation strategy.
Further, the predetermined condition includes: processor high frequency occupancy, user interactive operation process and animation play mistake
At least one of journey.
Second aspect, the embodiment of the invention also provides a kind of page rendering device, which includes:
Frame per second obtains module, for obtaining the display frame rate of the page;
Binding occurrence obtains module, for determining the element in the page to be rendered in each rendering layer according to the display frame rate
Number constraint value;
Tactful determining module, for determining included by the page to be rendered according to the determining number of elements binding occurrence
The level allocation strategy of element, wherein the level allocation strategy includes element included by the number of plies and every layer;
Display module is rendered, is used for according to the level allocation strategy and element property data, to the page to be rendered
Rendering layer rendered and shown.
The third aspect, the embodiment of the invention also provides a kind of page rendering equipment, which includes: memory, has
The display screen and one or more processors of touch function;
The memory, for storing one or more programs;
When one or more of programs are executed by one or more of processors, so that one or more of processing
Device realizes any page rendering method in first aspect.
Fourth aspect, the embodiment of the invention also provides a kind of storage mediums comprising computer executable instructions, special
Sign is that the computer executable instructions by computer processor when being executed for executing as in claim first aspect
Any page rendering method.
The display frame rate that the present invention passes through the acquisition page;Each rendering in the page to be rendered is determined according to the display frame rate
Number of elements binding occurrence in layer;According to the determining number of elements binding occurrence, element included by the page to be rendered is determined
Level allocation strategy, wherein the level allocation strategy includes element included by the number of plies and every layer;According to the level
Allocation strategy and element property data are rendered and are shown to the rendering layer of the page to be rendered, solve DOM and
Canvas is due to respective defect bring consistency difference and realizes complicated problem, takes into account EMS memory occupation and rendering speed to realize
Equalization point, optimize rendering effect and loading velocity.
Detailed description of the invention
Figure 1A is a kind of flow chart for page rendering method that the embodiment of the present invention one provides;
Figure 1B is the schematic diagram for the page to be rendered that the embodiment of the present invention one provides;
Fig. 1 C is the schematic diagram of the page to be rendered after Figure 1B is rolled;
Fig. 1 D is a kind of schematic diagram for layer rendering that the embodiment of the present invention one provides;
Fig. 1 E is the relation schematic diagram of a kind of display frame rate that the embodiment of the present invention one provides and every layer of number of elements;
Fig. 2A is a kind of flow chart of page rendering method provided by Embodiment 2 of the present invention;
Fig. 2 B is the side that a kind of manipulation layer provided by Embodiment 2 of the present invention determines attribute of an element delta data to be rendered
The flow chart of method;
Fig. 2 C is a kind of stream for the method for determining attribute of an element delta data to be rendered provided by Embodiment 2 of the present invention
Cheng Tu;
Fig. 3 A is a kind of flow chart for page rendering method that the embodiment of the present invention three provides;
Fig. 3 B be the embodiment of the present invention three provide it is a kind of according to number of elements binding occurrence by Elemental partition to rendering layer
The flow chart of method;
Fig. 3 C is a kind of Elemental partition that provides of the embodiment of the present invention three to the flow chart of the method for rendering layer;
Fig. 3 D is another Elemental partition that provides of the embodiment of the present invention three to the flow chart of the method for rendering layer;
Fig. 4 is a kind of structural schematic diagram for page rendering device that the embodiment of the present invention four provides;
Fig. 5 is a kind of structural schematic diagram for page rendering equipment that the embodiment of the present invention five provides.
Specific embodiment
The present invention is described in further detail with reference to the accompanying drawings and examples.It is understood that this place is retouched
The specific embodiment stated is used only for explaining the present invention rather than limiting the invention.It also should be noted that in order to just
Only the parts related to the present invention are shown in description, attached drawing rather than entire infrastructure.
Embodiment one
Figure 1A is a kind of flow chart for page rendering method that the embodiment of the present invention one provides, and the present embodiment is applicable to clear
Device of looking at renders the technical field of webpage, and this method can be executed by the equipment comprising browser kernel.Specifically, browser is most
The part of important core in other words is rendering engine, commonly referred to as " browser kernel ".Browser kernel is responsible for webpage language
The explanation (one under such as standard generalized markup language is applied HTML, JavaScript) of method simultaneously renders (display) webpage.So
Rendering engine used by commonly referred browser kernel i.e. browser, rendering engine determine how browser shows
The content of webpage and the format information of the page.It should be noted that solution of the different browser kernels to program grammer
Release also different, therefore rendering (display) effect of same webpage in the browser of different kernels may also be different.Into one
Step, the present embodiment is not construed as limiting the equipment comprising browser, can be tablet computer, PC, mobile terminal device,
Work station or server etc..The present embodiment is not construed as limiting the existing way of browser kernel, can be integrated in browser,
It is also possible to be integrated in other applications (such as WEB application program).
A referring to Fig.1, this method specifically comprise the following steps:
S110, the display frame rate for obtaining the page.
In the present embodiment, the page is the picture that webpage is presented after browser-interpreted.
Specifically, text and picture are two most basic elements for constituting a webpage.In addition to this, the element of webpage
It further include animation, music, program etc..Webpage is actually a text-only file, by miscellaneous label to page
(such as font, color, size) is described in the elements such as text, picture, table, sound on face, and browser is then to these
Label, which is explained and rendered, generates the page (page is equivalent to the pixel on screen), then just obtains the picture that user is seen
Face.
In the present embodiment, display frame rate is the measurement for measuring display frame number, and measurement unit is display frame number per second
(Frames per Second, FPS) or " hertz " (Hz), the present embodiment is illustrated by taking FPS as an example.Further, this implementation
Display frame rate in example is used for the refreshing frequency of representation page.It, can not by primary rendering for a page
With, and must be repeated.Once the page changes (such as element switches, and for another example animation changes, for another example page scroll),
The page needs to be refreshed.
The present embodiment is not construed as limiting the acquisition modes of the display frame rate of the page.
In one embodiment, the display frame rate of the page is obtained by developer's tool of browser.Illustratively, pass through
Chrome browser offer developer's tool can open page display frame rate and observe in real time and page graphics processor
The observation of (Graphics Processing Unit, GPU) utilization rate.
In one embodiment, the display frame rate of the page is obtained by preset webpage performance test application interface.It is exemplary
, the display frame rate of the page is obtained by Frame Timing API, Frame Timing API is Web Performance
A wherein member in Timing API standard.Web Performance Timing API is a set of performance that W3C is released
API standard is used to help developer and carries out accurate analysis and control to the performance of website various aspects, promotes Web site performance.
S120, number of elements binding occurrence in the page to be rendered in each rendering layer is determined according to the display frame rate.
In the present embodiment, Figure 1B is the schematic diagram for the page to be rendered that the embodiment of the present invention one provides.Fig. 1 C is Figure 1B rolling
The schematic diagram of the page to be rendered after dynamic.B and Fig. 1 C referring to Fig.1, the page to be rendered be part not shown in webpage or
The part of continuous updating.Wherein, the part not being shown in webpage can be since the page is more than that display area (can be and set
The standby size of screen or the display interface size of browser), it needs through the mobile partial page for being able to show.Continuous updating
Part can be animation, such as interface.
In the present embodiment, rendering layer is equivalent to figure layer, for drawing element.Rendering layer is mainly used for being converted to element into screen
Pixel on curtain.The present embodiment is not construed as limiting the type of rendering layer, can be DOM type either Canvas type.
The present embodiment renders the page to be shown using the technology of layer rendering.Fig. 1 D is that the embodiment of the present invention one mentions
A kind of schematic diagram of the layer rendering supplied.With reference to Fig. 1 D, the page to be shown is divided into three layers of rendering layer and is rendered respectively.Pass through
The opposite hierarchical relationship for adjusting three layers of rendering layer can make the page to be shown have different display effects.Further, by
It needs to be rendered again as long as changing in page elements, is placed on element similar in change frequency together by layer rendering
One rendering layer is rendered, it is possible to reduce render times, to improve rendering and the display performance of the page.
In the present embodiment, number of elements binding occurrence is chosen as the maximum value of number of elements in preset every layer of rendering layer, or
Person is also possible to the expression of the forms such as minimum value or quantitative range value.Fig. 1 E is a kind of display that the embodiment of the present invention one provides
The relation schematic diagram of frame per second and every layer of number of elements.With reference to Fig. 1 E, experimental data shows that the element of each rendering layer is more, page
The display frame rate in face can lower (i.e. the page gets over Caton), so each layer of rendering layer accommodate number of elements cannot be too many.And
In the case that element total amount is constant, it is assumed that every layer of receiving number of elements is the same, and the number of plies of rendering layer is more, and page fluency is also got over
It is low.So the number of plies and every layer of number of elements need to keep balance in the case where element total amount is constant.
The present embodiment determines that the concrete mode of number of elements binding occurrence is not construed as limiting to according to display frame rate.
In one embodiment, by the relationship according to display frame rate and every layer of number of elements, number of elements binding occurrence is determined,
To constraining according to number of elements binding occurrence every layer of number of elements, the flat of the number of plies and every layer of number of elements is further controlled
Weighing apparatus, guarantees the rendering of the page and the raising of display performance.
S130, according to the determining number of elements binding occurrence, determine the level point of element included by the page to be rendered
With strategy, wherein the level allocation strategy includes element included by the number of plies and every layer.
In the present embodiment, when rendering to the page to be rendered, the Elemental partition for including by the page to be rendered is needed extremely
Corresponding rendering layer rendering.During carrying out Elemental partition, need according to number of elements binding occurrence to every layer of number of elements
It is constrained.And then under the situation in the page to be rendered known to element total amount, rendering layer in the page to be rendered can be determined
The number of plies and each rendering layer element for including to get to level allocation strategy.
Whether the present embodiment is to evenly distribute to be not construed as limiting to Elemental partition, as long as meeting every layer of number of elements and first prime number
Measure binding occurrence matching.
S140, the rendering layer progress according to the level allocation strategy and element property data, to the page to be rendered
It renders and shows.
In the present embodiment, element property data are for defining element.For example, element is button, corresponding element property number
Show that text (size, font and the color of text), button position (can be relative position or absolute position according to can be button
Set) and Button Color etc..
In one embodiment, determined according to level allocation strategy the rendering layer in the page to be rendered the number of plies and every layer
The corresponding element of rendering layer.The element that every layer of rendering layer is assigned to it renders according to the nearly row of element property data, is converted into shielding
Pixel on curtain.It is shown to the final display page is generated after the rendering result superposition of all rendering layers.
The technical solution of the present embodiment, by determining each rendering in the page to be rendered according to the display frame rate for obtaining the page
Number of elements binding occurrence in layer;And the level of element included by the page to be rendered is determined according to the number of elements binding occurrence
Allocation strategy, wherein the level allocation strategy includes element included by the number of plies and every layer, later according to the level point
With strategy and element property data, the rendering layer of the page to be rendered is rendered and is shown solve DOM and Canvas
It due to respective defect bring consistency difference and realizes complicated problem, number of elements constraint is adjusted according to display frame rate to realize
Value optimizes rendering effect and loading velocity to take into account the equalization point of EMS memory occupation and rendering speed.
Embodiment two
Fig. 2A is a kind of flow chart of page rendering method provided by Embodiment 2 of the present invention, and the present embodiment is in above-mentioned implementation
It further refines on the basis of example, page rendering is optimized using the design of unidirectional traffic.Wherein, unidirectional traffic is set
Meter i.e. manipulation layer between rendering layer data flowing be it is unidirectional, data Layer variation will not influence manipulate layer.Any rendering
The variation of layer changes according to the variation of data Layer.
With reference to Fig. 2A, which specifically comprises the following steps:
S210, user interactive operation is obtained by manipulation layer, and element to be adjusted is determined according to the user interactive operation
Attribute change data.
In the present embodiment, manipulation layer is in response to the functional module of user interactive operation.User interactive operation includes at least: point
It hits and pulls.
The present embodiment is not construed as limiting the specific response of user interactive operation, can carry out function by customized event system
It can limit.
In one embodiment, operation layer response user interactive operation can be the selected element of activation.
In one embodiment, operation layer response user interactive operation can be modification element property data.
In one embodiment, Fig. 2 B is that a kind of manipulation layer provided by Embodiment 2 of the present invention determines attribute of an element to be rendered
S210 is further refined as S211-S214 with reference to Fig. 2 B by the flow chart of the method for delta data.
The interaction coordinate for the user interactive operation that S211, acquisition input on the shown page.
In the present embodiment, interaction coordinate is the position that user interactive operation acts on the display page.The present embodiment is to interaction
Coordinate is not construed as limiting, which can be the either opposite polar coordinates of relative coordinate, absolute coordinate.Wherein, absolute coordinate
Be using point O as origin, it is as a reference point, to position the specific location of certain point in plane, representation method are as follows: A (X, Y);Relatively
Coordinate is with the upper for reference point of the point, to position the specific location of certain point in plane, representation method are as follows: A (@△
X, △ Y);Opposite polar coordinates refer to that certain point is specific to indicate relative to upper shift length, direction and angle in plane out
Method are as follows: A (@d < α).
The present embodiment is not construed as limiting the acquisition modes of interaction coordinate, can be and is obtained by touching screen, can also be led to
Cross input equipment (such as mouse, keyboard and touch tablet) acquisition.
In one embodiment, the control area of at least partly element of the shown page is carried out using scalable vector graphics
Description.
In the present embodiment, scalable vector graphics (Scalable Vector Graphics, SVG) are that one kind is based on to expand
It opens up markup language (XML), for describing the graphical format of two-dimension vector graphics.Illustratively, circle can use the center of circle and radius
It indicates, rectangle can be indicated with long and width.Control area can be made by describing control area by using scalable vector graphics
It is not limited to rectangular area, so that the display shape of the accurate corresponding element in control area.
S212 determines member to be adjusted according to the corresponding control area of each element on the interactive coordinate and the shown page
Element.
In the present embodiment, element to be adjusted is the element of user interactive operation effect.Element can be fallen by interaction coordinate
Corresponding control area, and then determine that the element is element to be adjusted.
S213, according to the element to be adjusted and the user interactive operation, determine that the attribute of an element to be rendered becomes
Change data.
In the present embodiment, element to be rendered changes for element property data causes display effect needs changed
Element.
In one embodiment, Fig. 2 C is that a kind of determination attribute of an element to be rendered provided by Embodiment 2 of the present invention changes number
According to method flow chart, be refined as S2131-S2132 with reference to Fig. 2 C, S213.
S2131, the call back function for calling the element to be adjusted.
In the present embodiment, call back function corresponds to the letter needed to be implemented after element to be adjusted is acted on by user interactive operation
Number.The specific response of user interactive operation is defined in call back function.
S2132, the call back function is executed, the element property number of element to be rendered is generated according to the user interactive operation
According to as attribute change data, wherein the element to be rendered is identical or not identical as the element to be adjusted.
In the present embodiment, the specific response that user interactive operation is defined in call back function can be modification element property number
According to can determine element to be rendered according to by modification element property data.
It should be noted that the element to be rendered is identical or not identical as the element to be adjusted.Illustratively, user
After clicking button, button is arranged to be clicked state (one of element property data of button).Further, executive button
It is clicked corresponding call back function.Illustratively, which is not directed to the display effect of change button itself, and is used for
The display content of animation cloth (another element) is changed, then the element property data of painting canvas are modified, and the modification content is related to
The display effect of painting canvas is changed, then painting canvas is element to be rendered, and button is not element to be rendered.Certainly, if the readjustment letter of button
Number is related to changing the display effect of button itself, such as changes Button Color, then button is also element to be rendered.
S214, the element property data that the page to be rendered is updated according to the attribute change data.
In the present embodiment, element to be rendered is the element on the page to be rendered, needs to be become according to attribute of an element to be rendered
Change the element property data that data update the page to be rendered.
S220, the element property data for updating the page to be rendered according to the attribute change data by data Layer.
In the present embodiment, step S214 can be executed by the data Layer in S220.
S230, the rendering layer progress according to the level allocation strategy and element property data, to the page to be rendered
It renders and shows.
The technical solution of the present embodiment obtains user interactive operation by manipulation layer, and according to the user interactive operation
It determines attribute of an element delta data to be adjusted, and the page to be rendered is updated according to the attribute change data by data Layer
Element property data, later according to the level allocation strategy and element property data, to the rendering layer of the page to be rendered
It is rendered and is shown, by manipulating the separation of layer, data Layer and rendering layer, to realize that unidirectional traffic designs, reduce rendering
Consumption, guarantee page fluency.
Embodiment three
Fig. 3 A is a kind of flow chart for page rendering method that the embodiment of the present invention three provides, and the present embodiment is in above-mentioned implementation
It is further refined on the basis of example, with reference to Fig. 3 A, which specifically comprises the following steps:
S310, the display frame rate for obtaining the page.
If S320, the display frame rate be less than preset frame rate value, according to preset frame rate element mapping model adjustment to
Render the number of elements binding occurrence in the page in each rendering layer.
In the present embodiment, preset frame rate value be setting the smallest frame rate value, when display frame rate be less than preset frame rate value, then
It is bad that instruction page renders performance.The present embodiment is not construed as limiting the occurrence of preset frame rate value, different according to the content of webpage
And different values is taken, such as rolling, animation operation to be made to seem smooth, it is necessary to carry out with the 60 frames above frame per second per second
Rendering;For another example field of play, needing display frame rate to reach, 40 frames are per second can be referred to as smoothness above.
The present embodiment is not construed as limiting the specific implementation of preset frame rate element mapping model.
In one embodiment, it can be returned and be divided according to the relation data of the display frame rate that experiment obtains and every layer of number of elements
Analysis obtains.
It should be noted that in one embodiment, initializing the number of elements binding occurrence according to device parameter.It is exemplary
, the device parameter includes following at least one: browser type, device type and device resolution.
In this implementation, browser type is also possible to browser kernel type.The rendering of verification webpage in different browsers
There is a little difference.Device type is the difference according to hardware configuration (such as image processor and central processing unit), the property of rendering
It can be also different.Device resolution is related to pixel number to be processed needed for rendering every time, and the performance of rendering is also different.
In one embodiment, according to the historical data of device parameter and number of elements binding occurrence, determine that device parameter is corresponding
Number of elements binding occurrence.
S330, according to the determining number of elements binding occurrence, determine the level point of element included by the page to be rendered
With strategy.
The present embodiment is not construed as limiting the assignment order of the number of plies and corresponding element.
In one embodiment, it according to the element total quantity of the page to be rendered and the number of elements binding occurrence, determines to wash with watercolours
The number of plies for the rendering layer that the dye page includes, and according to the number of plies, by each Elemental partition to each rendering layer.
In one embodiment, by each element of the page to be rendered, according to setting rule, distribution is extremely rendered successively
Layer, if the number of elements that any rendering layer is distributed increases rendering layer newly beyond the number of elements binding occurrence.
In one embodiment, Fig. 3 B be the embodiment of the present invention three provide it is a kind of according to number of elements binding occurrence by element point
It is assigned to the flow chart of the method for rendering layer, with reference to Fig. 3 B, S330 can be further refined as: S331-S333:
S331, the corresponding element property data of each element that the page to be rendered includes are obtained.
In the present embodiment, the display effect of element whether is influenced according to the variation of the element property data in data Layer, really
The each element (element i.e. to be rendered) that the page to be rendered includes is made, and obtains the element category of each element to be rendered from data Layer
Property data.
S332, according to the element property data, determine the corresponding rendering channel type of each element, wherein the wash with watercolours
Contaminating channel type includes DOM and Canvas.
In the present embodiment, DOM is the programming interface of HTML and XML document, and web page is connect with script or program language
Get up;Painting canvas (Canvas) element is a part of HTML5, allows scripting language dynamic rendering bit image.DOM rendering layer uses
Simply, and the automatic re-rendered of browser can also be realized without triggering rendering manually using the component help built in browser
Function.But the rendering of DOM rendering layer is not flexible, and can occupy a large amount of memories, in addition, different browsers realization is variant, it is difficult to
Being consistent property.Canvas superior performance, committed memory is few, can reduce duplicate rendering as far as possible, there is stronger flexibility, institute
There is rendering that can voluntarily control, is applicable to the page of processing a great number of elements.But Canvas realization is more complicated, and works as page
It face rendering region may be very slow when very big.
According to the different characteristics of DOM and Canvas, in element property data, the corresponding rendering layer of each element can be marked
Type has reached characteristic of elements and rendering layer type matching, to realize preferable rendering effect.
S333, according to the number of elements binding occurrence, by each Elemental partition to the wash with watercolours of the correspondence rendering channel type
Contaminate layer, wherein each rendering channel type in the page to be rendered is correspondingly arranged at least one rendering layer.
Likewise, the present embodiment is not construed as limiting the assignment order of the number of plies and corresponding element.
In one embodiment, the number of plies of the corresponding rendering layer of each rendering channel type, can be by each rendering channel type pair
The sum for the element answered is determined with the ratio of number of elements binding occurrence.If the element sum of Canvas type is 40, number of elements
Binding occurrence is 8, then the number of plies of Canvas rendering layer is 5.
In one embodiment, Fig. 3 C be a kind of Elemental partition that provides of the embodiment of the present invention three to rendering layer method stream
Cheng Tu, with reference to Fig. 3 C, S333 can be further refined as S3331-S3333:
S3331, the corresponding rendering frequency of each element is determined.
In the present embodiment, rendering frequency refers to that element needs probability value to be refreshed, can be obtained by historical data.Pass through
Determine that the corresponding rendering frequency of each element (is background as rendering frequency is low, a height of prospect, for another example, low rendering frequency is text, high
For animation), to save the resource expended when rendering.
S3332, the element is ranked up according to the rendering frequency.
The present embodiment is not construed as limiting the specific implementation of sequence, can be using common rows such as quicksort and bucket sorts
Sequence algorithm.
S3333, according to the ranking results of each element, each order of elements is distributed to the rendering channel type pair
At least one answered rendering layer, wherein number of elements and the number of elements binding occurrence in each rendering layer
Match.
The present embodiment is 47 with number of elements, and the member that wherein DOM renders type is known as 24, and Canvas renders the member of type
It is illustrated for being known as 23, number of elements binding occurrence is 8 (maximum values of every layer of number of elements), and it is corresponding that DOM renders type
Element carry out rendering frequency sequence after distribution to DOM rendering layer, the DOM rendering layer after distribute haves three layers, every layer member prime number
Amount is [8 8 8];The corresponding element of Canvas rendering type distributes after carrying out rendering frequency sequence to Canvas rendering layer,
Canvas rendering layer after being distributed haves three layers, and every layer of number of elements is [8 8 7].
In the present embodiment, after element is sorted according to rendering frequency, the assignment order of element may further determine that, thus
So that the probability that the close element of rendering frequency is placed on same rendering layer increases, so the element for preventing rendering frequency small due to
The big element of rendering frequency is placed in same layer, and is frequently rendered, and wasting of resources when rendering is caused.
In one embodiment, Fig. 3 D is method of another Elemental partition that provides of the embodiment of the present invention three to rendering layer
Flow chart, with reference to Fig. 3 D, S333 can be further refined as S3334-S3336:
S3334, the corresponding rendering frequency of each element is determined.
S3335, the rendering frequency of each element is matched at least two default rendering frequency ranges.
In the present embodiment, the rendering frequency of each element is matched at least two default rendering frequency ranges, determines each member
The corresponding default rendering frequency range of element, the element for being guaranteed at identical default rendering frequency range are assigned to same rendering layer.Herein
Default rendering frequency range does not distinguish the rendering type of each element.It should be noted that default rendering frequency in the present embodiment
The set-up mode of section is not construed as limiting.In one embodiment, the default rendering frequency range of each rendering channel type setting at least two, will be each
The rendering frequency of the corresponding element of rendering type is matched at least two default rendering frequency ranges.
S3336, according to matching relationship, it is corresponding that each Elemental partition is preset to rendering frequency range into the rendering channel type
At least one described rendering layer, wherein the number of elements in each rendering layer is matched with the number of elements binding occurrence.
The present embodiment is 47 with number of elements, and the member that wherein DOM renders type is known as 24, and Canvas renders the member of type
It is illustrated for being known as 23, number of elements binding occurrence is the maximum value of 8 every layer of number of elements), it is corresponding that DOM renders type
Element is divided into [8 7 9] according to default rendering frequency range, wherein 9 be more than number of elements binding occurrence, overflows, then creates DOM
Rendering layer, then the DOM rendering layer after distributing have 4 layers, and every layer of number of elements is [8 78 1];It is corresponding that Canvas renders type
Element is divided into [16 7] according to default rendering frequency range, wherein 16 be more than number of elements binding occurrence, is overflowed, and is created
Canvas rendering layer, then Canvas rendering layer haves three layers, and every layer of number of elements is [8 8 7].
In the present embodiment, after element is sorted according to rendering frequency, the locating default wash with watercolours of element may further determine that
Frequency range is contaminated, so that rendering frequency increases in the probability that the element of same default rendering frequency range is placed on same rendering layer, in turn
The element for preventing rendering frequency small is frequently rendered since the element big with rendering frequency is placed in same layer, causes to render
When the wasting of resources.
It should be noted that when executing S330, further includes: if detect predetermined condition, level is forbidden to distribute
The adjustment operation of strategy, and using history level allocation strategy as current level allocation strategy.
In the present embodiment, the present embodiment is not construed as limiting the specific opportunity for the adjustment operation for forbidding level allocation strategy, can
The operation of determining level allocation strategy is still carried out to be, but the tune in practical render process without level allocation strategy
It is whole, it is rendered according to history level allocation strategy;It is also possible to the operation without determining level allocation strategy, directly uses
History level allocation strategy is rendered.
In one embodiment, the predetermined condition includes: that processor high frequency occupies, user interactive operation process and animation are broadcast
Let off at least one of journey.
It is very to expend the operation of resource due to carrying out level distribution, if carrying out layer under predetermined condition in the present embodiment
Fraction timing be easy to cause the Caton of the page, so that browsing is not smooth enough.The present embodiment is then prohibited by detecting predetermined condition
The only adjustment operation of level allocation strategy, can forbid generating the negative consequence.
S340, element to be rendered in the page to be rendered is determined.
In the present embodiment, the display effect of element whether is influenced according to the variation of the element property data in data Layer, really
Make each element (element i.e. to be rendered) that the page to be rendered includes.
S350, the element place to be rendered rendering layer is determined according to the level allocation strategy.
In the present embodiment, level allocation strategy includes element included by the number of plies and every layer, according to level allocation strategy
It can determine the corresponding rendering layer of element to be rendered.
S370, rendering layer where the element to be rendered is rendered, and shown.
In the present embodiment, if part or all of element is element to be rendered in rendering layer, which needs by again
Rendering.
The technical solution of the present embodiment, if the display frame rate of the page obtained by judgement is less than preset frame rate value,
The number of elements binding occurrence in the page to be rendered in each rendering layer is adjusted according to preset frame rate element mapping model, into
And according to the determining number of elements binding occurrence, determine the level allocation strategy of element included by the page to be rendered, it
Afterwards, the corresponding element property data of each element that the page to be rendered includes are obtained, and according to the element property data, really
The corresponding rendering channel type (wherein, the rendering channel type includes DOM and Canvas) of each element is determined, later, according to institute
Number of elements binding occurrence is stated, the rendering layer of each Elemental partition to the correspondence rendering channel type is (wherein, described to be rendered
Each rendering channel type in the page is correspondingly arranged at least one rendering layer), in turn, determine in the page to be rendered to
Element is rendered, and the element place to be rendered rendering layer is determined according to the level allocation strategy, later to described to be rendered
Rendering layer where element is rendered, and is shown, solves DOM and Canvas since respective defect bring consistency is poor and real
Existing complicated problem adjusts number of elements binding occurrence according to display frame rate to realize, to take into account EMS memory occupation and rendering speed
Equalization point, optimize rendering effect and loading velocity.Further, the assignment order of element is determined, so that rendering frequency
The probability that close element is placed on same rendering layer increases, alternatively, determine the locating default rendering frequency range of element, so that
Rendering frequency increases in the probability that the element of same default rendering frequency range is placed on same rendering layer, and then prevents rendering frequency small
Element is frequently rendered since the element big with rendering frequency is placed in same layer, causes wasting of resources when rendering.
Example IV
Fig. 4 is a kind of structural schematic diagram for page rendering device that the embodiment of the present invention four provides, and the present embodiment is applicable
In the technical field of browser rendering webpage, which can be used for the equipment comprising browser kernel.Specifically, browser is most
The part of important core in other words is rendering engine, commonly referred to as " browser kernel ".Browser kernel is responsible for webpage language
The explanation (one under such as standard generalized markup language is applied HTML, JavaScript) of method simultaneously renders (display) webpage.So
Rendering engine used by commonly referred browser kernel i.e. browser, rendering engine determine how browser shows
The content of webpage and the format information of the page.It should be noted that solution of the different browser kernels to program grammer
Release also different, therefore rendering (display) effect of same webpage in the browser of different kernels may also be different.Into one
Step, the present embodiment is not construed as limiting the equipment comprising browser, can be tablet computer, PC, mobile terminal device,
Work station or server etc..The present embodiment is not construed as limiting the existing way of browser kernel, can be integrated in browser,
It is also possible to be integrated in other applications (such as WEB application program).
Referring to Fig. 4, which is specifically included such as flowering structure: frame per second obtains module 410, binding occurrence obtains module 420, strategy
Determining module 430 and rendering display module 440.
Frame per second obtains module 410, for obtaining the display frame rate of the page.
Binding occurrence obtains module 420, for being determined in the page to be rendered in each rendering layer according to the display frame rate
Number of elements binding occurrence.
Tactful determining module 430, for determining included by the page to be rendered according to the determining number of elements binding occurrence
Element level allocation strategy, wherein the level allocation strategy includes element included by the number of plies and every layer.
Display module 440 is rendered, is used for according to the level allocation strategy and element property data, to the page to be rendered
The rendering layer in face is rendered and is shown.
The technical solution of the present embodiment, by determining each rendering in the page to be rendered according to the display frame rate for obtaining the page
Number of elements binding occurrence in layer;And the level of element included by the page to be rendered is determined according to the number of elements binding occurrence
Allocation strategy, wherein the level allocation strategy includes element included by the number of plies and every layer, later according to the level point
With strategy and element property data, the rendering layer of the page to be rendered is rendered and is shown solve DOM and Canvas
It due to respective defect bring consistency difference and realizes complicated problem, number of elements constraint is adjusted according to display frame rate to realize
Value optimizes rendering effect and loading velocity to take into account the equalization point of EMS memory occupation and rendering speed.
Based on the above technical solution, binding occurrence acquisition module 420 includes:
Number of elements constrains value cell, if being less than preset frame rate value for the display frame rate, according to preset frame rate
Element mapping model adjusts the number of elements binding occurrence in the page to be rendered in each rendering layer.
Based on the above technical solution, binding occurrence acquisition module 420 includes:
Number of elements binding occurrence initialization unit initializes the number of elements binding occurrence according to device parameter.
Based on the above technical solution, the device parameter includes following at least one: browser type, equipment class
Type and device resolution.
Based on the above technical solution, tactful determining module 430 includes:
First policy determining unit, for according to the page to be rendered element total quantity and the number of elements binding occurrence,
The number of plies for the rendering layer that the page to be rendered includes is determined, and according to the number of plies, by each Elemental partition to each rendering layer;With
In by each element of the page to be rendered, distributed successively to rendering layer according to setting rule, if any rendering layer institute
The number of elements of distribution exceeds the number of elements binding occurrence, then increases rendering layer newly.
Based on the above technical solution, tactful determining module 430 includes:
Element property data capture unit, the corresponding element property of each element for including for obtaining the page to be rendered
Data.
Rendering layer type determining units, for determining the corresponding rendering of each element according to the element property data
Channel type, wherein the rendering channel type includes DOM and Canvas.
Elemental partition unit is used for according to the number of elements binding occurrence, by each Elemental partition to the correspondence wash with watercolours
Contaminate the rendering layer of channel type, wherein each rendering channel type in the page to be rendered is correspondingly arranged at least one rendering
Layer.
Based on the above technical solution, Elemental partition unit includes:
First rendering frequency determines subelement, for determining the corresponding rendering frequency of each element.
Frequency sorting subunit is rendered, for being ranked up according to the rendering frequency to the element.
First Elemental partition subelement distributes each order of elements for the ranking results according to each element
To at least one corresponding described rendering layer of the rendering channel type, wherein number of elements and institute in each rendering layer
State the matching of number of elements binding occurrence.
Based on the above technical solution, Elemental partition unit includes:
Second rendering frequency determines subelement, for determining the corresponding rendering frequency of each element.
Render frequency band match subelement, for by the rendering frequency of each element and at least two default rendering frequency ranges into
Row matching.
Second element distributes subelement, is used for according to matching relationship, by each Elemental partition to the rendering channel type
In preset corresponding at least one the described rendering layer of rendering frequency range, wherein number of elements in each rendering layer with it is described
The matching of number of elements binding occurrence.
Based on the above technical solution, the page rendering device further include:
Interaction coordinate obtaining module, for obtaining the interaction coordinate of the user interactive operation inputted on the shown page.
Element determining module to be adjusted, for according to the corresponding control of each element on the interactive coordinate and the shown page
Region determines element to be adjusted.
Attribute change data determining module, for determining institute according to the element to be adjusted and the user interactive operation
State attribute of an element delta data to be rendered.
Element property data update module, for updating the element property of the page to be rendered according to the attribute change data
Data.
Based on the above technical solution, the control area of at least partly element of the shown page uses scalable arrow
Spirogram shape is described.
Based on the above technical solution, attribute change data determining module includes:
Call back function call unit, for calling the call back function of the element to be adjusted.
Call back function execution unit generates to be rendered for executing the call back function according to the user interactive operation
The element property data of element, as attribute change data, wherein the element to be rendered it is identical as the element to be adjusted or
It is not identical.
Based on the above technical solution, page rendering device further include:
Layer module is manipulated, for according to the level allocation strategy and element property data, to the page to be rendered
Rendering layer rendered and shown before, user interactive operation is obtained by manipulation layer, and according to the user interactive operation
Determine attribute of an element delta data to be adjusted.
Data layer module, for according to the level allocation strategy and element property data, to the page to be rendered
Rendering layer rendered and shown before, the element of the page to be rendered is updated according to the attribute change data by data Layer
Attribute data.
Based on the above technical solution, rendering display module 440 includes:
Element determination unit to be rendered, for determining the element to be rendered in the page to be rendered.
Rendering layer determination unit, for rendering layer where determining the element to be rendered according to the level allocation strategy.
Display unit is rendered, for being rendered to rendering layer where the element to be rendered, and is shown.
Based on the above technical solution, tactful determining module 430 further include:
Forbid adjusting operating unit, if when for detecting predetermined condition, the adjustment of level allocation strategy is forbidden to operate,
And using history level allocation strategy as current level allocation strategy.
Based on the above technical solution, the predetermined condition includes: processor high frequency occupancy, user interactive operation mistake
At least one of journey and animation play process.
Method provided by any embodiment of the invention can be performed in the said goods, has the corresponding functional module of execution method
And beneficial effect.
Embodiment five
Fig. 5 is a kind of structural schematic diagram for page rendering equipment that the embodiment of the present invention five provides.As shown in figure 5, the page
Face rendering apparatus includes: processor 50, memory 51, the display screen 52 with touch function, input unit 53, output device 54
And communication device 55.The quantity of processor 50 can be one or more in the page rendering equipment, at one in Fig. 5
For reason device 50.The quantity of memory 51 can be one or more in the page rendering equipment, with a memory in Fig. 5
For 51.The processor 50 of the page rendering equipment, memory 51, display screen 52, input unit 53, output device 54 and logical
T unit 55 can be connected by bus or other modes, in Fig. 5 for being connected by bus.In embodiment, page wash with watercolours
Dyeing equipment can be the computer comprising browser kernel, mobile phone, plate or interactive intelligent tablet computer etc..In embodiment, with page wash with watercolours
Dyeing equipment be interactive intelligent tablet computer for, be described.
Memory 51 is used as a kind of computer readable storage medium, can be used for storing software program, journey can be performed in computer
Sequence and module, the corresponding program instruction/module of page rendering method as described in any embodiment of that present invention is (for example, the page
Frame per second in rendering device obtains module 410, binding occurrence acquisition module 420, tactful determining module 430 and rendering display module
440).Memory 51 can mainly include storing program area and storage data area, wherein storing program area can storage program area,
Application program needed at least one function;Storage data area, which can be stored, uses created data etc. according to equipment.In addition,
Memory 51 may include high-speed random access memory, can also include nonvolatile memory, for example, at least a disk
Memory device, flush memory device or other non-volatile solid state memory parts.In some instances, memory 51 can be wrapped further
The memory remotely located relative to processor 50 is included, these remote memories can pass through network connection to equipment.Above-mentioned net
The example of network includes but is not limited to internet, intranet, local area network, mobile radio communication and combinations thereof.
Display screen 52 is the display screen 52 with touch function, can be capacitance touch screen, electromagnetic touch screen or red
Outer touch screen.In general, display screen 52 is used to show data according to the instruction of processor 50, it is also used to reception and acts on display
The touch operation of screen 52, and corresponding signal is sent to processor 50 or other devices.Optionally, when display screen 52 is infrared
It further include infrared touch frame when touch screen, which is arranged in the surrounding of display screen 52, can be also used for receiving
Infrared signal, and the infrared signal is sent to processor 50 or other equipment.
Communication device 55 communicates to connect for establishing with other equipment, can be wire communication device and/or channel radio
T unit.
Input unit 53 can be used for receiving the number or character information of input, and generate the use with page rendering equipment
Family setting and the related key signals input of function control, can also be the camera for obtaining image and obtain audio number
According to pick up facility.Output device 54 may include the audio frequency apparatuses such as loudspeaker.It should be noted that input unit 53 and output
The concrete composition of device 54 may be set according to actual conditions.The software journey that processor 50 is stored in memory 51 by operation
Sequence, instruction and module realize above-mentioned page rendering side thereby executing the various function application and data processing of equipment
Method.
Method provided by any embodiment of the invention can be performed in the said goods, has the corresponding functional module of execution method
And beneficial effect.
Embodiment six
The embodiment of the present invention six also provides a kind of storage medium comprising computer executable instructions, and the computer can be held
Row instruction by computer processor when being executed for executing a kind of page rendering method, comprising:
Obtain the display frame rate of the page;
The number of elements binding occurrence in the page to be rendered in each rendering layer is determined according to the display frame rate;
According to the determining number of elements binding occurrence, the level distribution plan of element included by the page to be rendered is determined
Slightly, wherein the level allocation strategy includes element included by the number of plies and every layer;
According to the level allocation strategy and element property data, the rendering layer of the page to be rendered is rendered simultaneously
Display.
Certainly, a kind of storage medium comprising computer executable instructions, computer provided by the embodiment of the present invention
The page rendering method operation that executable instruction is not limited to the described above, can also be performed provided by any embodiment of the invention
Relevant operation in page rendering method, and have corresponding function and beneficial effect.
By the description above with respect to embodiment, it is apparent to those skilled in the art that, the present invention
It can be realized by software and required common hardware, naturally it is also possible to which by hardware realization, but in many cases, the former is more
Good embodiment.Based on this understanding, technical solution of the present invention substantially in other words contributes to the prior art
Part can be embodied in the form of software products, which can store in computer readable storage medium
In, floppy disk, read-only memory (Read-Only Memory, ROM), random access memory (Random such as computer
Access Memory, RAM), flash memory (FLASH), hard disk or CD etc., including some instructions are with so that a computer is set
Standby (can be robot, personal computer, server or the network equipment etc.) executes page described in any embodiment of that present invention
Face rendering method.
It is worth noting that, included each unit and module are only patrolled according to function in above-mentioned page rendering device
It volume is divided, but is not limited to the above division, as long as corresponding functions can be realized;In addition, each function list
The specific name of member is also only for convenience of distinguishing each other, the protection scope being not intended to restrict the invention.
It should be appreciated that each section of the invention can be realized with hardware, software, firmware or their combination.Above-mentioned
In embodiment, software that multiple steps or method can be executed in memory and by suitable instruction execution system with storage
Or firmware is realized.It, and in another embodiment, can be under well known in the art for example, if realized with hardware
Any one of column technology or their combination are realized: having a logic gates for realizing logic function to data-signal
Discrete logic, with suitable combinational logic gate circuit specific integrated circuit, programmable gate array (PGA), scene
Programmable gate array (FPGA) etc..
In the description of this specification, reference term " one embodiment ", " some embodiments ", " example ", " specifically show
The description of example " or " some examples " etc. means specific features, structure, material or spy described in conjunction with this embodiment or example
Point is included at least one embodiment or example of the invention.In the present specification, schematic expression of the above terms are not
Centainly refer to identical embodiment or example.Moreover, particular features, structures, materials, or characteristics described can be any
One or more embodiment or examples in can be combined in any suitable manner.
Note that the above is only a better embodiment of the present invention and the applied technical principle.It will be appreciated by those skilled in the art that
The invention is not limited to the specific embodiments described herein, be able to carry out for a person skilled in the art it is various it is apparent variation,
It readjusts and substitutes without departing from protection scope of the present invention.Therefore, although being carried out by above embodiments to the present invention
It is described in further detail, but the present invention is not limited to the above embodiments only, without departing from the inventive concept, also
It may include more other equivalent embodiments, and the scope of the invention is determined by the scope of the appended claims.
Claims (18)
1. a kind of page rendering method characterized by comprising
Obtain the display frame rate of the page;
The number of elements binding occurrence in the page to be rendered in each rendering layer is determined according to the display frame rate;
According to the determining number of elements binding occurrence, the level allocation strategy of element included by the page to be rendered is determined,
In, the level allocation strategy includes element included by the number of plies and every layer;
According to the level allocation strategy and element property data, the rendering layer of the page to be rendered is rendered and shown
Show.
2. the method according to claim 1, wherein being determined according to the display frame rate each in the page to be rendered
Number of elements binding occurrence in rendering layer includes:
If the display frame rate is less than preset frame rate value, adjusted in the page to be rendered according to preset frame rate element mapping model
The number of elements binding occurrence in each rendering layer.
3. rendering method according to claim 2, which is characterized in that further include:
The number of elements binding occurrence is initialized according to device parameter.
4. rendering method according to claim 3, which is characterized in that the device parameter includes following at least one: clear
Look at device type, device type and device resolution.
5. the method according to claim 1, wherein described according to the determining number of elements binding occurrence, really
The level allocation strategy of element included by the fixed page to be rendered, comprising:
According to the element total quantity of the page to be rendered and the number of elements binding occurrence, the rendering layer that the page to be rendered includes is determined
The number of plies, and according to the number of plies, by each Elemental partition to each rendering layer;Or
It distributes to rendering layer, each element of the page to be rendered if any rendering layer successively according to setting rule
The number of elements distributed exceeds the number of elements binding occurrence, then increases rendering layer newly.
6. the method according to claim 1, wherein described according to the determining number of elements binding occurrence, really
The level allocation strategy of element included by the fixed page to be rendered, comprising:
Obtain the corresponding element property data of each element that the page to be rendered includes;
According to the element property data, the corresponding rendering channel type of each element is determined, wherein the rendering channel type packet
Include DOM and Canvas;
According to the number of elements binding occurrence, by each Elemental partition to the rendering layer of the correspondence rendering channel type, wherein
Each rendering channel type in the page to be rendered is correspondingly arranged at least one rendering layer.
7. according to the method described in claim 6, it is characterized in that, according to the number of elements binding occurrence, by each element
It distributes to the rendering layer of the correspondence rendering channel type, comprising:
Determine the corresponding rendering frequency of each element;
The element is ranked up according to the rendering frequency;
According to the ranking results of each element, each order of elements is distributed to the rendering channel type corresponding at least one
A rendering layer, wherein the number of elements in each rendering layer is matched with the number of elements binding occurrence.
8. according to the method described in claim 6, it is characterized in that, according to the number of elements binding occurrence, by each element
It distributes to the rendering layer of the correspondence rendering channel type, comprising:
Determine the corresponding rendering frequency of each element;
The rendering frequency of each element is matched at least two default rendering frequency ranges;
According to matching relationship, each Elemental partition is preset into the rendering channel type rendering frequency range it is corresponding at least one
The rendering layer, wherein the number of elements in each rendering layer is matched with the number of elements binding occurrence.
9. the method according to claim 1, wherein further include:
Obtain the interaction coordinate of the user interactive operation inputted on the shown page;
According to the corresponding control area of each element on the interactive coordinate and the shown page, element to be adjusted is determined;
According to the element to be adjusted and the user interactive operation, the attribute of an element delta data to be rendered is determined;
The element property data of the page to be rendered are updated according to the attribute change data.
10. according to the method described in claim 9, it is characterized in that, the control area of at least partly element of the shown page
It is described using scalable vector graphics.
11. according to the method described in claim 10, it is characterized in that, according to the element to be adjusted and user interaction behaviour
Make, determines that the attribute of an element delta data to be rendered includes:
Call the call back function of the element to be adjusted;
The call back function is executed, the element property data of element to be rendered are generated according to the user interactive operation, as category
Property delta data, wherein the element to be rendered is identical or not identical as the element to be adjusted.
12. the method according to claim 1, wherein according to the level allocation strategy and element property number
According to before the rendering layer of the page to be rendered is rendered and is shown, further includes:
User interactive operation is obtained by manipulation layer, and determines that attribute of an element to be adjusted changes according to the user interactive operation
Data;
The element property data of the page to be rendered are updated according to the attribute change data by data Layer.
13. the method according to claim 1, wherein according to the level allocation strategy and element property data,
The rendering layer of the page to be rendered is rendered and is shown, comprising:
Determine the element to be rendered in the page to be rendered;
Rendering layer where determining the element to be rendered according to the level allocation strategy;
Rendering layer where the element to be rendered is rendered, and is shown.
14. the method according to claim 1, wherein executing according to the determining number of elements binding occurrence,
When the level allocation strategy for determining element included by the page to be rendered, further includes:
If detect predetermined condition, the adjustment of level allocation strategy is forbidden to operate, and using history level allocation strategy as
Current level allocation strategy.
15. according to the method for claim 14, which is characterized in that the predetermined condition includes: that processor high frequency is occupied, used
At least one of family interactive operation process and animation play process.
16. a kind of page rendering device characterized by comprising
Frame per second obtains module, for obtaining the display frame rate of the page;
Binding occurrence obtains module, for determining the number of elements in the page to be rendered in each rendering layer according to the display frame rate
Binding occurrence;
Tactful determining module, for determining element included by the page to be rendered according to the determining number of elements binding occurrence
Level allocation strategy, wherein the level allocation strategy includes element included by the number of plies and every layer;
Display module is rendered, is used for according to the level allocation strategy and element property data, to the wash with watercolours of the page to be rendered
Dye layer is rendered and is shown.
17. a kind of page rendering equipment characterized by comprising memory, the display screen with touch function and one or
Multiple processors;
The memory, for storing one or more programs;
When one or more of programs are executed by one or more of processors, so that one or more of processors are real
The existing any page rendering method of claim 1-15.
18. a kind of storage medium comprising computer executable instructions, which is characterized in that the computer executable instructions by
For executing the page rendering method as described in any in claim 1-15 when computer processor executes.
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN201811063147.XA CN109165364B (en) | 2018-09-12 | 2018-09-12 | Page rendering method, device, equipment and storage medium |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN201811063147.XA CN109165364B (en) | 2018-09-12 | 2018-09-12 | Page rendering method, device, equipment and storage medium |
Publications (2)
Publication Number | Publication Date |
---|---|
CN109165364A true CN109165364A (en) | 2019-01-08 |
CN109165364B CN109165364B (en) | 2021-01-19 |
Family
ID=64894865
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN201811063147.XA Active CN109165364B (en) | 2018-09-12 | 2018-09-12 | Page rendering method, device, equipment and storage medium |
Country Status (1)
Country | Link |
---|---|
CN (1) | CN109165364B (en) |
Cited By (8)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN110222283A (en) * | 2019-04-19 | 2019-09-10 | 维沃移动通信有限公司 | A kind of page processing method and terminal device |
CN110401660A (en) * | 2019-07-26 | 2019-11-01 | 秒针信息技术有限公司 | Recognition methods, device, processing equipment and the storage medium of false flow |
CN110889074A (en) * | 2019-11-27 | 2020-03-17 | 珠海格力电器股份有限公司 | Page display method and device, storage medium and electronic equipment |
CN111526425A (en) * | 2020-04-26 | 2020-08-11 | 北京字节跳动网络技术有限公司 | Video playing method and device, readable medium and electronic equipment |
CN111782995A (en) * | 2020-05-29 | 2020-10-16 | 北京沃东天骏信息技术有限公司 | Method and device for paging and loading graphics |
CN113476837A (en) * | 2021-07-01 | 2021-10-08 | 网易(杭州)网络有限公司 | Image quality display method, device, equipment and storage medium |
CN113918258A (en) * | 2021-09-30 | 2022-01-11 | 北京达佳互联信息技术有限公司 | Page rolling processing method, device, terminal and storage medium |
CN111782995B (en) * | 2020-05-29 | 2024-05-17 | 北京沃东天骏信息技术有限公司 | Graphics paging loading method and device |
Citations (3)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN1395222A (en) * | 2001-06-29 | 2003-02-05 | 三星电子株式会社 | Representation and diawing method of three-D target and method for imaging movable three-D target |
CN101657813A (en) * | 2007-04-04 | 2010-02-24 | 香港科技大学 | The self-defined of webpage played up on the mobile device |
CN104809123A (en) * | 2014-01-24 | 2015-07-29 | 贝壳网际(北京)安全技术有限公司 | Method and system for rendering webpages |
-
2018
- 2018-09-12 CN CN201811063147.XA patent/CN109165364B/en active Active
Patent Citations (3)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN1395222A (en) * | 2001-06-29 | 2003-02-05 | 三星电子株式会社 | Representation and diawing method of three-D target and method for imaging movable three-D target |
CN101657813A (en) * | 2007-04-04 | 2010-02-24 | 香港科技大学 | The self-defined of webpage played up on the mobile device |
CN104809123A (en) * | 2014-01-24 | 2015-07-29 | 贝壳网际(北京)安全技术有限公司 | Method and system for rendering webpages |
Cited By (13)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN110222283A (en) * | 2019-04-19 | 2019-09-10 | 维沃移动通信有限公司 | A kind of page processing method and terminal device |
CN110222283B (en) * | 2019-04-19 | 2021-02-26 | 维沃移动通信有限公司 | Page processing method and terminal equipment |
CN110401660B (en) * | 2019-07-26 | 2022-03-01 | 秒针信息技术有限公司 | False flow identification method and device, processing equipment and storage medium |
CN110401660A (en) * | 2019-07-26 | 2019-11-01 | 秒针信息技术有限公司 | Recognition methods, device, processing equipment and the storage medium of false flow |
CN110889074A (en) * | 2019-11-27 | 2020-03-17 | 珠海格力电器股份有限公司 | Page display method and device, storage medium and electronic equipment |
CN110889074B (en) * | 2019-11-27 | 2022-04-08 | 珠海格力电器股份有限公司 | Page display method and device, storage medium and electronic equipment |
CN111526425A (en) * | 2020-04-26 | 2020-08-11 | 北京字节跳动网络技术有限公司 | Video playing method and device, readable medium and electronic equipment |
CN111526425B (en) * | 2020-04-26 | 2022-08-09 | 北京字节跳动网络技术有限公司 | Video playing method and device, readable medium and electronic equipment |
CN111782995A (en) * | 2020-05-29 | 2020-10-16 | 北京沃东天骏信息技术有限公司 | Method and device for paging and loading graphics |
CN111782995B (en) * | 2020-05-29 | 2024-05-17 | 北京沃东天骏信息技术有限公司 | Graphics paging loading method and device |
CN113476837A (en) * | 2021-07-01 | 2021-10-08 | 网易(杭州)网络有限公司 | Image quality display method, device, equipment and storage medium |
CN113918258A (en) * | 2021-09-30 | 2022-01-11 | 北京达佳互联信息技术有限公司 | Page rolling processing method, device, terminal and storage medium |
CN113918258B (en) * | 2021-09-30 | 2023-12-19 | 北京达佳互联信息技术有限公司 | Page scrolling processing method, device, terminal and storage medium |
Also Published As
Publication number | Publication date |
---|---|
CN109165364B (en) | 2021-01-19 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
CN109165364A (en) | A kind of page rendering method, apparatus, equipment and storage medium | |
CN108052365B (en) | User interface component generation method and device | |
US20200184610A1 (en) | Digital Image Completion Using Deep Learning | |
US20230111594A1 (en) | Simplified website creation, configuration, and customization system | |
CN102356375B (en) | Smooth layout animation of continuous and non-continuous properties | |
CN110503097A (en) | Training method, device and the storage medium of image processing model | |
CN107608993A (en) | The method and apparatus of web animation generation | |
CN108255546B (en) | Method and device for realizing data loading animation | |
CN104115143A (en) | Multiple tab stack user interface | |
CN105988870A (en) | Mobile device with low number of touch times | |
EP2068251A2 (en) | A method of content adaptation for electronic displays | |
US20190332861A1 (en) | Digital Content Automated Layout System | |
CN109345553A (en) | A kind of palm and its critical point detection method, apparatus and terminal device | |
CN107818008A (en) | page loading method and device | |
WO2022078199A1 (en) | Applet control method and apparatus, device, and storage medium | |
CN114974148B (en) | Font display enhancement method, device, equipment and storage medium for ink screen | |
CN110764921A (en) | Carousel graph display method and device, electronic equipment and computer readable medium | |
CN113268303A (en) | Interface element configuration method and device, storage medium and electronic equipment | |
CN106020752A (en) | Method and system for self-adaptation display | |
CN108132820A (en) | Dynamic picture display methods, device and equipment | |
US10825134B2 (en) | System and method for scaling content across multiple form factors | |
CN109992736A (en) | Webpage dynamically load effect implementation method, device, terminal and storage medium | |
CN102073973B (en) | Method for obtaining and editing user-defined graph and subtitle graph fabricating system | |
CN108292193A (en) | Animated digital ink | |
CN107943875A (en) | The control method of browser kernel, device and terminal in player application |
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 |