CN104537111A - Method and device for loading web graphics - Google Patents
Method and device for loading web graphics Download PDFInfo
- Publication number
- CN104537111A CN104537111A CN201510026137.9A CN201510026137A CN104537111A CN 104537111 A CN104537111 A CN 104537111A CN 201510026137 A CN201510026137 A CN 201510026137A CN 104537111 A CN104537111 A CN 104537111A
- Authority
- CN
- China
- Prior art keywords
- renderimage
- node
- picture
- web page
- dynamic picture
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Granted
Links
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
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Databases & Information Systems (AREA)
- Data Mining & Analysis (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Information Transfer Between Computers (AREA)
Abstract
The invention relates to a method and device for loading web graphics. The method includes the steps of generating RenderLayers corresponding to dynamic images in a webpage file, generating GraphicsLayers corresponding to the RenderLayers and drawing the dynamic images according to the GraphicsLayers. By means of the method and device, the size of the drawn area can be effectively decreased in the web graphic loading process, rendering performance is promoted, and computing resources of CPUs are saved.
Description
Technical field
The disclosure relates to web technologies field, particularly relates to a kind of loading method and device of Web page picture.
Background technology
Along with the development of Internet technology and mobile terminal, increasing user uses the mobile terminal such as smart mobile phone, panel computer to visit internet.When user uses mobile terminal to browse webpage, if include picture in webpage, browser often will repaint picture.How to promote in drawing process and play up performance, the computational resource saving CPU becomes problem demanding prompt solution.
Summary of the invention
For overcoming Problems existing in correlation technique, the disclosure provides a kind of loading method and device of Web page picture.
According to the first aspect of disclosure embodiment, a kind of loading method of Web page picture is provided, comprises:
The dynamic picture of often opening be respectively in web page files generates the RenderLayer corresponding with described dynamic picture;
For described RenderLayer generates corresponding GraphicsLayer;
Described dynamic picture is drawn according to described GraphicsLayer.
Optionally, described in the dynamic picture of often opening be respectively in web page files generate the RenderLayer corresponding with described dynamic picture, comprising:
Render tree is generated according to described web page files;
The dynamic picture in described web page files is identified in described Render tree;
Be respectively described dynamic picture and generate corresponding RenderLayer.
Optionally, the described dynamic picture identified in described Render tree in described web page files, comprising:
Judge whether the picture number that in described Render tree, RenderImage node comprises is greater than 1;
Judge whether the frame frequency of RenderImage node in described Render tree is greater than 0;
If the picture number that in described Render tree, RenderImage node comprises is greater than 1, and the frame frequency of described RenderImage node is greater than 0, then confirm that described RenderImage node is the RenderImage node of dynamic picture.
Optionally, the described dynamic picture identified in described Render tree in described web page files, comprising:
Judge whether comprise character gif in the path of RenderImage node in described Render tree;
If the path of RenderImage node comprises character gif in described Render tree, then judge whether the picture number that described RenderImage node comprises is greater than 1, judge whether the frame frequency of RenderImage node in described Render tree is greater than 0;
If the picture number that in described Render tree, RenderImage node comprises is greater than 1, and the frame frequency of described RenderImage node is greater than 0, then confirm that described RenderImage node is the RenderImage node of dynamic picture.
Optionally, describedly draw described dynamic picture according to described GraphicsLayer, comprising:
According to described GraphicsLayer, in the region identical with described dynamic picture size, draw described dynamic picture.
According to the second aspect of disclosure embodiment, a kind of charger of Web page picture is provided, comprises:
First generation unit, generates the RenderLayer corresponding with described dynamic picture for the dynamic picture of often opening be respectively in web page files;
Second generation unit, for generating corresponding GraphicsLayer for described RenderLayer;
Picture drawing unit, for drawing described dynamic picture according to described GraphicsLayer.
Optionally, described first generation unit comprises:
First generates subelement, for generating Render tree according to described web page files;
Dynamic Recognition subelement, for identifying the dynamic picture in described web page files in described Render tree;
Second generates subelement, for generating corresponding RenderLayer for described dynamic picture.
Optionally, described Dynamic Recognition subelement comprises:
First judge module, for judging whether the picture number that in described Render tree, RenderImage node comprises is greater than 1;
Second judge module, for judging whether the frame frequency of RenderImage node in described Render tree is greater than 0;
First confirms module, and the picture number comprised for RenderImage node in described Render tree is greater than 1, and when the frame frequency of described RenderImage node is greater than 0, confirms that described RenderImage node is the RenderImage node of dynamic picture.
Optionally, described Dynamic Recognition subelement comprises:
3rd judge module, for judge described Render set in RenderImage node path in whether comprise character gif;
4th judge module, when path for RenderImage node in described Render tree comprises character gif, judge whether the picture number that described RenderImage node comprises is greater than 1, judge whether the frame frequency of RenderImage node in described Render tree is greater than 0;
Second confirms module, and the picture number comprised for RenderImage node in described Render tree is greater than 1, and when the frame frequency of described RenderImage node is greater than 0, confirms that described RenderImage node is the RenderImage node of dynamic picture.
Optionally, described picture drawing unit comprises:
Draw subelement, for according to described GraphicsLayer, in the region identical with described dynamic picture size, draw described dynamic picture.
According to the third aspect of disclosure embodiment, a kind of charger of Web page picture is provided, comprises:
Processor;
For the storer of storage of processor executable instruction;
Wherein, described processor is configured to:
The dynamic picture of often opening be respectively in web page files generates the RenderLayer corresponding with described dynamic picture;
For described RenderLayer generates corresponding GraphicsLayer;
Described dynamic picture is drawn according to described GraphicsLayer.
The technical scheme that embodiment of the present disclosure provides can comprise following beneficial effect:
Disclosure terminal can by generating corresponding RenderLayer for the dynamic picture of often opening in web page files, and then can be that described RenderLayer generates corresponding GraphicsLayer, be and often open dynamic picture and generate a corresponding GraphicsLayer, can draw dynamic picture according to described GraphicsLayer.When the disclosure has multiple dynamic pictures in web page files, drawing often opening dynamic picture respectively, the area size of drafting can be effectively reduced, promote and play up performance, save the computational resource of CPU simultaneously.
Disclosure terminal can judge that the picture number that in described Render tree, RenderImage node comprises is greater than 1, and the frame frequency of described RenderImage node is when being greater than 0, confirm that described RenderImage node is the RenderImage node of dynamic picture, and then improve the accuracy of dynamic picture identification in web page files.
Should be understood that, it is only exemplary and explanatory that above general description and details hereinafter describe, and can not limit the disclosure.
Accompanying drawing explanation
Accompanying drawing to be herein merged in instructions and to form the part of this instructions, shows and meets embodiment of the present disclosure, and is used from instructions one and explains principle of the present disclosure.
Fig. 1 is the process flow diagram of the loading method of a kind of Web page picture according to an exemplary embodiment.
Fig. 2 is the process flow diagram of the loading method of another kind of Web page picture according to an exemplary embodiment.
Fig. 3 is a kind of process flow diagram identifying the dynamic picture in web page files in Render tree according to an exemplary embodiment.
Fig. 4 is the process flow diagram that another kind according to an exemplary embodiment identifies the dynamic picture in web page files in Render tree.
Fig. 5 is the block diagram of the charger of a kind of Web page picture according to an exemplary embodiment.
Fig. 6 is the block diagram of the charger of another kind of Web page picture according to an exemplary embodiment.
Fig. 7 is the block diagram of the charger of another kind of Web page picture according to an exemplary embodiment.
Fig. 8 is the block diagram of the charger of another kind of Web page picture according to an exemplary embodiment.
Fig. 9 is the block diagram of the charger of another kind of Web page picture according to an exemplary embodiment.
Figure 10 is a structural representation of a kind of charger for Web page picture according to an exemplary embodiment.
Embodiment
Here will be described exemplary embodiment in detail, its sample table shows in the accompanying drawings.When description below relates to accompanying drawing, unless otherwise indicated, the same numbers in different accompanying drawing represents same or analogous key element.Embodiment described in following exemplary embodiment does not represent all embodiments consistent with the disclosure.On the contrary, they only with as in appended claims describe in detail, the example of apparatus and method that aspects more of the present disclosure are consistent.
Fig. 1 is the process flow diagram of the loading method of a kind of Web page picture according to an exemplary embodiment.
As shown in Figure 1, the loading method of described Web page picture may be used for, in terminal, comprising the following steps:
In step S101, the dynamic picture of often opening be respectively in web page files generates the RenderLayer corresponding with described dynamic picture.
In the present embodiment, terminal can generate Render tree according to described web page files, in described Render tree, then identifies the dynamic picture in described web page files, and be respectively the RenderLayer that all dynamic pictures identified generate correspondence.
In step s 102, for described RenderLayer generates corresponding GraphicsLayer.
In the present embodiment, terminal can generate corresponding GraphicsLayer for the described RenderLayer generated by dynamic picture, is often to open dynamic picture and generate corresponding GraphicsLayer.
In step s 103, described dynamic picture is drawn according to described GraphicsLayer.
Described as can be seen from above, disclosure terminal can by generating corresponding RenderLayer for the dynamic picture of often opening in web page files, and then can be that described RenderLayer generates corresponding GraphicsLayer, be and often open dynamic picture and generate a corresponding GraphicsLayer, can draw dynamic picture according to described GraphicsLayer.When the disclosure has multiple dynamic pictures in web page files, drawing often opening dynamic picture respectively, the area size of drafting can be effectively reduced, promote and play up performance, save the computational resource of CPU simultaneously.
Fig. 2 is the process flow diagram of the loading method of another kind of Web page picture according to an exemplary embodiment.
As shown in Figure 2, the loading method of described Web page picture may be used for, in terminal, comprising the following steps:
In step 201, Render tree is generated according to web page files.
In the present embodiment, when user is by browser access webpage that terminal is loaded, the request of access of user is sent to associated server by terminal, and described associated server, after the described request of access of parsing, can return a web page files.Terminal, after receiving described web page files, resolves described web page files, generates DOM (Document Object Model, document dbject model) tree and Render tree.Wherein, dom tree is for describing the page info of webpage; Render tree is used for carrying out layout to the page of webpage, mainly comprises the attributes such as the position of each element in webpage, size.
In step 202., in described Render tree, identify the dynamic picture in described web page files.
In the present embodiment, can dynamic picture in web page files according to the attribute information identification of each node in described Render tree.
Please refer to Fig. 3, a kind of according to an exemplary embodiment of the disclosure identifies the process flow diagram of the dynamic picture in web page files in Render tree, describedly in described Render tree, identifies that the dynamic picture in described web page files can comprise:
In step S301, judge whether the picture number that in described Render tree, RenderImage node comprises is greater than 1.If the picture number that in described Render tree, RenderImage node comprises is greater than 1, then perform step S302.
In the present embodiment, each attribute of the picture element in described web page files is stored in the RenderImage node in described Render tree usually, so when identifying the dynamic picture in described web page files, first can search RenderImage node in described Render tree, after finding described RenderImage node, first can judge whether the picture number that described RenderImage node comprises is greater than 1, such as: can judge whether the numerical value of the attribute count of described RenderImage node is greater than 1.If the picture number that described RenderImage node comprises is greater than 1, then step S302 can be performed.If the picture number that described RenderImage node comprises is less than or equal to 1, then illustrate that described RenderImage node is not the RenderImage node of dynamic picture, formed because dynamic picture is usually carried out playing according to certain frame frequency by multiple static images.In the present embodiment, if the picture number that in described Render tree, RenderImage node comprises is less than or equal to 1, then continues to perform this step, next RenderImage node is judged.
In step s 302, judge whether the frame frequency of RenderImage node in described Render tree is greater than 0.If the frame frequency of RenderImage node is greater than 0 in described Render tree, then perform step S303.
In the present embodiment, judge whether the frame frequency attribute of described RenderImage node is greater than 0, if the frame frequency attribute of described RenderImage node is greater than 0, then perform step S303.If the frame frequency of RenderImage node equals 0 in described Render tree, then illustrate that described RenderImage node is not the RenderImage node of dynamic picture, can step S301 be performed, next RenderImage node is judged.
In step S303, confirm that described RenderImage node is the RenderImage node of dynamic picture.
In the present embodiment, based on the judged result of abovementioned steps S301 and step S302, if RenderImage node includes plurality of pictures in described Render tree, and frame frequency is greater than 0, then in this step, can confirm that described RenderImage node is the RenderImage node of dynamic picture.
It should be noted that, the present embodiment does not limit the execution sequence of abovementioned steps S301 and step S302, in another embodiment of the disclosure, also first step S302 can be performed, judge whether the frame frequency of RenderImage node in described Render tree is greater than 0, if judge that the frame frequency of RenderImage node in described Render tree is greater than 0, then perform step S301, judge whether the picture number that in described Render tree, RenderImage node comprises is greater than 1.And in step S303, still that the picture number that RenderImage node comprises in described Render tree is greater than 1, and the frame frequency of described RenderImage node is greater than 0, namely, when these two conditions all meet, confirm that described RenderImage node is the RenderImage node of dynamic picture.
In the present embodiment, terminal can judge that the picture number that in described Render tree, RenderImage node comprises is greater than 1, and the frame frequency of described RenderImage node is when being greater than 0, confirm that described RenderImage node is the RenderImage node of dynamic picture, and then improve the accuracy of dynamic picture identification in web page files.
Please refer to Fig. 4, the another kind of the disclosure according to an exemplary embodiment identifies the process flow diagram of the dynamic picture in web page files in Render tree, describedly in described Render tree, identifies that the dynamic picture in described web page files can comprise:
In step S401, judge whether comprise character gif in the path of RenderImage node in described Render tree.If the path of RenderImage node comprises character gif in described Render tree, then perform step S402.
In the present embodiment, each attribute of the picture element in described web page files is stored in the RenderImage node in described Render tree usually, so when identifying the dynamic picture in described web page files, first can search RenderImage node in described Render tree, after finding described RenderImage node, first can judge whether comprise character gif in the path of described RenderImage node, if the path of described RenderImage node comprises character gif, then described RenderImage node may gif form be the RenderImage node of static images, also may be the dynamic picture of gif form, perform step S402, proceed to judge.If in described Render tree RenderImage node path in do not comprise character gif, then described RenderImage node is not the RenderImage node of dynamic picture, continues to perform this step, judges next RenderImage node.
In step S402, judge whether the picture number that described RenderImage node comprises is greater than 1, judge whether the frame frequency of RenderImage node in described Render tree is greater than 0.If the picture number that in described Render tree, RenderImage node comprises is greater than 1, and the frame frequency of described RenderImage node is greater than 0, then perform step S403.
In the present embodiment, the picture number comprise described RenderImage node and frame frequency judge, can the existing process shown in reference diagram 3, and this is no longer going to repeat them.
In this step, if the picture number that in described Render tree, RenderImage node comprises is less than or equal to 1, or the frame frequency of RenderImage node equals 0 in described Render tree, or the frame frequency that the picture number that in described Render tree, RenderImage node comprises is less than or equal to RenderImage node in described Render tree while 1 equals 0, all illustrate that described RenderImage node is not the RenderImage node of dynamic picture, perform step S401, next RenderImage node is judged.
In step S403, confirm that described RenderImage node is the RenderImage node of dynamic picture.
In the present embodiment, based on the judged result of abovementioned steps S402, if RenderImage node includes plurality of pictures in described Render tree, and frame frequency is greater than 0, then in this step, can confirm that described RenderImage node is the RenderImage node of dynamic picture.
In step S203, be respectively described dynamic picture and generate corresponding RenderLayer.
In the present embodiment, described RenderLayer represents the content of webpage one deck, and described content stores, for follow-up drafting with the form of Web page rendering order.
In this step, based on abovementioned steps S202, after identifying the dynamic picture in described web page files, be that described dynamic picture generates corresponding RenderLayer in this step.For example, suppose to identify in abovementioned steps S202 in described web page files and include altogether 3 dynamic pictures, then in this step, be respectively these 3 dynamic pictures and generate corresponding RenderLayer, namely generate 3 RenderLayer.
In step S204, for described RenderLayer generates corresponding GraphicsLayer.
In the present embodiment, described GraphicsLayer is generated when meeting certain condition by RenderLayer, such as: generate corresponding GraphicsLayer when RenderLayer has particular community.Described GraphicsLayer is that terminal needs the independent web page area drawn.
Based on abovementioned steps S203, after generating corresponding RenderLayer for described dynamic picture, be respectively each RenderLayer and generate corresponding GraphicsLayer, be described dynamic picture and generate corresponding GraphicsLayer.To be assumed to be example in step S203, in this step, be respectively aforementioned 3 RenderLayer and generate corresponding GraphicsLayer, namely generate 3 GraphicsLayer, described 3 GraphicsLayer corresponding with aforesaid 3 dynamic pictures respectively.
It should be noted that, in practical implementations, the generation of RenderLayer and the generation of GraphicsLayer are two independently processes, so in this step when generating corresponding GraphicsLayer for RenderLayer, first can judge whether described RenderLayer is generated by dynamic picture, if described RenderLayer is generated by dynamic picture, be then that described RenderLayer generates corresponding GraphicsLayer, if described RenderLayer is generated by dynamic picture, then process according to the method for the GraphicsLayer generated in correlation technique, this is no longer going to repeat them.
In step S205, according to described GraphicsLayer, in the region identical with described dynamic picture size, draw described dynamic picture.
In the present embodiment, terminal according to each GraphicsLayer to carry out Web page rendering.Still to be assumed to be example in step S203, terminal, according to described 3 GraphicsLayer, draws aforementioned 3 dynamic pictures respectively.Suppose, the size of described 3 dynamic pictures is respectively: X
1× Y
1, X
2× Y
2and X
3× Y
3, then terminal is according to the GraphicsLayer of these 3 dynamic pictures, is X respectively in size
1× Y
1, X
2× Y
2and X
3× Y
3region in, with these 3 dynamic pictures frame frequency separately, these 3 dynamic pictures are drawn.
Described as can be seen from above, terminal can by generating corresponding RenderLayer for the dynamic picture of often opening in web page files, and then can be that described RenderLayer generates corresponding GraphicsLayer, be and often open dynamic picture and generate a corresponding GraphicsLayer, can draw dynamic picture according to described GraphicsLayer.When the disclosure has multiple dynamic pictures in web page files, drawing often opening dynamic picture respectively, the area size of drafting can be effectively reduced, promote and play up performance, save the computational resource of CPU simultaneously.
Corresponding with the loading method embodiment of aforementioned Web page picture, the disclosure additionally provides a kind of embodiment of charger of Web page picture.
Fig. 5 is the charger block diagram of a kind of Web page picture according to an exemplary embodiment.Described device may be used in terminal.
As shown in Figure 5, the charger 500 of described Web page picture comprises: the first generation unit 501, second generation unit 502 and picture drawing unit 503.
Wherein, described first generation unit 501 is configured to: the dynamic picture of often opening be respectively in web page files generates the RenderLayer corresponding with described dynamic picture.
Described second generation unit 502 is configured to: for described RenderLayer generates corresponding GraphicsLayer.
Described picture drawing unit 503 is configured to: draw described dynamic picture according to described GraphicsLayer.
In above-described embodiment, terminal can by generating corresponding RenderLayer for the dynamic picture of often opening in web page files, and then can be that described RenderLayer generates corresponding GraphicsLayer, be and often open dynamic picture and generate a corresponding GraphicsLayer, can draw dynamic picture according to described GraphicsLayer.When the disclosure has multiple dynamic pictures in web page files, drawing often opening dynamic picture respectively, the area size of drafting can be effectively reduced, promote and play up performance, save the computational resource of CPU simultaneously.
Fig. 6 is the block diagram of the charger of another kind of Web page picture according to an exemplary embodiment, described device may be used in terminal, this embodiment is on the basis of the embodiment shown in earlier figures 5, and described first generation unit 501 can comprise: first generates subelement 5011, Dynamic Recognition subelement 5012 and second generates subelement 5013.
Wherein, described first generation subelement 5011 is configured to: generate Render tree according to described web page files.
Described Dynamic Recognition subelement 5012 is configured to: in described Render tree, identify the dynamic picture in described web page files.
Described second generates subelement 5013 is configured to: for described dynamic picture generates corresponding RenderLayer.
Fig. 7 is the block diagram of the charger of another kind of Web page picture according to an exemplary embodiment, described device may be used in terminal, this embodiment is on the basis of the embodiment shown in earlier figures 6, and described Dynamic Recognition subelement 5012 can comprise: the first judge module 5012A, the second judge module 5012B and first confirm module 5012C.
Wherein, described first judge module 5012A is configured to: judge whether the picture number that in described Render tree, RenderImage node comprises is greater than 1.
Described second judge module 5012B is configured to: judge whether the frame frequency of RenderImage node in described Render tree is greater than 0.
Described first confirms that module 5012C is configured to: the picture number that RenderImage node comprises in described Render tree is greater than 1, and the frame frequency of described RenderImage node is when being greater than 0, confirm that described RenderImage node is the RenderImage node of dynamic picture.
In above-described embodiment, terminal can judge that the picture number that in described Render tree, RenderImage node comprises is greater than 1, and the frame frequency of described RenderImage node is when being greater than 0, confirm that described RenderImage node is the RenderImage node of dynamic picture, and then improve the accuracy of dynamic picture identification in web page files.
Fig. 8 is the block diagram of the charger of another kind of Web page picture according to an exemplary embodiment, described device may be used in terminal, this embodiment is on the basis of the embodiment shown in earlier figures 6, and described Dynamic Recognition subelement 5012 can comprise: the 3rd judge module 5012D, the 4th judge module 5012E and second confirm module 5012F.
Wherein, described 3rd judge module 5012D is configured to: judge whether comprise character gif in the path of RenderImage node in described Render tree.
Described 4th judge module 5012E is configured to: when in described Render tree, the path of RenderImage node comprises character gif, judge whether the picture number that described RenderImage node comprises is greater than 1, judge whether the frame frequency of RenderImage node in described Render tree is greater than 0.
Described second confirms that module 5012F is configured to: the picture number that RenderImage node comprises in described Render tree is greater than 1, and the frame frequency of described RenderImage node is when being greater than 0, confirm that described RenderImage node is the RenderImage node of dynamic picture.
Fig. 9 is the block diagram of the charger of another kind of Web page picture according to an exemplary embodiment, described device may be used in terminal, this embodiment is on the basis of the embodiment shown in earlier figures 5, and described picture drawing unit 503 can comprise: draw subelement 5031.
Described drafting subelement 5031 is configured to: according to described GraphicsLayer, in the region identical with described dynamic picture size, draw described dynamic picture.
It should be noted that, the described drafting subelement 5031 shown in the embodiment shown in above-mentioned Fig. 9 also can be included in the device embodiment shown in earlier figures 6 to Fig. 8, and the disclosure does not make particular restriction to this.
About the device in above-described embodiment, wherein the concrete mode of modules executable operations has been described in detail in about the embodiment of the method, will not elaborate explanation herein.
For device embodiment, because it corresponds essentially to embodiment of the method, so relevant part illustrates see the part of embodiment of the method.Device embodiment described above is only schematic, the wherein said unit illustrated as separating component or can may not be and physically separates, parts as unit display can be or may not be physical location, namely can be positioned at a place, or also can be distributed in multiple network element.Some or all of module wherein can be selected according to the actual needs to realize the object of disclosure scheme.Those of ordinary skill in the art, when not paying creative work, are namely appreciated that and implement.
Accordingly, the disclosure also provides a kind of charger of Web page picture, and described device comprises: processor; For the storer of storage of processor executable instruction; Wherein, described processor is configured to: the dynamic picture of often opening be respectively in web page files generates the RenderLayer corresponding with described dynamic picture; For described RenderLayer generates corresponding GraphicsLayer; Described dynamic picture is drawn according to described GraphicsLayer.
Accordingly, the disclosure also provides a kind of non-transitory computer-readable recording medium, when the processor of the instruction in described storage medium by terminal performs, make terminal can perform a kind of loading method of Web page picture, described method comprises: the dynamic picture of often opening be respectively in web page files generates the RenderLayer corresponding with described dynamic picture; For described RenderLayer generates corresponding GraphicsLayer; Described dynamic picture is drawn according to described GraphicsLayer.
Figure 10 is the block diagram of a kind of charger 1000 for Web page picture according to an exemplary embodiment.Such as, device 1000 can be mobile phone, computing machine, digital broadcast terminal, messaging devices, game console, tablet device, Medical Devices, body-building equipment, personal digital assistant etc.
With reference to Figure 10, device 1000 can comprise following one or more assembly: processing components 1002, storer 1004, power supply module 1006, multimedia groupware 1008, audio-frequency assembly 1010, the interface 1012 of I/O (I/O), sensor module 1014, and communications component 1016.
The integrated operation of the usual control device 1000 of processing components 1002, such as with display, call, data communication, camera operation and record operate the operation be associated.Treatment element 1002 can comprise one or more processor 1020 to perform instruction, to complete all or part of step of above-mentioned method.In addition, processing components 1002 can comprise one or more module, and what be convenient between processing components 1002 and other assemblies is mutual.Such as, processing element 1002 can comprise multi-media module, mutual with what facilitate between multimedia groupware 1008 and processing components 1002.
Storer 1004 is configured to store various types of data to be supported in the operation of equipment 1000.The example of these data comprises for any application program of operation on device 1000 or the instruction of method, contact data, telephone book data, message, picture, video etc.Storer 1004 can be realized by the volatibility of any type or non-volatile memory device or their combination, as static RAM (SRAM), Electrically Erasable Read Only Memory (EEPROM), Erasable Programmable Read Only Memory EPROM (EPROM), programmable read only memory (PROM), ROM (read-only memory) (ROM), magnetic store, flash memory, disk or CD.
The various assemblies that electric power assembly 1006 is device 1000 provide electric power.Electric power assembly 1006 can comprise power-supply management system, one or more power supply, and other and the assembly generating, manage and distribute electric power for device 1000 and be associated.
Multimedia groupware 1008 is included in the screen providing an output interface between described device 1000 and user.In certain embodiments, screen can comprise liquid crystal display (LCD) and touch panel (TP).If screen comprises touch panel, screen may be implemented as touch-screen, to receive the input signal from user.Touch panel comprises one or more touch sensor with the gesture on sensing touch, slip and touch panel.Described touch sensor can the border of not only sensing touch or sliding action, but also detects the duration relevant to described touch or slide and pressure.In certain embodiments, multimedia groupware 1108 comprises a front-facing camera and/or post-positioned pick-up head.When equipment 1100 is in operator scheme, during as screening-mode or video mode, front-facing camera and/or post-positioned pick-up head can receive outside multi-medium data.Each front-facing camera and post-positioned pick-up head can be fixing optical lens systems or have focal length and optical zoom ability.
Audio-frequency assembly 1010 is configured to export and/or input audio signal.Such as, audio-frequency assembly 1010 comprises a microphone (MIC), and when device 1000 is in operator scheme, during as call model, logging mode and speech recognition mode, microphone is configured to receive external audio signal.The sound signal received can be stored in storer 1004 further or be sent via communications component 1016.In certain embodiments, audio-frequency assembly 1010 also comprises a loudspeaker, for output audio signal.
I/O interface 1012 is for providing interface between processing components 1002 and peripheral interface module, and above-mentioned peripheral interface module can be keyboard, some striking wheel, button etc.These buttons can include but not limited to: home button, volume button, start button and locking press button.
Sensor module 1014 comprises one or more sensor, for providing the state estimation of various aspects for device 1000.Such as, sensor module 1014 can detect the opening/closing state of equipment 1000, the relative positioning of assembly, such as described assembly is display and the keypad of device 1000, the position of all right pick-up unit 1000 of sensor module 1014 or device 1000 assemblies changes, the presence or absence that user contacts with device 1000, the temperature variation of device 1000 orientation or acceleration/deceleration and device 1000.Sensor module 1014 can comprise proximity transducer, be configured to without any physical contact time detect near the existence of object.Sensor module 1014 can also comprise optical sensor, as CMOS or ccd image sensor, for using in imaging applications.In certain embodiments, this sensor module 1014 can also comprise acceleration transducer, gyro sensor, Magnetic Sensor, pressure transducer or temperature sensor.
Communications component 1016 is configured to the communication being convenient to wired or wireless mode between device 1000 and other equipment.Device 1000 can access the wireless network based on communication standard, as WiFi, 2G or 3G, or their combination.In one exemplary embodiment, communication component 1016 receives from the broadcast singal of external broadcasting management system or broadcast related information via broadcast channel.In one exemplary embodiment, described communication component 1016 also comprises near-field communication (NFC) module, to promote junction service.Such as, can based on radio-frequency (RF) identification (RFID) technology in NFC module, Infrared Data Association (IrDA) technology, ultra broadband (UWB) technology, bluetooth (BT) technology and other technologies realize.
In the exemplary embodiment, device 1000 can be realized, for performing said method by one or more application specific integrated circuit (ASIC), digital signal processor (DSP), digital signal processing appts (DSPD), programmable logic device (PLD) (PLD), field programmable gate array (FPGA), controller, microcontroller, microprocessor or other electronic components.
In the exemplary embodiment, additionally provide a kind of non-transitory computer-readable recording medium comprising instruction, such as, comprise the storer 1004 of instruction, above-mentioned instruction can perform said method by the processor 1020 of device 1000.Such as, described non-transitory computer-readable recording medium can be ROM, random access memory (RAM), CD-ROM, tape, floppy disk and optical data storage devices etc.
Those skilled in the art, at consideration instructions and after putting into practice disclosed herein disclosing, will easily expect other embodiment of the present disclosure.The application is intended to contain any modification of the present disclosure, purposes or adaptations, and these modification, purposes or adaptations are followed general principle of the present disclosure and comprised the undocumented common practise in the art of the disclosure or conventional techniques means.Instructions and embodiment are only regarded as exemplary, and true scope of the present disclosure and spirit are pointed out by claim below.
Should be understood that, the disclosure is not limited to precision architecture described above and illustrated in the accompanying drawings, and can carry out various amendment and change not departing from its scope.The scope of the present disclosure is only limited by appended claim.
Claims (11)
1. a loading method for Web page picture, is characterized in that, comprising:
The dynamic picture of often opening be respectively in web page files generates the RenderLayer corresponding with described dynamic picture;
For described RenderLayer generates corresponding GraphicsLayer;
Described dynamic picture is drawn according to described GraphicsLayer.
2. the loading method of Web page picture according to claim 1, is characterized in that,
The described dynamic picture of often opening be respectively in web page files generates the RenderLayer corresponding with described dynamic picture, comprising:
Render tree is generated according to described web page files;
The dynamic picture in described web page files is identified in described Render tree;
Be respectively described dynamic picture and generate corresponding RenderLayer.
3. the loading method of Web page picture according to claim 2, is characterized in that,
The described dynamic picture identified in described Render tree in described web page files, comprising:
Judge whether the picture number that in described Render tree, RenderImage node comprises is greater than 1;
Judge whether the frame frequency of RenderImage node in described Render tree is greater than 0;
If the picture number that in described Render tree, RenderImage node comprises is greater than 1, and the frame frequency of described RenderImage node is greater than 0, then confirm that described RenderImage node is the RenderImage node of dynamic picture.
4. the loading method of Web page picture according to claim 2, is characterized in that,
The described dynamic picture identified in described Render tree in described web page files, comprising:
Judge whether comprise character gif in the path of RenderImage node in described Render tree;
If the path of RenderImage node comprises character gif in described Render tree, then judge whether the picture number that described RenderImage node comprises is greater than 1, judge whether the frame frequency of RenderImage node in described Render tree is greater than 0;
If the picture number that in described Render tree, RenderImage node comprises is greater than 1, and the frame frequency of described RenderImage node is greater than 0, then confirm that described RenderImage node is the RenderImage node of dynamic picture.
5. the loading method of Web page picture according to claim 1, is characterized in that,
Describedly draw described dynamic picture according to described GraphicsLayer, comprising:
According to described GraphicsLayer, in the region identical with described dynamic picture size, draw described dynamic picture.
6. a charger for Web page picture, is characterized in that, comprising:
First generation unit, generates the RenderLayer corresponding with described dynamic picture for the dynamic picture of often opening be respectively in web page files;
Second generation unit, for generating corresponding GraphicsLayer for described RenderLayer;
Picture drawing unit, for drawing described dynamic picture according to described GraphicsLayer.
7. the charger of Web page picture according to claim 6, is characterized in that, described first generation unit comprises:
First generates subelement, for generating Render tree according to described web page files;
Dynamic Recognition subelement, for identifying the dynamic picture in described web page files in described Render tree;
Second generates subelement, for generating corresponding RenderLayer for described dynamic picture.
8. the charger of Web page picture according to claim 7, is characterized in that, described Dynamic Recognition subelement comprises:
First judge module, for judging whether the picture number that in described Render tree, RenderImage node comprises is greater than 1;
Second judge module, for judging whether the frame frequency of RenderImage node in described Render tree is greater than 0;
First confirms module, and the picture number comprised for RenderImage node in described Render tree is greater than 1, and when the frame frequency of described RenderImage node is greater than 0, confirms that described RenderImage node is the RenderImage node of dynamic picture.
9. the charger of Web page picture according to claim 7, is characterized in that, described Dynamic Recognition subelement comprises:
3rd judge module, for judge described Render set in RenderImage node path in whether comprise character gif;
4th judge module, when path for RenderImage node in described Render tree comprises character gif, judge whether the picture number that described RenderImage node comprises is greater than 1, judge whether the frame frequency of RenderImage node in described Render tree is greater than 0;
Second confirms module, and the picture number comprised for RenderImage node in described Render tree is greater than 1, and when the frame frequency of described RenderImage node is greater than 0, confirms that described RenderImage node is the RenderImage node of dynamic picture.
10. the charger of Web page picture according to claim 6, is characterized in that, described picture drawing unit comprises:
Draw subelement, for according to described GraphicsLayer, in the region identical with described dynamic picture size, draw described dynamic picture.
The charger of 11. 1 kinds of Web page pictures, is characterized in that, comprising:
Processor;
For the storer of storage of processor executable instruction;
Wherein, described processor is configured to:
The dynamic picture of often opening be respectively in web page files generates the RenderLayer corresponding with described dynamic picture;
For described RenderLayer generates corresponding GraphicsLayer;
Described dynamic picture is drawn according to described 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 true CN104537111A (en) | 2015-04-22 |
| CN104537111B 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) |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN108874829A (en) * | 2017-05-12 | 2018-11-23 | 腾讯科技（深圳）有限公司 | Processing method, device, smart machine and the computer storage medium of webpage |
| CN111475245A (en) * | 2020-04-08 | 2020-07-31 | 腾讯科技（深圳）有限公司 | 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 (4)
| Title |
|---|
| CSDN.NET: "graphicslayer", 《HTTP://BLOG.CSDN.NET/CAOLIN23/ARTICLE/DETAILS/38736045》 * |
| ROGER: "How Rendering Work (in WebKit and Blink)", 《HTTPS://ROGERYI.WORDPRESS.COM/》 * |
| YONGSHENG: "理解WebKit和Chromium: 硬件加速之RenderLayer树到合成树", 《HTTP://BLOG.CSDN.NET/MILADO_NJU/ARTICLE/DETAILS/8900792》 * |
| 于海涛: "嵌入式浏览器渲染体系结构的研究与设计", 《中国优秀硕士学位论文全文数据库·信息科技辑》 * |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN108874829A (en) * | 2017-05-12 | 2018-11-23 | 腾讯科技（深圳）有限公司 | Processing method, device, smart machine and the computer storage medium of webpage |
| CN111475245A (en) * | 2020-04-08 | 2020-07-31 | 腾讯科技（深圳）有限公司 | Dynamic picture display method and device, electronic equipment and computer storage medium |
Also Published As
| Publication number | Publication date |
|---|---|
| CN104537111B (en) | 2018-09-04 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN105630411A (en) | Memory management method and apparatus | |
| CN104869569A (en) | Network permission control method and apparatus of application program | |
| CN104375828A (en) | Method and device for optimizing memory | |
| CN104766005A (en) | Management method and device for application software access authority | |
| CN104679599A (en) | Application program duplicating method and device | |
| CN104038536A (en) | Plug-in communication method and device | |
| CN104899610A (en) | Picture classification method and device | |
| CN104636106A (en) | Picture displaying method and device and terminal device | |
| CN104536935A (en) | Calculation displaying method, calculation editing method and device | |
| CN105354017A (en) | Information processing method and apparatus | |
| CN105159524A (en) | Interface display method and apparatus | |
| CN105487886A (en) | Method and device for loading plugin | |
| CN104020924A (en) | Label establishing method and device and terminal | |
| CN104778405A (en) | Method and device for blocking advertisements | |
| CN104391711A (en) | Method and device for setting screen protection | |
| CN104536787B (en) | Resource preloads method and device | |
| CN104484438A (en) | Image processing method and device | |
| CN104407924A (en) | Method and device for optimizing internal memory | |
| CN104636164A (en) | Generating method and device for starting page | |
| CN105376412A (en) | Information processing method and device | |
| CN104881304A (en) | Resource downloading method and device | |
| CN105550213A (en) | Picture browsing method and device | |
| CN104182505A (en) | Webpage rearrangement method and device | |
| CN105488829A (en) | Method and device for generating head portrait | |
| CN105468417A (en) | Application software installation method and device |
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 |