CN113760738A - Skeleton screen generation method and device, electronic equipment and computer storage medium - Google Patents
Skeleton screen generation method and device, electronic equipment and computer storage medium Download PDFInfo
- Publication number
- CN113760738A CN113760738A CN202110215267.2A CN202110215267A CN113760738A CN 113760738 A CN113760738 A CN 113760738A CN 202110215267 A CN202110215267 A CN 202110215267A CN 113760738 A CN113760738 A CN 113760738A
- Authority
- CN
- China
- Prior art keywords
- skeleton screen
- generating
- html file
- resource server
- browser page
- 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 55
- 238000013515 script Methods 0.000 claims abstract description 29
- 238000012360 testing method Methods 0.000 claims abstract description 23
- 230000003068 static effect Effects 0.000 claims description 69
- 238000012545 processing Methods 0.000 claims description 32
- 230000015654 memory Effects 0.000 claims description 17
- 238000004590 computer program Methods 0.000 claims description 12
- 238000004806 packaging method and process Methods 0.000 claims description 11
- 238000012544 monitoring process Methods 0.000 claims description 7
- 238000011161 development Methods 0.000 description 7
- 230000006870 function Effects 0.000 description 5
- 230000002349 favourable effect Effects 0.000 description 4
- 238000012423 maintenance Methods 0.000 description 4
- 239000000243 solution Substances 0.000 description 4
- 238000010586 diagram Methods 0.000 description 3
- 230000003287 optical effect Effects 0.000 description 3
- BUGBHKTXTAQXES-UHFFFAOYSA-N Selenium Chemical compound [Se] BUGBHKTXTAQXES-UHFFFAOYSA-N 0.000 description 2
- 230000008859 change Effects 0.000 description 2
- 238000005516 engineering process Methods 0.000 description 2
- 229910052711 selenium Inorganic materials 0.000 description 2
- 239000011669 selenium Substances 0.000 description 2
- VYZAMTAEIAYCRO-UHFFFAOYSA-N Chromium Chemical compound [Cr] VYZAMTAEIAYCRO-UHFFFAOYSA-N 0.000 description 1
- 238000006243 chemical reaction Methods 0.000 description 1
- 238000004891 communication Methods 0.000 description 1
- 230000008878 coupling Effects 0.000 description 1
- 238000010168 coupling process Methods 0.000 description 1
- 238000005859 coupling reaction Methods 0.000 description 1
- 230000000694 effects Effects 0.000 description 1
- 238000002347 injection Methods 0.000 description 1
- 239000007924 injection Substances 0.000 description 1
- 230000005055 memory storage Effects 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 238000005457 optimization Methods 0.000 description 1
- 230000009467 reduction Effects 0.000 description 1
- 238000009877 rendering Methods 0.000 description 1
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/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
- G06F16/986—Document structures and storage, e.g. HTML extensions
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F11/00—Error detection; Error correction; Monitoring
- G06F11/36—Preventing errors by testing or debugging software
- G06F11/3668—Software testing
- G06F11/3672—Test management
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/445—Program loading or initiating
- G06F9/44521—Dynamic linking or loading; Link editing at or after load time, e.g. Java class loading
- G06F9/44526—Plug-ins; Add-ons
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Software Systems (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Databases & Information Systems (AREA)
- Data Mining & Analysis (AREA)
- Computer Hardware Design (AREA)
- Quality & Reliability (AREA)
- Information Transfer Between Computers (AREA)
- Debugging And Monitoring (AREA)
Abstract
The embodiment of the invention provides a skeleton screen generation method, a skeleton screen generation device, electronic equipment and a computer storage medium, wherein the method comprises the following steps: when an automatic testing tool is used for accessing a browser page, a script for generating a skeleton screen is injected into the browser page; executing the following steps by calling the script: acquiring a DOM element corresponding to the browser page and a CSS corresponding to the framework screen, and acquiring an HTML file of the framework screen according to the DOM element and the CSS; and generating a skeleton screen according to the HTML file.
Description
Technical Field
The present invention relates to the field of computer technologies, and in particular, to a method and an apparatus for generating a Skeleton Screen (skeletton Screen), an electronic device, and a computer storage medium.
Background
In recent years, network (WEB) technology is developing towards various engineering and large-scale directions, and the functions of frames such as Vue and fact are increasingly powerful, and the functions of WEB are increasingly complex, so that projects are increasingly large, loading speed is increasingly slow, and problems of user experience, such as a long-time white screen problem before a page appears, are caused.
In order to solve the experience problem caused by the fact that the time of white screen is too long before page loading, a skeleton screen is one of the optimization schemes, and the skeleton screen presents an occupation structure similar to the structure of a page to a user before the page loading is completed, so that the user can feel that the page is loaded well soon. The skeleton screen is also referred to as a load occupation bitmap. The method is characterized in that when page data are not loaded completely, the approximate structure of a page is displayed for a user, and then the data content of the page is displayed after a data request returns, so that a skeleton screen is replaced. However, in the related art, the labor cost and the time cost of the scheme of generating the skeleton screen are high.
Disclosure of Invention
The embodiment of the invention is expected to provide the technical scheme for generating the skeleton screen, and can solve the problem that the scheme for generating the skeleton screen is high in labor cost and time cost.
The embodiment of the invention provides a skeleton screen generation method, which comprises the following steps:
when an automatic testing tool is used for accessing a browser page, a script for generating a skeleton screen is injected into the browser page;
executing the following steps by calling the script: acquiring a Document Object Model (DOM) element corresponding to the browser page and a Cascading Style Sheet (CSS) corresponding to the skeleton screen, and acquiring a hypertext Markup Language (HTML) file of the skeleton screen according to the DOM element and the CSS;
and generating a skeleton screen according to the HTML file.
In some embodiments, the obtaining a DOM element corresponding to the browser page includes:
and acquiring a DOM element used for generating a skeleton screen by traversing the browser page, and taking the DOM element used for generating the skeleton screen as the DOM element corresponding to the browser page.
In some embodiments, the obtaining an HTML file of a skeleton screen according to the DOM element and the CSS includes:
inserting the CSS into a head (head) tag of the HTML file, and inserting the DOM element into a body (body) tag of the HTML file to obtain the HTML file of the skeleton screen.
In some embodiments, the method further comprises:
monitoring a static resource server for accessing the HTML file; when the static resource server is monitored to be started, an automatic testing tool is used for accessing a browser page;
correspondingly, the generating a skeleton screen according to the HTML file includes: and after the static resource server accesses the HTML file, generating the skeleton screen according to the HTML file obtained by the static resource server.
In some embodiments, the listening to a static resource server for accessing HTML files comprises: after a plug-in used for representing a framework screen display parameter is obtained, a static resource server used for accessing an HTML file is monitored;
accordingly, the method further comprises: after the static resource server is started, the framework screen display parameters are transmitted to the static resource server by using the plug-in;
the generating the skeleton screen according to the HTML file accessed by the static resource server comprises: and generating the skeleton screen according to the skeleton screen display parameters in the static resource server and an HTML file accessed by the static resource server.
In some embodiments, the plug-ins are custom plug-ins packaged in conjunction with a packaging tool.
The embodiment of the invention also provides a skeleton screen generating device, which comprises:
the system comprises a first processing module, a second processing module and a third processing module, wherein the first processing module is used for injecting a script for generating a skeleton screen into a browser page when the browser page is accessed by an automatic testing tool;
a second processing module for executing the following steps by calling the script: acquiring a DOM element corresponding to the browser page and a CSS corresponding to the framework screen, and acquiring an HTML file of the framework screen according to the DOM element and the CSS;
and the generating module is used for generating a skeleton screen according to the HTML file.
In some embodiments, the second processing module is configured to obtain a DOM element corresponding to the browser page, and includes:
and acquiring a DOM element used for generating a skeleton screen by traversing the browser page, and taking the DOM element used for generating the skeleton screen as the DOM element corresponding to the browser page.
In some embodiments, the second processing module is configured to obtain an HTML file of a skeleton screen according to the DOM element and the CSS, and includes:
and inserting the CSS into a head tag of the HTML file, and inserting the DOM element into a body tag of the HTML file to obtain the HTML file of the skeleton screen.
In some embodiments, the first processing module is further configured to monitor a static resource server for accessing an HTML file; when the static resource server is monitored to be started, an automatic testing tool is used for accessing a browser page;
correspondingly, the generating module is configured to generate a skeleton screen according to the HTML file, and includes: and after the static resource server accesses the HTML file, generating the skeleton screen according to the HTML file obtained by the static resource server.
In some embodiments, the first processing module, configured to listen to a static resource server for accessing HTML files, includes: after a plug-in used for representing a framework screen display parameter is obtained, a static resource server used for accessing an HTML file is monitored;
correspondingly, the first processing module is further configured to transmit the framework screen display parameters to the static resource server by using the plug-in after the static resource server is started;
the generating module is configured to generate the skeleton screen according to an HTML file obtained by the access of the static resource server, and includes: and generating the skeleton screen according to the skeleton screen display parameters in the static resource server and an HTML file accessed by the static resource server.
In some embodiments, the plug-ins are custom plug-ins packaged in conjunction with a packaging tool.
The embodiment of the invention also provides electronic equipment which comprises a memory, a processor and a computer program which is stored on the memory and can be run on the processor, wherein when the processor executes the program, any one of the skeleton screen generating methods is realized.
An embodiment of the present invention further provides a computer storage medium, on which a computer program is stored, and when the computer program is executed by a processor, the computer program implements any one of the above skeleton screen generating methods.
In the method, the device, the electronic equipment and the computer storage medium for generating the skeleton screen, provided by the embodiment of the invention, when an automatic test tool is used for accessing a browser page, a script for generating the skeleton screen is injected into the browser page; executing the following steps by calling the script: acquiring a DOM element corresponding to the browser page and a CSS corresponding to the framework screen, and acquiring an HTML file of the framework screen according to the DOM element and the CSS; and generating a skeleton screen according to the HTML file.
It can be seen that, in the embodiment of the present invention, when the browser page is accessed by using the automatic test tool, the flow of generating the HTML file of the skeleton screen may be executed by using the script, that is, the execution of the script is favorable for automatically generating the skeleton screen, and is favorable for saving the labor cost and the time cost consumed for generating the skeleton screen.
It is to be understood that both the foregoing general description and the following detailed description are exemplary and explanatory only and are not restrictive of the invention, as claimed.
Drawings
The accompanying drawings, which are incorporated in and constitute a part of this specification, illustrate embodiments consistent with the invention and, together with the description, serve to explain the principles of the invention.
FIG. 1 is a flow chart of a skeleton screen generation method according to an embodiment of the present invention;
FIG. 2 is another flow chart of a skeleton screen generation method according to an embodiment of the present invention;
fig. 3 is a schematic structural diagram of a skeleton screen generating device according to an embodiment of the present invention;
fig. 4 is a schematic structural diagram of an electronic device according to an embodiment of the present invention.
Detailed Description
The present invention will be described in further detail below with reference to the accompanying drawings and examples. It should be understood that the examples provided herein are merely illustrative of the present invention and are not intended to limit the present invention. In addition, the following embodiments are provided as partial embodiments for implementing the present invention, not all embodiments for implementing the present invention, and the technical solutions described in the embodiments of the present invention may be implemented in any combination without conflict.
It should be noted that, in the embodiments of the present invention, the terms "comprises", "comprising" or any other variation thereof are intended to cover a non-exclusive inclusion, so that a method or apparatus including a series of elements includes not only the explicitly recited elements but also other elements not explicitly listed or inherent to the method or apparatus. Without further limitation, the use of the phrase "including a. -. said." does not exclude the presence of other elements (e.g., steps in a method or elements in a device, such as portions of circuitry, processors, programs, software, etc.) in the method or device in which the element is included.
For example, the skeleton screen generation method provided by the embodiment of the present invention includes a series of steps, but the skeleton screen generation method provided by the embodiment of the present invention is not limited to the described steps, and similarly, the skeleton screen generation device provided by the embodiment of the present invention includes a series of modules, but the skeleton screen generation device provided by the embodiment of the present invention is not limited to include the explicitly described modules, and may also include modules that are required to be provided for acquiring relevant information or performing processing based on the information.
The term "and/or" herein is merely an association describing an associated object, meaning that three relationships may exist, e.g., C and/or D, may mean: c exists alone, C and D exist simultaneously, and D exists alone. In addition, the term "at least one" herein means any one of a plurality or any combination of at least two of a plurality.
In the related art, there are two main schemes for generating a skeleton screen, the first scheme is: completely designing a set of skeleton screen with the same structure as the page, realizing HTML (hypertext markup language) files and CSS (cascading style sheets) by handwriting, and realizing a set of skeleton screen structure with highly presented page structure; the second scheme is as follows: the framework style is realized through the DOM pseudo element, and the dynamic switching of the framework and the page is realized through the operation style.
The first scheme has the advantages that: the reduction degree is high, user experience is good, but the shortcoming is that the flexibility is relatively poor, and when the style or the overall arrangement of page change, also need to modify the style and the overall arrangement of skeleton screen simultaneously, lead to repeated mechanical labor work and later stage change maintenance cost great.
The second scheme has the advantages that: the development is simple, the customization degree is high, and the device is not overstaffed; the disadvantages are that: the automation degree is low, and higher coordination requirements are required.
In addition, most of the schemes for generating the skeleton screen in the related art are attached to front end frames such as Vue or reach, that is, the schemes are relatively high in coupling degree with the front end frames such as Vue or reach and relatively low in universality.
In view of the foregoing technical problems, embodiments of the present invention provide a skeleton screen generation method and apparatus, an electronic device, and a computer storage medium. Embodiments of the invention may be implemented on a terminal, which may be a thin client, a thick client, a hand-held or laptop device, a microprocessor-based system, a set-top box, a programmable consumer electronics, a network personal computer, a small computer system, and/or the like, and/or a server. The server may be a small computer system, a mainframe computer system, a distributed cloud computing environment including any of the systems described above, and so forth.
The electronic devices, such as servers, may be described in the general context of computer system-executable instructions, such as program modules, being executed by a computer system. Generally, program modules may include routines, programs, objects, components, logic, data structures, etc. that perform particular tasks or implement particular abstract data types. The computer system/server may be practiced in distributed cloud computing environments where tasks are performed by remote processing devices that are linked through a communications network. In a distributed cloud computing environment, program modules may be located in both local and remote computer system storage media including memory storage devices.
Fig. 1 is a flowchart of a skeleton screen generating method according to an embodiment of the present invention, and as shown in fig. 1, the flowchart may include:
step 101: when the browser page is accessed by the automatic testing tool, the script for generating the skeleton screen is injected into the browser page.
In some embodiments, the automated testing tool may be Puppeteer, Selenium, or other automated testing tool.
Puppeneer is a Node library that uses the tool DevTools, provides a powerful Application Programming Interface (API) to control headless browsers, and can also be set to control full browsers (non-headless mode).
The Selenium belongs to an automatic testing tool of a Web application program, can directly run in a browser, and has the main functions of: testing compatibility with browsers, creating regression tests to verify software functionality and user requirements.
In some embodiments, the browser page may be a page of a headless browser or a page of a browser in a non-headless mode, where the headless browser is a browser without an operation interface and is commonly used for web page automation test, and an API provided by the headless browser may be used to automatically execute an operation instruction.
In some embodiments, the script that generates the skeletal screen may be a js (javascript) script or other type of script; in some embodiments, when the script generating the skeleton screen is a js script, the js script may be injected into the browser page using a page.
Step 102: the following steps are performed by calling a script: and acquiring a DOM element corresponding to the browser page and a CSS corresponding to the framework screen, and acquiring an HTML file of the framework screen according to the DOM element and the CSS.
In the embodiment of the invention, the DOM is a standard programming interface for processing the extensible markup language, is an API independent of a platform and a language, and can dynamically access programs and scripts and update the content, the structure and the style of a document. The DOM is a tree-based API document that requires that the entire document be represented in memory during processing.
CSS is a computer Language used to represent file styles such as HTML or Extensible Markup Language (XML), and can statically modify a web page and dynamically format elements of the web page in cooperation with various scripting languages. The CSS can accurately control the typesetting of element positions in the webpage at a pixel level, supports almost all font and font styles and has the capability of editing webpage objects and model styles.
In some embodiments, the CSS corresponding to the skeletal screen may be the CSS of the accessed browser page.
In some embodiments, the DOM element used to generate the skeleton screen may be obtained by traversing the browser page, and the DOM element used to generate the skeleton screen may be used as the DOM element corresponding to the browser page.
Illustratively, the DOM elements for generating the skeleton screen may be obtained by executing a page update method in the browser page, where the page update method acquires elements to be replaced by the skeleton (i.e., DOM elements for generating the skeleton screen) in the browser page through recursive traversal, and then performs style overlay in a manner of adding class names to the elements, so as to replace the elements with the skeleton screen elements.
Therefore, the DOM elements corresponding to the browser pages can be easily and comprehensively acquired by traversing the browser pages in the embodiment of the invention.
In the embodiment of the invention, the HTML file of the skeleton screen is a static HTML file.
In some embodiments, the CSS may be inserted into a head tag of an HTML file, and the DOM element may be inserted into a body tag of the HTML file, so as to obtain the HTML file of the skeleton screen.
Illustratively, the CSS may be inserted into the head tag of the HTML file by means of a style tag.
Therefore, the embodiment of the invention can directly obtain the HTML file of the skeleton screen by inserting the corresponding information into the head tag and the body tag of the HTML file, and is easy to realize.
Step 103: and generating a skeleton screen according to the HTML file.
In the embodiment of the invention, after the HTML file of the skeleton screen is acquired, the skeleton screen can be presented in the browser page based on the HTML file of the skeleton screen before the HTML file of the skeleton screen is loaded in the browser page.
In practical applications, the steps 101 to 103 may be implemented based on a Processor of an electronic Device, where the Processor may 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.
It can be seen that, in the embodiment of the present invention, when the browser page is accessed by using the automatic test tool, the flow of generating the HTML file of the skeleton screen may be executed by using the script, that is, the execution of the script is favorable for automatically generating the skeleton screen, and is favorable for saving the labor cost and the time cost consumed for generating the skeleton screen.
The embodiment of the invention can be combined with automatic testing tools such as Puppeneer and the like to realize automatic injection to generate the high-quality skeleton screen, can reduce the time and labor cost brought by development and later maintenance of the skeleton screen, and can generate the effect which can be comparable to that of a handwritten skeleton screen; compared with the first scheme 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 invention can save about 70% of labor hour compared with the first scheme; the skeleton screen generation method provided by the embodiment of the invention has almost no later maintenance cost, and compared with the first scheme, the later maintenance efficiency is improved by nearly 100%.
Furthermore, the embodiment of the invention can be suitable for multi-end application such as h5(HTML5) and WeChat small programs, is not attached to a single front-end framework, improves the universality, can reduce the development cost such as manpower and time of users with different frameworks, and is convenient to maintain and upgrade.
In some embodiments, a static resource server for accessing the HTML file may also be listened to; when the static resource server is monitored to be started, accessing a browser page by using an automatic testing tool;
accordingly, according to the HTML file, an implementation manner of generating a skeleton screen may include: and after the static resource server accesses the HTML file, generating a skeleton screen according to the HTML file obtained by the access of the static resource server.
In the embodiment of the present invention, the static resource server may be a server that executes a local node service.
It can be seen that, in the embodiment of the present invention, by monitoring the static resource server, when the static resource server is started, the automatic test tool is used to realize the automatic access of the browser page, and further, when the static resource server is started, the framework screen can be automatically generated by executing the script; namely, when the static resource server is started, the skeleton screen can be automatically generated, and the automation degree of the skeleton screen generation method is improved.
In some embodiments, the above implementation of listening to a static resource server for accessing an HTML file may include: and after obtaining the plug-in used for representing the display parameters of the framework screen, monitoring a static resource server used for accessing the HTML file.
Here, the skeleton screen display parameter may be a background color or other parameter of an element of the skeleton screen; the plug-in used for representing the display parameters of the skeleton screen can be a plugin plug-in.
In some embodiments, after the static resource server is started, the framework screen display parameters may be transmitted to the static resource server by using the plug-in;
accordingly, generating the skeleton screen according to the HTML file accessed by the static resource server may include: and generating a skeleton screen according to the skeleton screen display parameters in the static resource server and the HTML file accessed by the static resource server.
The method and the device for displaying the skeleton screen can transmit the display parameters of the skeleton screen to the static resource server through the plug-in, so that the skeleton screen is displayed according to the display parameters of the skeleton screen.
In some embodiments, the plug-in is a custom plug-in packaged in conjunction with a packaging tool.
Illustratively, the packaging tool may be a Webpack, gulp, rollup, or the like tool. The core concept of Webpack is a static resource packager of javaScript, the main goal of which is to package js files together, the packaged files are used in a browser, and the Webpack can also be used for functions of conversion, packaging and the like. Gulp is an automated building tool that developers can use to automatically perform common tasks in the development of a project. rollup is a JavaScript module packager capable of compiling small block codes into large complex generations
The embodiment of the invention can achieve the engineering and the configurability of the scheme of generating the skeleton screen by combining the mode of customizing the extension plug-in by a packaging tool, thereby reducing the realization difficulty and the configuration cost; the embodiment of the invention can automatically generate the skeleton screen by monitoring the static resource server after the plug-in is formed by packaging, and compared with the second scheme, the automation degree of the scheme for generating the skeleton screen is improved.
The skeleton screen generation method according to the embodiment of the present invention is further described below with reference to the accompanying drawings.
Fig. 2 is another flowchart of a skeleton screen generation method according to an embodiment of the present invention, and as shown in fig. 2, the flowchart may include:
step 201: the static resource server is started.
Exemplarily, in order to better combine with an actual application development project or a web page development project, in the embodiment of the present invention, a customized plugin plug may be packaged in a page by using webpack, and an event that the page is packaged is monitored, for example, monitoring registration may be performed by monitoring the page packaging completion event, namely, the event, namely, company, hooks, done.done.tap; after the page packaging is completed, starting a static resource server; the static resource server here is used to perform local node services.
In the embodiment of the invention, the packaged file can be accessed by starting the static resource server, and at the moment, the framework screen display parameters can be transmitted into the started node service through the plugin.
Step 202: browser pages are accessed using Puppeteer.
Illustratively, after a static resource server is started, a chrome headless browser can be started through Puppeteeer, and the access of a browser page is realized by opening a new tab page; in an implementation manner, the size of the skeleton screen which needs to be adaptively generated needs to be configured, so that after the HTML file of the skeleton screen is obtained, the skeleton screen can be presented according to the HTML file and the configured size of the skeleton screen.
Step 203: and injecting the script of the skeleton screen into the browser page so as to be convenient to call.
Step 204: and traversing and acquiring elements to be replaced by the skeleton in the browser page, and replacing the elements by skeleton screen elements.
Step 205: and inserting the DOM element of the skeleton screen element and the CSS corresponding to the skeleton screen into the HTML file to obtain the HTML file of the skeleton screen.
Here, the DOM element of the skeleton screen element is a DOM element corresponding to the browser page.
Step 206: and before the loading in the browser page is completed, rendering the skeleton screen in the browser page based on the HTML file of the skeleton screen.
The implementation of step 203 to step 206 has already been explained in the foregoing embodiments, and is not described here again.
On the basis of the skeleton screen generation method provided by the foregoing embodiment, an embodiment of the present invention further provides a skeleton screen generation apparatus.
Fig. 3 is a schematic structural diagram of a skeleton screen generating device according to an embodiment of the present invention, and as shown in fig. 3, the device may include:
the first processing module 301 is configured to, when a browser page is accessed by using an automated testing tool, inject a script for generating a skeleton screen into the browser page;
a second processing module 302, configured to execute the following steps by calling the script: acquiring a DOM element corresponding to the browser page and a CSS corresponding to the framework screen, and acquiring an HTML file of the framework screen according to the DOM element and the CSS;
and the generating module 303 is configured to generate a skeleton screen according to the HTML file.
In some embodiments, the second processing module 302 is configured to obtain a DOM element corresponding to the browser page, and includes:
and acquiring a DOM element used for generating a skeleton screen by traversing the browser page, and taking the DOM element used for generating the skeleton screen as the DOM element corresponding to the browser page.
In some embodiments, the second processing module 302 is configured to obtain an HTML file of a skeleton screen according to the DOM element and the CSS, and includes:
and inserting the CSS into a head tag of the HTML file, and inserting the DOM element into a body tag of the HTML file to obtain the HTML file of the skeleton screen.
In some embodiments, the first processing module 301 is further configured to listen to a static resource server for accessing an HTML file; when the static resource server is monitored to be started, an automatic testing tool is used for accessing a browser page;
correspondingly, the generating module 303 is configured to generate a skeleton screen according to the HTML file, and includes: and after the static resource server accesses the HTML file, generating the skeleton screen according to the HTML file obtained by the static resource server.
In some embodiments, the first processing module 301, configured to listen to a static resource server for accessing an HTML file, includes: after a plug-in used for representing a framework screen display parameter is obtained, a static resource server used for accessing an HTML file is monitored;
correspondingly, the first processing module 301 is further configured to transmit the framework screen display parameters to the static resource server by using the plug-in after the static resource server is started;
the generating module 303 is configured to generate the skeleton screen according to an HTML file obtained by accessing the static resource server, and includes: and generating the skeleton screen according to the skeleton screen display parameters in the static resource server and an HTML file accessed by the static resource server.
In some embodiments, the plug-ins are custom plug-ins packaged in conjunction with a packaging tool.
The first processing module 301, the second processing module 302, and the generating module 303 may be implemented by a processor located in an electronic device, where the processor is at least one of an ASIC, a DSP, a DSPD, a PLD, an FPGA, a CPU, a controller, a microcontroller, and a microprocessor.
In addition, each functional module in this embodiment 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 integrated unit can be realized in a form of hardware or a form of a software functional module.
Based on the understanding that the technical solution of the present embodiment essentially or a part contributing to the prior art, or all or part of the technical solution may be embodied in the form of a software product stored in a storage medium, and include several instructions for causing a computer device (which may be a personal computer, a server, or a network device, etc.) or a processor (processor) to execute all or part of the steps of the method of the present embodiment. 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.
Specifically, the computer program instructions corresponding to a skeleton screen generation method in the present embodiment may be stored in a storage medium such as an optical disc, a hard disc, or a usb disk, and when the computer program instructions corresponding to a skeleton screen generation method in the storage medium are read or executed by an electronic device, any of the skeleton screen generation methods in the foregoing embodiments may be implemented.
Based on the same technical concept of the foregoing embodiment, referring to fig. 4, it shows an electronic device 40 provided by an embodiment of the present invention, which may include: memory 401, processor 402, and computer programs stored on memory 401 and executable on processor 402; wherein,
a memory 401 for storing computer programs and data;
a processor 402 for executing the computer program stored in the memory to implement any one of the skeleton screen generation methods of the previous embodiments.
In practical applications, the memory 401 may be a volatile memory (RAM); or a non-volatile memory (non-volatile memory) such as a ROM, a flash memory (flash memory), a Hard Disk (Hard Disk Drive, HDD) or a Solid-State Drive (SSD); or a combination of the above types of memories and provides instructions and data to the processor 402.
The processor 402 may be at least one of an ASIC, a DSP, a DSPD, a PLD, an FPGA, a CPU, a controller, a microcontroller, and a microprocessor.
In some embodiments, functions of or modules included in the apparatus provided in the embodiments of the present invention may be used to execute the method described in the above method embodiments, and specific implementation thereof may refer to the description of the above method embodiments, and for brevity, will not be described again here.
The foregoing description of the various embodiments is intended to highlight various differences between the embodiments, and the same or similar parts may be referred to each other, which are not repeated herein for brevity
The methods disclosed in the method embodiments provided by the present application can be combined arbitrarily without conflict to obtain new method embodiments.
Features disclosed in various product embodiments provided by the application can be combined arbitrarily to obtain new product embodiments without conflict.
The features disclosed in the various method or apparatus embodiments provided herein may be combined in any combination to arrive at new method or apparatus embodiments without conflict.
Through the above description of the embodiments, those skilled in the art will clearly understand that the method of the above embodiments can be implemented by software plus a necessary general hardware platform, and certainly can also be implemented by hardware, but in many cases, the former is a better implementation manner. Based on such understanding, the technical solutions of the present invention may be embodied in the form of a software product, which is stored in a storage medium (such as ROM/RAM, magnetic disk, optical disk) and includes instructions for enabling a terminal (such as a mobile phone, a computer, a server, an air conditioner, or a network device) to execute the method according to the embodiments of the present invention.
While the present invention has been described with reference to the embodiments shown in the drawings, the present invention is not limited to the embodiments, which are illustrative and not restrictive, and it will be apparent to those skilled in the art that various changes and modifications can be made therein without departing from the spirit and scope of the invention as defined in the appended claims.
Claims (10)
1. A skeleton screen generation method, comprising:
when an automatic testing tool is used for accessing a browser page, a script for generating a skeleton screen is injected into the browser page;
executing the following steps by calling the script: acquiring a Document Object Model (DOM) element corresponding to the browser page and a Cascading Style Sheet (CSS) corresponding to the skeleton screen, and acquiring a hypertext markup language (HTML) file of the skeleton screen according to the DOM element and the CSS;
and generating a skeleton screen according to the HTML file.
2. The method of claim 1, wherein the obtaining the DOM element corresponding to the browser page comprises:
and acquiring a DOM element used for generating a skeleton screen by traversing the browser page, and taking the DOM element used for generating the skeleton screen as the DOM element corresponding to the browser page.
3. The method according to claim 1 or 2, wherein obtaining an HTML file of a skeleton screen according to the DOM element and the CSS comprises:
and inserting the CSS into a head tag of the HTML file, and inserting the DOM element into a body tag of the HTML file to obtain the HTML file of the skeleton screen.
4. The method of claim 1, further comprising:
monitoring a static resource server for accessing the HTML file; when the static resource server is monitored to be started, an automatic testing tool is used for accessing a browser page;
correspondingly, the generating a skeleton screen according to the HTML file includes: and after the static resource server accesses the HTML file, generating the skeleton screen according to the HTML file obtained by the static resource server.
5. The method of claim 4, wherein listening to a static resource server for accessing HTML files comprises: after a plug-in used for representing a framework screen display parameter is obtained, a static resource server used for accessing an HTML file is monitored;
accordingly, the method further comprises: after the static resource server is started, the framework screen display parameters are transmitted to the static resource server by using the plug-in;
the generating the skeleton screen according to the HTML file accessed by the static resource server comprises: and generating the skeleton screen according to the skeleton screen display parameters in the static resource server and an HTML file accessed by the static resource server.
6. The method of claim 5, wherein the plug-in is a custom plug-in packaged in conjunction with a packaging tool.
7. A skeletal screen generation apparatus, the apparatus comprising:
the system comprises a first processing module, a second processing module and a third processing module, wherein the first processing module is used for injecting a script for generating a skeleton screen into a browser page when the browser page is accessed by an automatic testing tool;
a second processing module for executing the following steps by calling the script: acquiring a Document Object Model (DOM) element corresponding to the browser page and a Cascading Style Sheet (CSS) corresponding to the skeleton screen, and acquiring a hypertext markup language (HTML) file of the skeleton screen according to the DOM element and the CSS;
and the generating module is used for generating a skeleton screen according to the HTML file.
8. The apparatus according to claim 7, wherein the second processing module is configured to obtain a DOM element corresponding to the browser page, and includes:
and acquiring a DOM element used for generating a skeleton screen by traversing the browser page, and taking the DOM element used for generating the skeleton screen as the DOM element corresponding to the browser page.
9. An electronic device comprising a memory, a processor, and a computer program stored on the memory and executable on the processor, wherein the processor implements the skeletal screen generation method of any of claims 1 to 6 when executing the program.
10. A computer storage medium having a computer program stored thereon, wherein the computer program, when executed by a processor, implements the skeletal screen generation method of any of claims 1 to 6.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110215267.2A CN113760738A (en) | 2021-02-25 | 2021-02-25 | Skeleton screen generation method and device, electronic equipment and computer storage medium |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110215267.2A CN113760738A (en) | 2021-02-25 | 2021-02-25 | Skeleton screen generation method and device, electronic equipment and computer storage medium |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN113760738A true CN113760738A (en) | 2021-12-07 |
Family
ID=78786686
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202110215267.2A Pending CN113760738A (en) | 2021-02-25 | 2021-02-25 | Skeleton screen generation method and device, electronic equipment and computer storage medium |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN113760738A (en) |
Citations (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20030177175A1 (en) * | 2001-04-26 | 2003-09-18 | Worley Dale R. | Method and system for display of web pages |
| CN103473347A (en) * | 2013-09-24 | 2013-12-25 | 北京大学 | Web page similarity-based browser rendering optimization method |
| CN109298864A (en) * | 2018-08-23 | 2019-02-01 | 深圳点猫科技有限公司 | The method and electronic equipment of automation generation project skeleton screen under teaching platform |
| CN110275705A (en) * | 2019-06-19 | 2019-09-24 | 北京三快在线科技有限公司 | Generate method, apparatus, equipment and the storage medium for preloading page code |
| CN111552473A (en) * | 2020-04-27 | 2020-08-18 | 腾讯科技（深圳）有限公司 | Application processing method, device and equipment |
| CN111625234A (en) * | 2019-02-28 | 2020-09-04 | 北京京东尚科信息技术有限公司 | Page skeleton screen generation method, device and equipment and readable storage medium |
| CN112307385A (en) * | 2020-10-22 | 2021-02-02 | 北京达佳互联信息技术有限公司 | Webpage data loading and processing method and device, electronic equipment and storage medium |
-
2021
- 2021-02-25 CN CN202110215267.2A patent/CN113760738A/en active Pending
Patent Citations (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20030177175A1 (en) * | 2001-04-26 | 2003-09-18 | Worley Dale R. | Method and system for display of web pages |
| CN103473347A (en) * | 2013-09-24 | 2013-12-25 | 北京大学 | Web page similarity-based browser rendering optimization method |
| CN109298864A (en) * | 2018-08-23 | 2019-02-01 | 深圳点猫科技有限公司 | The method and electronic equipment of automation generation project skeleton screen under teaching platform |
| CN111625234A (en) * | 2019-02-28 | 2020-09-04 | 北京京东尚科信息技术有限公司 | Page skeleton screen generation method, device and equipment and readable storage medium |
| CN110275705A (en) * | 2019-06-19 | 2019-09-24 | 北京三快在线科技有限公司 | Generate method, apparatus, equipment and the storage medium for preloading page code |
| CN111552473A (en) * | 2020-04-27 | 2020-08-18 | 腾讯科技（深圳）有限公司 | Application processing method, device and equipment |
| CN112307385A (en) * | 2020-10-22 | 2021-02-02 | 北京达佳互联信息技术有限公司 | Webpage data loading and processing method and device, electronic equipment and storage medium |
Non-Patent Citations (3)
| Title |
|---|
| HONDA, S等: "A Collaborative Environment for User-initiated Development of Web Applications", FRONTIERS IN ARTIFICIAL INTELLIGENCE AND APPLICATIONS, 1 January 2007 (2007-01-01) * |
| 巩晓悦: "基于个性化推荐的在线学习系统研究与实现", 中国优秀硕士学位论文全文数据库, 15 September 2019 (2019-09-15) * |
| 王欢欢;吴毅坚;赵文耘;: "Web应用界面跨浏览器兼容性的自动检测方法", 计算机科学, no. 2, 15 November 2015 (2015-11-15) * |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN108984174B (en) | Cross-platform application creation method, device, server and storage medium | |
| CN109739478B (en) | Front-end project automatic construction method and device, storage medium and electronic equipment | |
| US10325012B2 (en) | Filtered stylesheets | |
| CN117093316B (en) | Cross-platform page rendering system, electronic equipment and storage medium | |
| CN110389755B (en) | Code processing method and device, electronic equipment and computer readable storage medium | |
| CN110727429B (en) | Front-end page generation method, device and equipment | |
| CN113010827A (en) | Page rendering method and device, electronic equipment and storage medium | |
| CN114077430A (en) | Interface generation method and device, electronic equipment and storage medium | |
| CN112559026A (en) | API interface-based native capability expansion method, device and storage medium | |
| CN111078217A (en) | Brain graph generation method, apparatus and computer-readable storage medium | |
| CN114217789A (en) | Function component expansion method, device, equipment, storage medium and program product | |
| CN113778405A (en) | Cross-platform APP construction method, device, system and medium | |
| CN114297549A (en) | Component processing method and device | |
| CN114168853A (en) | Data visualization display method, device, medium and electronic equipment | |
| CN113535175A (en) | Application program front-end code generation method and device, electronic equipment and medium | |
| CN112650492A (en) | Rendering method, system and related device of Web page | |
| CN109408057B (en) | Method, device, medium and computing equipment for automatically generating codes | |
| CN111124924A (en) | API (application program interface) deployment method and device, electronic equipment and storage medium | |
| CN115659087B (en) | Page rendering method, equipment and storage medium | |
| CN113760738A (en) | Skeleton screen generation method and device, electronic equipment and computer storage medium | |
| CN117555587A (en) | Project reconstruction method, device, equipment and medium based on AngullarJS framework | |
| CN113641594B (en) | Cross-terminal automatic testing method and related device | |
| CN110717134A (en) | Product description issuing method and device, storage medium and electronic equipment | |
| CN111708519B (en) | Service component processing method, device, equipment and storage medium | |
| CN111857782B (en) | Interface updating 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 |