Data processing method, device, electronic device and storage medium

Abstract

The present disclosure provides a data processing method, device, electronic device and storage medium, the method comprising: in response to a page switching operation on a single-page application, obtaining the page data of a target page and the source code of the target page in parallel; determining that the source code and page data are successfully obtained, and rendering the page data on the target page based on the source code, the source code being the source code returned by the server. Compared with the method of obtaining the source code and page data in a serial manner, the method disclosed in the present disclosure can effectively shorten the opening time of the target page, reduce the user waiting time, and improve the application fluency and user experience.

Description

Technical Field

[0001] The present invention relates to the field of single page technology, and in particular to a data processing method, device, electronic equipment and storage medium. Background Art

[0002] A single page web application (SPA) is a special type of web application that confines all activities to a single web page, loads the corresponding Hyper Text Markup Language (HTML) only when the web page is initialized, and dynamically updates the web page when the user interacts with the SPA.

[0003] In actual applications, the Cascading Style Sheets (CSS) and Javascript files of multiple pages belonging to the same SPA can be packaged through the packaging capabilities of the construction tool. When switching pages in SPA, the source code such as CSS and JavaScript files can be downloaded from the server first, and then the page data is requested and rendered on the target page. Therefore, the target page needs to take a longer time to open. Summary of the invention

[0004] According to one aspect of the present disclosure, there is provided a data processing method, comprising:

[0005] In response to a page switching operation on a single-page application, page data of a target page and a source code of the target page are obtained in parallel, the source code being the source code returned by the server;

[0006] It is determined that the source code and the page data are successfully acquired, and the page data is rendered on the target page based on the source code.

[0007] According to another aspect of the present disclosure, there is provided a data processing device, comprising:

[0008] An acquisition module, configured to acquire, in response to a page switching operation on a single-page application, page data of a target page and a source code of the target page in parallel, wherein the source code is a source code returned by a server;

[0009] The rendering module is used to determine that the page data and the source code are successfully acquired, and render the page data on the target page based on the source code.

[0010] According to another aspect of the present disclosure, there is provided an electronic device, comprising:

[0011] processor; and,

[0012] Memory for storing programs;

[0013] The program includes instructions, which, when executed by the processor, cause the processor to perform the method according to the exemplary embodiment of the present disclosure.

[0014] According to another aspect of the present disclosure, a non-transitory computer-readable storage medium is provided, wherein the non-transitory computer-readable storage medium stores computer instructions, and the computer instructions are used to cause the computer to execute the method according to the exemplary embodiments of the present disclosure.

[0015] One or more technical solutions provided in the embodiments of the present disclosure respond to the page switching operation of the single-page application and obtain the page data and source code of the target page in parallel, where the source code is the source code returned by the server. Based on this, when it is determined that the source code and page data are successfully obtained, there is no need to request the page data from the server, and the page data can be directly rendered on the target page based on the source code. Therefore, compared with the method of obtaining the source code and page data in a serial manner, the exemplary embodiment of the present disclosure can effectively shorten the target page opening time, reduce the user waiting time, and improve the application fluency and user experience. BRIEF DESCRIPTION OF THE DRAWINGS

[0016] Further details, features and advantages of the present disclosure are disclosed in the following description of exemplary embodiments in conjunction with the accompanying drawings, in which:

[0017] Figure 1 A schematic diagram showing an example system in which various methods described herein may be implemented according to an exemplary embodiment of the present disclosure;

[0018] Figure 2 A flow chart showing a data processing method of an exemplary embodiment of the present disclosure;

[0019] Figure 3A to Figure 3C Three page display schematic diagrams of SPA pages according to an exemplary embodiment of the present disclosure are shown;

[0020] Figure 4 A schematic block diagram of a data processing device according to an exemplary embodiment of the present disclosure is shown;

[0021] Figure 5 A schematic block diagram of a chip according to an exemplary embodiment of the present disclosure is shown;

[0022] Figure 6 A structural block diagram of an exemplary electronic device that can be used to implement the embodiments of the present disclosure is shown. DETAILED DESCRIPTION

[0023] Embodiments of the present disclosure will be described in more detail below with reference to the accompanying drawings. Although certain embodiments of the present disclosure are shown in the accompanying drawings, it should be understood that the present disclosure can be implemented in various forms and should not be construed as being limited to the embodiments described herein, which are instead provided for a more thorough and complete understanding of the present disclosure. It should be understood that the drawings and embodiments of the present disclosure are only for exemplary purposes and are not intended to limit the scope of protection of the present disclosure.

[0024] It should be understood that the various steps described in the method embodiments of the present disclosure may be performed in different orders and / or in parallel. In addition, the method embodiments may include additional steps and / or omit the steps shown. The scope of the present disclosure is not limited in this respect.

[0025] The term "including" and its variations used in this document are open inclusions, that is, "including but not limited to". The term "based on" means "based at least in part on". The term "one embodiment" means "at least one embodiment"; the term "another embodiment" means "at least one other embodiment"; the term "some embodiments" means "at least some embodiments". Relevant definitions of other terms will be given in the description below. It should be noted that the concepts of "first", "second", etc. mentioned in this disclosure are only used to distinguish different devices, modules or units, and are not used to limit the order or interdependence of the functions performed by these devices, modules or units.

[0026] It should be noted that the modifications of "one" and "plurality" mentioned in the present disclosure are illustrative rather than restrictive, and those skilled in the art should understand that unless otherwise clearly indicated in the context, it should be understood as "one or more".

[0027] The names of the messages or information exchanged between multiple devices in the embodiments of the present disclosure are only used for illustrative purposes and are not used to limit the scope of these messages or information.

[0028] Before introducing the embodiments of the present disclosure, the following definitions are given for the terms involved in the embodiments of the present disclosure:

[0029] A single page web application (SPA) is a special type of web application that confines all activities to a single web page, loads the corresponding Hyper Text Markup Language (HTML) only when the web page is initialized, and dynamically updates the web page when the user interacts with the SPA.

[0030] Front-end routing is used to detect changes in the URL path, allowing the browser engine to render components that match the current URL path, thereby presenting the view of the next page. Typical implementation libraries include react-router, vue-router, etc.

[0031] Cascading Style Sheets (CSS) is a computer language used to express the style of files such as HTML or eXtensible Markup Language (XML). CSS can not only modify web pages statically, but also dynamically format the elements of web pages in conjunction with various scripting languages.

[0032] JavaScript is a dynamically typed, weakly typed, prototype-based, interpreted scripting language with built-in support for types. Its interpreter is called the JavaScript engine, which is part of the browser and is widely used as a client-side scripting language. It was first used on HTML web pages to add dynamic functions to HTML web pages.

[0033] The basic element of the Document Object Model (DOM) tree is the "node", and the structure of the document is composed of hierarchical nodes.

[0034] The Domain Name System (DNS) is a distributed database on the Internet that maps domain names to IP addresses. It enables users to access the Internet more conveniently without having to remember IP number strings that can be directly read by machines.

[0035] Uniform Resource Locator (URL) is a concise representation of the location and access method of resources available on the Internet. It is the address of standard resources on the Internet.

[0036] Internet Protocol Address (IP address for short) is a unified address format provided by the IP protocol. It assigns a logical address to each network and each host on the Internet to shield the differences in physical addresses.

[0037] The Transmission Control Protocol (TCP) is a connection-oriented, reliable, byte-stream-based transport layer communication protocol described by IETF's RFC 793.

[0038] Hypertext Transfer Protocol (HTTP) is a client and server request and response standard used to transfer hypertext from a network server to a local browser.

[0039] Hyper Text Transfer Protocol over Secure Socket Layer (HTTPs) is an HTTP channel installed under HTTP, that is, Secure Socket Layer (SSL) is added under HTTP for encryption. Its function is to create an information security channel to ensure data transmission and the authenticity of the website.

[0040] The promise object represents an event that will happen in the future and is used to transmit messages of asynchronous operations. Its state is not affected by the outside world. The promise object represents an asynchronous operation, including three states: pending, resolved, and rejected. The pending state indicates the initial state, which is neither a success nor a failure state. The resolved state means that the operation is successfully completed, and the rejected state means that the operation fails.

[0041] The exemplary embodiment of the present disclosure provides a data processing method, which can be used to process the page data of the SPA application to render the target page to shorten the opening time of the target page. The page opening time of the exemplary embodiment of the present disclosure can be defined as starting from the page switching operation for the SPA application until the source code of the target page is loaded, or starting from the page switching operation for the SPA application until the page data of the target page is rendered.

[0042] Figure 1 Schematic diagram of an example system in which various methods described herein may be implemented according to an exemplary embodiment of the present disclosure. Figure 1 As shown, the system 100 of the exemplary embodiment of the present disclosure includes: a server 101 and a client 102 .

[0043] The server 101 of the exemplary embodiment of the present disclosure is used to store web page addresses and corresponding page resources, and the page resources include but are not limited to source codes such as JavaScript, CSS, HTML, and page data such as various pictures and videos. The server 101 can receive an address request from the client 102, and send a response based on the address request to the user terminal, and send the response data to the client 102. The client 102 of the exemplary embodiment of the present disclosure is installed with a browser 1021, and the client 102 can include but are not limited to electronic devices such as mobile phones and computers with processors, memories, and display screens.

[0044] In actual application, the website URL is input in the address bar of the browser 1021, and the browser performs a DNS lookup for the website URL to obtain an IP address, and determines the address of the server 101 according to the IP address. On this basis, the client 102 shakes hands with the server 101 through the TCP / IP handshake mechanism.

[0045] After the handshake is successful, the client 102 and the server 101 transmit data via the HTTP protocol. For the confidentiality of data transmission, the HTTPS protocol can also be used for data transmission. For example, the client 102 sends an access request to the server 101 using the HTTP protocol. The server 101 can return an HTML file to the client 102 and parse the HTML file through the built-in rendering engine of the browser 1021. When parsing the HTML file, the source code and page data can be called based on the tags in the HTML file. For example, if the HTML file includes a LINK tag, the client 102 requests a CSS file from the server 101. If the HTML file includes a Script tag, the client 102 requests a JavaScript file from the server 101.

[0046] like Figure 1 As shown, the rendering engine built into the browser 1021 may include an HTML interpreter, a CSS interpreter, a layout, and a JavaScript engine. The HTML interpreter can parse HTML files, and its essence is to interpret HTML files into a DOM tree. The CSS interpreter can parse CSS files to form a CSS rule tree. The layout can combine the DOM tree and the CSS rule tree, calculate their size and position and other layout information, and form an internal representation model that can represent all this information, namely a rendering tree. The JavaScript engine can modify the content of the web page, and can also modify the CSS rule tree.

[0047] In the browser rendering process, there are Graphical User Interface (GUI) threads and JavaScript engine threads. The GUI thread is responsible for rendering the browser interface, parsing HTML, CSS, building DOM trees and rendering trees, layout and drawing, etc. When the interface needs to be redrawn and rearranged, the GUI thread is executed. The JavaScript engine, also known as the JS engine or JS kernel, is responsible for parsing JavaScript scripts and running codes. The JS engine can change the rendering result by running the code and applying the logic of the code and the change information of the DOM tree and CSS rule tree to the layout. Based on this, the GUI rendering thread and the JS engine thread are mutually exclusive. When the JS engine is executed, the GUI thread will be suspended (equivalent to freezing), and the GUI updates will be saved in a queue and executed immediately when the JS engine is idle.

[0048] In the SPA application scenario, when a user visits a SPA website, the browser will initially load the necessary HTML files, JavaScript files, and CSS files. In order to avoid the problem of slow loading and blocked rendering caused by too large resources, the server uses the subpackaging capability of the build tool to subpack the JavaScript files and CSS files of the SPA application according to different pages, and obtains the source code packages of different pages belonging to the same SPA application. Based on this, when a user visits the SPA website, the browser will initially load all the HTML files of the SPA website and the source code package of the homepage. When the user needs to jump from page A to page B belonging to the same SPA website, in order to complete the page rendering of page B, it is necessary to first obtain the source code package of page B from the server, complete the loading of JavaScript files and CSS files, and then request the page data of page B from the server. It can be seen that the loading of the source code package and the acquisition of page data in page B are serial processes, resulting in a long waiting time for users and a poor user experience.

[0049] The data processing method provided by the exemplary embodiment of the present disclosure is applicable to the page switching process of SPA, and the process of acquiring the source code package containing JavaScript and CSS and acquiring the page data can be modified from a serial mode to a parallel mode, thereby shortening the waiting time of the user during the target page opening process. Assuming that the time for rendering the target page is the same in both the serial and parallel modes, it can be defined that in the serial mode, the time taken to open the target page is X+Y, and in the parallel mode, the time taken to open the target page is Max(X,Y), where X is the time taken to acquire the source code, and Y is the time taken to acquire the page data.

[0050] The data processing method provided by the exemplary embodiment of the present disclosure is executed by a client or a chip applied in the client. The scheme of the present disclosure is described below with reference to the accompanying drawings.

[0051] Figure 2 A flow chart of a data processing method of an exemplary embodiment of the present disclosure is shown. Figure 2 As shown, the data processing method of the exemplary embodiment of the present disclosure includes:

[0052] Step 201: In response to a page switching operation on a single-page application, the page data of the target page and the source code of the target page are obtained in parallel. In other words, the page data obtaining operation process and the source code obtaining operation process of the exemplary embodiment of the present disclosure are performed synchronously, and the source code is the source code returned by the server, so the source code obtaining operation process can be an operation process of obtaining the source code from the server.

[0053] For example, for a page switching operation of a single-page application, an operation may be performed on a page link tag of the current page, and the target page may be jumped to by clicking or triggering the page link tag, moving forward, moving backward, etc. The page link tag may be an operation of a navigation bar, a button, etc. For example, a tag may be used to directly jump to the target page, or JavaScript may be used to implement the jump.

[0054] Exemplarily, for page switching operations of a single-page application, it is also possible to jump to the target page in a customized manner, for example: the preset display time of the current page and the target page to jump to when the single-signature page display time reaches the preset time can be set through the meta tag in the HTML file.

[0055] In actual applications, the client of the exemplary embodiment of the present disclosure may determine the target route based on the page switching operation in response to the page switching operation on the single-page application, and synchronously obtain the source code and the page data dependent on the target route based on the target route. The page data here may be the page data of the target page, and may include text data, tables, hyperlinks, pictures, videos and other image data of the target page, but is not limited thereto.

[0056] For example, in response to a page switching operation on a single-page application, the URL in the address bar changes, and then the page jumps. In this process, the page jump can be implemented by front-end routing. Front-end routing can be implemented by hash routing mode and history routing mode.

[0057] When front-end routing is implemented through the hash routing mode, the hash value in the URL changes and triggers the onhashchange event. Therefore, the client can monitor the URL change event through onhashchange to determine the target route. When front-end routing is implemented through window.history, URL changes will not trigger any events. Window.history provides pushState() and replaceState() methods, both of which can be used to add data to the history stack to indirectly know the URL changes. Based on this, the calls of pushState and replaceState can be intercepted to monitor the URL change events in history to determine the target route. If the web page switching operation is to click the forward button or the back button, the URL changes in history can be monitored through onpopstate.

[0058] When the exemplary embodiment of the present disclosure obtains source code based on the target route, the source code tag of the target page can be dynamically created in the HTML file based on the target route, and the source code package of the target page can be obtained from the server based on the source code tag. For example, the source code tag can include a LINK tag and / or a Script tag, and a CSS file can be obtained from the server based on the LINK tag, and a JavaScript file can be obtained from the server based on the Script tag.

[0059] The exemplary embodiments of the present disclosure can obtain the page data that depends on the target route from the cache based on the target route while obtaining the source code based on the target route, or can obtain the page data from the server using an interface call method based on the target route, and can also combine these two acquisition methods to diversify the methods of obtaining page data, and different acquisition methods can cooperate and coordinate with each other. It should be understood that the operation of obtaining the source code based on the target route and the operation process of obtaining the page data can be performed simultaneously.

[0060] Exemplarily, considering that the browser may have visited the target page and cached the page data of the target page, it is possible to detect whether the cache includes page data that depends on the target route to determine whether it is necessary to request page data from the server by using an interface call. In response to the cache including page data that depends on the target route, it can be confirmed that the page data is successfully acquired, and there is no need to acquire the page data based on the target route. At this time, during the target page opening process, the client can not only ensure that the browser successfully acquires the page data, but also shorten the data processing time and reduce the number of interface calls, thereby shortening the time consumed to open the target page. Before acquiring page data based on the target route, if it is determined that there is no page data that depends on the target route in the cache, the page data can be requested from the server by using an interface call. At this time, the acquired page data is the page data returned by the server. During the target page opening process, the client can ensure that the page data is successfully acquired, and the real-time performance of the page data is relatively high. At the same time, in order to minimize the time consumed to open the page, the process of detecting whether the cache includes page data that depends on the target route and the process of acquiring the source code can be executed synchronously.

[0061] Exemplarily, if the method of the exemplary embodiment of the present disclosure finds page data that depends on the target route from the cache, in order to ensure the real-time nature of the page data, the method of the exemplary embodiment of the present disclosure can still request the page data from the server by means of an interface call, and save the page data requested from the server in the cache.

[0062] When the interface call method is used to obtain page data from the server, the source code is obtained based on the target route, the preloading function corresponding to the target route is determined, and then the page data that depends on the target route is requested based on the preloading function. Here, the operations of obtaining the source code and determining the preloading function can be performed synchronously, so that the page data acquisition operation process and the source code acquisition operation process are performed synchronously. In addition, if before determining the preloading function corresponding to the target route, it is also detected whether the cache includes page data that depends on the target route, the operations of obtaining the source code and determining the preloading function can also be performed asynchronously.

[0063] When determining the preload function corresponding to the target route, the exemplary embodiment of the present disclosure may determine the preload function corresponding to the target route based on the first mapping relationship. The first mapping relationship may be stored in a cache, and the cache storing the first mapping relationship may be defined as the first cache. The first mapping relationship may include a mapping relationship between the target route and the preload function. The first mapping relationship may also include a mapping relationship between the front-end route of other pages and the preload function, and is not limited to the mapping relationship between the target route and the preload function.

[0064] The essence of the exemplary embodiment of the present disclosure requesting the page data that depends on the target route is that the client uses an interface call to request the server to return the page data. These returned page data can be saved in a cache (such as a first cache). Based on this, when requesting page data that depends on the target function based on a preload function, the client can first call the server interface to request page data based on the preload function, and respond to the cache including the page data returned by the server interface to confirm that the page data has been successfully acquired. It can be seen that when the exemplary embodiment of the present disclosure acquires the source code based on the target route, the preload function that has a mapping relationship with the target route is used to call the server interface simultaneously, so that the server can quickly return the interface function, thereby shortening the time consumed to open the target page.

[0065] Figure 3A to Figure 3C FIG. 4 shows a schematic diagram of a page display of a SPA page according to an exemplary embodiment of the present disclosure. Figure 3A to Figure 3C As shown, the SPA page 300 includes an address bar and a body portion having a first link tag 301 and a second link tag 302. Figure 3A As shown, when the SPA page 300 is accessed, the home page 303 is accessed first.

[0066] When Figure 3A Clicking the first link tag 301 on the home page 303 shown in the figure can Figure 3A The home page shown jumps to 303 Figure 3B The first sub-page 304 shown, when in Figure 3B When the second connection label 302 is clicked on the first sub-page 304 shown, Figure 3B The first page 304 shown jumps to Figure 3C The second subpage 305 is shown. Figure 3C Clicking the first link tag 301 on the second sub-page 302 shown in FIG. Figure 3C The second subpage 305 shown jumps to Figure 3B A first subpage 304 is shown.

[0067] like Figure 3B and Figure 3C As shown, if the page has jumped from the first subpage 304 to the second subpage 305, and then jumped back from the second subpage 305 to the first subpage 304, the cache will include the page data of the first subpage 304. It can be set that when the time interval from clicking the second link tag 302 to clicking the first link tag 301 is less than the preset time length, the speed of jumping back from the second subpage 305 to the first subpage 304 is relatively fast, otherwise the speed of jumping back from the second subpage 305 to the first subpage 304 is normal or relatively slow. The preset time length can be set here according to the attributes of the page data, or according to the actual situation of the preset time length, which is not limited here.

[0068] like Figure 3B and Figure 3C As shown, if you jump from the first subpage 304 to the second subpage 305, and then quickly jump back from the second subpage 305 to the first subpage 304, based on the front-end route of the first subpage 304, that is, the target route, the page data of the first subpage 304 that depends on the target route can be quickly found from the cache. Based on this, the method of the exemplary embodiment of the present disclosure can ensure the real-time nature of the page data of the first subpage, and can also reduce unnecessary interface calls and data processing processes, thereby shortening the time consumed to open the first subpage.

[0069] like Figure 3B and Figure 3C As shown, if the second subpage 305 jumps back to the first subpage 304 at a normal speed or a relatively slow speed, the page data of the first subpage 304 that depends on the target route can also be quickly found from the cache based on the front-end route of the first subpage 304, that is, the target route. Based on this, the method of the exemplary embodiment of the present disclosure can shorten the time consumption of opening the first subpage.

[0070] like Figure 3A and Figure 3B As shown, if jumping from the home page 303 to the first sub-page 304, the page data of the first sub-page that depends on the target route can be quickly searched from the cache based on the front-end route of the first sub-page 304, that is, the target route. If the page data of the first sub-page that depends on the target route is found from the cache, it means that the first sub-page has been rendered before, otherwise the page data can be requested from the server by using an interface call. Based on this, the method of the exemplary embodiment of the present disclosure can shorten the time consumed to open the first sub-page as much as possible while ensuring that the page data is successfully obtained.

[0071] Step 202: Determine whether the page data and source code are acquired successfully, and render the page data on the target page based on the source code.

[0072] In the exemplary embodiment of the present disclosure, when the source code is obtained but the page data is not obtained, it is necessary to wait for the page data to be obtained, and then render the page data on the target page based on the source code. In this case, after the source code is obtained, the page data is obtained, and the opening time of the target page is associated with the acquisition time of the page data, or the opening time of the target page is equal to the acquisition time of the page data according to the above definition. When the page data is obtained but the source code is not obtained, it is necessary to wait for the source code, and then render the page data on the target page based on the source code. In this case, before the source code is obtained, the page data is obtained, and the opening time of the target page is associated with the acquisition time of the source code, or the opening time of the target page is equal to the acquisition time of the source code according to the above definition.

[0073] Assuming that the time consumption of rendering page data on the target page based on the source code is fixed, comparing the two methods of serially and parallelly acquiring the source code and page data of the target page, when the source code and page data are acquired serially, the time consumption of opening the target page is determined by the acquisition time of the source code and the acquisition time of the page data, while when the source code and page data are acquired in parallel, the time consumption of opening the target page is determined by the acquisition time of the source code or the acquisition time of the page data. It can be seen that the method of the exemplary embodiment of the present disclosure can shorten the time consumption of opening the target page, allowing the user to open the target page earlier, therefore, the method of the exemplary embodiment of the present disclosure can reduce the user's waiting time and improve the application fluency and user experience.

[0074] When the exemplary embodiment of the present disclosure renders the page data on the target page based on the source code, the browser rendering engine can be used to parse the source code to render the page data on the target page. It should be understood that the state management library such as redux, vuex, mobx, etc. can be used to realize the automatic rendering of the target page. As for the rendering process, reference can be made to the relevant description above, which will not be repeated here.

[0075] When the exemplary embodiment of the present disclosure renders the page data on the target page based on the source code, a rendering tree is created based on the source code and the page data, and the rendering tree is drawn on the target page. The source code of the exemplary embodiment of the present disclosure may include CSS code and JavaScript code.

[0076] For SPA, multiple pages belonging to the SPA share an HTML file. The HTML file is an empty file, and the main code needs to be written into the main part of the HTML file (that is, the body of the HTML file). This code can be implemented by executing JavaScript code.

[0077] Exemplarily, a creation tag including the main content code is included in the JavaScript code. When the creation tag is executed, the page data matching the creation tag attributes can be filled into the creation tag through the browser application program interface (Application Program Interface, abbreviated as API) such as document.createElement to obtain the main code.

[0078] On this basis, the browser engine is used to parse the main code, obtain the DOM tree, parse the CSS code, generate the CSS rule tree, and merge the CSS rule tree and the DOM tree to obtain the rendering tree that has not yet been laid out. After generating the rendering tree that has not yet been laid out, the browser engine starts to traverse from the root node of the rendering tree, and calculates the geometric information of each visible node contained in the rendering tree on the target page, that is, the layout. The layout may include the position of each visible node on the target page. When the rendering tree layout is completed, the rendering tree can be drawn on the target page based on the rendering tree layout.

[0079] In a possible implementation, the first mapping relationship of the exemplary embodiment of the present disclosure can be stored in a global empty object, or written in a routing configuration object of a routing library such as react-router, vue-router, etc. The first mapping relationship can be stored in a first global object as a first cache.

[0080] For example: declare a global empty object preloadObj={}, configure the mapping from the front-end route of the page that needs data preloading to the preloading function handle corresponding to the front-end route. For example: the page that needs data preloading is page B, the front-end route / b of page B can be set as the key name (i.e. key) of the global empty object, and the preloading function handle of page B can be set as the key value (value) of the global empty object. At this time, the first global object can be formed, and the first global object can be expressed as preloadObj={" / b":handle}. For example: when calling the route jump API provided by react-router, the preloading function is taken out from the first global object preloadObj according to the target route, and the preloading function is executed.

[0081] In a possible implementation, after acquiring the page data, the target route and the page data dependent on the target route are stored in the cache in the form of a second mapping relationship. It should be understood that the cache storing the first mapping relationship can be defined as the second cache. The second cache can be a different memory from the first cache, or it can be a virtual cache with a different storage form or storage path within the same cache.

[0082] The method of the exemplary embodiment of the present disclosure may also include: in response to obtaining the page data that depends on the target route from the cache, clearing the page data that depends on the target route in the cache. In this case, when the target page is accessed next time, after the client determines the target route based on the page switching operation, the page data that depends on the target route is generally not detected from the cache, thereby ensuring that the client can initiate a page data request to the server and obtain the latest page data that depends on the target route, so that the page data rendered on the target page has high real-time performance.

[0083] For example, if Figure 3A and Figure 3B As shown, when jumping from the home page 303 to the first sub-page 304 for the first time, the first sub-page 304 is used as the target page. If the page data and source code of the first sub-page 304 are successfully obtained, the page data of the first sub-page 304 in the cache is cleared, and the page data is rendered on the first sub-page 304 based on the source code; then the page jumps back from the first sub-page 304 to the home page 303, and then jumps from the home page 303 to the first sub-page 304 for the second time. In this case, when jumping to the first sub-page 304 for the first time, the page data of the first sub-page 304 successfully obtained will not be saved. In this case, when jumping to the first sub-page 304 for the second time, the page data that depends on the target route corresponding to the first sub-page 304 will not be detected from the cache, but the page data of the first sub-page will be requested from the server, thereby ensuring that the page data of the first sub-page is relatively real-time.

[0084] Although the method of the exemplary embodiment of the present disclosure may include: in response to obtaining page data that depends on the target route from the cache, clearing the page data that depends on the target route in the cache, it does not rule out the possibility that the client detects page data that depends on the target route from the cache after determining the target route based on the page switching operation.

[0085] like Figure 3A and Figure 3B As shown, when jumping from the home page 303 to the first sub-page 304 for the first time, the first sub-page 304 is used as the target page. If the page data and source code of the first sub-page 304 are successfully obtained, and the page data of the first sub-page 304 in the cache is not cleared, it jumps back from the first sub-page 304 to the home page 303, and then jumps from the home page 303 to the first sub-page 304 for the second time, then when jumping to the first sub-page 304 for the first time, the page data of the first sub-page 304 successfully obtained will still be saved. In this case, when jumping to the first sub-page 304 for the second time, the page data that depends on the target route corresponding to the first sub-page 304 can be detected from the cache, thereby shortening the opening time of the first sub-page 304.

[0086] In addition, if Figure 3A to Figure 3C As shown, after jumping to the first subpage 304 for the first time, you can jump back to the home page 303 from the first subpage 304, and then jump to the first subpage 304 for the second time from the home page 303, or you can jump from the first subpage 304 to the second subpage 305, and then jump from the second subpage 305 to the first subpage 304.

[0087] In an optional manner, the method of the exemplary embodiment of the present disclosure can use the object.keys method to detect the returned page data, and can also detect whether the target route is included in the second mapping relationship to determine whether the client initiates a data request to the server. When the client initiates a data request to the server, the target route can be detected in the second mapping relationship, so the server returns interface data that depends on the target route.

[0088] In actual applications, the second cache can save the interface data that depends on the target route in the form of a second global object. For example, a second global object resultObj can be declared to store the result returned by the data preloading function handle. The key name (key) of the second global object is the target route, and the key value (value) of the second global object is promise, which can indicate the completion status of the page data request that depends on the target route.

[0089] Before initiating a data request to the server, if the target route is detected in the second global object, it means that a data request has been initiated to the server before, and the page data can be directly obtained from the promise. Otherwise, a newpromise needs to be constructed, and then the server interface is called to the server based on the preload function, so that the server interface returns the promise object storing the page data to the client, and puts the promise object into the second global object resultObj, with the target route / b as the key name (key) of the second global object, and the promise object as the key value (value), forming resultObj={" / b":promise}. When it is detected that resultObj includes the target route, it means that the page data is received, and the page data saved by the promise object can be obtained. The state of the promise object can be correct (resolve) or wrong (reject). When the state of the promise object is correct, it means that the state of the page data saved therein is correct. When the state of the promise object is wrong, it means that the state of the page data saved therein is wrong.

[0090] In addition, at the location where the target page initiates a data request, the promise object is taken out from the second global object resultObj according to the target route, and the state of the promise object is waited for to be converted from the pending state to the resolved state or the rejected state, so that the page data can be obtained. At this time, if the source code is obtained after the state of the promise object is converted from the pending state to the resolved state or the rejected state, the page data can be obtained directly from the promise object. It is necessary to wait for the source code to be obtained, and then render the page data on the target page based on the source code. Then, the time taken to open the target page is related to the acquisition time X of the source code, and Max(X,Y)===X, where X is the acquisition time of the source code and Y is the acquisition time of the page data. If the source code has been obtained, but the state of the promise object is still pending, that is, the page data is still in the request, then it is necessary to wait for the state of the promise object to be converted from the pending state to the resolved state or the rejected state, and then obtain the page data from the promise object, and render the page data on the target page based on the source code. At this time, the time it takes to open the target page is related to the time it takes to obtain the page data, Y. Max(X,Y)===Y. In addition, when getting the target data from the promise object, the data corresponding to the target routing key in resultObj, that is, the promise object, is cleared at the same time to avoid affecting the real-time performance of the page data when the target page is visited next time.

[0091] Exemplarily, when the first mapping relationship is saved by the first global object preloadObj={“ / b”:handle}, and the second mapping relationship is saved by the second global object resultObj, the key code for implementing page data acquisition is as follows:

[0092] function handle(targetRouter){

[0093] if (resultObj[targetRouter]) {

[0094] return resultObj[targetRouter]

[0095] }

[0096] const promise=new Promise((resolve)=>{

[0097] / / Initiate data request and obtain data

[0098] / / After successfully getting the data

[0099] resolve(data)

[0100] })

[0101] resultObj[targetRouter]=promise

[0102] return promise.

[0103] Exemplarily, when the first mapping relationship is written in the routing configuration object of a routing library such as react-router, vue-router, etc., and the second global object resultObj is used to save the second mapping relationship, the key code for implementing page data acquisition is as follows:

[0104] / / react-router, vue-router routing configuration object

[0105] export const router = [

[0106] {

[0107] component: loadable(() =>import('@ / web / pages / b')),

[0108] path: ' / b',

[0109] function handle(targetRouter){

[0110] if (resultObj[targetRouter]) {

[0111] return resultObj[targetRouter];

[0112] }

[0113] const promise = new Promise(resolve =>{

[0114] / / Initiate data request and obtain data

[0115] / / After successfully getting the data

[0116] resolve(data);

[0117] });

[0118] resultObj[targetRouter] = promise;

[0119] return promise;

[0120] },

[0121] },

[0122] ].

[0123] In a possible implementation, when the page data is successfully acquired, the state of the page data may be wrong or correct. When the state of the page data is wrong, after the page data is rendered on the target page based on the source code, the target page may display a server error or page crash. Based on this, the acquired page data is the page data returned by the server, and the method of the exemplary embodiment of the present disclosure may also include: in response to determining that the state of the acquired page data is wrong, if the cache includes historical page data that depends on the target route, it can be confirmed that the historical page data is successfully acquired, and then the page data is rendered on the target page based on the source code, so as to ensure that the target page is displayed correctly. It should be understood that the method of the exemplary embodiment of the present disclosure saves the page data that depends on the target route as historical page data in the cache in response to the state of the acquired page data being correct. It should be understood that the cache that saves the historical page data can be defined as a third cache. The third cache can be an independent cache, which can exist independently of the hardware of the first cache and / or the second cache, or it can belong to the same cache as the first cache and / or the second cache, but the storage form and / or storage path are different.

[0124] The requested page data and historical page data of the exemplary implementation of the present disclosure can be stored in different global objects. The target route and the requested page data are stored in resultObj={" / b":promise} in the form of a second global object, while the historical page data can be stored in a third cache in the form of a third global object, and the target route and the historical page data that depends on the target route are stored in the third global object in the form of a key-value pair. For example, the target route / b is the key name of the third global object, and the historical page data data that depends on the target route / b is the key value of the third global object, so that the historical page data data is stored in the third global object in the form of historyDataObj={" / b":data}.

[0125] In actual applications, the page data requested in the exemplary embodiment of the present disclosure may refer to the page data requested based on the preload function calling the server interface. When the client can read the second global object resultObj={" / b":promise} to save the page data, it can detect the state of the promise object. If the state of the promise object is not pending, but resolved or rejected, it means that the client has obtained the target data. If the state of the promise object is resolved, it means that the state of the target data is correct, and the target data can be rendered on the target page based on the source code. If the state of the promise object is rejected, it means that the state of the target data is wrong, and it is necessary to read the historical page data data that depends on the target route / b from the third global object based on the target route / b, and use the historical page data data as the successfully obtained page data and render it on the target page.

[0126] It can be seen that the method of the exemplary embodiment of the present disclosure can confirm the historical page data as the successfully acquired page data in response to the status of the page data requested from the server being an error, and the page data with the status error returned by the server interface can be cleared. Based on this, the method of the exemplary embodiment of the present disclosure can weigh the two factors of the correct opening of the target page and the real-time nature of the data, and give priority to the page data requested from the server, that is, the page data with higher real-time nature, as the successfully acquired page data. If the status of the page data with higher real-time nature is an error, it can also take a step back and focus on the correct display of the target page, to ensure that the target page can still be correctly displayed when the status of the page data with higher real-time nature is an error.

[0127] As can be seen from the above, one or more technical solutions provided in the embodiments of the present disclosure can obtain the page data of the target page and the source code of the target page in parallel in response to the page switching operation of the single-page application, and the source code is the source code returned by the server. Based on this, when it is determined that the source code and page data are successfully obtained, there is no need to request the page data from the server, and the page data can be directly rendered on the target page based on the source code. Therefore, compared with the method of obtaining the source code and page data in a serial manner, the exemplary embodiment of the present disclosure can effectively shorten the target page opening time, reduce the user waiting time, and improve the application fluency and user experience.

[0128] The above mainly introduces the solution provided by the embodiment of the present disclosure from the perspective of the client. It is understandable that in order to implement the above functions, the client includes hardware structures and / or software modules corresponding to the execution of each function. Those skilled in the art should easily realize that, in combination with the units and algorithm steps of each example described in the embodiments disclosed herein, the present disclosure can be implemented in the form of hardware or a combination of hardware and computer software. Whether a function is executed in the form of hardware or computer software driving hardware depends on the specific application and design constraints of the technical solution. Professional and technical personnel can use different methods to implement the described functions for each specific application, but such implementation should not be considered to exceed the scope of the present disclosure.

[0129] The disclosed embodiment can divide the client into functional units according to the above method example. For example, each functional module can be divided according to each function, or two or more functions can be integrated into one processing module. The above integrated module can be implemented in the form of hardware or in the form of software functional modules. It should be noted that the division of modules in the disclosed embodiment is schematic and is only a logical functional division. There may be other division methods in actual implementation.

[0130] In the case of dividing each functional module according to each function, an exemplary embodiment of the present disclosure provides a data processing device, which may be a client or a chip applied to a client. Figure 4 FIG. 1 shows a schematic block diagram of functional modules of a data processing device according to an exemplary embodiment of the present disclosure. Figure 4 As shown, the data processing device 400 provided by the exemplary embodiment of the present disclosure includes:

[0131] The acquisition module 401 is used to obtain the page data and the source code of the target page in parallel in response to the page switching operation on the single-page application, where the source code is the source code returned by the server;

[0132] The rendering module 402 is used to determine whether the source code and the page data are successfully acquired, and render the page data on the target page based on the source code.

[0133] In a possible implementation, the acquisition module 401 is used to determine a target route based on a page switching operation, and synchronously acquire source code and page data dependent on the target route based on the target route.

[0134] In a possible implementation, the acquisition module 401 is used to acquire source code based on the target route, and in response to the cache including page data dependent on the target route, confirm that the page data is acquired successfully.

[0135] In a possible implementation, the acquired page data is page data returned by the server, and the acquisition module 401 is further configured to determine that there is no page data dependent on the target route in the cache before acquiring the page data based on the target route.

[0136] In a possible implementation, the acquisition module 401 is used to acquire source code based on the target route, determine a preload function corresponding to the target route, and request page data dependent on the target route based on the preload function.

[0137] In a possible implementation, the acquisition module 401 is used to determine the preload function corresponding to the target route based on a first mapping relationship, where the first mapping relationship is a mapping relationship between the target route and the preload function.

[0138] In a possible implementation, the acquisition module 401 is used to call the server interface to request page data based on the preload function; in response to the cache including the page data returned by the server interface, confirm that the page data is successfully acquired.

[0139] In one possible implementation, the acquisition module 401 is also used to respond to an error in the status of the acquired page data. If the cache includes historical page data that depends on the target route, confirm that the historical page data is successfully acquired page data; in response to a correct status of the acquired page data, save the page data in the cache as historical page data that depends on the target route.

[0140] In a possible implementation, after the page data is acquired, the target route and the page data dependent on the target route are stored in the cache in a second mapping relationship. The apparatus of the exemplary embodiment of the present disclosure further includes a clearing module 403. The clearing module 403 is used to clear the page data dependent on the target route in the cache in response to acquiring the page data dependent on the target route from the cache.

[0141] In a possible implementation, the rendering module 402 is used to create a rendering tree based on source code and page data, and draw the rendering tree on the target page.

[0142] In a possible implementation, before the source code is obtained, the page data is obtained, and the time taken to open the target page is associated with the time taken to obtain the source code; or,

[0143] After the source code is obtained, the page data is obtained, and the time consumed to open the target page is associated with the time duration for obtaining the page data.

[0144] Figure 5 Schematic block diagram of a chip according to an exemplary embodiment of the present disclosure is shown. Figure 5As shown, the chip 500 includes one or more (including two) processors 501 and a communication interface 502. The communication interface 502 can support the server to execute the data sending and receiving steps in the above data processing method, and the processor 501 can support the server to execute the data processing steps in the above data processing method.

[0145] Optional, such as Figure 5 As shown, the chip 500 also includes a memory 503, which may include a read-only memory and a random access memory, and provides operation instructions and data to the processor. A portion of the memory may also include a non-volatile random access memory (NVRAM).

[0146] In some embodiments, Figure 5 As shown, the processor 501 performs corresponding operations by calling the operation instructions stored in the memory (the operation instructions may be stored in the operating system). The processor 501 controls the processing operations of any one of the terminal devices, and the processor may also be called a central processing unit (CPU). The memory 503 may include a read-only memory and a random access memory, and provides instructions and data to the processor 501. A portion of the memory 503 may also include NVRAM. For example, in an application, the memory, the communication interface, and the memory are coupled together through a bus system, wherein the bus system may include a power bus, a control bus, and a status signal bus in addition to a data bus. However, for the sake of clarity, in Figure 5 Various buses are labeled as bus system 504 .

[0147] The method disclosed in the above embodiment of the present disclosure can be applied to a processor or implemented by a processor. The processor may be an integrated circuit chip with signal processing capabilities. In the implementation process, each step of the above method can be completed by an integrated logic circuit of hardware in the processor or an instruction in the form of software. The above processor may be a general-purpose processor, a digital signal processor (digital signal processing, DSP), an ASIC, a field-programmable gate array (field-programmable gate array, FPGA) or other programmable logic devices, discrete gates or transistor logic devices, discrete hardware components. The methods, steps and logic block diagrams disclosed in the embodiments of the present disclosure can be implemented or executed. The general-purpose processor may be a microprocessor or the processor may also be any conventional processor, etc. The steps of the method disclosed in conjunction with the embodiments of the present disclosure can be directly embodied as being executed by a hardware decoding processor, or executed by a combination of hardware and software modules in a decoding processor. The software module may be located in a mature storage medium in the art such as a random access memory, a flash memory, a read-only memory, a programmable read-only memory or an electrically erasable programmable memory, a register, etc. The storage medium is located in a memory, and the processor reads the information in the memory and completes the steps of the above method in conjunction with its hardware.

[0148] The exemplary embodiment of the present disclosure also provides an electronic device, comprising: at least one processor; and a memory connected to the at least one processor in communication. The memory stores a computer program that can be executed by the at least one processor, and the computer program is used to cause the electronic device to perform the method according to the embodiment of the present disclosure when executed by the at least one processor.

[0149] The exemplary embodiments of the present disclosure also provide a non-transitory computer-readable storage medium storing a computer program, wherein the computer program, when executed by a processor of a computer, is used to cause the computer to perform the method according to the embodiments of the present disclosure.

[0150] The exemplary embodiments of the present disclosure further provide a computer program product, including a computer program, wherein when the computer program is executed by a processor of a computer, the computer is used to enable the computer to perform the method according to the embodiments of the present disclosure.

[0151] refer to Figure 6, a block diagram of an electronic device that can be used as a server or client of the present disclosure will now be described, which is an example of a hardware device that can be applied to various aspects of the present disclosure. The electronic device is intended to represent various forms of digital electronic computer devices, such as laptop computers, desktop computers, workbenches, personal digital assistants, servers, blade servers, mainframe computers, and other suitable computers. The electronic device can also represent various forms of mobile devices, such as personal digital processing, cellular phones, smart phones, wearable devices, and other similar computing devices. The components shown herein, their connections and relationships, and their functions are merely examples and are not intended to limit the implementation of the present disclosure described and / or required herein.

[0152] like Figure 6 As shown, the electronic device 600 includes a computing unit 601, which can perform various appropriate actions and processes according to a computer program stored in a read-only memory (ROM) 602 or a computer program loaded from a storage unit 608 to a random access memory (RAM 603). In RAM 603, various programs and data required for the operation of the electronic device 600 can also be stored. The computing unit 601, ROM 602 and RAM 603 are connected to each other via a bus 604. An input / output interface (I / O interface 605) is also connected to the bus 604.

[0153] A plurality of components in the electronic device 600 are connected to the I / O interface 605, including: an input unit 606, an output unit 607, a storage unit 608, and a communication unit 609. The input unit 606 may be any type of device capable of inputting information to the electronic device 600, and the input unit 606 may receive input digital or character information, and generate key signal inputs related to user settings and / or function control of the electronic device. The output unit 607 may be any type of device capable of presenting information, and may include, but is not limited to, a display, a speaker, a video / audio output terminal, a vibrator, and / or a printer. The storage unit 608 may include, but is not limited to, a disk, an optical disk. The communication unit 609 allows the electronic device 600 to exchange information / data with other devices through a computer network such as the Internet and / or various telecommunication networks, and may include, but is not limited to, a modem, a network card, an infrared communication device, a wireless communication transceiver, and / or a chipset, such as a Bluetooth™ device, a WiFi device, a WiMax device, a cellular communication device, and / or the like.

[0154] The computing unit 601 may be a variety of general and / or special processing components with processing and computing capabilities. Some examples of the computing unit 601 include, but are not limited to, a central processing unit (CPU), a graphics processing unit (GPU), various dedicated artificial intelligence (AI) computing chips, various computing units running machine learning model algorithms, digital signal processors (DSP), and any appropriate processors, controllers, microcontrollers, etc. The computing unit 601 performs the various methods and processes described above. For example, in some embodiments, the exemplary method of the present disclosure may be implemented as a computer software program, which is tangibly included in a machine-readable medium, such as a storage unit 608. In some embodiments, part or all of the computer program may be loaded and / or installed on the electronic device 600 via the ROM 602 and / or the communication unit 609. In some embodiments, the computing unit 601 may be configured to execute the method in any other appropriate manner (e.g., by means of firmware).

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

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

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

[0158] The systems and techniques described herein may be implemented in a computing system that includes backend components (e.g., as a data server), or a computing system that includes middleware components (e.g., an application server), or a computing system that includes frontend components (e.g., a user computer with a graphical user interface or a web browser through which a user can interact with implementations of the systems and techniques described herein), or a computing system that includes any combination of such backend components, middleware components, or frontend components. The components of the system may be interconnected by any form or medium of digital data communication (e.g., a communication network). Examples of communication networks include: a Local Area Network (LAN), a Wide Area Network (WAN), and the Internet.

[0159] A computer system may include clients and servers. Clients and servers are generally remote from each other and usually interact through a communication network. The relationship of client and server is generated by computer programs running on respective computers and having a client-server relationship to each other.

[0160] In the above embodiments, it can be implemented in whole or in part by software, hardware, firmware or any combination thereof. When implemented by software, it can be implemented in whole or in part in the form of a computer program product. The computer program product includes one or more computer programs or instructions. When the computer program or instruction is loaded and executed on a computer, the process or function described in the embodiment of the present disclosure is executed in whole or in part. The computer may be a general-purpose computer, a special-purpose computer, a computer network, a terminal, a user device or other programmable device. The computer program or instruction may be stored in a computer-readable storage medium, or transmitted from one computer-readable storage medium to another computer-readable storage medium, for example, the computer program or instruction may be transmitted from one website site, computer, server or data center to another website site, computer, server or data center by wired or wireless means. The computer-readable storage medium may be any available medium that a computer can access or a data storage device such as a server, data center, etc. that integrates one or more available media. The available medium may be a magnetic medium, for example, a floppy disk, a hard disk, a tape; it may also be an optical medium, for example, a digital video disc (DVD); it may also be a semiconductor medium, for example, a solid state drive (SSD). Although the present disclosure has been described in conjunction with specific features and embodiments thereof, it is apparent that various modifications and combinations may be made thereto without departing from the spirit and scope of the present disclosure. Accordingly, this specification and the drawings are merely exemplary illustrations of the present disclosure as defined by the appended claims, and are deemed to have covered any and all modifications, variations, combinations or equivalents within the scope of the present disclosure. Obviously, those skilled in the art may make various modifications and variations to the present disclosure without departing from the spirit and scope of the present disclosure. Thus, if these modifications and variations of the present disclosure fall within the scope of the claims of the present disclosure and their equivalents, the present disclosure is also intended to include these modifications and variations.

Claims

1. A data processing method, characterized in that: include: In response to a page switching operation on a single-page application, page data of a target page and a source code of the target page are obtained in parallel, the source code being the source code returned by the server; Determining that the page data and the source code are successfully acquired, rendering the page data on the target page based on the source code, and acquiring the page data of the target page and acquiring the source code of the target page from the server in parallel, includes: Determine a target route based on the page switching operation; Acquire the source code based on the target route; When it is determined that the cache contains page data that depends on the target route, in response to the cache containing the page data that depends on the target route, confirming that the page data is successfully acquired; When it is determined that there is no page data dependent on the target route in the cache, determining a preloading function corresponding to the target route, and requesting page data dependent on the target route based on the preloading function; the method further includes: In response to the state error of the acquired page data, if the cache includes historical page data that depends on the target route, confirming that the historical page data is successfully acquired page data; In response to the state of the acquired page data being correct, the page data is stored in the cache as the historical page data that depends on the target route.

2. The method according to claim 1, characterized in that The determining of the preload function corresponding to the target route includes: A preload function corresponding to the target route is determined based on a first mapping relationship, where the first mapping relationship includes a mapping relationship between the target route and the preload function.

3. The method according to claim 1, characterized in that The requesting the page data depending on the target route based on the preloading function includes: Calling a server interface based on the preload function to request the page data; In response to the cache including the page returned by the server interface, it is confirmed that the page data is acquired successfully.

4. The method according to claim 1, characterized in that: After acquiring the page data, the target route and the page data dependent on the target route are stored in the cache in a second mapping relationship. The method further includes: In response to acquiring the page data dependent on the target route from the cache, the page data dependent on the target route in the cache is cleared.

5. The method according to any one of claims 1 to 4, characterized in that: The rendering of the page data on the target page based on the source code includes: Creating a rendering tree based on the source code and the page data; Draw the rendering tree on the target page.

6. The method according to any one of claims 1 to 4, characterized in that: Before obtaining the source code, the page data is obtained, and the time taken to open the target page is associated with the time taken to obtain the source code; or, After the source code is obtained, the page data is obtained, and the time consumed to open the target page is associated with the time duration for obtaining the page data.

7. A data processing device, characterized in that: include: An acquisition module, configured to acquire, in response to a page switching operation on a single-page application, page data of a target page and a source code of the target page in parallel, wherein the source code is a source code returned by a server; A rendering module, used for determining that the page data and the source code are successfully acquired, and rendering the page data on the target page based on the source code; The acquisition module is used to determine the target route based on the page switching operation, acquire the source code based on the target route, and when it is determined that there is page data dependent on the target route in the cache, in response to the cache including the page data dependent on the target route, confirm that the page data is successfully acquired; when it is determined that there is no page data dependent on the target route in the cache, determine the preloading function corresponding to the target route, and request the page data dependent on the target route based on the preloading function; in response to the state of the acquired page data being wrong, if the cache includes historical page data dependent on the target route, confirm that the historical page data is successfully acquired; in response to the state of the acquired page data being correct, save the page data in the cache as the historical page data dependent on the target route.

8. An electronic device, characterized in that: include: processor; as well as, A memory for storing programs; The program includes instructions, which, when executed by the processor, cause the processor to perform the method according to any one of claims 1 to 6.

9. A non-transitory computer-readable storage medium, characterized in that The non-transitory computer-readable storage medium stores computer instructions, and the computer instructions are used to cause the computer to execute the method according to any one of claims 1 to 6.

Images