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 PDF

Info

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
Application number
CN201811063147.XA
Other languages
Chinese (zh)
Other versions
CN109165364B (en
Inventor
凌江华
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Guangzhou Shiyuan Electronics Thecnology Co Ltd
Guangzhou Shirui Electronics Co Ltd
Original Assignee
Guangzhou Shiyuan Electronics Thecnology Co Ltd
Guangzhou Shirui Electronics Co Ltd
Priority date (The priority date 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 date listed.)
Filing date
Publication date
Application filed by Guangzhou Shiyuan Electronics Thecnology Co Ltd, Guangzhou Shirui Electronics Co Ltd filed Critical Guangzhou Shiyuan Electronics Thecnology Co Ltd
Priority to CN201811063147.XA priority Critical patent/CN109165364B/en
Publication of CN109165364A publication Critical patent/CN109165364A/en
Application granted granted Critical
Publication of CN109165364B publication Critical patent/CN109165364B/en
Active legal-status Critical Current
Anticipated expiration legal-status Critical

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

A kind of page rendering method, apparatus, equipment and storage medium
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.
CN201811063147.XA 2018-09-12 2018-09-12 Page rendering method, device, equipment and storage medium Active CN109165364B (en)

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)

* Cited by examiner, † Cited by third party
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)

* Cited by examiner, † Cited by third party
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

Patent Citations (3)

* Cited by examiner, † Cited by third party
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)

* Cited by examiner, † Cited by third party
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