Page loading method, system and related device

Abstract

The invention discloses a page loading method and system and a related device.In the method, an electronic device can send a loading request of a first page to a server, the server can send a second JS file to the electronic device, the first JS file is obtained by the server according to the first JS file, the first JS file comprises a code used for achieving the first page, and the code is used for achieving the first page. The second JS file comprises a code used for realizing the first screen of the first page and does not comprise a code used for realizing contents except the first screen of the first page, and the electronic equipment can load the first screen of the first page by executing the second JS file after receiving the second JS file, so that the first screen display of the first page is realized. Therefore, when the electronic equipment has the requirement for loading the page, all JS codes of the page do not need to be loaded at a time, only the code corresponding to the first screen needs to be loaded, the loading speed of the first screen of the page is increased, and the time for displaying the first screen of the page by the equipment is shortened.

Description

Technical Field

[0001] The present application relates to the field of computer technology, and in particular to a page loading method, system and related devices. Background Art

[0002] Front-end technology refers to a set of technologies used by developers to build and design the user interfaces of websites and applications. These technologies usually include hypertext markup language (HTML), cascading style sheets (CSS), JavaScript, front-end frameworks, etc. Among them, JavaScript is a programming language used to add interactivity and dynamism to web pages. It can be used to create animation effects, process user input, respond to user behavior, and so on.

[0003] Current front-end projects use packaging technology (Webpack, etc.) to package JavaScript (hereafter referred to as JS) logic code into one or more JS files. When users need to browse web pages, they can download one or more JS files from the server to load the web pages. However, with the increase of third-party libraries, JS logic codes are becoming more and more complex, and the size of the corresponding packaged JS files is getting larger and larger. When the page is loaded, the code that needs to be loaded also increases, which seriously affects the loading speed of the page.

[0004] Therefore, how to improve the loading speed of pages is a problem that needs to be solved urgently. Summary of the invention

[0005] The present application provides a page loading method, system and related devices, which realize the splitting of the JS file of the page and speed up the speed of loading the first screen of the page by the device.

[0006] In a first aspect, an embodiment of the present application provides a page loading method, the method comprising: a server receives a loading request for a first page sent by an electronic device; the server sends a second JS file to the electronic device, the second JS file is obtained by the server based on the first JS file, the first JS file includes code for implementing the first page, the second JS file includes code for implementing the first screen of the first page, and does not include code for implementing content other than the first screen of the first page.

[0007] By implementing the method provided in the first aspect, the server can send a part of the JS file of the page to the electronic device when the electronic device requests to load the page, so as to avoid the server sending too many JS files to the electronic device at one time, so that the electronic device can start loading the page as soon as possible and speed up the loading speed of the first screen of the page.

[0008] In combination with the first aspect, in one implementation, after the server sends the second JS file to the electronic device, the method also includes: the server sends a third JS file to the electronic device, the third JS file is obtained by the server based on the first JS file, and the third JS file includes code for implementing content other than the first screen of the first page.

[0009] In addition to sending the JS file corresponding to the first screen of the page, the server also needs to send the remaining JS files of the page to the electronic device to ensure that the electronic device obtains all JS files of the page.

[0010] In combination with the first aspect, in one implementation, the server sends the third JS file to the electronic device, specifically including: the server sends the third JS file to the electronic device after sending the second JS file for a preset time; or, after receiving a message sent by the electronic device requesting to obtain the third JS file, the server sends the third JS file to the electronic device.

[0011] That is to say, the server can give priority to ensuring that the JS file corresponding to the first screen of the page is sent to the electronic device, so that the electronic device can start loading the first screen of the page as soon as possible.

[0012] In combination with the first aspect, in one implementation, if the function body of the first function in the first JS file belongs to the code used to implement the content other than the first screen of the first page, the third JS file includes the second function, the second function includes the function body of the first function, and the second JS file also includes code for jumping to the second function.

[0013] In this way, the code in the JS file of the page that is divided into different JS files can be determined in units of functions. Developers can quickly split the JS files without having to understand the code execution logic of the JS files, reducing the difficulty of splitting the JS files.

[0014] In combination with the first aspect, in one implementation, after the server sends the second JS file to the electronic device, the method also includes: the server sends a fourth JS file and a fifth JS file to the electronic device in parallel, the fourth JS file includes code for implementing the first content outside the first screen of the first page, and the fifth JS file includes code for implementing the second content outside the first screen of the first page.

[0015] That is to say, the server further splits the split JS files, which can avoid the server sending too large JS files at one time as much as possible, ensure that the electronic device obtains all JS files as soon as possible, and avoid affecting the execution of the main business in the page.

[0016] In combination with the first aspect, in one implementation, before the server receives a loading request for the first page sent by the electronic device, the method also includes: the server loads the first page; the server determines a second JS file based on the loading process of the first page, the second JS file includes the code executed in the first JS file during the first screen loading process of the first page, and does not include the code not executed in the first JS file during the first screen loading process of the first page.

[0017] That is to say, the server can test the code execution of the JS file during the page loading process in advance, so as to achieve reasonable splitting of the JS file. In this way, when the electronic device requests the server to obtain the JS file of the page for the first time, the server can directly send the split JS file to the electronic device.

[0018] In combination with the first aspect, in one implementation, the server determines the second JS file based on the loading process of the first page, specifically including: the server obtains the coverage file generated after loading the first page, the coverage file indicates the code executed and the code not executed during the first screen loading process of the first page; the server determines the second JS file based on the coverage file.

[0019] In other words, the server can achieve reasonable splitting of JS files through the page coverage file.

[0020] In combination with the first aspect, in one implementation, before the server receives a loading request for a first page sent by an electronic device, the method further includes: the server determines a second JS file based on a loading process of the first page by the electronic device; before the server determines the second JS file, the method further includes: the server receives indication information of the second JS file sent by the electronic device; or, the loading request carries indication information of the second JS file.

[0021] That is to say, when the electronic device loads the page for the first time, it can obtain the code execution status of the JS file in the page, and determine how to split the JS file according to the code execution status. In this way, when the electronic device loads the page again, it can request the server to obtain the split JS file. There is no need for the server to send the complete JS file at one time, which increases the loading speed of the first screen of the loading page.

[0022] In a second aspect, an embodiment of the present application provides a page loading method, the method comprising: an electronic device sends a loading request for a first page to a server; the electronic device receives a second JS file sent by the server, the second JS file is obtained by the server based on the first JS file, the first JS file includes code for implementing the first page, the second JS file includes code for implementing the first screen of the first page, and does not include code for implementing content other than the first screen of the first page; after receiving the second JS file, the electronic device loads the first screen of the first page by executing the second JS file; the electronic device displays the first screen of the first page.

[0023] By implementing the method provided in the second aspect, the electronic device can obtain a part of the JS file of the page when requesting to obtain the JS file of the page, so that the electronic device can quickly load the first screen of the page, helping the user to quickly display the page to the user when there is a need to browse the page.

[0024] In combination with the second aspect, in one implementation, after the electronic device receives the second JS file sent by the server, the method also includes: the electronic device receives a third JS file sent by the server, the third JS file is obtained by the server based on the first JS file, and the third JS file includes code for implementing content other than the first screen of the first page; the electronic device loads the content other than the first screen of the first page by executing the third JS file.

[0025] In addition to receiving the JS file corresponding to the first screen of the page, the electronic device will also receive the JS file of the content outside the first screen of the page from the server to ensure that the complete JS file of the page is obtained.

[0026] In combination with the second aspect, in one implementation, after the electronic device loads the content outside the first screen of the first page by executing a third JS file, the method also includes: the electronic device detects a first operation acting on the first page; the electronic device displays the first content outside the first screen of the first page or starts a first function in the first page, and the first function is a function contained in the content outside the first screen of the first page.

[0027] That is to say, receiving the JS file corresponding to the content outside the first screen of the page can enable the electronic device to load the content or functions outside the first screen of the page and present the content contained in the page to the user.

[0028] In combination with the second aspect, in one implementation, the electronic device receives the second JS file and the third JS file sent by the server before the DCL of the document object model content of the first page is loaded.

[0029] Among them, completing the loading of all JS files of the page before DCL can avoid affecting the execution of the main business of the page.

[0030] In combination with the second aspect, in one implementation method, the electronic device receives the third JS file sent by the server, specifically including: the electronic device receives the third JS file sent by the server after receiving the second JS file for a preset time length; or, the electronic device receives the third JS file sent by the server after sending a message to the server requesting to obtain the third JS file.

[0031] That is to say, the electronic device can prioritize the loading of the JS file corresponding to the first screen of the page, delay the loading of the JS file of the content other than the first screen of the page, and speed up the loading speed of the electronic device for the first screen of the page.

[0032] In combination with the second aspect, in one implementation method, if the function body of the first function in the first JS file belongs to the code used to implement the content other than the first screen of the first page, the third JS file includes the second function, the second function includes the function body of the first function, and the second JS file also includes code for jumping to the second function.

[0033] In this way, the code in the JS file of the page that is divided into different JS files can be determined in units of functions. Developers can quickly split the JS files without having to understand the code execution logic of the JS files, reducing the difficulty of splitting the JS files.

[0034] In combination with the second aspect, in one implementation, after the electronic device receives the second JS file sent by the server, the method also includes: the electronic device receives a fourth JS file and a fifth JS file sent in parallel by the server, the fourth JS file includes a code for implementing the first content outside the first screen of the first page, and the fifth JS file includes a code for implementing the second content outside the first screen of the first page; the electronic device loads the first content in the first page by executing the fourth JS file; the electronic device loads the second content in the first page by executing the fifth JS file.

[0035] That is to say, the electronic device can obtain the content of different parts split from the JS file in multiple times, so that the electronic device can obtain all JS files as soon as possible to avoid affecting the execution of the main business in the page.

[0036] In combination with the second aspect, in one implementation, before the electronic device sends a loading request for the first page to the server, the method also includes: the electronic device loads the first page; after the electronic device loads the first page, the method also includes: the electronic device sends indication information of the second JS file to the server; or, the loading request carries indication information of the second JS file.

[0037] That is to say, when the electronic device loads the page for the first time, it can obtain the code execution status of the JS file in the page, and determine how to split the JS file according to the code execution status. In this way, when the electronic device loads the page again, it can request the server to obtain the split JS file. There is no need for the server to send the complete JS file at one time, which increases the loading speed of the first screen of the loading page.

[0038] In a third aspect, an embodiment of the present application provides a page loading method, the method comprising: an electronic device sends a loading request for a first page to a server; the server sends a second JS file to the electronic device, the second JS file is obtained by the server based on the first JS file, the first JS file includes code for implementing the first page, the second JS file includes code for implementing the first screen of the first page, and does not include code for implementing content other than the first screen of the first page; after receiving the second JS file, the electronic device loads the first screen of the first page by executing the second JS file; the electronic device displays the first screen of the first page.

[0039] By implementing the method provided in the third aspect, the server can split the JS file corresponding to the page into smaller files, so that when the electronic device requests to load the page, it does not need to wait until the complete JS file is obtained before starting to execute the JS file. In other words, the electronic device can start executing the JS code after obtaining part of the code in the JS file, thereby speeding up the loading speed of the first screen of the page.

[0040] In combination with the third aspect, in one implementation, after the server sends the second JS file to the electronic device, the method also includes: the server sends a third JS file to the electronic device, the third JS file is obtained by the server based on the first JS file, and the third JS file includes code for implementing content other than the first screen of the first page; the electronic device loads the content other than the first screen of the first page by executing the third JS file.

[0041] In combination with the third aspect, in one implementation, after the electronic device loads the content outside the first screen of the first page by executing the third JS file, the method also includes: the electronic device detects a first operation acting on the first page; the electronic device displays the first content outside the first screen of the first page or starts the first function in the first page, and the first function is a function contained in the content outside the first screen of the first page.

[0042] In combination with the third aspect, in one implementation, the electronic device receives the second JS file and the third JS file sent by the server before the DCL of the document object model content of the first page is loaded.

[0043] In combination with the third aspect, in one implementation, the server sends the third JS file to the electronic device, specifically including: the server sends the third JS file to the electronic device after sending the second JS file for a preset time; or, the server sends the third JS file to the electronic device after receiving a message sent by the electronic device requesting to obtain the third JS file.

[0044] In combination with the third aspect, in one implementation method, if the function body of the first function in the first JS file belongs to the code used to implement the content other than the first screen of the first page, then the third JS file includes the second function, the second function includes the function body of the first function, and the second JS file also includes code for jumping to the second function.

[0045] In combination with the third aspect, in one implementation, after the server sends the second JS file to the electronic device, the method also includes: the server sends a fourth JS file and a fifth JS file to the electronic device in parallel, the fourth JS file includes a code for implementing the first content outside the first screen of the first page, and the fifth JS file includes a code for implementing the second content outside the first screen of the first page; the electronic device loads the first content in the first page by executing the fourth JS file; the electronic device loads the second content in the first page by executing the fifth JS file.

[0046] In combination with the third aspect, in one implementation, before the electronic device sends a request to load the first page to the server, the method also includes: the server loads the first page; the server determines the second JS file based on the loading process of the first page, the second JS file includes the code executed in the first JS file during the first screen loading process of the first page, and does not include the code not executed in the first JS file during the first screen loading process of the first page.

[0047] In combination with the third aspect, in one implementation method, the server determines the second JS file based on the loading process of the first page, specifically including: the server obtains the coverage file generated after loading the first page, the coverage file indicates the code executed and the code not executed during the first screen loading process of the first page; the server determines the second JS file based on the coverage file.

[0048] In combination with the third aspect, in one implementation, before the electronic device sends a loading request for the first page to the server, the method also includes: the electronic device loads the first page; the server determines the second JS file based on the loading process of the first page; before the server determines the second JS file, the method also includes: the electronic device sends indication information of the second JS file to the server; or, the loading request carries indication information of the second JS file.

[0049] In a fourth aspect, an embodiment of the present application provides an electronic device, comprising a memory, one or more processors, and one or more programs; when the one or more processors execute the one or more programs, the electronic device implements the method described in the first aspect or any one of the implementation methods in the first aspect.

[0050] In the fifth aspect, an embodiment of the present application provides an electronic device, comprising a memory, one or more processors, and one or more programs; when the one or more processors execute the one or more programs, the electronic device implements the method described in the second aspect or any one of the implementation methods in the second aspect.

[0051] In a sixth aspect, an embodiment of the present application provides a computer-readable storage medium, comprising instructions, which, when executed on an electronic device, enable the electronic device to execute the method described in the first aspect or any one of the implementations of the first aspect.

[0052] In a seventh aspect, an embodiment of the present application provides a computer program product. When the computer program product runs on a computer, it enables the computer to execute the method described in the above-mentioned first aspect or any one of the implementations of the first aspect. BRIEF DESCRIPTION OF THE DRAWINGS

[0053] Figure 1 A communication system 1000 provided in an embodiment of the present application;

[0054] Figure 2 A schematic diagram of the process of splitting JS files provided in an embodiment of the present application;

[0055] Figure 3 A schematic diagram of code execution after the first screen of a web page is loaded provided in an embodiment of the present application;

[0056] Figure 4 A schematic diagram of the principle of splitting JS files is provided for the embodiment of the present application;

[0057] Figure 5 A schematic diagram showing the size comparison of JS files before and after splitting provided in an embodiment of the present application;

[0058] Figure 6 A schematic diagram of a page loading method according to an embodiment of the present invention;

[0059] Figure 7 A comparison timing diagram of the unsplit JS file and the split JS file during the page loading process provided in the embodiment of the present application;

[0060] Figure 8 A page loading sequence diagram of the electronic device 100 provided in an embodiment of the present application when loading the JS file after the splitting of page A;

[0061] Fig. 9 A schematic diagram of the hardware structure of an electronic device 100 provided in an embodiment of the present application;

[0062] Fig.10 is a software structure block diagram of the electronic device 100 according to an embodiment of the present application;

[0063] Fig.11 A schematic diagram of the hardware structure of the server 200 provided in an embodiment of the present application. DETAILED DESCRIPTION

[0064] The technical solutions in the embodiments of the present application will be described clearly and in detail below in conjunction with the accompanying drawings. In the description of the embodiments of the present application, unless otherwise specified, " / " means or, for example, A / B can mean A or B; "and / or" in the text is only a description of the association relationship of associated objects, indicating that there can be three relationships, for example, A and / or B can mean: A exists alone, A and B exist at the same time, and B exists alone. In addition, in the description of the embodiments of the present application, "multiple" means two or more than two.

[0065] In the following, the terms "first" and "second" are used for descriptive purposes only and are not to be understood as suggesting or implying relative importance or implicitly indicating the number of the indicated technical features. Thus, a feature defined as "first" or "second" may explicitly or implicitly include one or more of the features, and in the description of the embodiments of the present application, unless otherwise specified, "plurality" means two or more.

[0066] After the device detects the user's operation of opening a page and before receiving any further operation from the user, the device often displays the first screen of the page when opening the page. The first screen refers to a part of the content contained in the page before the user opens the page and inputs any operation to trigger further response of the page (such as starting the function of a third-party plug-in). Only when the device further detects the user's operation on the page will it start other functions of the page or display other content contained in the page.

[0067] Taking the Huawei Mall webpage as an example, the Huawei Mall webpage contains options corresponding to multiple device types. Only when the mouse cursor hovers over the option corresponding to one of the device types, the Huawei Mall webpage will display the sub-options corresponding to the multiple device series contained in the device type. It can be seen that the options corresponding to these multiple device types are the content that will be displayed when the user opens the page, and the sub-options corresponding to these multiple device types are the content that will be displayed after further operation by the user.

[0068] After the device detects that the user has opened a page, it often loads the JS files corresponding to all the contents of the page at once, that is, all the JS files of the page, including the code used for the first screen and the redundant code used for the content outside the first screen. It can be seen that the loading of redundant code affects the loading speed of the page.

[0069] Therefore, you can split the code used for the first screen and the code used for content outside the first screen into different files to avoid the device loading all the code at once, thereby improving the loading speed of the first screen of the page. Among them, the common ways to split the code are:

[0070] 1) When loading the specified code, delay the loading of the code through Reac.lazy() to achieve code splitting;

[0071] 2) Developers divide different codes into several separate files based on manual experience.

[0072] Among them, method 1 requires the cooperation of developers when developing codes, and has limited application scenarios, and cannot realize the later splitting of existing JS files. Method 2 requires developers to obtain the source code of JS files and be familiar with the code logic of JS files, so as to realize the code splitting in JS files based on manual experience.

[0073] The embodiment of the present application provides a page loading method, which can split the JS_C file of page A into a JS_A file and a JS_B file, wherein the JS_C file includes code for implementing page A, the JS_A file includes code for implementing the first screen of page A, and the JS_B file includes code for implementing content other than the first screen of page A. When the electronic device sends a request to load the page A to the server, the server can send the JS_A file to the electronic device, and after receiving the JS_A file, the electronic device can execute the JS_A file to load the first screen of page A, thereby displaying the first screen of page A.

[0074] JS_C file is the JS file of page A. JS file refers to a text file of JavaScript code, which is used to realize the interaction and dynamic effects of web pages. After the electronic device detects the user operation of opening page A, the electronic device can send a loading request of page A to the server, requesting to obtain relevant data for displaying the page, including: HTML, CSS, JS files, etc. After that, the electronic device can render page A by parsing the relevant data obtained, so as to finally display page A.

[0075] The JS_A file and the JS_B file can be determined according to the code execution in the JS_C file during the loading process of page A. For example, the JS_A file may include the code executed by page A during the first screen loading process, and the JS_B file may include the code not executed by page A during the first screen loading process.

[0076] Furthermore, in addition to sending the JS_A file to the electronic device, the server can also delay sending the JS_B file. In this way, the electronic device can load the JS_A file first and delay loading the JS_B file, so that the electronic device can quickly obtain the JS code required to load the first screen of page A, thereby speeding up the loading speed of the first screen of page A.

[0077] It can be seen that the page loading method provided in the embodiment of the present application can divide the JS file corresponding to the page into multiple files. In this way, when the electronic device requests to load the page, there is no need to wait until the complete JS file is obtained before starting to execute the JS file and parse HTML, etc. In other words, the electronic device can start executing JS code and parsing HTML and other operations after obtaining part of the code in the JS file, thereby speeding up the loading speed of the page.

[0078] Figure 1 A communication system 1000 is provided in an embodiment of the present application.

[0079] like Figure 1 As shown, the communication system 1000 may include: an electronic device 100 and a server 200 .

[0080] Among them, the electronic device 100 can refer to a user-oriented device, which can refer to a mobile phone, tablet, computer and other devices. The electronic device 100 can be used to send a page loading request to the server 200 according to the user operation of opening the page, and obtain the relevant data of the page sent by the server 200, and load the page by parsing these data, and display the page.

[0081] The server 200 may be used to store relevant data of the page, including HTML, CSS, JS files, etc. After receiving a page loading request sent by the electronic device 100, the server 200 may send the relevant data of the page to the electronic device 100.

[0082] In an embodiment of the present application, the server 200 can also split the JS file into multiple files, so that after the server 200 receives the page loading request sent by the electronic device 100, the partial files split from the JS file can be sent to the electronic device 100 first, so as to avoid the electronic device 100 loading redundant code when loading the first screen of the page, so that the electronic device 100 can load the first screen of the page as soon as possible.

[0083] In addition, it should be noted that the server mentioned in the embodiments of the present application, such as server 200, can be a server or a server cluster composed of multiple servers. For example, server 200 can be a server cluster in which multiple servers are deployed through a distributed architecture, and the cluster can include one or more of a cloud computing server, a content delivery network (Content Delivery Network, CDN) server, a network time protocol (Network Time Protocol, NTP), a domain name resolution system (Domain Name System, DNS) server, etc. Among them, the various servers can coordinate with each other to jointly complete functions such as computing, data storage, and communication.

[0084] It is understandable that the communication system 1000 may also include other electronic devices, such as the electronic device 300. Similar to the electronic device 100, the electronic device 300 may also send a page loading request to the server 200, obtain the split JS file sent by the server 200, and load the first screen of the page based on the split JS file. The embodiment of the present application does not limit the number of electronic devices included in the communication system 1000.

[0085] The page loading method provided in the embodiment of the present application can have the following two application scenarios:

[0086] 1) The developer uses the page loading method to determine how to split the JS file

[0087] Developers can test the code execution of JS files during page operation through the server 200, and then split the JS files into multiple files according to the code execution. In this way, when the server 200 receives a page loading request from the electronic device 100, the server 200 can send the split files to the electronic device 100, so that the electronic device 100 can speed up the loading speed of the first screen of the page.

[0088] It can be seen that in this application scenario, developers can use this page loading method to optimize the JS files of the page and split the JS files reasonably so that the electronic device can quickly complete the loading of the JS code required for the first screen of the page. During the loading process of the first screen of the page, there is no need to load all the JS codes, and the page can be quickly displayed to the user when the user has a page browsing need.

[0089] 2) The user uses the page loading method to determine how to split the JS file

[0090] When the electronic device 100 loads a page for the first time, it can record the code execution of the JS file during the page loading process, and use the code execution to determine the segmentation information of the JS file of the page. In this way, when the electronic device 100 loads the page again, the electronic device 100 can first send the segmentation information to the server 200, so that the server 200 can split the JS file of the page into multiple files according to the segmentation information, and send the split files to the electronic device 100, so that the electronic device 100 can quickly complete the loading of the first screen of the page after receiving the JS code required to load the first screen of the page.

[0091] It can be seen that in this application scenario, although the user who browses the page cannot obtain the benefit of fast loading of the first screen of the page when browsing the page for the first time, the electronic device can determine the segmentation information of the JS file of the page according to the code execution of the JS file during the loading of the page, and there is no need for the developer to intervene in the optimization of the JS file. In this way, when the user browses the page again, only part of the JS file needs to be downloaded from the server to start loading the page, thereby speeding up the loading speed of the first screen of the page.

[0092] It is understandable that the page loading method provided in the embodiment of the present application may also have other application scenarios, and the embodiment of the present application is not limited to this.

[0093] Figure 2 A schematic diagram of the process of splitting JS files provided in an embodiment of the present application.

[0094] S101. Determine the code execution status of the JS_C file during the loading process of page A.

[0095] Among them, page A can refer to a front-end web page in a browser application, or it can refer to an application page in an application developed using JavaScript language (for example, an application built using the ReactNative application development framework).

[0096] A JS_C file may refer to one of the JS files written by the developer to build page A. A JS file is a text file containing JavaScript code written by the developer when building a page. It is used to implement the interaction and dynamic effects of the page. It can be used to create page animation effects, process user input, and respond to user behavior, etc. The code contained in the JS_C file usually consists of a series of functions, variables, and logical operations. These codes use JavaScript syntax and built-in objects, such as the document object model (DOM) and the browser object model (BOM).

[0097] The process of loading page A includes executing the code in the JS_C file. Among them, since the JS file of page A usually contains all the JS codes required by page A, when initially loading page A, the device usually only needs to display a part of the content of page A, such as the first screen of the page. After the device further detects the user's sliding operation on the page, the device will display the rest of the content of page A. Therefore, when loading the first screen of page A, only part of the code in the JS_C file is often executed.

[0098] By determining the code execution status of the JS_C file during the loading of page A, you can understand the code that is executed and the code that is not executed in the JS_C file during the loading of the first screen of page A.

[0099] In some implementations, the code execution of the JS_C file can be determined by obtaining the code coverage file generated during the loading process of page A. Exemplarily, taking the Huawei Mall web page as an example, a coverage tool such as ScriptCover, Istanbul, and JSCover can be installed in the browser. When the browser obtains the URL of the Huawei Mall web page, the loading of the Huawei Mall web page can be triggered. After the first screen of the page is loaded, the code coverage file of one or more JS files corresponding to the Huawei Mall web page can be output through the coverage tool installed in the browser. The code coverage file describes the executed code and unexecuted code in one or more JS files during the first screen loading process of the Huawei Mall web page.

[0100] For example, Figure 3 A schematic diagram of code execution after the first screen of a web page is loaded provided in an embodiment of the present application.

[0101] from Figure 3 It can be seen that during the loading process of the first screen of a web page, multiple JS files will be executed, and a certain proportion of the code in different JS files is not executed. The code non-execution rate is the ratio of the size of the non-executed code to the total code size.

[0102] S102. Determine whether the JS_C file needs to be split.

[0103] Wherein, whether the JS_C file needs to be split can be determined according to the code execution of the JS_C file. Exemplarily, if the code non-execution rate of the JS_C file is greater than a threshold, such as 30%, it is determined that the JS_C file needs to be split, and step S103 is executed, otherwise, it is determined that the JS_C file does not need to be split.

[0104] That is to say, if the code execution rate of the JS file is too high, it means that most of the code in the JS file is not executed during the loading of the first screen of the page, and a lot of time is spent on loading redundant code in the JS file. Therefore, the JS file can be split into multiple JS files so that the electronic device only needs to load part of the JS code when loading the first screen of the page.

[0105] S103. Split the JS_C file into a JS_A file and a JS_B file according to the code execution status of the JS_C file.

[0106] Specifically, according to the code execution status of the JS_C file, it can be understood that during the first screen loading process of page A, the code executed and the code not executed in the JS_C file are divided into the JS_A file when splitting the JS_C file. The code executed in the JS_C file is divided into the JS_A file, and the code not executed in the JS_C file is divided into the JS_B file.

[0107] It can be seen that the code contained in the JS_A file is the necessary code for the first screen loading process of page A, while the code contained in the JS_B file is the optional code for the first screen loading process of page A. In other words, the JS_C file includes the code for implementing page A, the JS_A file includes the code for implementing the first screen of page A, and the JS_B file includes the code for implementing the content other than the first screen of page A.

[0108] In this way, when the electronic device needs to load page A, it can preferentially obtain the JS_A file from the server so as to complete the loading of the JS_A file as soon as possible, thereby starting the execution of the JS_A file as soon as possible and speeding up the loading speed of the first screen of page A.

[0109] Among them, the JS_C file can be split at the function level to obtain the JS_A file and the JS_B file. In this way, the code in the JS file of the page that is divided into different JS files can be determined by function. Developers do not need to understand the code execution logic of the JS file to quickly realize the JS file splitting, which reduces the difficulty of splitting the JS file.

[0110] In a specific implementation, the entire JS_C file can be serialized, and according to the code execution of the JS_C file, the pointer starting position corresponding to the split point where the executed code and the unexecuted code are located in the JS_C file is determined, the unexecuted code is extracted, and an abstract syntax tree is generated. Then, the JS_C file is split according to the function declaration in the abstract syntax tree, and the function body content is split to form a JS_B file, and the remaining code forms a JS_A file. Among them, by adding a jump instruction in the JS_A file, it can be realized that during the running of the JS_A file, the jump instruction is used to jump to the code split into the JS_B file, ensuring that the split JS_A file and JS_B file still retain the complete program control flow of the JS_C file.

[0111] For example, Figure 4 A schematic diagram of the principle of splitting JS files is provided for an embodiment of the present application.

[0112] like Figure 4 As shown, the JS_C file may include: function 1 and function 2. Function 1 includes function body 1, and function 2 includes function body 2. If, during the first screen loading process of page A, function body 1 and function body 2 are determined to be unexecuted codes, when splitting the JS_C file, the function body of function 1 may be replaced with a jump instruction for jumping to function 3, and the function body of function 2 may be replaced with a jump instruction for jumping to function 4, thereby obtaining a JS_A file, extracting function body 1 and function body 2 from the JS_C file to form function 3 and function 4, respectively, thereby obtaining a JS_B file.

[0113] In some implementations, the jump instruction may refer to eval(). When running eval() in the JS_A file, in order to ensure the correct context and scope, the this pointer may be passed by adding call() in the JS_A file.

[0114] The following is a specific example to describe the JS file splitting process.

[0115] Assume that the JS_C file is as follows:

[0116]

[0117] If during the loading process of page A, fields n+2-n+6 of the JS_C file are unexecuted instructions, fields n+2-n+6 can be replaced with instructions for implementing function jumps to obtain the JS_A file, and fields n+2-n+6 can be extracted to obtain the JS_B file.

[0118] The JS_A file is as follows:

[0119]

[0120] The JS_B file is as follows:

[0121]

[0122] It can be seen that the JS_A file is obtained by replacing the fields n+2-n+6 in the JS_C file with the fields n+2-n+4 in the JS_A file. In the JS_A file, var_1_1 is used to declare variables, eval(f_1_1()) is used to implement function calls and redirect the program control flow to the f_1_1() function, and return_1_1.call(this) is used to pass the this pointer to ensure the correct context and scope. The JS_B file includes the f_1_1() function generated according to the fields n+2-n+6 in the JS_C file.

[0123] It is understandable that the above JS_A file, JS_B file, and JS_C file are only illustrative examples and do not constitute a limitation on the embodiments of the present application. In other embodiments of the present application, other instructions (such as call, bl instructions, etc.) can also be used to implement the calling of functions in the JS_B file during the execution of the JS_A file to ensure that the direction of the program control flow during the execution of the JS_A file and the JS_B file is consistent with the direction of the program control flow when the JS_C file is executed.

[0124] In some embodiments, after the JS_C file is split into the JS_A file and the JS_B file, the JS_B file can be further split into two or more files, for example, the JS_B file is split into the JS_B1 file and the JS_B2 file, wherein the JS_B1 file includes a code for implementing a part of the content (e.g., the first content) other than the first screen of the first page, and the JS_B2 file includes a code for implementing another part of the content (e.g., the second content) other than the first screen of the first page. In this way, the server 200 can be prevented from sending a JS file of too large a volume at one time as much as possible, so as to avoid affecting the execution of the main business in page A.

[0125] Among them, the JS_B file can be split at the function level. Since the JS_B file is composed of multiple functions, the code divided into different files can be determined in units of functions. For example, if the JS_B file contains function 1, function 2, and function 3, function 1 and function 2 can be divided into the JS_B1 file, and function 3 can be divided into the JS_B2 file. Further, the code divided into different files can also be determined according to the order of execution of the functions in the JS_B file during the operation of page A. For example, if the order of execution of function 1, function 2, and function 3 during the operation of page A is function 3, function 1, and function 2, function 3 and function 1 can be divided into the JS_B1 file, and function 2 can be divided into the JS_B2 file. In this way, when the server 200 sends the JS_B1 file and the JS_B2 file to the electronic device 100, the JS_B1 file can be sent to the electronic device 100 first, ensuring the normal operation of the business that may be executed first during the loading of page A by the electronic device 100.

[0126] In addition, since the JS_A file and the JS_B file are files split from the JS_C file, the sizes of the JS_A file and the JS_B file are both smaller than the size of the JS_C file.

[0127] in, Figure 5 This is a schematic diagram of the size comparison of JS files before and after splitting provided in the embodiment of the present application. Figure 5 It can be seen that the size of the JS file before splitting is 3M, and the size of the JS file after splitting is 1.2M.

[0128] In this way, when the server sends the JS_A file and the JS_B file, the amount of data sent is small, which increases the probability that the device successfully receives the JS file and also shortens the time spent by the device to obtain the JS file.

[0129] It can be seen from steps S101-S103 that the function-level splitting of JS files can be achieved by recording the code execution status of the JS files during the running of the page, and the codes at the front and back of the page loading process can be divided into different files respectively. In this way, when the electronic device loads the page, the size of the JS files loaded by the electronic device at one time can be reduced as much as possible, the time to start page loading can be advanced, and the speed of loading the first screen of the page can be accelerated. In addition, the splitting of JS files does not require developers to understand or modify the business code logic content in the JS files, which reduces the workload of developers.

[0130] It is understandable that, according to the application scenarios mentioned above, steps S101-S103 may exist in the following two situations:

[0131] 1) Steps S101-S103 are performed by the server 200

[0132] During the development and testing phase, server 200 can test the loading of page A to obtain the code execution status of the JS_C file, determine whether the JS_C file needs to be split according to the code execution status of the JS_C file, and if the JS_C file needs to be split, split the JS_C file into multiple files, that is, determine the JS_A file and the JS_B file, to optimize the JS file of page A.

[0133] In this way, when the user needs to browse page A, the server can directly send the split JS file of page A to the electronic device used by the user, avoiding the electronic device from loading a JS file that is too large when loading the first screen of the page, thereby shortening the time it takes for the user to browse to the first screen of page A.

[0134] 2) Steps S101-S102 are performed by the electronic device 100, and step S103 is performed by the electronic device 100 and the server 200 together.

[0135] When loading page A for the first time, the electronic device 100 can download the unsplit JS_C file from the server 200, and in the process of loading page A, record the code execution status of the JS_C file, determine whether the JS_C file needs to be split according to the code execution status of the JS_C file, and if the JS_C file needs to be split, send the splitting information of the JS_C file (such as the indication information of the JS_A file and the indication information of the JS_B file) to the server 200, and the server 200 splits the JS_C file according to the splitting information, that is, determines the JS_A file and the JS_B file.

[0136] Among them, the splitting information of the JS_C file can be carried in the page loading request sent by the electronic device 100 to the server 200 again, or the electronic device 100 can also send the splitting information of the JS_C file to the server 200 before sending the page loading request to the server 200 again after determining that the JS_C file needs to be split.

[0137] In this way, when the electronic device 100 loads page A again or other devices need to load page A, the split JS file can be downloaded from the server 200, avoiding the electronic device from loading a JS file that is too large when loading the first screen of the page, thereby shortening the time it takes for the user to browse to the first screen of page A.

[0138] It is understandable that in situation 2, after obtaining the code execution status of the JS_C file, the electronic device 100 can also directly send the code execution status to the server 200, and the server 200 can determine how to split the JS_C file based on the code execution status.

[0139] Figure 6 A flowchart of a page loading method provided in an embodiment of the present application.

[0140] S201. The electronic device 100 detects a user operation of opening page A.

[0141] For the specific description of page A, please refer to the relevant description in the aforementioned step S101, which will not be repeated here.

[0142] Exemplarily, the user operation may include an operation of the user inputting the URL of page A, or the user operation may include an operation of the user opening an application.

[0143] S202. The electronic device 100 sends a loading request for page A to the server 200.

[0144] In response to a user operation of opening page A, the electronic device 100 may send a loading request of page A to the server 200. Exemplarily, the loading request may refer to an http request, and the loading request may include the URL of page A.

[0145] S203. The server 200 sends the JS_A file of page A to the electronic device 100.

[0146] Among them, the JS_A file includes code for implementing the first screen of page A, and does not include code for implementing content other than the first screen of page A.

[0147] Since the server 200 has split the JS_C file into the JS_A file and the JS_B file, after the server 200 receives the loading request of the page A, the server 200 can send the JS_A file to the electronic device 100. In this way, compared with the server 200 directly sending the JS_C file, the amount of data sent by the server 200 at one time is reduced.

[0148] It should be understood that after the server 200 receives the loading request of page A, the data sent by the server 200 to the electronic device 100 includes not only the JS_A file but also the HTML, CSS and other information of page A, which is not limited here. In addition, the server 200 may also split the JS_C file after receiving the loading request of page A, and the embodiment of the present application does not limit the timing of splitting the JS_C file.

[0149] S204. The server 200 sends the JS_B file of page A to the electronic device 100.

[0150] The JS_B file includes code for implementing the content beyond the first screen of page A.

[0151] The server 200 may send the JS_B file in the following situations:

[0152] 1) The server 200 can send the JS_B file after a preset time of sending the JS_A file

[0153] That is to say, compared to the server 200 quickly sending the JS_A file after receiving the loading request of page A, the server 200 can delay sending the JS_B file, thereby preferentially ensuring that the electronic device 100 successfully obtains the JS_A file, that is, completes the loading of the JS_A file.

[0154] In a specific implementation, the electronic device 100 can delay loading the JS_B file by adding a defer tag in the JS_B file.

[0155] 2) The server 200 can send the JS_B file after receiving the request from the electronic device 100

[0156] That is, the electronic device 100 can determine when to obtain the JS_B file from the server 200 according to its own needs. For example, after completing the loading of the JS_A file, the electronic device 100 can send a request to the server 200 to obtain the JS_B file, thereby obtaining the JS_B file from the server 200.

[0157] It is understandable that the server 200 may also send the JS_A file and the JS_B file to the electronic device 100 in parallel. That is, step S203 and step S204 may be executed in parallel. In this way, the time for the electronic device 100 to obtain all JS files of page A may be shortened.

[0158] In some embodiments, the electronic device 100 needs to complete the loading of all JS files (ie, JS_A file and JS_B file) of page A before the document object model content of page A is loaded (DOM content loaded, DCL) to avoid affecting the execution of the main business of page A.

[0159] Further, considering that if the volume of the JS_B file is too large, loading the JS_B file may consume too much time, which may easily lead to the JS_B file not being loaded before the DCL. Therefore, it can be determined according to the time of the DCL whether the server 200 splits the JS_B file before sending the JS_B file. For example, if it is determined according to the time of the DCL that the electronic device 100 cannot complete the loading of the JS_B file before the DCL, the server 200 can split the JS_B file into a JS_B1 file and a JS_B2 file, and send the JS_B1 file and the JS_B2 file to the electronic device 100 in parallel, so as to ensure that the electronic device 100 completes the loading of the JS_B file before the DCL as much as possible. Among them, the electronic device 100 can load a part of the content (such as the first content) other than the first screen in the first page by executing the JS_B1 file, and load another part of the content (such as the second content) other than the first screen in the first page by executing the JS_B2 file. Specific information about the splitting of the JS_B file can be found in the relevant description in the above step S103, which will not be repeated here.

[0160] S205. After the JS_A file is loaded, the electronic device 100 loads the first screen of page A by executing the JS_A file.

[0161] Since the JS_A file contains all the content required for loading the first screen of page A, the electronic device 100 can start loading page A after the JS_A file is loaded, without waiting to obtain all JS files of page A before starting loading page A, and the electronic device 100 can load the first screen of page A by executing the JS_A file.

[0162] Among them, the first screen loading process of page A includes parsing HTML, CSS, etc., and linking to the JS_A file during the HTML parsing process, executing the JS_A file, thereby completing the construction of the DOM tree and the cascading stylesheets object model (CSSOM) tree, and then merging the DOM tree and the CSSOM tree into a rendering tree, and finally drawing the first screen of page A through the rendering tree to complete the loading of the first screen of page A.

[0163] S206. The electronic device 100 loads the content other than the first screen of page A by executing the JS_B file.

[0164] After the JS_B file is loaded, the electronic device 100 can load the content other than the first screen of page A by executing the JS_B file.

[0165] The process of loading the content other than the first screen of page A is similar to the first screen loading process of page A mentioned in step S205, and will not be repeated here.

[0166] S207. The electronic device 100 displays the first screen of page A.

[0167] After the electronic device 100 completes loading the first screen of page A, the electronic device 100 can display the first screen content of page A. Since the electronic device 100 does not need to load the entire JS_C file to display the first screen of page A, it only needs to load a part of the JS_C file, that is, the JS_A file, so that when the electronic device 100 detects the user operation of opening page A, it can respond to the user's operation and display page A without the user having to wait for a long time.

[0168] Furthermore, after the electronic device 100 completes loading of the content outside the first screen of page A, the electronic device 100 can also detect a user operation (e.g., a first operation) used to act on the first screen of page A, and start the first function in the page or display the first content in the page on the first screen of page A. The first function may refer to a function contained in the content outside the first screen of the first page.

[0169] For example, Figure 7 A comparative timing diagram of the unsplit JS file and the split JS file during the page loading process provided in the embodiment of the present application.

[0170] in, Figure 7 (a) is the timing diagram of the page loading process without splitting the JS file. Figure 7 (b) is a timing diagram of the page loading process when the JS file is split.

[0171] like Figure 7 As shown in (a), without splitting the JS file, the HTML can be parsed and the JS_C file can be executed only after the loading of the JS_C file is completed, that is, the loading of the start page is started.

[0172] like Figure 7 As shown in (b), in the case of splitting JS files, if the JS_C file of page A is split into JS_A file and JS_B file, the JS_A file can be loaded first and the loading of the JS_B file can be delayed. After the loading of the JS_A file is completed, the HTML parsing and execution of the JS_A file can be started, that is, the loading of the page can be started.

[0173] contrast Figure 7 In (a) and (b), after the JS_C file is split into JS_A and JS_B, the page starts loading earlier, which speeds up the loading of the first screen of the page.

[0174] For example, Figure 8 The electronic device 100 provided in the embodiment of the present application is provided with a page loading sequence diagram involved in loading the JS file after the split of page A. Figure 8 It can be seen that the electronic device 100 can parse HTML and execute JS code scripts after the chunk.commons.js file is loaded, and delay the loading of the unuseapp.js file.

[0175] In the embodiment of the present application, page A can also be called the first page, JS_C file can also be called the first JS file, JS_A file can also be called the second JS file, JS_B file can also be called the third JS file, JS_B1 file can also be called the fourth JS file, and JS_B2 file can also be called the fifth JS file.

[0176] It can be seen from steps S201-S203 that after the JS file of the page is split, if the electronic device 100 needs to load the page, it does not need to obtain all the JS files of the page, which solves the problem of loading a large amount of redundant code when loading the first screen of the page and improves the speed of loading the first screen.

[0177] Fig. 9 A schematic diagram of the hardware structure of the electronic device 100 is shown.

[0178] The electronic device 100 may be a mobile phone, a tablet computer, a desktop computer, a laptop computer, a handheld computer, a notebook computer, an ultra-mobile personal computer (UMPC), a netbook, a cellular phone, a personal digital assistant (PDA), an augmented reality (AR) device, a virtual reality (VR) device, an artificial intelligence (AI) device, a wearable device, an in-vehicle device, a smart home device and / or a smart city device. The embodiments of the present application do not impose any special restrictions on the specific type of the electronic device.

[0179] The electronic device 100 may include a processor 110, an external memory interface 120, an internal memory 121, a universal serial bus (USB) interface 130, a charging management module 140, a power management module 141, a battery 142, an antenna 1, an antenna 2, a mobile communication module 150, a wireless communication module 160, an audio module 170, a speaker 170A, a receiver 170B, a microphone 170C, an earphone interface 170D, a sensor module 180, a button 190, a motor 191, an indicator 192, a camera 193, a display screen 194, and a subscriber identification module (SIM) card interface 195, etc. The sensor module 180 may include a pressure sensor 180A, a gyroscope sensor 180B, an air pressure sensor 180C, a magnetic sensor 180D, an acceleration sensor 180E, a distance sensor 180F, a proximity light sensor 180G, a fingerprint sensor 180H, a temperature sensor 180J, a touch sensor 180K, an ambient light sensor 180L, a bone conduction sensor 180M, etc.

[0180] It is to be understood that the structure illustrated in the embodiment of the present invention does not constitute a specific limitation on the electronic device 100. In other embodiments of the present application, the electronic device 100 may include more or fewer components than shown in the figure, or combine some components, or separate some components, or arrange the components differently. The components shown in the figure may be implemented in hardware, software, or a combination of software and hardware.

[0181] The processor 110 may include one or more processing units, for example, the processor 110 may include an application processor (AP), a modem processor, a graphics processor (GPU), an image signal processor (ISP), a controller, a video codec, a digital signal processor (DSP), a baseband processor, and / or a neural-network processing unit (NPU), etc. Different processing units may be independent devices or integrated into one or more processors.

[0182] In some embodiments, the processor 110 may be used to parse the HTML of a page, execute JS files, etc., to load the page.

[0183] The controller can generate operation control signals according to the instruction operation code and timing signal to complete the control of instruction fetching and execution.

[0184] The processor 110 may also be provided with a memory for storing instructions and data. In some embodiments, the memory in the processor 110 is a cache memory. The memory may store instructions or data that the processor 110 has just used or cyclically used. If the processor 110 needs to use the instruction or data again, it may be directly called from the memory. This avoids repeated access, reduces the waiting time of the processor 110, and thus improves the efficiency of the system.

[0185] The wireless communication function of the electronic device 100 can be implemented through the antenna 1, the antenna 2, the mobile communication module 150, the wireless communication module 160, the modem processor and the baseband processor.

[0186] Antenna 1 and antenna 2 are used to transmit and receive electromagnetic wave signals. Each antenna in electronic device 100 can be used to cover a single or multiple communication frequency bands. Different antennas can also be reused to improve the utilization of antennas. For example, antenna 1 can be reused as a diversity antenna for a wireless local area network. In some other embodiments, the antenna can be used in combination with a tuning switch.

[0187] The mobile communication module 150 can provide solutions for wireless communications including 2G / 3G / 4G / 5G, etc., applied to the electronic device 100. The mobile communication module 150 may include at least one filter, a switch, a power amplifier, a low noise amplifier (LNA), etc. The mobile communication module 150 can receive electromagnetic waves from the antenna 1, and filter, amplify, and process the received electromagnetic waves, and transmit them to the modulation and demodulation processor for demodulation. The mobile communication module 150 can also amplify the signal modulated by the modulation and demodulation processor, and convert it into electromagnetic waves for radiation through the antenna 1. In some embodiments, at least some of the functional modules of the mobile communication module 150 can be set in the processor 110. In some embodiments, at least some of the functional modules of the mobile communication module 150 can be set in the same device as at least some of the modules of the processor 110.

[0188] The modem processor may include a modulator and a demodulator. Among them, the modulator is used to modulate the low-frequency baseband signal to be sent into a medium-high frequency signal. The demodulator is used to demodulate the received electromagnetic wave signal into a low-frequency baseband signal. The demodulator then transmits the demodulated low-frequency baseband signal to the baseband processor for processing. After the low-frequency baseband signal is processed by the baseband processor, it is passed to the application processor. The application processor outputs a sound signal through an audio device (not limited to a speaker 170A, a receiver 170B, etc.), or displays an image or video through a display screen 194. In some embodiments, the modem processor may be an independent device. In other embodiments, the modem processor may be independent of the processor 110 and be set in the same device as the mobile communication module 150 or other functional modules.

[0189] The wireless communication module 160 can provide wireless communication solutions including wireless local area networks (WLAN) (such as wireless fidelity (Wi-Fi) networks), bluetooth (BT), global navigation satellite system (GNSS), frequency modulation (FM), near field communication (NFC), infrared (IR), etc., which are applied to the electronic device 100. The wireless communication module 160 can be one or more devices integrating at least one communication processing module. The wireless communication module 160 receives electromagnetic waves via the antenna 2, demodulates and filters the electromagnetic wave signals, and sends the processed signals to the processor 110. The wireless communication module 160 can also receive the signal to be sent from the processor 110, modulate the frequency, amplify it, and convert it into electromagnetic waves for radiation through the antenna 2.

[0190] In some embodiments, the antenna 1 of the electronic device 100 is coupled to the mobile communication module 150, and the antenna 2 is coupled to the wireless communication module 160, so that the electronic device 100 can communicate with the network and other devices through wireless communication technology. The wireless communication technology may include global system for mobile communications (GSM), general packet radio service (GPRS), code division multiple access (CDMA), wideband code division multiple access (WCDMA), time-division code division multiple access (TD-SCDMA), long term evolution (LTE), BT, GNSS, WLAN, NFC, FM, and / or IR technology. The GNSS may include a global positioning system (GPS), a global navigation satellite system (GLONASS), a Beidou navigation satellite system (BDS), a quasi-zenith satellite system (QZSS) and / or a satellite based augmentation system (SBAS).

[0191] In some embodiments, the electronic device 100 can send a page loading request to the server 200 through the mobile communication module 150 or the wireless communication module 160 to obtain relevant data of the page sent by the server 200, including HTML, CSS, JS files, etc.

[0192] The electronic device 100 implements the display function through a GPU, a display screen 194, and an application processor. The GPU is a microprocessor for image processing, which connects the display screen 194 and the application processor. The GPU is used to perform mathematical and geometric calculations for graphics rendering. The processor 110 may include one or more GPUs that execute program instructions to generate or change display information.

[0193] The display screen 194 is used to display images, videos, etc. The display screen 194 includes a display panel. The display panel can be a liquid crystal display (LCD). The display panel can also be made of an organic light-emitting diode (OLED), an active-matrix organic light emitting diode or an active-matrix organic light emitting diode (AMOLED), a flexible light-emitting diode (FLED), miniled, microled, micro-oled, quantum dot light emitting diodes (QLED), etc. In some embodiments, the electronic device may include 1 or N display screens 194, where N is a positive integer greater than 1.

[0194] In some embodiments, display screen 194 may be used to display pages.

[0195] The electronic device 100 can realize the shooting function through ISP, camera 193, video codec, GPU, display screen 194 and application processor.

[0196] The ISP is used to process the data fed back by the camera 193. For example, when taking a photo, the shutter is opened, and the light is transmitted to the camera photosensitive element through the lens. The light signal is converted into an electrical signal, and the camera photosensitive element transmits the electrical signal to the ISP for processing and converts it into an image visible to the naked eye. The ISP can also perform algorithm optimization on the noise and brightness of the image. The ISP can also optimize the exposure, color temperature and other parameters of the shooting scene. In some embodiments, the ISP can be set in the camera 193.

[0197] The digital signal processor is used to process digital signals, and can process not only digital image signals but also other digital signals. For example, when the electronic device 100 is selecting a frequency point, the digital signal processor is used to perform Fourier transform on the frequency point energy.

[0198] Video codecs are used to compress or decompress digital videos. The electronic device 100 may support one or more video codecs. Thus, the electronic device 100 may play or record videos in a variety of coding formats, such as Moving Picture Experts Group (MPEG) 1, MPEG2, MPEG3, MPEG4, etc.

[0199] The internal memory 121 may include one or more random access memories (RAM) and one or more non-volatile memories (NVM).

[0200] The random access memory can be directly read and written by the processor 110, and can be used to store executable programs (such as machine instructions) of the operating system or other running programs, and can also be used to store user and application data.

[0201] The non-volatile memory may also store executable programs and user and application data, etc., and may be loaded into the random access memory in advance for direct reading and writing by the processor 110 .

[0202] The external memory interface 120 can be used to connect to an external non-volatile memory to expand the storage capacity of the electronic device 100. The external non-volatile memory communicates with the processor 110 through the external memory interface 120 to implement a data storage function. For example, files such as music and videos are stored in the external non-volatile memory.

[0203] The electronic device 100 can implement audio functions such as music playing and recording through the audio module 170, the speaker 170A, the receiver 170B, the microphone 170C, the headphone jack 170D, and the application processor.

[0204] The electronic device may be a portable terminal device equipped with Harmony, iOS, Android, Microsoft or other operating systems, such as a mobile phone, a tablet computer, a wearable device, etc., and may also be a non-portable terminal device such as a laptop computer with a touch-sensitive surface or a touch panel, a desktop computer with a touch-sensitive surface or a touch panel. The software system of the electronic device 100 may adopt a layered architecture, an event-driven architecture, a micro-core architecture, a micro-service architecture, or a cloud architecture. The embodiment of the present invention takes the Android system of the layered architecture as an example to exemplify the software structure of the electronic device 100.

[0205] Fig.10 It is a software structure block diagram of the electronic device 100 according to an embodiment of the present application.

[0206] The layered architecture divides the software into several layers, each with clear roles and division of labor. The layers communicate with each other through software interfaces. In some embodiments, the Android system is divided into four layers, from top to bottom: the application layer, the application framework layer, the Android runtime and system library, and the kernel layer.

[0207] The application layer can include a series of application packages.

[0208] like Fig.10 As shown, the application package may include camera, gallery, calendar, call, map, navigation, WLAN, Bluetooth, music, video, short message and other applications.

[0209] The application framework layer provides an application programming interface (API) and a programming framework for the applications in the application layer. The application framework layer includes some predefined functions.

[0210] like Fig.10 As shown, the application framework layer may include a window manager, a content provider, a view system, a phone manager, a resource manager, a notification manager, and the like.

[0211] The window manager is used to manage window programs. The window manager can obtain the display screen size, determine whether there is a status bar, lock the screen, capture the screen, etc.

[0212] Content providers are used to store and retrieve data and make it accessible to applications. The data may include videos, images, audio, calls made and received, browsing history and bookmarks, phone books, etc.

[0213] The view system includes visual controls, such as controls for displaying text, controls for displaying images, etc. The view system can be used to build applications. A display interface can be composed of one or more views. For example, a display interface including a text notification icon can include a view for displaying text and a view for displaying images.

[0214] The phone manager is used to provide communication functions of the electronic device 100, such as management of call status (including connecting, hanging up, etc.).

[0215] The resource manager provides various resources for applications, such as localized strings, icons, images, layout files, video files, and so on.

[0216] The notification manager enables applications to display notification information in the status bar. It can be used to convey notification-type messages and can disappear automatically after a short stay without user interaction. For example, the notification manager is used to notify download completion, message reminders, etc. The notification manager can also be a notification that appears in the system top status bar in the form of a chart or scroll bar text, such as notifications of applications running in the background, or a notification that appears on the screen in the form of a dialog window. For example, a text message is displayed in the status bar, a prompt sound is emitted, an electronic device vibrates, an indicator light flashes, etc.

[0217] Android runtime includes core libraries and virtual machines. Android runtime is responsible for scheduling and management of the Android system.

[0218] The core library consists of two parts: one is the function that needs to be called by the Java language, and the other is the Android core library.

[0219] The application layer and the application framework layer run in a virtual machine. The virtual machine executes the Java files of the application layer and the application framework layer as binary files. The virtual machine is used to perform functions such as object life cycle management, stack management, thread management, security and exception management, and garbage collection.

[0220] The system library may include multiple functional modules, such as surface manager, media library, 3D graphics processing library (such as OpenGL ES), 2D graphics engine (such as SGL), etc.

[0221] The surface manager is used to manage the display subsystem and provide the fusion of 2D and 3D layers for multiple applications.

[0222] The media library supports playback and recording of a variety of commonly used audio and video formats, as well as static image files, etc. The media library can support a variety of audio and video encoding formats, such as: MPEG4, H.264, MP3, AAC, AMR, JPG, PNG, etc.

[0223] The 3D graphics processing library is used to implement 3D graphics drawing, image rendering, compositing, and layer processing.

[0224] A 2D graphics engine is a drawing engine for 2D drawings.

[0225] The kernel layer is the layer between hardware and software. The kernel layer contains at least display driver, camera driver, audio driver, and sensor driver.

[0226] The following is an illustrative description of the workflow of the software and hardware of the electronic device 100 in conjunction with capturing a photo scene.

[0227] When the touch sensor 180K receives a touch operation, the corresponding hardware interrupt is sent to the kernel layer. The kernel layer processes the touch operation into a raw input event (including touch coordinates, timestamp of the touch operation, and other information). The raw input event is stored in the kernel layer. The application framework layer obtains the raw input event from the kernel layer and identifies the control corresponding to the input event. For example, if the touch operation is a touch single-click operation and the control corresponding to the single-click operation is the control of the camera application icon, the camera application calls the interface of the application framework layer to start the camera application, and then starts the camera driver by calling the kernel layer to capture static images or videos through the camera 193.

[0228] Fig.11 A schematic diagram of the hardware structure of the server 200 provided in an embodiment of the present application.

[0229] like Fig.11 As shown, the server 200 may include: one or more processors 201, a memory 202, a communication interface 203, a transmitter 205, a receiver 206, a coupler 207 and an antenna 208. These components may be connected via a bus 204 or other means. Figure 8 Take bus connection as an example.

[0230] The communication interface 203 can be used for the server 200 and other communication devices, such as the electronic device 100. Specifically, the communication interface 203 can be a 3G communication interface, a long-term evolution (LTE) (4G) communication interface, a 5G communication interface, a WLAN communication interface, a WAN communication interface, etc. Not limited to a wireless communication interface, the server 200 can also be configured with a wired communication interface 203 to support wired communication, for example, the backhaul link between the server 200 and other servers can be a wired communication connection.

[0231] In some embodiments of the present application, the transmitter 205 and the receiver 206 can be regarded as a wireless modem. The transmitter 205 can be used to transmit and process the signal output by the processor 201. The receiver 206 can be used to receive the signal. In the server 200, the number of the transmitter 205 and the receiver 206 can be one or more. The antenna 208 can be used to convert the electromagnetic energy in the transmission line into electromagnetic waves in the free space, or to convert the electromagnetic waves in the free space into electromagnetic energy in the transmission line. The coupler 207 can be used to divide the mobile communication signal into multiple paths and distribute it to multiple receivers 206. It can be understood that the antenna 208 of the server 200 can be implemented as a large-scale antenna array.

[0232] The memory 202 is coupled to the processor 201 and is used to store various software programs and / or multiple sets of instructions. Specifically, the memory 202 may include a high-speed random access memory, and may also include a non-volatile memory, such as one or more disk storage devices, flash memory devices or other non-volatile solid-state storage devices.

[0233] The memory 202 can store an operating system (hereinafter referred to as system), such as an embedded operating system such as uCOS, VxWorks, or RTLinux.

[0234] In some embodiments, the receiver 206 can be used to obtain a loading request for page A sent by the electronic device 100, the processor 201 can be used to determine the JS_A file and the JS_B file based on the JS_C file of page A, the transmitter 205 can be used to send the JS_A file and the JS_B file to the electronic device 100, and the memory 202 can be used to store relevant data of the page, including HTML, CSS, JS files, etc.

[0235] Need to explain, Fig.11 The server 200 shown is only one implementation of the embodiment of the present application. In actual applications, the server 200 may also include more or fewer components, which is not limited here.

[0236] It should be understood that each step in the above method embodiment can be completed by an integrated logic circuit of hardware in a processor or by instructions in the form of software. The method steps disclosed in the embodiments of the present application can be directly embodied as being executed by a hardware processor, or by a combination of hardware and software modules in a processor.

[0237] The present application also provides an electronic device, which may include: a memory and a processor. The memory may be used to store a computer program; the processor may be used to call the computer program in the memory, so that the electronic device executes the method executed by the electronic device 100 or the server 200 in any of the above embodiments.

[0238] The present application also provides a chip system, which includes at least one processor for implementing the functions involved in the method executed by the electronic device 100 or the server 200 in any of the above embodiments.

[0239] In one possible design, the chip system also includes a memory, which is used to store program instructions and data, and the memory is located inside or outside the processor.

[0240] The chip system may be composed of the chip, or may include the chip and other discrete devices.

[0241] Optionally, the processor in the chip system may be one or more. The processor may be implemented by hardware or by software. When implemented by hardware, the processor may be a logic circuit, an integrated circuit, etc. When implemented by software, the processor may be a general-purpose processor implemented by reading software code stored in a memory.

[0242] Optionally, the memory in the chip system may also be one or more. The memory may be integrated with the processor or may be separately arranged with the processor, which is not limited in the embodiments of the present application. Exemplarily, the memory may be a non-transient processor, such as a read-only memory ROM, which may be integrated with the processor on the same chip or may be arranged on different chips respectively. The embodiments of the present application do not specifically limit the type of memory and the arrangement of the memory and the processor.

[0243] Exemplarily, the chip system can be a field programmable gate array (FPGA), an application specific integrated circuit (ASIC), a system on chip (SoC), a central processor unit (CPU), a network processor (NP), a digital signal processor (DSP), a microcontroller unit (MCU), a programmable logic device (PLD) or other integrated chips.

[0244] The present application also provides a computer program product, which includes: a computer program (also referred to as code, or instruction), which, when executed, enables a computer to execute a method executed by any one of the electronic device 100 or the server 200 in any of the above embodiments.

[0245] The present application also provides a computer-readable storage medium, wherein the computer-readable storage medium stores a computer program (also referred to as code or instruction). When the computer program is executed, the computer executes the method executed by any one of the electronic device 100 or the server 200 in any of the above embodiments.

[0246] It should be understood that the processor in the embodiment of the present application can be an integrated circuit chip with signal processing capabilities. In the implementation process, each step of the above method embodiment can be completed by the hardware integrated logic circuit or software instructions in the processor. The above processor can be a general processor, a digital signal processor (digitalsignal processor, DSP), an application specific integrated circuit (AP 800plication specific integrated circuit, 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 application can be implemented or executed. The general processor can be a microprocessor or the processor can also be any conventional processor. The steps of the method disclosed in the embodiment of the present application can be directly embodied as a hardware decoding processor to perform, or the hardware and software modules in the decoding processor are combined to perform. The software module can be located in a mature storage medium in the field 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 the memory, and the processor reads the information in the memory and completes the steps of the above method in combination with its hardware.

[0247] In addition, an embodiment of the present application further provides a device. The device may be a component or a module, and the device may include one or more processors and a memory connected to each other. The memory is used to store a computer program. When the computer program is executed by one or more processors, the device executes the method in each of the above method embodiments.

[0248] Among them, the device, computer-readable storage medium, computer program product or chip provided in the embodiments of the present application are used to execute the corresponding methods provided above. Therefore, the beneficial effects that can be achieved can refer to the beneficial effects in the corresponding methods provided above, and will not be repeated here.

[0249] The various implementation modes of the present application can be combined arbitrarily to achieve different technical effects.

[0250] In the above embodiments, it can be implemented in whole or in part by software, hardware, firmware or any combination thereof. When implemented using 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 instructions. When the computer program instructions are loaded and executed on a computer, the process or function described in the present application is generated in whole or in part. The computer can be a general-purpose computer, a special-purpose computer, a computer network, or other programmable device. The computer instructions can 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 instructions can be transmitted from a website site, computer, server or data center to another website site, computer, server or data center by wired (e.g., coaxial cable, optical fiber, digital subscriber line) or wireless (e.g., infrared, wireless, microwave, etc.) mode. The computer-readable storage medium can be any available medium that a computer can access or a data storage device such as a server or data center that includes one or more available media integrated. The available medium can be a magnetic medium (e.g., a floppy disk, a hard disk, a tape), an optical medium (e.g., a DVD), or a semiconductor medium (e.g., a solid-state disk (SSD)), etc.

[0251] Those skilled in the art can understand that to implement all or part of the processes in the above-mentioned embodiments, the processes can be completed by computer programs to instruct related hardware, and the programs can be stored in computer-readable storage media. When the programs are executed, they can include the processes of the above-mentioned method embodiments. The aforementioned storage media include: ROM or random access memory RAM, magnetic disk or optical disk and other media that can store program codes.

[0252] In short, the above description is only an embodiment of the technical solution of the present invention, and is not intended to limit the protection scope of the present invention. Any modification, equivalent replacement, improvement, etc. made according to the disclosure of the present invention shall be included in the protection scope of the present invention.

Claims

1. A page loading method, characterized in that: The method comprises: The server receives a loading request for a first page sent by the electronic device; The server sends a second JS file to the electronic device, and the second JS file is obtained by the server based on the first JS file. The first JS file includes code for implementing the first page, and the second JS file includes code for implementing the first screen of the first page, but does not include code for implementing content other than the first screen of the first page.

2. The method according to claim 1, characterized in that: After the server sends the second JS file to the electronic device, the method further includes: The server sends a third JS file to the electronic device, the third JS file is obtained by the server according to the first JS file, and the third JS file includes codes for implementing content other than the first screen of the first page.

3. The method according to claim 2, characterized in that The server sends the third JS file to the electronic device, specifically including: The server sends the third JS file to the electronic device after a preset time period of sending the second JS file; or, After receiving the message sent by the electronic device requesting to obtain the third JS file, the server sends the third JS file to the electronic device.

4. The method according to claim 2 or 3, characterized in that: If the function body of the first function in the first JS file is a code for implementing content other than the first screen of the first page, the third JS file includes a second function, the second function includes the function body of the first function, and the second JS file also includes code for jumping to the second function.

5. The method according to any one of claims 1 to 4, characterized in that: After the server sends the second JS file to the electronic device, the method further includes: The server sends a fourth JS file and a fifth JS file to the electronic device in parallel, the fourth JS file including code for implementing a first content outside the first screen of the first page, and the fifth JS file including code for implementing a second content outside the first screen of the first page.

6. The method according to any one of claims 1 to 5, characterized in that: Before the server receives a loading request for the first page sent by the electronic device, the method further includes: The server loads the first page; The server determines the second JS file according to the loading process of the first page, where the second JS file includes the code executed in the first JS file during the first screen loading process of the first page, but does not include the code not executed in the first JS file during the first screen loading process of the first page.

7. The method according to claim 6, characterized in that The server determines the second JS file according to the loading process of the first page, specifically including: The server obtains a coverage file generated after loading the first page, wherein the coverage file indicates the codes executed and the codes not executed during the first screen loading process of the first page; The server determines the second JS file according to the coverage file.

8. The method according to any one of claims 1 to 7, characterized in that: Before the server receives a loading request for the first page sent by the electronic device, the method further includes: The server determines the second JS file according to the loading process of the first page by the electronic device; Before the server determines the second JS file, the method further includes: the server receiving indication information of the second JS file sent by the electronic device; or, The loading request carries indication information of the second JS file.

9. A page loading method, characterized in that: The method comprises: The electronic device sends a loading request for the first page to the server; The electronic device receives a second JS file sent by the server, the second JS file is obtained by the server according to the first JS file, the first JS file includes a code for implementing the first page, the second JS file includes a code for implementing the first screen of the first page, and does not include a code for implementing content other than the first screen of the first page; After receiving the second JS file, the electronic device loads the home screen of the first page by executing the second JS file; The electronic device displays the first screen of the first page.

10. The method according to claim 1, characterized in that After the electronic device receives the second JS file sent by the server, the method further includes: The electronic device receives a third JS file sent by the server, the third JS file is obtained by the server according to the first JS file, and the third JS file includes code for implementing content other than the first screen of the first page; The electronic device loads the content other than the first screen of the first page by executing the third JS file.

11. The method according to claim 10, characterized in that After the electronic device loads the content other than the first screen of the first page by executing the third JS file, the method further includes: The electronic device detects a first operation acting on the first page; The electronic device displays the first content outside the first screen of the first page or activates the first function in the first page, where the first function is a function included in the content outside the first screen of the first page.

12. The method according to claim 11, characterized in that The electronic device receives the second JS file and the third JS file sent by the server before the document object model content of the first page is loaded with DCL.

13. The method according to any one of claims 10 to 12, characterized in that: The electronic device receives the third JS file sent by the server, specifically including: After receiving the preset time length of the second JS file, the electronic device receives the third JS file sent by the server; or, After sending a message requesting to obtain the third JS file to the server, the electronic device receives the third JS file sent by the server.

14. The method according to any one of claims 10 to 13, characterized in that: If the function body of the first function in the first JS file is a code for implementing content other than the first screen of the first page, the third JS file includes a second function, the second function includes the function body of the first function, and the second JS file also includes code for jumping to the second function.

15. The method according to any one of claims 9 to 14, characterized in that: After the electronic device receives the second JS file sent by the server, the method further includes: The electronic device receives a fourth JS file and a fifth JS file sent in parallel by the server, the fourth JS file including a code for implementing a first content outside the first screen of the first page, and the fifth JS file including a code for implementing a second content outside the first screen of the first page; The electronic device loads the first content in the first page by executing the fourth JS file; The electronic device loads the second content in the first page by executing the fifth JS file.

16. The method according to any one of claims 9 to 15, characterized in that: Before the electronic device sends a first page loading request to the server, the method further includes: The electronic device loads the first page; After the electronic device loads the first page, the method further includes: the electronic device sending indication information of the second JS file to the server; or, The loading request carries indication information of the second JS file.

17. A page loading method, characterized in that: The method comprises: The electronic device sends a loading request for the first page to the server; The server sends a second JS file to the electronic device, the second JS file is obtained by the server according to the first JS file, the first JS file includes a code for implementing the first page, the second JS file includes a code for implementing the first screen of the first page, and does not include a code for implementing content other than the first screen of the first page; After receiving the second JS file, the electronic device loads the home screen of the first page by executing the second JS file; The electronic device displays the first screen of the first page.

18. The method according to claim 17, characterized in that After the server sends the second JS file to the electronic device, the method further includes: The server sends a third JS file to the electronic device, the third JS file is obtained by the server according to the first JS file, and the third JS file includes code for implementing content other than the first screen of the first page; The electronic device loads the content other than the first screen of the first page by executing the third JS file.

19. The method according to claim 18, characterized in that If the function body of the first function in the first JS file is a code for implementing content other than the first screen of the first page, the third JS file includes a second function, the second function includes the function body of the first function, and the second JS file also includes code for jumping to the second function.

20. The method according to any one of claims 17 to 19, characterized in that: Before the electronic device sends a request to load the first page to the server, the method further includes: The server loads the first page; The server determines the second JS file according to the loading process of the first page, where the second JS file includes the code executed in the first JS file during the first screen loading process of the first page, but does not include the code not executed in the first JS file during the first screen loading process of the first page.

21. An electronic device, characterized in that: The electronic device comprises a memory, one or more processors, and one or more programs; when the one or more processors execute the one or more programs, the electronic device implements the method as claimed in any one of claims 1 to 8.

22. An electronic device, characterized in that: The electronic device comprises a memory, one or more processors, and one or more programs; when the one or more processors execute the one or more programs, the electronic device implements the method as described in any one of claims 9 to 16.

23. A computer-readable storage medium comprising instructions, characterized in that: When the instructions are executed on an electronic device, the electronic device is enabled to execute the method according to any one of claims 1 to 8.

Images