Webpage skeleton screen generation method and device and electronic equipment

Abstract

The invention provides a webpage skeleton screen generation method and device and electronic equipment. The method comprises the steps of obtaining a hypertext markup language (HTML) source code, a cascading style sheet and a JavaScript code of a target webpage; analyzing the HTML source code to obtain main structural elements of the target webpage, analyzing the cascading style sheet to obtain visual style information of the target webpage, analyzing the JavaScript code to determine a dynamic content area of the target webpage; generating a skeleton screen of the target webpage based on the main structural elements, the visual style information and the dynamic content area; and injecting the skeleton screen of the target webpage into the code of each business item, calling a skeleton screen generation service in each business item, and generating the skeleton screen of each business item. According to the method, the skeleton screen can be automatically generated and injected, the efficiency is high, the dynamic content of the webpage can be adapted, and the user experience is improved.

Description

Technical Field

[0001] The present invention relates to the field of computer technology, and in particular to a method, device and electronic device for generating a web page skeleton screen. Background Art

[0002] With the development of Internet technology, users' requirements for web page experience are increasing, and web page loading performance has become an important concern. In order to improve web page loading performance, developers introduced skeleton screen technology. Skeleton screen is a placeholder technology that reduces the blank experience of users while waiting for content to load by displaying a pre-designed simplified layout before the page content is fully loaded. The current skeleton screen generation method usually relies on manual design by developers, which is inefficient. Manually generated skeleton screens are difficult to match with the dynamic content of web pages, resulting in poor user experience. Summary of the invention

[0003] The present invention provides a web page skeleton screen generation method, device and electronic device to solve the defects of the prior art that the web page skeleton screen is generated manually, which is inefficient and difficult to match with the dynamic content of the web page, resulting in poor user experience.

[0004] In a first aspect, the present invention provides a method for generating a web page skeleton screen, comprising: Obtaining the HTML source code, cascading style sheet and JavaScript code of the target web page; Parsing the HTML source code to obtain the main structural elements of the target web page, parsing the cascading style sheet to obtain the visual style information of the target web page, and parsing the JavaScript code to determine the dynamic content area of ​​the target web page; Generating a skeleton screen of the target web page based on the main structural elements, visual style information and dynamic content area; The skeleton screen of the target webpage is injected into the code of each business item, and the skeleton screen generation service is called in each business item to generate the skeleton screen of each business item.

[0005] In some embodiments, generating a skeleton screen of the target webpage based on the main structural elements, visual style information and dynamic content area includes: Automatically generate a skeleton screen template of the target web page according to the main structural elements and dynamic content areas; Based on the visual style information, an animation effect is added to the skeleton screen template of the target webpage to generate the skeleton screen of the target webpage.

[0006] In some embodiments, injecting the skeleton screen of the target webpage into the code of each business project, calling the skeleton screen generation service in each business project, and generating the skeleton screen of each business project includes: During the construction of the business project, a construction tool is used to inject the skeleton screen of the target web page into the code of each business project; Obtain a skeleton screen generation service request, respond to the skeleton screen generation service request, call the skeleton screen generation service in each business project, pass in the parameters of each business project, and generate a skeleton screen for each business project based on the parameters of each business project; The skeleton screen of each business item is injected into the target page of each business item, so that the skeleton screen of each business item is displayed before the content of the target page of each business item is loaded completely.

[0007] In some embodiments, after injecting the skeleton screen of each business item into the target page of each business item, the method further includes: The target page of each business item is detected to determine whether the skeleton screen of each business item is successfully injected into the target page of each business item. If not, the original state of the target page of each business item is automatically restored.

[0008] In some embodiments, the parsing of the HTML source code to obtain the main structural elements of the target web page includes: Parsing the HTML source code using an HTML parsing tool to obtain multiple structural elements of the target web page; Constructing a document object model DOM tree with the multiple structural elements as nodes; The main structural element is determined from the plurality of structural elements based on the DOM tree.

[0009] In some embodiments, parsing the JavaScript code to determine the dynamic content area of ​​the target webpage includes: Parsing the JavaScript code, identifying the code related to dynamic content loading and asynchronous request, and determining the dynamic content generation method of the target web page; The dynamic content area of ​​the target webpage is determined according to the dynamic content generation method of the target webpage.

[0010] In some embodiments, the method further comprises: Get the screen size and resolution of the terminal device; The layout and style of the skeleton screen of the target webpage are adjusted according to the screen size and resolution.

[0011] In some embodiments, the method further comprises: Saving the skeleton screen of each business project into the project directory file of each business project; The skeleton screen of each business item is automatically updated.

[0012] In a second aspect, the present invention further provides a web page skeleton screen generating device, comprising: A first acquisition unit, used to acquire a hypertext markup language HTML source code, a cascading style sheet and a JavaScript code of a target web page; A parsing unit, configured to parse the HTML source code to obtain the main structural elements of the target web page, parse the cascading style sheet to obtain the visual style information of the target web page, and parse the JavaScript code to determine the dynamic content area of ​​the target web page; A generating unit, configured to generate a skeleton screen of the target web page based on the main structural elements, visual style information and dynamic content area; The injection unit is used to inject the skeleton screen of the target webpage into the code of each business project, and call the skeleton screen generation service in each business project to generate the skeleton screen of each business project.

[0013] In a third aspect, the present invention further provides an electronic device, comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein when the processor executes the program, the method for generating a web page skeleton screen as described above is implemented.

[0014] The web page skeleton screen generation method, device and electronic device provided by the present invention obtain the hypertext markup language HTML source code, cascading style sheet and JavaScript code of the target web page, parse them, determine the main structural elements, visual style information and dynamic content area of ​​the target web page, generate the skeleton screen of the target web page according to the main structural elements, visual style information and dynamic content area of ​​the target web page, inject the skeleton screen of the target web page into the code of each business project, call the skeleton screen generation service in each business project, and generate the skeleton screen of each business project. The present invention can automatically generate and inject the skeleton screen with high efficiency, can adapt to the dynamic content of the web page, and improve the user experience. BRIEF DESCRIPTION OF THE DRAWINGS

[0015] In order to more clearly illustrate the technical solutions in the present invention or the prior art, the following briefly introduces the drawings required for use in the embodiments or the description of the prior art. Obviously, the drawings described below are some embodiments of the present invention. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying creative work.

[0016] Figure 1 It is a flowchart of a method for generating a web page skeleton screen provided by an embodiment of the present invention; Figure 2 It is a structural schematic diagram of a web page skeleton screen generating device provided by an embodiment of the present invention; Figure 3 It is a schematic diagram of the structure of an electronic device provided by an embodiment of the present invention. DETAILED DESCRIPTION

[0017] In order to make the purpose, technical solution and advantages of the present invention clearer, the technical solution of the present invention will be clearly and completely described below in conjunction with the drawings of the present invention. Obviously, the described embodiments are part of the embodiments of the present invention, not all of the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by ordinary technicians in this field without creative work are within the scope of protection of the present invention.

[0018] The existing skeleton screen generation method mainly relies on developers to manually write HTML and CSS codes, which is not only inefficient but also increases the burden on developers. Moreover, the manually generated skeleton screen may not be consistent with the actual display effect of the final page when facing dynamically loaded content. Specifically, the existing skeleton screen generation method has the following defects: 1) Manual operation is cumbersome: Currently, the generation of skeleton screens usually requires developers to manually write codes. This process is not only time-consuming and laborious, but may also cause the skeleton screen to be inconsistent with the actual structure of the page due to human negligence or lack of experience, affecting the user experience; 2) Difficult to adapt to dynamic content: Manually generated skeleton screens are often difficult to match with the dynamic content of web pages. For example, when a page loads data through asynchronous requests, the pre-generated skeleton screen may not reflect the final rendered content, resulting in a poor user experience. 3) Increased development costs: Manually generating and maintaining skeleton screens consumes a lot of development resources, especially in pages that need to be updated frequently. Each modification of the content or layout requires the skeleton screen to be regenerated, which undoubtedly increases development and maintenance costs; 4) Inconsistent user experience: Since the manually generated skeleton screen lacks the automatic adaptation function, different pages or the same page may have inconsistent user experience on different devices and under different network conditions, affecting the overall experience; 5) Additional processing time: After the page function is changed, the skeleton screen code needs to be manually updated, resulting in additional time overhead; 6) Additional business function risks: Since the traditional skeleton screen generation solution invades the business code, it may affect the website function.

[0019] To this end, the embodiments of the present invention provide a web page skeleton screen generation method, device and electronic device, which obtains the hypertext markup language HTML source code, cascading style sheet and JavaScript code of the target web page, parses them, determines the main structural elements, visual style information and dynamic content area of ​​the target web page, generates the skeleton screen of the target web page according to the main structural elements, visual style information and dynamic content area of ​​the target web page, injects the skeleton screen of the target web page into the code of each business project, calls the skeleton screen generation service in each business project, and generates the skeleton screen of each business project. The present invention can automatically generate and inject the skeleton screen, has high efficiency, can adapt to the dynamic content of the web page, and improves the user experience.

[0020] Figure 1 The schematic diagram of the process of generating a web page skeleton screen according to an embodiment of the present invention is shown in FIG. Figure 1 As shown, a method for generating a skeleton screen of a web page is provided, comprising the following steps: step 110, step 120, step 130 and step 140. The steps of the method flow are only used as a possible implementation mode of the present invention.

[0021] Step 110: Obtain the Hypertext Markup Language HTML source code, Cascading Style Sheet and JavaScript code of the target web page.

[0022] Optionally, the Hyper Text Markup Language (HTML) source code includes at least a document type, a root element, header information, and body content.

[0023] Among them, Cascading Style Sheets (CSS) are used to describe the appearance and format of HTML documents. CSS can be used to control the layout, color, font and other visual effects of the web page.

[0024] Among them, JavaScript code is mainly used to enhance user interaction, dynamic content updates, and asynchronous data processing.

[0025] Optionally, simulate user behaviors, such as clicking a button, filling out a form, scrolling a page, etc., open a browser on the server, load the target website, and obtain the HTML source code, cascading style sheets, and JavaScript codes of the target web page.

[0026] Step 120: parse the HTML source code to obtain the main structural elements of the target web page, parse the cascading style sheet to obtain the visual style information of the target web page, and parse the JavaScript code to determine the dynamic content area of ​​the target web page.

[0027] Optionally, the visual style information includes style rules and attributes, as well as style priorities and inheritance relationships.

[0028] For example, the parsed style rules "#header { background-color: #fff;}" can be applied to the corresponding placeholders of the skeleton screen.

[0029] It is understandable that by parsing the HTML source code, cascading style sheets and JavaScript code, the key information of the target web page can be accurately obtained, laying a data foundation for the subsequent generation of the skeleton screen.

[0030] In some embodiments, the HTML source code is parsed to obtain the main structural elements of the target web page, including: Use HTML parsing tools to parse HTML source code to obtain multiple structural elements of the target web page; Using multiple structural elements as nodes, construct a document object model DOM tree; Based on the DOM tree, a main structural element is determined from multiple structural elements.

[0031] Among them, the Document Object Model (DOM) is a programming interface that represents the document structure. Each node of the DOM tree represents a part of the document, such as an element, attribute or text content.

[0032] Optionally, an HTML parsing tool, such as DOMParser or Cheerio, is used to parse the HTML source code.

[0033] Optionally, attribute information of multiple structure element nodes is extracted, and based on the attribute information of each node, a main structure element is determined from the multiple structure elements.

[0034] Optionally, the importance of multiple structural elements is evaluated according to their impact on user interaction, and a main structural element is determined from the multiple structural elements, such as the <header>and <footer>.

[0035] Optionally, based on user input, primary structural elements are determined.

[0036] For example, the target page contains a The parser recognizes this element and extracts its child elements, ID, class name, etc.

[0037] It is understandable that by parsing the HTML source code and building the Document Object Model DOM tree, the layout of the target web page can be quickly identified, and the main structural elements of the target web page, such as the header, body and footer, can be extracted to provide basic data for skeleton screen generation.

[0038] In some embodiments, parsing the JavaScript code to determine the dynamic content area of ​​the target web page includes: Parse the JavaScript code, identify the code related to dynamic content loading and asynchronous requests, and determine how the dynamic content of the target web page is generated; According to the dynamic content generation method of the target webpage, the dynamic content area of ​​the target webpage is determined.

[0039] Optionally, the JavaScript code is parsed to analyze the Application Programming Interface (API) request and the content dynamically generated by JavaScript to determine the dynamic content area.

[0040] For example, if the API request " / api / comments" is identified as being used to load comments, the comments area is determined to be a dynamic content area, and a placeholder for the comments area is generated to accommodate asynchronous data.

[0041] Step 130: Generate a skeleton screen of the target web page based on the main structural elements, visual style information and dynamic content area.

[0042] It can be understood that by generating the skeleton screen of the target web page based on the main structural elements, visual style information and dynamic content areas of the target web page, the level of automation and intelligence is high, the development efficiency is improved, and it can dynamically adapt to changes in page content, layout and style. The generated skeleton screen can be consistent with the final presented page content.

[0043] In some embodiments, generating a skeleton screen of a target web page based on the main structural elements, visual style information, and dynamic content areas includes: Automatically generate the skeleton screen template of the target web page based on the main structural elements and dynamic content areas; Based on the visual style information, an animation effect is added to the skeleton screen template of the target web page to generate the skeleton screen of the target web page.

[0044] Optionally, use placeholders to mark different content areas, such as Indicates the head area.

[0045] For example, for Elements, generate corresponding skeleton placeholders .

[0046] Optionally, a target style is determined based on the visual style information, the target style is applied to the skeleton screen template, and the size and position of the element are dynamically adjusted to ensure that the style of the skeleton screen of the target web page is consistent with the actual page style.

[0047] For example, for , apply the same background color and margins as the actual header.

[0048] Optionally, an animation effect, such as flashing or gradient, is defined in the CSS file of the skeleton screen template of the target web page, and the animation effect is applied to the placeholder element to ensure that the animation is smooth and the visual effect is consistent with the page style.

[0049] For example, Elements apply shimmer animation to enable users to see dynamic effects.

[0050] Step 140: inject the skeleton screen of the target webpage into the code of each business project, call the skeleton screen generation service in each business project, and generate the skeleton screen of each business project.

[0051] Optionally, in the process of building each business project, the skeleton screen generation service is called by using a construction tool, and parameters such as the target website URL, the size of the generated image, and key elements are passed in to return the corresponding skeleton screen image.

[0052] It should be noted that by using a building tool to modify or extend the functions of the building process, the skeleton screen of the target web page is seamlessly injected into the code of each business project, and this process does not affect the logic of the business code.

[0053] Optionally, when the structure, style, and function of the target website are updated, the skeleton screen of each business item is automatically updated.

[0054] Optionally, test the performance of the skeleton screen under different devices, browsers and network conditions to ensure that the injection effect of the skeleton screen meets expectations in various environments and ensure the consistency and reliability of the skeleton screen.

[0055] For example, test the performance of the skeleton screen on desktop browsers, mobile devices, and slow network conditions.

[0056] In some embodiments, step 140 injects the skeleton screen of the target webpage into the code of each business project, calls the skeleton screen generation service in each business project, and generates the skeleton screen of each business project, including: Step 141: During the construction of the business project, a construction tool is used to inject the skeleton screen of the target web page into the code of each business project; Step 142: Obtain a skeleton screen generation service request, and in response to the skeleton screen generation service request, call the skeleton screen generation service in each business project, pass in the parameters of each business project, and generate a skeleton screen for each business project based on the parameters of each business project; Step 143: inject the skeleton screen of each business item into the target page of each business item, so as to display the skeleton screen of each business item before the content of the target page of each business item is loaded completely.

[0057] Optionally, the construction tool is adjusted in the business project to be connected, and when the business project is rebuilt after the website function iteration, the skeleton screen generation service is automatically called to generate the skeleton screen background image of the corresponding website.

[0058] Optionally, during the project building process, use the build tool Vite to call the skeleton screen generation service, use vite-plugin-api to access the build context, and perform necessary operations. In the build hook, send an HTTP request to the skeleton screen generation service and pass necessary parameters (such as website URL, screenshot size).

[0059] Optionally, the skeleton screen of each business project is saved in a project directory file, and each business project is updated so as to reference the skeleton screen of each business project.

[0060] Optionally, optimize the generation and injection code of the skeleton screen to reduce the impact on the page loading speed, and use asynchronous loading and lazy loading techniques to improve loading performance.

[0061] For example, use requestAnimationFrame to optimize the display timing of the skeleton screen to avoid blocking the main thread.

[0062] Optionally, optimize the page loading effect in low-bandwidth environments to ensure a stable skeleton screen loading experience under different network conditions.

[0063] Optionally, the skeleton screen of each business item is displayed before the content of the target page of each business item is loaded completely, and the skeleton screen of each business item is automatically removed after the content of the target page of each business item is loaded completely.

[0064] Optionally, by using a senseless injection technology, the skeleton screen of each business project is seamlessly embedded into the target page of each business project without intruding the business code of each business project, so as to avoid interference with the function and interaction of the target page of each business project.

[0065] It can be understood that by combining the entire generation, injection, update of the skeleton screen and the construction of the business project, it is possible to perfectly realize automated project creation and update, greatly reducing development costs.

[0066] It can be understood that by injecting the skeleton screen of each business project into the target page of each business project, the skeleton screen of each business project can be displayed before the content of the target page of each business project is loaded, so that the user can see the basic layout structure of the page, thereby reducing the negative experience caused by blankness or incomplete loading, effectively alleviating the user's anxiety about page loading delays, and improving the user's perception of page loading speed; after the content is loaded, the skeleton screen is automatically removed, and the skeleton screen is seamlessly transitioned to the actual page content, achieving a smooth transition, optimizing the user's interactive experience, and allowing the user to feel a natural and smooth transition effect during the page loading process.

[0067] In some embodiments, after the skeleton screen of each business item is injected into the target page of each business item, the method further includes: The target page of each business item is tested to determine whether the skeleton screen of each business item is successfully injected into the target page of each business item. If not, the original state of the target page of each business item is automatically restored.

[0068] Optionally, when the skeleton screen injection fails, an error is thrown in the construction tool and the process is skipped to avoid blocking normal business processes and damaging the original web page functions.

[0069] It is understandable that by implementing an error detection and fallback mechanism, when the skeleton screen injection fails, the original page state is automatically restored, thereby ensuring the stability of the user experience.

[0070] In an embodiment of the present invention, the hypertext markup language HTML source code, cascading style sheets and JavaScript codes of the target web page are obtained and parsed to determine the main structural elements, visual style information and dynamic content areas of the target web page. According to the main structural elements, visual style information and dynamic content areas of the target web page, a skeleton screen of the target web page is generated, the skeleton screen of the target web page is injected into the code of each business project, and a skeleton screen generation service is called in each business project to generate a skeleton screen for each business project. The system has a high level of automation and intelligence, high efficiency, can adapt to the dynamic content of the web page, and improves user experience.

[0071] In some embodiments, the above method further comprises: Get the screen size and resolution of the terminal device; Adjust the layout and style of the skeleton screen of the target web page according to the screen size and resolution.

[0072] Optionally, use media queries and responsive design to ensure that it works for different devices, such as designing a simplified skeleton layout for mobile devices to ensure it displays well on small screens.

[0073] Optionally, apply responsive design principles to adjust the size and position of skeleton screen elements, and use fluid layout and elastic layout techniques to dynamically adapt to different devices.

[0074] For example, use CSS Grid or Flexbox to implement a responsive layout for skeleton screens to adapt to the screen sizes of different devices.

[0075] It can be understood that by obtaining the screen size and resolution of the terminal device, the layout and style of the skeleton screen of the target web page are adjusted according to the screen size and resolution. It has strong compatibility and can automatically adapt to different devices. The layout and style of the skeleton screen are adjusted according to the characteristics of the device to ensure a consistent user experience on various devices.

[0076] In some embodiments, the above method further comprises: Save the skeleton screen of each business project to the project directory file of each business project; Automatically update the skeleton screen of each business project.

[0077] It can be understood that by centrally storing the skeleton screens in respective project directories, it is convenient to call the skeleton screens, and by automatically updating the skeleton screens of various business projects, the efficiency of project development is improved.

[0078] The web page skeleton screen generating device provided by an embodiment of the present invention is described below. The web page skeleton screen generating device described below and the web page skeleton screen generating method described above can be referred to each other.

[0079] Figure 2 A schematic diagram of the structure of a web page skeleton screen generating device provided by an embodiment of the present invention, such as Figure 2 As shown, the web page skeleton screen generating device 200 includes: The first acquisition unit 210 is used to acquire the hypertext markup language HTML source code, cascading style sheet and JavaScript code of the target web page; Parsing unit 220, used to parse HTML source code to obtain the main structural elements of the target web page, parse cascading style sheets to obtain visual style information of the target web page, and parse JavaScript code to determine the dynamic content area of ​​the target web page; A generating unit 230, configured to generate a skeleton screen of a target web page based on the main structural elements, the visual style information and the dynamic content area; The injection unit 240 is used to inject the skeleton screen of the target webpage into the code of each business project, call the skeleton screen generation service in each business project, and generate the skeleton screen of each business project.

[0080] Optionally, a skeleton screen of a target web page is generated based on the main structural elements, visual style information and dynamic content area, including: Automatically generate the skeleton screen template of the target web page based on the main structural elements and dynamic content areas; Based on the visual style information, an animation effect is added to the skeleton screen template of the target web page to generate the skeleton screen of the target web page.

[0081] Optionally, the skeleton screen of the target webpage is injected into the code of each business project, and the skeleton screen generation service is called in each business project to generate the skeleton screen of each business project, including: During the construction of business projects, a construction tool is used to inject the skeleton screen of the target web page into the code of each business project; Obtain a skeleton screen generation service request, respond to the skeleton screen generation service request, call the skeleton screen generation service in each business project, pass in the parameters of each business project, and generate a skeleton screen for each business project based on the parameters of each business project; The skeleton screen of each business item is injected into the target page of each business item, so that the skeleton screen of each business item is displayed before the content of the target page of each business item is loaded completely.

[0082] Optionally, the web page skeleton screen generating device 200 further includes: The detection unit is used to detect the target page of each business item and determine whether the skeleton screen of each business item is successfully injected into the target page of each business item. If not, the original state of the target page of each business item is automatically restored.

[0083] Optionally, the HTML source code is parsed to obtain the main structural elements of the target web page, including: Use HTML parsing tools to parse HTML source code to obtain multiple structural elements of the target web page; Using multiple structural elements as nodes, construct a document object model DOM tree; Based on the DOM tree, a main structural element is determined from multiple structural elements.

[0084] Optionally, the JavaScript code is parsed to determine the dynamic content area of ​​the target web page, including: Parse the JavaScript code, identify the code related to dynamic content loading and asynchronous requests, and determine how the dynamic content of the target web page is generated; According to the dynamic content generation method of the target webpage, the dynamic content area of ​​the target webpage is determined.

[0085] Optionally, the web page skeleton screen generating device 200 further includes: A second acquisition unit, used to acquire the screen size and resolution of the terminal device; The adjustment unit is used to adjust the layout and style of the skeleton screen of the target web page according to the screen size and resolution.

[0086] Optionally, the web page skeleton screen generating device 200 further includes: A storage unit, used to save the skeleton screen of each business project into a project directory file of each business project; The updating unit is used to automatically update the skeleton screen of each business item.

[0087] It should be noted here that the web page skeleton screen generation device provided in the embodiment of the present invention can implement all the method steps implemented in the above-mentioned web page skeleton screen generation method embodiment, and can achieve the same technical effect. The parts and beneficial effects of this embodiment that are the same as the method embodiment will not be described in detail here.

[0088] Figure 3 A schematic diagram of the structure of an electronic device provided by an embodiment of the present invention, such as Figure 3 As shown, the electronic device may include: a processor 310, a communication interface 320, a memory 330 and a communication bus 340, wherein the processor 310, the communication interface 320 and the memory 330 communicate with each other through the communication bus 340. The processor 310 may call the logic instructions in the memory 330 to execute the web page skeleton screen generation method, which includes: obtaining the hypertext markup language HTML source code, the cascading style sheet and the JavaScript code of the target web page; parsing the HTML source code to obtain the main structural elements of the target web page, parsing the cascading style sheet to obtain the visual style information of the target web page, parsing the JavaScript code to determine the dynamic content area of ​​the target web page; generating the skeleton screen of the target web page based on the main structural elements, the visual style information and the dynamic content area; injecting the skeleton screen of the target web page into the code of each business project, calling the skeleton screen generation service in each business project, and generating the skeleton screen of each business project.

[0089] In addition, the logic instructions in the above-mentioned memory 330 can be implemented in the form of a software functional unit and can be stored in a computer-readable storage medium when it is sold or used as an independent product. Based on such an understanding, the technical solution of the present invention, in essence, or the part that contributes to the prior art or the part of the technical solution, can be embodied in the form of a software product, and the computer software product is stored in a storage medium, including a number of instructions for a computer device (which can be a personal computer, a server, or a network device, etc.) to perform all or part of the steps of the method described in each embodiment of the present invention. The aforementioned storage medium includes: U disk, mobile hard disk, read-only memory (ROM, Read-Only Memory), random access memory (RAM, Random Access Memory), disk or optical disk, etc. Various media that can store program codes.

[0090] The device embodiments described above are merely illustrative, wherein the units described as separate components may or may not be physically separated, and the components displayed as units may or may not be physical units, that is, they may be located in one place, or they may be distributed on multiple network units. Some or all of the modules may be selected according to actual needs to achieve the purpose of the scheme of this embodiment. Ordinary technicians in this field can understand and implement it without paying creative labor.

[0091] Through the description of the above implementation methods, those skilled in the art can clearly understand that each implementation method can be implemented by means of software plus a necessary general hardware platform, and of course, can also be implemented by hardware. Based on this understanding, the above technical solution is essentially or the part that contributes to the prior art can be embodied in the form of a software product, and the computer software product can be stored in a computer-readable storage medium, such as ROM / RAM, a disk, an optical disk, etc., including a number of instructions for a computer device (which can be a personal computer, a server, or a network device, etc.) to execute the methods described in each embodiment or some parts of the embodiments.

[0092] Finally, it should be noted that the above embodiments are only used to illustrate the technical solutions of the present invention, rather than to limit it. Although the present invention has been described in detail with reference to the aforementioned embodiments, those skilled in the art should understand that they can still modify the technical solutions described in the aforementioned embodiments, or make equivalent replacements for some of the technical features therein. However, these modifications or replacements do not deviate the essence of the corresponding technical solutions from the spirit and scope of the technical solutions of the embodiments of the present invention. < / footer> < / header>

Claims

1. A method for generating a web page skeleton screen, characterized in that: include: Obtaining the HTML source code, cascading style sheet and JavaScript code of the target web page; Parsing the HTML source code to obtain the main structural elements of the target web page, parsing the cascading style sheet to obtain the visual style information of the target web page, and parsing the JavaScript code to determine the dynamic content area of ​​the target web page; Generating a skeleton screen of the target web page based on the main structural elements, visual style information and dynamic content area; The skeleton screen of the target webpage is injected into the code of each business item, and the skeleton screen generation service is called in each business item to generate the skeleton screen of each business item.

2. The web page skeleton screen generation method according to claim 1, characterized in that: The step of generating a skeleton screen of the target webpage based on the main structural elements, visual style information and dynamic content area comprises: Automatically generate a skeleton screen template of the target web page according to the main structural elements and dynamic content areas; Based on the visual style information, an animation effect is added to the skeleton screen template of the target webpage to generate the skeleton screen of the target webpage.

3. The web page skeleton screen generation method according to claim 1, characterized in that: The step of injecting the skeleton screen of the target webpage into the code of each business project, calling the skeleton screen generation service in each business project, and generating the skeleton screen of each business project comprises: During the construction of the business project, a construction tool is used to inject the skeleton screen of the target web page into the code of each business project; Obtain a skeleton screen generation service request, respond to the skeleton screen generation service request, call the skeleton screen generation service in each business project, pass in the parameters of each business project, and generate a skeleton screen for each business project based on the parameters of each business project; The skeleton screen of each business item is injected into the target page of each business item, so that the skeleton screen of each business item is displayed before the content of the target page of each business item is loaded completely.

4. The web page skeleton screen generation method according to claim 3, characterized in that: After injecting the skeleton screen of each business item into the target page of each business item, the method further includes: The target page of each business item is detected to determine whether the skeleton screen of each business item is successfully injected into the target page of each business item. If not, the original state of the target page of each business item is automatically restored.

5. The web page skeleton screen generation method according to claim 1, characterized in that: The HTML source code is parsed to obtain the main structural elements of the target web page, including: Parsing the HTML source code using an HTML parsing tool to obtain multiple structural elements of the target web page; Constructing a document object model DOM tree with the multiple structural elements as nodes; The main structural element is determined from the plurality of structural elements based on the DOM tree.

6. The web page skeleton screen generation method according to claim 1, characterized in that: The step of parsing the JavaScript code to determine the dynamic content area of ​​the target webpage includes: Parsing the JavaScript code, identifying the code related to dynamic content loading and asynchronous request, and determining the dynamic content generation method of the target web page; The dynamic content area of ​​the target webpage is determined according to the dynamic content generation method of the target webpage.

7. The web page skeleton screen generation method according to claim 1, characterized in that: The method further comprises: Get the screen size and resolution of the terminal device; The layout and style of the skeleton screen of the target webpage are adjusted according to the screen size and resolution.

8. The web page skeleton screen generation method according to any one of claims 2 to 7, characterized in that: The method further comprises: Saving the skeleton screen of each business project into the project directory file of each business project; The skeleton screen of each business item is automatically updated.

9. A web page skeleton screen generating device, characterized in that: include: A first acquisition unit, used to acquire a hypertext markup language HTML source code, a cascading style sheet and a JavaScript code of a target web page; A parsing unit, configured to parse the HTML source code to obtain the main structural elements of the target web page, parse the cascading style sheet to obtain the visual style information of the target web page, and parse the JavaScript code to determine the dynamic content area of ​​the target web page; A generating unit, configured to generate a skeleton screen of the target web page based on the main structural elements, visual style information and dynamic content area; The injection unit is used to inject the skeleton screen of the target webpage into the code of each business project, and call the skeleton screen generation service in each business project to generate the skeleton screen of each business project.

10. An electronic device comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein: When the processor executes the computer program, the method for generating a web page skeleton screen according to any one of claims 1 to 8 is implemented.

Images