Page loading method and related device

Abstract

The invention relates to the technical field of computers, and provides a page loading method and a related device, which are used for improving the page rendering effect, and the method comprises the following steps: for a to-be-rendered target interface, a client sends a data acquisition request to a server, and meanwhile, acquires local interface data from a local storage area; and if the local interface data is stored in the local storage area, the client quickly obtains and renders the local interface data from the local storage area. And if the local interface data is not stored in the local storage area, the client directly performs interface rendering according to the new edition interface data, so that even if the interface data of the target interface is not stored locally, the problem of white screen does not occur, and the stability of page loading is ensured.

Description

Background Art

[0002] With the development of computer technology and the widespread application of the Internet, more and more objects obtain and transmit various types of data through global wide area network (web) pages, for example, obtain and transmit images, audio data, video data and other data through web pages.

[0003] In related technologies, in order to improve the page rendering speed, when the target object logs in for the first time, the client obtains all interface data of the target object through the server and stores all interface data in the local database. In this way, when the target object triggers certain operations, the corresponding interface data can be quickly obtained from the local database for rendering.

[0004] However, the storage capacity of the local database is limited. If the full amount of interface data is stored in the local database, it will increase the front-end storage pressure and consume too much memory resources. At the same time, due to the high data complexity and untimely data updates, it is more difficult to update the full amount of interface data, resulting in inaccurate and untimely interface data displayed to the target object in the client, affecting the page rendering effect. Summary of the invention

[0005] The embodiments of the present application provide a page loading method and related devices to reduce front-end storage pressure and improve page rendering effects.

[0006] In a first aspect, an embodiment of the present application provides a page loading method, comprising:

[0007] In response to a trigger operation of a target object on a target interface, a data acquisition request for acquiring interface data of the target interface is sent to a server, local interface data is acquired from a local storage area, and new version interface data returned by the server is received;

[0008] If the local interface data is stored in the local storage area, the target interface is rendered according to the local interface data, and the target interface is updated based on the new version interface data;

[0009] If the local interface data is not stored in the local storage area, the target interface is rendered according to the new version interface data, and the new version interface data is stored in the local storage area.

[0010] In a second aspect, an embodiment of the present application provides a page loading device, including:

[0011] A data request unit, configured to send a data acquisition request for acquiring interface data of the target interface to a server in response to a trigger operation of a target object on the target interface, acquire local interface data from a local storage area, and receive new version interface data returned by the server;

[0012] A first processing unit, configured to render the target interface according to the local interface data if the local interface data is stored in the local storage area, and update the target interface based on the new version interface data;

[0013] The second processing unit is configured to render the target interface according to the new version interface data and store the new version interface data in the local storage area if the local interface data is not stored in the local storage area.

[0014] As a possible implementation manner, the target interface includes multiple sub-interfaces, and when the data acquisition request for acquiring the interface data of the target interface is sent to the server, the data request unit is specifically used to:

[0015] Sending a data acquisition request carrying the object identifier of the target object and the interface identifier of the target interface to the server;

[0016] When receiving the new version interface data returned by the server, the data request unit is specifically used to:

[0017] The new version interface data returned by the server is received, wherein the new version interface data includes: interface data of each of the plurality of sub-interfaces that meets a preset quantity condition.

[0018] As a possible implementation method, the interface data of a sub-interface that meets the preset quantity conditions includes:

[0019] Interface data of a set amount of data in the interface data of the one sub-interface; or

[0020] The interface data of the one sub-interface includes the interface data of the amount of data associated with the interface size of the client.

[0021] As a possible implementation, the device further includes a data updating unit, which is used to:

[0022] Creating a two-way communication channel between the client and the server;

[0023] During the operation of the client, when it is detected through the two-way communication channel that there is data update on the target interface, the updated data of the target interface is obtained from the server, and the data in the local storage area is updated according to the updated data;

[0024] Based on the data type of the update data, the update data is preprocessed using a data preprocessing operation set for the data type to obtain the preprocessed update data, and the preprocessed update data is rendered in the target interface.

[0025] As a possible implementation manner, based on the data type of the update data, the data preprocessing operation set for the data type is used to preprocess the update data, and when the preprocessed update data is obtained, the data updating unit is specifically used to:

[0026] If the update data includes reference data of a historical conversation message in the target interface, the historical conversation message is acquired, and the reference data and the historical conversation message are combined to obtain the pre-processed update data;

[0027] If the update data includes a picture identifier of a picture, the picture is acquired according to the picture identifier, and the picture is used as the pre-processed update data;

[0028] If the update data includes data to be converted in a first data format not supported by the client, the data to be converted is converted into target converted data in a second data format supported by the client, and the target converted data is used as the preprocessed update data.

[0029] As a possible implementation, the target interface includes multiple sub-interfaces, and during the operation of the client, when it is detected through the two-way communication channel that there is data update on the target interface, the updated data of the target interface is obtained from the server, and the data in the local storage area is updated according to the updated data, the data updating unit is specifically used to:

[0030] If, during the operation of the client, data update of the target interface is detected through the two-way communication channel, and the number of sub-interfaces exceeds a set threshold, the following operations are performed for the multiple sub-interfaces respectively:

[0031] When the target object triggers a sub-interface, update data of the sub-interface is obtained through the server, and data in the local storage area is updated according to the update data of the sub-interface.

[0032] As a possible implementation, the device further includes a data updating unit, which is used to:

[0033] According to a set data acquisition cycle, the incremental data of the target interface is obtained from the server, wherein the incremental data includes the updated data of the target interface during the data acquisition cycle, and based on the incremental data of the target interface, the local interface data of the target interface stored in the local storage area is updated; or

[0034] When data update of the target interface is detected, the target time range is determined according to the data time of the local interface data record in the local storage area, and the incremental data of the target interface corresponding to the target time range is obtained through the server, and based on the incremental data of the target interface, the local interface data of the target interface stored in the local storage area is updated.

[0035] As a possible implementation, the target interface includes multiple sub-interfaces; then in response to the triggering operation of the target object on the target interface, a data acquisition request for acquiring interface data of the target interface is sent to the server, and local interface data is acquired from the local storage area, and new version interface data returned by the server is received. The data request unit is specifically used to:

[0036] In response to the triggering operation of the target object on one of the multiple sub-interfaces, a data acquisition request for obtaining the interface data of the sub-interface is sent to the server, and the local interface data corresponding to the sub-interface is obtained from the local storage area, and the new version of the interface data corresponding to the sub-interface returned by the server is received.

[0037] In a third aspect, an embodiment of the present application provides an electronic device, comprising a processor and a memory, wherein the memory stores a computer program, and when the computer program is executed by the processor, the processor executes the steps of the above method.

[0038] In a fourth aspect, an embodiment of the present application provides a computer-readable storage medium, which includes a computer program. When the computer program is run on an electronic device, the computer program is used to enable the electronic device to perform the steps of any of the above methods.

[0039] In a fifth aspect, an embodiment of the present application provides a computer program product, which includes a computer program, and the computer program is stored in a computer-readable storage medium. The processor of an electronic device reads and executes the computer program from the computer-readable storage medium, so that the electronic device performs the steps of any of the above-mentioned methods.

[0040] In the embodiment of the present application, when the client needs to render the target interface, it sends a data acquisition request to the server for acquiring the interface data of the target interface, and at the same time, acquires the local interface data from the local storage area. In the case where the local interface data is stored in the local storage area, the client acquires the local interface data from the local storage area, and the data acquisition speed is faster than acquiring the new version of the interface data from the server, thereby improving the rendering efficiency. Further, after acquiring the new version of the interface data stored in the server, the local interface data is updated according to the new version of the interface data, which can ensure that the data stored in the local storage area is the latest data, thereby ensuring the consistency of the page data in the local and server sides. In the case where the local storage area does not store the local interface data, after acquiring the new version of the interface data stored in the server, the interface rendering is performed directly according to the new version of the interface data, so that even if the corresponding interface data is not stored locally, it will not affect the display of the target interface, and the client will not appear a white screen, thereby ensuring the stability of the page loading. In addition, since the interface data of the target interface is stored in the local storage area when the target interface needs to be rendered, the pressure on the front-end storage can be reduced compared to the full storage.

[0041] Other features and advantages of the present application will be described in the following description, and partly become apparent from the description, or be understood by practicing the present application. The purpose and other advantages of the present application can be realized and obtained by the structures specifically pointed out in the written description, claims, and drawings. BRIEF DESCRIPTION OF THE DRAWINGS

[0042] The drawings described herein are used to provide a further understanding of the present application and constitute a part of the present application. The illustrative embodiments of the present application and their descriptions are used to explain the present application and do not constitute an improper limitation on the present application. In the drawings:

[0043] Figure 1 A schematic diagram of an application scenario provided in an embodiment of the present application;

[0044] Figure 2 A schematic diagram of a page loading method provided in an embodiment of the present application;

[0045] Figure 3 A schematic diagram of a target interface provided in an embodiment of the present application;

[0046] Figure 4 A schematic diagram of a data storage format provided in an embodiment of the present application;

[0047] Figure 5 A schematic diagram of a target interface before and after data update provided in an embodiment of the present application;

[0048] Figure 6 A schematic diagram of interaction between a client and a server provided in an embodiment of the present application;

[0049] Figure 7 A schematic diagram of a target interface in a web version IM client provided in an embodiment of the present application;

[0050] Fig. 8A A schematic diagram of a first target interface in a web version office IM client provided in an embodiment of the present application;

[0051] Figure 8B A schematic diagram of a second target interface in a web version office IM client provided in an embodiment of the present application;

[0052] Figure 8C This is a schematic diagram of a third target interface in a web version office IM client provided in an embodiment of the present application;

[0053] Fig. 9 A schematic diagram of a target interface in a web version forum client provided in an embodiment of the present application;

[0054] Fig.10 A schematic diagram of the structure of a page loading device provided in an embodiment of the present application;

[0055] Fig.11 A schematic diagram of the structure of an electronic device provided in an embodiment of the present application. DETAILED DESCRIPTION

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

[0057] With the development of computer technology and the widespread application of the Internet, more and more objects obtain and transmit various types of data through web pages, for example, obtain and transmit images, audio data, video data and other data through web pages.

[0058] In related technologies, in order to improve the page rendering speed, when the target object logs in for the first time, the client obtains all interface data of the target object through the server and stores all interface data in the local database. In this way, when the target object triggers certain operations, the corresponding interface data can be quickly obtained from the local database for rendering.

[0059] However, the storage capacity of the local database is limited. If the full amount of interface data is stored in the local database, it will increase the front-end storage pressure and consume too much memory resources. At the same time, due to the high data complexity and untimely data updates, it is more difficult to update the full amount of interface data, resulting in inaccurate and untimely interface data displayed to the target object in the client, affecting the page rendering effect.

[0060] In an embodiment of the present application, in response to a trigger operation of a target object on a target interface, the client sends a data acquisition request to the server for acquiring interface data of the target interface, acquires local interface data from a local storage area, and receives new version interface data returned by the server. In the case where local interface data is stored in the local storage area, the speed at which the client acquires local interface data from the local storage area is faster than the speed at which the client acquires new version interface data from the server. Therefore, after acquiring the local interface data, rendering is performed according to the local interface data to ensure rendering efficiency. After acquiring the new version interface data stored in the server, the local interface data is updated according to the new version interface data to ensure that the data stored in the local storage area is the latest data, thereby ensuring the consistency of the page data in the local and server sides. If the local storage area does not store local interface data, after acquiring the new version interface data stored in the server, the interface rendering is performed directly according to the new version interface data. In this way, even if the corresponding interface data is not stored locally, it will not affect the display of the target interface, and a white screen will not appear in the client, thereby ensuring the stability of page loading. In addition, since the interface data of the target interface is stored in the local storage area when the target interface needs to be rendered, the front-end storage pressure can be reduced compared to full storage.

[0061] See also Figure 1 As shown, it is a schematic diagram of an application scenario provided in an embodiment of the present application. The application scenario includes a terminal device 110 and a server 120. The number of terminal devices 110 can be one or more. The number of servers 120 can also be one or more. The present application does not specifically limit the number of terminal devices 110 and servers 120.

[0062] In the embodiment of the present application, the terminal device 110 can be a smart phone, a tablet computer, a laptop computer, a desktop computer, a smart speaker, a smart watch, an Internet of Things device, a smart home appliance, a vehicle terminal, an aircraft, etc., but is not limited thereto. The terminal device 110 supports a web client, and the server 120 is a backend server corresponding to the web client. The web client includes but is not limited to an instant messaging (IM) client, a social client, and other clients that use WebSocket for updates.

[0063] Server 120 can be an independent physical server, or a server cluster or distributed system composed of multiple physical servers. It can also be a cloud server that provides basic cloud computing services such as cloud services, cloud databases, cloud computing, cloud functions, cloud storage, network services, cloud communications, middleware services, domain name services, security services, content delivery networks (CDN), as well as big data and artificial intelligence platforms.

[0064] The terminal device 110 and the server 120 may be connected directly or indirectly via wired or wireless communication, which is not limited in this application.

[0065] In the embodiment of the present application, in response to the trigger operation of the target object on the target interface, the terminal device 110 sends a data acquisition request for acquiring the interface data of the target interface to the server 120, acquires the local interface data from the local storage area, and receives the new version interface data returned by the server 120. If the local interface data is stored in the local storage area, the target interface is rendered according to the local interface data, and the target interface is updated based on the new version interface data; if the local interface data is not stored in the local storage area, the target interface is rendered according to the new version interface data, and the new version interface data is stored in the local storage area.

[0066] See also Figure 2 As shown, it is a flow chart of a page loading method provided in an embodiment of the present application, which is applied to a client. The specific flow of the method is as follows:

[0067] S201. In response to a trigger operation of a target object on a target interface, the client sends a data acquisition request to a server for acquiring interface data of the target interface, acquires local interface data from a local storage area, and receives new version interface data returned by the server.

[0068] Among them, the target interface can be any one of the interfaces contained in the client. As a possible implementation method, when the target object starts the client, the homepage of the client is used as the target interface, the target object is determined to trigger the homepage, and a data acquisition request for obtaining the interface data of the homepage is sent to the server, and at the same time, the local interface data is obtained from the local storage area. As another possible implementation method, when the target object clicks on the jump component in a certain interface, the interface pointed to by the jump component is used as the target interface, the target object is determined to trigger the interface pointed to by the jump component, and a data acquisition request for obtaining the interface data of the interface is sent to the server, and at the same time, the local interface data is obtained from the local storage area.

[0069] The interface data includes various rendering contents that need to be rendered in the target interface. The rendering contents include one or more of text, image, and video, but are not limited thereto.

[0070] In some embodiments, the target interface may include multiple sub-interfaces, each of which includes various rendering contents. Exemplarily, the target interface is composed of left and right areas, the left area includes an interface identification component corresponding to each sub-interface, each interface identification component has a trigger function, and when the target object clicks on the interface identification component of a sub-interface, the corresponding sub-interface is presented in the right area.

[0071] See also Figure 3 As shown, it is a schematic diagram of a target interface provided in an embodiment of the present application. In the left area of ​​the target interface, there are interface identification components corresponding to sub-interface 1, sub-interface 2, and sub-interface 3 respectively. When the target object clicks the interface identification component corresponding to sub-interface 3, sub-interface 3 is presented in the right area of ​​the target interface. Sub-interface 3 includes rendering content 1, rendering content 2, rendering content 3 and other rendering contents.

[0072] After the target object triggers the target interface, the client sends a data acquisition request to the server, and the data acquisition request is used to obtain the interface data of the target interface from the server. The data acquisition request may carry the object identifier of the target object and the interface identifier of the target interface, wherein the object identifier of the target object is used to uniquely identify the target object, and the interface identifier of the target interface is used to uniquely identify the target interface in the client. Exemplarily, the server obtains the client data of the target object based on the object identifier of the target object, and the client data contains the interface data of each interface. The server obtains and returns the interface data of the target interface to the client from the client data based on the interface identifier of the target interface. In the embodiment of the present application, in order to facilitate distinction, the interface data of the target interface returned by the server is referred to as the new version of the interface data.

[0073] For example, suppose, Figure 3 The interface shown is the client homepage. When the target object starts the client, the client will Figure 3 The home page shown is used as the target interface, and in response to the triggering operation of the target object on the target interface, a data acquisition request carrying the object identifier of the target object and the interface identifier of the target interface is sent to the server.

[0074] S202, the client determines whether local interface data is stored in the local storage area, if so, executes S203, otherwise executes S204.

[0075] In the embodiment of the present application, after the target object triggers the target interface, the client not only sends a data acquisition request to the server, but also acquires local interface data from the local storage area.

[0076] Among them, the local storage area can use any one of IndexedDB, Web SQL Database, LocalStorage, and SessionStorage, but is not limited to them. Among them, IndexedDB is a non-relational database built into the browser, which is used to store a large amount of structured data on the client. It supports transaction operations and indexes and is suitable for applications that require offline storage and high-performance queries; Web SQL Database is a browser-built-in database based on Structure Query Language (SQL), which uses SQL syntax similar to traditional relational databases for operation; LocalStorage is a key-value pair storage system that can store a small amount of data in the browser. LocalStorage has a simple and easy-to-use application program interface (API), but the storage capacity is limited and can usually only store a few megabytes (MB) of data; SessionStorage is similar to LocalStorage, but the data stored in it is only valid during the current session. When the target object closes the browser tab or window, the data will be cleared. In actual application, based on the considerations of loading performance, real-time performance, storage duration, and data size during page loading, IndexedDB database is usually used for local storage.

[0077] As a possible implementation manner, when the target object enters the client for the first time, the client initializes the local storage area.

[0078] In the embodiment of the present application, the interface data of the target interface stored in the local storage area is referred to as local interface data.

[0079] As a possible implementation, the data identifier of the target interface and the interface data of the target interface are stored in association in the local storage area, wherein the data identifier is a unique identifier of the interface data of the target interface in the local storage area. In order to avoid data reading confusion caused by multiple objects logging in to the same client one after another, the data identifier can be represented by the object identifier of the target object and the interface identifier of the sub-interface.

[0080] Taking the IndexedDB database as an example, the IndexedDB database supports storing data in the JavaScript Object Notation (JSON) format.

[0081] In the case where the target interface includes sub-interfaces, for each sub-interface existing in the target interface, the interface data of each sub-interface can be stored in a data table, and the table attributes of the data table include: data identification and corresponding interface data.

[0082] See also Figure 4 As shown, it is a schematic diagram of a data storage format in a local storage area provided in an embodiment of the present application. The table attributes of the table corresponding to the target interface include: serial number (Identity Document, ID), key (Key), value (Value). Among them, ID is a self-incrementing ID, which is used to represent a piece of data; Key is a data identifier, and the data type of Key is a string, which is a unique value used to distinguish each piece of data in IndexedDB. The Key value is generated according to the object identifier of the target object and the interface identifier of the sub-interface; Value is interface data, and the data type is the Object type in JavaScript, which is stored in JSON format. This field is used to store various rendering contents that need to be rendered in the corresponding sub-interface.

[0083] by Figure 3 Take the target interface shown as an example. Figure 4 In the table shown, each row in the table represents the data identifier of a sub-interface and the corresponding interface data. In the first row of data, the key value of sub-interface 1 is Uer1+page1, wherein Uer1 is the object identifier of the target object, page1 is the interface identifier of sub-interface 1, and the Value value of sub-interface 1 is the interface data of sub-interface 1; in the second row of data, the key value of sub-interface 2 is Uer1+page2, wherein Uer1 is the object identifier of the target object, page2 is the interface identifier of sub-interface 2, and the Value value of sub-interface 2 is the interface data of sub-interface 2; in the third row of data, the key value of sub-interface 3 is Uer1+page3, wherein Uer1 is the object identifier of the target object, page3 is the interface identifier of sub-interface 3, and the Value value of sub-interface 3 is the interface data of sub-interface 3. The interface data of sub-interface 3 includes rendering content 1, rendering content 2, rendering content 3 and other rendering contents. Similarly, the table stores the data identifiers and corresponding interface data of sub-interfaces 1 to 8 contained in the target interface.

[0084] S203: The client renders the target interface according to the local interface data, and updates the target interface based on the new version interface data.

[0085] In an embodiment of the present application, when local interface data is stored in the local storage area, the speed at which the client obtains the local interface data from the local storage area is faster than the speed at which the client obtains the new version of the interface data from the server. Therefore, after obtaining the local interface data, rendering is performed according to the local interface data to ensure rendering efficiency. After obtaining the new version of the interface data stored in the server, the local interface data is updated according to the new version of the interface data to ensure that the data stored in the local storage area is the latest data, thereby ensuring the consistency of the page data in the local and server ends.

[0086] It should be noted that in the embodiment of the present application, regardless of whether the new version interface data is consistent with the local interface data, the new version interface data can be directly used to replace the local interface data.

[0087] S204: The client renders the target interface according to the new version interface data, and stores the new version interface data in the local storage area.

[0088] In an embodiment of the present application, if the local storage area does not store local interface data, after obtaining the new version of the interface data stored in the server, the interface rendering is directly performed according to the new version of the interface data. In this way, even if the corresponding interface data is not stored locally, it will not affect the display of the target interface, and no white screen will appear in the client, thereby ensuring the stability of page loading.

[0089] In some embodiments, the target interface includes multiple sub-interfaces, and the data acquisition request sent by the client to the server carries the object identifier of the target object and the interface identifier of the target interface, so that the server returns the new version interface data according to the object identifier of the target object and the interface identifier of the target interface. The new version interface data received by the client includes: the interface data of each of the multiple sub-interfaces that meets the preset quantity condition.

[0090] That is to say, when the target interface has multiple sub-interfaces, for each sub-interface, the client obtains part of the corresponding interface data from the server.

[0091] Among them, the interface data of a sub-interface that meets the preset data display quantity conditions may refer to the interface data of the set data quantity in the interface data of the sub-interface, or may refer to the interface data of the data quantity associated with the interface size of the client in the interface data of the sub-interface. As a possible implementation method, when the client sends the object identifier of the target object and the interface identifier of the target interface to the server, it also provides its own client information to the server at the same time. In this way, the server can determine the data quantity associated with the interface size of the client based on the interface size of the client provided by the client information, combined with the preset association relationship between different interface sizes and data quantities, and then select part of the interface data corresponding to the data quantity associated with the interface size of the client from all the interface data of the target interface, and return the selected part of the interface data to the client. Among them, the client information can be information that can provide interface size information, such as the client version number and the device model of the terminal device, but is not limited to this.

[0092] For example, still Figure 3 For example, the data acquisition request sent by the client to the server carries the interface identifier of the target interface and the object identifier of the target object. The object identifier of the target object is the object identifier Uer1 of the account Zhang San, and the interface identifier of the target interface is the interface identifier of the home page. The server obtains and returns the interface data of the target interface to the client based on the received object identifier of the target object and the interface identifier of the target interface. The interface data of the target interface includes part of the interface data corresponding to each of the sub-interfaces 1 to 8. Part of the interface data refers to the first 10 pieces of interface data in the corresponding interface data.

[0093] Through the above implementation method, compared with the full transmission of the interface data of the target interface, the amount of data transmitted can be reduced, thereby improving the transmission efficiency, and then improving the page loading efficiency and enhancing the user experience of the target object.

[0094] In some embodiments, the client may also create a two-way communication channel between the client and the server, and the two-way communication channel is used to support two-way communication between the client and the server. In the embodiment of the present application, during the operation of the client, when the client detects that there is data update in the target interface through the two-way communication channel, the updated data of the target interface is obtained from the server, and then, based on the data type of the updated data, the data preprocessing operation set for the data type is used to preprocess the updated data, obtain the preprocessed updated data, and render the preprocessed updated data in the target interface.

[0095] In the embodiment of the present application, the two-way communication channel can adopt but is not limited to WebSocket. WebSocket is a protocol for full-duplex communication on a single TCP connection, which provides a real-time two-way communication channel and can be used to transfer data between the client and the server. The characteristics of WebSocket are low latency, high efficiency, and the server can actively push messages to the client.

[0096] When there is data update on the target interface, the server can notify the client through WebSocket. When the client receives the data update message transmitted through WebSocket, it determines that there is data update on the target interface.

[0097] As a possible implementation method, the client can create a WebWorker thread from the main thread. The WebWorker thread is a JavaScript script running in the background, which can perform parallel processing and execution tasks in the web browser without blocking the operation of the main thread. The WebWorker thread can be created using the Worker object and communicate with the main thread through message passing.

[0098] If WebSocket pushes a data update message to the main thread, the main thread notifies the WebWorker thread through postMessage. After the WebWorker thread receives the data operation notification from the main thread, it first pre-processes the updated data, and then stores the pre-processed updated data in the local storage area. postMessage is a method defined in the HyperText Markup Language 5 (HTML5) standard for secure cross-domain communication between different documents or browser contexts. postMessage allows a window or Worker to send messages to another window or Worker, and can pass arbitrary data.

[0099] As a possible implementation method, during data preprocessing, there are but are not limited to the following possible processing methods depending on the data type:

[0100] Method 1: If the update data includes reference data of a historical session message in the target interface, a historical session message is obtained, and the reference data and the historical session message are combined to obtain the pre-processed update data.

[0101] The referenced data has a historical session message that references it. When rendering, not only the referenced data itself but also the historical session message that references it needs to be rendered. Therefore, when the referenced data exists, it is necessary to obtain the historical session message that the referenced data references before rendering the referenced data.

[0102] The referenced historical session data may be requested from the server or stored in the local storage area. If the referenced historical session data is not stored in the local storage area, the referenced historical session data is obtained from the server. If the referenced historical session data is stored in the local storage area, the referenced historical session data stored in the local storage area is obtained. For example, each historical session message has a corresponding message identifier. The client can send a message identifier of the historical session message to the server.

[0103] For example, the session message "tomorrow" refers to the session message "when are you free", so the client obtains the session message "when are you free", and combines the session message "tomorrow" and the referenced session message "when are you free" to obtain the pre-processed update data.

[0104] Method 2: If the update data includes a picture identifier of a picture, the picture is obtained according to the picture identifier, and the picture is used as the pre-processed update data. The picture identifier may be, but is not limited to, a storage address of the picture.

[0105] In the embodiment of the present application, if the update data contains pictures, in order to improve the rendering speed, a request to obtain the pictures can be made in advance. In this way, when rendering, the pictures can be rendered directly in the interface without waiting for the pictures to be downloaded.

[0106] Mode three: if the update data includes data to be converted in a first data format not supported by the client, the data to be converted is converted into target converted data in a second data format supported by the client, and the target converted data is used as the preprocessed update data.

[0107] The data format of some data in the update data may not be suitable for direct use in a web browser. In the embodiment of the present application, the data format that is not suitable for direct use in a web browser is referred to as a data format that is not supported by the client, and the data in the update data that belongs to this data format is referred to as data to be converted. Correspondingly, the data format that is suitable for direct use in a web browser is referred to as a second data format supported by the client. Exemplarily, the first data format may be a format such as C++, and the second data format may be JavaScript.

[0108] In an embodiment of the present application, data to be converted in a first data format that is not supported by the client is converted in advance into a second data format that is more suitable for front-end use and rendering, thereby avoiding rendering errors caused by incorrect data format during rendering, thereby improving rendering efficiency.

[0109] In some embodiments, in order to reduce the request pressure on the server side, a caching mechanism can be used in the embodiments of the present application to reduce the client's requests to the server. Specifically, when the client receives the new version of the interface data from the server, the new version of the interface data is cached in the local storage area of ​​the front end. In this way, when the interface data of the target interface needs to be obtained next time, the client can read the interface data of the target interface from the local storage area, thereby quickly obtaining the interface data of the target interface, while reducing requests to the server and reducing the request pressure on the server side.

[0110] In some embodiments, considering that the cached data may be outdated, in the embodiments of the present application, the cached data can also be updated regularly. Specifically, as a possible implementation method, the client can periodically update the cached data according to the set cache update interval. As another possible implementation method, in order to ensure the validity of the data, the client can also update the cached data according to the updated data returned by the server when it detects that there is a data update on the target interface through a two-way communication channel. Of course, the client can also request the server to update the data each time the target object enters the client, and update the cached data according to the updated data obtained.

[0111] As a possible implementation method, in order to reduce the amount of data transmission, when the client detects that there is a data update on the target interface through a two-way communication channel, if the update data contains interface data of multiple sub-interfaces, and the number of multiple sub-interfaces exceeds a set threshold, then when the target object triggers one of the sub-interfaces among the multiple interfaces, the client can obtain the updated data of the sub-interface through the server, and update the cached data according to the updated data of the sub-interface.

[0112] In some embodiments, to ensure the validity of the data stored in the local storage area, as a possible implementation method, if data update of the target interface is detected through the two-way communication channel, the local interface data stored in the local storage area is updated according to the updated data returned by the server.

[0113] Considering that when there are multiple sub-interfaces in the target interface, the amount of data transmission may be large, in the embodiment of the present application, if data update of the target interface is detected through the two-way communication channel, the client can also determine whether the number of sub-interfaces exceeds the preset number threshold. If the amount of data in the sub-interface exceeds the preset number threshold, then the client performs the following operations on the multiple sub-interfaces respectively:

[0114] When the target object triggers a sub-interface, the client obtains the updated data of the sub-interface through the server, and updates the data in the local storage area according to the updated data of the sub-interface.

[0115] That is to say, the client updates the interface data of the opened sub-interface only when the target object opens a sub-interface. In this way, when there are a large number of sub-interfaces in the target interface of the target object, the amount of transmitted data can be effectively reduced.

[0116] For example, see Figure 5 As shown in the figure, it is assumed that the preset number threshold is 5, the client obtains the data update message through WebSocket, and there are 8 sub-interfaces in the target interface. Figure 5 As shown, before the data is updated, sub-interface 1 contains rendering content 1 to rendering content 5, wherein rendering content 5 may be a message sent by the session object. After a certain period of time, the session object withdraws the message. When the target object triggers sub-interface 1, the client obtains the updated data of sub-interface 1 through the server, and the detailed data is used to withdraw the message corresponding to rendering content 5 in sub-interface 1, and updates the data in the local storage area according to the updated data of sub-interface 1. After the target interface is updated according to the updated data, the rendering content 5 in the target interface is updated to rendering content 5', and rendering content 5' may be a prompt message for prompting the message to be withdrawn. Similarly, when the target object triggers other sub-interfaces, the client obtains the updated data of the triggered sub-interface through the server, and updates the data in the local storage area according to the updated data of the triggered sub-interface.

[0117] In some implementations, in order to reduce the amount of data transmission and the data processing time at the front end, in an embodiment of the present application, data in the local storage area can be updated by incremental updates.

[0118] Specifically, in an embodiment of the present application, the client obtains incremental data of the target interface from the server according to a set data acquisition cycle, and the incremental data includes updated data of the target interface during the data acquisition cycle. Then, based on the incremental data of the target interface, the local interface data of the target interface stored in the local storage area is updated.

[0119] The client may periodically obtain incremental data of the target interface from the server through methods such as, but not limited to, WebSocket and polling.

[0120] For example, assuming that the data acquisition cycle is set to be once every 1 minute, then the client obtains the incremental data of the home page from the server according to the data acquisition cycle of once every 1 minute, and updates the data in the local storage area.

[0121] Through the above implementation, incremental data is obtained from the server regularly instead of obtaining all data every time. In this way, the amount of data transmission and the data processing time of the front end can be reduced, so that the data can be updated quickly and in real time, reducing network traffic.

[0122] As a possible implementation method, considering that there may be a risk of data loss for incremental data, in order to ensure data consistency between the local storage area and the server, the corresponding data time can be recorded for each data stored in the local storage area. When the client detects that there is a data update on the target interface, the target time range is determined based on the data time recorded for the interface data of the target interface (i.e., local interface data) in the local storage area, and the incremental data of the target interface corresponding to the target time range is obtained from the server (for example, the target time range is sent to the server, and the incremental data of the target interface corresponding to the target time range returned by the server is received), and based on the incremental data of the target interface, the local interface data of the target interface stored in the local storage area is updated.

[0123] For example, the data time corresponding to the interface data of the target interface in the local storage area is from 0:00 on January 1, 2023 to 24:00 on January 2, 2023 (that is, the locally stored data is from 0:00 on January 1, 2023 to 24:00 on January 2, 2023), and the current time is 1:00 on January 2, 2023. Then, when the client detects that there is a data update on the target interface, it determines the target time range from 24:00 on January 2, 2023 to 1:00 on January 2, 2023 based on the data, and sends the target time range to the server, as well as the incremental data of the target interface corresponding to the target time range returned by the server. Of course, the above only takes the current time as an example to determine the target time range. In actual application, the client can also use the time range after the data and before the specified time as the target time range.

[0124] In the above implementation, in the event that the local interface data stored in the local storage area is lost or deleted, considering that if only the latest data is obtained from the server, it may cause inconsistency between the local and server data, by recording the data time locally, then, in the event that the data is lost or deleted, the missing data can be requested from the server, thereby ensuring data consistency between the local storage area and the server.

[0125] In some embodiments, in order to further reduce the amount of transmitted data, when the target interface contains multiple sub-interfaces, the client can load the page by data paging. Specifically, in response to the trigger operation of the target object on a sub-interface among multiple sub-interfaces, the client sends a data acquisition request to the server for obtaining the interface data of a sub-interface, obtains the local interface data corresponding to a sub-interface from the local storage area, and receives the new version interface data corresponding to a sub-interface returned by the server. Furthermore, if the local interface data corresponding to a sub-interface is stored in the local storage area, the client renders the target interface according to the local interface data corresponding to a sub-interface, and updates the target interface based on the new version interface data corresponding to a sub-interface; if the local interface data corresponding to a sub-interface is not stored in the local storage area, the target interface is rendered according to the new version interface data corresponding to a sub-interface, and the new version interface data corresponding to a sub-interface is stored in the local storage area.

[0126] That is to say, the target interface is divided into multiple pages, and the client only loads the data of the current page each time, thereby reducing the data transmission and processing time. Among them, data paging loading can be implemented using paging plug-ins or custom paging logic, and there is no restriction on this.

[0127] For example, in response to the trigger operation of the target object on sub-interface A, the client sends a data acquisition request to the server for acquiring the interface data of sub-interface 1, acquires the local interface data corresponding to the interface data of sub-interface 1 from the local storage area, and receives the new version interface data corresponding to the interface data of sub-interface 1 returned by the server. If the local interface data corresponding to sub-interface 1 is stored in the local storage area, the client renders the target interface according to the local interface data corresponding to sub-interface 1, and updates the target interface based on the new version interface data corresponding to sub-interface 1. If the local interface data corresponding to sub-interface 1 is not stored in the local storage area, the target interface is rendered according to the new version interface data corresponding to sub-interface 1, and the new version interface data corresponding to sub-interface 1 is stored in the local storage area.

[0128] See also Figure 6 As shown, it is a schematic diagram of an interaction between a client and a server provided in an embodiment of the present application, and the specific process is as follows:

[0129] S601: When the target object opens the client, the main thread of the client initializes the local storage area.

[0130] S602: When the target object opens the target interface, the main thread sends a data acquisition request to the server for acquiring interface data of the target interface.

[0131] S603. At the same time, the main thread requests the interface data of the target interface (ie, local interface data) from the local storage area.

[0132] Furthermore, depending on whether the local storage area stores local interface data, there are two situations: situation one (local storage area stores local interface data) and situation one (local storage area does not store local interface data). If it is situation one, then execute S604 and S605; if it is situation one, then execute S606, S607 and S608.

[0133] S604: The main thread obtains local interface data through the local storage area.

[0134] S605, the main thread renders the target interface according to the local interface data. Further, after receiving the new version interface data returned by the client, the client can also update the target interface according to the new version interface data.

[0135] S606: The main thread receives the new version interface data returned by the server.

[0136] S607, the main thread stores the new version of the interface data in the local storage area. It should be noted that if the client is acquiring the interface data of the target interface for the first time, then the main thread of the client will pull the interface data of all sub-interfaces in the target interface. The interface data of each sub-interface includes: the first 10 rendering contents pulled in the rendering order, and the pulled interface data of all sub-interfaces, combined with the corresponding data identifiers, are stored in Figure 4 shown in the table.

[0137] S608. The main thread renders the target interface according to the new version interface data.

[0138] S609, the main thread enters the receiving state and creates a WebWorker thread. The receiving state refers to the state of continuously receiving the updated data of the target interface. For example, before the target object closes the client, the client is always in the receiving state.

[0139] S610: When there is data update on the target interface, the server pushes a data update message to the main thread via WebSocket.

[0140] S611, the main thread sends a data update message to the WebWorker thread. Specifically, the main thread sends the data update message to the WebWorker thread via postMessage.

[0141] S612, the WebWorker thread preprocesses the update data to obtain the preprocessed update data. Specifically, the WebWorker thread preprocesses the update data based on the data type of the update data using the data preprocessing operation set for the data type to obtain the preprocessed update data. During the data preprocessing process, the WebWorker thread can obtain historical session messages related to the reference data from the local storage area. For details, refer to the data preprocessing process above, which will not be repeated here.

[0142] It should be noted that in the embodiment of the present application, for any data update operation occurring in the target interface, corresponding pre-processed update data can be obtained through S712. The pre-processed update data can be stored in the local storage area in real time after each pre-processing, or a batch of pre-processed update data can be stored in the local storage area in a batch processing manner, and there is no limitation on this.

[0143] S613. The WebWorker thread stores the preprocessed update data in the local storage area.

[0144] S614. The main thread obtains the pre-processed update data through the local storage area.

[0145] S615: The main thread updates the target interface according to the preprocessed update data.

[0146] The present application is described below in conjunction with several specific embodiments.

[0147] Example 1: Web version IM

[0148] When the target object triggers the target interface, the client sends a data acquisition request to the server through the main thread to obtain the interface data of the target interface. At the same time, the client requests the interface data of the target interface from the local storage area through the main thread. Figure 7 As shown, the target interface includes sub-interfaces corresponding to contacts such as object A, object B, object C, group 1, object D, group 2, group 3, and object F. The sub-interface corresponding to each contact can also be called a session interface. On the left side of the target interface are interface identification components corresponding to each sub-interface. Each interface identification component includes the name and avatar of the corresponding contact. When the target object clicks on any interface identification component, the client presents the sub-interface corresponding to the interface identification component in the right area of ​​the target interface.

[0149] Assume that the target object triggers the target interface for the first time, and the interface data of the target interface (i.e., local interface data) is not stored in the local storage area. Then, at this time, the client receives the interface data of the target interface returned by the server (i.e., the new version interface data) through the main thread, stores the new version interface data in the local storage area, and renders the target interface according to the new version interface data. The new version interface data includes the interface data of the session interface corresponding to each contact such as object A, object B, object C, group 1, object D, group 2, group 3, object F, etc. The left area of ​​the rendered target interface presents various interface identification components, and the right area can present the session interface of the first contact or a preset interface (such as an empty interface) because the target object has not yet triggered a certain interface identification component.

[0150] When the target object triggers (for example, clicks) any interface identification component, the client can obtain the interface data of the corresponding session interface from the local storage area, and render the session interface of the corresponding session interface in the right area of ​​the target interface. Figure 7 In the example, after the target object triggers the conversation interface of object A, the client obtains the interface data of the conversation interface of object A through the local storage area, and renders the conversation interface of object A in the right area of ​​the target interface according to the interface data of the conversation interface of object A.

[0151] A WebSocket is established between the client and the server. When there is data update in any sub-interface of the target interface, the server pushes a data update message to the client's main thread through WebSocket. For example, in the conversation interface of object A, object A sends a new message "Received". After the server obtains the new message sent by object A, it pushes a data update message to the main thread through WebSocket. The client's main thread sends the data update message to the client's WebWorker thread. Then, the client preprocesses the update data through the WebWorker thread, obtains the preprocessed update data, and stores the preprocessed update data in the local storage area. Finally, the client obtains the preprocessed update data stored in the local storage area through the main thread, and updates the conversation interface of object A according to the preprocessed update data.

[0152] Example 2: Web version office IM

[0153] When the target object triggers the target interface, the client sends a data acquisition request for acquiring interface data of the target interface to the server through the main thread, and at the same time, requests the interface data of the target interface from the local storage area through the main thread.

[0154] Assuming that the local storage area stores the interface data of the target interface (i.e., local interface data), then at this time, the client obtains the local interface data from the local storage area through the main thread and renders the target interface according to the local interface data. Fig. 8A As shown, in the rendered target interface, the left area contains interface identification components such as "message", "mail", and "document". When the target object clicks on any interface identification component, the client will present the sub-interface corresponding to the interface identification component in the right area of ​​the target interface. When the target object does not click on any interface identification component, the client can present the sub-interface corresponding to the interface identification component "message" as the default sub-interface in the right area of ​​the target interface. The sub-interface corresponding to the interface identification component "message" is used as the default sub-interface, and the left area is used to present the interface identification components corresponding to the contacts such as object A, group 1, group 2, and group 3. When the target object clicks on any interface identification component, the client will present the secondary interface corresponding to the interface identification component in the right area of ​​the sub-interface. The secondary interface is equivalent to the sub-interface of the sub-interface.

[0155] See also Figure 8B As shown, after the target object clicks the interface identification component "Message", the sub-interface corresponding to the interface identification component "Message" is presented in the right area of ​​the target interface. In the sub-interface corresponding to the interface identification component "Message", the left area is used to present the interface identification components corresponding to the contacts such as object A, group 1, group 2, group 3, etc. When the target object clicks any interface identification component, the client presents the secondary interface corresponding to the interface identification component in the right area of ​​the sub-interface, and the secondary interface is equivalent to the sub-interface of the sub-interface.

[0156] Figure 8C In the example, after the target object clicks the interface identification component "Mail", the sub-interface corresponding to the interface identification component "Mail" is presented in the right area of ​​the target interface. In the sub-interface corresponding to the interface identification component "Mail", the left area is used to present interface identification components for functions such as "Inbox", "Starred Mail", "Draft Box", and "Sent". When the target object clicks any interface identification component, the client presents the secondary interface corresponding to the interface identification component in the right area of ​​the sub-interface. The secondary interface is equivalent to the sub-interface of the sub-interface. For example, when the target object clicks the interface identification component "Inbox", the client presents the secondary interface corresponding to the interface identification component "Inbox" in the right area of ​​the sub-interface. The secondary interface contains emails with titles "Conference Connection" and "Mail Assistant" received by the target object.

[0157] When the client receives the interface data (ie, new version interface data) of the target interface returned by the server through the main thread, the target interface can be updated according to the new version interface data.

[0158] A WebSocket is established between the client and the server. When there is data update on the target interface, the server pushes a data update message to the client's main thread through WebSocket. For example, when the target object receives a new email, the server pushes a data update message to the main thread through WebSocket after obtaining the new email sent to the target object. The client's main thread sends the data update message to the client's WebWorker thread. Then, the client preprocesses the update data through the WebWorker thread, obtains the preprocessed update data, and stores the preprocessed update data in the local storage area. Finally, the client obtains the preprocessed update data stored in the local storage area through the main thread, and updates the sub-interface corresponding to the interface identification component "Email" according to the preprocessed update data.

[0159] Example 3: Web version forum

[0160] When the target object triggers the target interface, the client sends a data acquisition request for acquiring interface data of the target interface to the server through the main thread, and at the same time, requests the interface data of the target interface from the local storage area through the main thread.

[0161] Assuming that the local storage area stores the interface data of the target interface (i.e., local interface data), then at this time, the client obtains the local interface data from the local storage area through the main thread and renders the target interface according to the local interface data. Fig. 9 As shown, in the rendered target interface, the left area contains interface identification components with titles such as "Family Harmony Brings Good Fortune", "Winter Health Tips", and "Health Common Sense". When the target object clicks on any interface identification component, the client presents the sub-interface corresponding to the interface identification component in the right area of ​​the target interface, and the sub-interface contains relevant discussion content corresponding to the topic. Fig. 9 For example, when the target object clicks the interface identification component "Winter Health Tips", the client presents the sub-interface corresponding to the interface identification component "Winter Health Tips" in the right area of ​​the sub-interface, and the sub-interface contains discussion content related to "Winter Health Tips". Of course, if the target object does not click any interface identification component, the client can present a sub-interface as the default sub-interface in the right area of ​​the target interface, but it is not limited to this.

[0162] When the client receives the interface data (ie, new version interface data) of the target interface returned by the server through the main thread, the target interface can be updated according to the new version interface data.

[0163] A WebSocket is established between the client and the server. When there is data update on the target interface, the server pushes data update messages to the client's main thread through WebSocket. For example, other objects publish new discussion content under the topic "Winter Health Tips". After the new discussion content is published, the server pushes data update messages to the main thread through WebSocket. The client's main thread sends the data update message to the client's WebWorker thread. Then, the client preprocesses the update data through the WebWorker thread, obtains the preprocessed update data, and stores the preprocessed update data in the local storage area. Finally, the client obtains the preprocessed update data stored in the local storage area through the main thread, and updates the sub-interface corresponding to the interface identification component "Winter Health Tips" according to the preprocessed update data.

[0164] Based on the same inventive concept, the present application embodiment provides a page loading device. Fig.10 As shown, it is a schematic diagram of the structure of the page loading device 1000, which may include:

[0165] The data request unit 1001 is used to send a data acquisition request for acquiring interface data of the target interface to the server in response to a trigger operation of the target object on the target interface, acquire local interface data from the local storage area, and receive new version interface data returned by the server;

[0166] The first processing unit 1002 is configured to render the target interface according to the local interface data if the local interface data is stored in the local storage area, and update the target interface based on the new version interface data;

[0167] The second processing unit 1003 is used to render the target interface according to the new version interface data and store the new version interface data in the local storage area if the local interface data is not stored in the local storage area.

[0168] As a possible implementation, the target interface includes multiple sub-interfaces, and when sending a data acquisition request for acquiring interface data of the target interface to the server, the data request unit 1001 is specifically used to:

[0169] Sending a data acquisition request carrying the object identifier of the target object and the interface identifier of the target interface to the server;

[0170] When receiving the new version interface data returned by the server, the data request unit 1001 is specifically used to:

[0171] The new version interface data returned by the server is received, wherein the new version interface data includes: interface data of each of the plurality of sub-interfaces that meets a preset quantity condition.

[0172] As a possible implementation method, the interface data of a sub-interface that meets the preset quantity conditions includes:

[0173] Interface data of a set amount of data in the interface data of the one sub-interface; or

[0174] The interface data of the one sub-interface includes the interface data of the amount of data associated with the interface size of the client.

[0175] As a possible implementation, the method further includes a data updating unit 1004, which is used to:

[0176] Creating a two-way communication channel between the client and the server;

[0177] During the operation of the client, when it is detected through the two-way communication channel that there is data update on the target interface, the updated data of the target interface is obtained from the server, and the data in the local storage area is updated according to the updated data;

[0178] Based on the data type of the update data, the update data is preprocessed using a data preprocessing operation set for the data type to obtain the preprocessed update data, and the preprocessed update data is rendered in the target interface.

[0179] As a possible implementation, based on the data type of the update data, the update data is preprocessed by using a data preprocessing operation set for the data type, and when the preprocessed update data is obtained, the data updating unit 1004 is specifically used to:

[0180] If the update data includes reference data of a historical conversation message in the target interface, the historical conversation message is acquired, and the reference data and the historical conversation message are combined to obtain the pre-processed update data;

[0181] If the update data includes a picture identifier of a picture, the picture is acquired according to the picture identifier, and the picture is used as the pre-processed update data;

[0182] If the update data includes data to be converted in a first data format not supported by the client, the data to be converted is converted into target converted data in a second data format supported by the client, and the target converted data is used as the preprocessed update data.

[0183] As a possible implementation, the target interface includes multiple sub-interfaces, and during the operation of the client, when it is detected through the two-way communication channel that the target interface has data update, the updated data of the target interface is obtained from the server, and the local storage area is updated according to the updated data, the data updating unit 1004 is specifically used to:

[0184] If, during the operation of the client, data update of the target interface is detected through the two-way communication channel, and the number of sub-interfaces exceeds a set threshold, the following operations are performed for the multiple sub-interfaces respectively:

[0185] When the target object triggers a sub-interface, update data of the sub-interface is obtained through the server, and data in the local storage area is updated according to the update data of the sub-interface.

[0186] As a possible implementation, the method further includes a data updating unit 1004, which is used to:

[0187] According to a set data acquisition cycle, the incremental data of the target interface is obtained from the server, wherein the incremental data includes the updated data of the target interface during the data acquisition cycle, and based on the incremental data of the target interface, the local interface data of the target interface stored in the local storage area is updated; or

[0188] When data update of the target interface is detected, the target time range is determined according to the data time of the local interface data record in the local storage area, and the incremental data of the target interface corresponding to the target time range is obtained through the server, and based on the incremental data of the target interface, the local interface data of the target interface stored in the local storage area is updated.

[0189] As a possible implementation, the target interface includes multiple sub-interfaces; then in response to the triggering operation of the target object on the target interface, a data acquisition request for acquiring interface data of the target interface is sent to the server, and local interface data is acquired from the local storage area, and new version interface data returned by the server is received. The data request unit 1001 is specifically used to:

[0190] In response to the triggering operation of the target object on one of the multiple sub-interfaces, a data acquisition request for obtaining the interface data of the sub-interface is sent to the server, and the local interface data corresponding to the sub-interface is obtained from the local storage area, and the new version of the interface data corresponding to the sub-interface returned by the server is received.

[0191] For the convenience of description, the above parts are divided into modules (or units) according to their functions and described separately. Of course, when implementing this application, the functions of each module (or unit) can be implemented in the same or multiple software or hardware.

[0192] Regarding the device in the above embodiment, the specific manner in which each unit executes the request has been described in detail in the embodiment of the method, and will not be elaborated here.

[0193] Those skilled in the art will appreciate that various aspects of the present application may be implemented as a system, method or program product. Therefore, various aspects of the present application may be specifically implemented in the following forms, namely: a complete hardware implementation, a complete software implementation (including firmware, microcode, etc.), or a combination of hardware and software, which may be collectively referred to as "circuit", "module" or "system" herein.

[0194] Based on the same inventive concept, the embodiment of the present application also provides an electronic device. In one embodiment, the electronic device can be a server or a terminal device. Fig.11 As shown, it is a schematic diagram of the structure of a possible electronic device provided in an embodiment of the present application, Fig.11 In the embodiment, the electronic device 1100 includes: a processor 1110 and a memory 1120.

[0195] The memory 1120 stores a computer program executable by the processor 1110 , and the processor 1110 can perform the steps of the above summary generation method by executing the instructions stored in the memory 1120 .

[0196] The memory 1120 may be a volatile memory, such as a random-access memory (RAM); the memory 1120 may also be a non-volatile memory, such as a read-only memory (ROM), a flash memory, a hard disk drive (HDD) or a solid-state drive (SSD); or the memory 1120 may be any other medium that can be used to carry or store the desired program code in the form of instructions or data structures and can be accessed by a computer, but is not limited thereto. The memory 1120 may also be a combination of the above memories.

[0197] The processor 1110 may include one or more central processing units (CPU) or a digital processing unit, etc. The processor 1110 is configured to implement the above-mentioned summary generation method when executing the computer program stored in the memory 1120 .

[0198] In some embodiments, the processor 1110 and the memory 1120 may be implemented on the same chip. In some embodiments, they may also be implemented on separate chips.

[0199] The specific connection medium between the processor 1110 and the memory 1120 is not limited in the embodiment of the present application. In the embodiment of the present application, the processor 1110 and the memory 1120 are connected via a bus as an example. Fig.11 The connections between the other components are only for illustration and are not intended to be limiting. The bus can be divided into an address bus, a data bus, a control bus, etc. For ease of description, Fig.11 The diagram shows that only one thick line is used, but this does not mean that there is only one bus or one type of bus.

[0200] Based on the same inventive concept, an embodiment of the present application provides a computer-readable storage medium, which includes a computer program. When the computer program is executed on an electronic device, the computer program is used to enable the electronic device to execute the steps of the above-mentioned summary generation method. In some possible implementations, various aspects of the summary generation method provided by the present application can also be implemented in the form of a program product, which includes a computer program. When the program product is executed on an electronic device, the computer program is used to enable the electronic device to execute the steps in the above-mentioned summary generation method. For example, the electronic device can execute the following steps: Figure 2 Follow the steps shown in .

[0201] The program product may use any combination of one or more readable media. The readable medium may be a readable signal medium or a readable storage medium. The readable storage medium may be, for example, but not limited to, an electrical, magnetic, optical, electromagnetic, infrared, or semiconductor system, device or device, or any combination of the above. More specific examples of readable storage media (a non-exhaustive list) include: an electrical connection with one or more wires, a portable disk, a hard disk, a RAM, a ROM, an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a portable compact disk read-only memory (Compact Disk Read Only Memory, CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the above.

[0202] The program product of the embodiment of the present application may adopt a CD-ROM and include a computer program, and can be run on an electronic device. However, the program product of the present application is not limited thereto, and in this document, a readable storage medium may be any tangible medium containing or storing a computer program, which may be used by or in combination with a command execution system, apparatus or device.

[0203] A readable signal medium may include a data signal propagated in baseband or as part of a carrier wave, wherein a readable computer program is carried. Such propagated data signals may take a variety of forms, including but not limited to electromagnetic signals, optical signals, or any suitable combination of the above. A readable signal medium may also be any readable medium other than a readable storage medium, which may send, propagate, or transmit a computer program for use by or in conjunction with a command execution system, apparatus, or device.

[0204] Although the preferred embodiments of the present application have been described, those skilled in the art may make additional changes and modifications to these embodiments once they have learned the basic creative concept. Therefore, the appended claims are intended to be interpreted as including the preferred embodiments and all changes and modifications falling within the scope of the present application.

[0205] Obviously, those skilled in the art can make various changes and modifications to the present application without departing from the spirit and scope of the present application. Thus, if these modifications and variations of the present application fall within the scope of the claims of the present application and their equivalents, the present application is also intended to include these modifications and variations.

Claims

1. A page loading method, characterized in that: Applied to the client, including: In response to a trigger operation of a target object on a target interface, a data acquisition request for acquiring interface data of the target interface is sent to a server, local interface data is acquired from a local storage area, and new version interface data returned by the server is received; If the local interface data is stored in the local storage area, the target interface is rendered according to the local interface data, and the target interface is updated based on the new version interface data; If the local interface data is not stored in the local storage area, the target interface is rendered according to the new version interface data, and the new version interface data is stored in the local storage area.

2. The method according to claim 1, characterized in that The target interface includes a plurality of sub-interfaces, and the step of sending a data acquisition request to the server for acquiring interface data of the target interface includes: Sending a data acquisition request carrying the object identifier of the target object and the interface identifier of the target interface to the server; The receiving of the new version interface data returned by the server includes: The new version interface data returned by the server is received, wherein the new version interface data includes: interface data of each of the plurality of sub-interfaces that meets a preset quantity condition.

3. The method according to claim 2, characterized in that The interface data of a sub-interface that meets the preset quantity conditions includes: Interface data of a set amount of data in the interface data of the one sub-interface; or The interface data of the one sub-interface includes the interface data of the amount of data associated with the interface size of the client.

4. The method according to claim 1, 2 or 3, characterized in that: Also includes: Creating a two-way communication channel between the client and the server; During the operation of the client, when it is detected through the two-way communication channel that there is data update on the target interface, the updated data of the target interface is obtained from the server, and the data in the local storage area is updated according to the updated data; Based on the data type of the update data, the update data is preprocessed using a data preprocessing operation set for the data type to obtain the preprocessed update data, and the preprocessed update data is rendered in the target interface.

5. The method according to claim 4, characterized in that Based on the data type of the update data, the update data is preprocessed by using a data preprocessing operation set for the data type to obtain the preprocessed update data, including: If the update data includes reference data of a historical conversation message in the target interface, the historical conversation message is acquired, and the reference data and the historical conversation message are combined to obtain the pre-processed update data; If the update data includes a picture identifier of a picture, the picture is acquired according to the picture identifier, and the picture is used as the pre-processed update data; If the update data includes data to be converted in a first data format not supported by the client, the data to be converted is converted into target converted data in a second data format supported by the client, and the target converted data is used as the preprocessed update data.

6. The method according to claim 4, characterized in that The target interface includes multiple sub-interfaces, and when data update of the target interface is detected through the two-way communication channel during the operation of the client, the updated data of the target interface is obtained from the server, and the data of the local storage area is updated according to the updated data, including: If, during the operation of the client, data update of the target interface is detected through the two-way communication channel, and the number of sub-interfaces exceeds a set threshold, the following operations are performed for the multiple sub-interfaces respectively: When the target object triggers a sub-interface, update data of the sub-interface is obtained through the server, and data in the local storage area is updated according to the update data of the sub-interface.

7. The method according to claim 1, 2 or 3, characterized in that: Also includes: According to a set data acquisition cycle, the incremental data of the target interface is obtained from the server, wherein the incremental data includes the updated data of the target interface during the data acquisition cycle, and based on the incremental data of the target interface, the local interface data of the target interface stored in the local storage area is updated; or When data update of the target interface is detected, the target time range is determined according to the data time of the local interface data record in the local storage area, and the incremental data of the target interface corresponding to the target time range is obtained through the server, and based on the incremental data of the target interface, the local interface data of the target interface stored in the local storage area is updated.

8. The method according to claim 1, 2 or 3, characterized in that: The target interface includes multiple sub-interfaces; Then, in response to the trigger operation of the target object on the target interface, sending a data acquisition request for acquiring the interface data of the target interface to the server, acquiring the local interface data from the local storage area, and receiving the new version of the interface data returned by the server include: In response to the triggering operation of the target object on one of the multiple sub-interfaces, a data acquisition request for obtaining the interface data of the sub-interface is sent to the server, and the local interface data corresponding to the sub-interface is obtained from the local storage area, and the new version of the interface data corresponding to the sub-interface returned by the server is received.

9. A page loading device, characterized in that: include: A data request unit, configured to send a data acquisition request for acquiring interface data of the target interface to a server in response to a trigger operation of a target object on the target interface, acquire local interface data from a local storage area, and receive new version interface data returned by the server; A first processing unit, configured to render the target interface according to the local interface data if the local interface data is stored in the local storage area, and update the target interface based on the new version interface data; The second processing unit is configured to render the target interface according to the new version interface data and store the new version interface data in the local storage area if the local interface data is not stored in the local storage area.

10. An electronic device, characterized in that: It comprises a processor and a memory, wherein the memory stores a computer program, and when the computer program is executed by the processor, the processor executes the steps of any one of the methods of claims 1 to 8.

11. A computer-readable storage medium, characterized in that: It includes a computer program. When the computer program is run on an electronic device, the computer program is used to enable the electronic device to execute the steps of any method described in claims 1 to 8.

12. A computer program product, characterized in that It includes a computer program, which is stored in a computer-readable storage medium. The processor of the electronic device reads and executes the computer program from the computer-readable storage medium, so that the electronic device executes the steps of any method described in claims 1 to 8.

Images