Web page display method, device, electronic device and storage medium

Abstract

The present disclosure provides a web page display method, apparatus, electronic device, and storage medium, which relate to the field of computer technology, and particularly to the field of computer vision technology. The specific implementation solution is as follows: when a web page display instruction is received, obtain the HTML main body structure of the web page, where the HTML main body structure includes first loading animation data; display a first loading animation in the HTML main body structure page based on the first loading animation data; obtain the content components and loading components of the web page, and the rendering data corresponding to the loading components is second loading animation data; during the rendering of the content components of the web page, render the loading components through the second loading animation data and display a second loading animation; when the rendering of the content components of the web page is completed, display the web page content of the web page. The white screen time can be reduced.

Description

Technical Field

[0001] This disclosure relates to the field of computer technology, and particularly to the field of computer vision technology. Background Art

[0002] The Vue framework is a currently commonly used progressive front-end framework for building user interfaces. The default rendering method of the Vue framework is JS rendering. During the JS rendering process, the browser needs to first download the JS script and then execute the JS script through the JS engine to render the web page content and present it to the user. Summary of the Invention

[0003] This disclosure provides a web page display method, apparatus, electronic device, and storage medium.

[0004] According to a first aspect of this disclosure, there is provided a web page display method, including:

[0005] When receiving a web page display instruction, obtaining the HTML main body structure of the web page, where the HTML main body structure includes first loading animation data;

[0006] Based on the first loading animation data, displaying a first loading animation in the HTML main body structure page;

[0007] Obtaining the content component and loading component of the web page, where the rendering data corresponding to the loading component is second loading animation data;

[0008] During the rendering of the content component of the web page, rendering the loading component through the second loading animation data and displaying a second loading animation;

[0009] When the rendering of the content component of the web page is completed, displaying the web page content of the web page.

[0010] According to a second aspect of this disclosure, there is provided a web page display apparatus, including:

[0011] An obtaining module, configured to obtain the HTML main body structure of the web page when receiving a web page display instruction, where the HTML main body structure includes first loading animation data;

[0012] A display module, configured to display a first loading animation in the HTML main body structure page based on the first loading animation data;

[0013] The obtaining module is further configured to obtain the content component and loading component of the web page, where the rendering data corresponding to the loading component is second loading animation data;

[0014] The display module is further configured to render the loading component with the second loading animation data and display a second loading animation during the rendering of the content components of the web page.

[0015] The display module is further configured to display the web page content of the web page when the rendering of the content components of the web page is completed.

[0016] According to a third aspect of the embodiments of the present disclosure, there is provided an electronic device, including:

[0017] At least one processor; and

[0018] A memory communicatively connected to the at least one processor; wherein,

[0019] The memory stores instructions executable by the at least one processor, and the instructions are executed by the at least one processor so that the at least one processor can execute the method described in the first aspect.

[0020] According to a fourth aspect of the present disclosure, there is provided a non-transitory computer-readable storage medium storing computer instructions, wherein the computer instructions are used to cause the computer to execute the method described in the first aspect.

[0021] According to a fifth aspect of the embodiments of the present disclosure, there is provided a computer program product, including a computer program, where the computer program implements the method described in the first aspect when executed by a processor.

[0022] It should be understood that the content described in this part is not intended to identify the key or important features of the embodiments of the present disclosure, nor is it used to limit the scope of the present disclosure. Other features of the present disclosure will become easily understood through the following description. Description of the Drawings

[0023] The drawings are used to better understand the solution and do not constitute a limitation to the present disclosure. Among them:

[0024] Figure 1 Is a flowchart of a web page display method provided by an embodiment of the present disclosure;

[0025] Figure 2 Is a flowchart of another web page display method provided by an embodiment of the present disclosure;

[0026] Figure 3 Is an exemplary flowchart of another web page display method provided by an embodiment of the present disclosure;

[0027] Figure 4 Is a structural schematic diagram of a web page display device provided by an embodiment of the present disclosure;

[0028] Figure 5It is a block diagram of an electronic device for implementing the web page display method of the embodiments of the present disclosure. Detailed implementation manners

[0029] The following describes exemplary embodiments of the present disclosure with reference to the accompanying drawings. Various details of the embodiments of the present disclosure are included to facilitate understanding, and they should be considered merely exemplary. Therefore, those of ordinary skill in the art should recognize that various changes and modifications can be made to the embodiments described herein without departing from the scope and spirit of the present disclosure. Similarly, descriptions of well-known functions and structures are omitted below for clarity and conciseness.

[0030] The Vue framework is a commonly used MVVM framework. MVVM is an abbreviation for Model-View-ViewModel, that is, MVVM consists of three parts: a model (Model), a view (View), and a view model (ViewModel). Optionally, the MVVM framework used in the embodiments of the present disclosure can also be a React framework. React is a JavaScript library for building user interfaces, and JavaScript is a programming language.

[0031] The default rendering method of the Vue framework is JS (JavaScript) rendering. JS rendering can decouple the dependencies between the front-end and back-end templates and data, improving development efficiency. However, the JS rendering method based on the Vue framework can provide the main structure of the HTML page, and the specific page content still needs to be completed through JS rendering. Before the rendering of the page content is completed, a blank page will be displayed in the web page, that is, the so-called white screen state appears.

[0032] Moreover, since some dynamic content may need to be displayed in the web page, the resource data of this dynamic content cannot be queried and obtained from the server in advance. That is, it is impossible to determine the resource data to be rendered in advance, and these resource data need to be requested from the server and rendered after receiving the web page display instruction triggered by the user, resulting in a longer white screen display time.

[0033] To reduce the time of displaying a white screen before the web page rendering is completed, the embodiments of the present disclosure provide a web page display method, device, electronic device, and storage medium.

[0034] The web page display method provided by the embodiments of the present disclosure can be executed by an electronic device, and the electronic device can be a smart phone, a tablet computer, a desktop computer, a laptop computer, or other devices.

[0035] The following introduces the web page display method provided by the embodiments of the present disclosure. As Figure 1 shown, the method includes:

[0036] S101. When receiving a web page display instruction, obtain the Hyper Text Markup Language (HTML) main structure of the web page. The HTML main structure includes first loading animation data.

[0037] Among them, when the user clicks on a web page link on the display interface of the client or the user enters a website address in the browser of the client and requests access, the client can receive the web page display instruction. Then, the client starts to load the web page. First, it obtains the HTML main structure of the web page included in the navigation page (index.html) file from the static server. The static server stores static resources required for loading the web page, such as HTML main structure, JS, Cascading Style Sheets (CSS), image and other resource files.

[0038] The first loading animation data is Cascading Style Sheets Level 3 (CSS3) data. CSS3 is an upgraded version of CSS.

[0039] S102. Based on the first loading animation data, display the first loading animation on the HTML main structure page.

[0040] Since the HTML main structure includes the first loading animation data, the client can display the first loading animation when displaying the HTML main structure page. The first loading animation is a pre-set animation used to indicate that the web page content is being loaded. The first loading animation can also be called a loading effect animation.

[0041] S103. Obtain the content component and the loading component of the web page. The rendering data corresponding to the loading component is second loading animation data.

[0042] Among them, the views directory includes multiple page components. The client can determine the routing rule matching the URL based on the uniform resource locator (URL) of the web page, and then obtain the page components required for the web page from the views directory according to the routing rule.

[0043] In the embodiments of the present disclosure, the obtained page components of the web page include a content component and a loading component. The content component is a component used to display the actual content of the web page, and the loading component is a newly added component in the embodiments of the present disclosure used to display the second loading animation.

[0044] The second loading animation data can be CSS3 animation data.

[0045] S104. During the process of rendering the content components of the web page, the loading component is rendered with the second loading animation data, and the second loading animation is displayed.

[0046] In order to render the content components, the client needs to load the static resource data required to display the web page, such as JS, CSS, image and other resource data, from the static resource server. Optionally, if the web page is a dynamic page, the client also needs to load the dynamic resource data required for each content component from the interface server. The client can render each content component based on the resource data required to display the web page that has been loaded. During the period between the moment when the client requests and obtains the resource data and the moment when the rendering of each content component is completed, the second loading animation can be displayed.

[0047] S105. When the rendering of the content components of the web page is completed, the web content of the web page is displayed.

[0048] When the rendering of the content components of the web page is completed, the web content of the web page can be displayed, and accordingly, the second loading animation is hidden.

[0049] By adopting the embodiment of the present disclosure, when a web page display instruction is received, the first loading animation can be displayed first through the HTML body structure, and then the second loading animation can be displayed through the loading component until the web content is displayed when the rendering of the content components of the web page is completed. It can be seen that before the web content is displayed, the first loading animation and the second loading animation can be displayed for the user, which can reduce the time of displaying a blank screen.

[0050] In another embodiment of the present disclosure, since the application (APP) element is used as a container in the HTML body structure, the embodiment of the present disclosure can use the APP element to carry the first loading animation data, that is, the APP element of the HTML body structure obtained by the client from the static resource server carries the first loading animation data. On this basis, as Figure 2 shown, the above S102. Display the first loading animation in the HTML body structure page based on the first loading animation data can be implemented as S1021 - S1022.

[0051] S1021. Obtain the first loading animation data from the APP element of the HTML body structure.

[0052] S1022. Render the first loading animation data and display the rendered first loading animation in the HTML body structure page.

[0053] By adopting this method, the first loading animation data can be carried in the APP element of the HTML body structure. After the client obtains the HTML body structure, it can obtain the first loading animation data from the APP element and display the first loading animation. That is, before starting to render the web page content, the first loading animation can be displayed, reducing the blank screen time of the web page and improving the user experience.

[0054] In another embodiment of the present disclosure, the above S104, during the rendering of the content components of the web page, rendering the loading component with the second loading animation data and displaying the second loading animation can be implemented as follows:

[0055] During the rendering of the content components of the web page, the loading component is rendered with the second loading animation data, and the rendered second loading animation is displayed.

[0056] After the client obtains the loading component and the second loading animation data, it immediately renders the second loading animation data.

[0057] It can be understood that when the client starts to obtain the content components and the loading component of the web page, the display of the first loading animation stops, and when the second loading animation is rendered, the display of the second loading animation starts. It is equivalent to quickly starting to display the second loading animation after stopping the display of the first loading animation, which can reduce the blank screen time before the web page content is displayed.

[0058] In addition, since the second loading animation data is CSS3 data, the speed at which the client renders CSS3 data is much faster than the speed of rendering the web page content components. Therefore, after the client stops displaying the first loading animation, it can quickly display the second loading animation, and it is difficult for the naked eye to perceive the switch between the first loading animation and the second loading animation. It is equivalent to achieving seamless connection between the first loading animation and the second loading animation, enabling the user to see a continuous animation effect, reducing the blank screen time, and improving the user experience.

[0059] In the embodiment of the present disclosure, the first loading animation is the same as the second loading animation. Then, the client's switch from the first loading animation to the second loading animation is imperceptible to the user, and the user always sees the same loading animation from the user's perspective, making the overall display effect of the web page coordinated, reducing the blank screen time, presenting a smooth transition and a visually friendly connection between the two loading animations for the user, and improving the user's experience of using the browser.

[0060] The following combines Figure 3 to introduce the web page display method provided by the embodiment of the present disclosure, as Figure 3As shown, when a user accesses a web page through a client, the client starts to load the web page, which is equivalent to starting to request the web page. The loading and display of the web page can be implemented by the browser client or by the webview component embedded in other clients.

[0061] First, the client obtains the HTML main structure of the web page included in the index.html file from the static resource server. The HTML main structure includes the loading animation data implemented based on CSS3. Then, the client renders and displays the loading animation.

[0062] When a user accesses a web page through a client, it will also trigger a page route change. The client matches the routing rules based on the URL of the web page and obtains the page components required for the web page from the views directory based on the matched routing rules. The obtained page components include content components and loading components (the loading component is a page component in the vue framework, also called a vue component). By rendering the loading component, the loading animation effect can be displayed again. Among them, the loading animation effects displayed twice are the same, that is, the loading component can achieve the same loading animation effect to achieve the connection of the loading animation effect.

[0063] After obtaining the content components of the web page, the resource data required for each content component can be further obtained, and each content component is rendered based on the obtained resource data, and the page content is returned to Index.html, that is, the content in each component is rendered in Index.html, and then the web page is returned to the client, so that the client displays the web page content.

[0064] After experiments, before optimization, the first 1300 ms was a blank screen state. After optimization using the embodiments of the present disclosure, the first 200 ms after the client receives the web page display instruction is a blank screen state, and this 200 ms is the time required for the client to obtain the HTML main structure. Then, the loading animation included in the HTML main structure is displayed from 200 to 800 ms, and the loading animation included in the page components is displayed from 800 to 1300 ms. The web page content starts to be displayed from 1300 ms.

[0065] Corresponding to the above method embodiments, the embodiments of the present disclosure also provide a web page display device, as Figure 4 shown, the device includes:

[0066] An obtaining module 401, configured to obtain the HTML main structure of the web page when receiving a web page display instruction, where the HTML main structure includes first loading animation data;

[0067] A display module 402, configured to display a first loading animation in an HTML body structure page based on first loading animation data;

[0068] An acquisition module 401, further configured to acquire a content component and a loading component of a web page, and the rendering data corresponding to the loading component is second loading animation data;

[0069] The display module 402 is further configured to, during the rendering of the content component of the web page, render the loading component through the second loading animation data and display the second loading animation;

[0070] The display module 402 is further configured to display the web page content of the web page when the rendering of the content component of the web page is completed.

[0071] In another embodiment of the present disclosure, the first loading animation is the same as the second loading animation.

[0072] In another embodiment of the present disclosure, both the first loading animation data and the second loading animation data are CSS3 animation data.

[0073] In another embodiment of the present disclosure, the APP element of the HTML body structure includes the first loading animation data;

[0074] The display module is specifically configured to:

[0075] Acquire the first loading animation data from the APP element of the HTML body structure;

[0076] Render the first loading animation data and display the rendered first loading animation in the HTML body structure page.

[0077] In another embodiment of the present disclosure, the display module 402 is specifically configured to, during the rendering of the content component of the web page, render the loading component through the second loading animation data and display the rendered second loading animation.

[0078] In the technical solution of the present disclosure, the collection, storage, use, processing, transmission, provision, and disclosure of the user's personal information involved all comply with the provisions of relevant laws and regulations and do not violate public order and good customs.

[0079] According to the embodiments of the present disclosure, the present disclosure also provides an electronic device, a readable storage medium, and a computer program product.

[0080] Figure 5FIG. 0 shows a schematic block diagram of an exemplary electronic device 500 that can be used to implement embodiments of the present disclosure. The electronic device is intended to represent various forms of digital computers, such as, for example, laptop computers, desktop computers, workstations, personal digital assistants, servers, blade servers, mainframe computers, and other suitable computers. The electronic device can also represent various forms of mobile devices, such as, for example, personal digital processors, cellular telephones, smart phones, wearable devices, and other similar computing devices. The components shown herein, their connections and relationships, and their functions are merely exemplary and are not intended to limit the implementations of the present disclosure described and / or claimed herein.

[0081] As Figure 5 shown, the device 500 includes a computing unit 501 that can perform various appropriate actions and processes according to a computer program stored in a read-only memory (ROM) 502 or a computer program loaded from a storage unit 508 into a random access memory (RAM) 503. In the RAM 503, various programs and data required for the operation of the device 500 can also be stored. The computing unit 501, the ROM 502, and the RAM 503 are connected to each other via a bus 504. An input / output (I / O) interface 505 is also connected to the bus 504.

[0082] A plurality of components in the device 500 are connected to the I / O interface 505, including: an input unit 506, such as a keyboard, a mouse, etc.; an output unit 507, such as various types of displays, speakers, etc.; a storage unit 508, such as a magnetic disk, an optical disk, etc.; and a communication unit 509, such as a network card, a modem, a wireless communication transceiver, etc. The communication unit 509 allows the device 500 to exchange information / data with other devices via a computer network such as the Internet and / or various telecommunication networks.

[0083] The computing unit 501 can be various general-purpose and / or special-purpose processing components with processing and computing capabilities. Some examples of the computing unit 501 include, but are not limited to, a central processing unit (CPU), a graphics processing unit (GPU), various dedicated artificial intelligence (AI) computing chips, various computing units running machine learning model algorithms, a digital signal processor (DSP), and any suitable processor, controller, microcontroller, etc. The computing unit 501 executes the various methods and processes described above, such as the web page display method. For example, in some embodiments, the web page display method can be implemented as a computer software program tangibly embodied in a machine-readable medium, such as the storage unit 508. In some embodiments, part or all of the computer program can be loaded and / or installed onto the device 500 via the ROM 502 and / or the communication unit 509. When the computer program is loaded into the RAM 503 and executed by the computing unit 501, one or more steps of the web page display method described above can be executed. Alternatively, in other embodiments, the computing unit 501 can be configured to execute the web page display method by any other suitable means (e.g., by means of firmware).

[0084] The various embodiments of the systems and techniques described above in this document can be implemented in digital electronic circuitry, integrated circuit systems, field-programmable gate arrays (FPGA), application-specific integrated circuits (ASIC), application-specific standard products (ASSP), systems-on-a-chip (SOC), complex programmable logic devices (CPLD), computer hardware, firmware, software, and / or combinations thereof. These various embodiments can include: being implemented in one or more computer programs that can be executed and / or interpreted on a programmable system including at least one programmable processor, which can be a special or general-purpose programmable processor that receives data and instructions from a storage system, at least one input device, and at least one output device, and transmits the data and instructions to the storage system, the at least one input device, and the at least one output device.

[0085] The program code for implementing the methods of the present disclosure can be written in any combination of one or more programming languages. These program codes can be provided to a processor or controller of a general-purpose computer, a special-purpose computer, or other programmable data processing device, such that when the program codes are executed by the processor or controller, the functions / operations specified in the flowcharts and / or block diagrams are implemented. The program code can be executed entirely on the machine, partially on the machine, as a stand-alone software package partially on the machine and partially on a remote machine, or entirely on a remote machine or server.

[0086] In the context of this disclosure, a machine-readable medium can be a tangible medium that can contain or store a program for use by or in connection with an instruction execution system, apparatus, or device. A machine-readable medium can be a machine-readable signal medium or a machine-readable storage medium. A machine-readable medium can include, but is not limited to, an electronic, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or any suitable combination of the foregoing. More specific examples of a machine-readable storage medium would include an electrical connection based on one or more wires, a portable computer diskette, a hard disk, a random access memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or Flash memory), an optical fiber, a portable compact disc read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the foregoing.

[0087] In order to provide interaction with a user, the systems and techniques described herein can be implemented on a computer having: a display device (e.g., a CRT (cathode ray tube) or LCD (liquid crystal display) monitor) for displaying information to the user; and a keyboard and a pointing device (e.g., a mouse or a trackball) by which the user can provide input to the computer. Other kinds of devices can also be used to provide interaction with the user; for example, the feedback provided to the user can be any form of sensory feedback (e.g., visual feedback, auditory feedback, or tactile feedback); and input from the user can be received in any form (including acoustic input, speech input, or tactile input).

[0088] The systems and techniques described herein can be implemented in a computing system that includes back-end components (e.g., as a data server), or a computing system that includes middleware components (e.g., an application server), or a computing system that includes front-end components (e.g., a user computer having a graphical user interface or a web browser through which the user can interact with an implementation of the systems and techniques described herein), or a computing system that includes any combination of such back-end components, middleware components, or front-end components. The components of the system can be interconnected by any form or medium of digital data communication (e.g., a communication network). Examples of communication networks include: a local area network (LAN), a wide area network (WAN), and the Internet.

[0089] A computer system can include a client and a server. The client and the server are generally remote from each other and typically interact through a communication network. The relationship of the client and the server is generated by computer programs running on the respective computers and having a client-server relationship with each other. The server can be a cloud server, can also be a server of a distributed system, or a server incorporating a blockchain.

[0090] It should be understood that the various forms of the processes shown above can be used, with steps reordered, added, or deleted. For example, the steps recited in the present disclosure can be executed in parallel, sequentially, or in a different order, as long as the desired results of the technical solution disclosed in the present disclosure can be achieved, and no limitations are imposed herein.

[0091] The above specific embodiments do not constitute a limitation on the protection scope of the present disclosure. Those skilled in the art should understand that various modifications, combinations, sub - combinations, and substitutions can be made according to design requirements and other factors. Any modifications, equivalent substitutions, and improvements made within the spirit and principles of the present disclosure shall be included within the protection scope of the present disclosure.

Claims

1. A web page display method, comprising: When receiving a web page display instruction, obtaining the HTML body structure of the web page, where the HTML body structure includes first loading animation data; Based on the first loading animation data, displaying a first loading animation on the HTML body structure page; Obtaining the content components and loading components of the web page, where the rendering data corresponding to the loading components is second loading animation data; During the rendering of the content components of the web page, rendering the loading components through the second loading animation data and displaying a second loading animation, where the first loading animation is the same as the second loading animation; When the rendering of the content components of the web page is completed, displaying the web page content of the web page.

2. The method according to claim 1, wherein, Both the first loading animation data and the second loading animation data are CSS3 animation data.

3. According to the method according to any one of claims 1-2, wherein, The APP element of the HTML body structure includes the first loading animation data; The displaying a first loading animation on the HTML body structure page based on the first loading animation data includes: Obtaining the first loading animation data from the APP element of the HTML body structure; Rendering the first loading animation data and displaying the rendered first loading animation on the HTML body structure page.

4. The method according to any one of claims 1-2, wherein, During the rendering of the content components of the web page, rendering the loading components through the second loading animation data and displaying a second loading animation includes: During the rendering of the content components of the web page, rendering the loading components through the second loading animation data and displaying the rendered second loading animation.

5. A web page display device, comprising: An obtaining module, configured to obtain the HTML body structure of the web page when receiving a web page display instruction, where the HTML body structure includes first loading animation data; A display module, configured to display a first loading animation on the HTML body structure page based on the first loading animation data; The obtaining module is further configured to obtain the content components and loading components of the web page, where the rendering data corresponding to the loading components is second loading animation data; The display module is further configured to, during the rendering of the content components of the web page, render the loading components through the second loading animation data and display a second loading animation, where the first loading animation is the same as the second loading animation; The display module is further configured to display the web page content of the web page when the rendering of the content components of the web page is completed.

6. The apparatus according to claim 5, wherein, Both the first loading animation data and the second loading animation data are CSS3 animation data.

7. The device according to any one of claims 5-6, wherein, The APP element of the HTML body structure includes the first loading animation data; The display module is specifically configured to: Obtain the first loading animation data from the APP element of the HTML body structure; Render the first loading animation data and display the rendered first loading animation on the HTML body structure page.

8. The device according to any one of claims 5-6, wherein The display module is specifically configured to render the loading component with the second loading animation data during the rendering of the content components of the web page, and display the rendered second loading animation.

9. An electronic device, comprising: At least one processor; And A memory communicatively connected to the at least one processor; wherein, The memory stores instructions executable by the at least one processor, and the instructions are executed by the at least one processor so that the at least one processor can execute the method according to any one of claims 1-4.

10. A non-transitory computer-readable storage medium storing computer instructions, wherein, The computer instructions are used to cause the computer to execute the method according to any one of claims 1-4.

11. A computer program product, comprising a computer program which, when executed by a processor, implements the method according to any one of claims 1-4.

Images