CN104537111B - The loading method and device of Web page picture - Google Patents
The loading method and device of Web page picture Download PDFInfo
- Publication number
- CN104537111B CN104537111B CN201510026137.9A CN201510026137A CN104537111B CN 104537111 B CN104537111 B CN 104537111B CN 201510026137 A CN201510026137 A CN 201510026137A CN 104537111 B CN104537111 B CN 104537111B
- Authority
- CN
- China
- Prior art keywords
- picture
- renderimage
- nodes
- web page
- dynamic
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Active
Links
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/10—File systems; File servers
- G06F16/17—Details of further file system functions
- G06F16/1737—Details of further file system functions for reducing power consumption or coping with limited storage space, e.g. in mobile devices
Abstract
The disclosure is directed to a kind of loading method of Web page picture and devices.The method includes：Every dynamic picture respectively in web page files generates RenderLayer corresponding with the dynamic picture；Corresponding GraphicsLayer is generated for the RenderLayer；The dynamic picture is drawn according to the GraphicsLayer.By the technical solution of the disclosure, the area size drawn in Web page picture loading procedure can be effectively reduced, is promoted and renders performance, while saving the computing resource of CPU.
Description
Technical field
This disclosure relates to the loading method and device of web technologies field more particularly to a kind of Web page picture.
Background technology
With the development of Internet technology and mobile terminal, more and more users use smart mobile phone, tablet computer etc.
Mobile terminal accesses internet.When user browses webpage using mobile terminal, if in webpage including picture, browser
Often picture is repainted.How to be promoted in drawing process and render performance, the computing resource for saving CPU has become
Urgent problem to be solved.
Invention content
To overcome the problems in correlation technique, the disclosure provides a kind of loading method and device of Web page picture.
According to the first aspect of the embodiments of the present disclosure, a kind of loading method of Web page picture is provided, including：
Every dynamic picture respectively in web page files generates RenderLayer corresponding with the dynamic picture；
Corresponding GraphicsLayer is generated for the RenderLayer；
The dynamic picture is drawn according to the GraphicsLayer.
Optionally, every dynamic picture in the respectively web page files generates corresponding with the dynamic picture
RenderLayer, including：
Render trees are generated according to the web page files；
Dynamic picture in identifying the web page files in the Render trees；
The respectively described dynamic picture generates corresponding RenderLayer.
Optionally, it is described identify the web page files in the Render trees in dynamic picture, including：
Judge whether the picture number that RenderImage nodes include in the Render trees is more than 1；
Judge whether the frame frequency of RenderImage nodes in the Render trees is more than 0；
If the picture number that RenderImage nodes include in the Render trees is more than 1, and described
The frame frequency of RenderImage nodes is more than 0, then confirms that the RenderImage that the RenderImage nodes are dynamic picture is saved
Point.
Optionally, it is described identify the web page files in the Render trees in dynamic picture, including：
Judge in the Render trees in the path of RenderImage nodes whether to include character gif；
If the path of RenderImage nodes includes character gif in the Render trees, described in judgement
Whether the picture number that RenderImage nodes include is more than 1, judges the frame of RenderImage nodes in the Render trees
Whether frequency is more than 0；
If the picture number that RenderImage nodes include in the Render trees is more than 1, and described
The frame frequency of RenderImage nodes is more than 0, then confirms that the RenderImage that the RenderImage nodes are dynamic picture is saved
Point.
Optionally, described that the dynamic picture is drawn according to the GraphicsLayer, including：
According to the GraphicsLayer, the Dynamic Graph is drawn in region identical with the dynamic picture size
Piece.
According to the second aspect of the embodiment of the present disclosure, a kind of loading device of Web page picture is provided, including：
First generation unit generates corresponding with the dynamic picture for every dynamic picture in respectively web page files
RenderLayer；
Second generation unit, for generating corresponding GraphicsLayer for the RenderLayer；
Picture drawing unit, for drawing the dynamic picture according to the GraphicsLayer.
Optionally, first generation unit includes：
First generates subelement, for generating Render trees according to the web page files；
Dynamic Recognition subelement, for the dynamic picture in identifying the web page files in the Render trees；
Second generates subelement, for generating corresponding RenderLayer for the dynamic picture.
Optionally, the Dynamic Recognition subelement includes：
First judgment module, for judging whether is RenderImage nodes include in the Render trees picture number
More than 1；
Second judgment module, for judging whether the frame frequency of RenderImage nodes in the Render trees is more than 0；
First confirmation module is more than 1 for the picture number that RenderImage nodes include in the Render trees,
And the frame frequency of the RenderImage nodes confirms that the RenderImage nodes are dynamic picture when being more than 0
RenderImage nodes.
Optionally, the Dynamic Recognition subelement includes：
Third judgment module, for judging in the Render trees in the path of RenderImage nodes whether to include word
Accord with gif；
4th judgment module, it includes character gif to be used for the path of RenderImage nodes in the Render trees
When, judge whether the picture number that the RenderImage nodes include is more than 1, judges in the Render trees
Whether the frame frequency of RenderImage nodes is more than 0；
Second confirmation module is more than 1 for the picture number that RenderImage nodes include in the Render trees,
And the frame frequency of the RenderImage nodes confirms that the RenderImage nodes are dynamic picture when being more than 0
RenderImage nodes.
Optionally, the picture drawing unit includes：
Subelement is drawn, is used for according to the GraphicsLayer, in region identical with the dynamic picture size
Draw the dynamic picture.
According to the third aspect of the embodiment of the present disclosure, a kind of loading device of Web page picture is provided, including：
Processor；
Memory for storing processor-executable instruction；
Wherein, the processor is configured as：
Every dynamic picture respectively in web page files generates RenderLayer corresponding with the dynamic picture；
Corresponding GraphicsLayer is generated for the RenderLayer；
The dynamic picture is drawn according to the GraphicsLayer.
The technical scheme provided by this disclosed embodiment can include the following benefits：
Disclosure terminal can by generating corresponding RenderLayer for every dynamic picture in web page files, into
And can be that the RenderLayer generates corresponding GraphicsLayer, as every dynamic picture generates a correspondence
GraphicsLayer, so as to be drawn to dynamic picture according to the GraphicsLayer.The disclosure is in webpage text
There are when multiple dynamic pictures in part, every dynamic picture is drawn respectively, the region that can effectively reduce drafting is big
It is small, it is promoted and renders performance, while saving the computing resource of CPU.
Disclosure terminal can RenderImage nodes include in judging the Render trees picture number be more than 1,
And the frame frequency of the RenderImage nodes confirms that the RenderImage nodes are dynamic picture when being more than 0
RenderImage nodes, and then improve the accuracy that dynamic picture identifies in web page files.
It should be understood that above general description and following detailed description is only exemplary and explanatory, not
The disclosure can be limited.
Description of the drawings
The drawings herein are incorporated into the specification and forms part of this specification, and shows the implementation for meeting the disclosure
Example, and together with specification for explaining the principles of this disclosure.
Fig. 1 is a kind of flow chart of the loading method of Web page picture shown according to an exemplary embodiment.
Fig. 2 is the flow chart of the loading method of another Web page picture shown according to an exemplary embodiment.
Fig. 3 is a kind of dynamic picture identified in Render trees in web page files shown according to an exemplary embodiment
Flow chart.
Fig. 4 is according to another Dynamic Graph identified in Render trees in web page files shown in an exemplary embodiment
The flow chart of piece.
Fig. 5 is a kind of block diagram of the loading device of Web page picture shown according to an exemplary embodiment.
Fig. 6 is the block diagram of the loading device of another Web page picture shown according to an exemplary embodiment.
Fig. 7 is the block diagram of the loading device of another Web page picture shown according to an exemplary embodiment.
Fig. 8 is the block diagram of the loading device of another Web page picture shown according to an exemplary embodiment.
Fig. 9 is the block diagram of the loading device of another Web page picture shown according to an exemplary embodiment.
Figure 10 is an a kind of structural representation of loading device for Web page picture shown according to an exemplary embodiment
Figure.
Specific implementation mode
Example embodiments are described in detail here, and the example is illustrated in the accompanying drawings.Following description is related to
When attached drawing, unless otherwise indicated, the same numbers in different drawings indicate the same or similar elements.Following exemplary embodiment
Described in embodiment do not represent all implementations consistent with this disclosure.On the contrary, they be only with it is such as appended
The example of the consistent device and method of some aspects be described in detail in claims, the disclosure.
Fig. 1 is a kind of flow chart of the loading method of Web page picture shown according to an exemplary embodiment.
As shown in Figure 1, the loading method of the Web page picture can be used in terminal, include the following steps：
In step S101, every dynamic picture respectively in web page files generates corresponding with the dynamic picture
RenderLayer。
In the present embodiment, terminal can generate Render trees according to the web page files, then in the Render trees
Dynamic picture in the middle identification web page files, and all dynamic pictures generation respectively identified is corresponding
RenderLayer。
In step s 102, it is that the RenderLayer generates corresponding GraphicsLayer.
In the present embodiment, terminal can generate corresponding for the RenderLayer generated by dynamic picture
GraphicsLayer, as every dynamic picture generate corresponding GraphicsLayer.
In step s 103, the dynamic picture is drawn according to the GraphicsLayer.
By disclosure terminal it can be seen from above description can by in web page files every dynamic picture generate pair
The RenderLayer answered, and then can be that the RenderLayer generates corresponding GraphicsLayer, as every dynamic
Picture generates a corresponding GraphicsLayer, so as to be painted to dynamic picture according to the GraphicsLayer
System.The disclosure, there are when multiple dynamic pictures, respectively draws every dynamic picture in web page files, can be effective
Reduce the area size drawn, is promoted and render performance, while saving the computing resource of CPU.
Fig. 2 is the flow chart of the loading method of another Web page picture shown according to an exemplary embodiment.
As shown in Fig. 2, the loading method of the Web page picture can be used in terminal, include the following steps：
In step 201, Render trees are generated according to web page files.
In the present embodiment, when user is by the browser access webpage that is loaded in terminal, terminal asks the access of user
It asks and is sent to associated server, the associated server can return to a web page files after parsing the access request.Terminal
After receiving the web page files, the web page files are parsed, generate DOM (Document Object Model, file pair
As model) it sets and Render trees.Wherein, dom tree is used to describe the page info of webpage；Render trees are for the page to webpage
It is laid out, the attributes such as main position, size including each element in webpage.
In step 202, the dynamic picture in identifying the web page files in the Render trees.
In the present embodiment, the web page files can be identified according to the attribute information of each node in the Render trees
In dynamic picture.
Referring to FIG. 3, the disclosure identifies web page files according to one kind shown in an exemplary embodiment in Render trees
In dynamic picture flow chart, it is described to identify that the dynamic picture in the web page files wrap in the Render trees
It includes：
In step S301, judge whether the picture number that RenderImage nodes include in the Render trees is more than
1.If the picture number that RenderImage nodes include in the Render trees is more than 1, S302 is thened follow the steps.
In the present embodiment, each attribute of the picture element in the web page files is generally stored inside the Render trees
In RenderImage nodes in, can be first in the Render so in the dynamic picture in identifying the web page files
RenderImage nodes are searched in tree, after finding the RenderImage nodes, can first be judged described
The picture number that RenderImage nodes include whether be more than 1, such as：It may determine that the attribute of the RenderImage nodes
Whether the numerical value of count is more than 1.If the picture number that the RenderImage nodes include is more than 1, step can be executed
Rapid S302.If the picture number that the RenderImage nodes include is less than or equal to 1, illustrate the RenderImage sections
Point is not the RenderImage nodes of dynamic picture, because dynamic picture is usually by multiple static images according to certain frame frequency
It plays out and is formed.In the present embodiment, if the picture number that RenderImage nodes include in the Render trees is small
In equal to 1, then this step is continued to execute, next RenderImage nodes are judged.
In step s 302, judge whether the frame frequency of RenderImage nodes in the Render trees is more than 0.If institute
The frame frequency for stating RenderImage nodes in Render trees is more than 0, thens follow the steps S303.
In the present embodiment, judge whether the frame frequency attribute of the RenderImage nodes is more than 0, if described
The frame frequency attribute of RenderImage nodes is more than 0, thens follow the steps S303.If RenderImage is saved in the Render trees
The frame frequency of point is equal to 0, then illustrates that the RenderImage nodes are not the RenderImage nodes of dynamic picture, can execute
Step S301 judges next RenderImage nodes.
In step S303, confirm that the RenderImage nodes are the RenderImage nodes of dynamic picture.
In the present embodiment, the judging result based on above mentioned steps S3 01 and step S302, if in the Render trees
RenderImage nodes include plurality of pictures, and frame frequency is more than 0, then in this step, can be confirmed described
RenderImage nodes are the RenderImage nodes of dynamic picture.
It should be noted that the present embodiment do not limit above mentioned steps S3 01 and step S302 execute sequence, in this public affairs
It opens in another embodiment, step S302 can also be first carried out, judge that the frame frequency of RenderImage nodes in the Render trees is
It is no to be more than 0, if it is determined that the frame frequency of RenderImage nodes is more than 0 in the Render trees, S301 is thened follow the steps, is judged
Whether the picture number that RenderImage nodes include in the Render trees is more than 1.And in step S303, it is still
The picture number that RenderImage nodes include in the Render trees is more than 1, and the frame frequency of the RenderImage nodes
More than 0, i.e., when the two conditions all meet, confirm that the RenderImage that the RenderImage nodes are dynamic picture is saved
Point.
In the present embodiment, terminal can RenderImage nodes include in judging the Render trees picture number
Amount be more than 1, and the frame frequency of the RenderImage nodes be more than 0 when, confirm the RenderImage nodes be dynamic picture
RenderImage nodes, and then improve web page files in dynamic picture identify accuracy.
Referring to FIG. 4, the disclosure identifies webpage text according to the another kind shown in an exemplary embodiment in Render trees
The flow chart of dynamic picture in part, it is described to identify that the dynamic picture in the web page files wrap in the Render trees
It includes：
In step S401, judge in the Render trees in the path of RenderImage nodes whether to include character
gif.If the path of RenderImage nodes includes character gif in the Render trees, S402 is thened follow the steps.
In the present embodiment, each attribute of the picture element in the web page files is generally stored inside the Render trees
In RenderImage nodes in, can be first in the Render so in the dynamic picture in identifying the web page files
RenderImage nodes are searched in tree, after finding the RenderImage nodes, can first be judged described
Whether include character gif in the path of RenderImage nodes, if the path of the RenderImage nodes includes word
Accord with gif, then the RenderImage nodes may gif formats be static images RenderImage nodes, it is also possible to
The dynamic picture of gif formats executes step S402, continues to judge.If RenderImage nodes in the Render trees
Path in not include character gif, then the RenderImage nodes are not the RenderImage nodes of dynamic picture, continue
This step is executed, next RenderImage nodes are judged.
In step S402, judge whether picture number that the RenderImage nodes include is more than 1, described in judgement
Whether the frame frequency of RenderImage nodes is more than 0 in Render trees.If RenderImage node packets in the Render trees
The picture number contained is more than 1, and the frame frequency of the RenderImage nodes is more than 0, thens follow the steps S403.
In the present embodiment, the picture number and frame frequency for including to the RenderImage nodes judge, Ke Yican
Existing process shown in Fig. 3 is examined, this is no longer going to repeat them.
In this step, if the picture number that RenderImage nodes include in the Render trees is less than or equal to 1,
Either the frame frequency of RenderImage nodes is equal to RenderImage sections in 0 or the Render trees in the Render trees
The frame frequency that the picture number that point includes is less than or equal to RenderImage nodes in Render trees while 1 is equal to 0, all says
The bright RenderImage nodes are not the RenderImage nodes of dynamic picture, step S401 are executed, to next
RenderImage nodes are judged.
In step S403, confirm that the RenderImage nodes are the RenderImage nodes of dynamic picture.
In the present embodiment, the judging result based on abovementioned steps S402, if RenderImage in the Render trees
Node includes plurality of pictures, and frame frequency is more than 0, then in this step, can be confirmed that the RenderImage nodes are dynamic
The RenderImage nodes of picture.
In step S203, the respectively described dynamic picture generates corresponding RenderLayer.
In the present embodiment, the RenderLayer represents the content of a certain layer of webpage, and the content is with Web page rendering
The form of order stores, for subsequently drawing.
In this step, it is based on abovementioned steps S202, after the dynamic picture in identifying the web page files, in this step
It is that the dynamic picture generates corresponding RenderLayer in rapid.As an example it is assumed that identifying institute in abovementioned steps S202
It includes altogether 3 dynamic pictures to state in web page files, then in this step, respectively this 3 dynamic pictures generate corresponding
RenderLayer generates 3 RenderLayer.
In step S204, corresponding GraphicsLayer is generated for the RenderLayer.
In the present embodiment, the GraphicsLayer is generated by RenderLayer when meeting certain condition, such as：
Corresponding GraphicsLayer is generated when RenderLayer has particular community.The GraphicsLayer, which is terminal, to be needed
The web page area independently to draw.
Based on abovementioned steps S203, after generating corresponding RenderLayer for the dynamic picture, respectively each
RenderLayer generates corresponding GraphicsLayer, and the as described dynamic picture generates corresponding GraphicsLayer.With
For hypothesis in step S203, in this step, respectively aforementioned 3 RenderLayer generate corresponding
GraphicsLayer, that is, generate 3 GraphicsLayer, 3 GraphicsLayer respectively with 3 dynamics above-mentioned
Picture corresponds to.
It should be noted that in practical implementations, the generation and the generation of GraphicsLayer of RenderLayer are two
A independent process, so can first judge when generating corresponding GraphicsLayer for RenderLayer in this step
Whether the RenderLayer is generated by dynamic picture, if the RenderLayer is generated by dynamic picture, for institute
It states RenderLayer and generates corresponding GraphicsLayer, if the RenderLayer is generated by dynamic picture,
It is handled according to the method for the GraphicsLayer generated in the related technology, this is no longer going to repeat them.
In step S205, according to the GraphicsLayer, painted in region identical with the dynamic picture size
Make the dynamic picture.
In the present embodiment, terminal according to each GraphicsLayer to carry out Web page rendering.Still in step S203
For assuming that, terminal draws aforementioned 3 dynamic pictures respectively according to 3 GraphicsLayer.It is assumed that described 3 dynamic
The size of state picture is respectively：X1×Y1, X2×Y2And X3×Y3, then terminal is according to this 3 dynamic pictures
GraphicsLayer is respectively X in size1×Y1, X2×Y2And X3×Y3Region in, it is respective with this 3 dynamic pictures
Frame frequency draws this 3 dynamic pictures.
It can be corresponding by being generated for every dynamic picture in web page files by terminal it can be seen from above description
RenderLayer, and then can be that the RenderLayer generates corresponding GraphicsLayer, as every dynamic picture
A corresponding GraphicsLayer is generated, so as to be drawn to dynamic picture according to the GraphicsLayer.This
It is disclosed in web page files there are when multiple dynamic pictures, every dynamic picture is drawn respectively, can be effectively reduced
The area size of drafting is promoted and renders performance, while saving the computing resource of CPU.
Corresponding with the loading method embodiment of aforementioned Web page picture, the disclosure additionally provides a kind of load of Web page picture
The embodiment of device.
Fig. 5 is a kind of loading device block diagram of Web page picture shown according to an exemplary embodiment.Described device can be with
For in terminal.
As shown in figure 5, the loading device 500 of the Web page picture includes：First generation unit 501, the second generation unit
502 and picture drawing unit 503.
Wherein, first generation unit 501 is configured as：Every dynamic picture respectively in web page files generate with
The corresponding RenderLayer of the dynamic picture.
Second generation unit 502 is configured as：Corresponding GraphicsLayer is generated for the RenderLayer.
The picture drawing unit 503 is configured as：The dynamic picture is drawn according to the GraphicsLayer.
In above-described embodiment, terminal can be corresponding by being generated for every dynamic picture in web page files
RenderLayer, and then can be that the RenderLayer generates corresponding GraphicsLayer, as every dynamic picture
A corresponding GraphicsLayer is generated, so as to be drawn to dynamic picture according to the GraphicsLayer.This
It is disclosed in web page files there are when multiple dynamic pictures, every dynamic picture is drawn respectively, can be effectively reduced
The area size of drafting is promoted and renders performance, while saving the computing resource of CPU.
Fig. 6 is the block diagram of the loading device of another Web page picture shown according to an exemplary embodiment, described device
It can be used in terminal, for the embodiment on the basis of aforementioned embodiment shown in fig. 5, first generation unit 501 can be with
Including：First generates subelement 5011, Dynamic Recognition subelement 5012 and second generates subelement 5013.
Wherein, the first generation subelement 5011 is configured as：Render trees are generated according to the web page files.
The Dynamic Recognition subelement 5012 is configured as：It is identified in the Render trees dynamic in the web page files
State picture.
The second generation subelement 5013 is configured as：Corresponding RenderLayer is generated for the dynamic picture.
Fig. 7 is the block diagram of the loading device of another Web page picture shown according to an exemplary embodiment, described device
It can be used in terminal, for the embodiment on the basis of aforementioned embodiment shown in fig. 6, the Dynamic Recognition subelement 5012 can
To include：First judgment module 5012A, the second judgment module 5012B and the first confirmation module 5012C.
Wherein, the first judgment module 5012A is configured as：Judge RenderImage nodes in the Render trees
Including picture number whether be more than 1.
The second judgment module 5012B is configured as：Judge the frame frequency of RenderImage nodes in the Render trees
Whether 0 is more than.
The first confirmation module 5012C is configured as：The figure that RenderImage nodes include in the Render trees
Piece quantity be more than 1, and the frame frequency of the RenderImage nodes be more than 0 when, confirm the RenderImage nodes be dynamic
The RenderImage nodes of picture.
In above-described embodiment, terminal can RenderImage nodes include in judging the Render trees picture number
Amount be more than 1, and the frame frequency of the RenderImage nodes be more than 0 when, confirm the RenderImage nodes be dynamic picture
RenderImage nodes, and then improve web page files in dynamic picture identify accuracy.
Fig. 8 is the block diagram of the loading device of another Web page picture shown according to an exemplary embodiment, described device
It can be used in terminal, for the embodiment on the basis of aforementioned embodiment shown in fig. 6, the Dynamic Recognition subelement 5012 can
To include：Third judgment module 5012D, the 4th judgment module 5012E and the second confirmation module 5012F.
Wherein, the third judgment module 5012D is configured as：Judge RenderImage nodes in the Render trees
Path in whether include character gif.
The 4th judgment module 5012E is configured as：In the Render trees in the path of RenderImage nodes
When including character gif, judge whether the picture number that the RenderImage nodes include is more than 1, judges the Render trees
Whether the frame frequency of middle RenderImage nodes is more than 0.
The second confirmation module 5012F is configured as：The figure that RenderImage nodes include in the Render trees
Piece quantity be more than 1, and the frame frequency of the RenderImage nodes be more than 0 when, confirm the RenderImage nodes be dynamic
The RenderImage nodes of picture.
Fig. 9 is the block diagram of the loading device of another Web page picture shown according to an exemplary embodiment, described device
It can be used in terminal, for the embodiment on the basis of aforementioned embodiment shown in fig. 5, the picture drawing unit 503 can be with
Including：Draw subelement 5031.
The drafting subelement 5031 is configured as：According to the GraphicsLayer, with the dynamic picture size
The dynamic picture is drawn in identical region.
It should be noted that the drafting subelement 5031 shown in above-mentioned embodiment shown in Fig. 9 can also include
In earlier figures 6 to device embodiment shown in Fig. 8, the disclosure is not particularly limited this.
About the device in above-described embodiment, wherein modules execute the concrete mode of operation in related this method
Embodiment in be described in detail, explanation will be not set forth in detail herein.
For device embodiments, since it corresponds essentially to embodiment of the method, so related place is referring to method reality
Apply the part explanation of example.The apparatus embodiments described above are merely exemplary, wherein described be used as separating component
The unit of explanation may or may not be physically separated, and the component shown as unit can be or can also
It is not physical unit, you can be located at a place, or may be distributed over multiple network units.It can be according to actual
It needs that some or all of module therein is selected to realize the purpose of disclosure scheme.Those of ordinary skill in the art are not paying
In the case of going out creative work, you can to understand and implement.
Correspondingly, the disclosure also provides a kind of loading device of Web page picture, described device includes：Processor；For depositing
Store up the memory of processor-executable instruction；Wherein, the processor is configured as：Every dynamic respectively in web page files
Picture generates RenderLayer corresponding with the dynamic picture；It is generated for the RenderLayer corresponding
GraphicsLayer；The dynamic picture is drawn according to the GraphicsLayer.
Correspondingly, the disclosure also provides a kind of non-transitorycomputer readable storage medium, when in the storage medium
Instruction is executed by the processor of terminal so that and terminal is able to carry out a kind of loading method of Web page picture, the method includes：Point
Every dynamic picture that Wei be in web page files generates RenderLayer corresponding with the dynamic picture；It is described
RenderLayer generates corresponding GraphicsLayer；The dynamic picture is drawn according to the GraphicsLayer.
Figure 10 is a kind of block diagram of loading device 1000 for Web page picture shown according to an exemplary embodiment.Example
Such as, device 1000 can be mobile phone, computer, digital broadcast terminal, messaging devices, game console, and tablet is set
It is standby, Medical Devices, body-building equipment, personal digital assistant etc..
Referring to Fig.1 0, device 1000 may include following one or more components：Processing component 1002, memory 1004,
Power supply module 1006, multimedia component 1008, audio component 1010, the interface 1012 of input/output (I/O), sensor module
1014 and communication component 1016.
The integrated operation of 1002 usual control device 1000 of processing component, such as with display, call, data communication,
Camera operation and record operate associated operation.Processing element 1002 may include one or more processors 1020 to execute
Instruction, to perform all or part of the steps of the methods described above.In addition, processing component 1002 may include one or more moulds
Block, convenient for the interaction between processing component 1002 and other assemblies.For example, processing component 1002 may include multi-media module,
To facilitate the interaction between multimedia component 1008 and processing component 1002.
Memory 1004 is configured as storing various types of data to support the operation in equipment 1000.These data
Example includes the instruction for any application program or method that are operated on device 1000, contact data, telephone book data,
Message, picture, video etc..Memory 1004 can by any kind of volatibility or non-volatile memory device or they
Combination is realized, such as static RAM (SRAM), electrically erasable programmable read-only memory (EEPROM), it is erasable can
Program read-only memory (EPROM), programmable read only memory (PROM), read-only memory (ROM), magnetic memory, flash memory
Reservoir, disk or CD.
Electric power assembly 1006 provides electric power for the various assemblies of device 1000.Electric power assembly 1006 may include power management
System, one or more power supplys and other generated with for device 1000, management and the associated component of distribution electric power.
Multimedia component 1008 is included in the screen of one output interface of offer between described device 1000 and user.
In some embodiments, screen may include liquid crystal display (LCD) and touch panel (TP).If screen includes touch panel,
Screen may be implemented as touch screen, to receive input signal from the user.Touch panel includes that one or more touch passes
Sensor is to sense the gesture on touch, slide, and touch panel.The touch sensor can not only sense touch or sliding is dynamic
The boundary of work, but also detect duration and pressure associated with the touch or slide operation.In some embodiments, more
Media component 1108 includes a front camera and/or rear camera.When equipment 1100 is in operation mode, mould is such as shot
When formula or video mode, front camera and/or rear camera can receive external multi-medium data.Each preposition camera shooting
Head and rear camera can be a fixed optical lens system or have focusing and optical zoom capabilities.
Audio component 1010 is configured as output and/or input audio signal.For example, audio component 1010 includes a wheat
Gram wind (MIC), when device 1000 is in operation mode, when such as call model, logging mode and speech recognition mode, microphone quilt
It is configured to receive external audio signal.The received audio signal can be further stored in memory 1004 or via communication
Component 1016 is sent.In some embodiments, audio component 1010 further includes a loud speaker, is used for exports audio signal.
I/O interfaces 1012 provide interface, above-mentioned peripheral interface module between processing component 1002 and peripheral interface module
Can be keyboard, click wheel, button etc..These buttons may include but be not limited to：Home button, volume button, start button and
Locking press button.
Sensor module 1014 includes one or more sensors, and the state for providing various aspects for device 1000 is commented
Estimate.For example, sensor module 1014 can detect the state that opens/closes of equipment 1000, the relative positioning of component, such as institute
The display and keypad that component is device 1000 are stated, sensor module 1014 can be with detection device 1000 or device 1,000 1
The position change of a component, the existence or non-existence that user contacts with device 1000,1000 orientation of device or acceleration/deceleration and dress
Set 1000 temperature change.Sensor module 1014 may include proximity sensor, be configured in not any physics
It is detected the presence of nearby objects when contact.Sensor module 1014 can also include optical sensor, as CMOS or ccd image are sensed
Device, for being used in imaging applications.In some embodiments, which can also include acceleration sensing
Device, gyro sensor, Magnetic Sensor, pressure sensor or temperature sensor.
Communication component 1016 is configured to facilitate the communication of wired or wireless way between device 1000 and other equipment.Dress
The wireless network based on communication standard, such as WiFi can be accessed by setting 1000,2G or 3G or combination thereof.It is exemplary at one
In embodiment, communication component 1016 receives broadcast singal or broadcast correlation from external broadcasting management system via broadcast channel
Information.In one exemplary embodiment, the communication component 1016 further includes near-field communication (NFC) module, to promote short distance
Communication.For example, radio frequency identification (RFID) technology, Infrared Data Association (IrDA) technology, ultra wide band can be based in NFC module
(UWB) technology, bluetooth (BT) technology and other technologies are realized.
In the exemplary embodiment, device 1000 can be by one or more application application-specific integrated circuit (ASIC), number
Signal processor (DSP), digital signal processing appts (DSPD), programmable logic device (PLD), field programmable gate array
(FPGA), controller, microcontroller, microprocessor or other electronic components are realized, for executing the above method.
In the exemplary embodiment, it includes the non-transitorycomputer readable storage medium instructed, example to additionally provide a kind of
Such as include the memory 1004 of instruction, above-metioned instruction can be executed by the processor 1020 of device 1000 to complete the above method.Example
Such as, the non-transitorycomputer readable storage medium can be ROM, it is random access memory (RAM), CD-ROM, tape, soft
Disk and optical data storage devices etc..
Those skilled in the art will readily occur to its of the disclosure after considering specification and putting into practice disclosure disclosed herein
Its embodiment.This application is intended to cover any variations, uses, or adaptations of the disclosure, these modifications, purposes or
Person's adaptive change follows the general principles of this disclosure and includes the undocumented common knowledge in the art of the disclosure
Or conventional techniques.The description and examples are only to be considered as illustrative, and the true scope and spirit of the disclosure are by following
Claim is pointed out.
It should be understood that the present disclosure is not limited to the precise structures that have been described above and shown in the drawings, and
And various modifications and changes may be made without departing from the scope thereof.The scope of the present disclosure is only limited by the accompanying claims.
Claims (11)
1. a kind of loading method of Web page picture, which is characterized in that including：
Every dynamic picture respectively in web page files generates RenderLayer corresponding with the dynamic picture；
Corresponding GraphicsLayer is generated for the RenderLayer；
The dynamic picture is drawn according to the GraphicsLayer.
2. the loading method of Web page picture according to claim 1, which is characterized in that
Described is respectively that every dynamic picture in web page files generates RenderLayer corresponding with the dynamic picture, packet
It includes：
Render trees are generated according to the web page files；
Dynamic picture in identifying the web page files in the Render trees；
The respectively described dynamic picture generates corresponding RenderLayer.
3. the loading method of Web page picture according to claim 2, which is characterized in that
It is described identify the web page files in the Render trees in dynamic picture, including：
Judge whether the picture number that RenderImage nodes include in the Render trees is more than 1；
Judge whether the frame frequency of RenderImage nodes in the Render trees is more than 0；
If the picture number that RenderImage nodes include in the Render trees is more than 1, and the RenderImage is saved
The frame frequency of point is more than 0, then confirms that the RenderImage nodes are the RenderImage nodes of dynamic picture.
4. the loading method of Web page picture according to claim 2, which is characterized in that
It is described identify the web page files in the Render trees in dynamic picture, including：
Judge in the Render trees in the path of RenderImage nodes whether to include character gif；
If the path of RenderImage nodes includes character gif in the Render trees, described in judgement
Whether the picture number that RenderImage nodes include is more than 1, judges the frame of RenderImage nodes in the Render trees
Whether frequency is more than 0；
If the picture number that RenderImage nodes include in the Render trees is more than 1, and the RenderImage is saved
The frame frequency of point is more than 0, then confirms that the RenderImage nodes are the RenderImage nodes of dynamic picture.
5. the loading method of Web page picture according to claim 1, which is characterized in that
It is described that the dynamic picture is drawn according to the GraphicsLayer, including：
According to the GraphicsLayer, the dynamic picture is drawn in region identical with the dynamic picture size.
6. a kind of loading device of Web page picture, which is characterized in that including：
First generation unit generates corresponding with the dynamic picture for every dynamic picture in respectively web page files
RenderLayer；
Second generation unit, for generating corresponding GraphicsLayer for the RenderLayer；
Picture drawing unit, for drawing the dynamic picture according to the GraphicsLayer.
7. the loading device of Web page picture according to claim 6, which is characterized in that first generation unit includes：
First generates subelement, for generating Render trees according to the web page files；
Dynamic Recognition subelement, for the dynamic picture in identifying the web page files in the Render trees；
Second generates subelement, for generating corresponding RenderLayer for the dynamic picture.
8. the loading device of Web page picture according to claim 7, which is characterized in that the Dynamic Recognition subelement packet
It includes：
First judgment module, for judging whether the picture number that RenderImage nodes include in the Render trees is more than
1；
Second judgment module, for judging whether the frame frequency of RenderImage nodes in the Render trees is more than 0；
First confirmation module is more than 1, and institute for the picture number that RenderImage nodes include in the Render trees
When stating the frame frequency of RenderImage nodes more than 0, confirm that the RenderImage nodes are the RenderImage of dynamic picture
Node.
9. the loading device of Web page picture according to claim 7, which is characterized in that the Dynamic Recognition subelement packet
It includes：
Third judgment module, for judging in the Render trees in the path of RenderImage nodes whether to include character
gif；
4th judgment module, for when the path of RenderImage nodes includes character gif in the Render trees, sentencing
Whether the picture number that the RenderImage nodes include that breaks is more than 1, judges that RenderImage is saved in the Render trees
Whether the frame frequency of point is more than 0；
Second confirmation module is more than 1, and institute for the picture number that RenderImage nodes include in the Render trees
When stating the frame frequency of RenderImage nodes more than 0, confirm that the RenderImage nodes are the RenderImage of dynamic picture
Node.
10. the loading device of Web page picture according to claim 6, which is characterized in that the picture drawing unit includes：
Subelement is drawn, for according to the GraphicsLayer, being drawn in region identical with the dynamic picture size
The dynamic picture.
11. a kind of loading device of Web page picture, which is characterized in that including：
Processor；
Memory for storing processor-executable instruction；
Wherein, the processor is configured as：
Every dynamic picture respectively in web page files generates RenderLayer corresponding with the dynamic picture；
Corresponding GraphicsLayer is generated for the RenderLayer；
The dynamic picture is drawn according to the GraphicsLayer.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201510026137.9A CN104537111B (en) | 2015-01-19 | 2015-01-19 | The loading method and device of Web page picture |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201510026137.9A CN104537111B (en) | 2015-01-19 | 2015-01-19 | The loading method and device of Web page picture |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN104537111A CN104537111A (en) | 2015-04-22 |
| CN104537111B true CN104537111B (en) | 2018-09-04 |
Family
ID=52852639
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201510026137.9A Active CN104537111B (en) | 2015-01-19 | 2015-01-19 | The loading method and device of Web page picture |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN104537111B (en) |
Families Citing this family (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN108874829B (en) * | 2017-05-12 | 2023-05-09 | 腾讯科技（深圳）有限公司 | Webpage processing method and device, intelligent equipment and computer storage medium |
| CN111475245B (en) * | 2020-04-08 | 2021-06-25 | 腾讯科技（深圳）有限公司 | Dynamic picture display method and device, electronic equipment and computer storage medium |
Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| EP1413987A2 (en) * | 2002-10-23 | 2004-04-28 | Sun Microsystems, Inc. | Accessing rendered graphics over a computer network |
| CN102364459A (en) * | 2011-06-28 | 2012-02-29 | 广州市动景计算机科技有限公司 | Webpage Flash animation display method based on mobile terminal and device |
| CN102915375A (en) * | 2012-11-08 | 2013-02-06 | 山东大学 | Webpage loading method based on layout zoning |
| CN103500186A (en) * | 2013-09-13 | 2014-01-08 | 北京奇虎科技有限公司 | Method and device for loading pictures in browser and browser |
-
2015
- 2015-01-19 CN CN201510026137.9A patent/CN104537111B/en active Active
Patent Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| EP1413987A2 (en) * | 2002-10-23 | 2004-04-28 | Sun Microsystems, Inc. | Accessing rendered graphics over a computer network |
| CN102364459A (en) * | 2011-06-28 | 2012-02-29 | 广州市动景计算机科技有限公司 | Webpage Flash animation display method based on mobile terminal and device |
| CN102915375A (en) * | 2012-11-08 | 2013-02-06 | 山东大学 | Webpage loading method based on layout zoning |
| CN103500186A (en) * | 2013-09-13 | 2014-01-08 | 北京奇虎科技有限公司 | Method and device for loading pictures in browser and browser |
Non-Patent Citations (1)
| Title |
|---|
| 嵌入式浏览器渲染体系结构的研究与设计;于海涛;《中国优秀硕士学位论文全文数据库·信息科技辑》;20111215(第12期);I139-246第23-26页，第30-31页，第35页第3段，第39页，第49-53页 * |
Also Published As
| Publication number | Publication date |
|---|---|
| CN104537111A (en) | 2015-04-22 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| JP6227766B2 (en) | Method, apparatus and terminal device for changing facial expression symbol in chat interface | |
| EP3301557A1 (en) | Method, apparatus and computer program product for sharing content | |
| CN109086374A (en) | Webpage loading display method, device, terminal device and readable storage medium storing program for executing | |
| CN104580019B (en) | Network service provider method and device | |
| CN104536935B (en) | Calculate display methods, calculate edit methods and device | |
| CN105512545B (en) | Access rights management method and device | |
| CN104991752B (en) | Control the method and device of screen rotation | |
| CN108646970B (en) | Display control method and related product | |
| CN105630411A (en) | Memory management method and apparatus | |
| CN105068976A (en) | Ticket information exhibition method and device | |
| US20170090684A1 (en) | Method and apparatus for processing information | |
| CN104811821B (en) | The method and device of screen frame per second is painted in adjustment | |
| CN106126632A (en) | Recommend method and device | |
| CN104778405A (en) | Method and device for blocking advertisements | |
| CN104536787B (en) | Resource preloads method and device | |
| CN105630339A (en) | Method and device for controlling page | |
| CN104951445B (en) | Webpage processing method and device | |
| CN105550213A (en) | Picture browsing method and device | |
| CN104537111B (en) | The loading method and device of Web page picture | |
| CN105635809A (en) | Image processing method and device and terminal | |
| CN106776990B (en) | Information processing method and device and electronic equipment | |
| CN107679118A (en) | page loading method and device | |
| CN105468606A (en) | Webpage saving method and device | |
| CN105183326B (en) | list display method and device | |
| CN104391742B (en) | Optimizing application method and apparatus |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| C10 | Entry into substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| C41 | Transfer of patent application or patent right or utility model | ||
| TA01 | Transfer of patent application right |
Effective date of registration: 20150915 Address after: No. 68, Qinghe middle street, Beijing, Huarun, colorful city shopping center, two, 9, Haidian District Applicant after: Millet Communication Technology Co Ltd Address before: 100085 Beijing city Haidian District Qinghe Street No. 68 Huarun colorful city shopping center two floor 13 Applicant before: Xiaomi Technology Co., Ltd. |
|
| GR01 | Patent grant | ||
| GR01 | Patent grant |