CN114065077A

CN114065077A - Webpage display method and device, electronic equipment and storage medium

Info

Publication number: CN114065077A
Application number: CN202111386199.2A
Authority: CN
Inventors: 何亮
Original assignee: Beijing Baidu Netcom Science and Technology Co Ltd
Current assignee: Beijing Baidu Netcom Science and Technology Co Ltd
Priority date: 2021-11-22
Filing date: 2021-11-22
Publication date: 2022-02-18

Abstract

The disclosure provides a webpage display method and device, electronic equipment and a storage medium, and relates to the technical field of computers, in particular to the technical field of computer vision. The specific implementation scheme is as follows: when a webpage display instruction is received, acquiring an HTML (hypertext markup language) main body structure of a webpage, wherein the HTML main body structure comprises first loading animation data; displaying a first loading animation in the HTML body structure page based on the first loading animation data; acquiring a content component and a loading component of the webpage, wherein rendering data corresponding to the loading component is second loading animation data; in the process of rendering the content assembly of the webpage, rendering the loading assembly through second loading animation data, and displaying second loading animation; when rendering of the content component of the web page is complete, the web page content of the web page is displayed. The white screen time can be reduced.

Description

Webpage display method and device, electronic equipment and storage medium

Technical Field

The present disclosure relates to the field of computer technology, and more particularly, to the field of computer vision technology.

Background

The vue frame is a currently common progressive front-end frame for constructing the user interface, the default rendering mode of the Vue frame is JS rendering, and in the JS rendering process, the browser needs to download the JS script first and then execute the JS script through the JS engine, so that the webpage content is rendered and presented to the user.

Disclosure of Invention

The disclosure provides a webpage display method, a webpage display device, electronic equipment and a storage medium.

According to a first aspect of the present disclosure, there is provided a web page display method including:

when a webpage display instruction is received, acquiring an HTML (hypertext markup language) main body structure of the webpage, wherein the HTML main body structure comprises first loading animation data;

displaying a first loading animation in an HTML body structure page based on the first loading animation data;

acquiring a content component and a loading component of the webpage, wherein rendering data corresponding to the loading component is second loading animation data;

in the process of rendering the content assembly of the webpage, rendering the loading assembly through the second loading animation data, and displaying a second loading animation;

and when the rendering of the content component of the webpage is completed, displaying the webpage content of the webpage.

According to a second aspect of the present disclosure, there is provided a web page display apparatus including:

the system comprises an acquisition module, a display module and a display module, wherein the acquisition module is used for acquiring an HTML main body structure of a webpage when a webpage display instruction is received, and the HTML main body structure comprises first loading animation data;

the display module is used for displaying a first loading animation in an HTML main body structure page based on the first loading animation data;

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

the display module is further configured to render the loading component through the second loading animation data and display a second loading animation in a process of rendering the content component of the webpage;

the display module 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.

According to a third aspect of the embodiments of the present disclosure, there is provided an electronic apparatus including:

at least one processor; and

a memory communicatively coupled to the at least one processor; wherein the content of the first and second substances,

the memory stores instructions executable by the at least one processor to enable the at least one processor to perform the method of the first aspect.

According to a fourth aspect of the present disclosure, there is provided a non-transitory computer readable storage medium having stored thereon computer instructions for causing the computer to perform the method of the first aspect.

According to a fifth aspect of embodiments of the present disclosure, there is provided a computer program product comprising a computer program which, when executed by a processor, implements the method of the first aspect.

It should be understood that the statements in this section do not necessarily identify key or critical features of the embodiments of the present disclosure, nor do they limit the scope of the present disclosure. Other features of the present disclosure will become apparent from the following description.

Drawings

The drawings are included to provide a better understanding of the present solution and are not to be construed as limiting the present disclosure. Wherein:

fig. 1 is a flowchart of a method for displaying a web page according to an embodiment of the present disclosure;

FIG. 2 is a flowchart of another method for displaying a web page according to an embodiment of the present disclosure;

FIG. 3 is an exemplary flow chart of another method for displaying a web page provided by an embodiment of the present disclosure;

fig. 4 is a schematic structural diagram of a web page display device according to an embodiment of the disclosure;

fig. 5 is a block diagram of an electronic device for implementing a web page display method according to an embodiment of the present disclosure.

Detailed Description

Exemplary embodiments of the present disclosure are described below with reference to the accompanying drawings, in which various details of the embodiments of the disclosure are included to assist understanding, and which are to be considered as merely exemplary. Accordingly, those of ordinary skill in the art will recognize that various changes and modifications of the embodiments described herein can be made without departing from the scope and spirit of the present disclosure. Also, descriptions of well-known functions and constructions are omitted in the following description for clarity and conciseness.

The Vue framework is a commonly used MVVM framework, and MVVM is an abbreviation of Model-View-ViewModel, i.e., MVVM is composed of three parts of a Model (Model), a View (View) and a View Model (ViewModel). Optionally, the MVVM framework used in the embodiment of the present disclosure may also be a reach framework. React is a JavaScript library for building a user interface, which is a programming language.

Vue, the default rendering mode of the framework is JS (JavaScript) rendering, the JS rendering can decouple the dependency relationship between the front-end template and the back-end template and the data, and the development efficiency is improved. However, the JS rendering method based on the Vue frame can provide the HTML page body structure, the specific page content needs to be rendered through JS, and before the rendering of the page content is not completed, a blank page is displayed in the webpage, namely, a so-called white screen state occurs.

Moreover, since some dynamic contents may need to be displayed in the web page, the resource data of the dynamic contents cannot be queried and obtained from the server in advance. That is, the resource data to be rendered cannot be determined in advance, and the resource data can be requested to be acquired from the server and rendered only after a webpage display instruction triggered by a user is received, so that the time of displaying a white screen is long.

In order to reduce the time for displaying a white screen before the webpage rendering is completed, the embodiment of the disclosure provides a webpage display method, a webpage display device, an electronic device and a storage medium.

The method for displaying the webpage provided by the embodiment of the disclosure can be executed by electronic equipment, and the electronic equipment can be equipment such as a smart phone, a tablet computer, a desktop computer and a notebook computer.

The following describes a web page display method provided by the embodiment of the present disclosure, as shown in fig. 1, the method includes:

s101, when a webpage display instruction is received, acquiring a hypertext Markup Language (HTML) main body structure of a webpage, wherein the HTML main body structure comprises first loading animation data.

When a user clicks a web page link on a display interface of the client or the user inputs a website in a browser of the client and requests access, the client can receive a web page display instruction. Then, the client starts to load the web page, and first obtains the HTML body structure of the web page included in the navigation page (index. The static server stores static resources required for loading a web page, such as resource files of an HTML main body structure, JS, Cascading Style Sheets (CSSs), pictures, and the like.

The first loading animation data is Cascading Style sheet Level 3 (CSS 3) data, and CSS3 is an upgraded version of CSS.

And S102, displaying the first loading animation in the HTML main body structure page based on the first loading animation data.

Because the first loading animation data is included in the HTML body structure, the client can display the first loading animation when the HTML body structure page is displayed. The first loading animation is a preset animation and is used for representing that webpage content is currently loaded, and the first loading animation can also be called loading effect animation.

S103, acquiring a content component and a loading component of the webpage, wherein rendering data corresponding to the loading component is second loading animation data.

Wherein, the views directory comprises a plurality of page components. The client may determine a routing rule matching a uniform resource identifier (URL) of the web page based on the URL, and then obtain a page component required by the web page from the views directory according to the routing rule.

In this disclosure, the acquired page component of the web page includes a content component and a loading component, where the content component is a component for displaying actual content of the web page, and the loading component is a component for displaying a second loading animation added in this disclosure.

The second loading animation data may be CSS3 animation data.

And S104, in the process of rendering the content assembly of the webpage, rendering the loading assembly through the second loading animation data, and displaying the second loading animation.

In order to render the content component, the client needs to load static resource data, such as resource data of JS, CSS, pictures, and the like, required for displaying the web page from the static resource server. Optionally, if the web page is a dynamic page, the client further needs to load dynamic resource data required by each content component from the interface server. The client can render each content component based on the loaded resource data required for displaying the webpage, and can display a second loading animation in a period from the time when the client requests to acquire the resource data to the time when the client finishes rendering each content component.

And S105, when the rendering of the content assembly of the webpage is completed, displaying the webpage content of the webpage.

When the rendering of the content component of the webpage is completed, the webpage content of the webpage can be displayed, and the second loading animation is correspondingly hidden.

By adopting the embodiment of the disclosure, when a webpage display instruction is received, the first loading animation can be displayed through the HTML main body structure, and then the second loading animation can be displayed through the loading component, until the rendering of the content component of the webpage is completed, the webpage content is displayed. It can be seen that the first loading animation and the second loading animation can be displayed for the user before the webpage content is displayed, and the time for displaying the white screen can be reduced.

In another embodiment of the present disclosure, since an Application (APP) element is used as a container in the HTML body structure, the embodiment of the present disclosure may use the APP element to carry the first loaded animation data, that is, the client obtains the first loaded animation data from the static resource server in the APP element of the HTML body structure. On this basis, as shown in fig. 2, the above S102, displaying the first loading animation in the HTML body structure page based on the first loading animation data, may be implemented as S1021-S1022.

And S1021, acquiring first loading animation data from the APP element of the HTML main body structure.

S1022, rendering the first loading animation data, and displaying the rendered first loading animation in the HTML main body structure page.

By adopting the method, the first loading animation data can be carried in the APP element of the HTML main body structure, and then after the HTML main body structure is obtained by the client, the first loading animation data can be obtained from the APP element and displayed, namely, before the webpage content is rendered, the first loading animation can be displayed, so that the white screen time of the webpage is reduced, and the user experience is improved.

In another embodiment of the present disclosure, in the process of rendering the content component of the web page, in the step S104, rendering the loading component by using the second loading animation data, and displaying the second loading animation, the steps may be implemented as:

and in the process of rendering the content assembly of the webpage, rendering the loading assembly through the second loading animation data, and displaying the rendered second loading animation.

And rendering the second loaded animation data immediately after the client side acquires the loading assembly and the second loaded animation data.

It can be understood that when the client starts to acquire the content component and the loading component of the webpage, the display of the first loading animation is stopped, and when the second loading animation is rendered, the display of the second loading animation is started. The display of the second loading animation is started immediately after the display of the first loading animation is stopped, so that the white screen time before the webpage content is displayed can be reduced.

In addition, because the second loading animation data is the CSS3 data, the client renders the CSS3 data much faster than the web content component, so the client can quickly display the second loading animation after stopping displaying the first loading animation, and the client hardly perceives the switching between the first loading animation and the second loading animation. The seamless connection between the first loading animation and the second loading animation is realized, so that a user sees a continuous animation effect, the white screen time can be reduced, and the user experience is improved.

In the embodiment of the disclosure, the first loading animation and the second loading animation are the same, so that the client switches from the first loading animation to the second loading animation without sensing the user, and the same loading animation is always seen from the user, so that the overall display effect of the webpage is coordinated and consistent, the white screen time is reduced, the visual effect of smooth transition and friendly accommodation of two times of loading animations is presented for the user, and the use experience of the user on the browser is improved.

Referring to fig. 3, a web page display method provided by the embodiment of the present disclosure is described below, as shown in fig. 3, 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 displaying of the webpage can be realized by a browser client side, and can also be realized by webview components embedded in other client sides.

HTML files include an HTML main body structure of a webpage, the HTML main body structure includes loading animation data achieved based on CSS3, and then the client renders and displays the loading animation.

When a user accesses a webpage through a client, page routing change is also triggered, the client matches a routing rule based on the URL of the webpage, acquires a page component required by the webpage from a views directory based on the matched routing rule, the acquired page component comprises a content component and a loading component (the loading component is a page component in an vue frame and can also be called a vue component), and the loading component is rendered, so that the loading animation effect can be displayed again. The loading assembly can realize the same loading animation effect to realize the carrying of the loading animation effect.

After the content components of the web page are obtained, resource data required by each content component can be further obtained, each content component is rendered based on the obtained resource data, page content is returned to index.

Through experiments, the white screen state is obtained in the first 1300ms before optimization. After the optimization of the embodiment of the disclosure is adopted, the first 200ms after the client receives the webpage display instruction is the white screen state, and the 200ms is the time required by the client to acquire the HTML main body structure. Then displaying the loading animation included in the HTML main body structure in 800ms at 200 th-.

Corresponding to the above method embodiment, an embodiment of the present disclosure further provides a web page display apparatus, as shown in fig. 4, the apparatus includes:

the acquiring module 401 is configured to acquire an HTML main body structure of a webpage when a webpage display instruction is received, where the HTML main body structure includes first loading animation data;

a display module 402, configured to display a first loading animation in the HTML body structure page based on the first loading animation data;

the obtaining module 401 is further configured to obtain a content component and a loading component of the web page, where rendering data corresponding to the loading component is second loading animation data;

the display module 402 is further configured to render the loading component through the second loading animation data and display the second loading animation in the process of rendering the content component of the web page;

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.

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

In another embodiment of the present disclosure, the first loaded animation data and the second loaded animation data are both CSS3 animation data.

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

the display module is specifically configured to:

acquiring first loading animation data from an APP element of an HTML main body structure;

rendering the first loading animation data, and displaying the rendered first loading animation in the HTML main body structure page.

In another embodiment of the present disclosure, the display module 402 is specifically configured to render the loading component through the second loading animation data in a process of rendering the content component of the web page, and display a second loading animation obtained through the rendering.

In the technical scheme of the disclosure, the collection, storage, use, processing, transmission, provision, disclosure and other processing of the personal information of the related user are all in accordance with the regulations of related laws and regulations and do not violate the good customs of the public order.

The present disclosure also provides an electronic device, a readable storage medium, and a computer program product according to embodiments of the present disclosure.

FIG. 5 illustrates a schematic block diagram of an example electronic device 500 that can be used to implement embodiments of the present disclosure. Electronic devices are intended to represent various forms of digital computers, such as laptops, desktops, workstations, personal digital assistants, servers, blade servers, mainframes, and other appropriate computers. The electronic device may also represent various forms of mobile devices, such as personal digital processing, cellular phones, smart phones, wearable devices, and other similar computing devices. The components shown herein, their connections and relationships, and their functions, are meant to be examples only, and are not meant to limit implementations of the disclosure described and/or claimed herein.

As shown in fig. 5, the apparatus 500 comprises a computing unit 501 which may perform various appropriate actions and processes in accordance with 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 calculation unit 501, the ROM 502, and the RAM 503 are connected to each other by a bus 504. An input/output (I/O) interface 505 is also connected to bus 504.

A number 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, or the like; an output unit 507 such as various types of displays, speakers, and the like; a storage unit 508, such as a magnetic disk, optical disk, or the like; and a communication unit 509 such as a network card, modem, wireless communication transceiver, etc. The communication unit 509 allows the device 500 to exchange information/data with other devices through a computer network such as the internet and/or various telecommunication networks.

The computing unit 501 may be a variety of general-purpose and/or special-purpose processing components having 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, and so forth. The calculation unit 501 executes the respective methods and processes described above, such as a web page display method. For example, in some embodiments, the web page display method may be implemented as a computer software program tangibly embodied in a machine-readable medium, such as storage unit 508. In some embodiments, part or all of the computer program may 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 may be performed. Alternatively, in other embodiments, the computing unit 501 may be configured to perform the web page display method by any other suitable means (e.g., by means of firmware).

Various implementations of the systems and techniques described here above may be implemented in digital electronic circuitry, integrated circuitry, Field Programmable Gate Arrays (FPGAs), Application Specific Integrated Circuits (ASICs), Application Specific Standard Products (ASSPs), system on a chip (SOCs), load programmable logic devices (CPLDs), computer hardware, firmware, software, and/or combinations thereof. These various embodiments may include: implemented in one or more computer programs that are executable and/or interpretable on a programmable system including at least one programmable processor, which may be special or general purpose, receiving data and instructions from, and transmitting data and instructions to, a storage system, at least one input device, and at least one output device.

Program code for implementing the methods of the present disclosure may be written in any combination of one or more programming languages. These program codes may be provided to a processor or controller of a general purpose computer, special purpose computer, or other programmable data processing apparatus, such that the program codes, when executed by the processor or controller, cause the functions/operations specified in the flowchart and/or block diagram to be performed. The program code may execute entirely on the machine, partly on the machine, as a stand-alone software package partly on the machine and partly on a remote machine or entirely on the remote machine or server.

In the context of this disclosure, a machine-readable medium may 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. The machine-readable medium may be a machine-readable signal medium or a machine-readable storage medium. A machine-readable medium may 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.

To provide for interaction with a user, the systems and techniques described here 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 a user; and a keyboard and a pointing device (e.g., a mouse or a trackball) by which a user can provide input to the computer. Other kinds of devices may also be used to provide for interaction with a user; for example, 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 may be received in any form, including acoustic, speech, or tactile input.

The systems and techniques described here can be implemented in a computing system that includes a back-end component (e.g., as a data server), or that includes a middleware component (e.g., an application server), or that includes a front-end component (e.g., a user computer having a graphical user interface or a web browser through which a user can interact with an implementation of the systems and techniques described here), or any combination of such back-end, middleware, 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: local Area Networks (LANs), Wide Area Networks (WANs), and the Internet.

The computer system may include clients and servers. A client and server are generally remote from each other and typically interact through a communication network. The relationship of client and server arises by virtue of computer programs running on the respective computers and having a client-server relationship to each other. The server may be a cloud server, a server of a distributed system, or a server with a combined blockchain.

It should be understood that various forms of the flows shown above may be used, with steps reordered, added, or deleted. For example, the steps described in the present disclosure may be executed in parallel, sequentially, or in different orders, as long as the desired results of the technical solutions disclosed in the present disclosure can be achieved, and the present disclosure is not limited herein.

The above detailed description should not be construed as limiting the scope of the disclosure. It should be understood by those skilled in the art that various modifications, combinations, sub-combinations and substitutions may be made in accordance with design requirements and other factors. Any modification, equivalent replacement, and improvement made within the spirit and principle of the present disclosure should be included in the scope of protection of the present disclosure.

Claims

1. A web page display method, comprising:

2. The method of claim 1, wherein the first loading animation is the same as the second loading animation.

3. The method of claim 1, wherein the first loaded animation data and the second loaded animation data are both CSS3 animation data.

4. The method of any of claims 1-3, wherein the first load animation data is included in the APP element of the HTML body structure;

the displaying a first loading animation in an HTML body structure page based on the first loading animation data includes:

acquiring the first loading animation data from the APP element of the HTML main body structure;

5. The method of any of claims 1-3, wherein rendering the loaded component via the second loaded animation data and displaying a second loaded animation during the rendering of the content component of the web page comprises:

and in the process of rendering the content assembly of the webpage, rendering the loading assembly through the second loading animation data, and displaying a second loading animation obtained through rendering.

6. A web page display apparatus comprising:

7. The apparatus of claim 6, wherein the first loading animation is the same as the second loading animation.

8. The apparatus of claim 6, wherein the first loaded animation data and the second loaded animation data are both CSS3 animation data.

9. The apparatus of any of claims 6-8, wherein the first load animation data is included in an APP element of the HTML body structure;

the display module is specifically configured to:

10. The apparatus of any one of claims 6-8,

the display module is specifically configured to render the loading component through the second loading animation data in a process of rendering the content component of the webpage, and display a second loading animation obtained through rendering.

11. An electronic device, comprising:

at least one processor; and

the memory stores instructions executable by the at least one processor to enable the at least one processor to perform the method of any one of claims 1-5.

12. A non-transitory computer readable storage medium having stored thereon computer instructions for causing the computer to perform the method of any one of claims 1-5.

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