CN110516186A - Page skeleton automatic generating method, equipment, storage medium and device - Google Patents
Page skeleton automatic generating method, equipment, storage medium and device Download PDFInfo
- Publication number
- CN110516186A CN110516186A CN201910753020.9A CN201910753020A CN110516186A CN 110516186 A CN110516186 A CN 110516186A CN 201910753020 A CN201910753020 A CN 201910753020A CN 110516186 A CN110516186 A CN 110516186A
- Authority
- CN
- China
- Prior art keywords
- page
- skeleton
- default
- text
- block
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
- 238000000034 method Methods 0.000 title claims abstract description 57
- 238000011161 development Methods 0.000 claims abstract description 20
- 210000000988 bone and bone Anatomy 0.000 claims description 11
- 238000009877 rendering Methods 0.000 claims description 10
- 238000013507 mapping Methods 0.000 claims description 9
- 230000000875 corresponding effect Effects 0.000 description 26
- 238000012986 modification Methods 0.000 description 9
- 230000004048 modification Effects 0.000 description 9
- 238000010586 diagram Methods 0.000 description 8
- 208000019901 Anxiety disease Diseases 0.000 description 7
- 230000036506 anxiety Effects 0.000 description 7
- 238000004891 communication Methods 0.000 description 5
- 230000015572 biosynthetic process Effects 0.000 description 4
- 230000008859 change Effects 0.000 description 3
- 230000008569 process Effects 0.000 description 3
- 238000012856 packing Methods 0.000 description 2
- 230000008447 perception Effects 0.000 description 2
- 230000002093 peripheral effect Effects 0.000 description 2
- 238000012545 processing Methods 0.000 description 2
- 241001270131 Agaricus moelleri Species 0.000 description 1
- 206010054949 Metaplasia Diseases 0.000 description 1
- 230000005540 biological transmission Effects 0.000 description 1
- 230000001276 controlling effect Effects 0.000 description 1
- 230000002596 correlated effect Effects 0.000 description 1
- 238000001035 drying Methods 0.000 description 1
- 230000000694 effects Effects 0.000 description 1
- 210000003054 facial bone Anatomy 0.000 description 1
- 230000006870 function Effects 0.000 description 1
- 238000012423 maintenance Methods 0.000 description 1
- 230000015689 metaplastic ossification Effects 0.000 description 1
- 230000000149 penetrating effect Effects 0.000 description 1
- 210000000697 sensory organ Anatomy 0.000 description 1
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
-
- 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/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Databases & Information Systems (AREA)
- General Engineering & Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Data Mining & Analysis (AREA)
- Software Systems (AREA)
- Human Computer Interaction (AREA)
- Information Transfer Between Computers (AREA)
Abstract
The invention discloses a kind of page skeleton automatic generating method, equipment, storage medium and devices, this method comprises: by being inserted into default skeleton generation script in the default page in development status；Script is generated according to default skeleton, pattern covering is carried out to the page elements in the default page, obtain the element skeleton of the page elements in the default page；The source code of element skeleton is packed into the page code of the default page；When receiving the corresponding page load request of the default page, the skeleton page of the default page is generated according to the source code of the element skeleton in page code.Script is generated due to being inserted into default skeleton during page development, the skeleton page of the default page can be automatically generated, improve the efficiency of skeleton generation, and by carrying out pattern covering to page elements, improve the accuracy of skeleton page generation, by showing the skeleton generated to user, user is set to perceive the loading procedure of the page, webpage representation form is more abundant and vivid.
Description
Technical field
The technical field shown the present invention relates to organisational chart more particularly to a kind of page skeleton automate generation side
Method, equipment, storage medium and device.
Background technique
Browser generally only shows blank page or Loading figure to user after receiving page load and asking for instructions
Mark, user can not perceive the content and state of the page to be loaded, can not also determine waiting time, if page loading velocity is excessively slow,
User is easy to produce waiting anxiety, and is easy to close the page, to cause customer churn.
The measure taken at present is that developer according to style sheet pure code writes page skeleton, to load in the page
Displayed page skeleton in journey eliminates the waiting anxiety of user, although the mode of such hand-written skeleton can carve the page again completely
True pattern, but the hand-written skeleton of developer takes a long time, cost of labor is higher, automates so as to cause page skeleton and generates effect
Rate is lower.Therefore, page skeleton automation formation efficiency how is improved to be a technical problem to be solved urgently.
Above content is only used to facilitate the understanding of the technical scheme, and is not represented and is recognized that above content is existing skill
Art.
Summary of the invention
The main purpose of the present invention is to provide a kind of page skeleton automatic generating method, equipment, storage medium and dresses
It sets, it is intended to solve the technical problem that page skeleton automation formation efficiency is lower in the prior art.
To achieve the above object, the present invention provides a kind of page skeleton automatic generating method, and the page skeleton is automatic
Change generation method the following steps are included:
Default skeleton generation script is inserted into the default page in development status；
Script is generated according to the default skeleton, pattern covering is carried out to the page elements in the default page, obtain institute
State the element skeleton of the page elements in the default page；
The source code of the element skeleton is packed into the page code of the default page；
When receiving the corresponding page load request of the default page, according to the element in the page code
The source code of skeleton generates the skeleton page of the default page.
Preferably, described when receiving the corresponding page load request of the default page, according to the page code
In the element skeleton source code generate the skeleton page of the default page after, the page skeleton automation generates
Method further include:
Dynamic Display is carried out to the skeleton page；
The page load request is forwarded to network server, the page is loaded receiving the network server
When requesting the page data of feedback, data filling is carried out to the skeleton page according to the page data.
It is preferably, described that Dynamic Display is carried out to the skeleton page, comprising:
It shows the skeleton page, and records the time of reception of the page load request；
Calculate the current load duration from the time of reception to current time；
Current gray level grade corresponding with the current load duration is searched in default mapping table, described preset is reflected
Penetrating includes the corresponding relationship loaded between duration and tonal gradation in relation table；
It is adjusted by color of the current gray level grade to the skeleton page.
Preferably, the element skeleton includes: picture block skeleton, text block skeleton and button block skeleton；
It is described that script is generated to the page elements progress pattern covering in the default page according to the default skeleton, it obtains
Obtain the element skeleton of the page elements in the default page, comprising:
Script is generated by the default skeleton, the page elements in the default page are divided by figure according to element type
Tile, text block and button block, and pattern covering is carried out respectively to the picture block, the text block and the button block, with
Obtain picture block skeleton, text block skeleton and button block skeleton.
Preferably, described according to element type that the page in the default page is first by the default skeleton generation script
Element is divided into before picture block, text block and button block, the page skeleton automatic generating method further include:
Obtain the first screen element of the default page；
It is described to be divided the page elements in the default page according to element type by the default skeleton generation script
For picture block, text block and button block, comprising:
By the default skeleton generate script according to element type by the first screen element be divided into picture block, text block and
Button block.
Preferably, described that pattern covering is carried out respectively to the picture block, the text block and the button block, to obtain
Picture block skeleton, text block skeleton and button block skeleton, comprising:
Default transparent picture is obtained, the size of the default transparent picture is adjusted to the size of the picture block, and will
The background colour of default transparent picture adjusted is set as predefined color, to obtain picture block skeleton；
The text parameter of the text block is obtained, and according to the text parameter rendering text block skeleton；
It sets transparent for the text color in the button block, and sets predefined for the background colour of the button block
Color, to obtain button block skeleton.
Preferably, the text parameter includes: uniline row height, line of text height, text block height, top margin and following
Away from；
The text parameter for obtaining the text block, and according to the text parameter rendering text block skeleton, comprising:
Obtain that the uniline row is high, the line of text is high, the text block height, the top margin and described following
Away from；
The line of text height is subtracted into the uniline row height, to obtain line space；
The text block height is subtracted into the top margin and the bottom margin, it is always high to obtain text；
The text is total high high divided by the line of text, to obtain text line number；
According to the uniline row, the high, line space and the text line number are by the text filed drafting of the text block
For predefined color, and set transparent for the textcolor in the text block, to obtain text block skeleton.
In addition, to achieve the above object, the present invention also proposes a kind of page skeleton automation generating device, the page bone
Frame automation generating device includes memory, processor and is stored on the memory and can run on the processor
The automation of page skeleton generates program, and the page skeleton automation generates program and is arranged for carrying out page bone as described above
The step of frame automatic generating method.
In addition, to achieve the above object, the present invention also proposes a kind of storage medium, the page is stored on the storage medium
Skeleton automation generates program, and the page skeleton automation, which generates when program is executed by processor, realizes page as described above
The step of facial bone frame automatic generating method.
In addition, to achieve the above object, the present invention also proposes a kind of page skeleton automation generating means, the page bone
Frame automates generating means
Script is inserted into module, for being inserted into default skeleton generation script in the default page in development status；
Pattern overlay module, for according to the default skeleton generate script to the page elements in the default page into
The covering of row pattern, obtains the element skeleton of the page elements in the default page；
Code packetization module, for the source code of the element skeleton to be packed into the page code of the default page
In；
Skeleton generation module, for when receiving the corresponding page load request of the default page, according to the page
The source code of the element skeleton in the code of face generates the skeleton page of the default page.
In the present invention, by being inserted into default skeleton generation script in the default page in development status；According to institute
It states default skeleton and generates script to the page elements progress pattern covering in the default page, obtain in the default page
The element skeleton of page elements；The source code of the element skeleton is packed into the page code of the default page；When connecing
When receiving the corresponding page load request of the default page, according to the source code of the element skeleton in the page code
Generate the skeleton page of the default page.Script is generated due to being inserted into default skeleton during page development, it can be automatic
The corresponding skeleton page of the default page is generated, improves the efficiency of skeleton generation, while by carrying out sample to page elements
Formula covering improves the accuracy of skeleton page generation, and then by showing the skeleton page generated to user, perceives user
The loading procedure of the page, webpage representation form are more abundant and vivid.
Detailed description of the invention
Fig. 1 is that the page skeleton automation generating device structure for the hardware running environment that the embodiment of the present invention is related to is shown
It is intended to；
Fig. 2 is the flow diagram of page skeleton automatic generating method first embodiment of the present invention；
Fig. 3 is the flow diagram of page skeleton automatic generating method second embodiment of the present invention；
Fig. 4 is the flow diagram of page skeleton automatic generating method 3rd embodiment of the present invention；
Fig. 5 is the structural block diagram that page skeleton of the present invention automates generating means first embodiment.
The embodiments will be further described with reference to the accompanying drawings for the realization, the function and the advantages of the object of the present invention.
Specific embodiment
It should be appreciated that the specific embodiments described herein are merely illustrative of the present invention, it is not intended to limit the present invention.
Referring to Fig.1, Fig. 1 is that the page skeleton automation generation for the hardware running environment that the embodiment of the present invention is related to is set
Standby structural schematic diagram.
As shown in Figure 1, page skeleton automation generating device may include: processor 1001, such as central processing unit
(Central Processing Unit, CPU), communication bus 1002, user interface 1003, network interface 1004, memory
1005.Wherein, communication bus 1002 is for realizing the connection communication between these components.User interface 1003 may include display
Shield (Display), optional user interface 1003 can also include standard wireline interface and wireless interface, for user interface
1003 wireline interface can be USB interface in the present invention.Network interface 1004 optionally may include standard wireline interface,
Wireless interface (such as Wireless Fidelity (WIreless-FIdelity, WI-FI) interface).Memory 1005 can be the random of high speed
Memory (Random Access Memory, RAM) memory is accessed, stable memory (Non-volatile is also possible to
Memory, NVM), such as magnetic disk storage.Memory 1005 optionally can also be the storage independently of aforementioned processor 1001
Device.
It is set it will be understood by those skilled in the art that structure shown in Fig. 1 does not constitute to generate the automation of page skeleton
Standby restriction may include perhaps combining certain components or different component layouts than illustrating more or fewer components.
As shown in Figure 1, as may include that operating system, network are logical in a kind of memory 1005 of computer storage medium
Believe that module, Subscriber Interface Module SIM and the automation of page skeleton generate program.
In page skeleton automation generating device shown in Fig. 1, network interface 1004 is mainly used for connecting background service
Device carries out data communication with the background server；User interface 1003 is mainly used for connecting peripheral hardware, is counted with the peripheral hardware
According to communication；The page skeleton automation generating device calls the page skeleton stored in memory 1005 by processor 1001
Automation generates program, and executes page skeleton automatic generating method provided in an embodiment of the present invention.
Based on above-mentioned hardware configuration, the embodiment of page skeleton automatic generating method of the present invention is proposed.
It is the flow diagram of page skeleton automatic generating method first embodiment of the present invention referring to Fig. 2, Fig. 2, proposes
Page skeleton automatic generating method first embodiment of the present invention.
In the first embodiment, the page skeleton automatic generating method the following steps are included:
Step S10: default skeleton generation script is inserted into the default page in development status.
It should be noted that the executing subject of the present embodiment is page skeleton automation generating device, the page skeleton
Automating generating device can be without restriction to this for electronic equipments, the present embodiment such as PC or servers.It is described default
The page is currently to need to generate the page of skeleton, and the default page is in and develops the stage to be done, i.e., in the page
Appearance has write completion, waits the state of packing and issuing.It is that control computer generates skeleton page that the default skeleton, which generates script,
The program in face.Since the development phase in the page is able to access that preview page, skeleton page source code is sent to preview page,
Then can the live preview skeleton page, and can by modify skeleton page source code the skeleton page is edited and is modified.
Therefore, the default skeleton will be generated script in the development phase of the page and is inserted into the default page by the present embodiment, from
And it generates the skeleton page and can easily modify to the skeleton page.
In the concrete realization, described that default skeleton generation script is inserted into it in the default page in development status
Before, the default page will be also gone out by page manipulation tool loads, after the default page load is completed, by default bone
Frame generates script and is inserted into the open default page.The default page manipulation tool can be puppeteer,
Puppeteer is the library Node that headlessChrome is controlled based on DevTools agreement.
Step S20: script is generated according to the default skeleton, the page elements progress pattern in the default page is covered
Lid obtains the element skeleton of the page elements in the default page.
It is understood that the page elements are the component part of the default page, including text element, picture member
Element, button element, SVG (scalable vector graphics) and other elements, and element skeleton refers to the basic wheel of page elements
Exterior feature is the blank version of the page, in order to generate the skeleton page of the default page, will acquire the element bone of the page elements
Frame.
It should be noted that pattern (Cascading Style Sheets, CSS) is that one kind is used to show HTML (standard
One of generalized markup language application) or the files pattern such as XML (a subset of standard generalized markup language) machine word
Speech.Pattern not only can statically modified web page, various scripting languages can also be cooperated dynamically to carry out format to page elements
Change.Pattern can carry out Pixel-level to the typesetting of position of page element and accurately control, and support almost all of font size pattern,
Possess the ability to web object and model pattern editor.The pattern covering refers to covering original sample by new pattern
Formula, to pass through new pattern displayed page element.
In the concrete realization, the default skeleton run in the default page generates script, thus in the default page
After rendering is completed, pattern covering is carried out to the page elements in the default page, generally by predefined color block, such as
Grey covers the original pattern of the page elements, so that the page after covering only remains the skeleton of predefined color, to obtain
The element skeleton of page elements in the default page.
Step S30: the source code of the element skeleton is packed into the page code of the default page.
It should be noted that obtaining the page in the default page after carrying out pattern covering to the page elements
The element skeleton of surface element, in order to which the element skeleton is distributed to server, so that the network user can check the element
Skeleton will acquire the source code of the element skeleton, and the source code be packed into described preset according to default strapping tool
In the page code of the page, publication is completed, so that practical application of the subsequent skeleton page in the default page can be realized.
Step S40: when receiving the corresponding page load request of the default page, according in the page code
The source code of the element skeleton generates the skeleton page of the default page.
It is understood that when receiving the corresponding page load request of the default page, according to the page generation
The source code of the element skeleton in code generates the skeleton page of the default page, waits the default page in the network user
Face load during show the skeleton page, user perceptually, occur having got page at the time of the skeleton page
Face data, then only gradual the rendering of page data comes, so that user be made to feel that page loading velocity becomes faster, reduces
The waiting anxiety of user.
In the present embodiment, the page skeleton automatic generating method further include: when receiving the default page
When modification instruction, modification content is extracted from modification instruction, according to the modification content to the source of the element skeleton
Code is modified.
In the first embodiment, by being inserted into default skeleton generation script in the default page in development status；
Script is generated according to the default skeleton, pattern covering is carried out to the page elements in the default page, obtain the default page
The element skeleton of page elements in face；The source code of the element skeleton is packed into the page code of the default page
In；When receiving the corresponding page load request of the default page, according to the element skeleton in the page code
Source code generate the skeleton page of the default page.Script is generated due to being inserted into default skeleton during page development,
The corresponding skeleton page of the default page can be automatically generated, improves the efficiency of skeleton generation, while by page member
Element carries out pattern covering, improves the accuracy of skeleton page generation, and then by showing the skeleton page generated to user, makes
User perceives the loading procedure of the page, and webpage representation form is more abundant and vivid.
Referring to Fig. 3, Fig. 3 is the flow diagram of page skeleton automatic generating method second embodiment of the present invention, is based on
Above-mentioned first embodiment shown in Fig. 2 proposes the second embodiment of page skeleton automatic generating method of the present invention.
In a second embodiment, after the step S40, the page skeleton automatic generating method further include:
Step S401: Dynamic Display is carried out to the skeleton page.
It should be noted that being generated when the corresponding page load request of the default page for receiving user's transmission
The skeleton page of the default page will show the skeleton page to user, and make user to mitigate the waiting anxiety of user
Feel occur having got page data at the time of the skeleton page, then only gradual the rendering of page data comes, from
And user is made to feel that page loading velocity becomes faster.
It is understood that showing the skeleton page generated to user, it is able to use the loading procedure of the family perception page, and
In order to strengthen perception of the user to page loading procedure, Dynamic Display will be carried out to the skeleton page, and receive the page
When the load request of face, the time of reception that record receives the page load request gradually deepens with the growth of load time
The color of the skeleton page makes user feel that page data progressively loads, and webpage representation form is more enriched and shape
As.In the present embodiment, when receiving the page load request, the skeleton page is shown, and record the page load
The time of reception of request；Calculate the current load duration from the time of reception to current time；In default mapping table
Search current gray level grade corresponding with the current load duration, include load duration in the default mapping table with it is grey
Spend the corresponding relationship between grade；It is adjusted by color of the current gray level grade to the skeleton page.
In the concrete realization, the intensification rule of color is determined according to the corresponding relationship between tonal gradation and load duration,
Such as Y=aX, wherein Y is tonal gradation, and X is load duration, and a is parameter preset, and a > 1, will be from white, grey to black color
Be divided into 0-256 grades of gray scales, white tonal gradation is 0, and the tonal gradation of black is 256, tonal gradation 1-255 be color by
Gray scale can be also divided into 16 grades, 32 grades, 64 grades or other series, the present embodiment pair certainly by the predefined color gradually deepened
This is without restriction.It is positively correlated between the tonal gradation and load duration, and growth rate gradually became faster with the time.
On the sense organ of user, the speed of color burn becomes faster, it is meant that the speed that page data obtains becomes faster, and can reduce user's
Anxiety is waited, webpage representation form is more abundant and vivid.
Step S402: the page load request is forwarded to network server, is receiving the network server to institute
When stating the page data of page load request feedback, data filling is carried out to the skeleton page according to the page data.
It is understood that showing the skeleton page receiving the corresponding page load request of the default page
Later, it also needs to forward the page load request to network server, to obtain the default page from the network server
Corresponding page data shows the skeleton page of the default page, and getting during waiting page data
When stating the page data of network server feedback, data filling is carried out to the skeleton page according to the page data, so that
User smoothly gets page data.
In a second embodiment, by showing the skeleton page, and the time of reception of the page load request is recorded；
Calculate the current load duration from the time of reception to current time；It searches in default mapping table and currently adds with described
The corresponding current gray level grade of duration is carried, includes corresponding between load duration and tonal gradation in the default mapping table
Relationship；It is adjusted by color of the current gray level grade to the skeleton page；The page is forwarded to network server
Face load request, when receiving the page data that the network server feeds back the page load request, according to described
Page data carries out data filling to the skeleton page.Due to carrying out Dynamic Display to the skeleton page, accelerate skeleton page
Face color deepen speed, user perceptually, the page load speed gradually become faster, reduce the waiting anxiety of user,
And data filling is carried out to the skeleton page according to the page data when getting page data, it allows users to obtain
And consult the default page.
Referring to Fig. 4, Fig. 4 is the flow diagram of page skeleton automatic generating method 3rd embodiment of the present invention, is based on
Above-mentioned second embodiment shown in Fig. 3 proposes the 3rd embodiment of page skeleton automatic generating method of the present invention.
In the third embodiment, the element skeleton includes: picture block skeleton, text block skeleton and button block skeleton；Institute
State step S20, comprising:
Step S201: script is generated according to element type for the page elements in the default page by the default skeleton
It is divided into picture block, text block and button block, and pattern is carried out respectively to the picture block, the text block and the button block
Covering, to obtain picture block skeleton, text block skeleton and button block skeleton.
It is understood that since different types of element will take different modes to carry out pattern covering, it will be according to member
Page elements in the default page are divided into picture block, text block and button block by plain type.Wherein, if the page is first
Element includes img element, then regards as picture block；If the page elements include text node, text block is regarded as；If described
Page elements include button element, then regard as button block.
In the present embodiment, before the step S201, the page skeleton automatic generating method further include: obtain institute
State the first screen element of the default page；It is described script is generated by the default skeleton will be in the default page according to element type
Page elements are divided into the step of picture block, text block and button block, comprising: generate script according to element by the default skeleton
The first screen element is divided into picture block, text block and button block by type.When user has submitted the page of the default page
When load request, it is only necessary to which the corresponding skeleton page of head screen for showing the default page to the user is getting page data
When, the skeleton page is replaced by page data, it is therefore not necessary to the skeleton of the non-first screen page be shown, to the default page
In non-first screen element deleted, the file size of the skeleton page can be reduced, improve the formation efficiency of skeleton.
It is in the present embodiment, described that pattern covering is carried out respectively to the picture block, the text block and the button block,
With the step of obtaining picture block skeleton, text block skeleton and button block skeleton, comprising: default transparent picture is obtained, it will be described pre-
If the size of transparent picture is adjusted to the size of the picture block, and sets the background colour of default transparent picture adjusted to
Predefined color, to obtain picture block skeleton；The text parameter of the text block is obtained, and text is drawn according to the text parameter
This block skeleton；It sets transparent for the text color in the button block, and sets predetermined for the background colour of the button block
Adopted color, to obtain button block skeleton.
It is understood that obtaining default transparent picture for the picture block, the default transparent picture pixel is 1*
1, the default transparent picture is converted into the character string forms of base64 coding, and be stored in uniform resource locator
In (Uniform Resource Locator, URL), DataUrl is obtained, DataUrl is assigned to the src attribute of img element
On, while the width of the default transparent picture and the width and height of a height of picture block are set, and background colour is adjusted to predetermined
Adopted color generates picture block skeleton.For the text block, uniline row height, the line of text for obtaining the text block are high, literary
This block height, top margin and bottom margin；The height of a height of a line text of uniline row, a height of a line text of line of text
The line of text height is subtracted the uniline row height, to obtain line space by the height for adding line space；The text block height is subtracted
The top margin and the bottom margin are removed, it is always high to obtain text, the text is total high high divided by the line of text, to obtain
Text line number；According to the uniline row, the high, line space and the text line number draw the text filed of the text block
It is made as predefined color, and sets transparent for the textcolor in the text block, to obtain text block skeleton.For described
Button block sets transparent for the text color in the button block, and background colour is set as predefined color, and wide high maintenance is not
Become, to obtain button block skeleton.
It in the third embodiment, will be in the default page according to element type by generating script by the default skeleton
Page elements be divided into picture block, text block and button block, and to the picture block, the text block and the button block point
Not carry out pattern covering, to obtain picture block skeleton, text block skeleton and button block skeleton.Due to only carrying out bone to head screen element
Frame generates, and reduces workload, improves the formation efficiency of the skeleton page.It, can be fast and by carrying out piecemeal to the default page
Fastly pattern covering is carried out to each piecemeal respectively, improves accuracy rate and efficiency that the skeleton page generates.
In addition, the embodiment of the present invention also proposes a kind of storage medium, it is automatic that page skeleton is stored on the storage medium
For metaplasia at program, the page skeleton automation generates realizes page skeleton as described above certainly when program is executed by processor
The step of dynamicization generation method.
In addition, the embodiment of the present invention also proposes a kind of page skeleton automation generating means, the page bone referring to Fig. 5
Frame automates generating means
Script is inserted into module 10, for being inserted into default skeleton generation script in the default page in development status.
It should be noted that the default page is currently to need to generate the page of skeleton, and at the default page
In developing the stage to be done, i.e., completion is write in content of pages, waited the state of packing and issuing.The default skeleton is raw
It is the program for controlling computer and generating the skeleton page at script.It, will since the development phase in the page is able to access that preview page
Skeleton page source code is sent to preview page, then can the live preview skeleton page, and can pass through modification skeleton page source
Code is edited and is modified to the skeleton page.Therefore, the present embodiment will be raw by the default skeleton in the development phase of the page
It is inserted into the default page at script, to generate the skeleton page and can easily modify to the skeleton page.
In the concrete realization, described that default skeleton generation script is inserted into it in the default page in development status
Before, the default page will be also gone out by page manipulation tool loads, after the default page load is completed, by default bone
Frame generates script and is inserted into the open default page.The default page manipulation tool can be puppeteer,
Puppeteer is the library Node that headlessChrome is controlled based on DevTools agreement.
Pattern overlay module 20, for generating script to the page elements in the default page according to the default skeleton
Pattern covering is carried out, the element skeleton of the page elements in the default page is obtained.
It is understood that the page elements are the component part of the default page, including text element, picture member
Element, button element, SVG (scalable vector graphics) and other elements, and element skeleton refers to the basic wheel of page elements
Exterior feature is the blank version of the page, in order to generate the skeleton page of the default page, will acquire the element bone of the page elements
Frame.
It should be noted that pattern (Cascading Style Sheets, CSS) is that one kind is used to show HTML (standard
One of generalized markup language application) or the files pattern such as XML (a subset of standard generalized markup language) machine word
Speech.Pattern not only can statically modified web page, various scripting languages can also be cooperated dynamically to carry out format to page elements
Change.Pattern can carry out Pixel-level to the typesetting of position of page element and accurately control, and support almost all of font size pattern,
Possess the ability to web object and model pattern editor.The pattern covering refers to covering original sample by new pattern
Formula, to pass through new pattern displayed page element.
In the concrete realization, the default skeleton run in the default page generates script, thus in the default page
After rendering is completed, pattern covering is carried out to the page elements in the default page, is generally covered by predefined color block
The original pattern of page elements, so that the page after covering only remains the skeleton of predefined color, to obtain described default
The element skeleton of page elements in the page.
Code packetization module 30, for the source code of the element skeleton to be packed into the page code of the default page
In.
It should be noted that obtaining the page in the default page after carrying out pattern covering to the page elements
The element skeleton of surface element, in order to which the element skeleton is distributed to server, so that the network user can check the element
Skeleton will acquire the source code of the element skeleton, and the source code be packed into described preset according to default strapping tool
In the page code of the page, publication is completed, so that practical application of the subsequent skeleton page in the default page can be realized.
Skeleton generation module 40, for when receiving the corresponding page load request of the default page, according to described
The source code of the element skeleton in page code generates the skeleton page of the default page.
It is understood that when receiving the corresponding page load request of the default page, according to the page generation
The source code of the element skeleton in code generates the skeleton page of the default page, waits the default page in the network user
Face load during show the skeleton page, user perceptually, occur having got page at the time of the skeleton page
Face data, then only gradual the rendering of page data comes, so that user be made to feel that page loading velocity becomes faster, reduces
The waiting anxiety of user.
In the present embodiment, the page skeleton automatic generating method further include: when receiving the default page
When modification instruction, modification content is extracted from modification instruction, according to the modification content to the source of the element skeleton
Code is modified.
In the present embodiment, by being inserted into default skeleton generation script in the default page in development status；Root
Script is generated according to the default skeleton, pattern covering is carried out to the page elements in the default page, obtain the default page
In page elements element skeleton；The source code of the element skeleton is packed into the page code of the default page；
When receiving the corresponding page load request of the default page, according to the source of the element skeleton in the page code
The skeleton page of the page is preset described in code building.Script is generated due to being inserted into default skeleton during page development, it can
Automatically generate the corresponding skeleton page of the default page, improve skeleton generation efficiency, while by page elements into
The covering of row pattern improves the accuracy of skeleton page generation, and then by showing the skeleton page generated to user, makes user
The loading procedure of the page is perceived, webpage representation form is more abundant and vivid.
In one embodiment, the page skeleton automates generating means, further includes:
Skeleton display module, for carrying out Dynamic Display to the skeleton page；The page is forwarded to network server
Load request, when receiving the page data that the network server feeds back the page load request, according to the page
Face data carries out data filling to the skeleton page.
In one embodiment, the skeleton display module is also used to show the skeleton page, and records the page and add
Carry the time of reception of request；Calculate the current load duration from the time of reception to current time；In default mapping table
Middle lookup current gray level grade corresponding with the current load duration, include in the default mapping table load duration and
Corresponding relationship between tonal gradation；It is adjusted by color of the current gray level grade to the skeleton page.
In one embodiment, the element skeleton includes: picture block skeleton, text block skeleton and button block skeleton；
The pattern overlay module 20, being also used to generate script by the default skeleton will be described default according to element type
Page elements in the page are divided into picture block, text block and button block, and to the picture block, the text block and described press
Button block carries out pattern covering respectively, to obtain picture block skeleton, text block skeleton and button block skeleton.
In one embodiment, the page skeleton automates generating means, further includes:
Head screen obtains module, for obtaining the first screen element of the default page；
The pattern overlay module 20 is also used to generate script by the default skeleton and is shielded the head according to element type
Element is divided into picture block, text block and button block.
In one embodiment, the pattern overlay module 20, is also used to obtain default transparent picture, by it is described preset it is transparent
The size of picture is adjusted to the size of the picture block, and sets predefined for the background colour of default transparent picture adjusted
Color, to obtain picture block skeleton；The text parameter of the text block is obtained, and according to the text parameter rendering text block bone
Frame；It sets transparent for the text color in the button block, and sets predefined color for the background colour of the button block,
To obtain button block skeleton.
In one embodiment, the text parameter include: uniline row height, line of text height, text block height, top margin and
Bottom margin；
It is high to be also used to obtain the uniline row height, line of text height, the text block for the pattern overlay module 20
Degree, the top margin and the bottom margin；The line of text height is subtracted into the uniline row height, to obtain line space；By institute
It states text block height and subtracts the top margin and the bottom margin, it is always high to obtain text；By the total height of the text divided by described
Line of text is high, to obtain text line number；According to the uniline row, the high, line space and the text line number are by the text
The text filed of block is plotted as predefined color, and sets transparent for the textcolor in the text block, to obtain text
Block skeleton.
The other embodiments or specific implementation of page skeleton automation generating means of the present invention can refer to above-mentioned
Each method embodiment, details are not described herein again.
It should be noted that, in this document, the terms "include", "comprise" or its any other variant are intended to non-row
His property includes, so that the process, method, article or the system that include a series of elements not only include those elements, and
And further include other elements that are not explicitly listed, or further include for this process, method, article or system institute it is intrinsic
Element.In the absence of more restrictions, the element limited by sentence "including a ...", it is not excluded that including being somebody's turn to do
There is also other identical elements in the process, method of element, article or system.
The serial number of the above embodiments of the invention is only for description, does not represent the advantages or disadvantages of the embodiments.If listing equipment for drying
Unit claim in, several in these devices, which can be, to be embodied by the same item of hardware.Word first,
Second and the use of third etc. do not indicate any sequence, can be title by these word explanations.
Through the above description of the embodiments, those skilled in the art can be understood that above-described embodiment side
Method can be realized by means of software and necessary general hardware platform, naturally it is also possible to by hardware, but in many cases
The former is more preferably embodiment.Based on this understanding, technical solution of the present invention substantially in other words does the prior art
The part contributed out can be embodied in the form of software products, which is stored in a storage medium
(such as read-only memory mirror image (Read Only Memory image, ROM)/random access memory (Random Access
Memory, RAM), magnetic disk, CD) in, including some instructions are used so that terminal page skeleton automates generating device
(can be mobile phone, computer, server, air conditioner or Webpage skeleton automation generating device etc.) executes the present invention
Method described in each embodiment.
The above is only a preferred embodiment of the present invention, is not intended to limit the scope of the invention, all to utilize this hair
Equivalent structure or equivalent flow shift made by bright specification and accompanying drawing content is applied directly or indirectly in other relevant skills
Art field, is included within the scope of the present invention.
Claims (10)
1. a kind of page skeleton automatic generating method, which is characterized in that the page skeleton automatic generating method include with
Lower step:
Default skeleton generation script is inserted into the default page in development status；
Script is generated according to the default skeleton, pattern covering is carried out to the page elements in the default page, obtain described pre-
If the element skeleton of the page elements in the page；
The source code of the element skeleton is packed into the page code of the default page；
When receiving the corresponding page load request of the default page, according to the element skeleton in the page code
Source code generate the skeleton page of the default page.
2. page skeleton automatic generating method as described in claim 1, which is characterized in that described described default when receiving
When the corresponding page load request of the page, generated according to the source code of the element skeleton in the page code described default
After the skeleton page of the page, the page skeleton automatic generating method further include:
Dynamic Display is carried out to the skeleton page；
The page load request is forwarded to network server, is receiving the network server to the page load request
When the page data of feedback, data filling is carried out to the skeleton page according to the page data.
3. page skeleton automatic generating method as claimed in claim 2, which is characterized in that it is described to the skeleton page into
Mobile state is shown, comprising:
It shows the skeleton page, and records the time of reception of the page load request；
Calculate the current load duration from the time of reception to current time；
Current gray level grade corresponding with the current load duration, the default mapping pass are searched in default mapping table
Being includes the corresponding relationship loaded between duration and tonal gradation in table；
It is adjusted by color of the current gray level grade to the skeleton page.
4. page skeleton automatic generating method as claimed in any one of claims 1-3, which is characterized in that the element bone
Frame includes: picture block skeleton, text block skeleton and button block skeleton；
It is described that script is generated to the page elements progress pattern covering in the default page according to the default skeleton, obtain institute
State the element skeleton of the page elements in the default page, comprising:
By the default skeleton generate script according to element type by the page elements in the default page be divided into picture block,
Text block and button block, and pattern covering is carried out respectively to the picture block, the text block and the button block, to obtain figure
Tile skeleton, text block skeleton and button block skeleton.
5. page skeleton automatic generating method as claimed in claim 4, which is characterized in that described raw by the default skeleton
Before the page elements in the default page are divided into picture block, text block and button block according to element type at script,
The page skeleton automatic generating method further include:
Obtain the first screen element of the default page；
It is described that the page elements in the default page are divided by figure according to element type by the default skeleton generation script
Tile, text block and button block, comprising:
Script is generated by the default skeleton, the first screen element is divided by picture block, text block and button according to element type
Block.
6. page skeleton automatic generating method as claimed in claim 4, which is characterized in that described to the picture block, institute
It states text block and the button block carries out pattern covering respectively, to obtain picture block skeleton, text block skeleton and button block skeleton,
Include:
Default transparent picture is obtained, the size of the default transparent picture is adjusted to the size of the picture block, and will adjustment
The background colour of default transparent picture afterwards is set as predefined color, to obtain picture block skeleton；
The text parameter of the text block is obtained, and according to the text parameter rendering text block skeleton；
It sets transparent for the text color in the button block, and sets predefined face for the background colour of the button block
Color, to obtain button block skeleton.
7. page skeleton automatic generating method as claimed in claim 6, which is characterized in that the text parameter includes: list
Every trade height, line of text height, text block height, top margin and bottom margin；
The text parameter for obtaining the text block, and according to the text parameter rendering text block skeleton, comprising:
Obtain the uniline row height, line of text height, the text block height, the top margin and the bottom margin；
The line of text height is subtracted into the uniline row height, to obtain line space；
The text block height is subtracted into the top margin and the bottom margin, it is always high to obtain text；
The text is total high high divided by the line of text, to obtain text line number；
According to the uniline row the high, line space and the text line number by the text block it is text filed be plotted as it is pre-
Color is defined, and sets transparent for the textcolor in the text block, to obtain text block skeleton.
8. a kind of page skeleton automates generating device, which is characterized in that the page skeleton automation generating device includes: to deposit
The page skeleton automation that reservoir, processor and being stored in can be run on the memory and on the processor generates journey
Sequence, the page skeleton automation, which generates when program is executed by the processor, to be realized as described in any one of claims 1 to 7
The page skeleton automatic generating method the step of.
9. a kind of storage medium, which is characterized in that it is stored with the automation of page skeleton on the storage medium and generates program, it is described
The automation of page skeleton generates the page skeleton realized as described in any one of claims 1 to 7 when program is executed by processor
The step of automatic generating method.
10. a kind of page skeleton automates generating means, which is characterized in that the page skeleton automates generating means and includes:
Script is inserted into module, for being inserted into default skeleton generation script in the default page in development status；
Pattern overlay module carries out sample to the page elements in the default page for generating script according to the default skeleton
Formula covering, obtains the element skeleton of the page elements in the default page；
Code packetization module, for the source code of the element skeleton to be packed into the page code of the default page；
Skeleton generation module, for when receiving the corresponding page load request of the default page, according to the page generation
The source code of the element skeleton in code generates the skeleton page of the default page.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201910753020.9A CN110516186A (en) | 2019-08-15 | 2019-08-15 | Page skeleton automatic generating method, equipment, storage medium and device |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201910753020.9A CN110516186A (en) | 2019-08-15 | 2019-08-15 | Page skeleton automatic generating method, equipment, storage medium and device |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN110516186A true CN110516186A (en) | 2019-11-29 |
Family
ID=68625241
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201910753020.9A Pending CN110516186A (en) | 2019-08-15 | 2019-08-15 | Page skeleton automatic generating method, equipment, storage medium and device |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN110516186A (en) |
Cited By (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN110990014A (en) * | 2019-12-12 | 2020-04-10 | 深圳市卡牛科技有限公司 | Method and device for generating page code of skeleton screen, server and storage medium |
| CN111158839A (en) * | 2019-12-31 | 2020-05-15 | 中国银行股份有限公司 | Paragraph content display method and device |
| CN111159597A (en) * | 2019-12-25 | 2020-05-15 | 平安养老保险股份有限公司 | Skeleton screen generation method and system, computer equipment and storage medium |
| CN111273903A (en) * | 2020-01-10 | 2020-06-12 | 深圳市大富网络技术有限公司 | Webpage making method and device, computer equipment and computer storage medium |
| CN111796824A (en) * | 2020-06-29 | 2020-10-20 | 平安普惠企业管理有限公司 | Page loading method, device, server and medium |
| CN112286525A (en) * | 2020-09-25 | 2021-01-29 | 长沙市到家悠享网络科技有限公司 | Skeleton screen generation method, device and equipment |
| CN112905280A (en) * | 2021-02-07 | 2021-06-04 | 腾竞体育文化发展(上海)有限公司 | Page display method, device, equipment and storage medium |
Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| WO2013124858A1 (en) * | 2012-02-26 | 2013-08-29 | Passcall Advanced Technologies (Transforma) Ltd. | Method and system for creating dynamic browser-based user interface by example |
| CN109254773A (en) * | 2018-09-19 | 2019-01-22 | 广州视源电子科技股份有限公司 | Skeleton page generation method, device, equipment and storage medium |
| CN109558133A (en) * | 2018-12-03 | 2019-04-02 | 咪咕数字传媒有限公司 | A kind of page processing method, device and storage medium |
-
2019
- 2019-08-15 CN CN201910753020.9A patent/CN110516186A/en active Pending
Patent Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| WO2013124858A1 (en) * | 2012-02-26 | 2013-08-29 | Passcall Advanced Technologies (Transforma) Ltd. | Method and system for creating dynamic browser-based user interface by example |
| CN109254773A (en) * | 2018-09-19 | 2019-01-22 | 广州视源电子科技股份有限公司 | Skeleton page generation method, device, equipment and storage medium |
| CN109558133A (en) * | 2018-12-03 | 2019-04-02 | 咪咕数字传媒有限公司 | A kind of page processing method, device and storage medium |
Non-Patent Citations (1)
| Title |
|---|
| JOCS: "一种自动化生产骨架屏的方案", 《GITHUB》 * |
Cited By (10)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN110990014A (en) * | 2019-12-12 | 2020-04-10 | 深圳市卡牛科技有限公司 | Method and device for generating page code of skeleton screen, server and storage medium |
| CN110990014B (en) * | 2019-12-12 | 2023-10-20 | 深圳市卡牛科技有限公司 | Method and device for generating skeleton screen page codes, server and storage medium |
| CN111159597A (en) * | 2019-12-25 | 2020-05-15 | 平安养老保险股份有限公司 | Skeleton screen generation method and system, computer equipment and storage medium |
| CN111158839A (en) * | 2019-12-31 | 2020-05-15 | 中国银行股份有限公司 | Paragraph content display method and device |
| CN111273903A (en) * | 2020-01-10 | 2020-06-12 | 深圳市大富网络技术有限公司 | Webpage making method and device, computer equipment and computer storage medium |
| CN111273903B (en) * | 2020-01-10 | 2023-08-04 | 深圳市大富网络技术有限公司 | Webpage making method and device, computer equipment and computer storage medium |
| CN111796824A (en) * | 2020-06-29 | 2020-10-20 | 平安普惠企业管理有限公司 | Page loading method, device, server and medium |
| CN112286525A (en) * | 2020-09-25 | 2021-01-29 | 长沙市到家悠享网络科技有限公司 | Skeleton screen generation method, device and equipment |
| CN112905280A (en) * | 2021-02-07 | 2021-06-04 | 腾竞体育文化发展(上海)有限公司 | Page display method, device, equipment and storage medium |
| CN112905280B (en) * | 2021-02-07 | 2023-12-15 | 腾竞体育文化发展(上海)有限公司 | Page display method, device, equipment and storage medium |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN110516186A (en) | Page skeleton automatic generating method, equipment, storage medium and device | |
| CN110187913B (en) | Method and device for issuing and running applet | |
| US7340673B2 (en) | System and method for browser document editing | |
| US20150046797A1 (en) | Document format processing apparatus and document format processing method | |
| JP4913777B2 (en) | Web page distribution system | |
| KR20150079867A (en) | Html5-protocol-based webpage presentation method and device | |
| CN104820589B (en) | A kind of method and its device of dynamic adaptation webpage | |
| US9117314B2 (en) | Information output apparatus, method, and recording medium for displaying information on a video display | |
| US20130117656A1 (en) | Conversion of web template designs | |
| CN113536179B (en) | Page generation method and device, electronic equipment and storage medium | |
| CN106933518A (en) | A kind of printing equipment and Method of printing | |
| CN115510347A (en) | Presentation file conversion method and device, electronic equipment and storage medium | |
| CN114153442A (en) | Large-screen visualization page configuration method and system based on visualization component | |
| CN112307385A (en) | Webpage data loading and processing method and device, electronic equipment and storage medium | |
| JP2011511991A (en) | Apparatus and method for animation of graphic digital document | |
| CN111367607A (en) | Dynamic electronic contract generating and signing system and implementation method thereof | |
| US20210064691A1 (en) | Techniques for automated resizing of text content responsive to layout changes | |
| KR100989550B1 (en) | High-resolution printing system and its method at the Internet | |
| CN114154095A (en) | Page picture generation method, device, equipment and storage medium | |
| CN112799745B (en) | Page display control method and device | |
| KR20180050825A (en) | E-learning content authoring apparatus using op markup language | |
| CN111858595A (en) | Dynamic configuration method and system for electric power engineering examination record table | |
| CN112559034A (en) | Method and system for generating skeleton screen file | |
| CN112632436A (en) | Webpage display method and device, electronic equipment and storage medium | |
| CN113703699B (en) | Real-time output method and device for electronic file |
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 | ||
| RJ01 | Rejection of invention patent application after publication |
Application publication date: 20191129 |
|
| RJ01 | Rejection of invention patent application after publication |