CN106484383A - page rendering method, device and equipment - Google Patents
page rendering method, device and equipment Download PDFInfo
- Publication number
- CN106484383A CN106484383A CN201510549439.4A CN201510549439A CN106484383A CN 106484383 A CN106484383 A CN 106484383A CN 201510549439 A CN201510549439 A CN 201510549439A CN 106484383 A CN106484383 A CN 106484383A
- Authority
- CN
- China
- Prior art keywords
- html
- target
- module
- resource
- page
- 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 OR CALCULATING; COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- Theoretical Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Information Transfer Between Computers (AREA)
Abstract
This application discloses page rendering method, device and equipment, methods described apply on a client device, including：When by browser access html page, travel through the DOM node of each HTML module of described html page；When traversing the target DOM node of current target HTML module, attribute information according to defined in described target DOM node, to multiple target resources of target HTML module described in server parallel requests；Described target HTML module is rendered according to the relation between the plurality of target resource.The embodiment of the present application is when rendering each HTML module of html page, all resources by this HTML module of attribute information parallel requests of predefined DOM node, therefore resource acquisition speed, and can automatically load these resources after getting all resources, therefore save the resource load time, thus improving the rendering speed of html page on the whole.
Description
Technical field
The application is related to network communication technology field, more particularly, to page rendering method, device and equipment.
Background technology
Page rendering is exactly that by HTML, (Hyper Text Markup Language surpasses client browser
Text mark up language) code is shown in the process in browser window according to predefined rule.Client is clear
Look at device when rendering html page, needs obtain the various resources for carrying out page rendering from server,
Rendered thus realizing html page by loading the resource getting.In correlation technique, can be by HTML
Document framework is divided into multiple HTML modules according to difference in functionality, corresponds to rendering arbitrary HTML module
Html page part when, client browser in a serial fashion successively to server request each
The different types of resource of HTML module, and after having asked every class resource, manually call
JavaScript loads to these resources, thus completing rendering of html page part.
But, above-mentioned page rendering process needs to carry out serial request to the resource of each HTML module,
Therefore resource acquisition speed is slower, and due to using calling JavaScript mode to complete resource manually
Load, therefore increased the resource load time, the above bulk velocity all leading to html page to render is relatively
Slowly.
Content of the invention
The application provides page rendering method, device and equipment, to solve the overall speed of existing page rendering
Spend slower problem.
According to the embodiment of the present application in a first aspect, provide a kind of page rendering method, methods described apply
On a client device, including：
When by browser access html page, travel through each HTML of described html page
The document dbject model DOM node of module；
When traversing the target DOM node of current target HTML module, according to described target
Attribute information defined in DOM node is many to target HTML module described in server parallel requests
Individual target resource；
Described target HTML module is rendered according to the relation between the plurality of target resource.
According to the second aspect of the embodiment of the present application, provide a kind of page rendering device, described device is applied
On a client device, described device includes：
Traversal Unit, for, when by browser access html page, traveling through described HTML page
The document dbject model DOM node of each HTML module in face；
Request unit, for when traversing the target DOM node of current target HTML module,
Attribute information according to defined in described target DOM node, to target described in server parallel requests
Multiple target resources of HTML module；
Rendering unit, for rendering described target HTML according to the relation between the plurality of target resource
Module.
According to the third aspect of the embodiment of the present application, provide a kind of client device, including：
Processor；For storing the memorizer of described processor executable；
Wherein, described processor is configured to：
When by browser access html page, travel through each HTML of described html page
The document dbject model DOM node of module；
When traversing the target DOM node of current target HTML module, according to described target
Attribute information defined in DOM node is many to target HTML module described in server parallel requests
Individual target resource；
Described target HTML module is rendered according to the relation between the plurality of target resource.
When application the embodiment of the present application accesses html page, when the arbitrary mesh traversing html page
During the target DOM node of mark HTML module, can be according to the attribute defined in target DOM node
Information, to multiple target resources of this target HTML module of server parallel requests, and according to multiple mesh
Relation between mark resource renders this target HTML module.Because the embodiment of the present application is rendering each
During HTML module, by this HTML mould of the attribute information parallel requests of predefined DOM node
All resources of block, therefore resource acquisition speed, and can be automatic after getting all resources
Load these resources, therefore save the resource load time, thus improving html page on the whole
Rendering speed.
It should be appreciated that above general description and detailed description hereinafter are only exemplary and explanatory
, the application can not be limited.
Brief description
Accompanying drawing herein is merged in description and constitutes the part of this specification, shows and meets this Shen
Embodiment please, and be used for explaining the principle of the application together with description.
Fig. 1 is an embodiment flow chart of the application page rendering method；
Fig. 2 is the schematic diagram of a scenario that application the embodiment of the present application carries out page rendering；
Fig. 3 is another embodiment flow chart of the application page rendering method；
Fig. 4 is a kind of hardware structure diagram of the application page rendering device place client device；
Fig. 5 is an embodiment block diagram of the application page rendering device；
Fig. 6 is another embodiment block diagram of the application page rendering device.
Specific embodiment
It is the purpose only merely for description specific embodiment in term used in this application, and be not intended to be limiting
The application." a kind of ", " described " of singulative used in the application and appended claims
" being somebody's turn to do " is also intended to including most forms, unless context clearly shows that other implications.Also should manage
Solution, term "and/or" used herein refers to and comprises one or more associated projects of listing
Any or all may combination.
It will be appreciated that though may be described various using term first, second, third, etc. in the application
Information, but these information should not necessarily be limited by these terms.These terms only be used for by same type of information that
This distinguishes.For example, in the case of without departing from the application scope, the first information can also be referred to as
Two information, similarly, the second information can also be referred to as the first information.Depending on linguistic context, as in this institute
Use word " if " can be construed to " and ... when " or " when ... when " or " response
In determination ".
Referring to Fig. 1, it is an embodiment flow chart of the application page rendering method, this embodiment is permissible
Apply in client device, comprise the steps：
Step 101：When by browser access html page, traversal html page each
The DOM node of HTML module.
In the present embodiment, when user starts browser on a client device, and browser access to be passed through
During html page, first this html page can be divided into multiple HTML modules, for example, can
So that html page is divided into multiple father's HTML modules according to difference in functionality, further, for appoint
One father's HTML module is it is also possible to be many sub- HTML modules by this father's HTML Module Division.Its
In, when dividing the HTML module of html page, can difference in functionality based on html page
Divided, for example, it is possible to by the picture viewing area on html page, video display area and literary composition
This viewing area is respectively divided into different HTML modules, further it is also possible to by text display area
In content of text fixed area and content of text region of variation be divided into different HTML modules.
For each the HTML module being divided, this HTML of the primary layout definition of WEB can be passed through
The DOM node of module, DOM node is used for labelling corresponding HTML module in html page
Region, and attribute information can be added on DOM node, in this attribute information, comprise HTML
The resource path of multiple resources of module, the address of storage resource or port etc. on such as server.
Based on the division to html page, each html page contains multiple HTML modules,
Now client device begins stepping through the DOM node of each HTML module, for each traversing
The execution identical operation of DOM node client device.Therefore for convenience, currently traversed
HTML module be referred to as target HTML module, the DOM node of this target HTML module is claimed
For target DOM node.
Step 102：When traversing the target DOM node of current target HTML module, according to
Attribute information defined in target DOM node is many to server parallel requests target HTML module
Individual target resource.
In this step, when traversing the target DOM node of current target HTML module, permissible
Read the attribute information of target DOM node, obtain multiple target resources of this target HTML module
Resource path, then according to the resource path of each target resource, by calling JavaScript to service
Device transmitted in parallel is used for obtaining the resource request of these target resources.Wherein resource can include：HTML
File, CSS (Cascading Style Sheets, Cascading Style Sheet) file, JS (JavaScript) literary composition
Part, JSON (JavaScript Object Notation, JS object tag) data etc..
Step 103：According to the relation post-processing object HTML module between multiple target resources.
To the multiple resource request of server transmitted in parallel, to ask after multiple target resources, in this step
Solicited status can be set for each resource request, this solicited status is used for marking whether to get correspondence
Target resource.When the solicited status according to setting determines and has got all of target resource, can
To load successively after these target resources according to the dependence between these target resources, synthesize target
HTML module, finally the HTML module after synthesis is added in its target DOM node, thus
Complete rendering of this target HTML module.It follows that as the DOM having traveled through all HTML modules
Node, and complete to after the rendering of all HTML modules, you can complete to whole html page
Render.
Wherein, loading procedure during dependence loaded targets resource successively between according to target resource
Consistent with prior art, for example, when target resource includes html file, CSS file, JS literary composition
Part, during JSON data, then first loads out html document framework according to html file, then passes through
This HEML document framework of JS file modification, finally by CSS file and JSON data to HTML
Document framework is changed further, thus rendering the corresponding html page of target HTML module
Part.
As seen from the above-described embodiment, in this embodiment when rendering each HTML module, by fixed in advance
All resources of this HTML module of attribute information parallel requests of DOM node of justice, therefore resource obtains
Take speed, and can automatically load these resources after getting all resources, therefore save
The resource load time, thus improve the rendering speed of html page on the whole.
Referring to Fig. 2, realize a schematic diagram of a scenario of page rendering, Fig. 2 for application the embodiment of the present application
Taking render the html page of OPOA (One Page One Application, single-page apply) as a example
It is described：
Include the client device side for loading html page in Fig. 2, generally can refer to be configured with
The mobile phone of browser, panel computer, PC etc.；And the various moneys for loading html page are provided
The server side in source, this server side can dispose distributed server, for example, CDN (Content
Delivery Network, content distributing network) server.
In the present embodiment, it is exactly an application that OPOA refers to a WEB page, and OPOA loads first
When, all html documents can be transferred to web browser, when user accesses one of OPOA solely
During vertical html page, this html page can load in current WEB page.As in Fig. 2 it is assumed that
One OPOA includes n html page, then the render process of each html page all can be answered
Realized with the scheme that the embodiment of the present application provides.Taking the html page 2 shown in Fig. 2 as a example, should
Html page 2 is divided into m HTML module, and the resource of each HTML module is stored in taking
Business device side, the render process of each HTML module is all consistent, taking HTML module 2 as a example, is obtaining
Take HTML module 2 resource when, client device is to server transmitted in parallel resource request, and is obtaining
After getting all resources including html file, JS file, CSS file and JSON data, utilize
Dependence between these resources renders away the phase of the corresponding html page 2 of HTML module 2
Answer part.Below in conjunction with the schematic diagram of a scenario shown in Fig. 2, by the embodiment shown in Fig. 3 to this Shen
Please page rendering process be described in detail.
Referring to Fig. 3, it is another embodiment flow chart of the application page rendering method, this embodiment can
To apply in client device, comprise the following steps：
Step 301：When by browser access html page, this html page is divided into many
Individual HTML module.
In the embodiment of the present application, when user starts browser on a client device, and browser to be passed through
When accessing html page, first this html page can be divided into multiple HTML modules, for example,
Html page can be divided into multiple father's HTML modules according to difference in functionality, further, for
Arbitrary father's HTML module is it is also possible to be many sub- HTML modules by this father's HTML Module Division.
In conjunction with shown in Fig. 2, html page 2 is divided into m HTML module, this m HTML mould
Block can include father's HTML module, and/or sub- HTML module.
In the present embodiment, when dividing the HTML module of html page, HTML page can be based on
The difference in functionality in face is divided, for example, it is possible to by the picture viewing area on html page, video
Viewing area and text display area are respectively divided into different HTML modules, further it is also possible to incite somebody to action
Content of text fixed area in text display area and content of text region of variation are divided into different
HTML module；In addition, for the OPOA shown in Fig. 2, different html pages may comprise portion
Divide identical content of pages, for example, when rendering html page 1, html page 1 is divided
For some HTML modules, if certain HTML module that html page 2 is divided with
The content of pages of certain the HTML module being divided in html page 1 is identical, then rendering HTML
During the page 2, can only render other HTML modules in addition to this HTML module, such that it is able to enter
One step saves render time and the rendering resources of html page 2, and this embodiment of the present application is not limited
System.
Step 302：Genus by the DOM node of each HTML module of the primary layout definition of WEB
Property information.
Primary (Native) exploitation generally refers to be developed with primary development language, and primary development language is exactly
The programming language using during exploitation whole system；DOM is a kind of document with object-oriented way description
Model, is also the tree represenation mode of data and structure on the page, and DOM defines expression and modification literary composition
Relation between object required for shelves, the behavior of object and attribute and object.
In the present embodiment, after html page is divided into multiple HTML modules, for each
HTML module, can pass through the DOM node of this HTML module of the primary layout definition of WEB, DOM
Node is used for region in html page for the labelling corresponding HTML module, and can be in DOM
Add attribute information on node, in this attribute information, comprise the resource path of multiple resources of HTML module,
The address of storage resource or port etc. on such as server；Further, can also be on DOM node
Define the other informations such as the title of HTML module.Understand in conjunction with Fig. 2, for html page 2
HTML module 2, can add attribute information in the DOM node defining for this HTML module 2,
Html file, JS file, CSS file and the JSON of HTML module 2 is included in this attribute information
The resource path that data stores in server side.
Step 303：The DOM node of each HTML module of traversal HTML module.
Based on the division to html page, each html page contains multiple HTML modules,
Now client device begins stepping through the DOM node of each HTML module, for each traversing
The execution identical operation of DOM node client device.Therefore for convenience, subsequently by current time
The HTML module gone through is referred to as target HTML module, by the DOM section of this target HTML module
Point is referred to as target DOM node.
Step 304：When traversing the target DOM node of current target HTML module, read
The attribute information of target DOM node, obtains the resource road of multiple target resources of target HTML module
Footpath.
It is it is assumed that currently traversing as a example target HTML module by the HTML module 2 in Fig. 2
The DOM node of HTML module 2, then can be with the genus of the DOM node defined in read step 302
Property information, obtain the html file of HTML module 2, JS file, CSS file and JSON number
According to resource path.
Step 305：According to the resource path of each target resource, by calling JavaScript to server
Transmitted in parallel is used for obtaining the resource request of target resource.
Can be using the High level Script Language that can directly be explained operation by browser, clear in the present embodiment
Look at when rendering html page in device, for example, High level Script Language can be JavaScript, JavaScript
It is a kind of based on object and event-driven and have the client-side scripting language of relative safety.
In conjunction with the description in step 304, getting html file, the JS literary composition of HTML module 2
After the resource path of part, CSS file and JSON data, client device can be according to above-mentioned resource road
The resource request of footpath transmitted in parallel html file, the resource request of JS file, the resource of CSS file
Request and the resource request of JSON data.
Step 306：Solicited status is set for each resource request, this solicited status is used for marking whether
Get corresponding target resource.
To the multiple resource request of server transmitted in parallel, to ask after multiple target resources, in this step
Solicited status can be set for each resource request, this solicited status is used for marking whether to get correspondence
Target resource, for example, when also not getting certain target resource, then the solicited status of this target resource
For " wait ", when getting certain target resource, then the solicited status of this target resource is " completing ".
Step 307：When the solicited status according to setting determines and gets all target resources, according to mesh
Dependence between mark resource after loaded targets resource, synthesizes target HTML module successively.
Still taking the HTML module 2 in Fig. 2 as a example, when the resource of set html file please
Ask, the resource request of the resource request of JS file, the resource request of CSS file and JSON data
State be " when completing " it may be determined that getting all resources of HTML module 2.
In this step, load the process of HTML module 2 and existing skill according to the dependence between resource
Consistent in art, can include：The HTML literary composition of HTML module 2 is first loaded out according to html file
Shelves framework, then passes through this HEML document framework of JS file modification, finally by CSS file and JSON
Data is changed further to html document framework, thus render target HTML module corresponding to
Html page part.
Step 308：Target HTML module is added in target DOM node, completes target HTML
The rendering of module.
Step 309：Judge whether to have traveled through the DOM node of all HTML modules, if so, then hold
Row step 310；Otherwise, return to step 303.
Step 310：Determine and complete rendering of html page, terminate current process.
To step 309, all HTML modules are traveled through by circulation execution abovementioned steps 303
DOM node, and after completing the rendering of all HTML modules, you can load out on a web browser
Whole html page.
As seen from the above-described embodiment, in this embodiment when rendering each HTML module, by fixed in advance
All resources of this HTML module of attribute information parallel requests of DOM node of justice, therefore resource obtains
Take speed, and can automatically load these resources after getting all resources, therefore save
The resource load time, thus improve the rendering speed of html page on the whole.
Corresponding with the embodiment of the application page rendering method, present invention also provides page rendering device
And the embodiment of client device.
The embodiment of the application page rendering device can apply the various clients being provided with browser to set
Standby upper, for example, this client device can include mobile phone, panel computer, PC etc..Wherein, device is real
Apply example to realize by software it is also possible to realize by by way of hardware or software and hardware combining.With soft
As a example part is realized, as the device on a logical meaning, it is the process by its place client device
Computer program instructions corresponding in nonvolatile memory are read and run formation in internal memory by device.From
For hardware view, as shown in figure 4, the one kind for the application page rendering device place client device
Hardware structure diagram, except the processor shown in Fig. 4, internal memory, network interface and non-volatile memories
Outside device, the client device that in embodiment, device is located, generally according to the actual functional capability of this equipment, also may be used
To include other hardware, no longer illustrate one by one in Fig. 4.
Referring to Fig. 5, it is an embodiment block diagram of the application page rendering device：
This device includes：Traversal Unit 510, request unit 520 and rendering unit 530.
Wherein, Traversal Unit 510, for, when by browser access html page, traversal is described
The document dbject model DOM node of each HTML module of html page；
Request unit 520, in the target DOM node traversing current target HTML module
When, the attribute information according to defined in described target DOM node, to mesh described in server parallel requests
Multiple target resources of mark HTML module；
Rendering unit 530, for rendering described target according to the relation between the plurality of target resource
HTML module.
Referring to Fig. 6, it is another embodiment block diagram of the application page rendering device：
This device includes：Division unit 610, definition unit 620, Traversal Unit 630, request unit 640,
Rendering unit 650 and judging unit 660 and determining unit 670.
Wherein, division unit 610, for being divided into multiple HTML modules by described html page；
Definition unit 620, for by the DOM section of each HTML module of the primary layout definition of WEB
The attribute information of point, described DOM node is used for labelling HTML module in described html page
Region, comprises the resource path of multiple resources of HTML module in described attribute information；
Traversal Unit 630, for, when by browser access html page, traveling through described HTML
The document dbject model DOM node of each HTML module of the page；
Request unit 640, in the target DOM node traversing current target HTML module
When, the attribute information according to defined in described target DOM node, to mesh described in server parallel requests
Multiple target resources of mark HTML module；
Rendering unit 650, for rendering described target according to the relation between the plurality of target resource
HTML module；
Judging unit 660, for judging whether to have traveled through the DOM node of all HTML modules；
Determining unit 670, if for having traveled through the DOM node of all HTML modules it is determined that complete
Become rendering of described html page.
In an optional implementation, described request unit 640 can include (not shown in Fig. 6)：
Information reading sub-unit, for reading the attribute information of described target DOM node, obtains described
The resource path of multiple target resources of target HTML module；
Request sends subelement, for the resource path according to each target resource, by calling
JavaScript is used for obtaining the resource request of described target resource to server transmitted in parallel.
In another optional implementation, described rendering unit 650 can include (not showing in Fig. 6
Go out)：
State arranges subelement, and for arranging solicited status for each resource request, described solicited status is used
In marking whether to get corresponding target resource；
Module synthesizes subelement, for getting all target resources when the solicited status according to setting determines
When, load successively after described target resource according to the dependence between described target resource, synthesis is described
Target HTML module；
Module adding device, for described HTML module is added in described target DOM node,
Complete rendering of described target HTML module.
In another optional implementation, each HTML module of described html page, bag
Include：
The multiple father's HTML modules obtaining are divided to described html page；And/or,
The many sub- HTML modules that arbitrary father's HTML Module Division is obtained.
In said apparatus, the process of realizing of the function of unit and effect specifically refers to correspondence in said method
Step realize process, will not be described here.
For device embodiment, because it corresponds essentially to embodiment of the method, so related part ginseng
See that the part of embodiment of the method illustrates.Device embodiment described above is only schematically,
The wherein said unit illustrating as separating component can be or may not be physically separate, make
For the part that unit shows can be or may not be physical location, you can with positioned at a place,
Or can also be distributed on multiple NEs.Can select according to the actual needs part therein or
The whole module of person is realizing the purpose of application scheme.Those of ordinary skill in the art are not paying creativeness
In the case of work, you can to understand and to implement.
As seen from the above-described embodiment, when applying the embodiment of the present application to render each HTML module, pass through
All resources of this HTML module of attribute information parallel requests of predefined DOM node, therefore
Resource acquisition speed, and can automatically load these resources after getting all resources, therefore
Save the resource load time, thus improving the rendering speed of html page on the whole.
Those skilled in the art, after considering description and putting into practice invention disclosed herein, will readily occur to this
Other embodiments of application.The application is intended to any modification, purposes or the adaptability of the application
Change, these modifications, purposes or adaptations are followed the general principle of the application and are included this Shen
Please undocumented common knowledge in the art or conventional techniques.Description and embodiments only by
It is considered as exemplary, the true scope of the application and spirit are pointed out by claim below.
It should be appreciated that the application is not limited to be described above and illustrated in the accompanying drawings accurate
Structure, and various modifications and changes can carried out without departing from the scope.Scope of the present application is only by institute
Attached claim is limiting.
Claims (14)
1. a kind of page rendering method, it is characterised in that methods described is applied on a client device, is wrapped
Include：
When by browser access HTML html page, travel through described HTML page
The document dbject model DOM node of each HTML module in face；
When traversing the target DOM node of current target HTML module, according to described target
Attribute information defined in DOM node is many to target HTML module described in server parallel requests
Individual target resource；
Described target HTML module is rendered according to the relation between the plurality of target resource.
2. method according to claim 1 is it is characterised in that the described HTML page of described traversal
Before the DOM node of each HTML module in face, methods described also includes：
Described html page is divided into multiple HTML modules；
By the attribute information of the DOM node of each HTML module of the primary layout definition of WEB, institute
State DOM node for region in described html page for the labelling HTML module, described attribute letter
The resource path of multiple resources of HTML module is comprised in breath.
3. method according to claim 2 it is characterised in that described according to described target DOM
Attribute information defined in node, to multiple targets of target HTML module described in server parallel requests
Resource, including：
Read the attribute information of described target DOM node, obtain the multiple of described target HTML module
The resource path of target resource；
According to the resource path of each target resource, by calling JavaScript to server transmitted in parallel
For obtaining the resource request of described target resource.
4. method according to claim 3 is it is characterised in that described provide according to the plurality of target
Relation between source renders described target HTML module, including：
Solicited status is set for each resource request, it is right that described solicited status is used for marking whether getting
The target resource answered；
When the solicited status according to setting determines and gets all target resources, according to described target resource
Between dependence load described target resource successively after, synthesize described target HTML module；
Described target HTML module is added in described target DOM node, completes described target
The rendering of HTML module.
5. method according to claim 1 is it is characterised in that methods described also includes：
Judge whether to have traveled through the DOM node of all HTML modules；
If having traveled through the DOM node of all HTML modules it is determined that completing described html page
Render.
6. according to the arbitrary described method of claim 1 to 5 it is characterised in that described HTML page
Each HTML module in face, including：
The multiple father's HTML modules obtaining are divided to described html page；And/or,
The many sub- HTML modules that arbitrary father's HTML Module Division is obtained.
7. according to the arbitrary described method of claim 1 to 5 it is characterised in that HTML module
Resource includes：Html file, Cascading Style Sheet CSS file, JS file, object tag JSON number
According to.
8. a kind of page rendering device it is characterised in that described device apply on a client device, institute
State device to include：
Traversal Unit, for, when by browser access html page, traveling through described HTML page
The document dbject model DOM node of each HTML module in face；
Request unit, for when traversing the target DOM node of current target HTML module,
Attribute information according to defined in described target DOM node, to target described in server parallel requests
Multiple target resources of HTML module；
Rendering unit, for rendering described target HTML according to the relation between the plurality of target resource
Module.
9. device according to claim 8 is it is characterised in that described device also includes：
Division unit, for being divided into multiple HTML modules by described html page；
Definition unit, for the DOM node by each HTML module of the primary layout definition of WEB
Attribute information, described DOM node be used for area in described html page for the labelling HTML module
Domain, comprises the resource path of multiple resources of HTML module in described attribute information.
10. device according to claim 9 is it is characterised in that described request unit, including：
Information reading sub-unit, for reading the attribute information of described target DOM node, obtains described
The resource path of multiple target resources of target HTML module；
Request sends subelement, for the resource path according to each target resource, by calling
JavaScript is used for obtaining the resource request of described target resource to server transmitted in parallel.
11. devices according to claim 10 it is characterised in that described rendering unit, including：
State arranges subelement, and for arranging solicited status for each resource request, described solicited status is used
In marking whether to get corresponding target resource；
Module synthesizes subelement, for getting all target resources when the solicited status according to setting determines
When, load successively after described target resource according to the dependence between described target resource, synthesis is described
Target HTML module；
Module adding device, for being added to described target DOM node by described target HTML module
In, complete rendering of described target HTML module.
12. devices according to claim 8 are it is characterised in that described device also includes：
Judging unit, for judging whether to have traveled through the DOM node of all HTML modules；
Determining unit, if for having traveled through the DOM node of all HTML modules it is determined that completing institute
State rendering of html page.
13. according to Claim 8 to 12 arbitrary described devices it is characterised in that described HTML
Each HTML module of the page, including：
The multiple father's HTML modules obtaining are divided to described html page；And/or,
The many sub- HTML modules that arbitrary father's HTML Module Division is obtained.
A kind of 14. client devices are it is characterised in that include：
Processor；For storing the memorizer of described processor executable；
Wherein, described processor is configured to：
When by browser access html page, travel through each HTML of described html page
The document dbject model DOM node of module；
When traversing the target DOM node of current target HTML module, according to described target
Attribute information defined in DOM node is many to target HTML module described in server parallel requests
Individual target resource；
Described target HTML module is rendered according to the relation between the plurality of target resource.
Priority Applications (2)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201510549439.4A CN106484383B (en) | 2015-08-31 | 2015-08-31 | Page rendering method, device and equipment |
| PCT/CN2016/095857 WO2017036309A1 (en) | 2015-08-31 | 2016-08-18 | Page rendering method, device and apparatus |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201510549439.4A CN106484383B (en) | 2015-08-31 | 2015-08-31 | Page rendering method, device and equipment |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN106484383A true CN106484383A (en) | 2017-03-08 |
| CN106484383B CN106484383B (en) | 2019-08-23 |
Family
ID=58186685
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201510549439.4A Active CN106484383B (en) | 2015-08-31 | 2015-08-31 | Page rendering method, device and equipment |
Country Status (2)
| Country | Link |
|---|---|
| CN (1) | CN106484383B (en) |
| WO (1) | WO2017036309A1 (en) |
Cited By (25)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN107066430A (en) * | 2017-04-21 | 2017-08-18 | 广州爱九游信息技术有限公司 | Image processing method, device, service end and client |
| CN107105336A (en) * | 2017-04-19 | 2017-08-29 | 腾讯科技（深圳）有限公司 | Data processing method and data processing equipment |
| CN107169007A (en) * | 2017-03-31 | 2017-09-15 | 北京奇艺世纪科技有限公司 | The display interface method to set up and device of a kind of mobile terminal |
| CN107622106A (en) * | 2017-09-13 | 2018-01-23 | 五八有限公司 | Reminding method and device when a kind of page can not render |
| CN108322359A (en) * | 2018-01-08 | 2018-07-24 | 阿里巴巴集团控股有限公司 | A kind of acquisition methods and device of page initial screen time |
| CN108595457A (en) * | 2017-12-29 | 2018-09-28 | 北京奇虎科技有限公司 | A kind of rendering intent and device of the waterfall stream page |
| CN108885544A (en) * | 2017-10-10 | 2018-11-23 | 深圳中兴力维技术有限公司 | Front end page internationalization processing method, application server and computer readable storage medium |
| CN109002282A (en) * | 2018-07-26 | 2018-12-14 | 北京京东金融科技控股有限公司 | A kind of method and apparatus for realizing animation effect in web page exploitation |
| CN109558186A (en) * | 2017-09-27 | 2019-04-02 | 阿里巴巴集团控股有限公司 | A kind of page display method and device |
| CN109697266A (en) * | 2017-10-24 | 2019-04-30 | 中国电信股份有限公司 | Page rendering system, page rendering method and page rendering device |
| CN109865292A (en) * | 2019-01-10 | 2019-06-11 | 珠海金山网络游戏科技有限公司 | A kind of game resource construction method and device based on game engine |
| CN109902247A (en) * | 2019-02-14 | 2019-06-18 | 北京奇艺世纪科技有限公司 | A kind of method, apparatus and electronic equipment of page rendering |
| WO2019205365A1 (en) * | 2018-04-27 | 2019-10-31 | 平安科技（深圳）有限公司 | Method and apparatus for loading dom node data, and computer device and storage medium |
| CN110795195A (en) * | 2019-10-31 | 2020-02-14 | 百度在线网络技术（北京）有限公司 | Web page rendering method, device, electronic device and storage medium |
| CN111143732A (en) * | 2019-12-20 | 2020-05-12 | 贝壳技术有限公司 | Webpage rendering method and device |
| CN111310088A (en) * | 2020-02-12 | 2020-06-19 | 北京字节跳动网络技术有限公司 | Page rendering method and device |
| CN111339548A (en) * | 2018-12-18 | 2020-06-26 | 北京京东尚科信息技术有限公司 | Anti-crawler data processing method, browser, computer equipment and storage medium |
| CN111562919A (en) * | 2020-07-14 | 2020-08-21 | 成都市映潮科技股份有限公司 | Method, system and storage medium for generating front-end webpage code based on PSD file |
| CN111562918A (en) * | 2020-05-06 | 2020-08-21 | 中国银行股份有限公司 | Page dynamic generation method and device |
| CN113051874A (en) * | 2019-12-26 | 2021-06-29 | 阿里巴巴集团控股有限公司 | User behavior data rendering method and device |
| CN113220366A (en) * | 2021-05-11 | 2021-08-06 | 北京达佳互联信息技术有限公司 | Sub-application starting method and device, terminal and server |
| CN113315982A (en) * | 2021-05-07 | 2021-08-27 | 广州虎牙科技有限公司 | Live broadcast method, computer storage medium and equipment |
| CN115665480A (en) * | 2022-10-25 | 2023-01-31 | 广州至真信息科技有限公司 | Data rendering method and device, computer equipment and storage medium |
| CN115758024A (en) * | 2022-11-22 | 2023-03-07 | 浙江大华技术股份有限公司 | Data state processing method and system and electronic equipment |
| CN116149746A (en) * | 2022-08-31 | 2023-05-23 | 成都索骥科技有限公司 | Method and device for realizing web front-end application page data synchronous loading mechanism |
Families Citing this family (25)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN111258877B (en) * | 2018-11-30 | 2023-05-02 | 阿里巴巴集团控股有限公司 | Method and device for detecting visible time of first screen page and electronic equipment |
| CN110322284A (en) * | 2019-06-14 | 2019-10-11 | 广州汇量信息科技有限公司 | The methods of exhibiting and system of advertisement page view |
| CN112948011B (en) * | 2019-11-26 | 2023-08-08 | 上海哔哩哔哩科技有限公司 | Method and device for loading secondary page |
| CN111045655B (en) * | 2019-12-18 | 2023-04-14 | 广州市百果园信息技术有限公司 | Page rendering method and device, rendering server and storage medium |
| CN111221530B (en) * | 2020-01-08 | 2023-11-14 | 北京市科学技术情报研究所 | Mobile terminal Web application interface construction method, web application interface and operation method thereof |
| CN111443921B (en) * | 2020-03-27 | 2025-01-17 | 中国平安财产保险股份有限公司 | Subcontracting deployment method, system and computer equipment for web front-end projects |
| CN113760557B (en) * | 2020-05-29 | 2024-12-27 | 北京沃东天骏信息技术有限公司 | Method, device, electronic device and storage medium for sending page data |
| CN111880788A (en) * | 2020-06-12 | 2020-11-03 | 北京三快在线科技有限公司 | Page rendering method, device, client and computer readable storage medium |
| CN111880790A (en) * | 2020-06-12 | 2020-11-03 | 北京三快在线科技有限公司 | Page rendering method, page rendering system, and computer-readable storage medium |
| CN113760269B (en) * | 2020-07-17 | 2025-03-18 | 北京沃东天骏信息技术有限公司 | Configuration method and device, and component rendering method, device and system |
| CN111880860A (en) * | 2020-07-28 | 2020-11-03 | 北京浪潮数据技术有限公司 | Service processing method, device and related equipment |
| CN113761412B (en) * | 2020-09-17 | 2024-08-16 | 北京沃东天骏信息技术有限公司 | Application page display method and device, electronic equipment, medium and application system |
| CN114115871A (en) * | 2021-01-19 | 2022-03-01 | 北京沃东天骏信息技术有限公司 | Page data embedding method and device, storage medium and electronic equipment |
| CN113760149B (en) * | 2021-01-28 | 2025-08-19 | 北京沃东天骏信息技术有限公司 | Page split screen system, method and device |
| CN113262469A (en) * | 2021-06-08 | 2021-08-17 | 网易（杭州）网络有限公司 | Resource template generation method and device and scene element rendering method and device in game |
| CN113392350B (en) * | 2021-06-11 | 2023-07-04 | 中国联合网络通信集团有限公司 | Page routing processing method, device, equipment and storage medium |
| CN113626745B (en) * | 2021-06-30 | 2025-02-14 | 济南浪潮数据技术有限公司 | A page rendering method and related device |
| CN114186155B (en) * | 2021-12-10 | 2025-09-16 | 挂号网（杭州）科技有限公司 | Page rendering method and device, electronic terminal and storage medium |
| CN114237600B (en) * | 2021-12-20 | 2023-08-11 | 抖音视界有限公司 | Method, device, equipment and storage medium for generating code of front page |
| CN114911555A (en) * | 2022-04-19 | 2022-08-16 | 北京三快在线科技有限公司 | Page display method and device, electronic equipment and storage medium |
| CN115438290A (en) * | 2022-09-30 | 2022-12-06 | 北京全人星球教育科技有限公司 | Method and system for automatically analyzing static resources of single-page application and preloading |
| CN116048510A (en) * | 2022-12-29 | 2023-05-02 | 南京中孚信息技术有限公司 | A relationship diagram component drawn based on svg |
| CN116502005A (en) * | 2023-03-31 | 2023-07-28 | 中银金融科技有限公司 | Network resource configuration generation method, device, electronic device and storage medium |
| CN116795405B (en) * | 2023-08-25 | 2023-11-21 | 苏州盈天地资讯科技有限公司 | Quick rendering method for front-end pages of thousand-person thousand-face scene, server and front-end equipment |
| CN116880901B (en) * | 2023-09-05 | 2023-11-24 | 国网思极网安科技（北京）有限公司 | Application page analysis method, device, electronic equipment and computer readable medium |
Citations (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20090282349A1 (en) * | 2008-05-08 | 2009-11-12 | Dialogic Corporation | System and method for dynamic configuration of components of web interfaces |
| CN102915375A (en) * | 2012-11-08 | 2013-02-06 | 山东大学 | Webpage loading method based on layout zoning |
| CN103049439A (en) * | 2011-10-11 | 2013-04-17 | 腾讯科技（深圳）有限公司 | Processing method for markup language documents, browser and network operating system |
| CN103679487A (en) * | 2012-09-05 | 2014-03-26 | 阿里巴巴集团控股有限公司 | Advertisement display monitoring method and device |
| CN104050190A (en) * | 2013-03-14 | 2014-09-17 | 腾讯科技（上海）有限公司 | Method and system for processing relationship chain data, and client |
| CN104239441A (en) * | 2014-09-01 | 2014-12-24 | 可牛网络技术（北京）有限公司 | Web page loading control method and device |
| CN104603756A (en) * | 2012-08-16 | 2015-05-06 | 高通股份有限公司 | Speculative resource pre-fetching via sandboxed execution |
Family Cites Families (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102760139A (en) * | 2011-04-29 | 2012-10-31 | 国际商业机器公司 | Webpage processing method and webpage processing system |
| CN103593414A (en) * | 2013-10-29 | 2014-02-19 | 北京奇虎科技有限公司 | Showing method and device of webpages in browser |
-
2015
- 2015-08-31 CN CN201510549439.4A patent/CN106484383B/en active Active
-
2016
- 2016-08-18 WO PCT/CN2016/095857 patent/WO2017036309A1/en not_active Ceased
Patent Citations (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20090282349A1 (en) * | 2008-05-08 | 2009-11-12 | Dialogic Corporation | System and method for dynamic configuration of components of web interfaces |
| CN103049439A (en) * | 2011-10-11 | 2013-04-17 | 腾讯科技（深圳）有限公司 | Processing method for markup language documents, browser and network operating system |
| CN104603756A (en) * | 2012-08-16 | 2015-05-06 | 高通股份有限公司 | Speculative resource pre-fetching via sandboxed execution |
| CN103679487A (en) * | 2012-09-05 | 2014-03-26 | 阿里巴巴集团控股有限公司 | Advertisement display monitoring method and device |
| CN102915375A (en) * | 2012-11-08 | 2013-02-06 | 山东大学 | Webpage loading method based on layout zoning |
| CN104050190A (en) * | 2013-03-14 | 2014-09-17 | 腾讯科技（上海）有限公司 | Method and system for processing relationship chain data, and client |
| CN104239441A (en) * | 2014-09-01 | 2014-12-24 | 可牛网络技术（北京）有限公司 | Web page loading control method and device |
Cited By (34)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN107169007A (en) * | 2017-03-31 | 2017-09-15 | 北京奇艺世纪科技有限公司 | The display interface method to set up and device of a kind of mobile terminal |
| CN107105336B (en) * | 2017-04-19 | 2021-01-08 | 腾讯科技（深圳）有限公司 | Data processing method and data processing device |
| CN107105336A (en) * | 2017-04-19 | 2017-08-29 | 腾讯科技（深圳）有限公司 | Data processing method and data processing equipment |
| CN107066430A (en) * | 2017-04-21 | 2017-08-18 | 广州爱九游信息技术有限公司 | Image processing method, device, service end and client |
| CN107066430B (en) * | 2017-04-21 | 2021-02-26 | 阿里巴巴（中国）有限公司 | Picture processing method and device, server and client |
| CN107622106A (en) * | 2017-09-13 | 2018-01-23 | 五八有限公司 | Reminding method and device when a kind of page can not render |
| CN109558186B (en) * | 2017-09-27 | 2022-06-28 | 阿里巴巴集团控股有限公司 | Page display method and device |
| CN109558186A (en) * | 2017-09-27 | 2019-04-02 | 阿里巴巴集团控股有限公司 | A kind of page display method and device |
| CN108885544A (en) * | 2017-10-10 | 2018-11-23 | 深圳中兴力维技术有限公司 | Front end page internationalization processing method, application server and computer readable storage medium |
| CN109697266A (en) * | 2017-10-24 | 2019-04-30 | 中国电信股份有限公司 | Page rendering system, page rendering method and page rendering device |
| CN108595457A (en) * | 2017-12-29 | 2018-09-28 | 北京奇虎科技有限公司 | A kind of rendering intent and device of the waterfall stream page |
| CN108322359A (en) * | 2018-01-08 | 2018-07-24 | 阿里巴巴集团控股有限公司 | A kind of acquisition methods and device of page initial screen time |
| WO2019205365A1 (en) * | 2018-04-27 | 2019-10-31 | 平安科技（深圳）有限公司 | Method and apparatus for loading dom node data, and computer device and storage medium |
| CN109002282A (en) * | 2018-07-26 | 2018-12-14 | 北京京东金融科技控股有限公司 | A kind of method and apparatus for realizing animation effect in web page exploitation |
| CN111339548B (en) * | 2018-12-18 | 2023-11-03 | 北京京东尚科信息技术有限公司 | Anti-crawler data processing methods, devices, computer equipment and storage media |
| CN111339548A (en) * | 2018-12-18 | 2020-06-26 | 北京京东尚科信息技术有限公司 | Anti-crawler data processing method, browser, computer equipment and storage medium |
| CN109865292A (en) * | 2019-01-10 | 2019-06-11 | 珠海金山网络游戏科技有限公司 | A kind of game resource construction method and device based on game engine |
| CN109865292B (en) * | 2019-01-10 | 2023-03-14 | 珠海金山数字网络科技有限公司 | Game resource construction method and device based on game engine |
| CN109902247A (en) * | 2019-02-14 | 2019-06-18 | 北京奇艺世纪科技有限公司 | A kind of method, apparatus and electronic equipment of page rendering |
| CN110795195A (en) * | 2019-10-31 | 2020-02-14 | 百度在线网络技术（北京）有限公司 | Web page rendering method, device, electronic device and storage medium |
| CN110795195B (en) * | 2019-10-31 | 2023-09-26 | 百度在线网络技术（北京）有限公司 | Webpage rendering method and device, electronic equipment and storage medium |
| CN111143732A (en) * | 2019-12-20 | 2020-05-12 | 贝壳技术有限公司 | Webpage rendering method and device |
| CN113051874A (en) * | 2019-12-26 | 2021-06-29 | 阿里巴巴集团控股有限公司 | User behavior data rendering method and device |
| CN113051874B (en) * | 2019-12-26 | 2023-12-26 | 阿里巴巴集团控股有限公司 | User behavior data rendering method and device |
| CN111310088A (en) * | 2020-02-12 | 2020-06-19 | 北京字节跳动网络技术有限公司 | Page rendering method and device |
| CN111562918A (en) * | 2020-05-06 | 2020-08-21 | 中国银行股份有限公司 | Page dynamic generation method and device |
| CN111562919A (en) * | 2020-07-14 | 2020-08-21 | 成都市映潮科技股份有限公司 | Method, system and storage medium for generating front-end webpage code based on PSD file |
| CN113315982A (en) * | 2021-05-07 | 2021-08-27 | 广州虎牙科技有限公司 | Live broadcast method, computer storage medium and equipment |
| CN113220366A (en) * | 2021-05-11 | 2021-08-06 | 北京达佳互联信息技术有限公司 | Sub-application starting method and device, terminal and server |
| CN113220366B (en) * | 2021-05-11 | 2024-12-31 | 北京达佳互联信息技术有限公司 | Sub-application startup method, device, terminal and server |
| CN116149746A (en) * | 2022-08-31 | 2023-05-23 | 成都索骥科技有限公司 | Method and device for realizing web front-end application page data synchronous loading mechanism |
| CN115665480A (en) * | 2022-10-25 | 2023-01-31 | 广州至真信息科技有限公司 | Data rendering method and device, computer equipment and storage medium |
| CN115665480B (en) * | 2022-10-25 | 2024-06-07 | 广州至真信息科技有限公司 | Data rendering method and device, computer equipment and storage medium |
| CN115758024A (en) * | 2022-11-22 | 2023-03-07 | 浙江大华技术股份有限公司 | Data state processing method and system and electronic equipment |
Also Published As
| Publication number | Publication date |
|---|---|
| WO2017036309A1 (en) | 2017-03-09 |
| CN106484383B (en) | 2019-08-23 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN106484383A (en) | page rendering method, device and equipment | |
| CN110968824B (en) | Page data processing method and device | |
| US10331758B2 (en) | Digital communications platform for webpage overlay | |
| CN109542427B (en) | System customization method and device, electronic equipment and storage medium | |
| CN105260420B (en) | A kind of method and apparatus for the offer target pages in mobile application | |
| US9411782B2 (en) | Real time web development testing and reporting system | |
| CN107066631A (en) | Display methods, device and the electronic equipment of the page | |
| CN102737067B (en) | Method and system for outputting webpage | |
| CN104798094B (en) | Determine the configuration of the content item display environment | |
| CN104102643B (en) | A kind of method and apparatus for carrying out page snapshot | |
| CN104881318B (en) | A kind of interface call method, device and terminal | |
| JP4857349B2 (en) | Method, system, and computer program for providing asynchronous portal pages within a portal system | |
| US20120011430A1 (en) | Infinite Scrolling | |
| CN104035753A (en) | Double-WebView customized page display method and system | |
| CN107807937B (en) | Website SEO processing method, device and system | |
| CN106294372A (en) | Application program page quick access method and apply its mobile terminal | |
| CN110020325B (en) | Page loading method, device, equipment and readable storage medium | |
| CN106033361A (en) | Method and device for showing application page, and method and device for updating application page data | |
| CN109684586A (en) | Page layout optimization display methods, device, computer equipment and storage medium | |
| CN103258058B (en) | Page display method and system and browser | |
| US20140068464A1 (en) | System And Method For Capturing Computer Application-Related Information | |
| CN108595697A (en) | Webpage integrated approach, apparatus and system | |
| CN108241689A (en) | Page resource acquisition methods, device and client device | |
| CN107203536A (en) | Online browse method, device and the equipment of content | |
| CN108958855A (en) | The method, apparatus and system of page jump |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| C06 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |