CN117540118A - Skeleton screen page generation method, device and equipment - Google Patents
Skeleton screen page generation method, device and equipment Download PDFInfo
- Publication number
- CN117540118A CN117540118A CN202311480376.2A CN202311480376A CN117540118A CN 117540118 A CN117540118 A CN 117540118A CN 202311480376 A CN202311480376 A CN 202311480376A CN 117540118 A CN117540118 A CN 117540118A
- Authority
- CN
- China
- Prior art keywords
- page
- skeleton screen
- target
- screen
- skeleton
- 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 63
- 238000009877 rendering Methods 0.000 claims abstract description 83
- 230000008569 process Effects 0.000 claims abstract description 25
- 238000002372 labelling Methods 0.000 claims description 17
- 238000013515 script Methods 0.000 claims description 14
- 238000012545 processing Methods 0.000 claims description 6
- 238000004590 computer program Methods 0.000 claims description 4
- 239000008186 active pharmaceutical agent Substances 0.000 description 5
- 238000011161 development Methods 0.000 description 5
- 238000010586 diagram Methods 0.000 description 4
- VYZAMTAEIAYCRO-UHFFFAOYSA-N Chromium Chemical compound [Cr] VYZAMTAEIAYCRO-UHFFFAOYSA-N 0.000 description 3
- 238000005516 engineering process Methods 0.000 description 3
- 230000006870 function Effects 0.000 description 3
- 238000003780 insertion Methods 0.000 description 3
- 230000037431 insertion Effects 0.000 description 3
- 230000003068 static effect Effects 0.000 description 3
- 230000000007 visual effect Effects 0.000 description 3
- 230000006399 behavior Effects 0.000 description 2
- 239000003086 colorant Substances 0.000 description 1
- 238000013480 data collection Methods 0.000 description 1
- 230000000694 effects Effects 0.000 description 1
- 230000003993 interaction Effects 0.000 description 1
- 230000002452 interceptive effect Effects 0.000 description 1
- 239000003550 marker Substances 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 238000012360 testing method Methods 0.000 description 1
Abstract
The application provides a skeleton screen page generation method, device and equipment. The skeleton screen page generation method provided by the application comprises the following steps: calling a headless browser to load a compiled target H5 page; the target H5 page has a real page rendering state and a skeleton screen page rendering state; the headless browser judges whether the target H5 page is in a skeleton screen rendering state or not in the process of loading the target H5 page; if yes, rendering a skeleton screen page corresponding to the target H5 page, and grabbing skeleton screen elements of a specified type from the skeleton screen page after the rendering is completed; and adding the skeleton screen element to the target H5 page to obtain an updated H5 page added with the skeleton screen element, so that when the updated H5 page is loaded, a skeleton screen page corresponding to the updated H5 page is generated based on the skeleton screen element. The method, the device and the equipment for generating the skeleton screen page can reduce the white screen waiting time when the browser loads the page.
Description
Technical Field
The present application relates to the field of web page technologies, and in particular, to a method, an apparatus, and a device for generating a skeleton screen page.
Background
In the process of loading and displaying a page (such as a webpage or a page in a certain application program), a certain time is required to be spent, and a user needs to wait in the time period, so that in order to improve the user experience in the process of loading the page, a skeleton screen page corresponding to the page can be generated before loading the page and displaying the page.
When the page is not rendered, the basic outline of the page is roughly outlined by using a plurality of simple graphs, the illusion that the page is being loaded is given to the user, and the skeleton screen page is replaced by the real page after the page is rendered, so that the time of the white screen of the page is reduced, and better experience is brought to the user.
At present, hypertext markup language (HyperTextMarkup Language), abbreviated as HTML)/cascading style sheets (Cascading Style Sheets, CSS)/JavaScript are often used for writing skeleton screen page codes, and corresponding skeleton screen page codes are operated when a browser loads a page, but this can cause the page to compile a JavaScript file with larger volume, block the rendering of the page, and cause a longer white screen waiting time when the browser loads the page.
Disclosure of Invention
In view of the above, the present application provides a method, an apparatus, and a device for generating a skeleton screen page, which are used for solving the problem of excessively long waiting time of loading a web page white screen by a browser.
Specifically, the application is realized by the following technical scheme:
the first aspect of the application provides a skeleton screen page generation method, which comprises the following steps:
calling a headless browser to load a compiled target H5 page; the target H5 page has a real page rendering state and a skeleton screen page rendering state;
the headless browser judges whether the target H5 page is in a skeleton screen rendering state or not in the process of loading the target H5 page;
if yes, rendering a skeleton screen page corresponding to the target H5 page, and grabbing skeleton screen elements of a specified type from the skeleton screen page after the rendering is completed;
and adding the skeleton screen element to the target H5 page to obtain an updated H5 page added with the skeleton screen element, so that when the updated H5 page is loaded, a skeleton screen page corresponding to the updated H5 page is generated based on the skeleton screen element.
Optionally, the skeleton screen elements of the specified type include a dot mark element, a picture element, a style element and a script element.
Optionally, the adding the skeleton screen element to the target H5 page includes:
determining the labeling position of the target H5 page; the marking position is used for indicating the position of the target H5 page embedded in the skeleton screen code;
and embedding the skeleton screen element into the labeling position to obtain an updated H5 page added with the skeleton screen element.
Optionally, in the process of loading the target H5 page, the headless browser further includes:
the dynamic data network request is disabled.
Optionally, the determining whether the target H5 page is in a skeleton screen rendering state includes:
judging whether the target H5 page carries a skeleton screen mark or not;
if yes, determining that the target H5 page is in a skeleton screen rendering state.
In a second aspect of the present application, a device for generating a skeleton screen page is provided, where the device includes a loading module, a processing module, and an updating module; wherein,
the loading module is used for calling the headless browser to load the compiled target H5 page; the target H5 page has a real page rendering state and a skeleton screen page rendering state;
the headless browser judges whether the target H5 page is in a skeleton screen rendering state or not in the process of loading the target H5 page, and renders a skeleton screen page corresponding to the target H5 page when judging that the target H5 page is in the skeleton screen rendering state;
the processing module is used for grabbing framework screen elements of a specified type from the framework screen page after rendering is completed;
the updating module is used for adding the skeleton screen element to the target H5 page to obtain an updated H5 page added with the skeleton screen element, so that when the updated H5 page is loaded, a skeleton screen page corresponding to the updated H5 page is generated based on the skeleton screen element.
Optionally, the skeleton screen elements of the specified type include a dot mark element, a picture element, a style element and a script element.
Optionally, the updating module is specifically configured to determine a labeling position of the target H5 page, and embed the skeleton screen element into the labeling position to obtain an updated H5 page with the skeleton screen element attached thereto; wherein the labeling position is used for indicating the position of the target H5 page embedded in the skeleton screen code,
optionally, the headless browser disables the dynamic data network request in the process of loading the target H5 page.
Optionally, the determining whether the target H5 page is in a skeleton screen rendering state includes:
judging whether the target H5 page carries a skeleton screen mark or not;
if yes, determining that the target H5 page is in a skeleton screen rendering state.
A third aspect of the present application provides a skeletal screen page generating device comprising a memory, a processor and a computer program stored on the memory and executable on the processor, the processor implementing the steps of the method of any one of the first aspects of the present application when the program is executed by the processor.
A fourth aspect of the present application provides a storage medium having stored thereon a program which when executed by a processor performs the steps of the method according to any of the first aspects of the present application.
According to the skeleton screen page generation method, device and equipment, the compiled target H5 page with the real page rendering state and the skeleton screen page rendering state is loaded through calling the headless browser, the headless browser judges whether the target H5 page is in the skeleton screen rendering state or not in the process of loading the target H5 page, if yes, the skeleton screen page corresponding to the target H5 page is rendered, after the rendering is completed, skeleton screen elements of a specified type are grabbed from the skeleton screen page, and therefore the skeleton screen elements are added to the target H5 page, an updated H5 page with the skeleton screen elements is obtained, and when the updated H5 page is loaded, the skeleton screen page corresponding to the updated H5 page is generated based on the skeleton screen elements. Therefore, when the H5 page is loaded and updated, the skeleton screen page can be directly rendered by using the skeleton screen element under the condition that the JavaScript file is not loaded and operated, and the white screen waiting time when the browser loads the page can be reduced.
Drawings
FIG. 1 is a flowchart of a first embodiment of a method for generating a skeleton screen page provided in the present application;
FIG. 2 is a hardware structure diagram of a device for generating a skeleton screen page, where the device for generating a skeleton screen page is located;
fig. 3 is a schematic structural diagram of a first embodiment of a device for generating a skeleton screen page provided in the present application.
Detailed Description
Reference will now be made in detail to exemplary embodiments, examples of which are illustrated in the accompanying drawings. When the following description refers to the accompanying drawings, the same numbers in different drawings refer to the same or similar elements, unless otherwise indicated. The implementations described in the following exemplary examples are not representative of all implementations consistent with the present application. Rather, they are merely examples of apparatus and methods consistent with some aspects of the present application as detailed in the accompanying claims.
The terminology used in the present application is for the purpose of describing particular embodiments only and is not intended to be limiting of the present application. As used in this application and the appended claims, the singular forms "a," "an," and "the" are intended to include the plural forms as well, unless the context clearly indicates otherwise. It should also be understood that the term "and/or" as used herein refers to and encompasses any or all possible combinations of one or more of the associated listed items.
It should be understood that although the terms first, second, third, etc. may be used herein to describe various information, these information should not be limited by these terms. These terms are only used to distinguish one type of information from another. For example, a first message may also be referred to as a second message, and similarly, a second message may also be referred to as a first message, without departing from the scope of the present application. The word "if" as used herein may be interpreted as "at … …" or "at … …" or "responsive to a determination", depending on the context.
The application provides a skeleton screen page generation method, device and equipment, which are used for solving the problem of overlong waiting time for loading a webpage white screen by a browser.
According to the skeleton screen page generation method, device and equipment, the compiled target H5 page with the real page rendering state and the skeleton screen page rendering state is loaded through calling the headless browser, the headless browser judges whether the target H5 page is in the skeleton screen rendering state or not in the process of loading the target H5 page, if yes, the skeleton screen page corresponding to the target H5 page is rendered, after the rendering is completed, skeleton screen elements of a specified type are grabbed from the skeleton screen page, and therefore the skeleton screen elements are added to the target H5 page, an updated H5 page with the skeleton screen elements is obtained, and when the updated H5 page is loaded, the skeleton screen page corresponding to the updated H5 page is generated based on the skeleton screen elements. Therefore, when the H5 page is loaded and updated, the skeleton screen page can be directly rendered by using the skeleton screen element under the condition that the JavaScript file is not loaded and operated, and the white screen waiting time when the browser loads the page can be reduced.
Specific examples are given below to describe the technical solutions of the present application in detail.
Fig. 1 is a flowchart of an embodiment of a method for generating a skeleton screen page provided in the present application. Referring to fig. 1, the method includes:
s101, calling a headless browser to load a compiled target H5 page; the target H5 page has a real page rendering state and a skeleton screen page rendering state.
Specifically, the target H5 page refers to a Web page or a mobile application page created based on HTML5 technology, which is generally used to describe a Web page built using new generation Web technologies such as HTML5, CSS, and JavaScript.
The target H5 page is defined with DOM skeleton screen nodes, the DOM skeleton screen nodes of the target H5 page can be 1 DOM skeleton screen node or a plurality of DOM skeleton screen nodes, and each skeleton screen node is 1 independent rendering area.
Further, the target H5 page is a page with a real page rendering state and a skeleton screen page rendering state.
It should be noted that, the rendering state generally refers to a loading and presenting process of web page content. The real page rendering state represents the complete web page content, including text, images, interactive elements, etc., that the user eventually sees in the browser. The real page rendering state is a visual effect experienced by a user when interacting with a web page, and is generally what the user desires to see after accessing the web page. The skeleton screen page rendering state is a placeholder state or loading state that may provide a visual effect to the user that the page is being loaded, the skeleton screen page in the skeleton screen page state typically including some placeholder elements.
In specific implementation, a developer can adopt front-end development frames such as Vue/act/Angular and the like to take a skeleton screen root node as a mounting DOM node, and adopts a corresponding front-end development frame to develop page codes, so that the developed page has a real page rendering state and a skeleton screen page rendering state:
for example, in one possible implementation, a front-end development framework such as Vue/act/Angular may be used to develop a real page rendering state that normally renders according to real server data, and further, develop a skeleton screen page rendering state without data based on the real page rendering state. It should be noted that, the skeleton screen page in the rendering state of the skeleton screen page may be composed of elements such as static layout, graphics context, color blocks, loading, etc.
It should also be noted that a Headless Browser (Headless Browser) is a web Browser without a graphical user interface that can run in the background and be controlled and operated programmatically without displaying web content to the user.
Specifically, a headless browser may be invoked, and then the compiled target H5 page may be loaded via the headless browser. Any of a variety of headless browsers may be used, for example, in one embodiment, puppet majors (puppeter-Headless Chrome NodeAPI, puppeter) may be selected. It should be noted that the puppet master is a node. Js library developed by Google, which is used to control and operate the headless mode of the Chrome or Chrome browser. It provides a set of APIs that enable developers to write scripts to simulate the operation of users in a browser, thereby enabling automated testing, web page screenshots, data collection, and other tasks related to browser behavior.
Specifically, when loading the compiled target H5 page, the headless browser loads the HTML file, javaScript file and CSS file of the target H5 page.
Specifically, the HTML file contains the structure and content of the target H5 page, and there are various HTML tags such as a title, a paragraph, a link, an image, etc. for defining the basic structure of the target H5 page, and further, the HTML file contains a link to an external resource (such as CSS and JavaScript file).
The JavaScript file contains the interaction logic and dynamic behavior of the target H5 page, which can be used to handle user input, modify page content, perform asynchronous operations, communicate with the server, etc. Specifically, the JavaScript file typically contains a set of JavaScript functions and event handlers to increase the interactivity and dynamics of the target H5 page.
The CSS file contains style information of the target H5 page for defining the appearance and layout of the target H5 page. It includes selectors and attributes for selecting elements in the target H5 page and specifying their style. Specifically, the CSS file is used to control the visual effects of elements such as fonts, colors, spacing, borders, background, and the like.
It should be noted that, when the headless browser is called to load the compiled target H5 page, a global notification API is registered, for example, global_ jsi may be registered, so as to monitor the page loading event.
S102, in the process of loading the target H5 page, the headless browser judges whether the target H5 page is in a skeleton screen rendering state.
Specifically, in one possible implementation manner, the process of determining whether the target H5 page is in the skeleton screen rendering state may include:
(1) And judging whether the target H5 page carries a skeleton screen mark or not.
It should be noted that the skeleton screen mark may be a specific parameter or a global variable. For example, in developing the target H5 page, the skeleton screen markup may be stitched through the URL (i.e., a particular parameter is added to the URL of the target H5 page as the skeleton screen markup). For example, in one embodiment, _skeleton=1 (as a skeletal screen mark) may be added to the URL when developing the target H5 page. Subsequently, when the parameter is detected, the target H5 page is determined to carry a skeleton screen mark.
Furthermore, in another possible implementation of the present application, the skeleton screen marker may also be an injected global variable. For example, in another embodiment, in the HTML file of the target H5 page, javaScript code may be injected with a < script > tag to set a global variable (e.g., global_skeleton=1) and take the global variable as a skeletal screen mark.
(2) If yes, determining that the target H5 page is in a skeleton screen rendering state.
For example, in combination with the above example, in an embodiment, during the process of loading the target H5 page, the H5 page is found to have the following flag "global_skeleton=1", at this time, it is determined that the target H5 page carries the skeleton screen flag, and the target H5 page is in the skeleton screen rendering state.
Optionally, in the process of loading the target H5 page, the headless browser further includes:
the dynamic data network request is disabled.
It should be noted that disabling dynamic data network requests can help to improve page loading performance and reduce external dependencies.
In particular implementations, dynamic data network requests such as XMLHttpRequest, fetch may be disabled.
And S103, if yes, rendering a skeleton screen page corresponding to the target H5 page, and grabbing skeleton screen elements of a specified type from the skeleton screen page after the rendering is completed.
In specific implementation, virtual data can be used to replace real data so as to achieve the purpose of rendering the skeleton screen page.
Further, after rendering is completed, at this time, a loading event occurs on the page, and the global notification API monitors the loading event and grabs a skeleton screen element of a specified type from the skeleton screen page. In particular implementations, DOM operations provided by a headless browser may be used to select and grab a specified type of skeletal screen element in a skeletal screen page.
For example, in another possible implementation, when a loading event occurs on the target H5 page, the global notification API listens to the loading event and notifies the device (skeleton screen page generating device) to grab the skeleton screen page rendering result. For example, in an embodiment, taking a pupper as an example, a headless browser may be used to send a network request in a specific URL format on a target H5 page, and the global notification API is intercepted by the puppeer network to notify the device to capture the rendering result of the skeleton screen page.
The specified type of skeleton screen elements include a dot mark element, a picture element, a style element and a script element. Wherein the elements of the Dom tag may include:
text elements (e.g., < p >, < h1 >): for presenting and organizing text content.
Picture element (e.g. < img >): for displaying images.
A link element (e.g. < a >): for creating hyperlinks to other pages or resources.
Form elements (e.g., < input >, < textarea >, < select >): for collecting user input or for interacting.
Multimedia elements (e.g., < audio >, < video >, < iframe >): for embedding multimedia content.
Style and script elements (e.g., < link >, < script >, < style >): for introducing external styles and scripts, and defining internal styles.
Further, in addition to the elements of the Dom markup, the skeleton screen elements of the specified type also include picture elements.
Further, the style element may be a < link > element or a < style > element for defining CSS rules of the placeholder element style, which may set the size, color, margin, etc. of the style element to make the skeleton screen look similar to the actual content; the script element may be a < script > element for dynamically generating or modifying the skeletal screen content after page loading to provide a more dynamic effect, e.g., may be used
The < script > element inserts JavaScript code in the HTML document to enable interactivity, dynamics, and functionality of the web page.
S104, adding the skeleton screen element to the target H5 page to obtain an updated H5 page added with the skeleton screen element, so that when the updated H5 page is loaded, a skeleton screen page corresponding to the updated H5 page is generated based on the skeleton screen element.
Specifically, the process of adding the skeleton screen element to the target H5 page may include:
(1) Determining the labeling position of the target H5 page; and the labeling position is used for indicating the position of the target H5 page embedded in the skeleton screen code.
Note that, the labeling position is preset by the developer, and is not limited in this embodiment. The marking position can be marked by adopting an HTML annotation marking method, and the HTML annotation is used for marking the inserting position of the skeleton screen code in the HTML code of the target H5 page, wherein the HTML annotation can be a specific identifier so as to search and insert the skeleton screen code in the process of updating the H5 page; specific CSS classes or IDs can also be adopted, and added in the HTML elements of the target H5 page to identify the insertion positions of the skeleton screen codes, and the classes or IDs can be used for selecting and inserting the skeleton screen codes in subsequent operations; a method of using a placeholder element may also be employed to add a placeholder element specific to the skeleton screen to the content of the target H5 page, which may be a blank < div > tag or other element for indicating the location of insertion of the skeleton screen code. And a custom attribute method can be adopted, and the custom attribute is added in the HTML element of the target H5 page so as to mark the insertion position of the skeleton screen code.
(2) And embedding the skeleton screen element into the labeling position to obtain an updated H5 page added with the skeleton screen element.
After obtaining the updated H5 page with the skeleton screen element, the updated H5 page may be online, and the user may obtain the updated H5 page.
When the browser is operated by a user, the browser loads and updates the H5 page, at the moment, the CSS file, the JavaScript file and the picture file are not required to be additionally requested, the JavaScript file is also not required to be operated, and the skeleton screen page can be rendered and displayed in advance through updating data such as HTML, CSS, base pictures and the like stored in the H5 page. And then, running a normal JavaScript file, and mounting the running result on a skeleton screen root node (updating the skeleton screen root node after dynamic rendering by Vue/act/angle), thereby completing the switching from the skeleton screen page to the real page.
According to the skeleton screen page generation method, the compiled target H5 page with the real page rendering state and the skeleton screen page rendering state is loaded through calling the headless browser, the headless browser judges whether the target H5 page is in the skeleton screen rendering state or not in the process of loading the target H5 page, if yes, the skeleton screen page corresponding to the target H5 page is rendered, after the rendering is completed, skeleton screen elements of a specified type are grabbed from the skeleton screen page, and therefore the skeleton screen elements are added to the target H5 page, an updated H5 page with the skeleton screen elements is obtained, and when the updated H5 page is loaded, the skeleton screen page corresponding to the updated H5 page is generated based on the skeleton screen elements. Therefore, when the H5 page is loaded and updated, the skeleton screen page can be directly rendered by using the skeleton screen element under the condition that the JavaScript file is not loaded and operated, and the white screen waiting time when the browser loads the page can be reduced. In addition, according to the method provided by the application, the front-end frames such as Vue, react, angular are adopted, the skeleton screen page is drawn on the basis that JavaScript files do not need to be operated, the codes of the skeleton screen page and the codes of the real webpage share one HTML, CSS, javaScript style code, the skeleton screen page contains key static UI layout information such as characters and pictures, and better skeleton screen rendering speed and skeleton screen development capability can be obtained.
Corresponding to the embodiment of the skeleton screen page generating method, the application also provides an embodiment of the skeleton screen page generating device.
The embodiment of the framework screen page generating device can be applied to framework screen page generating equipment. The apparatus embodiments may be implemented by software, or may be implemented by hardware or a combination of hardware and software. Taking software implementation as an example, the device in a logic sense is formed by reading corresponding computer program instructions in a nonvolatile memory into a memory through a processor of the skeleton screen page generating device where the device is located. From the hardware level, as shown in fig. 2, a hardware structure diagram of a skeleton-screen page generating device where the skeleton-screen page generating device is located is shown in fig. 2, and in addition to a processor, a memory, a network interface, and a nonvolatile memory shown in fig. 2, the skeleton-screen page generating device where the device is located in an embodiment generally includes other hardware according to an actual function of the skeleton-screen page generating device, which is not described herein again.
Fig. 3 is a schematic structural diagram of a first embodiment of a device for generating a skeleton screen page provided in the present application. Referring to fig. 3, the apparatus includes a loading module 310, a processing module 320, and an updating module 330; wherein,
the loading module 310 is configured to invoke a headless browser to load a compiled target H5 page; the target H5 page has a real page rendering state and a skeleton screen page rendering state;
the headless browser judges whether the target H5 page is in a skeleton screen rendering state or not in the process of loading the target H5 page, and renders a skeleton screen page corresponding to the target H5 page when judging that the target H5 page is in the skeleton screen rendering state;
the processing module 320 is configured to grab a skeleton screen element of a specified type from the skeleton screen page after rendering is completed;
the updating module 330 is configured to add the skeleton screen element to the target H5 page to obtain an updated H5 page to which the skeleton screen element is added, so that when the updated H5 page is loaded, a skeleton screen page corresponding to the updated H5 page is generated based on the skeleton screen element.
The apparatus provided in this embodiment may be used to perform the steps of the method embodiment shown in fig. 1, and the specific implementation principle and implementation process may be referred to the description in the foregoing embodiments, which are not repeated herein.
According to the skeleton screen page generating device, the compiled target H5 page with the real page rendering state and the skeleton screen page rendering state is loaded through calling the headless browser, the headless browser judges whether the target H5 page is in the skeleton screen rendering state or not in the process of loading the target H5 page, if yes, the skeleton screen page corresponding to the target H5 page is rendered, after the rendering is completed, skeleton screen elements of a specified type are grabbed from the skeleton screen page, and therefore the skeleton screen elements are added to the target H5 page, an updated H5 page with the skeleton screen elements is obtained, and when the updated H5 page is loaded, the skeleton screen page corresponding to the updated H5 page is generated based on the skeleton screen elements. Therefore, when the H5 page is loaded and updated, the skeleton screen page can be directly rendered by using the skeleton screen element under the condition that the JavaScript file is not loaded and operated, and the white screen waiting time when the browser loads the page can be reduced. In addition, according to the method provided by the application, the front-end frames such as Vue, react, angular are adopted, the skeleton screen page is drawn on the basis that JavaScript files do not need to be operated, the codes of the skeleton screen page and the codes of the real webpage share one HTML, CSS, javaScript style code, the skeleton screen page contains key static UI layout information such as characters and pictures, and better skeleton screen rendering speed and skeleton screen development capability can be obtained.
Optionally, the skeleton screen elements of the specified type include a dot mark element, a picture element, a style element and a script element.
Optionally, the updating module 330 is specifically configured to determine a labeling position of the target H5 page, and embed the skeleton screen element into the labeling position to obtain an updated H5 page with the skeleton screen element attached thereto; wherein the labeling position is used for indicating the position of the target H5 page embedded in the skeleton screen code,
optionally, the headless browser disables the dynamic data network request in the process of loading the target H5 page.
Optionally, the determining whether the target H5 page is in a skeleton screen rendering state includes:
judging whether the target H5 page carries a skeleton screen mark or not;
if yes, determining that the target H5 page is in a skeleton screen rendering state.
With continued reference to fig. 2, the present application further provides a skeleton screen page generating device, including a memory, a processor, and a computer program stored in the memory and capable of running on the processor, where the processor implements the steps of the method according to any one of the first aspects of the present application when executing the program.
The present application also provides a storage medium having stored thereon a program which when executed by a processor performs the steps of the method according to any of the first aspects of the present application.
The implementation process of the functions and roles of each unit in the above device is specifically shown in the implementation process of the corresponding steps in the above method, and will not be described herein again.
For the device embodiments, reference is made to the description of the method embodiments for the relevant points, since they essentially correspond to the method embodiments. The apparatus embodiments described above are merely illustrative, wherein the elements illustrated as separate elements may or may not be physically separate, and the elements shown as elements may or may not be physical elements, may be located in one place, or may be distributed over a plurality of network elements. Some or all of the modules may be selected according to actual needs to achieve the purposes of the present application. Those of ordinary skill in the art will understand and implement the present invention without undue burden.
The foregoing description of the preferred embodiments of the present invention is not intended to limit the invention to the precise form disclosed, and any modifications, equivalents, improvements and alternatives falling within the spirit and principles of the present invention are intended to be included within the scope of the present invention.
Claims (10)
1. A method for generating a skeleton screen page, the method comprising:
calling a headless browser to load a compiled target H5 page; the target H5 page has a real page rendering state and a skeleton screen page rendering state;
the headless browser judges whether the target H5 page is in a skeleton screen rendering state or not in the process of loading the target H5 page;
if yes, rendering a skeleton screen page corresponding to the target H5 page, and grabbing skeleton screen elements of a specified type from the skeleton screen page after the rendering is completed;
and adding the skeleton screen element to the target H5 page to obtain an updated H5 page added with the skeleton screen element, so that when the updated H5 page is loaded, a skeleton screen page corresponding to the updated H5 page is generated based on the skeleton screen element.
2. The method of claim 1, wherein the specified types of skeletal screen elements include a Dom tagged element, a picture element, a style element, and a script element.
3. The method of claim 1, wherein the adding the skeletal screen element to the target H5 page comprises:
determining the labeling position of the target H5 page; the marking position is used for indicating the position of the target H5 page embedded in the skeleton screen code;
and embedding the skeleton screen element into the labeling position to obtain an updated H5 page added with the skeleton screen element.
4. The method of claim 1, wherein the headless browser, during loading of the target H5 page, further comprises:
the dynamic data network request is disabled.
5. The method of claim 1, wherein the determining whether the target H5 page is in a skeletal screen rendering state comprises:
judging whether the target H5 page carries a skeleton screen mark or not;
if yes, determining that the target H5 page is in a skeleton screen rendering state.
6. The device is characterized by comprising a loading module, a processing module and an updating module; wherein,
the loading module is used for calling the headless browser to load the compiled target H5 page; the target H5 page has a real page rendering state and a skeleton screen page rendering state;
the headless browser judges whether the target H5 page is in a skeleton screen rendering state or not in the process of loading the target H5 page, and renders a skeleton screen page corresponding to the target H5 page when judging that the target H5 page is in the skeleton screen rendering state;
the processing module is used for grabbing framework screen elements of a specified type from the framework screen page after rendering is completed;
the updating module is used for adding the skeleton screen element to the target H5 page to obtain an updated H5 page added with the skeleton screen element, so that when the updated H5 page is loaded, a skeleton screen page corresponding to the updated H5 page is generated based on the skeleton screen element.
7. The apparatus of claim 6, wherein the specified type of skeletal screen element comprises a Dom tagged element, a picture element, a style element, and a script element.
8. The apparatus of claim 6, wherein the updating module is specifically configured to determine a labeling position of the target H5 page, and embed the skeleton screen element into the labeling position to obtain an updated H5 page with the skeleton screen element attached thereto; and the labeling position is used for indicating the position of the target H5 page embedded in the skeleton screen code.
9. A skeletal screen page generating device comprising a memory, a processor and a computer program stored on the memory and executable on the processor, wherein the processor performs the steps of the method of any one of claims 1-5 when the program is executed.
10. A storage medium having a program stored thereon, which when executed by a processor, implements the steps of the method of any of claims 1-5.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202311480376.2A CN117540118A (en) | 2023-11-08 | 2023-11-08 | Skeleton screen page generation method, device and equipment |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202311480376.2A CN117540118A (en) | 2023-11-08 | 2023-11-08 | Skeleton screen page generation method, device and equipment |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN117540118A true CN117540118A (en) | 2024-02-09 |
Family
ID=89789117
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202311480376.2A Pending CN117540118A (en) | 2023-11-08 | 2023-11-08 | Skeleton screen page generation method, device and equipment |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN117540118A (en) |
-
2023
- 2023-11-08 CN CN202311480376.2A patent/CN117540118A/en active Pending
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US20230083102A1 (en) | Systems and methods for conversion of web content into reusable templates and components | |
| US10726195B2 (en) | Filtered stylesheets | |
| US20240004949A1 (en) | Systems and Methods for Hosted Applications | |
| KR20150079867A (en) | Html5-protocol-based webpage presentation method and device | |
| US7783967B1 (en) | Packaging web content for reuse | |
| EP3090357B1 (en) | Hosted application marketplaces | |
| AU2009260643A1 (en) | Presenting advertisements based on web-page interaction | |
| US11397608B2 (en) | Multi-dimensional spreadsheet system enabling stack based programming using a virtual machine | |
| CN113536179A (en) | Page generation method and device, electronic equipment and storage medium | |
| CN112287255B (en) | Page construction method and device, computing equipment and computer readable storage medium | |
| WO2008078322A2 (en) | Method for ensuring unique identification of program elements across multiple executions | |
| CN117540118A (en) | Skeleton screen page generation method, device and equipment | |
| CN107077484B (en) | Generating a web browser view of an application | |
| CN114168875A (en) | Page program generation method and device, computer equipment and storage medium | |
| Aryal | Design Principles for Responsive Web | |
| CN117710554A (en) | 3D graph drawing method and device and electronic equipment | |
| Johansson | Rich Web Map Applications-An assessment of performance, functionality and implementation of Rich Internet Application techniques in web-based GIS | |
| CN117194831A (en) | Network application display method and device, computer equipment and storage medium | |
| CN116932126A (en) | Application embedding method, device, terminal, medium and program product | |
| JP2012032938A (en) | Method of allowing user terminal to analyze and execute script program, script program, and user terminal | |
| CN111949266A (en) | Webpage generation method and device and electronic equipment | |
| Lamberta | Basics of JavaScript for Animation | |
| TWM530980U (en) | A frame for centralized management base on ajax website applied to computer system architecture | |
| Freeman | Windows 8 Apps Revealed Using HTML5 and JavaScript: Using HTML5 and JavaScript | |
| Yee | Learning Ajax/JavaScript Widgets and Their APIs |
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 |