CN105653612A - Page rendering method and device - Google Patents
Page rendering method and device Download PDFInfo
- Publication number
- CN105653612A CN105653612A CN201510988888.9A CN201510988888A CN105653612A CN 105653612 A CN105653612 A CN 105653612A CN 201510988888 A CN201510988888 A CN 201510988888A CN 105653612 A CN105653612 A CN 105653612A
- Authority
- CN
- China
- Prior art keywords
- display position
- page elements
- page
- canvas element
- appointment
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
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
- G06F16/957—Browsing optimisation, e.g. caching or content distillation
Landscapes
- Engineering & Computer Science (AREA)
- Databases & Information Systems (AREA)
- Theoretical Computer Science (AREA)
- Data Mining & Analysis (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Controls And Circuits For Display Device (AREA)
Abstract
The invention provides a page rendering method and device, which belongs to the field of the network technology. The method comprises the following steps: according to the source code of a page to be rendered, obtaining an appointed canvas element and a plurality of page elements, and rendering the appointed canvas element; obtaining the display position of each page element in the appointed canvas element, wherein each page element is a direct subnode of the appointed canvas element; and according to the display position of each page element in the appointed canvas element, rendering each page element in the appointed canvas element to display the page. Each page element is a direct subnode of the appointed canvas element, the page element can be directly rendered to the appointed canvas element during rendering, the page element which is affected by a changed page element needs to be redrawn when any one page element is changed, not all the page elements in the page need to be redrawn, and therefore, rendering efficiency is high.
Description
Technical field
It relates to networking technology area, particularly relate to a kind of page rendering method and device.
Background technology
When the webpage opened by browser, each page generates through browser renders. Each page is usually by HTML (HyperTextMarkupLanguage, HyperText Markup Language), CSS (CascadingStyleSheets, CSS), JavaScript, the file such as picture constitute, when input in a browser respective page network address or click respective page link time, browser is after obtaining, from server, the file that respective page is corresponding, the content needing display is rendered, to show the page.
In correlation technique, browser is when rendering the page, difference according to content to be displayed element type, content to be displayed is rendered to different labels, such as " picture " is rendered to " img " label, " paragraph " is rendered to " p " label, " article " is rendered to " article " label, " title " is rendered to " h " label etc. Browser is when rendering the page, first according to the filiation between each element, generates a render tree, a node in each element correspondence render tree. Afterwards, according to according to from top to bottom or from bottom to up render rule, calculate the display position of each element successively, and then each element be rendered to corresponding label, to show the page. When one of them label changes, recalculate the display position of each label in the page, again render the page according to the position after recalculating, generate a new page.
Summary of the invention
For overcoming Problems existing in correlation technique, the disclosure provides a kind of encryption method and device, and described technical scheme is as follows:
First aspect according to disclosure embodiment, it is provided that a kind of page rendering method, including:
Source code according to the page to be rendered, obtains and specifies canvas element and multiple page elements, and render described appointment canvas element;
Obtaining each page elements display position in described appointment canvas element, each page elements is the direct child node of described appointment canvas element;
According to described each page elements display position in described appointment canvas element, described appointment canvas element renders described each page elements, to show the described page.
Alternatively, described acquisition each page elements display position in described appointment canvas element includes:
Obtain the first size of described each page elements and the first coordinate of described each page elements;
Coordinates regional according to typesetting engine instruction, described appointment canvas element obtains the viewing area corresponding with described first size and described first coordinate, described viewing area is defined as described each page elements display position in described appointment canvas element.
Alternatively, described method also includes:
Obtain the maximum coordinates region of typesetting engine instruction;
Judge that whether described maximum coordinates region is consistent with screen size;
If described maximum coordinates region is inconsistent with described screen size, then according to the proportionate relationship between size and the described screen size of the instruction of described maximum coordinates region, described maximum coordinates region is adjusted the size consistent with described screen size.
Alternatively, described method also includes:
When change occurs current display position any page surface element in described appointment canvas element being detected, after obtaining change, page elements newly shows position;
Judge described new display position is with whether the display position of other page elements in described appointment canvas element exists lap;
If being absent from lap, then delete the page elements being positioned at described current display position, and according to described new display position, page elements after again rendering described change in described appointment canvas element.
Alternatively, described judge in described new display position and described appointment canvas element whether the display position of other page elements exists lap after, described method also includes:
If there is lap, then obtain the first display position of other page elements described that there is lap with described new display position;
Show that position is adjusted to described first, obtain the second display position so that between described second display position and described new display position, be absent from lap;
Delete the page elements being positioned at described current display position and be positioned at the page elements of described first display position;
Render page elements after described change according to described new display position, and show that position renders other page elements described again according to described second.
Second aspect according to disclosure embodiment, it is provided that a kind of page rendering device, including:
Element acquisition module, for the source code according to the page to be rendered, obtains and specifies canvas element and multiple page elements;
Rendering module, is used for rendering described appointment canvas element;
Display position acquisition module, for obtaining each page elements display position in described appointment canvas element, each page elements is the direct child node of described appointment canvas element;
Described rendering module, is additionally operable to, according to described each page elements display position in described appointment canvas element, render described each page elements, to show the described page in described appointment canvas element.
Alternatively, described display position acquisition module, for obtaining the first size of described each page elements and the first coordinate of described each page elements; Coordinates regional according to typesetting engine instruction, described appointment canvas element obtains the viewing area corresponding with described first size and described first coordinate, described viewing area is defined as described each page elements display position in described appointment canvas element.
Alternatively, described device also includes:
Coordinates regional acquisition module, for obtaining the maximum coordinates region of typesetting engine instruction;
First judge module, is used for judging that whether described maximum coordinates region is consistent with screen size;
Coordinates regional adjusting module, for when described maximum coordinates region and described screen size are inconsistent, the proportionate relationship between size and described screen size according to the instruction of described maximum coordinates region, adjusts the size consistent with described screen size by described maximum coordinates region.
Alternatively, described display position acquisition module, it is additionally operable to when change occurs current display position any page surface element in described appointment canvas element being detected, after obtaining change, page elements newly shows position;
Described device also includes: the second judge module, for judging described new display position is with whether the display position of other page elements in described appointment canvas element exists lap;
Described rendering module, is additionally operable to when being absent from lap, deletes the page elements being positioned at described current display position, and according to described new display position, page elements after again rendering described change in described appointment canvas element.
Alternatively, described display position acquisition module, being additionally operable to when there is lap, obtaining the first display position of other page elements described that there is lap with described new display position;
Described device also includes: display position adjusting type modules, for showing that position is adjusted to described first, obtains the second display position so that be absent from lap between described second display position and described new display position;
Removing module, for deleting the page elements being positioned at described current display position and being positioned at the page elements of described first display position;
According to described second, described rendering module, for rendering page elements after described change according to described new display position, and shows that position renders other page elements described again.
The third aspect according to disclosure embodiment, it is provided that a kind of page rendering device, including:
Processor;
For storing the memorizer of processor executable;
Wherein, described processor is configured to: the source code according to the page to be rendered, obtains and specifies canvas element and multiple page elements, and renders described appointment canvas element; Obtaining each page elements display position in described appointment canvas element, each page elements is the direct child node of described appointment canvas element; According to described each page elements display position in described appointment canvas element, described appointment canvas element renders described each page elements, to show the described page.
Embodiment of the disclosure that the technical scheme of offer can include following beneficial effect:
Source code according to the page to be rendered, obtains and specifies canvas element and multiple page elements, and render appointment canvas element; Obtaining each page elements display position in specifying canvas element, each page elements is the direct child node specifying canvas element; Specify the display position in canvas element according to each page elements, in specifying canvas element, render each page elements, to show the page. Owing to each page elements is the direct child node specifying canvas element, therefore can directly render to page elements when rendering specify in canvas element, when there is change in any page surface element, the page elements that page elements after change is had influence on only is needed to repaint, without the whole page elements in the page are repainted, therefore page rendering efficiency is high.
It should be appreciated that it is only exemplary and explanatory that above general description and details hereinafter describe, the disclosure can not be limited.
Accompanying drawing explanation
Accompanying drawing herein is merged in description and constitutes the part of this specification, it is shown that meets and embodiment of the disclosure, and for explaining the principle of the disclosure together with description.
Fig. 1 is the flow chart of a kind of page rendering method according to an exemplary embodiment.
Fig. 2 is the flow chart of a kind of page rendering method according to an exemplary embodiment.
Fig. 3 is the block diagram of a kind of page rendering device according to an exemplary embodiment.
Fig. 4 is the block diagram of a kind of page rendering device according to an exemplary embodiment.
Fig. 5 is the block diagram of a kind of page rendering device according to an exemplary embodiment.
Fig. 6 is the block diagram of a kind of page rendering device according to an exemplary embodiment.
Fig. 7 is the block diagram of a kind of page rendering device according to an exemplary embodiment.
Detailed description of the invention
For making the purpose of the disclosure, technical scheme and advantage clearly, below in conjunction with accompanying drawing, disclosure embodiment is described in further detail.
Here in detail exemplary embodiment being illustrated, its example representation is in the accompanying drawings. When as explained below relates to accompanying drawing, unless otherwise indicated, the same numbers in different accompanying drawings 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 in appended claims describe in detail, the disclosure some in the example of consistent apparatus and method.
Fig. 1 is the flow chart of a kind of page rendering method according to an exemplary embodiment, as it is shown in figure 1, comprise the following steps:
In a step 101, the source code according to the page to be rendered, obtain and specify canvas element and multiple page elements, and render appointment canvas element.
In a step 102, obtaining each page elements display position in specifying canvas element, each page elements is the direct child node specifying canvas element.
In step 103, specifying the display position in canvas element according to each page elements, in specifying canvas element, rendering each page elements, to show the page.
The method that disclosure embodiment provides, the source code according to the page to be rendered, obtain and specify canvas element and multiple page elements, and render appointment canvas element; Obtaining each page elements display position in specifying canvas element, each page elements is the direct child node specifying canvas element; Specify the display position in canvas element according to each page elements, in specifying canvas element, render each page elements, to show the page. Owing to each page elements is the direct child node specifying canvas element, therefore can directly render to page elements when rendering specify in canvas element, when there is change in any page surface element, the page elements that page elements after change is had influence on only is needed to repaint, without the whole page elements in the page are repainted, therefore page rendering efficiency is high.
Alternatively, obtain each page elements display position in specifying canvas element to include:
Obtain the first size of each page elements and the first coordinate of each page elements;
Coordinates regional according to typesetting engine instruction, obtains the viewing area corresponding with first size and the first coordinate in specifying canvas element, and viewing area is defined as each page elements display position in specifying canvas element.
Alternatively, the method also includes:
Obtain the maximum coordinates region of typesetting engine instruction;
Judge that whether maximum coordinates region is consistent with screen size;
If maximum coordinates region is inconsistent with screen size, then according to the proportionate relationship between size and the screen size of the instruction of maximum coordinates region, maximum coordinates region is adjusted the size consistent with screen size.
Alternatively, the method also includes:
When the current display position generation change specifying any page surface element in canvas element being detected, after obtaining change, page elements newly shows position;
Judge new display position and specify whether the display position of other page elements in canvas element exists lap;
If being absent from lap, then delete the page elements being positioned at current display position, and according to newly showing position, page elements after again rendering change in specifying canvas element.
Alternatively, it is judged that after newly showing position and in appointment canvas element, whether the display position of other page elements existing lap, the method also includes:
If there is lap, then obtain the first display position of other page elements that there is lap with new display position;
Show that position is adjusted to first, obtain the second display position so that between the second display position and new display position, be absent from lap;
Delete and be positioned at the page elements of current display position and be positioned at the page elements of the first display position;
Render page elements after change according to new display position, and show that position renders other page elements again according to second.
Above-mentioned all optional technical schemes, it is possible to adopting and arbitrarily combine the alternative embodiment forming the disclosure, this is no longer going to repeat them.
Fig. 2 is the flow chart of a kind of page rendering method according to an exemplary embodiment, as in figure 2 it is shown, comprise the following steps:
In step 201, when the open operation to browser being detected, the maximum coordinates region that typesetting engine indicates is adjusted the size consistent with screen size.
In the disclosed embodiments, JavaScript language is adopted to realize a typesetting engine, this typesetting engine support the rendering of the page to meeting HTML5 specification. This typesetting engine provides a coordinates regional, and this coordinates regional is for rendering to corresponding coordinate position by each page elements. Due to for same URL (UniformResourceLocator, URL) the corresponding page, show in the terminal page that screen size is different and vary in size, therefore when realizing typesetting engine, it is provided that automatically adjust the function of the coordinates regional of typesetting engine instruction according to screen size. In the process implemented, according to default page size, coordinate in units of pixel, generate the coordinates regional of an acquiescence. Wherein, the size (representing in the way of high * is wide, wherein, * is multiplying) of the coordinates regional of acquiescence can be 800*480,960*640,960*540,1280*720 etc., and this is not specifically limited by disclosure embodiment. When the open operation to browser being detected, first have to adjust the coordinates regional of typesetting engine instruction so that it is adapting to screen size, detailed process is as follows:
Obtain the maximum coordinates region of typesetting engine instruction; Judge that whether this maximum coordinates region is consistent with screen size; If this maximum coordinates region is inconsistent with screen size, then according to the proportionate relationship between size and the screen size of the instruction of this maximum coordinates region, maximum coordinates region is adjusted the size consistent with screen size.
Such as, the maximum coordinates region of typesetting engine instruction is 960*640, and detect that screen size (representing in the mode that high * is wide) is for 800*480, then computed altitude is than for 960/800=1.2, width ratio is 640/480=1.3, afterwards, by the height in maximum coordinates region divided by 1.2, width obtain the size consistent with screen size divided by 1.3.
If it should be noted that judge that the maximum coordinates region that typesetting engine indicates is consistent with screen size, then the maximum coordinates region without typesetting engine is indicated is adjusted.
In step 202., when detecting that the page obtains operation, the source code of the page to be rendered is obtained from server.
In the disclosed embodiments, user can pass through the address field input URL in browser or other client applications, and click the acquisition operation obtaining button to trigger this URL correspondence page, fetching, also by clicking arbitrary hyperlink in having shown that the page, the acquisition operation triggering this hyperlink correspondence page, application program and triggering page that user is used by disclosure embodiment obtain the mode operated and specifically do not limit. Use browser to obtain the page for user, when detecting that the page obtains operation, send the page according to the URL that the page is corresponding to server and obtain request; Server obtains, according to the page, the URL that request is corresponding, and the source code of the to be rendered page corresponding with this URL is sent the browser to terminal. The page to be rendered according to the source code of the page to be rendered got, can be rendered by browser, to show this page.
It should be noted that, coding stage at page source code, the page elements such as picture, paragraph, title, article being all encoded to the direct child node specifying canvas element so that do not have father and son's node relationships between different page elements, wherein specifying canvas element can be canvas element.
In step 203, the source code according to the page to be rendered, obtain and specify canvas element and multiple page elements, and render appointment canvas element.
In the disclosed embodiments, after get the source code of the page to be rendered from server, the source code according to the page to be rendered, obtain and specify canvas element and multiple page elements, and render appointment canvas element, detailed process is as follows:
The source code of the page to be rendered is resolved, according to specifying canvas element label to obtain the display position specifying canvas element and display content, and in the page, renders appointment canvas element according to the display position and display content of specifying canvas element. Afterwards, obtain according to the ID (Identifier, identifier) specifying canvas element and be included in the page elements specified in canvas element, obtain multiple page elements.
Wherein, it is intended that the display position of canvas element includes coordinate and the size of specifying canvas element, it is intended that the display content of canvas element includes specifying the disclosure embodiments such as the background color of canvas element, transparency, Graphicxtras Frames Collection that this is not specifically limited.
It should be noted that specify the coordinates regional that reference coordinate region is page place of the coordinate of canvas element, under default situations, the size being dimensioned so as to the page of canvas element will be specified so that specify canvas element can be full of full page. Specify canvas element also to have the coordinates regional of oneself, when specifying canvas element to be of a size of page size, it is intended that the coordinates regional of canvas element is the coordinates regional of typesetting engine instruction simultaneously.
In step 204, each page elements display position in specifying canvas element is obtained.
In the disclosed embodiments, for each page elements in multiple page elements of getting, obtain each page elements display position in specifying canvas element; And obtain the display content of each page elements.Wherein, each page elements is specifying the display position in canvas element to include, each page elements with the coordinates regional of specifying element be reference coordinate region coordinate and the size of each page elements; The display content of each page elements includes, the color of each page elements, line thickness, transparency etc., and for different page elements, its display content is different, and this is not specifically limited by disclosure embodiment. Such as the display content for a page of text element can include text message, font style, font color, font size, line space, transparency, shade, italic, overstriking, underscore etc. Wherein, the detailed process obtaining each page elements display position in specifying canvas element is as follows:
Obtain the first size of each page elements and the first coordinate of each page elements; Coordinates regional according to typesetting engine instruction, obtains the viewing area corresponding with first size and the first coordinate in specifying canvas element, and viewing area is defined as each page elements display position in specifying canvas element. Before wherein obtaining the viewing area corresponding with first size and the first coordinate in specifying canvas element, need to first obtain the zero specifying canvas element, according to the zero specifying canvas element, obtain the viewing area corresponding with first size and the first coordinate.
Under normal circumstances, using the upper left corner of appointment canvas element as zero, but the positions such as the upper right corner of canvas element, the lower left corner, the lower right corner, center also can being specified as zero, this is not specifically limited by disclosure embodiment. First coordinate of each page elements, the coordinate of the central point of rectangular area for obtaining according to the size of each page elements, this first coordinate also can be each page elements size obtain the upper left corner of rectangular area, the upper right corner, the lower left corner, the lower right corner coordinate, this is not specifically limited by disclosure embodiment.
For example, it is assumed that specify the upper left corner of canvas element as zero, with the axis that extends along screen width direction for X-axis, with the axis that extends along screen height direction for Y-axis; First coordinate of each page elements, the coordinate of the central point of rectangular area for obtaining according to the size of each page elements. For a page of text element, get the size (representing in the mode that high * is wide) of text page elements for 2*4, coordinate is (3,1), then calculating the viewing area obtaining text page elements is from coordinate (1,0) to the rectangular area between coordinate (5,3).
It should be noted that, if in step 201 according to the proportionate relationship between maximum coordinates region and the screen size in default coordinate region, the coordinates regional of typesetting engine instruction has been adjusted, then according to identical proportionate relationship, the first size and the first coordinate getting each page elements is adjusted so that size and coordinate relative display position in the page after adjustment are constant.
In step 205, specifying the display position in canvas element according to each page elements, in specifying canvas element, rendering each page elements, to show the page.
In the disclosed embodiments, getting each page elements after specifying the display position in canvas element, according to each page elements display position in specifying canvas element, render each page elements in specifying canvas element, detailed process is as follows:
Specify the display position in canvas element according to each page elements, in specifying painting canvas, obtain the coordinates regional corresponding with this display position;Display content according to each page elements, renders each page elements so that can show each page elements in the page in specifying the coordinates regional that painting canvas is corresponding.
Such as, in the example of step 204, the display content getting page of text element includes: font style is the Song typeface, and font size is No. 5, and font color is black, and text message is " hello ". Afterwards specify painting canvas obtains with the display position of text page elements corresponding from coordinate (1,0) to coordinate (5,3) in the rectangular area between, render text page elements, make in the page from coordinate (1,0) to the rectangular area between coordinate (5,3), " hello " is shown with the font format of No. 5 black of the Song typeface.
It should be noted that, when carrying out page rendering, in order to improve the efficiency of page rendering, after getting any page surface element from source code, directly render to specify in canvas element by the page elements got, rather than after the whole page elements obtaining the page to be rendered, then render to each page elements specify in canvas element. After full page has rendered, this page is equivalent to only exist an element, namely specifies canvas element, follow-up when change occurs the page, only this appointment canvas element is carried out corresponding change and operates. Additionally, each page elements is owned by the ID of oneself, while rendering to each page elements specify in canvas element, mark the ID of this page elements.
In the disclosed embodiments, rendering to page elements specify after in canvas element, due to the operation of user or due to the impact of other factors, specify the page elements comprised in canvas element it may happen that change, such as when detecting that mouse is moved to a certain page picture element by user, the size of this page picture element amplifies 2 times, now needs page elements after change is re-started to render, and detailed process is as follows:
When the current display position generation change specifying any page surface element in canvas element being detected, after obtaining change, page elements newly shows position; Judge new display position and specify whether the display position of other page elements in canvas element exists lap; If being absent from lap, then delete the page elements being positioned at current display position, and according to newly showing position, page elements after again rendering change in specifying canvas element. If there is lap, then obtain the first display position of other page elements that there is lap with new display position; Show that position is adjusted to first, obtain the second display position so that between the second display position and new display position, be absent from lap; Delete and be positioned at the page elements of current display position and be positioned at the page elements of the first display position; Render page elements after change according to new display position, and show that position renders other page elements again according to second.
It should be noted that owing to specifying each page elements in canvas element all to have unique ID, and this unique ID only associates with specifying canvas element. Therefore, when specifying any page surface element in canvas element that change occurs, either directly through the ID of the page elements that change occurs, the page elements that this generation is changed can directly be found in specifying canvas element. If the display position of the page elements after change has had influence on the display of other page elements, then can direct ID according to other page elements, directly in specifying canvas element, find this other page elements, and then obtain the display position of the page elements corresponding with this ID and show content, in order to follow-up again render this other page elements.
In another embodiment, specify in canvas element and also can add new page element, after getting new page element, it is judged that new page element display position in specifying canvas element is with whether the display position of other page elements in appointment canvas element exists lap; If being absent from lap, then specifying the display position in canvas element according to new page element, in specifying canvas element, rendering new page element; If there is lap, then obtain the first display position of other page elements that there is lap with new page element display position in specifying canvas element; Show that position is adjusted to first, obtain the second display position so that between the second display position and new page element display position in specifying canvas element, be absent from lap; Delete the page elements being positioned at the first display position; Specifying the display position in canvas element to render new page element according to new page element, and showing that position renders other page elements again according to second.
The method that disclosure embodiment provides, the source code according to the page to be rendered, obtain and specify canvas element and multiple page elements, and render appointment canvas element; Obtaining each page elements display position in specifying canvas element, each page elements is the direct child node specifying canvas element; Specify the display position in canvas element according to each page elements, in specifying canvas element, render each page elements, to show the page. Owing to each page elements is the direct child node specifying canvas element, therefore can directly render to page elements when rendering specify in canvas element, when there is change in any page surface element, the page elements that page elements after change is had influence on only is needed to repaint, without the whole page elements in the page are repainted, therefore page rendering efficiency is high.
Fig. 3 is the block diagram of a kind of page rendering device according to an exemplary embodiment. With reference to Fig. 3, this device includes element acquisition module 301, rendering module 302 and display position acquisition module 303.
Wherein, element acquisition module 301 is connected with rendering module 302, for the source code according to the page to be rendered, obtains and specifies canvas element and multiple page elements; Rendering module 302 is connected with display position acquisition module 303, is used for rendering appointment canvas element; Display position acquisition module, for obtaining each page elements display position in specifying canvas element, each page elements is the direct child node specifying canvas element; Rendering module 302, is additionally operable to specifying the display position in canvas element according to each page elements, renders each page elements, to show the page in specifying canvas element.
Alternatively, show position acquisition module 303, for obtaining the first size of each page elements and the first coordinate of each page elements; Coordinates regional according to typesetting engine instruction, obtains the viewing area corresponding with first size and the first coordinate in specifying canvas element, and viewing area is defined as each page elements display position in specifying canvas element.
Alternatively, referring to Fig. 4, this device also includes:
Coordinates regional acquisition module 304, for obtaining the maximum coordinates region of typesetting engine instruction;
First judge module 305, is used for judging that whether maximum coordinates region is consistent with screen size;
Coordinates regional adjusting module 306, for when maximum coordinates region and screen size are inconsistent, then according to the proportionate relationship between size and the screen size of the instruction of maximum coordinates region, adjusting the size consistent with screen size by maximum coordinates region.
Alternatively, showing position acquisition module 303, be additionally operable to when the current display position generation change specifying any page surface element in canvas element being detected, after obtaining change, page elements newly shows position;
Referring to Fig. 5, this device also includes: the second judge module 307, for judging newly to show position and specify whether the display position of other page elements in canvas element exists lap;
Rendering module 302, is additionally operable to when being absent from lap, deletes the page elements being positioned at current display position, and according to newly showing position, page elements after again rendering change in specifying canvas element.
Alternatively, showing position acquisition module 303, being additionally operable to when there is lap, obtain the first display position of other page elements that there is lap with new display position;
Referring to Fig. 6, this device also includes: display position adjusting type modules 308, for showing that position is adjusted to first, obtains the second display position so that be absent from lap between the second display position and new display position; Removing module 309, for deleting the page elements being positioned at current display position and being positioned at the page elements of the first display position;
According to second, rendering module 302, for rendering page elements after change according to new display position, and shows that position renders other page elements again.
The device that disclosure embodiment provides, the source code according to the page to be rendered, obtain and specify canvas element and multiple page elements, and render appointment canvas element; Obtaining each page elements display position in specifying canvas element, each page elements is the direct child node specifying canvas element; Specify the display position in canvas element according to each page elements, in specifying canvas element, render each page elements, to show the page. Owing to each page elements is the direct child node specifying canvas element, therefore can directly render to page elements when rendering specify in canvas element, when there is change in any page surface element, the page elements that page elements after change is had influence on only is needed to repaint, without the whole page elements in the page are repainted, therefore page rendering efficiency is high.
About the device in above-described embodiment, the concrete mode that wherein modules performs to operate has been described in detail in about the embodiment of the method, and explanation will be not set forth in detail herein.
Fig. 7 is the block diagram of a kind of page rendering device according to an exemplary embodiment. Such as, device 700 can be mobile phone, computer, digital broadcast terminal, messaging devices, game console, tablet device, armarium, body-building equipment, personal digital assistant etc.
With reference to Fig. 7, device 700 can include following one or more assembly: processes assembly 702, memorizer 704, power supply module 706, multimedia groupware 704, audio-frequency assembly 710, input/output (I/O) interface 712, sensor cluster 714, and communications component 716.
Process assembly 702 and generally control the integrated operation of device 700, such as with display, call, data communication, the operation that camera operation and record operation are associated. Process assembly 702 and can include one or more processor 720 to perform instruction, to complete all or part of step of above-mentioned method. Additionally, process assembly 702 can include one or more module, it is simple to what process between assembly 702 and other assemblies is mutual.Such as, process assembly 702 and can include multi-media module, with facilitate multimedia groupware 708 and process between assembly 702 mutual.
Memorizer 704 is configured to store various types of data to support the operation at device 700. The example of these data includes any application program for operation on device 700 or the instruction of method, contact data, telephone book data, message, picture, video etc. Memorizer 704 can be realized by any kind of volatibility or non-volatile memory device or their combination, such as static RAM (SRAM), Electrically Erasable Read Only Memory (EEPROM), Erasable Programmable Read Only Memory EPROM (EPROM), programmable read only memory (PROM), read only memory (ROM), magnetic memory, flash memory, disk or CD.
The various assemblies that power supply module 706 is device 700 provide electric power. Power supply module 706 can include power-supply management system, one or more power supplys, and other generate, manage and distribute, with for device 700, the assembly that electric power is associated.
Multimedia groupware 708 includes the screen providing an output interface between described device 700 and user. In certain embodiments, screen can include liquid crystal display (LCD) and touch panel (TP). If screen includes touch panel, screen may be implemented as touch screen, to receive the input signal from user. Touch panel includes one or more touch sensor to sense the gesture on touch, slip and touch panel. Described touch sensor can not only sense the border of touch or sliding action, but also detects the persistent period relevant to described touch or slide and pressure. In certain embodiments, multimedia groupware 708 includes a front-facing camera and/or post-positioned pick-up head. When device 700 is in operator scheme, during such as screening-mode or video mode, front-facing camera and/or post-positioned pick-up head can receive the multi-medium data of outside. Each front-facing camera and post-positioned pick-up head can be a fixing optical lens system or have focal length and optical zoom ability.
Audio-frequency assembly 710 is configured to output and/or input audio signal. Such as, audio-frequency assembly 710 includes a mike (MIC), and when device 700 is in operator scheme, during such as call model, logging mode and speech recognition mode, mike is configured to receive external audio signal. The audio signal received can be further stored at memorizer 704 or send via communications component 716. In certain embodiments, audio-frequency assembly 710 also includes a speaker, is used for exporting audio signal.
I/O interface 712 provides interface for processing between assembly 702 and peripheral interface module, above-mentioned peripheral interface module can be keyboard, puts striking wheel, button etc. These buttons may include but be not limited to: home button, volume button, startup button and locking press button.
Sensor cluster 714 includes one or more sensor, for providing the state estimation of various aspects for device 700. Such as, what sensor cluster 714 can detect device 700 opens/closed mode, the relative localization of assembly, such as described assembly is display and the keypad of device 700, the position change of all right detecting device 700 of sensor cluster 714 or 700 1 assemblies of device, the presence or absence that user contacts with device 700, the variations in temperature of device 700 orientation or acceleration/deceleration and device 700.Sensor cluster 714 can include proximity transducer, is configured to when not having any physical contact object near detection. Sensor cluster 714 can also include optical sensor, such as CMOS or ccd image sensor, for using in imaging applications. In certain embodiments, this sensor cluster 714 can also include acceleration transducer, gyro sensor, Magnetic Sensor, pressure transducer or temperature sensor.
Communications component 716 is configured to facilitate between device 700 and other equipment the communication of wired or wireless mode. Device 700 can access the wireless network based on communication standard, such as WiFi, 2G or 3G, or their combination. In one exemplary embodiment, communications component 716 receives the broadcast singal or the broadcast related information that manage system from external broadcasting via broadcast channel. In one exemplary embodiment, described communications component 716 also includes near-field communication (NFC) module, to promote junction service. Such as, can based on 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 700 can be realized by one or more application specific integrated circuits (ASIC), digital signal processor (DSP), digital signal processing appts (DSPD), PLD (PLD), field programmable gate array (FPGA), controller, microcontroller, microprocessor or other electronic components, is used for performing above-mentioned page rendering method.
In the exemplary embodiment, additionally providing a kind of non-transitory computer-readable recording medium including instruction, for instance include the memorizer 704 of instruction, above-mentioned instruction can have been performed said method by the processor 720 of device 700. 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.
In the exemplary embodiment, additionally provide a kind of non-transitory computer-readable recording medium, when the instruction in described storage medium is performed by the processor of mobile terminal so that mobile terminal is able to carry out above-mentioned page rendering method.
Those skilled in the art, after considering description and putting into practice invention disclosed herein, will readily occur to other embodiment of the disclosure. The application is intended to any modification of the disclosure, purposes or adaptations, and these modification, purposes or adaptations are followed the general principle of the disclosure and include the undocumented known general knowledge in the art of the disclosure or conventional techniques means. Description and embodiments is considered only as exemplary, and the true scope of the disclosure and spirit are pointed out by claim below.
It should be appreciated that the disclosure is not limited to precision architecture described above and illustrated in the accompanying drawings, and various amendment and change can carried out without departing from the scope. The scope of the present disclosure is only limited by appended claim.
Claims (11)
1. a page rendering method, it is characterised in that described method includes:
Source code according to the page to be rendered, obtains and specifies canvas element and multiple page elements, and render described appointment canvas element;
Obtaining each page elements display position in described appointment canvas element, each page elements is the direct child node of described appointment canvas element;
According to described each page elements display position in described appointment canvas element, described appointment canvas element renders described each page elements, to show the described page.
2. method according to claim 1, it is characterised in that described acquisition each page elements display position in described appointment canvas element includes:
Obtain the first size of described each page elements and the first coordinate of described each page elements;
Coordinates regional according to typesetting engine instruction, described appointment canvas element obtains the viewing area corresponding with described first size and described first coordinate, described viewing area is defined as described each page elements display position in described appointment canvas element.
3. method according to claim 1, it is characterised in that described method also includes:
Obtain the maximum coordinates region of typesetting engine instruction;
Judge that whether described maximum coordinates region is consistent with screen size;
If described maximum coordinates region is inconsistent with described screen size, then according to the proportionate relationship between size and the described screen size of the instruction of described maximum coordinates region, described maximum coordinates region is adjusted the size consistent with described screen size.
4. method according to claim 1, it is characterised in that described method also includes:
When change occurs current display position any page surface element in described appointment canvas element being detected, after obtaining change, page elements newly shows position;
Judge described new display position is with whether the display position of other page elements in described appointment canvas element exists lap;
If being absent from lap, then delete the page elements being positioned at described current display position, and according to described new display position, page elements after again rendering described change in described appointment canvas element.
5. method according to claim 4, it is characterised in that described judge in described new display position and described appointment canvas element whether the display position of other page elements exists lap after, described method also includes:
If there is lap, then obtain the first display position of other page elements described that there is lap with described new display position;
Show that position is adjusted to described first, obtain the second display position so that between described second display position and described new display position, be absent from lap;
Delete the page elements being positioned at described current display position and be positioned at the page elements of described first display position;
Render page elements after described change according to described new display position, and show that position renders other page elements described again according to described second.
6. a page rendering device, it is characterised in that described device includes:
Element acquisition module, for the source code according to the page to be rendered, obtains and specifies canvas element and multiple page elements;
Rendering module, is used for rendering described appointment canvas element;
Display position acquisition module, for obtaining each page elements display position in described appointment canvas element, each page elements is the direct child node of described appointment canvas element;
Described rendering module, is additionally operable to, according to described each page elements display position in described appointment canvas element, render described each page elements, to show the described page in described appointment canvas element.
7. device according to claim 6, it is characterised in that described display position acquisition module, for obtaining the first size of described each page elements and the first coordinate of described each page elements; Coordinates regional according to typesetting engine instruction, described appointment canvas element obtains the viewing area corresponding with described first size and described first coordinate, described viewing area is defined as described each page elements display position in described appointment canvas element.
8. device according to claim 6, it is characterised in that described device also includes:
Coordinates regional acquisition module, for obtaining the maximum coordinates region of typesetting engine instruction;
First judge module, is used for judging that whether described maximum coordinates region is consistent with screen size;
Coordinates regional adjusting module, for when described maximum coordinates region and described screen size are inconsistent, the proportionate relationship between size and described screen size according to the instruction of described maximum coordinates region, adjusts the size consistent with described screen size by described maximum coordinates region.
9. device according to claim 6, it is characterised in that described display position acquisition module, is additionally operable to when change occurs current display position any page surface element in described appointment canvas element being detected, and after obtaining change, page elements newly shows position;
Described device also includes: the second judge module, for judging described new display position is with whether the display position of other page elements in described appointment canvas element exists lap;
Described rendering module, is additionally operable to when being absent from lap, deletes the page elements being positioned at described current display position, and according to described new display position, page elements after again rendering described change in described appointment canvas element.
10. device according to claim 9, it is characterised in that described display position acquisition module, is additionally operable to when there is lap, obtains the first display position of other page elements described that there is lap with described new display position;
Described device also includes: display position adjusting type modules, for showing that position is adjusted to described first, obtains the second display position so that be absent from lap between described second display position and described new display position;
Removing module, for deleting the page elements being positioned at described current display position and being positioned at the page elements of described first display position;
According to described second, described rendering module, for rendering page elements after described change according to described new display position, and shows that position renders other page elements described again.
11. a page rendering device, it is characterised in that including:
Processor;
For storing the memorizer of processor executable;
Wherein, described processor is configured to: the source code according to the page to be rendered, obtains and specifies canvas element and multiple page elements, and renders described appointment canvas element; Obtaining each page elements display position in described appointment canvas element, each page elements is the direct child node of described appointment canvas element; According to described each page elements display position in described appointment canvas element, described appointment canvas element renders described each page elements, to show the described page.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201510988888.9A CN105653612A (en) | 2015-12-24 | 2015-12-24 | Page rendering method and device |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201510988888.9A CN105653612A (en) | 2015-12-24 | 2015-12-24 | Page rendering method and device |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN105653612A true CN105653612A (en) | 2016-06-08 |
Family
ID=56476833
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201510988888.9A Pending CN105653612A (en) | 2015-12-24 | 2015-12-24 | Page rendering method and device |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN105653612A (en) |
Cited By (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN108021666A (en) * | 2017-12-04 | 2018-05-11 | 北京百度网讯科技有限公司 | Page adaptation method and apparatus |
| CN110019612A (en) * | 2017-11-23 | 2019-07-16 | 腾讯科技（深圳）有限公司 | Map rendering method and relevant device |
| US10572100B2 (en) | 2015-09-23 | 2020-02-25 | Alibaba Group Holding Limited | System, method, and apparatus for webpage processing |
| CN112230896A (en) * | 2020-10-21 | 2021-01-15 | 苏州速显微电子科技有限公司 | Method for realizing AHMI IDE system rendering tool |
| CN113268687A (en) * | 2021-05-25 | 2021-08-17 | 北京达佳互联信息技术有限公司 | Method and device for determining element rendering position and storage medium |
| CN115268720A (en) * | 2022-08-16 | 2022-11-01 | 北京尽微致广信息技术有限公司 | Page rendering method, device and equipment and readable storage medium |
Citations (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102314502A (en) * | 2011-09-01 | 2012-01-11 | 百度在线网络技术（北京）有限公司 | Method and equipment for displaying webpage main content on mobile terminal |
| CN102663126A (en) * | 2012-04-23 | 2012-09-12 | 奇智软件（北京）有限公司 | Method and device for displaying webpage in mobile terminal |
| US8286076B1 (en) * | 2011-06-22 | 2012-10-09 | Google Inc. | Rendering approximate webpage screenshot client-side |
| CN103336690A (en) * | 2013-06-28 | 2013-10-02 | 优视科技有限公司 | HTML (Hypertext Markup Language) 5-based text-element drawing method and device |
| CN103399866A (en) * | 2013-07-05 | 2013-11-20 | 北京小米科技有限责任公司 | Webpage rendering method, device and equipment |
| CN104809123A (en) * | 2014-01-24 | 2015-07-29 | 贝壳网际（北京）安全技术有限公司 | Method and system for rendering webpages |
-
2015
- 2015-12-24 CN CN201510988888.9A patent/CN105653612A/en active Pending
Patent Citations (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US8286076B1 (en) * | 2011-06-22 | 2012-10-09 | Google Inc. | Rendering approximate webpage screenshot client-side |
| CN102314502A (en) * | 2011-09-01 | 2012-01-11 | 百度在线网络技术（北京）有限公司 | Method and equipment for displaying webpage main content on mobile terminal |
| CN102663126A (en) * | 2012-04-23 | 2012-09-12 | 奇智软件（北京）有限公司 | Method and device for displaying webpage in mobile terminal |
| CN103336690A (en) * | 2013-06-28 | 2013-10-02 | 优视科技有限公司 | HTML (Hypertext Markup Language) 5-based text-element drawing method and device |
| CN103399866A (en) * | 2013-07-05 | 2013-11-20 | 北京小米科技有限责任公司 | Webpage rendering method, device and equipment |
| CN104809123A (en) * | 2014-01-24 | 2015-07-29 | 贝壳网际（北京）安全技术有限公司 | Method and system for rendering webpages |
Non-Patent Citations (2)
| Title |
|---|
| （美）查德威克 著: "《ASP.NET MVC 4 Web编程》", 31 July 2013, 武汉：华中科技大学出版社 * |
| 郭小成 著: "《HTML5+CSS3技术应用完美解析》", 31 March 2013, 北京：中国铁道出版社 * |
Cited By (8)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US10572100B2 (en) | 2015-09-23 | 2020-02-25 | Alibaba Group Holding Limited | System, method, and apparatus for webpage processing |
| CN110019612A (en) * | 2017-11-23 | 2019-07-16 | 腾讯科技（深圳）有限公司 | Map rendering method and relevant device |
| CN110019612B (en) * | 2017-11-23 | 2022-03-25 | 腾讯科技（深圳）有限公司 | Map rendering method and related equipment |
| CN108021666A (en) * | 2017-12-04 | 2018-05-11 | 北京百度网讯科技有限公司 | Page adaptation method and apparatus |
| CN112230896A (en) * | 2020-10-21 | 2021-01-15 | 苏州速显微电子科技有限公司 | Method for realizing AHMI IDE system rendering tool |
| CN113268687A (en) * | 2021-05-25 | 2021-08-17 | 北京达佳互联信息技术有限公司 | Method and device for determining element rendering position and storage medium |
| CN113268687B (en) * | 2021-05-25 | 2023-11-28 | 北京达佳互联信息技术有限公司 | Method, device and storage medium for determining element rendering position |
| CN115268720A (en) * | 2022-08-16 | 2022-11-01 | 北京尽微致广信息技术有限公司 | Page rendering method, device and equipment and readable storage medium |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN105653612A (en) | Page rendering method and device | |
| CN107943439B (en) | Interface moving method and device, intelligent terminal, server and operating system | |
| US10739958B2 (en) | Method and device for executing application using icon associated with application metadata | |
| US10019782B2 (en) | Method and apparatus for displaying content | |
| US10509540B2 (en) | Method and device for displaying a message | |
| EP3561691B1 (en) | Method and apparatus for displaying webpage content | |
| CN111031398A (en) | Video control method and electronic equipment | |
| US20160139777A1 (en) | Screenshot based indication of supplemental information | |
| CN106844705B (en) | Method and apparatus for displaying multimedia content | |
| CN106294609A (en) | page loading method and device | |
| US20200034900A1 (en) | Method and apparatus for displaying commodity | |
| CN107562877A (en) | Display methods, device and the device shown for view data of view data | |
| CN105630411A (en) | Memory management method and apparatus | |
| US20170090684A1 (en) | Method and apparatus for processing information | |
| CN111476209B (en) | Handwriting input recognition method, handwriting input recognition equipment and computer storage medium | |
| CN105739834A (en) | Menu displaying method and device | |
| KR20150051292A (en) | Method for sharing contents and electronic device thereof | |
| EP3032482A1 (en) | Page display method and apparatus | |
| CN105488145A (en) | Webpage content display method and apparatus and terminal | |
| CN105630339A (en) | Method and device for controlling page | |
| CN108154416B (en) | Website browsing optimization method and device | |
| CN106503048B (en) | Browser color setting method and device | |
| CN109063079B (en) | Webpage labeling method and electronic equipment | |
| CN104216969A (en) | Reading marking method and device | |
| CN105808304A (en) | Code deployment method, device and system |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| C06 | Publication | ||
| PB01 | Publication | ||
| C10 | Entry into substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| RJ01 | Rejection of invention patent application after publication | ||
| RJ01 | Rejection of invention patent application after publication |
Application publication date: 20160608 |