Skeleton Screen Generation Method, Device, Electronic Device, and Computer Storage Medium

Abstract

An embodiment of the present invention provides a method, apparatus, electronic device, and computer storage medium for generating a skeleton screen. The method includes: when accessing a browser page using an automated testing tool, injecting a script for generating a skeleton screen into the browser page; and by calling the script, performing the following steps: obtaining DOM elements corresponding to the browser page and CSS corresponding to the skeleton screen, and obtaining an HTML file of the skeleton screen according to the DOM elements and the CSS; and generating a skeleton screen according to the HTML file.

Description

Technical Field

[0001] The present invention relates to the field of computer technology, and relates to, but is not limited to, a method, apparatus, electronic device, and computer storage medium for generating a skeleton screen. Background Art

[0002] In recent years, web technologies are developing towards various engineering and large-scale directions. The functions of frameworks such as Vue and React are becoming more and more powerful, and the functions of the web are becoming more and more complex. As a result, projects are getting larger and larger, and the loading speed is getting slower and slower, which will lead to some user experience problems, such as a long white screen before the page appears.

[0003] To solve the experience problem caused by the too long white screen time before page loading, the skeleton screen is one of the optimization solutions. The skeleton screen is a placeholder structure similar to the page structure presented to the user before the page loading is completed, giving the user a feeling that the page is about to be loaded. The skeleton screen is also called a loading placeholder map. It first shows the general structure of the page to the user before the page data is loaded, and then shows the data content of the page after the data request returns, thereby replacing the skeleton screen. However, in the related art, the human cost and time cost of the solution for generating the skeleton screen are relatively high. Summary of the Invention

[0004] Embodiments of the present invention are expected to provide a technical solution for generating a skeleton screen, which can solve the problem of relatively high human cost and time cost of the solution for generating the skeleton screen.

[0005] Embodiments of the present invention provide a method for generating a skeleton screen, the method including:

[0006] When accessing a browser page using an automated testing tool, injecting a script for generating a skeleton screen into the browser page;

[0007] By calling the script to perform the following steps: obtaining the Document Object Model (DOM) elements corresponding to the browser page and the Cascading Style Sheets (CSS) corresponding to the skeleton screen, and obtaining a Hyper Text Markup Language (HTML) file of the skeleton screen according to the DOM elements and the CSS;

[0008] Generating a skeleton screen according to the HTML file.

[0009] In some embodiments, the obtaining the DOM elements corresponding to the browser page includes:

[0010] Traverse the browser page to obtain DOM elements for generating a skeleton screen, and use the DOM elements for generating the skeleton screen as the DOM elements corresponding to the browser page.

[0011] In some embodiments, obtaining the HTML file of the skeleton screen according to the DOM elements and the CSS includes:

[0012] Insert the CSS into the head tag of the HTML file, and insert the DOM elements into the body tag of the HTML file to obtain the HTML file of the skeleton screen.

[0013] In some embodiments, the method further includes:

[0014] Monitor the static resource server for accessing the HTML file; when it is monitored that the static resource server starts, use an automated testing tool to access the browser page;

[0015] Correspondingly, generating the skeleton screen according to the HTML file includes: after the static resource server accesses the HTML file, generating the skeleton screen according to the HTML file obtained by the access of the static resource server.

[0016] In some embodiments, monitoring the static resource server for accessing the HTML file includes: after obtaining a plugin for characterizing the display parameters of the skeleton screen, monitoring the static resource server for accessing the HTML file;

[0017] Correspondingly, the method further includes: after the static resource server starts, use the plugin to pass the display parameters of the skeleton screen into the static resource server;

[0018] Generating the skeleton screen according to the HTML file obtained by the access of the static resource server includes: generating the skeleton screen according to the display parameters of the skeleton screen in the static resource server and the HTML file obtained by the access of the static resource server.

[0019] In some embodiments, the plugin is a custom plugin packaged by combining a packaging tool.

[0020] An embodiment of the present invention further provides a skeleton screen generation device, and the device includes:

[0021] A first processing module, configured to inject a script for generating a skeleton screen into the browser page when using an automated testing tool to access the browser page;

[0022] A second processing module, configured to perform the following steps by invoking the script: obtain DOM elements corresponding to the browser page and CSS corresponding to the skeleton screen, and obtain an HTML file of the skeleton screen according to the DOM elements and the CSS;

[0023] A generation module, configured to generate a skeleton screen according to the HTML file.

[0024] In some embodiments, the second processing module for obtaining DOM elements corresponding to the browser page includes:

[0025] Traverse the browser page to obtain DOM elements for generating the skeleton screen, and use the DOM elements for generating the skeleton screen as the DOM elements corresponding to the browser page.

[0026] In some embodiments, the second processing module for obtaining an HTML file of the skeleton screen according to the DOM elements and the CSS includes:

[0027] Insert the CSS into the head tag of the HTML file, and insert the DOM elements into the body tag of the HTML file to obtain the HTML file of the skeleton screen.

[0028] In some embodiments, the first processing module is further configured to monitor a static resource server for accessing the HTML file; when it is monitored that the static resource server starts, use an automated testing tool to access the browser page;

[0029] Correspondingly, the generation module for generating a skeleton screen according to the HTML file includes: after the static resource server accesses the HTML file, generate the skeleton screen according to the HTML file accessed by the static resource server.

[0030] In some embodiments, the first processing module for monitoring a static resource server for accessing the HTML file includes: after obtaining a plugin for characterizing the skeleton screen display parameters, monitor the static resource server for accessing the HTML file;

[0031] Correspondingly, the first processing module is further configured to, after the static resource server starts, use the plugin to pass the skeleton screen display parameters into the static resource server;

[0032] The generation module for generating the skeleton screen according to the HTML file accessed by the static resource server includes: generate the skeleton screen according to the skeleton screen display parameters in the static resource server and the HTML file accessed by the static resource server.

[0033] In some embodiments, the plug-in is a custom plug-in combined and packaged by a packaging tool.

[0034] An embodiment of the present invention further provides an electronic device, including a memory, a processor, and a computer program stored on the memory and executable on the processor. When the processor executes the program, the above-mentioned arbitrary skeleton screen generation method is implemented.

[0035] An embodiment of the present invention further provides a computer storage medium, on which a computer program is stored. When the computer program is executed by a processor, the above-mentioned arbitrary skeleton screen generation method is implemented.

[0036] In the skeleton screen generation method, device, electronic device, and computer storage medium provided by the embodiments of the present invention, when using an automated testing tool to access a browser page, a script for generating a skeleton screen is injected into the browser page; the following steps are executed by calling the script: obtaining DOM elements corresponding to the browser page and CSS corresponding to the skeleton screen, and obtaining an HTML file of the skeleton screen according to the DOM elements and the CSS; generating a skeleton screen according to the HTML file.

[0037] It can be seen that in the embodiments of the present invention, when using an automated testing tool to access a browser page, the process of generating an HTML file of a skeleton screen can be executed by a script. That is, through the execution of the script, it is beneficial to automatically generate a skeleton screen, and it is beneficial to save the labor cost and time cost consumed in generating the skeleton screen.

[0038] It should be understood that the above general description and subsequent detailed description are only exemplary and explanatory, and do not limit the present invention. BRIEF DESCRIPTION OF THE DRAWINGS

[0039] The drawings here are incorporated into the specification and form a part of this specification. These drawings show embodiments consistent with the present invention and are used together with the specification to explain the technical solutions of the present invention.

[0040] Figure 1 It is a flowchart of the skeleton screen generation method according to an embodiment of the present invention;

[0041] Figure 2 It is another flowchart of the skeleton screen generation method according to an embodiment of the present invention;

[0042] Figure 3 It is a schematic diagram of the composition structure of the skeleton screen generation device according to an embodiment of the present invention;

[0043] Figure 4 It is a schematic diagram of the structure of the electronic device according to an embodiment of the present invention. DETAILED DESCRIPTION OF THE EMBODIMENTS

[0044] The present invention will be further described in detail below in conjunction with the accompanying drawings and embodiments. It should be understood that the embodiments provided herein are only used to explain the present invention and are not used to limit the present invention. In addition, the embodiments provided below are partial embodiments for implementing the present invention, rather than all embodiments for implementing the present invention. Without conflict, the technical solutions described in the embodiments of the present invention can be implemented in any combined manner.

[0045] It should be noted that in the embodiments of the present invention, the terms "include", "comprise" or any other variant thereof are intended to cover non-exclusive inclusion, so that a method or device including a series of elements not only includes the elements clearly recorded, but also includes other elements not explicitly listed, or also includes elements inherent to the implementation of the method or device. Without further limitation, an element defined by the statement "including one..." does not exclude the existence of other related elements in the method or device including the element (such as steps in a method or units in a device, and the unit can be a partial circuit, a partial processor, a partial program or software, etc.).

[0046] For example, the skeleton screen generation method provided in the embodiments of the present invention includes a series of steps, but the skeleton screen generation method provided in the embodiments of the present invention is not limited to the recorded steps. Similarly, the skeleton screen generation device provided in the embodiments of the present invention includes a series of modules, but the skeleton screen generation device provided in the embodiments of the present invention is not limited to including the explicitly recorded modules, and may also include modules required for obtaining relevant information or processing based on information.

[0047] The term "and / or" in this article is only a description of the association relationship of associated objects, indicating that there can be three relationships. For example, C and / or D can represent: C exists alone, C and D exist simultaneously, and D exists alone. In addition, the term "at least one" in this article means any one of multiple or any combination of at least two of multiple.

[0048] In the related art, there are mainly two schemes for generating a skeleton screen. The first scheme: completely design a skeleton screen with the same structure as the page, and implement the HTML file and CSS by hand to implement a skeleton screen structure that highly presents the page structure; the second scheme: implement the skeleton style through DOM pseudo-elements and realize the dynamic switching of the skeleton and the page by operating the style.

[0049] The advantages of the first scheme are: high reduction degree and good user experience. However, the disadvantage is that the flexibility is relatively poor. When the style or layout of the page changes, it is also necessary to modify the style and layout of the skeleton screen, resulting in repetitive mechanical labor and relatively high later modification and maintenance costs.

[0050] The advantages of the second solution are as follows: simple development, high customization level, and not bloated; the disadvantages are: low automation level and high collaboration requirements.

[0051] In addition, most of the solutions for generating skeleton screens in related technologies are attached to front-end frameworks such as Vue or React, that is, they have a relatively high coupling degree with front-end frameworks such as Vue or React and relatively low generality.

[0052] In view of the above technical problems, embodiments of the present invention propose a method, device, electronic device, and computer storage medium for generating a skeleton screen. Embodiments of the present invention can be implemented based on a terminal and / or a server. The terminal can be a thin client, a thick client, a handheld or laptop device, a microprocessor-based system, a set-top box, a programmable consumer electronic product, a network personal computer, a small computer system, and so on. The server can be a small computer system, a large computer system, and a distributed cloud computing technology environment including any of the above systems, and so on.

[0053] Electronic devices such as servers can be described in the general context of computer system-executable instructions (such as program modules) executed by a computer system. Generally, program modules can include routines, programs, target programs, components, logics, data structures, and so on, which perform specific tasks or implement specific abstract data types. The computer system / server can be implemented in a distributed cloud computing environment, where tasks are executed by remote processing devices linked through a communication network. In a distributed cloud computing environment, program modules can be located on local or remote computing system storage media including storage devices.

[0054] Figure 1 A flowchart of the method for generating a skeleton screen according to an embodiment of the present invention is shown in Figure 1 As shown, the process may include:

[0055] Step 101: When accessing a browser page using an automated testing tool, inject a script for generating a skeleton screen into the browser page.

[0056] In some embodiments, the above automated testing tool may be Puppeteer, Selenium, or other automated testing tools.

[0057] Puppeteer is a Node library that uses the DevTools tool and provides a powerful Application Programming Interface (API) to control a headless browser and can also be set to control a full browser (non-headless mode).

[0058] Selenium belongs to the automated testing tools for web applications. Selenium can run directly in the browser. The main functions of Selenium include: testing compatibility with browsers, creating regression tests to verify software functions and user requirements.

[0059] In some embodiments, the browser page can be the page of a headless browser or the page of a non-headless browser. Here, a headless browser is a browser without an operation interface, which is commonly used for web automation testing. Using the APIs it provides, operation instructions can be automatically executed.

[0060] In some embodiments, the script for generating the skeleton screen can be a js (javascript) script or other types of scripts; in some embodiments, when the script for generating the skeleton screen is a js script, the js script can be injected into the browser page by using the page.addScriptTag method.

[0061] Step 102: Execute the following steps by calling the script: obtain the DOM elements corresponding to the browser page and the CSS corresponding to the skeleton screen, and obtain the HTML file of the skeleton screen according to the DOM elements and the CSS.

[0062] In the embodiments of the present invention, DOM is a standard programming interface for processing Extensible Markup Language, and it is an API independent of platforms and languages. It can dynamically access programs and scripts, and update their content, structure, and the style of the document. DOM is a tree-based API document, which requires the entire document to be represented in memory during the processing.

[0063] CSS is a computer language used to present the styles of files such as HTML or Extensible Markup Language (XML). CSS can not only statically decorate web pages, but also dynamically format various elements of web pages in cooperation with various scripting languages. CSS can precisely control the layout of the positions of elements in a web page at the pixel level, support almost all font sizes and styles, and has the ability to edit the styles of web page objects and models.

[0064] In some embodiments, the CSS corresponding to the skeleton screen can be the CSS of the accessed browser page.

[0065] In some embodiments, the DOM elements for generating the skeleton screen can be obtained by traversing the browser page, and the DOM elements for generating the skeleton screen are used as the DOM elements corresponding to the browser page.

[0066] Exemplarily, the DOM elements for generating the skeleton screen can be obtained in the browser page by executing the page.evaluate method. Here, the page.evaluate method will recursively traverse to obtain the elements in the browser page to be replaced by the skeleton (i.e., the DOM elements for generating the skeleton screen), and then perform style override by adding class names to these elements, so as to replace them with skeleton screen elements.

[0067] It can be seen that the embodiments of the present invention can traverse the browser page to more easily and comprehensively obtain the DOM elements corresponding to the browser page.

[0068] In the embodiments of the present invention, the HTML file of the skeleton screen is a static HTML file.

[0069] In some embodiments, the above CSS can be inserted into the head tag of the HTML file, and the DOM elements can be inserted into the body tag of the HTML file to obtain the HTML file of the skeleton screen.

[0070] Exemplarily, the above CSS can be inserted into the head tag of the HTML file in the form of a style tag.

[0071] It can be seen that the embodiments of the present invention can directly obtain the HTML file of the skeleton screen by inserting the corresponding information into the head tag and body tag of the HTML file, which is easy to implement.

[0072] Step 103: Generate a skeleton screen according to the HTML file.

[0073] In the embodiments of the present invention, after obtaining the HTML file of the skeleton screen, before the browser page is loaded and completed, the skeleton screen can be presented in the browser page based on the HTML file of the skeleton screen.

[0074] In practical applications, steps 101 to 103 can be implemented based on the processor of an electronic device. The above-mentioned processor can be at least one of an Application Specific Integrated Circuit (ASIC), a Digital Signal Processor (DSP), a Digital Signal Processing Device (DSPD), a Programmable Logic Device (PLD), a Field Programmable Gate Array (FPGA), a Central Processing Unit (CPU), a controller, a microcontroller, and a microprocessor.

[0075] It can be seen that in the embodiment of the present invention, when using an automated testing tool to access a browser page, the process of generating the HTML file of the skeleton screen can be executed by a script. That is, through the execution of the script, it is beneficial to automatically generate the skeleton screen, which is beneficial to saving the labor cost and time cost consumed in generating the skeleton screen.

[0076] The embodiment of the present invention can be combined with automated testing tools such as Puppeteer to achieve automatic injection and generate high-quality skeleton screens, which can reduce the time and labor costs brought by developing and maintaining the skeleton screen in the later stage, and can also generate effects comparable to handwritten skeleton screens; compared with the first solution in the related art, the development efficiency of the skeleton screen is improved, and some meaningless mechanical labor is reduced. For example, according to statistical data, the skeleton screen generation method in the embodiment of the present invention can save about 70% of the working hours compared with the first solution; the skeleton screen generation method in the embodiment of the present invention has almost no later maintenance cost, and compared with the first solution, the later maintenance efficiency is increased by nearly 100%.

[0077] Furthermore, the embodiment of the present invention can be applied to multi-terminal applications such as h5 (HTML5) and WeChat mini-programs, without relying on a single front-end framework, improving the versatility, reducing the development costs such as labor and time for users of different frameworks, and facilitating maintenance and upgrade.

[0078] In some embodiments, it is also possible to monitor the static resource server for accessing the HTML file; when it is monitored that the static resource server starts, use an automated testing tool to access the browser page;

[0079] Correspondingly, according to the HTML file, the implementation method of generating the skeleton screen may include: after the static resource server accesses the HTML file, generating the skeleton screen according to the HTML file accessed by the static resource server.

[0080] In the embodiment of the present invention, the static resource server may be a server that executes a local node service.

[0081] It can be seen that in the embodiment of the present invention, by listening to the static resource server, when the static resource server starts, the automatic access of the browser page is realized by using the automated testing tool. Furthermore, when the static resource server starts, the skeleton screen can be automatically generated by executing a script; that is, when the static resource server starts, the skeleton screen can be automatically generated, improving the automation degree of the skeleton screen generation method.

[0082] In some embodiments, the implementation method of listening to the static resource server for accessing the HTML file may include: after obtaining the plugin for characterizing the skeleton screen display parameters, listening to the static resource server for accessing the HTML file.

[0083] Here, the skeleton screen display parameters may be the background color or other parameters of the elements of the skeleton screen; the plugin for characterizing the skeleton screen display parameters may be a plugin plugin.

[0084] In some embodiments, after the static resource server starts, the above plugin may be used to pass the skeleton screen display parameters into the static resource server;

[0085] Correspondingly, generating the skeleton screen according to the HTML file accessed by the static resource server may include: generating the skeleton screen according to the skeleton screen display parameters in the static resource server and the HTML file accessed by the static resource server.

[0086] It can be seen that in the embodiment of the present invention, the skeleton screen display parameters can be passed into the static resource server through the plugin, so as to display the skeleton screen according to the skeleton screen display parameters. Since the skeleton screen display parameters can be preset according to user requirements, therefore, the embodiment of the present invention can display the skeleton screen according to user requirements.

[0087] In some embodiments, the above plugin is a custom plugin packaged by combining a packaging tool.

[0088] Exemplarily, the packaging tool can be tools such as Webpack, gulp, rollup, etc. The core concept of Webpack is a static resource packager for JavaScript. Its main goal is to pack js files together. The packed files are used for use in the browser. It is also capable of functions such as conversion and packaging. Gulp is an automated build tool that developers can use to automatically execute common tasks during project development. Rollup is a JavaScript module packager that can compile small pieces of code into large and complex code

[0089] In the embodiments of the present invention, by combining the packaging tool to customize and extend the plug-in, the engineering and configurability of the skeleton screen generation scheme can be achieved, reducing the implementation difficulty and configuration cost; in the embodiments of the present invention, after forming the plug-in through packaging, by listening to the static resource server, the skeleton screen can be automatically generated. Compared with the above second scheme, the automation degree of the skeleton screen generation scheme is improved.

[0090] The method for generating a skeleton screen according to the embodiments of the present invention will be further described below with reference to the accompanying drawings.

[0091] Figure 2 Another flowchart of the method for generating a skeleton screen according to the embodiments of the present invention is shown in Figure 2 As shown, the process may include:

[0092] Step 201: Start the static resource server.

[0093] Exemplarily, in order to better combine with the actual application development project or web development project, in the embodiments of the present invention, webpack can be used to package a custom plugin in the page and listen to the page packaging completion event. For example, it can be listened and registered by listening to the page packaging completion event compiler.hooks.done.tap; after the page packaging is completed, start the static resource server; the static resource server here is used to execute the local node service.

[0094] In the embodiments of the present invention, the packaged files can be accessed by starting the static resource server. At this time, the skeleton screen display parameters can be passed into the started node service through the plugin.

[0095] Step 202: Use Puppeteer to access the browser page.

[0096] Exemplarily, after starting the static resource server, a headless Chrome browser can be launched through Puppeteer, and the browser page can be accessed by opening a new tab page; in one implementation, it is also necessary to configure the size of the skeleton screen to be adapted and generated. In this way, after obtaining the HTML file of the skeleton screen, the skeleton screen can be presented according to the HTML file and the configured size of the skeleton screen.

[0097] Step 203: Inject the script for generating the skeleton screen into the browser page for easy invocation.

[0098] Step 204: Traverse and obtain the elements in the browser page to be replaced with the skeleton, and replace these elements with the skeleton screen elements.

[0099] Step 205: Insert the DOM elements of the skeleton screen elements and the CSS corresponding to the skeleton screen into the HTML file to obtain the HTML file of the skeleton screen.

[0100] Here, the DOM elements of the skeleton screen elements are the DOM elements corresponding to the above-mentioned browser page.

[0101] Step 206: Before the browser page is fully loaded, present the skeleton screen in the browser page based on the HTML file of the skeleton screen.

[0102] The implementation manners of Steps 203 to 206 have been described in the foregoing embodiments and will not be elaborated here.

[0103] Based on the skeleton screen generation method proposed in the foregoing embodiments, an embodiment of the present invention further proposes a skeleton screen generation device.

[0104] Figure 3 For the composition structure diagram of the skeleton screen generation device of the embodiment of the present invention, as Figure 3 shown, the device may include:

[0105] The first processing module 301 is configured to inject the script for generating the skeleton screen into the browser page when accessing the browser page using an automated testing tool;

[0106] The second processing module 302 is configured to execute the following steps by calling the script: obtain the DOM elements corresponding to the browser page and the CSS corresponding to the skeleton screen, and obtain the HTML file of the skeleton screen according to the DOM elements and the CSS;

[0107] The generation module 303 is configured to generate a skeleton screen according to the HTML file.

[0108] In some embodiments, the second processing module 302 is configured to obtain the DOM elements corresponding to the browser page, including:

[0109] Traverse the browser page to obtain DOM elements for generating a skeleton screen, and use the DOM elements for generating the skeleton screen as the DOM elements corresponding to the browser page.

[0110] In some embodiments, the second processing module 302 is configured to obtain an HTML file of the skeleton screen according to the DOM elements and the CSS, including:

[0111] Insert the CSS into the head tag of the HTML file, and insert the DOM elements into the body tag of the HTML file to obtain the HTML file of the skeleton screen.

[0112] In some embodiments, the first processing module 301 is further configured to monitor a static resource server for accessing an HTML file; when it is monitored that the static resource server is started, use an automated testing tool to access a browser page;

[0113] Correspondingly, the generating module 303 is configured to generate a skeleton screen according to the HTML file, including: after the static resource server accesses the HTML file, generate the skeleton screen according to the HTML file obtained by the static resource server access.

[0114] In some embodiments, the first processing module 301 is configured to monitor a static resource server for accessing an HTML file, including: after obtaining a plugin for characterizing skeleton screen display parameters, monitor the static resource server for accessing the HTML file;

[0115] Correspondingly, the first processing module 301 is further configured to, after the static resource server is started, use the plugin to pass the skeleton screen display parameters into the static resource server;

[0116] The generating module 303 is configured to generate the skeleton screen according to the HTML file obtained by the static resource server access, including: generating the skeleton screen according to the skeleton screen display parameters in the static resource server and the HTML file obtained by the static resource server access.

[0117] In some embodiments, the plugin is a custom plugin packaged by combining a packaging tool.

[0118] The above-mentioned first processing module 301, second processing module 302, and generating module 303 can all be implemented by a processor located in an electronic device, and the above-mentioned processor is at least one of an ASIC, DSP, DSPD, PLD, FPGA, CPU, controller, microcontroller, and microprocessor.

[0119] In addition, each functional module in this embodiment may be integrated into a processing unit, may exist independently as individual units, or two or more units may be integrated into one unit. The above-mentioned integrated unit may be implemented in the form of hardware or in the form of a software functional module.

[0120] If the integrated unit is implemented in the form of a software functional module and is not sold or used as an independent product, it may be stored in a computer-readable storage medium. Based on this understanding, the technical solution of this embodiment, in essence, or the part that contributes to the prior art, or all or part of this technical solution, may be embodied in the form of a software product. This computer software product is stored in a storage medium and includes several instructions for causing a computer device (which may be a personal computer, a server, or a network device, etc.) or a processor to execute all or part of the steps of the method described in this embodiment. The aforementioned storage medium includes: various media such as USB flash drives, mobile hard disks, read-only memory (ROM), random access memory (RAM), magnetic disks, or optical discs that can store program codes.

[0121] Specifically, the computer program instructions corresponding to a method for generating a skeleton screen in this embodiment may be stored on storage media such as optical discs, hard disks, and USB flash drives. When the computer program instructions corresponding to a method for generating a skeleton screen in the storage medium are read or executed by an electronic device, any one of the methods for generating a skeleton screen in the foregoing embodiments is implemented.

[0122] Based on the same technical concept as the foregoing embodiments, refer to Figure 4 , which shows an electronic device 40 provided in an embodiment of the present invention, and may include: a memory 401, a processor 402, and a computer program stored on the memory 401 and executable on the processor 402; wherein,

[0123] The memory 401 is used for storing computer programs and data;

[0124] The processor 402 is used for executing the computer program stored in the memory to implement any one of the methods for generating a skeleton screen in the foregoing embodiments.

[0125] In practical applications, the above-mentioned memory 401 can be a volatile memory, such as RAM; or a non-volatile memory, such as ROM, flash memory, Hard Disk Drive (HDD), or Solid-State Drive (SSD); or a combination of the above types of memories, and provide instructions and data to the processor 402.

[0126] The above-mentioned processor 402 can be at least one of ASIC, DSP, DSPD, PLD, FPGA, CPU, controller, microcontroller, and microprocessor.

[0127] In some embodiments, the functions or modules included in the device provided by the embodiments of the present invention can be used to execute the methods described in the above method embodiments. The specific implementation can refer to the description of the above method embodiments. For the sake of brevity, it will not be repeated here.

[0128] The descriptions of the above embodiments tend to emphasize the differences between the embodiments. Their similarities or similarities can be referred to each other. For the sake of brevity, they will not be repeated in this article.

[0129] The methods disclosed in the method embodiments provided in this application can be arbitrarily combined without conflict to obtain new method embodiments.

[0130] The features disclosed in the product embodiments provided in this application can be arbitrarily combined without conflict to obtain new product embodiments.

[0131] The features disclosed in the method or device embodiments provided in this application can be arbitrarily combined without conflict to obtain new method embodiments or device embodiments.

[0132] Through the description of the above embodiments, those skilled in the art can clearly understand that the above embodiment methods can be implemented by means of software plus a necessary general hardware platform. Of course, they can also be implemented by hardware, but in many cases the former is a better implementation method. Based on such an understanding, the technical solution of the present invention, in essence, or the part that contributes to the prior art, can be embodied in the form of a software product. This computer software product is stored in a storage medium (such as ROM / RAM, magnetic disk, optical disk), and includes several instructions to enable a terminal (which can be a mobile phone, computer, server, air conditioner, or network device, etc.) to execute the methods described in the various embodiments of the present invention.

[0133] The embodiments of the present invention have been described above in conjunction with the accompanying drawings. However, the present invention is not limited to the above specific embodiments. The above specific embodiments are merely illustrative and not restrictive. Under the inspiration of the present invention, those of ordinary skill in the art can also make many forms without departing from the spirit of the present invention and the scope protected by the claims. All of these are within the protection scope of the present invention.

Claims

1. A method for generating a skeleton screen, characterized in that, The method includes: When using an automated testing tool to access a browser page, automatically inject a script for generating a skeleton screen into the browser page; By calling the script, perform the following steps: obtain the Document Object Model (DOM) elements corresponding to the browser page and the Cascading Style Sheets (CSS) corresponding to the skeleton screen, and based on the DOM elements and the CSS, obtain the HyperText Markup Language (HTML) file of the skeleton screen; Generate a skeleton screen according to the HTML file; The method further includes: Monitor a static resource server for accessing the HTML file; when it is monitored that the static resource server starts, use an automated testing tool to access the browser page; The generating a skeleton screen according to the HTML file includes: after the static resource server accesses the HTML file, generate the skeleton screen according to the HTML file accessed by the static resource server; The monitoring a static resource server for accessing the HTML file includes: after obtaining a plug-in for characterizing the display parameters of the skeleton screen, monitor the static resource server for accessing the HTML file; The method further includes: after the static resource server starts, use the plug-in to pass the display parameters of the skeleton screen into the static resource server; The generating the skeleton screen according to the HTML file accessed by the static resource server includes: generate the skeleton screen according to the display parameters of the skeleton screen in the static resource server and the HTML file accessed by the static resource server.

2. The method according to claim 1, wherein The obtaining the DOM elements corresponding to the browser page includes: Traverse the browser page to obtain the DOM elements for generating the skeleton screen, and use the DOM elements for generating the skeleton screen as the DOM elements corresponding to the browser page.

3. The method according to claim 1 or 2, characterized in that, The obtaining the HTML file of the skeleton screen according to the DOM elements and the CSS includes: Insert the CSS into the head tag of the HTML file, and insert the DOM elements into the body tag of the HTML file to obtain the HTML file of the skeleton screen.

4. The method according to claim 1, wherein The plug-in is a custom plug-in packaged by combining a packaging tool.

5. A skeleton screen generation device, characterized in that, The device includes: A first processing module, configured to automatically inject a script for generating a skeleton screen into the browser page when using an automated testing tool to access the browser page; A second processing module, configured to perform the following steps by calling the script: obtain the Document Object Model (DOM) elements corresponding to the browser page and the Cascading Style Sheets (CSS) corresponding to the skeleton screen, and based on the DOM elements and the CSS, obtain the HyperText Markup Language (HTML) file of the skeleton screen; A generating module, configured to generate a skeleton screen according to the HTML file; The first processing module is further configured to monitor a static resource server for accessing the HTML file; when it is monitored that the static resource server starts, use an automated testing tool to access the browser page; The generation module 303 is configured to generate the skeleton screen according to the HTML file obtained by the static resource server after the static resource server accesses the HTML file; The first processing module 301 is configured to, after obtaining the plugin for characterizing the skeleton screen display parameters, monitor the static resource server for accessing the HTML file; after the static resource server is started, use the plugin to pass the skeleton screen display parameters into the static resource server; The generation module 303 is configured to generate the skeleton screen according to the skeleton screen display parameters in the static resource server and the HTML file obtained by the static resource server accessing; 6. The device according to claim 5, characterized in that The second processing module is configured to obtain the DOM element corresponding to the browser page, including: Traverse the browser page to obtain the DOM element for generating the skeleton screen, and use the DOM element for generating the skeleton screen as the DOM element corresponding to the browser page.

7. An electronic device, comprising a memory, a processor, and a computer program stored on the memory and executable on the processor, characterized in that, When the processor executes the program, the method for generating a skeleton screen according to any one of claims 1 to 4 is implemented.

8. A computer storage medium having a computer program stored thereon, characterized in that, When the computer program is executed by the processor, the method for generating a skeleton screen according to any one of claims 1 to 4 is implemented.

Images