CN114065071A - A method and device for generating a skeleton screen - Google Patents
A method and device for generating a skeleton screen Download PDFInfo
- Publication number
- CN114065071A CN114065071A CN202111305673.4A CN202111305673A CN114065071A CN 114065071 A CN114065071 A CN 114065071A CN 202111305673 A CN202111305673 A CN 202111305673A CN 114065071 A CN114065071 A CN 114065071A
- Authority
- CN
- China
- Prior art keywords
- information
- elements
- skeleton
- webpage
- skeleton screen
- 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
Images
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
-
- 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
-
- H—ELECTRICITY
- H04—ELECTRIC COMMUNICATION TECHNIQUE
- H04L—TRANSMISSION OF DIGITAL INFORMATION, e.g. TELEGRAPHIC COMMUNICATION
- H04L67/00—Network arrangements or protocols for supporting network services or applications
- H04L67/01—Protocols
- H04L67/02—Protocols based on web technology, e.g. hypertext transfer protocol [HTTP]
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Software Systems (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Databases & Information Systems (AREA)
- Human Computer Interaction (AREA)
- Data Mining & Analysis (AREA)
- Computer Networks & Wireless Communication (AREA)
- Signal Processing (AREA)
- Information Transfer Between Computers (AREA)
Abstract
本发明提供了一种生成骨架屏的方法及装置，其中，该生成骨架屏的方法包括：接收网页访问请求，将所述网页访问请求发送至对应的网络服务器；接收所述网络服务器响应于所述网页访问请求返回的层叠样式表信息，所述层叠样式表信息中，用于生成骨架屏的元素以类名标签进行标记；从所述层叠样式表信息中，获取以类名标签被标记的元素的方位信息；依据获取的各元素的方位信息进行绘制，得到骨架屏。可以提高骨架屏生成效率。
The present invention provides a method and device for generating a skeleton screen, wherein the method for generating a skeleton screen includes: receiving a web page access request, and sending the web page access request to a corresponding network server; The cascading style sheet information returned by the web page access request, in the cascading style sheet information, the elements used to generate the skeleton screen are marked with the class name tag; from the cascading style sheet information, obtain the class name tag marked with Orientation information of the element; draw according to the acquired orientation information of each element to obtain the skeleton screen. It can improve the efficiency of skeleton screen generation.
Description
Technical Field
The invention relates to the technical field of internet, in particular to a method and a device for generating a skeleton screen.
Background
With the development of the mobile internet, users can obtain information through the mobile internet by using clients, such as mobile phones, tablets, personal digital assistants, and the like, to meet the needs of work and life. However, the transmission performance of the mobile internet is easily affected by the surrounding environment, the transmission performance is unstable, and the client needs to render the received information after analyzing the received information, so that when the client loads a webpage containing the required information in the mobile internet, the client may need to wait for a long time, the webpage loading efficiency is low, and the mobile internet experience of the user is reduced. One study report indicates that approximately 47% of users expect that a web page that needs to be loaded will be loaded completely within two seconds, and if the page load time exceeds 3 seconds, approximately 40% of users will choose to leave or close the web page.
In order to improve the mobile internet experience of a user, an improved technical scheme adopted at present is to utilize a Skeleton screen (skeeleton) technology, that is, before page data contained in a target webpage returned by the mobile internet is not received, a rough structure of the webpage, that is, a Skeleton screen, is displayed for the user, until the requested page data is returned, the Skeleton screen is rendered according to the received page data, so that the loading of the webpage is completed, in the process, the user can sense that the webpage is being loaded, the occurrence of a white screen is avoided, the fluency is improved from the visual aspect, and the experience is good.
At present, when generating a skeleton screen, a designer generally generates a corresponding page structure diagram according to a page structure of a webpage after designing the webpage, and writes a code for implementing the skeleton screen by using the page structure diagram, thereby obtaining the skeleton screen and storing the skeleton screen. However, in the method for generating the skeleton screen, a designer needs to compile codes according to the page structure diagram of the web pages, each web page needs to compile codes and correspondingly set and store a skeleton screen, the time required for generating the skeleton screen is long, and the skeleton screen generation efficiency is low.
Disclosure of Invention
In view of this, the present invention provides a method and an apparatus for generating a skeleton screen, so as to improve the skeleton screen generation efficiency.
In a first aspect, an embodiment of the present invention provides a method for generating a skeleton screen, including:
receiving a webpage access request, and sending the webpage access request to a corresponding network server;
receiving cascading style sheet information returned by the network server in response to the webpage access request, wherein elements used for generating a skeleton screen in the cascading style sheet information are marked by class name labels;
acquiring azimuth information of the elements marked by class name labels from the cascading style sheet information;
and drawing according to the acquired azimuth information of each element to obtain the skeleton screen.
With reference to the first aspect, an embodiment of the present invention provides a first possible implementation manner of the first aspect, where the obtaining, from the cascading style sheet information, orientation information of an element labeled with a class name tag includes:
and calling a window, getcomputedstyle () method, acquiring style data of an element with a label as a class name label in the cascading style sheet information, and extracting azimuth information of the element from the style data.
With reference to the first possible implementation manner of the first aspect, an embodiment of the present invention provides a second possible implementation manner of the first aspect, where the performing rendering according to the acquired orientation information of each element includes:
for each acquired element, calculating an outer frame fillet according to shape information in the azimuth information of the element, if the calculated outer frame fillet is larger than a preset circular threshold, determining that the element is in a circular shape, and calling an SVG circular element skeleton color block drawing method for drawing; otherwise, determining that the element is the rectangular element, and calling an SVG rectangular element skeleton color block drawing method for drawing.
With reference to the second possible implementation manner of the first aspect, the present invention provides a third possible implementation manner of the first aspect, wherein the rectangular shape includes: the method for calling window.
Invoking a Web API interface element & getCl ientRects () method in a window & getcomputedStyle () method to obtain style data of elements in a circular shape and elements in a single-segment rectangular shape; calling a dom, getClientRects () method in a window, getComputedStyle () method to acquire the style data of each line in the elements of the multi-section rectangular shape;
the method for drawing the color block of the SVG rectangular element skeleton is called, and comprises the following steps:
calling an SVG single-segment rectangular element skeleton color block drawing method for drawing the single-segment rectangular elements;
and calling an SVG multi-segment rectangular element skeleton color block drawing method for the multi-segment rectangular elements to draw.
With reference to the first aspect and any one possible implementation manner of the first to third possible implementation manners of the first aspect, an embodiment of the present invention provides a fourth possible implementation manner of the first aspect, where the orientation information includes: shape, size, and location.
With reference to the fourth possible implementation manner of the first aspect, an embodiment of the present invention provides a fifth possible implementation manner of the first aspect, where the shape is determined according to an outer frame fillet, and the size includes: an element width and an element height, the positions including: the left margin of the element distance window and the upper margin of the element distance window.
With reference to the first aspect and any one possible implementation manner of the first to third possible implementation manners of the first aspect, an embodiment of the present invention provides a sixth possible implementation manner of the first aspect, where the method further includes:
editing the labels of the elements in the cascading style sheet information, wherein the editing comprises deleting the class name labels or adding the class name labels.
In a second aspect, an embodiment of the present invention further provides an apparatus for generating a skeleton screen, including:
the request module is used for receiving a webpage access request and sending the webpage access request to a corresponding network server;
the information receiving module is used for receiving cascading style sheet information returned by the network server in response to the webpage access request, wherein elements used for generating the skeleton screen are marked by class name labels in the cascading style sheet information;
the orientation information acquisition module is used for acquiring the orientation information of the elements marked by the class name labels from the cascading style sheet information;
and the drawing module is used for drawing according to the acquired azimuth information of each element to obtain the skeleton screen.
In a third aspect, an embodiment of the present application provides a computer device, which includes a memory, a processor, and a computer program stored on the memory and executable on the processor, and the processor implements the steps of the above method when executing the computer program.
In a fourth aspect, the present application provides a computer-readable storage medium, on which a computer program is stored, and the computer program, when executed by a processor, performs the steps of the method described above.
According to the method and the device for generating the skeleton screen, provided by the embodiment of the invention, the webpage access request is sent to the corresponding network server by receiving the webpage access request; receiving cascading style sheet information returned by the network server in response to the webpage access request, wherein elements used for generating a skeleton screen in the cascading style sheet information are marked by class name labels; acquiring azimuth information of the elements marked by class name labels from the cascading style sheet information; and drawing according to the acquired azimuth information of each element to obtain the skeleton screen. Therefore, the elements used for generating the skeleton screen are marked with the preset class name labels in the CSS information in advance, when the skeleton screen is generated, the elements marked with the class name labels in the CSS information are extracted, the azimuth information of the elements is obtained, the skeleton screen is automatically drawn according to the obtained azimuth information, the time required by a designer for coding is avoided, and the generation efficiency of the skeleton screen is improved.
In order to make the aforementioned and other objects, features and advantages of the present invention comprehensible, preferred embodiments accompanied with figures are described in detail below.
Drawings
In order to more clearly illustrate the technical solutions of the embodiments of the present invention, the drawings needed to be used in the embodiments will be briefly described below, it should be understood that the following drawings only illustrate some embodiments of the present invention and therefore should not be considered as limiting the scope, and for those skilled in the art, other related drawings can be obtained according to the drawings without inventive efforts.
FIG. 1 is a flow chart of a method for generating a skeleton screen according to an embodiment of the present invention;
FIG. 2 is a schematic structural diagram of an apparatus for generating a skeleton screen according to an embodiment of the present invention;
fig. 3 is a schematic structural diagram of a computer device according to an embodiment of the present application.
Detailed Description
In order to make the objects, technical solutions and advantages of the embodiments of the present invention clearer, the technical solutions in the embodiments of the present invention will be clearly and completely described below with reference to the drawings in the embodiments of the present invention, and it is obvious that the described embodiments are only a part of the embodiments of the present invention, and not all of the embodiments. The components of embodiments of the present invention generally described and illustrated in the figures herein may be arranged and designed in a wide variety of different configurations. Thus, the following detailed description of the embodiments of the present invention, presented in the figures, is not intended to limit the scope of the invention, as claimed, but is merely representative of selected embodiments of the invention. All other embodiments, which can be derived by a person skilled in the art from the embodiments of the present invention without making any creative effort, shall fall within the protection scope of the present invention.
The embodiment of the invention provides a method and a device for generating a skeleton screen, which are described by the embodiment below.
Fig. 1 shows a flowchart of a method for generating a skeleton screen according to an embodiment of the present invention. As shown in fig. 1, the method includes:
In the embodiment of the invention, when a user needs to access a webpage, a webpage access request is initiated to the client. The client analyzes the webpage access request, acquires a domain name corresponding to the webpage access request, analyzes the domain name, acquires an IP address of the domain name, and sends the webpage access request to a network server corresponding to the IP address. For example, the user inputs a domain name corresponding to a web page to be accessed in a browser address bar of the client and returns, or clicks a displayed link, and it may be determined that a web page access request is initiated. Illustratively, the user inputs www.a.com in the address bar of the browser and returns, or the user clicks one link "SVG tutorial" in www.a.com web page displayed in the browser, so as to determine that the user initiates the web page access request through the client.
In the embodiment of the invention, when the client loads the webpage, the client needs to request the webpage information of the webpage from the network server by initiating the webpage access request. The web page information includes: HyperText Markup Language (HTML) file information, Cascading Style Sheets (CSS) information, and the like. The HTML file information includes web page document information, i.e., data content displayed in a web page, and the CSS information is used to provide a style structure of the web page.
In the prior art, when a web page is loaded, a web server responds to a web page access request and feeds back a data packet for page loading, that is, web page information, where the data packet includes data (CSS information) for generating a skeleton screen and data (HTML file information) for normal web page loading, and after receiving the data packet, a client first loads the skeleton screen, and after completing normal web page loading, the skeleton screen is replaced with a normal web page.
And step 102, receiving cascading style sheet information returned by the network server in response to the webpage access request, wherein elements used for generating the skeleton screen are marked by class name labels in the cascading style sheet information.
In the embodiment of the invention, HTML file information in the webpage information is used for displaying webpage document information, and CSS information is used for providing a style structure of the webpage. Because the style structure of the skeleton screen is similar to that of the webpage, compared with the style structure of the webpage, the structure of the skeleton screen is simpler, namely, only part of specific HTML elements are used for drawing the skeleton screen for the elements in the cascading style sheet information, and therefore, the elements are marked for drawing the skeleton screen by setting the preset class name tags for the part of specific HTML elements, so that the skeleton screen can be constructed by utilizing CSS information. Exemplarily, in the embodiment of the present invention, when a designer designs a web page (DOM structure), for an element that needs to be used for a skeleton screen in the web page, on the basis of keeping an original tag, a class name tag representing the element for generating the skeleton screen is further set for the element to mark the element for generating the skeleton screen, and in subsequent applications, the designer may start to search from a body tag in the DOM structure, recursively find all marked elements, and obtain the element of which the tag is the class name tag. Therefore, designers do not need to write codes respectively according to the page structure diagram of each webpage, and only need to set class name tags for representing the skeleton screen for elements used for the skeleton screen, so that the generation of the skeleton screen can be realized by utilizing CSS information of the original webpage, the time required for generating the skeleton screen is effectively reduced, and the generation efficiency of the skeleton screen is improved; furthermore, the skeleton screen does not need to be stored, and the storage space is saved.
In the embodiment of the invention, for the webpages corresponding to different webpage access requests, the data volume of the corresponding webpage information is different due to different page structures and nested levels, and for the condition of small data volume, when the webpage is loaded, the webpage loading response speed is high, and the visual experience of a user can be met, so that the skeleton screen does not need to be preloaded for the webpages. As an alternative embodiment, the method further comprises:
responding to the webpage access request, and acquiring webpage information of a webpage corresponding to the webpage access request;
and based on the current network transmission performance and the data volume of the webpage information, if the transmission time for transmitting the webpage information does not exceed a preset transmission time threshold value, transmitting the webpage information, otherwise, transmitting the cascading style sheet information in the webpage information.
In the embodiment of the present invention, the transmission time threshold is a time that does not cause the user visual experience to be smooth, for example, 2 seconds, 3 seconds, and the like, and if the transmission time threshold is exceeded, the user visual experience is not smooth.
In the embodiment of the present invention, after receiving the web page information, the client further needs to analyze the web page information, first analyzes the CSS information, obtains the style structure of the web page, then analyzes the HTML file information, obtains the web page document information, fills the web page document information obtained by the analysis to the corresponding position in the style structure, and renders the web page, so as to present a complete web page to the user, and therefore, the generation time of the web page is not only related to the transmission time, but also related to the analysis performance of the client, as another optional embodiment, the web page access request includes the client performance parameters, and the method further includes:
responding to the webpage access request, and acquiring webpage information of a webpage corresponding to the webpage access request;
determining transmission time for transmitting the webpage information based on the current network transmission performance and the data volume of the webpage information;
determining the analysis time required by the client to analyze the webpage information based on the client performance parameters contained in the webpage access request;
and calculating the sum of the transmission time and the analysis time, if the sum does not exceed a preset webpage loading time threshold, transmitting the webpage resources, and otherwise, transmitting the cascading style sheet information in the webpage resources.
In the embodiment of the present invention, when a user accesses a web page, the web page may have an access right, and if the user accessing the web page does not have a corresponding access right, the user may not be allowed to access the web page, so as to be an optional embodiment, the method further includes:
and performing access authentication on a client corresponding to the webpage access request, responding to the webpage access request if the client does not have the right of accessing the webpage, returning a preset non-right access webpage, and executing the step of acquiring webpage information of the webpage corresponding to the webpage access request if the client has the right of accessing the webpage.
In the embodiment of the invention, after a user initiates webpage access, as an optional embodiment, the judgment can be carried out according to the authority of the user initiating the access, if the user does not have the right to access the webpage, the non-authority access webpage containing characters such as 'you do not have the authority to access the webpage' and the like can be returned to the mobile terminal; as another optional embodiment, the skeleton screen of the embodiment of the present invention may be displayed to the user initiating access, and then, the judgment is performed according to the authority of the user initiating access, and if the user does not have the right to access the web page, the no-authority access web page including the word "no-authority access" or the like may be returned to the client to replace the displayed skeleton screen.
In the embodiment of the invention, each element in the CSS information is traversed, the read tag is an element of a class name tag used for representing the skeleton screen, and the orientation information of the element is obtained from the CSS information describing the element so as to generate the skeleton screen.
In the embodiment of the present invention, the azimuth information includes: shape, size, position.
In the embodiment of the invention, the acquisition of the azimuth information can be realized by a function calling method. As an alternative embodiment, obtaining the orientation information of the element marked with the class name tag from the cascading style sheet information includes:
and calling a window, getcomputedstyle () method, acquiring style data of an element with a label as a class name label in the cascading style sheet information, and extracting azimuth information of the element from the style data.
In the embodiment of the present invention, after an element with a class name tag is obtained, the style data range of the element is located, and the orientation information in the style data of the element can be obtained by calling a window. In practical applications, the style data may include orientation information representing orientations from different dimensions or different granularities, and the different orientation information needs to be distinguished, as an optional embodiment, the shape includes an outer frame fillet, and the size includes: element width (offsetWidth) and element height (offsetHeight), positions including: element-to-window left margin (offsetLeft) and element-to-window top margin (offsetTop).
And 104, drawing according to the acquired azimuth information of each element to obtain a skeleton screen.
In the embodiment of the present invention, as an optional embodiment, a skeleton screen generation tool may be used to generate the graphic color blocks corresponding to the elements, and then the graphic color blocks are spliced to obtain the skeleton screen.
In the embodiment of the present invention, as an optional embodiment, the skeleton screen generating tool includes: scalable Vector Graphics (SVG), skeletal screen Page plug-in (PSWP), and the like. SVG is a graphic format based on eXtensible Markup Language (XML) for describing two-dimensional vector graphics. By taking SVG as an example, the length, width, position and color of elements are input in an XML language mode, and then actual corresponding graph color blocks can be drawn, the code quantity for drawing a skeleton screen is small, the execution efficiency is high, the drawing of a large number of elements can be realized, and each graph color block drawn by the SVG is an independent DOM node and can be conveniently bound with events or modified, so that the SVG is selected for drawing the elements to form the graph color blocks of the skeleton screen exemplarily.
In the embodiment of the invention, the skeleton screen is used for occupying the webpage corresponding to the webpage access request, so that the blank screen time can be reduced, and the visual experience of a user can be improved.
In the embodiment of the invention, through statistical analysis, the shapes of the elements in the front-end page corresponding to the skeleton screen are basically a circular shape (such as a head portrait) and a rectangular shape (such as a picture, a big button, a carousel and a plurality of lines of characters), and the situations that the elements are in a non-circular shape or a non-rectangular shape are rare, so that the embodiment of the invention respectively sets the corresponding SVG shape drawing methods for the circular shape and the rectangular shape to further improve the drawing efficiency of the skeleton screen. Therefore, as an alternative embodiment, the drawing according to the acquired orientation information of each element includes:
for each acquired element, calculating an outer frame fillet according to shape information in the azimuth information of the element, if the calculated outer frame fillet is larger than a preset circular threshold, determining that the element is in a circular shape, and calling an SVG circular element skeleton color block drawing method for drawing; otherwise, determining that the element is the rectangular element, and calling an SVG rectangular element skeleton color block drawing method for drawing.
In the embodiment of the present invention, as an alternative embodiment, the circular threshold may be set to 50%.
In the embodiment of the invention, the code segment of the SVG circular element skeleton color block drawing method is as follows:
<svg>
<circle cx＝"30"cy＝"30"r＝"30"/>
</svg>
wherein, cx, cy and r respectively correspond to the x axis, the y axis and the radius length of the circle center of the color block of the drawn graph.
The code segment of the SVG rectangular element skeleton color block drawing method is as follows:
<svg>
<rect x＝"10"y＝"10"width＝"100"height＝"100"/>
</svg>
wherein, x, y, width and height respectively correspond to the x axis, y axis, length and width of the position of the color block of the drawn graph.
In the embodiment of the invention, as an optional embodiment, in the CSS information, the elements used for generating the skeleton screen are labeled with the labels sk, and multiple rectangular elements are labeled with the labels span, for the rectangular shape, the picture, the large button, the carousel and the like are single-row rectangles, and for the multiple-row characters, the multiple-row rectangles are multiple-row rectangles. In this way, when drawing is performed, whether an element (which can be called an inline element) marked with span exists is determined from the marked elements, if so, the element is determined to be a multi-segment rectangular element, and the element is divided into a multi-segment rectangular group; for elements that are not labeled with span (which may be referred to as block-level elements), elements that are determined to be circular are divided into circular groups and elements that are determined not to be circular are divided into single-segment rectangular groups by calculating the outer border rounded corners. When drawing, the multi-segment rectangle elements are used for circularly filling the multi-segment rectangle group, the circular elements are used for circularly filling the circular group, and the single-segment rectangle elements are used for circularly filling the single-segment rectangle group.
In the embodiment of the present invention, as an alternative embodiment, the rectangular shape includes: invoking a window. getcomputedstyle () method to obtain style data of an element labeled as a class name label in cascading style sheet information, wherein the style data comprises:
invoking a Web API interface element & getCl ientRects () method in a window & getcomputedStyle () method to obtain style data of elements in a circular shape and elements in a single-segment rectangular shape; calling a dom, getClientRects () method in a window, getComputedStyle () method to acquire the style data of each line in the elements of the multi-section rectangular shape;
calling a SVG rectangular element skeleton color block drawing method for drawing, wherein the method comprises the following steps:
calling an SVG single-segment rectangular element skeleton color block drawing method for drawing the single-segment rectangular elements;
and calling an SVG multi-segment rectangular element skeleton color block drawing method for the multi-segment rectangular elements to draw.
In the embodiment of the invention, the method for drawing the SVG rectangular element skeleton color block comprises the following steps: an SVG single-segment rectangular element skeleton color block drawing method and an SVG multi-segment rectangular element skeleton color block drawing method. For a plurality of sections of rectangular elements in the rectangular elements, a class element label (span) can be set for the element in the designed webpage information, and the position and the size of each line of characters in a plurality of lines of characters can be obtained by a dom.
In the embodiment of the invention, according to the shape of the class name label element, calling a corresponding sub-method in a window. getcomputedstyle () method to obtain the style data, then calling a corresponding SVG skeleton color block drawing method, and drawing according to the obtained style data. For example, for a circular shape and a single-segment rectangular shape, a Web API (application program interface) element. getCl ientRects () method is called to obtain corresponding style data, an SVG circular element skeleton color block drawing method is called to draw elements of the circular shape, and an SVG single-segment rectangular element skeleton color block drawing method is called to draw elements of the single-segment rectangular shape; calling a dom.getClientRects () method to acquire style data of each line in the elements of the multi-section rectangular shape, and calling an SVG multi-section rectangular element skeleton color block drawing method to draw the elements of the multi-section rectangular shape; for elements with other shapes, because the browser webAPI does not have a method for acquiring the size and position parameters of the triangle or other polygon elements, custom drawing is performed by transmitting a color block drawing method of other element frameworks of the SVG.
In this embodiment of the present invention, as an optional embodiment, the method further includes:
editing the labels of the elements in the cascading style sheet information, wherein the editing comprises deleting the class name labels or adding the class name labels.
In the embodiment of the invention, the socket function can be utilized to transmit the corresponding class name elements of the SVG, for example, according to the actual display requirement, the class name element labels of the skeleton screen elements which do not need to be displayed are removed, or the class name element labels used for representing the skeleton screen elements are added to other elements in the information of the cascading style sheet, so that the other elements are displayed as the elements of the skeleton screen.
In this embodiment of the present invention, as an optional embodiment, the method further includes:
and setting animation for the graphic color blocks in the skeleton screen.
In the embodiment of the invention, the animation is set for the graphic color block, so that the set animation is operated when the skeleton screen is loaded, and the visual experience of a user can be enhanced.
According to the method for generating the skeleton screen, when a webpage is designed, the elements used for the skeleton screen are marked with the preset class name tags in the CSS information, when the skeleton screen is generated, the elements containing the tags are traversed from the CSS information, the elements marked with the class name tags are extracted, the azimuth information of the elements is obtained, and the color blocks of the skeleton screen are drawn according to the obtained azimuth information, so that the color blocks of the skeleton screen are automatically generated, a designer does not need to write and pre-draw codes, the time required for manually writing the skeleton screen by the designer is reduced, the efficiency of skeleton screen generation is improved, the designer can pay more attention to the development of app logic codes, and the iteration speed of apps is accelerated.
Fig. 2 is a schematic structural diagram of an apparatus for generating a skeleton screen according to an embodiment of the present invention. As shown in fig. 2, the apparatus includes:
the request module 201 is configured to receive a web page access request, and send the web page access request to a corresponding web server;
in the embodiment of the invention, when the client loads the webpage, the client needs to request the webpage information of the webpage from the network server. The web page information includes: HTML file information, CSS information, etc. The HTML file information includes web page document information, i.e., data content displayed in a web page, and the CSS information is used to provide a style structure of the web page.
An information receiving module 202, configured to receive cascading style sheet information returned by the network server in response to the web page access request, where in the cascading style sheet information, an element used for generating a skeleton screen is marked with a class name tag;
in the embodiment of the invention, the style structure of the skeleton screen is similar to that of the webpage, and only part of HTML elements in the information of the cascading style sheet are used for drawing the skeleton screen.
The orientation information acquisition module 203 is used for acquiring orientation information of the elements marked by class name labels from the cascading style sheet information;
and the drawing module 204 is configured to draw according to the acquired azimuth information of each element to obtain a skeleton screen.
In the embodiment of the present invention, as an optional embodiment, the skeleton screen generating tool includes: SVG, PSWP, and the like.
In this embodiment of the present invention, as an optional embodiment, the orientation information obtaining module 203 includes:
and the method calling unit is used for calling a window. getcomputedstyle () method, acquiring the style data of the element with the label as the class name label in the information of the cascading style sheet, and extracting the azimuth information of the element from the style data.
In this embodiment of the present invention, as an optional embodiment, the drawing module 204 includes:
the calculation unit is used for calculating the fillet of the outer frame according to the shape information in the azimuth information of each acquired element;
if the calculated fillet of the outer frame is larger than a preset circular threshold value, the processing unit determines that the element is a circular element and invokes an SVG circular element skeleton color block drawing method to draw; otherwise, determining that the element is the rectangular element, and calling an SVG rectangular element skeleton color block drawing method for drawing.
In the embodiment of the present invention, as an alternative embodiment, the rectangular shape includes: the method for calling window.
Invoking a Web API interface element & getClientRects () method in a window & getcomputedStyle () method to obtain style data of elements in a circular shape and elements in a single-segment rectangular shape; calling a dom, getClientRects () method in a window, getComputedStyle () method to acquire the style data of each line in the elements of the multi-section rectangular shape;
the method for drawing the color block of the SVG rectangular element skeleton is called, and comprises the following steps:
calling an SVG single-segment rectangular element skeleton color block drawing method for drawing the single-segment rectangular elements;
and calling an SVG multi-segment rectangular element skeleton color block drawing method for the multi-segment rectangular elements to draw.
In this embodiment of the present invention, as an optional embodiment, the orientation information includes: shape, size, and location. Wherein, the shape is confirmed according to outline fillet, and the size includes: element width and element height, position including: the left margin of the element distance window and the upper margin of the element distance window.
In this embodiment of the present invention, as an optional embodiment, the apparatus further includes:
and an editing module (not shown in the figure) for editing the labels of the elements in the cascading style sheet information, wherein the editing comprises deleting the class name labels or adding the class name labels.
In the embodiment of the present invention, as an optional embodiment, the network server may be further configured to respond to the web page access request, and obtain web page information of a web page corresponding to the web page access request;
and based on the current network transmission performance and the data volume of the webpage information, if the transmission time for transmitting the webpage information does not exceed a preset transmission time threshold value, transmitting the webpage information, otherwise, transmitting the cascading style sheet information in the webpage information.
In this embodiment of the present invention, as another optional embodiment, the web page access request includes a client performance parameter, and the web server may be further configured to:
responding to the webpage access request, and acquiring webpage information of a webpage corresponding to the webpage access request;
determining transmission time for transmitting the webpage information based on the current network transmission performance and the data volume of the webpage information;
determining the analysis time required by the client to analyze the webpage information based on the client performance parameters contained in the webpage access request;
and calculating the sum of the transmission time and the analysis time, if the sum does not exceed a preset webpage loading time threshold, transmitting the webpage resources, and otherwise, transmitting the cascading style sheet information in the webpage resources.
In this embodiment of the present invention, as yet another optional embodiment, the network server may further be configured to:
and performing access authentication on a client corresponding to the webpage access request, responding to the webpage access request if the client does not have the right of accessing the webpage, returning a preset non-right access webpage, and executing the step of acquiring webpage information of the webpage corresponding to the webpage access request if the client has the right of accessing the webpage.
As shown in fig. 3, an embodiment of the present application provides a computer device 300, configured to execute the method for generating the skeleton screen in fig. 1, where the device includes a memory 301, a processor 302 connected to the memory 301 through a bus, and a computer program stored in the memory 301 and executable on the processor 302, where the processor 302 implements the steps of the method for generating the skeleton screen when executing the computer program.
Specifically, the memory 301 and the processor 302 can be general-purpose memory and processor, and are not limited to this, and when the processor 302 runs the computer program stored in the memory 301, the method for generating the skeleton screen can be executed.
Corresponding to the method for generating the skeleton screen in fig. 1, an embodiment of the present application further provides a computer-readable storage medium, on which a computer program is stored, and the computer program, when executed by a processor, performs the steps of the method for generating the skeleton screen.
Specifically, the storage medium can be a general-purpose storage medium, such as a removable disk, a hard disk, or the like, and when the computer program on the storage medium is executed, the method for generating the skeleton screen can be executed.
In the embodiments provided in the present application, it should be understood that the disclosed system and method may be implemented in other ways. The above-described system embodiments are merely illustrative, and for example, the division of the units is only one logical functional division, and there may be other divisions in actual implementation, and for example, a plurality of units or components may be combined or integrated into another system, or some features may be omitted, or not executed. In addition, the shown or discussed mutual coupling or direct coupling or communication connection may be an indirect coupling or communication connection of systems or units through some communication interfaces, and may be in an electrical, mechanical or other form.
The units described as separate parts may or may not be physically separate, and parts displayed as units may or may not be physical units, may be located in one place, or may be distributed on a plurality of network units. Some or all of the units can be selected according to actual needs to achieve the purpose of the solution of the embodiment.
In addition, functional units in the embodiments provided in the present application may be integrated into one processing unit, or each unit may exist alone physically, or two or more units are integrated into one unit.
The functions, if implemented in the form of software functional units and sold or used as a stand-alone product, may be stored in a computer readable storage medium. Based on such understanding, the technical solution of the present application or portions thereof that substantially contribute to the prior art may be embodied in the form of a software product stored in a storage medium and including instructions for causing a computer device (which may be a personal computer, a server, or a network device) to execute all or part of the steps of the method according to the embodiments of the present application. And the aforementioned storage medium includes: various media capable of storing program codes, such as a usb disk, a removable hard disk, a Read-Only Memory (ROM), a Random Access Memory (RAM), a magnetic disk, or an optical disk.
It should be noted that: like reference numbers and letters refer to like items in the following figures, and thus once an item is defined in one figure, it need not be further defined and explained in subsequent figures, and moreover, the terms "first", "second", "third", etc. are used merely to distinguish one description from another and are not to be construed as indicating or implying relative importance.
Finally, it should be noted that: the above-mentioned embodiments are only specific embodiments of the present application, and are used for illustrating the technical solutions of the present application, but not limiting the same, and the scope of the present application is not limited thereto, and although the present application is described in detail with reference to the foregoing embodiments, those skilled in the art should understand that: any person skilled in the art can modify or easily conceive the technical solutions described in the foregoing embodiments or equivalent substitutes for some technical features within the technical scope disclosed in the present application; such modifications, changes or substitutions do not depart from the spirit and scope of the present disclosure, which should be construed in light of the above teachings. Are intended to be covered by the scope of the present application. Therefore, the protection scope of the present application shall be subject to the protection scope of the claims.
Claims (10)
1. A method of generating a skeletal screen, comprising:
receiving a webpage access request, and sending the webpage access request to a corresponding network server;
receiving cascading style sheet information returned by the network server in response to the webpage access request, wherein elements used for generating a skeleton screen in the cascading style sheet information are marked by class name labels;
acquiring azimuth information of the elements marked by class name labels from the cascading style sheet information;
and drawing according to the acquired azimuth information of each element to obtain the skeleton screen.
2. The method according to claim 1, wherein the obtaining orientation information of the element marked with the class name tag from the cascading style sheet information comprises:
and calling a window, getcomputedstyle () method, acquiring style data of an element with a label as a class name label in the cascading style sheet information, and extracting azimuth information of the element from the style data.
3. The method of claim 2, wherein the rendering according to the obtained orientation information of each element comprises:
for each acquired element, calculating an outer frame fillet according to shape information in the azimuth information of the element, if the calculated outer frame fillet is larger than a preset circular threshold, determining that the element is in a circular shape, and calling an SVG circular element skeleton color block drawing method for drawing; otherwise, determining that the element is the rectangular element, and calling an SVG rectangular element skeleton color block drawing method for drawing.
4. The method of claim 3, wherein the rectangular shape comprises: the method for calling window.
Invoking a Web API interface element & getClientRects () method in a window & getcomputedStyle () method to obtain style data of elements in a circular shape and elements in a single-segment rectangular shape; calling a dom, getClientRects () method in a window, getComputedStyle () method to acquire the style data of each line in the elements of the multi-section rectangular shape;
the method for drawing the color block of the SVG rectangular element skeleton is called, and comprises the following steps:
calling an SVG single-segment rectangular element skeleton color block drawing method for drawing the single-segment rectangular elements;
and calling an SVG multi-segment rectangular element skeleton color block drawing method for the multi-segment rectangular elements to draw.
5. The method of any of claims 1 to 4, wherein the orientation information comprises: shape, size, and location.
6. The method of claim 5, wherein the shape is determined from outside frame corners and the size comprises: an element width and an element height, the positions including: the left margin of the element distance window and the upper margin of the element distance window.
7. The method of any of claims 1 to 4, further comprising:
editing the labels of the elements in the cascading style sheet information, wherein the editing comprises deleting the class name labels or adding the class name labels.
8. An apparatus for generating a skeletal screen, comprising:
the request module is used for receiving a webpage access request and sending the webpage access request to a corresponding network server;
the information receiving module is used for receiving cascading style sheet information returned by the network server in response to the webpage access request, wherein elements used for generating the skeleton screen are marked by class name labels in the cascading style sheet information;
the orientation information acquisition module is used for acquiring the orientation information of the elements marked by the class name labels from the cascading style sheet information;
and the drawing module is used for drawing according to the acquired azimuth information of each element to obtain the skeleton screen.
9. A computer device, comprising: a processor, a memory and a bus, the memory storing machine-readable instructions executable by the processor, the processor and the memory communicating over the bus when a computer device is run, the machine-readable instructions when executed by the processor performing the steps of the method of generating a skeletal screen as claimed in any of claims 1 to 7.
10. A computer-readable storage medium, having stored thereon a computer program which, when being executed by a processor, carries out the steps of the method of generating a skeleton screen according to any one of claims 1 to 7.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202111305673.4A CN114065071A (en) | 2021-11-05 | 2021-11-05 | A method and device for generating a skeleton screen |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202111305673.4A CN114065071A (en) | 2021-11-05 | 2021-11-05 | A method and device for generating a skeleton screen |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN114065071A true CN114065071A (en) | 2022-02-18 |
Family
ID=80274159
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202111305673.4A Pending CN114065071A (en) | 2021-11-05 | 2021-11-05 | A method and device for generating a skeleton screen |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN114065071A (en) |
Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN109254773A (en) * | 2018-09-19 | 2019-01-22 | 广州视源电子科技股份有限公司 | Skeleton page generation method, device, equipment and storage medium |
| CN109992736A (en) * | 2019-03-20 | 2019-07-09 | 腾讯科技（深圳）有限公司 | Webpage dynamically load effect implementation method, device, terminal and storage medium |
| CN110275705A (en) * | 2019-06-19 | 2019-09-24 | 北京三快在线科技有限公司 | Generate method, apparatus, equipment and the storage medium for preloading page code |
| WO2021218327A1 (en) * | 2020-04-27 | 2021-11-04 | 腾讯科技（深圳）有限公司 | Page processing method and related device |
-
2021
- 2021-11-05 CN CN202111305673.4A patent/CN114065071A/en active Pending
Patent Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN109254773A (en) * | 2018-09-19 | 2019-01-22 | 广州视源电子科技股份有限公司 | Skeleton page generation method, device, equipment and storage medium |
| CN109992736A (en) * | 2019-03-20 | 2019-07-09 | 腾讯科技（深圳）有限公司 | Webpage dynamically load effect implementation method, device, terminal and storage medium |
| CN110275705A (en) * | 2019-06-19 | 2019-09-24 | 北京三快在线科技有限公司 | Generate method, apparatus, equipment and the storage medium for preloading page code |
| WO2021218327A1 (en) * | 2020-04-27 | 2021-11-04 | 腾讯科技（深圳）有限公司 | Page processing method and related device |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN102779167B (en) | The method and system of display web page in the terminal | |
| CN106294658B (en) | Webpage quick display method and device | |
| KR20150079867A (en) | Html5-protocol-based webpage presentation method and device | |
| CN102547450B (en) | Delayed image decoding | |
| AU2020352890B2 (en) | Dynamic typesetting | |
| CN112711729A (en) | Rendering method and device based on page animation, electronic equipment and storage medium | |
| CN114791988A (en) | Browser-based PDF file analysis method, system and storage medium | |
| CN111915705B (en) | Picture visual editing method, device, equipment and medium | |
| CN111460342B (en) | Page rendering display method and device, electronic equipment and computer storage medium | |
| CN112800372B (en) | Page loading method and device and electronic equipment | |
| CN104156421A (en) | Method, device and system for displaying page | |
| JP5612556B2 (en) | Applying a passfill algorithm when laying out text around objects | |
| CN112861481A (en) | Paging processing method and device, electronic equipment and computer readable storage medium | |
| CN108133029B (en) | Map element adjusting method, device and equipment and computer-readable storage medium | |
| CN115659087B (en) | Page rendering method, equipment and storage medium | |
| US20110055258A1 (en) | Method and apparatus for the page-by-page provision of an electronic document as a computer graphic | |
| CN114065071A (en) | A method and device for generating a skeleton screen | |
| CN110209965B (en) | Method and apparatus for displaying information | |
| CN109240660B (en) | Access method of advertisement data, storage medium, electronic device and system | |
| CN113096217B (en) | Picture generation method and device, electronic equipment and storage medium | |
| CN114791989A (en) | Method, system and storage medium for analyzing PSD file based on browser | |
| CN114756797A (en) | Page processing method and device, electronic equipment and storage medium | |
| JP6108105B2 (en) | Article image reconstruction device | |
| CN113297859A (en) | Table information translation method and device and electronic equipment | |
| CN113254128A (en) | Project page loading method and device, computer equipment and storage medium |
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 |