CN104933078B - A kind of Web five application pages rendering optimization method - Google Patents

A kind of Web five application pages rendering optimization method Download PDF

Info

Publication number
CN104933078B
CN104933078B CN201410106314.XA CN201410106314A CN104933078B CN 104933078 B CN104933078 B CN 104933078B CN 201410106314 A CN201410106314 A CN 201410106314A CN 104933078 B CN104933078 B CN 104933078B
Authority
CN
China
Prior art keywords
node
web
page
hiding
optimization method
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Active
Application number
CN201410106314.XA
Other languages
Chinese (zh)
Other versions
CN104933078A (en
Inventor
颜佩琼
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
China Standard Software Co Ltd
Original Assignee
China Standard Software Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by China Standard Software Co Ltd filed Critical China Standard Software Co Ltd
Priority to CN201410106314.XA priority Critical patent/CN104933078B/en
Publication of CN104933078A publication Critical patent/CN104933078A/en
Application granted granted Critical
Publication of CN104933078B publication Critical patent/CN104933078B/en
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Landscapes

  • Information Transfer Between Computers (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

A kind of Web five application pages rendering optimization method, this method is by first building a hiding DOM node element, simultaneously in hiding at least one child node of node elements internal drawing, while drawing child node, whether the combination for constantly detecting the DOM node and its child node constitutes effective status, once the element combinations that the child node of the DOM node element and its inside is formed constitute a scheduled effective status, batch calculating and rendering, disposable display to User Page are carried out to the child node of the DOM node element and inside by browser.The present invention's can avoid the problem that return time is long in existing page elements increment rendering intent, effectively reduces page load time, improves the user experience performance of Web five application pages.

Description

A kind of Web five application pages rendering optimization method
Technical field
The present invention relates to Web Performance Optimization techniques fields, more particularly to are directed to the loaded and optimized method of Web five application pages.
Background technology
Webpage(Webpage)Also referred to as Web document(Web document), it is generally by a basic token page It is formed with a variety of web resources or object.Here the basic token page is usually html page, and web resource or object then can be with It is varied, as various scripts(Such as most typical JavaScript), data resource(Such as XML, JSON), stacking sample Formula table, picture etc. can be Web page constituents, and the numerous Web UI pages of page structure complexity element are then referred to as The page of rich Web applications.The effect of Web browser is exactly html document of the parsing comprising Various Complex resource and by such resource It is correctly rendered and is shown on webpage.
It is directed to Web page content loading method at present, is mainly completed in such a way that element increment renders.Lead to below An example is crossed, to learn about the working method and render process of general browser:
1. user inputs network address(Assuming that being a html pages, and it is to access for the first time), browser sends out to server Request, server return to html files;
2. browsers start to be loaded into html codes, find<head>There are one in label<link>The external CSS of label reference File;
3. browsers send out the request of CSS files again, server returns to this CSS file;
4. browsers continue to be loaded into html<body>Partial code, and CSS files have taken hand, can be with Start to render the page;
5. browsers find one in code<img>Label refers to a pictures, and request is sent out to server.This When browser will not have been downloaded until picture, and be to continue with and render subsequent code;
6. servers return to picture file and affect the arrangement of subsequent paragraphs since picture occupies certain area, because This browser needs turn back to render this partial code again;
7. browsers are found that one includes a line Javascript codes<script>Label runs it quickly;
8. .Javascript scripts perform this sentence, its order browser hides some in code<div> (style.display=”none”).At this point, browser has to render this partial code again;
9. is waited until finally</html>Arrival, and once " changing skin " button in interface when the user clicks, Javascript allows browser to have changed<link>The paths CSS of label;
10. the CSS files that browsers please must look for novelty to server again, render full page again.
Therefrom it is understood that when Web browser navigates to a Web page, it first passes through http protocol and asks rooting Then the page is directed to and parses and draw operation from the page file that Web service end is fed back into row element, and generate corresponding Document object model(DOM, Document Object Model).After the preliminary rendering for completing the page, browser possibility will be after Supervention send additional request to respond the operations such as user's input, event triggering or the update of Partial Elements, and browser will at this time Constantly detect DOM element to be updated, and recalculate and draw with the relevant other elements of element to be updated, until DOM All elements in tree structure are all accurately rendered.This process will be related to flowing back(reflow), work as browser It was found that a variation, which has occurred, in some part affects layout, needs to refund and render again, and this process to retract is just named reflow.Reflux refers to Web browser in order to which the page carried out when rendering full page or Local hydrodynamic unit partial page again is first Plain positions and dimensions recalculate process.Sometimes reflux operation can only be related to element to be updated itself, or relate only to The father node and child node of more new element, but be also possible to be related to all elements of full page, so often update a member Element may need to take some time to recalculate and draw relevant other elements, and behaviour is redrawn until completion full page Make.
As shown in Figure 1, when Web browser navigates to a webpage, it can send a page to corresponding server Request is obtained, server can then return to a http response for including the base reference page, and browser is then according to this response page Face(Such as html page)It carries out parsing and preliminary draw renders(Corresponding document object model dom tree 200 is generated, in this Drawing basics node 201 in DOMD tree structures, html page successfully renders base node 201 simultaneously to browser according to response first It is shown as A in Web page);During parsing, browser may find that need to load some additional resources improving or Original page is changed, at this time browser then needs to retransmit some additional requests(Such as AJAX request), then attached according to these Add the feedback data of request(Such as HTML fragment, XML data or JSON data)It parses and is injected into the existing page(In dom tree Base node 201 inside draw child node 202, child node 203 again, and child node 202,203 is rendered simultaneously according to feedback data It is shown as B and C in Web page).For Web UI, this process would generally cause other elements(Such as adjacent node, father Node or descendant nodes)Recalculate and draw, such as when loading C, child node 202, base node 201 can be caused simultaneously Repaint, and this process will devote a tremendous amount of time.In this way, browser often detects an element to be updated, It is likely to need to recalculate and draw other interdependent nodes, sometimes even needs to redraw all elements section on the page Point will likely devote a tremendous amount of time in the element size or position constantly repeated calculates in this way, and user will also spend more Time waits for page loaded, has seriously affected and has applied response performance.
In Web page browser, reflow is almost unavoidable, as long as mouse-over, click etc. behavior cause The variation of the attributes such as footprints, positioning method, back gauge of certain elements on the page, can all cause inside it, around even The rendering again of full page.In addition, flowing back in a browser(reflow)It is the operating process of user obstruction, flowed back Therefore the long performance that will seriously affect user experience of journey efficiently reduces return time and improves Web page loading performance It is very necessary.
Invention content
The present invention provides a kind of loaded and optimized methods of Web five application pages, and this method is by first hiding DOM node element (That is base node), and child node is drawn in the hiding node elements simultaneously, until the DOM node element combinations constitute one A effective status just carries out the combination of the DOM node element by browser the mode of batch calculating and rendering, can avoid existing Page elements increment rendering intent in the long problem of return time, effectively reduce page load time, improve Web and answer User experience performance.
The technical solution used in the present invention is:A kind of Web five application pages rendering optimization method, this method is by first structure A hiding DOM node element is built, while in hiding at least one child node of node elements internal drawing, until this The element combinations that the child node of DOM node element and its inside is formed constitute a scheduled effective status, just by browser Batch calculating and rendering, display to User Page are carried out to the child node of the DOM node element and inside.
The method includes the steps:
Step 1:A hiding node elements are built in a dom tree shape structure, are saved based on the node elements Point;
Step 2:Continue to add one or more child nodes inside the base node;
Step 3:Judge that the element of all child nodes by the base node and its inside forms, if constitute one and make a reservation for Effective status otherwise jump to step 2 if so then execute step 4 and continue to add other nodes, the scheduled effective status Refer to whether the combination of base node and its child node reaches a preset standard;
Step 4:Base node is set to visible state;
Step 5:Web browser batch calculates the base node in visible state and its child node of inside, by each section A point sexploitation of element is shown to user.
Step 1 includes two steps again:
Step 1.1:A node elements are drawn in the corresponding dom tree shape structures of Web UI;
Step 1.2:The node is hidden by the display properties by changing the node elements, prevents it from by browser Displaying.
In step 1.2:It includes directly being added in the style attributes of the node elements that node, which is set as hiding method, “display:None " fields or the class that a CSS is added to the node elements, defined " display in the class: The pattern of none ".
The drawing basics node and its child node are to carry out html page solution according to a part of current Web UI The process of analysis.
In step 3, preset standard is that the function of being applied according to current Web, current Web application or similar Web are answered Historical information, relevant user information, user setting or user preferences and system are provided as reference value to determine.
It sets base node to visible state in step 4, is by changing hiding in the base node Show Styles Attribute is realized.
The hiding attribute changed in the base node Show Styles includes two methods:First is by base section point sample " display in formula style:None " fields are removed;Another kind is will be in basic pattern comprising the CSS that hides Styles Class is removed.
The step(1)It is the trigger action for causing a page rendering, which is a Web site or the page Request for the first time, or redirecting between the different page or the partially or fully refreshing of current page.
Wherein, preset standard is that the function of being applied according to current Web, current Web application or similar Web are applied Historical information, relevant user information, user setting or user preferences and system are provided as reference value to determine.
The method of the present invention can substantially reduce reflux when page load, improve the loading performance of Web page, promote user The performance of experience.
Description of the drawings
Fig. 1 is the schematic diagram that conventional needle renders the increment type reflux that Web five application pages load.
Fig. 2 is the implementing procedure figure of page load performance optimization of the present invention for Web applications.
Fig. 3 is that the schematic diagram of display is hidden or rendered to the batch proposed by the present invention for the load of Web five application pages.
Specific implementation mode
The present invention is a kind of page rendering optimization method for Web applications.This method passes through a hiding base section Point internal drawing child node constitutes an effective status until the base node and its child node, then the mode that batch rendering is shown It effectively reduces the calculating time of element position and size, to reduce the generation of reflux, improves page loading velocity, reach optimization The purpose of the page load performance of Web applications.
As shown in Figure 1, for the flow chart of the method for the present invention, total process includes first drawing and hiding base node, when When the child node element added makes the base node reach scheduled effective status, which is set to as it can be seen that at this time Browser again to base node and its added child node element composition resulting structure unifiedly calculated and rendered, to subtract The time for computing repeatedly and drawing of element is lacked, has reduced reflux, has achieved the purpose that optimize Web five application page loading performance.
As shown in Figure 1, the displaying process flow that a Web UI is directed to user is described, it is specific as follows shown:
S400:The step be cause a page rendering trigger action, can be a Web site or the page for the first time Request can also be redirecting between the different pages or the partially or fully refreshing of current page.
S401:In two steps, the first step is one DOM of structure in corresponding dom tree shape structure to the primary operational of the step Node, as basic node(It is equivalent to the upper essential element support container of current Web UI or frame);Second step is then logical Cross change the DOM node display properties the base node is set to it is hiding.
Base node is set as hiding, method includes two kinds, the first is the style attributes directly in the node elements Middle addition " display:None " fields;Second is the class for being added a CSS to the node elements, on condition that the class Defined in " display:The pattern of none ".
S402:Continue to draw its child node inside base node, which represents another on current Web UI Effective element or validity event mechanism, to be continuously generated different page constituents.
Child node described here can be diversified forms, such as can be a common DIV display elements, INPUT Input frame can also be a pictures(The multiple formats such as JPG, PNG, BIF), one section of video or audio, one section of logical process Script(Such as JavaScript), can be with the response data of various formats(Such as JSON, XML), these can be child node, can To form a DOM base node.Since base node is set to hiding, therefore its internal all child node is also in hiding shape State.
S403:The step mainly judges the element combinations currently built(Including just starting the base node of structure and follow-up The child node constantly added)Whether a scheduled effective status is constituted, if into S404;Otherwise return back to step 402 after Continue in drawing remaining child node in the base node.
Here effective status is depending on specific application environment, in different occasion effective status phases not to the utmost Together.Such as in calendar application, only when " date display elements " in calendar and " the event interaction figure with user's intercorrelation Mark " all structures finish just has reached an effective status at last, because the target of calendar application is exactly to allow user can autonomous control It is had little significance in fact with option date and time if presenting it to user being constructed without the in the case of of finishing.
Usually, there are many information that the determination of effective status can refer to, function, the current Web applied such as current Web Using or historical information, relevant user information, user setting or the user preferences of similar Web applications, system setting etc. all It can be as the predetermined effective status for determining a Rendering operations with reference to value.
S404:Once the element combinations in S403 reach predetermined effective status, then the attribute of base node is set to visible.
It is set to hiding process correspondingly with by base node, it includes two kinds that base node, which is set to visible mode also,: First is by " the display in base node pattern style:None " fields are removed;Another kind is will be in basic pattern Including the CSS class to hide Styles are removed.
It should be noted that base node, which is set to, to be seen below, internal all child nodes will also become visible state.
S405:Web browser batch calculates the base node in visible state and its child node of inside, is rendered It is shown to user.So just complete it is primary effective render, and reduce return time to a certain extent, alleviate the page and add Carry delay situation.
Fig. 3 is that the schematic diagram of display is hidden or rendered to the batch proposed by the present invention for the load of Web five application pages.
When Web browser navigates to a webpage, it can send a page access request, clothes to corresponding server Business device can then return to a http response for including the base reference page, and browser is then according to this response page(Such as HTML page Face)It is parsed, generates corresponding document object model dom tree 200, hiding base node is drawn in dom tree shape structure 201, which is invisible, then continues to draw child node 202 inside the base node 201, in this process Middle browser constantly judges whether the element combinations of the base node 201 and its internal child node 202 constitute and preset have Effect state, as shown in figure 3, the element combinations of the child node 202 internal with it of base node 201 not yet constitute and make a reservation for effective shape State, therefore continue at and draw child node 203 inside base node 201 again, which is also hidden state;At this point, browsing Device judges that the element combinations of the base node 201 child node 202,203 internal with it have constituted scheduled effective shape State, then browser the base node 201 is set to as it can be seen that simultaneously its internal child node 202,203 be also as it can be seen that finally by Browser batch calculates the base node 201 in visible state and its child node 202,203 of inside, by aforementioned nodes element Sexploitation of combination is shown as A, B and C, to be presented to user.
It can be seen that compared to the mode that existing increment shown in FIG. 1 renders, the method for the present invention can substantially reduce the page Reflux course when load improves the loading performance of Web page, promotes the performance of user experience.
The foregoing is only a preferred embodiment of the present invention, when cannot limit the scope of the present invention with this;Therefore It is all according to simple equivalent changes and modifications made by claims of the present invention and description, all should still belong to patent of the present invention In the range of covering.

Claims (8)

1. a kind of Web five application pages render optimization method, it is characterised in that:This method is by first building a hiding DOM Node elements, while in hiding at least one child node of node elements internal drawing, until the DOM node element and its interior Element combinations that the child node in portion is formed constitute a scheduled effective status, just by browser to the DOM node element and Internal child node carries out batch calculating and rendering, display to User Page;The method specifically includes step:
Step 1:A hiding node elements are built in a dom tree shape structure, the node elements are as basic node;
Step 2:Continue to add one or more child nodes inside the base node;
Step 3:Judge that the element of all child nodes by the base node and its inside forms, if composition one is scheduled to be had Otherwise effect state jumps to step 2 and continues to add other nodes, the scheduled effective status refers to if so then execute step 4 Whether the combination of base node and its child node reaches a preset standard;
Step 4:Base node is set to visible state;
Step 5:Web browser batch calculates the base node in visible state and its child node of inside, by each node member A plain sexploitation is shown to user.
2. a kind of Web five application pages as described in claim 1 render optimization method, which is characterized in that step 1 includes two again Step:
Step 1.1:A node elements are drawn in the corresponding dom tree shape structures of Web UI;
Step 1.2:The node is hidden by the display properties by changing the node elements, prevents it from by browser exhibition Show.
3. a kind of Web five application pages as claimed in claim 2 render optimization method, which is characterized in that in step 1.2:It will It includes the addition " display directly in the style attributes of the node elements that node, which is set as hiding method,:None " fields are given The node elements add the class of a CSS, defined " display in the class:The pattern of none ".
4. a kind of Web five application pages as described in claim 1 render optimization method, which is characterized in that the drawing basics Node and its child node are the processes that html page parsing is carried out according to a part of current Web UI.
5. a kind of Web five application pages as described in claim 1 render optimization method, which is characterized in that in step 3, set in advance Fixed standard is the function of being applied according to current Web, the historical information that current Web is applied, similar Web is applied, relevant user At least one conduct in information, user setting, user preferences and system setting is determined with reference to value.
6. a kind of Web five application pages as described in claim 1 render optimization method, which is characterized in that by base section in step 4 Point is set as visible state, is realized by changing the hiding attribute in the base node Show Styles.
7. a kind of Web five application pages as claimed in claim 6 render optimization method, which is characterized in that described modification basis Hiding attribute in node Show Styles includes two methods:First is by " the display in base node pattern style: None " fields are removed;Another kind is will to be removed comprising the CSS class to hide Styles in basic pattern.
8. a kind of Web five application pages render optimization method as described in claim 1, which is characterized in that the step(1)It is to cause The trigger action of page rendering, the trigger action are the requests for the first time of a Web site or the page, or the different pages Between redirect or the partially or fully refreshing of current page.
CN201410106314.XA 2014-03-20 2014-03-20 A kind of Web five application pages rendering optimization method Active CN104933078B (en)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201410106314.XA CN104933078B (en) 2014-03-20 2014-03-20 A kind of Web five application pages rendering optimization method

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201410106314.XA CN104933078B (en) 2014-03-20 2014-03-20 A kind of Web five application pages rendering optimization method

Publications (2)

Publication Number Publication Date
CN104933078A CN104933078A (en) 2015-09-23
CN104933078B true CN104933078B (en) 2018-08-21

Family

ID=54120246

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201410106314.XA Active CN104933078B (en) 2014-03-20 2014-03-20 A kind of Web five application pages rendering optimization method

Country Status (1)

Country Link
CN (1) CN104933078B (en)

Families Citing this family (15)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN105740407A (en) * 2016-01-28 2016-07-06 深圳市佳创视讯技术股份有限公司 Tree structure generation method and system
CN107229665B (en) * 2016-03-25 2021-04-13 阿里巴巴集团控股有限公司 Page skipping method and device
CN107025111A (en) * 2017-03-17 2017-08-08 烽火通信科技股份有限公司 The method and system that a kind of browser target pages entire screen switch is shown
CN107665134A (en) * 2017-09-29 2018-02-06 北京金山安全软件有限公司 Page component loading method, device, medium and terminal equipment
CN109299158A (en) * 2018-10-12 2019-02-01 成都北科维拓科技有限公司 A kind of data visualization method and system
CN111258877B (en) * 2018-11-30 2023-05-02 阿里巴巴集团控股有限公司 Method and device for detecting visible time of first screen page and electronic equipment
CN109753333B (en) * 2019-01-11 2022-07-08 广州视源电子科技股份有限公司 Interface layout method, device, equipment and medium
CN110442815B (en) * 2019-06-24 2022-04-01 北京奇艺世纪科技有限公司 Page generation method, system, device and computer readable storage medium
CN110689600A (en) * 2019-09-16 2020-01-14 贝壳技术有限公司 Rendering method and device of tree component, readable storage medium and electronic equipment
CN112540745A (en) * 2019-09-20 2021-03-23 北京国双科技有限公司 Component rendering method and device
CN111061633B (en) * 2019-12-05 2024-04-30 北京达佳互联信息技术有限公司 Webpage first screen time detection method, device, terminal and medium
CN111143734A (en) * 2019-12-27 2020-05-12 苏宁云计算有限公司 Method and system for adding effect elements to page
CN111353113B (en) * 2020-02-28 2022-06-03 江苏方天电力技术有限公司 Visual rendering method suitable for high-frequency state data of unmanned aerial vehicle
CN111651700B (en) * 2020-06-05 2024-01-09 腾讯科技(深圳)有限公司 Message display method and device, electronic equipment and storage medium
CN112989241A (en) * 2021-03-23 2021-06-18 浪潮云信息技术股份公司 Display optimization method and system based on Web front-end website

Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN101021847A (en) * 2006-02-15 2007-08-22 中国科学院声学研究所 Method for optimizing embedded browser page display effect
CN101609471A (en) * 2009-07-24 2009-12-23 中兴通讯股份有限公司 A kind of embedded web page analytic method and use the web browser and the terminal device of this method
CN102663056A (en) * 2012-03-29 2012-09-12 奇智软件(北京)有限公司 Method and device for displaying picture elements
CN102915375A (en) * 2012-11-08 2013-02-06 山东大学 Webpage loading method based on layout zoning
CN103399866A (en) * 2013-07-05 2013-11-20 北京小米科技有限责任公司 Webpage rendering method, device and equipment

Family Cites Families (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US8683352B2 (en) * 2006-09-05 2014-03-25 International Business Machines Corporation Selectable flattening hierarchical file browser

Patent Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN101021847A (en) * 2006-02-15 2007-08-22 中国科学院声学研究所 Method for optimizing embedded browser page display effect
CN101609471A (en) * 2009-07-24 2009-12-23 中兴通讯股份有限公司 A kind of embedded web page analytic method and use the web browser and the terminal device of this method
CN102663056A (en) * 2012-03-29 2012-09-12 奇智软件(北京)有限公司 Method and device for displaying picture elements
CN102915375A (en) * 2012-11-08 2013-02-06 山东大学 Webpage loading method based on layout zoning
CN103399866A (en) * 2013-07-05 2013-11-20 北京小米科技有限责任公司 Webpage rendering method, device and equipment

Also Published As

Publication number Publication date
CN104933078A (en) 2015-09-23

Similar Documents

Publication Publication Date Title
CN104933078B (en) A kind of Web five application pages rendering optimization method
US20190251143A1 (en) Web page rendering method and related device
JP6051337B2 (en) Client-side page processing
US10911554B2 (en) Method and system for tracking web link usage
JP5335083B2 (en) New tab page and bookmark toolbar in browser
CN108038134B (en) Page display method and device, storage medium and electronic equipment
US9497248B2 (en) System for enabling rich network applications
WO2019072201A1 (en) Webpage content extraction method and terminal device
JP5484645B1 (en) Server, terminal, service method, and program
US10055386B2 (en) Using server side font preparation to achieve WYSIWYG and cross platform fidelity on web based word processor
WO2013061325A1 (en) Calling scripts based tutorials
US8707177B1 (en) Resource guide generator for resource pages
US10417317B2 (en) Web page profiler
CN111444696A (en) Report display and editing method and device
JP2017111822A (en) Device, method and computer program for displaying web pages
US20170031876A1 (en) Web Page Generation System
CN114254222A (en) Method and device for counting interactive time of single-page application and electronic equipment
US9003365B1 (en) Rapid presentations of versions
CN105573579A (en) Search bar operation method and terminal
WO2016056054A1 (en) Program for displaying webpage, terminal device, and server device
KR102575504B1 (en) Entity recognition for enhanced document productivity
JP6524306B2 (en) WEB PAGE PROVIDING SYSTEM, WEB PAGE PROVIDING METHOD, PROGRAM, COMMUNICATION DEVICE, AND WEB PAGE DISPLAY METHOD
JP4860415B2 (en) Web service test apparatus, web service test method, and program
Sasikala et al. Automating Guide selection process of the Department through Web Application
JP5391221B2 (en) Web page display control device and operation method thereof

Legal Events

Date Code Title Description
C06 Publication
PB01 Publication
C10 Entry into substantive examination
SE01 Entry into force of request for substantive examination
GR01 Patent grant
GR01 Patent grant