CN110309451A - A kind of web preloads the generation method and device of the page - Google Patents
A kind of web preloads the generation method and device of the page Download PDFInfo
- Publication number
- CN110309451A CN110309451A CN201810175111.4A CN201810175111A CN110309451A CN 110309451 A CN110309451 A CN 110309451A CN 201810175111 A CN201810175111 A CN 201810175111A CN 110309451 A CN110309451 A CN 110309451A
- Authority
- CN
- China
- Prior art keywords
- page
- web page
- preloading
- web
- type
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Granted
Links
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/957—Browsing optimisation, e.g. caching or content distillation
- G06F16/9574—Browsing optimisation, e.g. caching or content distillation of access to content, e.g. by caching
Abstract
This application discloses generation methods and device that a kind of web preloads the page, and according to this method, server obtains pre-generated web page；It include N number of element in the web page, N is greater than 0；The server generates the preloading page of the web page according to the web page；The preloading page includes M element, and M is greater than 0 and is less than or equal to N；An element in the preloading page in each element and web page mirror image element each other, the position of the two of mirror image element element is identical with size each other；The preloading page is packed into the web page by the server.
Description
Technical field
This application involves network communication fields, and in particular to a kind of web preloads the generation method and device of the page.
Background technique
An important indicator is page response speed in network performance, and user is in loading page, if occurred for a long time
White screen will lead to user and think that webpage performance is bad, very big influence is caused to user experience.
Currently, some browsers may be in the page before preceding retain is completed in load solving to occur in the phenomenon that white screen
Face, so that user does not have to feel the refresh page directly obtained directly facing white screen.But this scheme the problem of causing
It is to be likely to result in user to think that the page is clicked without response, will also result in bad user experience.
Therefore, in view of the above-mentioned problems, needing a kind of web page at present, in the premise for not needing promotion hardware device, shorten
The white screen time improves experience of the user to page response speed.
Summary of the invention
The embodiment of the present application provides the generation method and device of a kind of web page, to solve web in the prior art
The poor problem of user experience in the generation method of the page.
The embodiment of the present application provides a kind of generation method of web preloading page, comprising:
Server obtains pre-generated web page；It include N number of element in the web page, N is greater than 0；
The server generates the preloading page of the web page according to the web page；The preloading page
Including M element, M is greater than 0 and is less than or equal to N；One in the preloading page in each element and the web page
Element mirror image element each other, the position of the two of mirror image element element is identical with size each other；
The preloading page is packed into the web page by the server.
A kind of possible implementation, the server generate the preloading of the web page according to the web page
The page, comprising:
The server obtains the element in the web page, and classifies to the element in the web page；
For the element of each type, the CSS style of the element of the type is revised as the preloading by the server
The pattern of the element of middle the type of the page, and using described modified dvielement as the mirror image element of the dvielement；
The server by the modified web page, it is described preload N-M element not shown in the page with
And the CSS style of the element is deleted.
A kind of possible implementation, the element for each type, the server is by the element of the type
CSS style is revised as the pattern of the element of described middle the type for preloading the page, and described modified dvielement is made
For the mirror image element of the dvielement, comprising:
If it is determined that element in the web page is the element of picture type, then corresponding institute in the preloading page
It is transparent for stating the pattern of the mirror image element of picture type, or is the background color of the mirror image element；
If it is determined that element in the web page is the element of text type, then corresponding institute in the preloading page
The color for stating the mirror image element of text type is background color；
If it is determined that element in the web page is the element of type of interaction, then corresponding institute in the preloading page
The color for stating the mirror image element of type of interaction is background color, and does not include the described of the web page in the mirror image element
The text element of the inside in the element of switch type.
A kind of possible implementation, the server is by the modified web page, as the preloading page
Before, further includes:
The modified web page is sent to the terminal by the server；
If the server receives the terminal and returns to the response shy with strangers at the preloading page really, described
The preloading page is generated in server.
The embodiment of the present application provides a kind of display methods of web preloading page, which comprises
The request of terminal to server transmission web page；
The terminal receives the html file for the web page that the server generates；The html file includes institute
State the preloading page of web page and the web page；
The terminal renders the preloading page of the web page according to the html file of the web page in advance,
The preloading page is shown into the display interface in the terminal；
The web page of loaded is shown the display interface in the terminal by the terminal.
The embodiment of the present application provides a kind of generating means of web preloading page, comprising:
Module is obtained, for obtaining pre-generated web page；It include N number of element in the web page, N is greater than 0；
Processing module, for generating the preloading page of the web page according to the web page；The preloading page
Face includes M element, and M is greater than 0 and is less than or equal to N；Each element and one in the web page in the preloading page
A element mirror image element each other, the position of the two of mirror image element element is identical with size each other；The preloading page is beaten
Packet is into the web page.
A kind of possible implementation, the processing module are specifically used for:
The element in the web page is obtained, and is classified to the element in the web page；For each type
Element, the server by the CSS style of the element of the type be revised as it is described preload the page middle the type element
Pattern, and using described modified dvielement as the mirror image element of the dvielement；By the modified web page
In, the CSS style for preloading the N-M element and the element that do not show in the page is deleted.
A kind of possible implementation, the processing module are specifically used for:
If it is determined that element in the web page is the element of picture type, then corresponding institute in the preloading page
It is transparent for stating the pattern of the mirror image element of picture type, or is the background color of the mirror image element；If it is determined that the Web page
Element in face is the element of text type, then the face for preloading the mirror image element of the corresponding text type in the page
Color is background color；If it is determined that the element in the web page is the element of type of interaction, then it is corresponding in the preloading page
The color of mirror image element of the type of interaction be background color, and do not include the web page in the mirror image element
The text element of the inside in the element of the switch type.
A kind of possible implementation, the processing module are also used to:
The modified web page is sent to the terminal；If it is really shy with strangers at institute to receive the terminal return
The response for preloading the page is stated, then generates the preloading page in the server.
The embodiment of the present application provides a kind of display device of web preloading page, comprising:
Transceiver module, for sending the request of web page to server；Receive the Web page that the server generates
The html file in face；The html file includes the preloading page of the web page and the web page；
Processing module, it is for the html file according to the web page, the preloading page of the web page is preparatory
Rendering, shows the display interface in the terminal for the preloading page；The web page of loaded is shown in institute
State the display interface of terminal.
According to the technical solution of the embodiment of the present application, server obtains pre-generated web page；In the web page
Including N number of element；The server generates the preloading page of the web page according to the web page；The preloading
The page includes M element, and M is greater than 0 and is less than or equal to N；In the preloading page in each element and the web page
One element mirror image element each other, the position of the two of mirror image element element is identical with size each other；The server will be described
The page is preloaded to be packed into the web page.It can be improved the accuracy rate of web, so as to solve use in the prior art
Family can not perceive page loading procedure directly facing white screen, lead to the problem that user experience is poor.
Detailed description of the invention
Fig. 1 is the schematic diagram of web blank page provided by the embodiments of the present application；
Fig. 2 is the work flow diagram for the generation method that web provided by the embodiments of the present application preloads the page；
Fig. 3 is that web provided by the embodiments of the present application preloads page schematic diagram；
Fig. 4 is the structural schematic diagram for the generating means that web provided by the embodiments of the present application preloads the page；
Fig. 5 is the structural schematic diagram for the generating means that web provided by the embodiments of the present application preloads the page.
Specific embodiment
Web is an extremely diversified platform.From static blog, electric business website is arrived, then arrives the generative power of desktop grade
Software, all of which are the first citizens of this big family of Web.As Internet technology continues to develop, more and more people are carried out
It orders on the net, communication in time, the nearby social lives such as search.And webpage loading velocity is promoted, webpage is fast and accurately presented
Become main demand in front of the user.The speed of initial screen time and page switching is the important indicator of webpage performance, therefore,
The key point that the reduction page rendering time optimizes at webpage performance.
The mode of web application is organized, also the same only meeting is more and more: multipage, single page, Universal JavaScript are answered
With, WebGL and Web Assembly etc..For one preferable PWA of experience of building, mainstream way is all to use at present
SPA, i.e. single-page application model (Single-page App) carry out the entire web application of tissue, for example, Twitter Lite,
Flipkart Lite, Housing Go and Polymer Shop.And multi-page application model (MPA, Multi-page App) institute
The energy many benefits of bring, for example, being isolated between the page and the page and decoupling, this regards us by each page
One independent " micro services " is treated, these services can separately provide embedding to various third-party entrances by independent iteration
Enter, or even by different team's independent maintenances.And entire website is then the set of various services.
With the development of front-end technology, various web frames come into being.Such as React, Vue and Angular etc..
In multipage application, resource required for each routing natively can only request this to route.Multipage application is simultaneously
Without using the routing based on JavaScript, but HTML jumps mechanism, that is, the switching routed is that primary browser document is jumped
Turn (Navigating across documents), it means that the page before can be dropped completely and browser needs are
The page of next routing re-executes all starting steps: re-downloading resource, parses HTML again, reruns
JavaScript, again decoding picture, again layout page repaint etc., even if many steps therein are originally can be with
It is multiplexed between multiple routings.These work will generate huge computing cost, also therefore need to pay the more time at
This.
In practical applications, when applying the switching in page and page, content of pages is driven by JS code, in JS generation
Before code does not load compiling completion, the page that user sees will be blank out.As shown in Figure 1, the page 1 is the page before jumping,
The blank page that 2 users of the page see, the page 3 load compiling after the completion of jump after the page.And it is existing very bright
Aobvious white screen gap can control at 1 second or so, and user still will be considered that this is excessively slow for " just handing off a label ",
Since PWA is full frame operation, white screen to brought by user experience negative effect even than in the past in browser more
Greatly.
That is, only after JS code analysis is completed, and rear end gets data, it could be final on user equipment
Complete, the available page must be presented.Before rendering (First Paint) occurs for the first time, a large amount of time is all consumed
In the operation of JavaScript, it is obstruction that this, which leads to nearly all script all,.In this period, mainly consumption is including frame
When frame is run, component, in the operation of dependences such as library and when Service Component instantiates in the starting and rendering of frame.
In order to eliminate the white screen time, the embodiment of the present application provides a kind of preloading page, the load of Lai Shixian moment with
Occupy-place.When users use it can be seen that having some occupy-place pictures out before actual content loads because its structure and
Actual loaded content is similar, therefore the page for allowing user to perceive oneself is loading, and experience is preferable.Even hardware very
In weak equipment, the preloading page of target routing can also be rendered, at once after clicking switch labels to guarantee that UI is steady
It is fixed, continuous, have response so that user feels that the page seems load faster, user is avoided to see white screen or simple repeat
Loading picture, reduce user experience.
To save HTTP round-trip, browser resolves document or the time of script execution, first loaded when realizing loading page
The preloading page out needs to request some be hidden in using dependence (Dependency Graph) higher depth in advance
Resource.For example, the SPA of code division is carried out based on routing for one, if we can be in webpack inventory, routing etc.
Entry code (entry chunks) be downloaded with before operation just initial URL, i.e., the entrance URL routing institute of user's access according to
Bad code push loads in advance, then when these resources are really requested, they may download and exist slow
It deposits and suffers, thus accelerate the loading velocity initially routed.
In order to which the preloading page can be cached by Service Worker, moment load and independently of
JavaScript rendering, it would be desirable to together html tag, CSS style and picture resource for forming the preloading page etc.
It is inserted into the html file of the corresponding web page of each routing.
In the prior art, the generating process for preloading the web page of the page and business development is coupled.If
It counts teacher and goes out to design original text, front end engineer realizes the WEB page that can be interacted according to interaction design original text, while utilizing in business item
Some frameworks and frame type selecting.The preloading page is developed according to the size of each element, position in design original text.By what is developed
The preloading page is embedded into the positioning of html document by webpack tool and sets, will first in this way after starting the page
The preloading page for seeing exploitation, is waited after getting Back end data, is rendered the true page and is replaced the preloading of pre-rendered
The page.
In whole flow process, preloads the page and need front end engineer by developing manually, often demand shift or page
Face pattern is adjusted, and the preloading page before just can not reuse, it is necessary to develop the new preloading page again.It is existing
Some preloading page developments greatly depend on artificial exploitation, and in the project of an iteratively faster, style sheet and design become
Change frequently, front end engineer is in exploitation during developing original project, it is also necessary to the preloading page is developed again, because
This increases the expense of human resource development.In the project of an iteratively faster, the exploitation for preloading the page greatly increases
The development cost of project.In addition, resulting in the preloading page due to publication or online pressure and web page can
The case where cannot corresponding can be will appear, that is, WEB page has been new design and layout, and the pre-add of pre-rendered
Carry the page or before pattern and layout, preload the page can not be corresponded with updated WEB page, user experience compared with
Difference.
The embodiment of the present application provides a kind of flow diagram of the generation method of web preloading page, as shown in Figure 1, institute
The method of stating includes:
Step 201: server obtains pre-generated web page；It include N number of element in the web page, N is greater than 0；
Step 202: the server generates the preloading page of the web page according to the web page；It is described pre-
Loading page includes M element, and M is greater than 0 and is less than or equal to N；Each element and the web page in the preloading page
In element mirror image element each other, the position of the two of mirror image element element is identical with size each other；
Step 203: the preloading page is packed into the web page by the server.
The WEB page preloaded in the page and business had identical size and page layout originally, and difference is only
In the presentation mode of text and picture.Therefore the exploitation for preloading the page can be completed completely by automation tools,
During business development, the corresponding preloading page of WEB page is automatically generated by tool.It in this way will be great
Reduce the development time of entire project, reduce human cost, promotes development efficiency.The preloading page and WEB page simultaneously
Model code often has common part, can be multiplexed completely, avoid overlapping development.
In step 201, the pre-generated web page can include HTML, CSS, JS etc. for HTML5 standard
The webpage of file type, or the web page that other html standards generate, it is not limited here.
The server can be the generation server for preloading the page, or generate the preloading page
Server end program, or the server in conjunction with other servers, it is not limited here.
In step 202, described to preload the file that page file be html format；Or with web project, it is compatible
Two kinds of formats of js and vue file, to adapt to dependence of its web page to DOM/BOM.In the specific implementation process, described
The general outline that the page can be the WEB page is preloaded, does not include specific text and picture, different ashes can be passed through
Color shade indicates text or picture.
In a kind of specific implementation process, it may comprise steps of:
Step 1: the server and the client of the user are built by being inserted into client code in web page
Vertical communication connection.
Step 2: packetization module starts the web page.
It is requested Step 3: user is sent by the client to the server, request generates the preloading page.
Step 4: start developer's mode of the web page after the server receives the request of the client,
For extracting the element in the web page.
In the specific implementation process, developer's mode of the web page can (a open source be grasped by puppeteer
Make the library of Chrome headless) Chrome headless browser is opened, by described in Chrome headless opening
Developer's mode of WEB page.
In step 202, a kind of possible implementation, the server generate the web according to the web page
The preloading page of the page, comprising:
Step 1: the server obtains the element in the web page, and the element in the web page is carried out
Classification；
Step 2: being directed to the element of each type, the CSS style of the element of the type is revised as described by the server
The pattern of the element of middle the type of the page is preloaded, and using described modified dvielement as the mirror element of the dvielement
Element；
Step 3: the N-M that the server in the modified web page, will not be shown in the preloading page
The CSS style of a element and the element is deleted.
In step 1, a kind of possible implementation, comprising: traversal all elements node is divided node element
Class is divided into text node, picture node, button node, SVG node, list node, background picture node etc..
In step 2, on the basis of the classification, classifies to every dvielement and carry out pattern update, generate the pre-add
Pattern needed for carrying the page.
A kind of possible implementation, by the pattern update mode of CSS, i.e., as far as possible in the original web page of not additions and deletions
Element does not delete the pattern of the web page, and is covered on existing pattern.In conjunction with Fig. 1, the preloading page can
Think the page 302 shown in Fig. 3.
A kind of possible implementation, the element for each type, the server is by the element of the type
CSS style is revised as the pattern of the element of described middle the type for preloading the page, and described modified dvielement is made
For the mirror image element of the dvielement, comprising:
If it is determined that element in the web page is the element of picture type, then corresponding institute in the preloading page
It is transparent for stating the pattern of the mirror image element of picture type, or is the background color of the mirror image element；
During generating the preloading page, img element, the element that background is picture, svg element can be made
For picture element.
The src of picture can be arranged to the transparent picture of 0 pixel *, 0 pixel by a kind of possible implementation, be moved
State reads dimension of picture, and dimension of picture is arranged by inline style, and setting picture background is needed for the preloading page
Color.
The pattern setting of the picture element may include color, shape, the fields such as reversed shape.Color and shape is used
In the color and shape for determining picture block in the preloading page, color value supports 16 systems and RGB etc., and shape may include
Enumerated value, circle (rectangle) and rect (circle) etc..Reversed shape field may include an array, each element in array
Including a DOM selector, for selecting DOM element, by selection DOM shape by with the shape of configuration on the contrary, for example, configuration
Be rect so, the picture block in reversed shape will be shown as circle shape (circle) in the preloading page.
If it is determined that element in the web page is the element of text type, then corresponding institute in the preloading page
The color for stating the mirror image element of text type is background color；
Specifically, background color can be set by text color, belonged to according to CSS such as line-height, font-size
Property by striped background be arranged text node the preloading style sheet.
In a kind of possible embodiment, if element only one text node, the text solution can be pronounced
For child node, the element can be considered as text element.It, can be by all texts in order to which the preloading page is more beautiful
A node element is all wrapped up outside node, for example, one span label of package.The configuration object can configure a color word
Section, for determining the color for preloading page text elements, color value can support 16 systems, RGB etc..
If it is determined that element in the web page is the element of type of interaction, then corresponding institute in the preloading page
The color for stating the mirror image element of type of interaction is background color, and does not include the described of the web page in the mirror image element
The text element of the inside in the element of switch type.
Button element, SVG element, list element, type of button the type of interaction such as input element element, can be by this
For a little elements as interactive elements, the text inside interactive elements no longer can individually be shown as text element, interactive elements it is whole
A background colour can be the color of configuration.
The configuration may include two fields, color and exclusion field.Color is used to determine quilt in the preloading page
It is considered as the color of interactive elements, excluding field may include an array, and element is DOM selector in array, for selecting member
Element, the element in the array will not be considered as interactive elements.
Transparent or rectangle, round color lump can be set into all elements with pseudo- element, and can ignore Background
The css pattern of piece.The configuration may include two fields, color and shape.Color is used to determine quilt in the preloading page
It is considered as the color of pseudo- element, it may include enumerated value: circle and rect etc. that shape, which is used to be arranged the shape of pseudo- element,.
In step 2, further, the preloading page can be optimized, including but not limited to html, css
Compression is obscured, useless style sheet is rejected etc., so that the adaptability for preloading the page is higher, scalability is stronger.
Specifically, may include:
The server can compress the shell.html file of generation, and be compressed on demand；
If it is determined that the element can be excluded by CSS selector there are the element for not needing progress pattern update；
If it is determined that the element does not need to remove, and only need to hide, it can be by the way that the transparent of the element pattern be arranged
Degree is 0, to hide the element, the CSS selector including hiding element；
If it is determined that the inner element in the element does not need to delete, the element can be set to being processed into a color
Block, the solid colour of the color of color lump and the element.The elements such as internal text will no longer do specially treated, and text will be hidden
Hiding；
If it is determined that the element needs to delete, and needs to remove from DOM, addition in the element can be removed into element
CSS selector.
In step 3, the request can also include that request generates the preview page and operation for preloading the page
The page.
A kind of possible implementation, the server is by the modified web page, as the preloading page
Before, further includes:
Step 1: the modified web page is sent to the terminal by the server；
Step 2: if the server receives, the terminal return is really shy with strangers to disappear at the response for preloading the page
Breath, then generate the preloading page in the server.
In step 1, the generated preloading page can be saved in memory by the server, and be sent
Onto the terminal, the user can check the preloading page of generation.
In the specific implementation process, the user can the terminal exploitation the page in interactive interface in, carry out institute
The preview for preloading the page is stated, after the server sends the preloading page, preview page can be opened by browser
Face, the preview page can also carry out preview by mobile terminal, for example, by the two dimensional code in scanning preview page,
The page is preloaded described in mobile phone terminal preview.As shown in Figure 2.
Further, user can carry out the preloading page by editing machine according to the preview page
Adaptation, preferably to match the web page.
In step 2, if it is determined that the preview page meet demand, then return to confirmation response message；The server connects
After receiving the confirmation response message, the preloading page is generated.
Specifically, sending confirmation after the user confirms the preloading page meet demand and generating the preloading page
The response message in face；The server can generate corresponding file under the formulation catalogue for preloading the page.
In step 203, the preloading page is rendered in building using server, by the preloading page
DOM and pattern are inserted into the web page of final output.
A kind of possible implementation adds corresponding annotation, in this way beating in step 203 inside the root element of starting
During packet, the content for preloading the page can be inserted into correct position, to realize pre-rendered, i.e., in starting web
When the page, the preloading page is seen first.
The packing can realize that the packetization module can be Webpack, a kind of JavaScript by packetization module
The module packing device (module bundler) of application program.When packetization module handles application program, it can recursively be constructed
One dependence graph (dependency graph), wherein comprising application program need each module, then by it is all this
A little modules are packaged into one or more packets.The packetization module can also include the plug-in unit for enhancing the function of packetization module,
For example compress, obscure function etc..
The work such as packetization module is compiled in building process, filename Hash, it is slow that packetization module can collect needs
The dependence deposited generates new script file in each building into a pre-cache list, and using the pre-cache list.
When new script is activated, the resource in the pre-cache list will be requested and cache.
In step 203, application is repacked by webpack, after page restarting, it will be able to get number
According to the preloading page for preceding seeing application.
A kind of possible implementation, can be packaged by webpack, by the corresponding text of the preloading page of generation
Part is bundled in corresponding web page, comprising the following steps:
Step 1: the server notifies the packetization module that the preloading page file is bundled to the Web page of output
In the file in face.
Step 2: described in the packetization module according to described instruction, finds from the corresponding catalogue of the preloading page
The file of the page is preloaded, reads master's file content, and be stored in memory.
Step 3: the File content for preloading the page is inserted into the web page pair by the packetization module
In the file answered.
In the specific implementation process, if the preloading page be html file, can be packaged by webpack described in
The page is preloaded, if described preload the file that the page is js or vue format, the corresponding web of the web page can be passed through
Pre-rendered module in project is packaged the preloading page.
It should be noted that there is label not indicate that these labels can be drawn on screen at once in html file,
Need to optimize the crucial renderer path of the page.A kind of possible mode is the bottom that script label is placed on to body, with
Guarantee content can be drawn before script execution, this method can be used for render imperfect dom tree browser (such as
The common streaming rendering of desktop browsers).For the browser of mobile terminal, the factors such as especially slower hardware, electric quantity consumption,
Need to optimize the renderer path for preloading the page.If we are not before browser completes upper primary drafting work also
So too fast that have carried out DOM operation, browser have to just abandon all pixels completed, and to wait always until DOM operate
Caused all working can just be re-started after terminating and be rendered next time.And such case is easier possessing slower CPU/
Occur in the mobile device of GPU.
As shown in figure 3, the embodiment of the present application provides a kind of display methods of web preloading page, which comprises
Step 301: the request of terminal to server transmission web page；
Step 302: the terminal receives the html file for the web page that the server generates；The html text
Part includes the preloading page of the web page and the web page；
Step 303: the terminal is pre- by the preloading page of the web page according to the html file of the web page
It first renders, the preloading page is shown into the display interface in the terminal；
Step 304: the web page of loaded is shown the display interface in the terminal by the terminal.
In the specific implementation process, when user clicks website for the first time, what is presented first is preprepared described pre-
Then loading page loads, compiles JS, sends request page data to the back-end, then true handed over by what is rendered
The mutual page removes the preloading page before replacement.
As shown in figure 4, the embodiment of the present application provides a kind of generating means of web preloading page, comprising:
Module 401 is obtained, for obtaining pre-generated web page；It include N number of element in the web page, N is greater than
0；
Processing module 402, for generating the preloading page of the web page according to the web page；The pre-add
Carrying the page includes M element, and M is greater than 0 and is less than or equal to N；In the preloading page in each element and the web page
Element mirror image element each other, the position of the two of mirror image element element is identical with size each other；By the preloading page
Face is packed into the web page.
A kind of possible implementation, processing module 402 are specifically used for:
The element in the web page is obtained, and is classified to the element in the web page；For each type
Element, the server by the CSS style of the element of the type be revised as it is described preload the page middle the type element
Pattern, and using described modified dvielement as the mirror image element of the dvielement；By the modified web page
In, the CSS style for preloading the N-M element and the element that do not show in the page is deleted.
A kind of possible implementation, processing module 402 are specifically used for:
If it is determined that element in the web page is the element of picture type, then corresponding institute in the preloading page
It is transparent for stating the pattern of the mirror image element of picture type, or is the background color of the mirror image element；If it is determined that the Web page
Element in face is the element of text type, then the face for preloading the mirror image element of the corresponding text type in the page
Color is background color；If it is determined that the element in the web page is the element of type of interaction, then it is corresponding in the preloading page
The color of mirror image element of the type of interaction be background color, and do not include the web page in the mirror image element
The text element of the inside in the element of the switch type.
A kind of possible implementation, processing module 402 are also used to:
The modified web page is sent to the terminal；If it is really shy with strangers at institute to receive the terminal return
The response for preloading the page is stated, then generates the preloading page in the server.
As shown in figure 5, the embodiment of the present application provides a kind of display device of web preloading page, comprising:
Transceiver module 501, for sending the request of web page to server；Receive the web that the server generates
The html file of the page；The html file includes the preloading page of the web page and the web page；
Processing module 502, it is for the html file according to the web page, the preloading page of the web page is pre-
It first renders, the preloading page is shown into the display interface in the terminal；The web page of loaded is shown
The display interface of the terminal.
In conclusion technical solution of the embodiment of the present application according to the embodiment of the present application, server obtains pre-generated
Web page；It include N number of element in the web page；The server generates the web page according to the web page
Preload the page；The preloading page includes M element, and M is greater than 0 and is less than or equal to N；It is each in the preloading page
An element in element and web page mirror image element each other, each other position of the two of mirror image element element and size
It is identical；The preloading page is packed into the web page by the server.It can be improved the accuracy rate of web, so as to
User in the prior art is enough solved directly facing white screen, page loading procedure can not be perceived, causes user experience is poor to ask
Topic.
The preloading page of the page is automatically generated during exploitation, is then completed before loading JS code described pre-
The rendering of loading page improves first screen rendering efficiency.
Those of ordinary skill in the art will appreciate that all or part of the steps that realization above-described embodiment method carries is can
To instruct relevant hardware to complete by program, the program be can store in a kind of computer readable storage medium,
The program when being executed, includes the steps that one or a combination set of embodiment of the method.
It, can also be in addition, can integrate in a processing module in each functional unit in each embodiment of the application
It is that each unit physically exists alone, can also be integrated in two or more units in a module.Above-mentioned integrated mould
Block both can take the form of hardware realization, can also be realized in the form of software function module.The integrated module is such as
Fruit is realized and when sold or used as an independent product in the form of software function module, also can store in a computer
In read/write memory medium.
It should be understood by those skilled in the art that, embodiments herein can provide as method, system or computer program
Product.Therefore, complete hardware embodiment, complete software embodiment or reality combining software and hardware aspects can be used in the application
Apply the form of example.Moreover, it wherein includes the computer of computer usable program code that the application, which can be used in one or more,
The shape for the computer program product implemented in usable storage medium (including but not limited to magnetic disk storage and optical memory etc.)
Formula.
The application is referring to method, the process of equipment (system) and computer program product according to the embodiment of the present application
Figure and/or block diagram describe.It should be understood that every one stream in flowchart and/or the block diagram can be realized by computer program instructions
The combination of process and/or box in journey and/or box and flowchart and/or the block diagram.It can provide these computer programs
Instruct the processor of general purpose computer, special purpose computer, Embedded Processor or other programmable data processing devices to produce
A raw machine, so that being generated by the instruction that computer or the processor of other programmable data processing devices execute for real
The device for the function of being specified in present one or more flows of the flowchart and/or one or more blocks of the block diagram.
These computer program instructions, which may also be stored in, is able to guide computer or other programmable data processing devices with spy
Determine in the computer-readable memory that mode works, so that it includes referring to that instruction stored in the computer readable memory, which generates,
Enable the manufacture of device, the command device realize in one box of one or more flows of the flowchart and/or block diagram or
The function of being specified in multiple boxes.
These computer program instructions also can be loaded onto a computer or other programmable data processing device, so that counting
Series of operation steps are executed on calculation machine or other programmable devices to generate computer implemented processing, thus in computer or
The instruction executed on other programmable devices is provided for realizing in one or more flows of the flowchart and/or block diagram one
The step of function of being specified in a box or multiple boxes.
Obviously, those skilled in the art can carry out various modification and variations without departing from the essence of the application to the application
Mind and range.In this way, if these modifications and variations of the application belong to the range of the claim of this application and its equivalent technologies
Within, then the application is also intended to include these modifications and variations.
Claims (10)
1. the generation method that a kind of web preloads the page characterized by comprising
Server obtains pre-generated web page；It include N number of element in the web page, N is greater than 0；
The server generates the preloading page of the web page according to the web page；The preloading page includes M
A element, M are greater than 0 and are less than or equal to N；An element in the preloading page in each element and the web page
Mirror image element each other, the position of the two of mirror image element element is identical with size each other；
The preloading page is packed into the web page by the server.
2. the method according to claim 1, wherein the server is according to the web page, described in generation
The preloading page of web page, comprising:
The server obtains the element in the web page, and classifies to the element in the web page；
For the element of each type, the CSS style of the element of the type is revised as the preloading page by the server
Middle the type element pattern, and using described modified dvielement as the mirror image element of the dvielement；
The server is described to preload the N-M element not shown in the page and institute by the modified web page
The CSS style for stating element is deleted.
3. according to the method described in claim 2, it is characterized in that, the element for each type, the server will
The CSS style of the element of the type is revised as the pattern of the element of described middle the type for preloading the page, and by the modification
Mirror image element of the dvielement afterwards as the dvielement, comprising:
If it is determined that element in the web page is the element of picture type, then the corresponding figure in the preloading page
The pattern of the mirror image element of sheet type is transparent, or is the background color of the mirror image element；
If it is determined that element in the web page is the element of text type, then the corresponding text in the preloading page
The color of the mirror image element of this type is background color；
If it is determined that the element in the web page is the element of type of interaction, the then corresponding friendship in the preloading page
The color of the mirror image element of mutual type is background color, and does not include the exchange of the web page in the mirror image element
The text element of the inside in the element of type.
4. according to the method in claim 2 or 3, which is characterized in that the server by the modified web page,
Before the preloading page, further includes:
The modified web page is sent to the terminal by the server；
If the server receives the terminal and returns to the response shy with strangers at the preloading page really, in the service
The preloading page is generated in device.
5. the display methods that a kind of web preloads the page, which is characterized in that the described method includes:
The request of terminal to server transmission web page；
The terminal receives the html file for the web page that the server generates；The html file includes the web
The preloading page of the page and the web page；
The terminal renders the preloading page of the web page according to the html file of the web page in advance, by institute
It states and preloads the display interface that the page is shown in the terminal；
The web page of loaded is shown the display interface in the terminal by the terminal.
6. the generating means that a kind of web preloads the page characterized by comprising
Module is obtained, for obtaining pre-generated web page；It include N number of element in the web page, N is greater than 0；
Processing module, for generating the preloading page of the web page according to the web page；The preloading page packet
M element is included, M is greater than 0 and is less than or equal to N；A member in the preloading page in each element and the web page
Plain mirror image element each other, the position of the two of mirror image element element is identical with size each other；The preloading page is packed into
In the web page.
7. device according to claim 6, which is characterized in that the processing module is specifically used for:
The element in the web page is obtained, and is classified to the element in the web page；For the member of each type
The CSS style of the element of the type is revised as the sample of the element of described middle the type for preloading the page by element, the server
Formula, and using described modified dvielement as the mirror image element of the dvielement；By in the modified web page, institute
State the CSS style deletion for preloading the N-M element and the element that do not show in the page.
8. device according to claim 7, which is characterized in that the processing module is specifically used for:
If it is determined that element in the web page is the element of picture type, then the corresponding figure in the preloading page
The pattern of the mirror image element of sheet type is transparent, or is the background color of the mirror image element；If it is determined that in the web page
Element be text type element, then the color of mirror image element for preloading the corresponding text type in the page be
Background color；If it is determined that element in the web page is the element of type of interaction, then corresponding institute in the preloading page
The color for stating the mirror image element of type of interaction is background color, and does not include the described of the web page in the mirror image element
The text element of the inside in the element of switch type.
9. device according to claim 7 or 8, which is characterized in that the processing module is also used to:
The modified web page is sent to the terminal；If it is really shy with strangers at described pre- to receive the terminal return
The response of loading page then generates the preloading page in the server.
10. the display device that a kind of web preloads the page characterized by comprising
Transceiver module, for sending the request of web page to server；Receive the web page that the server generates
Html file；The html file includes the preloading page of the web page and the web page；
Processing module renders the preloading page of the web page for the html file according to the web page in advance,
The preloading page is shown into the display interface in the terminal；The web page of loaded was shown at the end
The display interface at end.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201810175111.4A CN110309451B (en) | 2018-03-02 | 2018-03-02 | Method and device for generating web preloading page |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201810175111.4A CN110309451B (en) | 2018-03-02 | 2018-03-02 | Method and device for generating web preloading page |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN110309451A true CN110309451A (en) | 2019-10-08 |
| CN110309451B CN110309451B (en) | 2021-07-23 |
Family
ID=68073338
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201810175111.4A Active CN110309451B (en) | 2018-03-02 | 2018-03-02 | Method and device for generating web preloading page |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN110309451B (en) |
Cited By (12)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN111143727A (en) * | 2019-12-06 | 2020-05-12 | 维沃移动通信有限公司 | Page loading method and electronic equipment |
| CN111159603A (en) * | 2019-12-30 | 2020-05-15 | 北大方正集团有限公司 | Method and device for loading page styles |
| CN111241435A (en) * | 2019-12-31 | 2020-06-05 | 五八有限公司 | Method and device for loading picture elements |
| CN111459371A (en) * | 2020-03-31 | 2020-07-28 | 北京奇艺世纪科技有限公司 | View switching method and device, electronic equipment and storage medium |
| CN111506387A (en) * | 2020-03-02 | 2020-08-07 | 百度在线网络技术（北京）有限公司 | Page pre-rendering method and device, electronic equipment and storage medium |
| CN111666585A (en) * | 2020-04-16 | 2020-09-15 | 北京百度网讯科技有限公司 | Method and device for accessing sub-application, electronic equipment and readable storage medium |
| CN111708600A (en) * | 2020-08-20 | 2020-09-25 | 腾讯科技（深圳）有限公司 | Page display method, device, equipment and computer readable storage medium |
| CN112306528A (en) * | 2020-11-04 | 2021-02-02 | 北京焦点新干线信息技术有限公司 | Data updating method and device |
| CN112416458A (en) * | 2020-11-20 | 2021-02-26 | 平安普惠企业管理有限公司 | Preloading method and device based on ReactNative, computer equipment and storage medium |
| CN112632436A (en) * | 2019-10-09 | 2021-04-09 | 腾讯科技（深圳）有限公司 | Webpage display method and device, electronic equipment and storage medium |
| CN114020309A (en) * | 2021-11-02 | 2022-02-08 | 爱集微咨询(厦门)有限公司 | Method, device and storage medium for constructing multi-page application through webpack |
| CN114518912A (en) * | 2022-02-21 | 2022-05-20 | 度小满科技(北京)有限公司 | Page loading method, device and equipment and readable storage medium |
Citations (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20110040777A1 (en) * | 2009-08-13 | 2011-02-17 | Yahoo! Inc. | Method and system for causing a browser to preload web page components |
| CN102866993A (en) * | 2011-07-04 | 2013-01-09 | 联想(北京)有限公司 | Webpage data loading method and electronic equipment |
| CN104361071A (en) * | 2014-11-12 | 2015-02-18 | 沈文策 | Page preloading method and device |
| CN105677327A (en) * | 2015-12-30 | 2016-06-15 | 合一网络技术(北京)有限公司 | Page information preloading method and system |
| CN105701113A (en) * | 2014-11-27 | 2016-06-22 | 国际商业机器公司 | Method and device for optimizing webpage pre-loading |
| CN107153704A (en) * | 2017-05-11 | 2017-09-12 | 腾讯科技（深圳）有限公司 | A kind of page display method and its equipment, storage medium, terminal |
| CN107710171A (en) * | 2015-06-17 | 2018-02-16 | 法斯特利有限公司 | The child resource loading of acceleration |
-
2018
- 2018-03-02 CN CN201810175111.4A patent/CN110309451B/en active Active
Patent Citations (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20110040777A1 (en) * | 2009-08-13 | 2011-02-17 | Yahoo! Inc. | Method and system for causing a browser to preload web page components |
| CN102866993A (en) * | 2011-07-04 | 2013-01-09 | 联想(北京)有限公司 | Webpage data loading method and electronic equipment |
| CN104361071A (en) * | 2014-11-12 | 2015-02-18 | 沈文策 | Page preloading method and device |
| CN105701113A (en) * | 2014-11-27 | 2016-06-22 | 国际商业机器公司 | Method and device for optimizing webpage pre-loading |
| CN107710171A (en) * | 2015-06-17 | 2018-02-16 | 法斯特利有限公司 | The child resource loading of acceleration |
| CN105677327A (en) * | 2015-12-30 | 2016-06-15 | 合一网络技术(北京)有限公司 | Page information preloading method and system |
| CN107153704A (en) * | 2017-05-11 | 2017-09-12 | 腾讯科技（深圳）有限公司 | A kind of page display method and its equipment, storage medium, terminal |
Cited By (22)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN112632436A (en) * | 2019-10-09 | 2021-04-09 | 腾讯科技（深圳）有限公司 | Webpage display method and device, electronic equipment and storage medium |
| CN111143727A (en) * | 2019-12-06 | 2020-05-12 | 维沃移动通信有限公司 | Page loading method and electronic equipment |
| CN111159603A (en) * | 2019-12-30 | 2020-05-15 | 北大方正集团有限公司 | Method and device for loading page styles |
| CN111159603B (en) * | 2019-12-30 | 2023-08-04 | 新方正控股发展有限责任公司 | Page style loading method and page style loading device |
| CN111241435B (en) * | 2019-12-31 | 2024-02-27 | 五八有限公司 | Method and device for loading picture elements |
| CN111241435A (en) * | 2019-12-31 | 2020-06-05 | 五八有限公司 | Method and device for loading picture elements |
| CN111506387A (en) * | 2020-03-02 | 2020-08-07 | 百度在线网络技术（北京）有限公司 | Page pre-rendering method and device, electronic equipment and storage medium |
| US20220308900A1 (en) | 2020-03-02 | 2022-09-29 | Baidu Online Network Technology (Beijing) Co., Ltd. | Method and apparatus of pre-rendering page, electronic device, and storage medium |
| US11829436B2 (en) | 2020-03-02 | 2023-11-28 | Baidu Online Network Technology (Beijing) Co., Ltd. | Method and apparatus of pre-rendering page, electronic device, and storage medium |
| CN111506387B (en) * | 2020-03-02 | 2023-09-22 | 百度在线网络技术（北京）有限公司 | Page prerendering method and device, electronic equipment and storage medium |
| WO2021174928A1 (en) * | 2020-03-02 | 2021-09-10 | 百度在线网络技术（北京）有限公司 | Page pre-rendering method and apparatus, electronic device, and storage medium |
| CN111459371A (en) * | 2020-03-31 | 2020-07-28 | 北京奇艺世纪科技有限公司 | View switching method and device, electronic equipment and storage medium |
| CN111459371B (en) * | 2020-03-31 | 2021-09-28 | 北京奇艺世纪科技有限公司 | View switching method and device, electronic equipment and storage medium |
| CN111666585A (en) * | 2020-04-16 | 2020-09-15 | 北京百度网讯科技有限公司 | Method and device for accessing sub-application, electronic equipment and readable storage medium |
| CN111666585B (en) * | 2020-04-16 | 2023-08-18 | 北京百度网讯科技有限公司 | Method and device for accessing sub-application, electronic equipment and readable storage medium |
| CN111708600A (en) * | 2020-08-20 | 2020-09-25 | 腾讯科技（深圳）有限公司 | Page display method, device, equipment and computer readable storage medium |
| CN112306528A (en) * | 2020-11-04 | 2021-02-02 | 北京焦点新干线信息技术有限公司 | Data updating method and device |
| CN112306528B (en) * | 2020-11-04 | 2023-12-08 | 北京博点智合科技有限公司 | Data updating method and device |
| CN112416458A (en) * | 2020-11-20 | 2021-02-26 | 平安普惠企业管理有限公司 | Preloading method and device based on ReactNative, computer equipment and storage medium |
| CN114020309A (en) * | 2021-11-02 | 2022-02-08 | 爱集微咨询(厦门)有限公司 | Method, device and storage medium for constructing multi-page application through webpack |
| CN114518912A (en) * | 2022-02-21 | 2022-05-20 | 度小满科技(北京)有限公司 | Page loading method, device and equipment and readable storage medium |
| CN114518912B (en) * | 2022-02-21 | 2023-04-25 | 度小满科技(北京)有限公司 | Page loading method, device, equipment and readable storage medium |
Also Published As
| Publication number | Publication date |
|---|---|
| CN110309451B (en) | 2021-07-23 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN110309451A (en) | A kind of web preloads the generation method and device of the page | |
| CN106371844B (en) | A kind of method and system with primary user interface components displayed web page | |
| US20220171915A1 (en) | Automated augmentation of text, web and physical environments using multimedia content | |
| CN108984714B (en) | Page rendering method and device, electronic equipment and computer readable medium | |
| CN100535900C (en) | Method and system for rendering asynchronous portal page | |
| US10542123B2 (en) | System and method for generating and monitoring feedback of a published webpage as implemented on a remote client | |
| US20150286739A1 (en) | Html5-protocol-based webpage presentation method and device | |
| CA2817554A1 (en) | Mobile content management system | |
| Hales | HTML5 and JavaScript Web Apps: Bridging the gap between the web and the mobile web | |
| CN111143725A (en) | Page generation method and device and electronic equipment | |
| JP2014523567A (en) | Live browser tooling in an integrated development environment | |
| CN103617191A (en) | Browser and method for rendering same by means of hardware acceleration | |
| CN106155673B (en) | Method, device, server and user equipment for realizing page content editor | |
| US20160259630A1 (en) | Systems, apparatus and methods for sharing visual model-based applications | |
| US20190171770A1 (en) | Systems and methods for co-browsing | |
| CN102087598A (en) | Method, device and browsing device for displaying 3D interface | |
| Raji et al. | Scalable web-embedded volume rendering | |
| CN105988814B (en) | Interface generation method and device | |
| CN102624910B (en) | Method, the Apparatus and system of the web page contents that process user chooses | |
| Konshin | Next. js Quick Start Guide: Server-side rendering done right | |
| CN113326043B (en) | Webpage rendering method, webpage manufacturing method and webpage rendering system | |
| Boutsi et al. | Interactive online visualization of complex 3D geometries | |
| US10198408B1 (en) | System and method for converting and importing web site content | |
| Sarkis et al. | A multi-screen refactoring system for video-centric web applications | |
| CN109101429A (en) | A kind of method and device of the browser page debugging of set-top box |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | 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 |