CN110889060A

CN110889060A - Webpage display method and device, computer equipment and storage medium

Info

Publication number: CN110889060A
Application number: CN201911072471.2A
Authority: CN
Inventors: 王鹤鹏; 张胤雄
Original assignee: Beijing Sankuai Online Technology Co Ltd
Current assignee: Beijing Sankuai Online Technology Co Ltd
Priority date: 2019-11-05
Filing date: 2019-11-05
Publication date: 2020-03-17

Abstract

The application discloses a webpage display method and device, computer equipment and a storage medium, and belongs to the technical field of computers. The method comprises the following steps: acquiring a webpage view and a native view, wherein the native view is positioned on the upper layer of the webpage view; acquiring multimedia data, and rendering a native view based on the multimedia data; loading webpage data of a webpage to be displayed based on the webpage view, and rendering the webpage view based on the loaded webpage data; and when the loading progress of the webpage meets the target condition, hiding and displaying the native view. According to the method and the device, the native view is created on the upper layer of the webpage view, the user-defined page is loaded based on the native view, and the computer device displays the user-defined page before the loading progress of the webpage meets the target condition, so that the user is prevented from seeing the white screen for a long time, and the jumping rate of the webpage is reduced.

Description

Webpage display method and device, computer equipment and storage medium

Technical Field

The present application relates to the field of computer technologies, and in particular, to a method and an apparatus for displaying a web page, a computer device, and a storage medium.

Background

The mixed-mode mobile application refers to an application between a web application and a native application, and has the advantages of good user interaction experience of the native application and cross-platform development of the web application. To the user, accessing the mixed-mode mobile application feels like accessing the native application, but actually accesses the web application through a browser kernel encapsulated in the mixed-mode mobile application.

Currently, when a webpage is displayed in a mixed-mode mobile application, a webpage view is created first, webpage view initialization is performed, after the webpage view initialization is completed, a webpage is loaded, at the moment, a progress bar is displayed on the top of the current webpage, and the user is informed of the progress of the current webpage loading through the length of the progress bar; and when the webpage loading is completed, displaying the webpage.

Disclosure of Invention

The embodiment of the application provides a webpage display method and device, computer equipment and a storage medium, and can solve the problem that a user sees a white screen for a long time and the visual effect is poor. The technical scheme is as follows:

in one aspect, a method for displaying a web page is provided, and the method includes:

acquiring a webpage view and a native view, wherein the native view is positioned at the upper layer of the webpage view;

obtaining multimedia data, and rendering the native view based on the multimedia data;

loading webpage data of a webpage to be displayed based on the webpage view, and rendering the webpage view based on the loaded webpage data;

and when the loading progress of the webpage meets a target condition, hiding and displaying the native view.

In one possible implementation, the method further includes:

when the native view is in a display state and the operation of a user is detected, controlling the display content of the native view based on the operation;

when the native view is in a hidden display state and a user's operation is detected, controlling display content of the web page based on the operation.

In one possible implementation, the obtaining the multimedia data includes:

and acquiring multimedia data corresponding to the preset loading duration of the webpage according to the preset loading duration of the webpage.

In a possible implementation manner, the acquiring, according to the preset loading duration of the web page, multimedia data corresponding to the preset loading duration of the web page includes:

when the preset loading duration of the webpage is smaller than a first time threshold, acquiring first multimedia data;

when the preset loading duration of the webpage is greater than the first time threshold and less than a second time threshold, acquiring second multimedia data;

when the preset loading duration of the webpage is greater than the second time threshold, acquiring third multimedia data;

and the loading duration of the first multimedia data, the second multimedia data and the third multimedia data is sequentially increased.

In one possible implementation manner, the first multimedia data is animation data, the second multimedia data is advertisement data, and the third multimedia data is game data.

In one possible implementation, the acquiring multimedia data includes:

and acquiring multimedia data corresponding to the webpage identifier according to the webpage identifier of the webpage and the corresponding relation between the multimedia data and the webpage identifier.

In one possible implementation, the acquiring multimedia data includes:

when the multimedia data are stored locally, acquiring the multimedia data from the local storage space;

and when the multimedia data is not stored locally, acquiring the multimedia data from a server.

In one possible implementation manner, the hidden displaying the native view when the loading progress of the webpage meets a target condition includes:

after target data in the webpage data are loaded, hiding and displaying the native view; alternatively, the first and second electrodes may be,

after the webpage data are loaded, hiding and displaying the native view; alternatively, the first and second electrodes may be,

and when the webpage data are loaded and the rendering of the webpage view based on the webpage data is completed, hiding and displaying the native view.

In one aspect, there is provided a web page display apparatus, the apparatus including:

the acquisition module is used for acquiring a webpage view and a native view, wherein the native view is positioned at the upper layer of the webpage view;

the rendering module is used for acquiring multimedia data and rendering the native view based on the multimedia data;

the loading module is used for loading webpage data of a webpage to be displayed based on the webpage view and rendering the webpage view based on the loaded webpage data;

and the display module is used for hiding and displaying the native view when the loading progress of the webpage meets a target condition.

In one possible implementation, the apparatus further includes:

the control module is used for controlling the display content of the native view based on the operation when the native view is in a display state and the operation of a user is detected;

the control module is further used for controlling the display content of the webpage based on the operation when the native view is in the hidden display state and the operation of the user is detected.

In one possible implementation, the rendering module includes:

the first obtaining unit is used for obtaining the multimedia data corresponding to the preset loading duration of the webpage according to the preset loading duration of the webpage.

In a possible implementation manner, the first obtaining unit is configured to obtain first multimedia data when a preset loading duration of the web page is smaller than a first time threshold;

the first obtaining unit is further configured to obtain second multimedia data when the preset loading duration of the webpage is greater than the first time threshold and smaller than a second time threshold;

the first obtaining unit is further configured to obtain third multimedia data when the preset loading duration of the webpage is greater than the second time threshold;

In one possible implementation, the rendering module includes:

and the second acquisition unit is used for acquiring the multimedia data corresponding to the webpage identifier according to the webpage identifier of the webpage and the corresponding relation between the multimedia data and the webpage identifier.

In one possible implementation, the rendering module includes:

the third acquisition unit is used for acquiring the multimedia data from the local storage space when the multimedia data is locally stored;

and the fourth acquisition unit is used for acquiring the multimedia data from the server when the multimedia data is not stored locally.

In one possible implementation, the display module includes:

the first display unit is used for hiding and displaying the native view after target data in the webpage data are loaded; alternatively, the first and second electrodes may be,

the second display unit is used for hiding and displaying the native view after the webpage data are loaded; alternatively, the first and second electrodes may be,

and the third display unit is used for hiding and displaying the native view after the webpage data are loaded and the webpage view is rendered based on the webpage data.

In one aspect, a computer device is provided and includes one or more processors and one or more memories having at least one instruction stored therein, the at least one instruction being loaded and executed by the one or more processors to implement the operations performed by the web page display method according to any one of the possible implementations described above.

In one aspect, a computer-readable storage medium is provided, in which at least one instruction is stored, and the at least one instruction is loaded and executed by a processor to implement the operations performed by the web page display method according to any one of the above possible implementation manners.

The beneficial effects brought by the technical scheme provided by the embodiment of the application at least comprise:

the native view is rendered based on the multimedia data by creating the native view on the upper layer of the webpage view, and the native view can be directly rendered after the multimedia data is acquired without initializing the native view, so that the time of displaying the picture content of the computer equipment is advanced, a user-defined page obtained by rendering the native view can be displayed before the webpage appears, the user is prevented from seeing a white screen for a long time, the visual effect is improved, and the skipping rate of the webpage is reduced. Moreover, the loading processes of the webpage view and the native view are independent, so that the progress of loading the webpage by the webpage view cannot be influenced by creating the native view and rendering the native view.

Moreover, the multimedia data can be stored on the computer equipment, and can be directly acquired from the local when rendering the native view based on the multimedia data, so that a user-defined page can be rendered quickly based on the multimedia data, and the user can be prevented from seeing a white screen as far as possible.

And the customized page is loaded through the native view, so that the loading of the more complicated customized page can be realized by utilizing the high performance of the native view, the picture is loaded through the webpage view and displayed on a computer relative to the modification of the page code, and when the webpage loading is finished, the picture loading is cancelled, and the scheme of displaying the current webpage content is changed. The scheme can dynamically load an interface or load various complex self-defined pages without modifying page codes.

Drawings

In order to more clearly illustrate the technical solutions in the embodiments of the present application, the drawings used in the description of the embodiments will be briefly introduced below, and it is obvious that the drawings in the following description are only some embodiments of the present application, and it is obvious for those skilled in the art to obtain other drawings without creative efforts.

FIG. 1 is a schematic diagram of an implementation environment provided by an embodiment of the present application;

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

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

FIG. 4 is a schematic diagram illustrating a comparison between a web page display method according to the related art and a related art provided by an embodiment of the present application;

fig. 5 is a schematic structural diagram of a web page display device according to an embodiment of the present application;

fig. 6 is a schematic structural diagram of a web page display device according to an embodiment of the present application;

fig. 7 is a schematic structural diagram of a terminal provided in an embodiment of the present application;

fig. 8 is a schematic structural diagram of a server according to an embodiment of the present application.

Detailed Description

To make the objects, technical solutions and advantages of the present application more clear, embodiments of the present application will be described in further detail below with reference to the accompanying drawings.

Fig. 1 is a schematic diagram of an implementation environment provided in an embodiment of the present application, and referring to fig. 1, the implementation environment includes: computer device 101 and server 102.

The computer device 101 may be a terminal such as a mobile phone, a computer, a tablet computer, and the like, and the server 102 may be a server, or a server cluster formed by a plurality of servers, or a cloud computing service center.

The computer device 101 may obtain web page data from the server 102 to load a web page based on the web page view, and may also obtain multimedia data from the server 102 to load a self-defined page based on the native view; or locally acquire multimedia data from the computer device 101, and load a custom page, the embodiment of the present application does not limit the manner of acquiring multimedia data.

Fig. 2 is a flowchart of a web page display method according to an embodiment of the present application. The method can be applied to any kind of computer equipment, which can be a mobile phone, a computer, a tablet computer and other terminals, and referring to fig. 2, the embodiment includes:

201. and acquiring a webpage view and a native view, wherein the native view is positioned at the upper layer of the webpage view.

202. Multimedia data is acquired, and the native view is rendered based on the multimedia data.

203. And loading webpage data of the webpage to be displayed based on the webpage view, and rendering the webpage view based on the loaded webpage data.

204. And when the loading progress of the webpage meets the target condition, hiding and displaying the native view.

According to the webpage display method, the native view is created on the upper layer of the webpage view and rendered based on the multimedia data, and the native view does not need to be initialized and can be directly rendered after the multimedia data are obtained, so that the time for displaying the picture content of the computer equipment is shortened, a self-defined page obtained by rendering the native view can be displayed before the webpage appears, a user is prevented from seeing a white screen for a long time, the visual effect is improved, and the jumping rate of the webpage is reduced. Moreover, the loading processes of the webpage view and the native view are independent, so that the progress of webpage loading of the webpage view cannot be influenced by creating the native view and rendering the native view.

In one possible implementation, the method further comprises:

and when the native view is in a hidden display state and the operation of a user is detected, controlling the display content of the webpage based on the operation.

In one possible implementation, the obtaining the multimedia data includes:

the loading duration of the first multimedia data, the second multimedia data and the third multimedia data is increased progressively in sequence.

In one possible implementation, the first multimedia data is animation data, the second multimedia data is advertisement data, and the third multimedia data is game data.

In one possible implementation, the acquiring multimedia data includes:

and acquiring the multimedia data corresponding to the webpage identifier according to the webpage identifier of the webpage and the corresponding relation between the multimedia data and the webpage identifier.

In one possible implementation, the acquiring multimedia data includes:

when the multimedia data is locally stored, acquiring the multimedia data from the local storage space;

and when the multimedia data is not stored locally, acquiring the multimedia data from the server.

In one possible implementation, hiding and displaying the native view when the loading progress of the web page meets a target condition includes:

after the target data in the webpage data are loaded, hiding and displaying the native view; alternatively, the first and second electrodes may be,

and when the webpage data are loaded and the rendering of the webpage view is completed based on the webpage data, the native view is hidden and displayed.

All the above optional technical solutions may be combined arbitrarily to form the optional embodiments of the present disclosure, and are not described herein again.

Fig. 3 is a flowchart of a web page display method according to an embodiment of the present application. The method can be applied to any kind of computer equipment, which can be a mobile phone, a computer, a tablet computer and other terminals, and referring to fig. 3, the embodiment includes:

301. and receiving a webpage display instruction, wherein the webpage display instruction at least carries a webpage identifier of a webpage to be displayed.

Any mixed mode mobile (Hybrid) application can be installed on the computer equipment, and for any application, a user can trigger a webpage display instruction through touch operations such as clicking, sliding, long pressing and the like, and can also trigger the webpage display instruction through operations such as mouse clicking and the like. The method for triggering the webpage display instruction is not limited in the embodiment of the application.

For any page of the application, the page may have a unique page identifier, where the page identifier may be a page ID (Identity, Identity number) or a page URL (Uniform resource Locator), and the like.

302. And acquiring a webpage view and a native view, wherein the native view is positioned at the upper layer of the webpage view.

The web view (Webview) may be a control for displaying a web page, and may be regarded as a browser control that can be nested on a display interface, and the web page can be accessed through the web view. The web page view allows the web page to be easily embedded into an application where a complete web page is presented and available to the user. The Native view (Native) may be a control for rendering the local resource, and the control may directly render the content using the local resource without initialization.

When the webpage view loads the webpage, the webpage view needs to be initialized, a basic frame of the webpage view can be obtained after the initialization of the webpage view is completed, corresponding webpage data are obtained based on the basic frame, and after the webpage data are obtained, the webpage view is rendered based on the webpage data, so that an interface of the webpage is obtained. Wherein the basic frame may include a web page title, etc. Since the loading of the web page data depends on the initialization of the web page view, the web page view appears later. The native view does not need to be initialized, rendering can be directly carried out based on the acquired multimedia data, and a user-defined page is obtained, so that the time for the native view to appear on the picture is earlier. If the native view is arranged on the upper layer of the webpage view, the user can see the content displayed by the native view, so that the picture can be displayed as fast as possible on the current display interface of the computer equipment.

In one possible implementation, obtaining the web page view and the native view may include: a web page view and a native view are created. When a user opens a first webpage in an application, a webpage view and a native view can be created, a custom page is loaded based on the created native view, and the webpage is loaded based on the webpage view. When the user opens the nth webpage in the application, the webpage view and the native view created when the previous webpage is loaded can be deleted, and the webpage view and the native view are recreated, wherein n is any integer greater than or equal to 2. Because the created webpage view and the created native view are short and can be ignored, in order to ensure the loading effect, the webpage view and the native view can be re-created each time the webpage is loaded.

In another possible implementation, obtaining the web page view and the native view may include: and acquiring the created webpage view and the native view. The step of acquiring the created webpage view and the created native view refers to directly loading the webpage by using the created webpage view and loading the custom page by using the created native view. For example, when a user opens a first webpage in an application, a webpage view and a native view are created, and when the webpage view loads the webpage, the native view is hidden and displayed. When a user opens the nth webpage in the application, the state of the native view is modified into a display state, the custom page loaded by the native view last time can be used, and the custom page can be re-rendered based on other multimedia data; and simultaneously initializing the webpage view, and loading webpage data based on the initialized webpage view. The webpage view and the native view are only needed to be created when the webpage is loaded for the first time in the application, and the creation is not needed subsequently, so that the system resources are saved.

In one possible implementation, the creation of the web page view and the native view requires parallel completion by two threads. That is, the web page view is created by one thread, the native view is created by another thread, and the loading processes of the web page view and the native view can be executed in parallel by the two threads, so that the normal loading of the web page view is not affected by the creation and loading processes of the native view.

303. And acquiring multimedia data based on the webpage display instruction.

The multimedia data is data for rendering a native view, and may be animation data, advertisement data, game data, or the like. The embodiment of the present application does not limit the specific form of the multimedia data.

The multimedia data can be stored locally in the computer equipment, and when the multimedia data is acquired, the multimedia data is directly acquired from the local storage space. In one possible implementation, the multimedia data is stored in a local cache of the computer device. When the application is closed or other time nodes are used, the local cache is cleared, so that the multimedia data stored in the local cache is deleted, the local storage pressure can be reduced, and the running speed of the computer equipment is ensured. And the server can issue the multimedia data to the terminal for a plurality of times, and the multimedia data of the terminal can be updated in time when the multimedia data in the server is updated.

In another possible implementation, the multimedia data may be stored in a memory of the computer device. The multimedia data are stored in the memory of the computer equipment, and can be deleted from the memory only when the user manually cleans the memory, so that the local multimedia data of the computer can be used when the computer equipment renders the native view as much as possible, and the time for displaying the picture of the native view is reduced.

In addition, the multimedia data may also be stored in a server from which the computer device retrieves the multimedia data when rendering the native view. In one possible implementation, when receiving the webpage display instruction, sending a multimedia data acquisition request to the server, and sending the multimedia data to the computer device by the server based on the multimedia data acquisition request. The storage of multimedia data locally, which causes storage pressure locally, is avoided.

Since the multimedia data can be stored locally, it can also be stored in a server. When the multimedia data are acquired from the server, a certain time is consumed in the process of loading the multimedia data, the multimedia data are acquired from the local, the loading process is not needed, and the native view can be rendered directly based on the multimedia data, so that the multimedia data are acquired from the local, and the time for displaying the picture of the native view is earlier. In one possible implementation, the manner of acquiring the multimedia data may include: detecting whether multimedia data are stored locally or not, and acquiring the multimedia data from a local storage space when the multimedia data are stored locally; and when the multimedia data is not stored locally, acquiring the multimedia data from the server. By detecting whether multimedia data are stored locally or not, the multimedia data are preferentially acquired locally, and the fact that the original view displays the picture as fast as possible is guaranteed.

The source mode of the multimedia data local to the computer device may at least include the following three modes:

firstly, the method comprises the following steps: the server pre-issues the multimedia data to the computer equipment.

The server can pre-issue the multimedia data to the computer device, so that when the native view is rendered, the native view can be rendered directly based on the pre-issued multimedia data, and time consumed for loading the multimedia data from the server is saved.

In addition, the server may pre-issue the multimedia data to the computer device when the user starts the application. In one possible implementation manner, the computer device sends start information to the server in response to a start operation of the application, and after receiving the start information, the server sends an application configuration file to the computer device, where the application configuration file includes multimedia data.

In another possible implementation manner, in response to a start operation of an application, a computer device sends a multimedia data acquisition request to a server, where the multimedia data acquisition request carries a computer device identifier, and after receiving the multimedia data acquisition request, the server sends multimedia data to the computer device based on the device identifier of the computer device.

Secondly, the method comprises the following steps: and acquiring multimedia data based on the installation package of the application.

The application installation package can include multimedia data, and the computer device can install the application installation package when downloading the application, so that the multimedia data carried in the installation package is obtained, and the multimedia data is stored in a local place.

And when the application is updated, a new installation package can be issued, the new installation package can also comprise new multimedia data, after the new installation package is installed, the new multimedia data carried by the new installation package can be acquired, and the locally stored multimedia data can be updated based on the new multimedia data, so that the multimedia data can be updated accordingly when the application is updated.

And the third is that: the computer equipment sends a multimedia data acquisition request to the server in advance, the server issues multimedia data to the computer equipment based on the multimedia data acquisition request, and the computer equipment stores the acquired multimedia data locally. The time when the computer device sends the multimedia data acquisition request to the server in advance may be: the last time the computer device received the web page display instruction.

And subsequently, when the computer equipment receives a webpage display instruction, the locally stored multimedia data can be acquired.

After the multimedia data is acquired by any method, the multimedia data can be stored in a local cache or a memory.

It should be noted that the above is only an exemplary illustration of the source manner of the multimedia data stored locally in the computer, the source manner of the multimedia data is not limited to the above three obtaining manners, and the multimedia data may also be multimedia data stored by other local applications, for example, the multimedia data may be a part of video data stored in a local video application. The embodiment of the present application does not limit the source manner of the local multimedia data.

In a first possible implementation manner, the multimedia data corresponding to the web page identifier may be obtained from the multimedia data based on the web page identifier.

In one possible implementation manner, the multimedia data corresponding to the webpage identifier is obtained according to the webpage identifier of the webpage and the corresponding relationship between the multimedia data and the webpage identifier. The corresponding relationship between the multimedia data and the webpage identifier may be preset. In a possible implementation manner, a corresponding relationship between the multimedia data and the content of the webpage to be displayed may be set according to the content of the webpage to be displayed, for example, the webpage to be opened by the user is a taxi-taking webpage, and corresponding taxi-taking animation data may be configured for the webpage, where the taxi-taking animation data is the multimedia data corresponding to the webpage identifier of the taxi-taking webpage.

Because the sizes of the webpage data of different webpages are different, the loading time of different webpages is different, and when the webpage data are more, the loading time of the webpage is longer; when the data of the web page is less, the loading time of the web page is shorter. The loading time lengths of different multimedia data may be different, for example, the loading time length of the picture data is shorter, and the loading time length of the video data is relatively longer.

In a second possible implementation manner, the multimedia data may be obtained according to a corresponding relationship between a preset loading duration of the web page and the multimedia data. The preset loading time of the webpage is the time possibly required for loading the webpage.

In one possible implementation manner, when the preset loading duration of the webpage is smaller than a first time threshold, obtaining first multimedia data; when the preset loading duration of the webpage is greater than a first time threshold and less than a second time threshold, acquiring second multimedia data; and when the preset loading duration of the webpage is greater than a second time threshold, acquiring third multimedia data. And the loading duration of the first multimedia data, the second multimedia data and the third multimedia data is sequentially increased progressively when the second time threshold is greater than the first time threshold.

The multimedia data may be animation data, advertisement data, game data, or the like, the animation data may be text animation data, image animation data, or video animation data, the advertisement data may be picture advertisement data or video advertisement data, and the game data may be data for rendering a game interface, and thus, various types of data may be included in the game data. According to the specific form of the multimedia data, the time consumption for loading the multimedia data can be determined, when the animation data is text animation data or image animation data, and the advertisement data is video advertisement data, the first multimedia data can be animation data, the second multimedia data can be advertisement data, and the third multimedia data can be game data. When the animation data is video animation data and the advertisement data is picture advertisement data, the first multimedia data may be advertisement data, the second multimedia data may be animation data, and the third multimedia data may be game data.

When the multimedia data are animation data, rendering a native view based on the multimedia data to obtain an animation interface; when the multimedia data are advertisement data, rendering a native view based on the multimedia data to obtain an advertisement interface; and when the multimedia data is game data, rendering the native view based on the multimedia data to obtain a game interface. In the embodiment of the application, when the loading progress of the webpage view meets the target condition, the native interface is hidden and displayed, and after the hidden and displayed interface is hidden and displayed, a user cannot see the rendered interface of the native view. The advertisement interface needs a certain time to play the advertisement, and if the loading time of the webpage is short, the user may get to watch the specific content of the advertisement in the future, and the advertisement interface is hidden and displayed. Or the interface rendered by the original view is a game interface, and the game interface is hidden and displayed in a short time, so that the purpose that the user interacts with the game interface when waiting for the webpage to be loaded cannot be achieved.

In addition, the corresponding relation between the preset loading duration of the webpage and the multimedia data can be set according to the characteristics of the interface rendered by the multimedia data. When the preset loading duration of the webpage is smaller than a third time threshold, acquiring fourth multimedia data; when the preset loading duration of the webpage is greater than the third time threshold and less than the fourth time threshold, acquiring fifth multimedia data; when the preset loading duration of the webpage is greater than the fourth time threshold, acquiring sixth multimedia data; and the fourth time threshold is greater than the third time threshold, and the expected display duration of the interface rendered by the fourth multimedia data, the fifth multimedia data and the sixth multimedia data is sequentially increased.

For example, the fourth multimedia data is animation data, the fifth multimedia data is advertisement data, and the sixth multimedia data is game data.

In addition, multimedia data can be acquired based on the webpage identifier, and multimedia data can be acquired in other manners, in a possible implementation manner, when the webpage is loaded this time, the corresponding relationship between the webpage identifier of the webpage and the acquired multimedia data can be recorded, and when the webpage is loaded next time, other multimedia data except the multimedia data corresponding to the webpage identifier are acquired according to the corresponding relationship, so that the acquired multimedia data are different when the same webpage is loaded in the former webpage and the later webpage. The method and the device ensure that different pictures can be rendered by the primary view each time as far as possible when the user loads the common webpage, and avoid visual fatigue of the user. The embodiment of the application does not limit the mode of acquiring the multimedia data based on the webpage identification.

In another possible implementation, the acquisition of the multimedia data may be independent of the identification of the web page. In one possible implementation, one multimedia data is randomly selected from a plurality of multimedia data. For example, when the server receives a multimedia data transmission request, one multimedia data is randomly selected from a plurality of multimedia data, and the multimedia data is transmitted to the computer device. Alternatively, the computer device randomly selects one multimedia data from a plurality of locally stored multimedia data, and renders the native view based on the multimedia data.

In another possible implementation manner, any other multimedia data than the multimedia data selected last time is selected from the plurality of multimedia data based on the multimedia data acquired last time. The picture displayed by the primary view of the previous view and the picture displayed by the secondary view are different, and the phenomenon that the same picture appears repeatedly to cause visual fatigue of a user is avoided. The embodiment of the present application does not limit the specific manner of acquiring multimedia data.

304. Rendering the native view based on the acquired multimedia data.

After rendering the native view based on the acquired multimedia data, the rendered interface is displayed on the native view. And different interfaces obtained by rendering different multimedia data are different. When the multimedia data is animation data, rendering the native view based on the animation data to obtain an animation interface, and at this time, a user can see the rendered animation on a screen of the computer device. When the multimedia data is advertisement data, rendering a native view based on the advertisement data, and obtaining an advertisement interface, wherein the user can see the rendered advertisement on the screen of the computer device. When the multimedia data is game data, rendering a native view based on the game data to obtain a game interface, and the user can see the rendered game on the screen of the computer device.

305. When the native view is in a display state and an operation by a user is detected, display content of the native view is controlled based on the operation.

The user operation may be a touch operation of a user on the display screen, such as a click operation, a sliding operation, a long-time press operation, and the like, the user operation may also be a click operation of the user on the display screen through a mouse, such as a click operation, a double-click operation, a left-click operation, a right-click operation, and the like, and the user operation may also be a movement of the user-controlled computer device in a space, such as a left-right shaking of the computer device, a vertical shaking of the computer device, a left-leaning computer device, a right-leaning computer device, and the like.

When the native view is in the display state, the computer device detects an operation of the user, and the operation may be regarded as an operation of an interface rendered for the native view, so that the display content of the native view is controlled based on the operation.

In one possible implementation, controlling the display content of the native view based on the operation of the user may include: and displaying another interface according to the current display content of the native view and the operation of the user. For example, when the native view currently displays an advertisement, if a touch operation of a user is received based on the display screen, the native view jumps to an interface corresponding to a link of the advertisement according to the link.

In another possible implementation, controlling the display content of the native view based on the operation of the user may include: and determining the next state of the target object according to the state of the target object in the current display content of the native view and the operation of the user, and displaying according to the next state of the target object. For example, when the native view displays a cartoon character, the state of the cartoon character is a static state, the user shakes the mobile phone, a gyroscope sensor of the computer device detects that the user shakes the mobile phone, the next state of the cartoon character is determined to be a flying state, the cartoon character in the flying state is rendered on the native view, and the user can see that the cartoon character flies in the display screen.

Or when the native view displays a long game, the game interface includes a first target object and a second target object, the first target object is an object controlled by the user, the user can control the first target object to move, and the second target object is an object with a fixed position. When the top of the first target object moves to the second target object, the second target object may be phagocytosed while the length of the first target object increases. The user can perform touch operation on the display screen to control the first target object to move so as to phagocytose the second target object.

It should be noted that, when the game is displayed in the native view, after the native view is hidden and displayed, the game progress of the game may be saved, the game data corresponding to the game progress may be stored, and when the web page is loaded next time, the last stored game data may be acquired, and the native view may be rendered, so that the user may continue the last game.

It should be noted that, in the embodiment of the present application, only when the native view is in the display state, the display content of the native view is controlled based on the user operation. When the native view is in the hidden display state, the computer device displays the web page content at this time, and if an operation by the user is received, the operation can be considered as an operation for the displayed web page. Therefore, when the native view is in the hidden display state and the operation by the user is detected, the display content of the web page is controlled based on the operation.

306. The web page view is initialized.

In this embodiment of the present application, step 306 may start simultaneously with step 303, and certainly, may also be performed before and after, and the time difference may be smaller than a time threshold, so as to ensure that the whole display process does not consume too much time.

307. And after the initialization of the webpage view is completed, loading webpage data of the webpage to be displayed based on the webpage view.

After the initialization of the web page view is completed, a web page frame is obtained, and the loading of the web page data is performed based on the web page frame.

In one possible implementation, the web page data may include an HTML (HyperText markup language) file, a JS (JavaScript, interpreted scripting language) file, and a CSS (Cascading Style Sheets). The HTML file is used for providing specific content of the webpage, the JS file is used for achieving initialization of the control on the webpage and all functional method interfaces, and the CSS file is used for defining the style corresponding to the control.

For different web pages, the composition form of the web page data may be different, for example, some web pages include HTML files, the HTML files include JS files and CSS files, and some web pages include HTML files and JS files that are independent of each other, and different processing modes may be provided subsequently based on different composition forms.

308. Rendering the webpage view based on the loaded webpage data.

Based on the loaded webpage data, rendering the webpage view can adopt any one of the following possible implementation manners:

in a first possible implementation, during the loading of the web page data, the web page view is rendered based on the loaded web page data.

The loading of the webpage data may be in a sequential order, for example, the computer device may preferentially load the HTML file, load the JS file after the loading is completed, and finally load the CSS file. Because the loading of the webpage data is time-consuming, in order to accelerate the loading progress of the webpage view, the computer device can load the CSS file and render the webpage view based on the HTML file and the JS file at the same time after the loading of the HTML file and the JS file is completed.

In a second possible implementation, after the loading of the web page data is completed, the web page view is rendered based on the entire web page data. In this case, the loading of the web page data may or may not have a sequence.

309. And when the loading progress of the webpage meets the target condition, hiding and displaying the native view.

Because the webpage loading modes can be various, the native view can be hidden and displayed at different time according to different loading modes, so that the webpage view positioned at the lower layer can be seen by a user. When the loading progress of the webpage meets the target condition, the native view is hidden and displayed, which may include any one of the following manners:

in a first possible implementation manner, after target data in the webpage data is loaded, the display native view is hidden.

The target data may be part of data in the webpage data, and the webpage view may be rendered according to the target data after the target data is loaded into the target data. For example, the target data may be an HTML file, a JS file, or a CSS file, etc. Because the time for rendering the webpage view based on the target data is very short after the target data is loaded, the native view can be hidden and displayed after the target data is loaded, so that a user can see the webpage view positioned at the lower layer, and although the webpage may not be completely rendered successfully, the webpage view has content and the time for completely rendering the webpage is short.

In a second possible implementation, after the loading of the web page data is completed, the native view is hidden and displayed.

In the process of loading the webpage data, the computer device can load the webpage data and render the webpage view based on the loaded webpage data, and can also render the webpage view based on the loaded webpage data after the webpage data is loaded.

In any of the above manners, the native view may be hidden and displayed after the webpage data is loaded, and different from the above manner, if the computer device loads the webpage data and renders the webpage view based on the loaded webpage data, the complete webpage content may be displayed when the native view is hidden and displayed. If the computer device renders the webpage view based on the loaded webpage data after the loading of the webpage data is completed, the rendering process may not be completed when the native view is hidden and displayed, and thus the displayed webpage content may be partial webpage content.

In a third possible implementation manner, after the loading of the webpage data is completed and the rendering of the webpage view based on the webpage data is completed, the native view is hidden and displayed.

After the rendering of the webpage view is finished, the native view is hidden and displayed, so that the computer equipment can display the complete webpage after the native view is hidden and displayed, and a user of the computer equipment can directly watch and operate without waiting.

For example, as shown in fig. 4, after a user triggers a web page display instruction, a native view and a web page view are created, multimedia data is loaded through the native view, a custom page is displayed, a web page is loaded through the web page view, and after the web page loading is completed, the native view is hidden and displayed, so that the user views the web page. Compared with the related art, in the webpage loading process, the computer equipment always displays the white screen, and the user-defined page is displayed in the application, so that the user is prevented from seeing the white screen for a long time, and the visual effect is improved.

According to the webpage display method, the native view is created on the upper layer of the webpage view, the native view is rendered based on the multimedia data, the native view does not need to be initialized, the native view can be directly rendered after the multimedia data are obtained, and the time of displaying the content of the screen by the terminal is advanced, so that before the webpage appears, the interface obtained by rendering the native view can be realized firstly, the user is prevented from seeing the white screen for a long time, the visual effect is improved, and the jumping rate of the webpage is reduced. Moreover, the loading processes of the webpage view and the native view are independent, so that the progress of webpage loading of the webpage view cannot be influenced by creating the native view and rendering the native view.

Fig. 5 is a schematic structural diagram of a web page display device according to an embodiment of the present application, and referring to fig. 5, the device includes:

the acquiring module 501 is configured to acquire a web page view and a native view, where the native view is located on an upper layer of the web page view;

a rendering module 502, configured to obtain multimedia data, and render the native view based on the multimedia data;

a loading module 503, configured to load webpage data of a webpage to be displayed based on the webpage view, and render the webpage view based on the loaded webpage data;

and the display module 504 is used for hiding and displaying the native view when the loading progress of the webpage meets the target condition.

As shown in fig. 6, in one possible implementation, the apparatus further includes:

a control module 505, configured to, when the native view is in a display state and an operation by a user is detected, control display content of the native view based on the operation;

the control module 505 is further configured to, when the native view is in the hidden display state and the operation of the user is detected, control the display content of the web page based on the operation.

In one possible implementation, the rendering module 502 includes:

the first obtaining unit 5021 is configured to obtain multimedia data corresponding to a preset loading duration of a web page according to the preset loading duration of the web page.

In a possible implementation manner, the first obtaining unit 5021 is configured to obtain first multimedia data when a preset loading duration of a webpage is smaller than a first time threshold;

the first obtaining unit 5021 is further configured to obtain second multimedia data when the preset loading duration of the webpage is greater than a first time threshold and less than a second time threshold;

the first obtaining unit 5021 is further configured to obtain third multimedia data when the preset loading duration of the webpage is greater than a second time threshold;

the loading duration of the first multimedia data, the second multimedia data and the third multimedia data is sequentially increased.

In one possible implementation, the rendering module 502 includes:

the second obtaining unit 5022 is configured to obtain multimedia data corresponding to the web page identifier according to the web page identifier of the web page and the corresponding relationship between the multimedia data and the web page identifier.

In one possible implementation, the rendering module 502 includes:

a third obtaining unit 5023, configured to obtain multimedia data from a local storage space when the multimedia data is locally stored;

a fourth acquiring unit 5024, configured to acquire multimedia data from the server when the multimedia data is not locally stored.

In one possible implementation, the display module 504 includes:

the first display unit 5041 is configured to hide and display the native view after the target data in the web page data is loaded; alternatively, the first and second electrodes may be,

the second display unit 5042 is configured to hide and display the native view after the webpage data is loaded; or the like, or a combination thereof,

the third display unit 5043 is configured to hide and display the native view when the loading of the web page data is completed and the rendering of the web page view based on the web page data is completed.

It should be noted that: in the web page display apparatus provided in the above embodiment, when displaying a web page, only the division of the above functional modules is taken as an example, and in practical applications, the above function distribution may be completed by different functional modules according to needs, that is, the internal structure of the computer device is divided into different functional modules to complete all or part of the above described functions. In addition, the embodiments of the web page display method provided by the above embodiments belong to the same concept, and specific implementation processes thereof are described in the embodiments of the method for details, which are not described herein again.

Fig. 7 shows a block diagram of a terminal 700 according to an exemplary embodiment of the present application. The terminal 700 may be: a smart phone, a tablet computer, an MP3 player (Moving Picture Experts Group Audio Layer III, motion video Experts compression standard Audio Layer 3), an MP4 player (Moving Picture Experts Group Audio Layer iv, motion video Experts compression standard Audio Layer 4), a notebook computer, or a desktop computer. Terminal 700 may also be referred to by other names such as user equipment, portable terminal, laptop terminal, desktop terminal, and so on.

In general, terminal 700 includes: a processor 701 and a memory 702.

The processor 701 may include one or more processing cores, such as a 4-core processor, an 8-core processor, and so on. The processor 701 may be implemented in at least one hardware form of a DSP (Digital Signal Processing), an FPGA (Field-Programmable Gate Array), and a PLA (Programmable Logic Array). The processor 701 may also include a main processor and a coprocessor, where the main processor is a processor for processing data in an awake state, and is also called a Central Processing Unit (CPU); a coprocessor is a low power processor for processing data in a standby state. In some embodiments, the processor 701 may be integrated with a GPU (Graphics Processing Unit) that is responsible for rendering and drawing the content that the display screen needs to display. In some embodiments, the processor 701 may further include an AI (Artificial Intelligence) processor for processing computing operations related to machine learning.

Memory 702 may include one or more computer-readable storage media, which may be non-transitory. Memory 702 may also include high-speed random access memory, as well as non-volatile memory, such as one or more magnetic disk storage devices, flash memory storage devices. In some embodiments, a non-transitory computer readable storage medium in memory 702 is used to store at least one instruction for execution by processor 701 to implement a web page display method provided by method embodiments herein.

In some embodiments, the terminal 700 may further optionally include: a peripheral interface 703 and at least one peripheral. The processor 701, the memory 702, and the peripheral interface 703 may be connected by bus or signal lines. Various peripheral devices may be connected to peripheral interface 703 via a bus, signal line, or circuit board. Specifically, the peripheral device includes: at least one of radio frequency circuitry 704, touch screen display 705, camera 706, audio circuitry 707, positioning components 708, and power source 709.

The peripheral interface 703 may be used to connect at least one peripheral related to I/O (Input/Output) to the processor 701 and the memory 702. In some embodiments, processor 701, memory 702, and peripheral interface 703 are integrated on the same chip or circuit board; in some other embodiments, any one or two of the processor 701, the memory 702, and the peripheral interface 703 may be implemented on a separate chip or circuit board, which is not limited in this embodiment.

The Radio Frequency circuit 704 is used for receiving and transmitting RF (Radio Frequency) signals, also called electromagnetic signals. The radio frequency circuitry 704 communicates with communication networks and other communication devices via electromagnetic signals. The rf circuit 704 converts an electrical signal into an electromagnetic signal to transmit, or converts a received electromagnetic signal into an electrical signal. Optionally, the radio frequency circuit 704 includes: an antenna system, an RF transceiver, one or more amplifiers, a tuner, an oscillator, a digital signal processor, a codec chipset, a subscriber identity module card, and so forth. The radio frequency circuitry 704 may communicate with other terminals via at least one wireless communication protocol. The wireless communication protocols include, but are not limited to: metropolitan area networks, various generation mobile communication networks (2G, 3G, 4G, and 5G), Wireless local area networks, and/or WiFi (Wireless Fidelity) networks. In some embodiments, the radio frequency circuit 704 may further include NFC (Near Field Communication) related circuits, which are not limited in this application.

The display screen 705 is used to display a UI (User Interface). The UI may include graphics, text, icons, video, and any combination thereof. When the display screen 705 is a touch display screen, the display screen 705 also has the ability to capture touch signals on or over the surface of the display screen 705. The touch signal may be input to the processor 701 as a control signal for processing. At this point, the display 705 may also be used to provide virtual buttons and/or a virtual keyboard, also referred to as soft buttons and/or a soft keyboard. In some embodiments, the display 705 may be one, providing the front panel of the terminal 700; in other embodiments, the display 705 can be at least two, respectively disposed on different surfaces of the terminal 700 or in a folded design; in still other embodiments, the display 705 may be a flexible display disposed on a curved surface or on a folded surface of the terminal 700. Even more, the display 705 may be arranged in a non-rectangular irregular pattern, i.e. a shaped screen. The Display 705 may be made of LCD (Liquid Crystal Display), OLED (Organic Light-Emitting Diode), or the like.

The camera assembly 706 is used to capture images or video. Optionally, camera assembly 706 includes a front camera and a rear camera. Generally, a front camera is disposed on a front panel of the terminal, and a rear camera is disposed on a rear surface of the terminal. In some embodiments, the number of the rear cameras is at least two, and each rear camera is any one of a main camera, a depth-of-field camera, a wide-angle camera and a telephoto camera, so that the main camera and the depth-of-field camera are fused to realize a background blurring function, and the main camera and the wide-angle camera are fused to realize panoramic shooting and VR (Virtual Reality) shooting functions or other fusion shooting functions. In some embodiments, camera assembly 706 may also include a flash. The flash lamp can be a monochrome temperature flash lamp or a bicolor temperature flash lamp. The double-color-temperature flash lamp is a combination of a warm-light flash lamp and a cold-light flash lamp, and can be used for light compensation at different color temperatures.

The audio circuitry 707 may include a microphone and a speaker. The microphone is used for collecting sound waves of a user and the environment, converting the sound waves into electric signals, and inputting the electric signals to the processor 701 for processing or inputting the electric signals to the radio frequency circuit 704 to realize voice communication. For the purpose of stereo sound collection or noise reduction, a plurality of microphones may be provided at different portions of the terminal 700. The microphone may also be an array microphone or an omni-directional pick-up microphone. The speaker is used to convert electrical signals from the processor 701 or the radio frequency circuit 704 into sound waves. The loudspeaker can be a traditional film loudspeaker or a piezoelectric ceramic loudspeaker. When the speaker is a piezoelectric ceramic speaker, the speaker can be used for purposes such as converting an electric signal into a sound wave audible to a human being, and converting the electric signal into a sound wave inaudible to the human being to measure a distance. In some embodiments, the audio circuitry 707 may also include a headphone jack.

The positioning component 708 is used to locate the current geographic position of the terminal 700 to implement navigation or LBS (location based Service). The positioning component 708 may be a positioning component based on the GPS (global positioning System) in the united states, the beidou System in china, the graves System in russia, or the galileo System in the european union.

Power supply 709 is provided to supply power to various components of terminal 700. The power source 709 may be alternating current, direct current, disposable batteries, or rechargeable batteries. When power source 709 includes a rechargeable battery, the rechargeable battery may support wired or wireless charging. The rechargeable battery may also be used to support fast charge technology.

In some embodiments, terminal 700 also includes one or more sensors 710. The one or more sensors 710 include, but are not limited to: acceleration sensor 711, gyro sensor 712, pressure sensor 713, fingerprint sensor 714, optical sensor 715, and proximity sensor 716.

The acceleration sensor 711 can detect the magnitude of acceleration on three coordinate axes of the coordinate system established with the terminal 700. For example, the acceleration sensor 711 may be used to detect components of the gravitational acceleration in three coordinate axes. The processor 701 may control the touch screen 705 to display the user interface in a landscape view or a portrait view according to the gravitational acceleration signal collected by the acceleration sensor 711. The acceleration sensor 711 may also be used for acquisition of motion data of a game or a user.

The gyro sensor 712 may detect a body direction and a rotation angle of the terminal 700, and the gyro sensor 712 may cooperate with the acceleration sensor 711 to acquire a 3D motion of the terminal 700 by the user. From the data collected by the gyro sensor 712, the processor 701 may implement the following functions: motion sensing (e.g., changing the UI according to a user's tilt operation), image stabilization at the time of shooting, game control, and inertial navigation.

Pressure sensors 713 may be disposed on a side bezel of terminal 700 and/or an underlying layer of touch display 705. When the pressure sensor 713 is disposed at a side frame of the terminal 700, a user's grip signal on the terminal 700 may be detected, and left-right hand recognition or shortcut operation may be performed by the processor 701 according to the grip signal collected by the pressure sensor 713. When the pressure sensor 713 is disposed at a lower layer of the touch display 705, the processor 701 controls the operability control on the UI interface according to the pressure operation of the user on the touch display 705. The operability control comprises at least one of a button control, a scroll bar control, an icon control, and a menu control.

The fingerprint sensor 714 is used for collecting a fingerprint of the user, and the processor 701 identifies the identity of the user according to the fingerprint collected by the fingerprint sensor 714, or the fingerprint sensor 714 identifies the identity of the user according to the collected fingerprint. Upon identifying that the user's identity is a trusted identity, the processor 701 authorizes the user to perform relevant sensitive operations including unlocking the screen, viewing encrypted information, downloading software, paying, changing settings, and the like. The fingerprint sensor 714 may be disposed on the front, back, or side of the terminal 700. When a physical button or a vendor Logo is provided on the terminal 700, the fingerprint sensor 714 may be integrated with the physical button or the vendor Logo.

The optical sensor 715 is used to collect the ambient light intensity. In one embodiment, the processor 701 may control the display brightness of the touch display 705 based on the ambient light intensity collected by the optical sensor 715. Specifically, when the ambient light intensity is higher, the display brightness of the touch display screen 705 is increased; when the ambient light intensity is low, the display brightness of the touch display 705 is turned down. In another embodiment, processor 701 may also dynamically adjust the shooting parameters of camera assembly 706 based on the ambient light intensity collected by optical sensor 715.

A proximity sensor 716, also referred to as a distance sensor, is typically disposed on a front panel of the terminal 700. The proximity sensor 716 is used to collect the distance between the user and the front surface of the terminal 700. In one embodiment, when the proximity sensor 716 detects that the distance between the user and the front surface of the terminal 700 gradually decreases, the processor 701 controls the touch display 705 to switch from the bright screen state to the dark screen state; when the proximity sensor 716 detects that the distance between the user and the front surface of the terminal 700 gradually becomes larger, the processor 701 controls the touch display 705 to switch from the breath screen state to the bright screen state.

Those skilled in the art will appreciate that the configuration shown in fig. 7 is not intended to be limiting of terminal 700 and may include more or fewer components than those shown, or some components may be combined, or a different arrangement of components may be used.

Fig. 8 is a schematic structural diagram of a server according to an embodiment of the present application, where the server 1000 may generate a relatively large difference due to different configurations or performances, and may include one or more processors (CPUs) 801 and one or more memories 802, where the memory 802 stores at least one instruction, and the at least one instruction is loaded and executed by the processors 801 to implement the methods provided by the foregoing method embodiments. Certainly, the server may further have components such as a wired or wireless network interface, a keyboard, and an input/output interface, so as to perform input and output, and the server may further include other components for implementing the functions of the device, which is not described herein again.

In an exemplary embodiment, a computer-readable storage medium, such as a memory, including instructions executable by a processor in a terminal to perform the web page display method in the above-described embodiments is also provided. For example, the computer readable storage medium may be a ROM, a Random Access Memory (RAM), a CD-ROM, a magnetic tape, a floppy disk, an optical data storage device, and the like.

In an exemplary embodiment, there is also provided a computer program comprising at least one instruction loaded and executed by a processor to implement the web page display method as in the above embodiments.

It will be understood by those skilled in the art that all or part of the steps for implementing the above embodiments may be implemented by hardware, or may be implemented by a program instructing relevant hardware, and the program may be stored in a computer-readable storage medium, and the above-mentioned storage medium may be a read-only memory, a magnetic disk or an optical disk, etc.

The above description is only exemplary of the present application and should not be taken as limiting the present application, as any modification, equivalent replacement, or improvement made within the spirit and principle of the present application should be included in the protection scope of the present application.

Claims

1. A method for displaying a web page, the method comprising:

2. The method of claim 1, further comprising:

3. The method of claim 1, wherein the obtaining the multimedia data comprises:

4. The method according to claim 3, wherein the obtaining multimedia data corresponding to the preset loading duration of the web page according to the preset loading duration of the web page comprises:

5. The method of claim 4, wherein the first multimedia data is animation data, the second multimedia data is advertisement data, and the third multimedia data is game data.

6. The method of claim 1, wherein the obtaining multimedia data comprises:

7. The method of claim 1, wherein the obtaining multimedia data comprises:

8. The method according to claim 1, wherein hiding and displaying the native view when the loading progress of the webpage meets a target condition comprises:

9. A web page display apparatus, characterized in that the apparatus comprises:

the acquisition module is used for acquiring a webpage view and a native view, wherein the native view is positioned on the upper layer of the webpage view;

10. The apparatus of claim 9, further comprising:

11. The apparatus of claim 9, wherein the rendering module comprises:

12. The apparatus according to claim 11, wherein the first obtaining unit is configured to obtain first multimedia data when a preset loading duration of the web page is smaller than a first time threshold;

13. The apparatus of claim 12, wherein the first multimedia data is animation data, the second multimedia data is advertisement data, and the third multimedia data is game data.

14. A computer device comprising one or more processors and one or more memories having stored therein at least one instruction that is loaded and executed by the one or more processors to perform operations performed by the web page display method of any one of claims 1 to 8.

15. A computer-readable storage medium having stored therein at least one instruction, which is loaded and executed by a processor to perform operations performed by the web page display method according to any one of claims 1 to 8.