A page rendering method and device, electronic equipment and storage medium

Abstract

The application relates to the computer technical field, in particular to a page rendering method and device, electronic equipment and storage medium, to realize efficient page rendering. The method comprises the following steps: acquiring a sub-code module set called by each page code module according to preset module construction information, each page code module containing exclusive code for realizing corresponding webpage page rendering; each sub-code module containing common code for realizing webpage page rendering; obtaining a page code module set to which each sub-code module belongs based on the sub-code module sets; loading a first page code module used by a to-be-rendered page when the to-be-rendered page is accessed; determining a common module depended by the first page code module based on the page code module sets and preloading the common module, the common module being a sub-code module called by at least two page code modules. The application can effectively guarantee system performance without wasting resources, and realizes efficient page rendering.

Description

Technical Field

[0001] This application relates to the field of computer technology, and in particular to a page rendering method, apparatus, electronic device, and storage medium. Background Technology

[0002] In related technologies, web page content can be represented in the form of code modules. When rendering a page based on a server-side rendering (SSR) framework, it is necessary to load the relevant code modules in the page. However, in terms of on-demand loading of code modules, the current SSR framework cannot achieve automatic cutting and on-demand loading of code modules.

[0003] For example, when the homepage and the details page both include the same style file, the content of that file will be repeatedly bundled and built into the code modules of the two pages, resulting in the repeated loading of the same content, leading to some code redundancy, unnecessary waste of resources, and performance degradation.

[0004] To address the aforementioned issues, related technologies typically rely on developers to configure code splitting strategies based on their own experience. This not only imposes a significant operational burden but is also limited by the developers' own experience, making it prone to errors.

[0005] Therefore, how to achieve efficient page rendering without wasting resources and ensuring performance is an urgent problem to be solved. Summary of the Invention

[0006] This application provides a page rendering method, apparatus, electronic device, and storage medium to achieve efficient page rendering without wasting resources and while ensuring performance.

[0007] This application provides a page rendering method, including:

[0008] Based on the preset module construction information, obtain the set of sub-code modules called by each page code module. Each page code module contains: dedicated code for rendering the corresponding web page; each sub-code module contains: common code for rendering at least one web page.

[0009] Based on each set of sub-code modules, obtain the set of page code modules to which each sub-code module belongs;

[0010] When accessing a page to be rendered, a first page code module used by the page to be rendered is loaded; and, based on the set of page code modules, at least one common module that the first page code module depends on is determined, and the at least one common module is preloaded, wherein each common module is a sub-code module called by at least two page code modules.

[0011] This application provides a page rendering apparatus, comprising:

[0012] The first analysis unit is used to obtain the set of sub-code modules called by each page code module according to the preset module construction information. Each page code module contains: dedicated code for rendering the corresponding web page; each sub-code module contains: common code for rendering at least one web page.

[0013] The second analysis unit is used to obtain the set of page code modules to which each sub-code module belongs, based on the set of each sub-code module.

[0014] A rendering unit is configured to load a first page code module used by the page to be rendered when accessing the page to be rendered; and to determine at least one common module that the first page code module depends on based on the set of page code modules, and to preload the at least one common module, wherein each common module is a sub-code module called by at least two page code modules.

[0015] Optionally, the second analysis unit is further configured to:

[0016] Based on the set of code modules for each page, identify the common modules in each sub-code module;

[0017] The module name of each public module is determined based on the module name of the page code module that uses each public module, so that the module name of each public module represents the web page that uses the public module.

[0018] When accessing the page to be rendered, the at least one common module is determined based on the module names of each common module.

[0019] Optionally, the second analysis unit is specifically used for:

[0020] For each common module, perform the following operations:

[0021] For a common module, the module names of the various page code modules of the common module are combined to obtain the module name corresponding to the common module.

[0022] Optionally, the second analysis unit is further configured to:

[0023] The combination result obtained by combining the module names of the various page code modules that call the common module through a hash algorithm is mapped to a fixed-length string.

[0024] Adjust the module name corresponding to the public module based on the string.

[0025] Optionally, the second analysis unit is further configured to:

[0026] Establish a module name mapping relationship between each string obtained from the mapping and the corresponding combination result. The module name mapping relationship is used to represent each web page that uses the corresponding public module.

[0027] Optionally, the rendering unit is further configured to:

[0028] The page to be rendered is switched to the next level page, and the next level page and the page to be rendered jointly call the target common module;

[0029] Load the second page code module used by the next level page, and obtain the pre-loaded target common module for page rendering.

[0030] An electronic device provided in this application includes a processor and a memory, wherein the memory stores a computer program, and when the computer program is executed by the processor, the processor performs the steps of any of the above-described page rendering methods.

[0031] This application provides a computer-readable storage medium including a computer program. When the computer program is run on an electronic device, the computer program is used to cause the electronic device to perform the steps of any of the above-described page rendering methods.

[0032] This application provides a computer program product, which includes a computer program stored in a computer-readable storage medium. When the processor of an electronic device reads the computer program from the computer-readable storage medium, the processor executes the computer program, causing the electronic device to perform the steps of any of the above-described page rendering methods.

[0033] The beneficial effects of this application are as follows:

[0034] This application provides a page rendering method, apparatus, electronic device, and storage medium. Because this application pre-divides modules based on whether the code modules used by a webpage are shared by other webpages during the module construction stage before accessing the webpage, it determines the page code module containing the exclusive code used to implement the rendering of the corresponding webpage, and the sub-code module containing the common code used to implement the rendering of at least one webpage. Then, based on the module construction information, it obtains the set of sub-code modules called by each page code module, and then, based on the obtained sets of sub-code modules, it inversely deduces which page code modules will call each sub-code module. That is, in the embodiments of this application, the dependency relationship between the page code module and the sub-code module can be determined before running the code. Then, when accessing the page, the dependency relationship constructed above can be directly referenced to quickly determine the various code modules related to the page. Only the code parts used by the page need to be loaded, and the unused parts will not be loaded. Furthermore, by placing the code parts shared by different pages in the header of the HyperText Markup Language (html) file for pre-loading cache, they can be directly read and used from the cache later, ensuring that different pages will not load duplicate code. Therefore, resources are not wasted, system performance is effectively guaranteed, and efficient page rendering is achieved.

[0035] Other features and advantages of this application will be set forth in the description which follows, and will be apparent in part from the description, or may be learned by practicing the application. The objectives and other advantages of this application may be realized and obtained by means of the structures particularly pointed out in the written description, claims, and drawings. Attached Figure Description

[0036] The accompanying drawings, which are included to provide a further understanding of this application and form part of this application, illustrate exemplary embodiments and are used to explain this application, but do not constitute an undue limitation of this application. In the drawings:

[0037] Figure 1 This is a schematic diagram of a page rendering process in related technologies;

[0038] Figure 2 This is an optional schematic diagram of an application scenario in an embodiment of this application;

[0039] Figure 3 This is a flowchart illustrating a page rendering method according to an embodiment of this application;

[0040] Figure 4 This is a schematic diagram illustrating the module name of a page code module in one embodiment of this application;

[0041] Figure 5This is a schematic diagram of a set of dependent modules in an embodiment of this application;

[0042] Figure 6 This is a schematic diagram of a module dependency table in an embodiment of this application;

[0043] Figure 7 This is a schematic diagram of a module name mapping table in an embodiment of this application;

[0044] Figure 8 This is a schematic diagram of a page to be rendered in an embodiment of this application;

[0045] Figure 9 This is a schematic diagram of a next-level page in an embodiment of this application;

[0046] Figure 10 This is a flowchart illustrating the implementation of a specific page rendering method in this application embodiment;

[0047] Figure 11A This is a logical schematic diagram of a page rendering method in an embodiment of this application;

[0048] Figure 11B This is a schematic diagram illustrating the naming logic of each module in one embodiment of this application;

[0049] Figure 12 This is a schematic diagram of the composition structure of a page rendering device according to an embodiment of this application;

[0050] Figure 13 This is a schematic diagram of the hardware structure of an electronic device using an embodiment of this application;

[0051] Figure 14 This is a schematic diagram of the hardware structure of a computing device according to an embodiment of this application. Detailed Implementation

[0052] To make the objectives, technical solutions, and advantages of the embodiments of this application clearer, the technical solutions of this application will be clearly and completely described below with reference to the accompanying drawings of the embodiments of this application. Obviously, the described embodiments are only some embodiments of the technical solutions of this application, and not all embodiments. Based on the embodiments recorded in this application, all other embodiments obtained by those skilled in the art without creative effort are within the scope of protection of the technical solutions of this application.

[0053] The following describes some of the concepts involved in the embodiments of this application.

[0054] A webpage is a plain text file containing HTML tags. It can be stored on a computer somewhere in the world. It is a "page" on the World Wide Web, written in Hypertext Markup Language format, and can be read by a web browser. In the network environment, information is organized into page information. Users can view relevant information by visiting webpages. The information in a webpage generally includes, but is not limited to, basic elements such as text, images, tables, and hyperlinks.

[0055] Page rendering: This involves assembling data and templates into HTML, essentially a string concatenation process. Data is rendered into HTML code with a fixed format to form the final HTML displayed on the page. HTML is a Hypertext Markup Language, an application of Standard Generalized Markup Language. "Hypertext" means that a page can contain images, links, and even non-text elements such as music and programs. A webpage mainly consists of three parts: structure, presentation, and behavior. The structure layer is HTML, which defines the webpage's structure and is mainly used to establish the webpage's skeleton. The presentation layer is Cascading Style Sheets (CSS), which sets the webpage's appearance and style, primarily the styles of the HTML skeleton elements, such as their position and color. The behavior layer is the programming language JavaScript, which controls the webpage's behavior, implementing its functionality and enabling interactions.

[0056] CSS (CSS for JavaScript and HTML) is a computer language used to style documents such as HTML or Extensible Markup Language (XML, a subset of Standard Generalized Markup Language). CSS can not only statically format web pages, but also dynamically format various elements of a web page in conjunction with various scripting languages. CSS allows for pixel-level precise control over the layout and positioning of elements on a web page, supports almost all font sizes and styles, and has the ability to edit the styles of web page objects and models. Its main purpose is to control fonts, colors, backgrounds, images, and other elements on a web page, ensuring that the web page displays exactly as the designer intends.

[0057] Code Modules: The content of a webpage is mainly divided into JavaScript logic and CSS style content. This content exists as code before the page is rendered. When the page is accessed, this code needs to be loaded for rendering. Taking CSS style content as an example, a webpage contains many elements, such as various icons, images, and text. The styles of these elements are represented by CSS code. Therefore, a webpage can be divided into many code modules. Based on these code modules, data retrieved from the backend can be rendered onto the HTML page.

[0058] In the embodiments of this application, each code module contains some code. This code can be very small, consisting of only one or two statements, or very large, containing thousands of statements and complex function definitions. Specifically, in this application, based on the different functions of the included code, code modules can be mainly divided into two categories: page-level page code modules and sub-level sub-code modules. Page code modules contain only dedicated code used to implement the rendering of the corresponding webpage; that is, the code used by each webpage itself can form a page code module. Sub-code modules are formed by common code shared by different webpages.

[0059] Module build information: This refers to the detailed information used to represent the corresponding code module and the code modules it calls when building a code module. For example, a page-level page code module can call child-level sub-code modules. If a webpage has a search box, the search box can have its own corresponding sub-code module, and the page code module of that webpage needs to call that sub-code module; this is also called the page code module depending on the sub-code module.

[0060] Public modules: A collection of common module code used by two or more pages. In this application, a public module refers to a sub-module that is called (depended on) by at least two page code modules. Depending on the page logic and style content, the public module also includes asynchronous style modules. An asynchronous module is one that is not loaded on the first page visit but only when needed; an asynchronous style module is one that contains page CSS styles. Therefore, an asynchronous style module is a public module that is not loaded on the first page visit but only when needed, contains page CSS styles, and is used by at least two pages.

[0061] Time complexity: The same problem can be solved by different algorithms, and the quality of an algorithm will affect the efficiency of the algorithm and even the program. The purpose of algorithm analysis is to select suitable algorithms and improve existing ones. In computer science, the time complexity of an algorithm is a function that quantitatively describes the algorithm's running time. This is a function of the length of the string representing the algorithm's input values. Time complexity is commonly expressed using Big O notation.

[0062] A hash algorithm maps a binary value of arbitrary length to a shorter, fixed-length string (which may contain numbers, letters, etc.). This shorter string is called a hash value. A hash value is a unique and extremely compact representation of a piece of data. In this embodiment, a hash algorithm can be used to simplify the module name of a sub-code module.

[0063] The design concept of the embodiments of this application is briefly introduced below:

[0064] Common page rendering methods mainly include Server-Side Rendering (SSR) and Client-Side Rendering (CSR). SSR works by assembling the Hypertext Markup Language (HTML) page and its corresponding dynamic data on the server-side, and then directly presenting the complete page to the browser. Common SSR technologies include: server-side rendering frameworks based on Vue (Nuxt.js) and server-side rendering frameworks based on React (Next.js).

[0065] A webpage may have multiple pages, such as a homepage and a details page. A common technique is to package all the code for a single webpage together. When the webpage is opened, all the code is loaded, so no new code needs to be loaded when navigating from the homepage to a details page. However, this method results in a larger amount of code being loaded on the first page load, leading to slower loading speeds and the loading of some unnecessary data (e.g., loading details pages when accessing the homepage).

[0066] In addition, regarding the preloading of common modules for asynchronous styles, the implementation logic of the relevant SSR frameworks all involve runtime (referring to the actual execution time of the code) logic. Specifically, at runtime, the modules involved in this request are detected, and at runtime, all dependencies are collected according to a certain logical algorithm and then injected into the page, causing a certain runtime performance loss.

[0067] like Figure 1 The diagram illustrates a page rendering process in related technologies. When different pages load the same module, such as the homepage and details page headers both having a search box style (i.e., a common module), this module (e.g., the search box module) is dynamically loaded separately, typically as a file like 0.chunk or 1.chunk. In this approach, it's crucial to know exactly when to load the search box file. Clearly, Figure 1 The related technology shown does not perform any processing. It only knows that there is a search box module on the homepage when the homepage code has been executed to a certain extent, and then loads the module. This will cause a delay. The style of the search box module will appear late on the page (the content and style at the bottom of the page have been rendered, and the search box at the top suddenly appears), causing the page to flicker.

[0068] In view of this, embodiments of this application propose a page rendering method, apparatus, electronic device, and storage medium. Because this application pre-divides modules based on whether the code modules used by a webpage are shared by other webpages during the module construction stage before accessing the webpage, it determines the page code module containing the exclusive code used to implement the rendering of the corresponding webpage, and the sub-code module containing the common code used to implement the rendering of at least one webpage. Then, based on the module construction information, it obtains the set of sub-code modules called by each page code module, and then, based on the obtained sets of sub-code modules, it inversely deduces which page code modules will call each sub-code module. That is, in the embodiments of this application, the dependency relationship between the page code module and the sub-code module can be determined before running the code. Therefore, when accessing the page, the dependency relationship constructed above can be directly referenced to quickly determine the various code modules related to the page. Only the code parts used by the page need to be loaded, and the unused parts will not be loaded. Furthermore, by placing the code parts shared by different pages in the header of the HTML file for pre-loading and caching, they can be directly read and used from the cache later, ensuring that different pages do not load duplicate code. Therefore, resources are not wasted, system performance is effectively guaranteed, and efficient page rendering is achieved.

[0069] The preferred embodiments of this application are described below with reference to the accompanying drawings. It should be understood that the preferred embodiments described herein are for illustration and explanation only and are not intended to limit this application. Furthermore, the embodiments and features in the embodiments of this application can be combined with each other without conflict.

[0070] like Figure 2 The diagram shown is an application scenario illustration of an embodiment of this application. The application scenario diagram includes two terminal devices 210 and one server 220.

[0071] In this embodiment, the terminal device 210 includes, but is not limited to, mobile phones, tablets, laptops, desktop computers, e-book readers, smart voice interaction devices, smart home appliances, and in-vehicle terminals. The terminal device may have clients installed for page browsing and rendering. These clients can be software (e.g., a browser), web pages, or mini-programs. The server 220 is the backend server corresponding to the software, web pages, or mini-programs, or a server specifically used for page rendering; this application does not impose specific limitations. The server 220 can be an independent physical server, a server cluster or distributed system composed of multiple physical servers, or a cloud server providing basic cloud computing services such as cloud services, cloud databases, cloud computing, cloud functions, cloud storage, network services, cloud communication, middleware services, domain name services, security services, content delivery networks (CDNs), and big data and artificial intelligence platforms.

[0072] It should be noted that the page rendering methods in the embodiments of this application can be executed by an electronic device, which can be a terminal device 210 or a server 220. That is, the method can be executed by the terminal device 210 or the server 220 alone, or by both the terminal device 210 and the server 220. This application proposes a new page rendering framework. Based on the above summary, this framework can be deployed on the terminal device 210 or the server 220. Generally, this framework is an SSR framework, i.e., deployed on the server. Accordingly, the method is generally executed by the server 220 alone.

[0073] In one alternative implementation, the terminal device 210 and the server 220 can communicate via a communication network.

[0074] In one alternative implementation, the communication network is a wired network or a wireless network.

[0075] It should be noted that, Figure 2 The examples shown are merely illustrative; in reality, the number of terminal devices and servers is unlimited and is not specifically limited in the embodiments of this application.

[0076] In this embodiment of the application, when there are multiple servers, the multiple servers can form a blockchain, and the servers are nodes on the blockchain; as disclosed in the page rendering method of this embodiment, the module construction information, module name, dependencies between modules, code contained in the module, etc., can all be stored on the blockchain.

[0077] Furthermore, the embodiments of this application can be applied to various scenarios, including but not limited to cloud technology, artificial intelligence, smart transportation, and assisted driving.

[0078] The page rendering method provided by the exemplary embodiments of this application will be described below with reference to the accompanying drawings and the application scenarios described above. It should be noted that the application scenarios described above are only shown to facilitate understanding of the spirit and principles of this application, and the embodiments of this application are not limited in any way in this respect.

[0079] See Figure 3 The diagram shown is a flowchart of a page rendering method provided in this application embodiment. Taking the server as the execution subject as an example, the specific implementation process of this method is as follows: steps S31-S33:

[0080] S31: The server obtains the set of sub-code modules called by each page code module according to the preset module construction information.

[0081] Each page code module contains: dedicated code for rendering the corresponding web page; each sub-code module contains: common code for rendering at least one web page (or simply page).

[0082] In this embodiment, the page code module is a page-level module, which contains only the code used only on this page, that is, the exclusive code that implements the rendering of the corresponding web page. For example, the page code module of the homepage only contains the code used only on the homepage. The sub-code module, on the other hand, is a sub-level code module that belongs to the page-level code module. It can contain code that is commonly used by multiple pages. For example, if a sub-code module is a search box module, and both the homepage and the details page have search boxes, the code in this module is used on both the homepage and the details page. That is, it contains the code of the search box part that is commonly used by the homepage and the search page.

[0083] Subcode modules can also be divided into different levels, such as first-level subcode modules, second-level subcode modules that belong to first-level subcode modules, and third-level subcode modules that belong to second-level subcode modules.

[0084] For example, the search box module can be further divided into modules a (such as the input box module), b (such as the magnifying glass icon module), and c (drop-down list module). In this case, the search box module can be a first-level sub-code module, and modules a, b, and c can be second-level sub-code modules. These sub-code modules are all code that can be shared by at least one page, rather than exclusive code belonging to a specific page.

[0085] The page rendering method in this application abandons the traditional approach of collecting dependencies between code modules at runtime. Instead, it explicitly establishes relationships between modules by utilizing module build information during the build process. The module build process is described in detail below:

[0086] One alternative implementation is to use module names to display the relationships between modules and pages, and between modules themselves.

[0087] Before step S31, the server may also construct a separate page code module for each web page and assign a module name to each page code module so that the module name of each page code module represents the web page to which the page code module belongs.

[0088] In this embodiment of the application, the code contained in the module is divided into two main categories according to the different page content: js code and CSS code. The js code is related to the logical content of the page and is used to control the behavior of the webpage (such as how the page jumps when the user clicks a certain icon). The CSS is related to the style content of the page and is used to set the appearance style of the webpage (such as the display position, size, pattern, etc. of a certain icon on the page).

[0089] Specifically, the module name is assigned to the page code module during the construction process. Each web page component's module can be divided into two parts: a js file (i.e., the page js code module) and a css file (i.e., the page CSS code module).

[0090] See Figure 4 The diagram illustrates the module names of a page code module in one embodiment of this application. For example, the module name for the homepage module is: the js file is named index.chunk.js (homepage logic), and the CSS file is named index.chunk.css (homepage style); similarly, the module name for the details page module is: the js file is named detail.chunk.js (details page logic), and the CSS file is named detail.chunk.css (details page style); the module name for the user page module is: the js file is named user.chunk.js (user page logic), and the CSS file is named user.chunk.css (user page style).

[0091] It should be noted that the basic development background in this application is a new framework (a controllable framework developed by the developers themselves) that is different from the SSR framework in related technologies. Based on this, for each web page, such as a user page, a new user folder can be created to represent the user page. Then, based on this framework, the code corresponding to the user folder can be packaged into a user.xxx file. At runtime, the file name user.xxx indicates that the file is related to the user module; similarly, index.xxx can represent the homepage, and so on.

[0092] In the above embodiments, the way the homepage is denoted as index, the detail page as detail, the user page as user, etc., is listed above is only an example. Any way of displaying the assigned module name is applicable to the embodiments of this application.

[0093] In related technologies, the more complex the page, the longer the inference time. However, in the embodiments of this application, the association between the module and the page can be directly displayed by combining the module name. Therefore, this application can obtain the association between the module and the page in O(1) time complexity. No matter how complex the page is, the inference time is fixed at O(1), that is, the association between the module and the page can be obtained in constant time.

[0094] In this embodiment of the application, the above method can be used to establish the association between page-level page code modules and pages by displaying the module name. By naming the page-level file, it can be known which page it belongs to.

[0095] Based on this, the importIds set of each page code module can be obtained from the information provided by the build tools in the framework (such as the module object parsed by each page code module). The importIds set refers to the set of dependent modules of the page code module, which is also the set of sub-code modules in this article, representing the various sub-code modules that a page code module depends on and loads.

[0096] For example, if there is a homepage module, the build information provided by the build tool can be used to determine which sub-level code modules the homepage module needs to load. For instance, the build information can be used to obtain the search box module and other homepage modules that the homepage module depends on. This can form a set of sub-code modules corresponding to the homepage module. This set can be in list form or other forms, which are not specifically limited in this article.

[0097] like Figure 5 As shown, this is a schematic diagram of a set of dependent modules in an embodiment of this application. The homepage page code module index.chunk.css (homepage style) further depends on the sub-code modules: data1 module, data2 module, data3 module, and other homepage modules; the details page code module detail.chunk.css (details page style) further depends on the sub-code modules: data2 module, data3 module, and other details page modules; and the user page page code module user.chunk.css (user page style) further depends on the sub-code modules: data1 module, data3 module, and other user page modules.

[0098] Obviously, Figure 5This clearly represents the set of dependent modules for each page's code module, also known as the set of sub-code modules. This set indicates which sub-level modules a page-level module depends on. From this information, we can deduce which page-level modules depend on a sub-level module, thus obtaining the page code module corresponding to each sub-code module. The specific process is as follows:

[0099] S32: The server obtains the set of page code modules to which each sub-code module belongs, based on the set of each sub-code module.

[0100] In this embodiment, after obtaining the set of sub-code modules for each page code module, a module dependency table can be established to determine which top-level page code module each sub-code module belongs to. For example, if the homepage loads the search box module and other homepage modules, and the user page uses the search box module and other user page modules, then it can be inferred that the search box module is a module used by both the homepage and the user page. Similarly, it can be determined which page code modules depend on other sub-code modules. That is, in this embodiment, the module name indicates which pages use the module, making it easy to obtain this module dependency relationship.

[0101] Specifically, the page code module in this application is the top-level module. It's necessary to find which page code modules will ultimately use each sub-code module. Considering that a sub-code module can be used on multiple pages, this embodiment stores the traversal records in an object. When a sub-code module appears repeatedly, a new record is added. For example, the `date` module is first discovered when retrieving the dependencies of the homepage module. At this time, a relationship `date:[index]` is established in the module dependency table, representing that the `date` module will be used in the `index` module. When the `date` module is subsequently found to be used again on other pages, such as the details page, a `date:[index, detail]` entry is added to its dependency relationship, and so on.

[0102] It should be noted that, considering that the sub-code modules in this application may also have multiple levels, the process of obtaining this relationship can adopt a deep recursive approach. By traversing and recording the set of sub-code modules of each page code module, the set of page code modules to which each sub-code module belongs is obtained, and then a module dependency table is generated.

[0103] Specifically, the deep recursion process refers to the following: For example, if both the homepage and the user page depend on the search box module, and the search box itself depends on other sub-code modules, then it will first record that the search box module is shared by both index and user. The other sub-code modules that the search box depends on also depend on the search box, so these other sub-code modules are also shared by index and user. This process is repeated layer by layer, and finally, it can record which pages reference each small file, thus obtaining the set of page code modules to which each level of sub-code module belongs.

[0104] Still with Figure 5 As shown in the example, by Figure 5 It can be seen that the aforementioned pages depend on the following sub-code modules: data1, data2, and data3. Specifically, data1 is depended on by the homepage and user page, data2 by the homepage and detail page, and data3 by the homepage, detail page, and user page. Based on these characteristics, the set of page code modules to which each sub-code module belongs can be determined. Each sub-code module corresponds to a set of page code modules, which contains all the page code modules that depend on the corresponding sub-code module.

[0105] In this embodiment, the set of page code modules to which each sub-code module belongs can be considered. A module dependency table is used to represent the dependency relationship between each sub-code module and its corresponding page code module.

[0106] Specifically, the above process can be used to obtain Figure 6 The module dependency table shown lists the following: Figure 5 The three sub-code modules shown are the page code module sets corresponding to the following: date1:[index, user]; date2:[index, detail]; date3:[index, detail, user].

[0107] Optionally, based on the set of page code modules, common modules that are depended on by at least two page code modules in each sub-code module can be identified. Then, based on the module names of the page code modules that use each common module, the module name of each common module is determined, so that the module name of each common module represents the various web pages using that common module. In this way, when subsequently accessing the page to be rendered or its next level page, the relevant common modules can be quickly identified directly based on their module names.

[0108] Specifically, in the embodiments of this application, it is possible to obtain how many top-level page code modules any given sub-code module file will be used in. When a sub-code module is used by two or more pages at the same time, it can be considered as a common module. In this way, common modules can be filtered out from various sub-code modules.

[0109] by Figure 5 For example, the homepage, detail page, and user page depend on a total of six sub-modules: data1, data2, data3, other modules for the homepage, other modules for the detail page, and other modules for the user page. Among these, the data1 module is used by both the homepage (index) and the user page (user); the data2 module is used by both the homepage and the detail page (detail); and the data3 module is used by the homepage, user page, and detail page. These three sub-modules are common modules.

[0110] Furthermore, these sub-code modules used by at least two pages are extracted, and each sub-code module is built into a separate file.

[0111] Furthermore, for each public module, the module names of the various page code modules that call the same public module are combined to obtain the corresponding module name, so as to directly determine which pages the module will be used on by the module name.

[0112] As mentioned above Figure 6 Taking the listed module dependency table as an example, it means that the date1 module is used on both the homepage and the user page, so the date1 module can be built as index-user.chunk.css; similarly, the date2 module can be built as index-detail.chunk.css; and the date3 module can be built as index-detail-user.chunk.css.

[0113] Based on the above implementation method, and through the aforementioned relationships, the module granularity can be broken down very finely to ensure that each module contains only the code it uses and excludes unnecessary code. Furthermore, all the necessary information in this application is generated during the build process, allowing this information to be directly used during page rendering. There is no runtime performance penalty.

[0114] Furthermore, the naming of common modules can be further optimized. For example, as application complexity increases, a common module may be used on many pages. If a combination of module names is used as the final name, the filename will be very long. Therefore, this application uses a hash algorithm to uniformly optimize module names and establishes a module name mapping table to ensure that the final generated common module names are of fixed length without affecting algorithm efficiency.

[0115] Specifically, a hash algorithm is used to combine the module names of the various page code modules that call a common module, and the resulting combination is mapped to a fixed-length string. Then, the module name corresponding to the common module is adjusted based on this string. Furthermore, a module name mapping relationship is established between each mapped string and its corresponding combination result. This module name mapping relationship is used to represent the various web pages that use the corresponding common module.

[0116] like Figure 7 As shown, this is a schematic diagram of a module name mapping table in an embodiment of this application. The module name combination corresponding to hash1 is user-index, hash2 is detail-index, and hash3 is user-detail-index. Based on this, the date1 module can be constructed as hash1.chunk.css; similarly, the date2 module can be constructed as hash2.chunk.css; and the date3 module can be constructed as hash3.chunk.css.

[0117] In the above implementation, a hash algorithm is used to uniformly optimize module names, and a module name mapping relationship is used to represent the association between the mapped characters and the module names before mapping. This allows for the quick determination of each webpage using the corresponding public module by combining the optimized public module names and the module name mapping relationship.

[0118] This application primarily addresses how to collect all the necessary CSS files for a page in advance and load them in the header to prevent page flickering. Therefore, the methods listed above facilitate finding the necessary public modules when accessing the page.

[0119] S33: When the server accesses the page to be rendered, it loads the first page code module used by the page to be rendered; and, based on the set of page code modules, it determines at least one common module that the first page code module depends on, and preloads at least one common module.

[0120] Each public module is a sub-code module that is called by at least two page code modules. In step S33, the public module that the first page code module depends on is not only depended on by the first page code module, but also depends on by at least one other page code module.

[0121] It should be noted that the common modules in this application embodiment can also be divided into js code modules and CSS code modules. Considering that page flickering is mainly related to the rendering of style content during page rendering, this application mainly solves the problem of how to collect all the necessary CSS files required by the page in advance.

[0122] Optionally, at least one common module in step S33 includes a common module of asynchronous styles (which may be referred to as an asynchronous style module), wherein the common module of asynchronous styles is a module that contains the cascading styles of the web page and is not loaded when the web page is first accessed.

[0123] In related technologies, the loading logic of asynchronous modules involves runtime logic, that is, the dependency relationship between modules is only built when the web page is accessed. However, in the embodiment of this application, the module dependency relationship is collected before running. When the page is accessed, the previously collected module dependency relationship can be used to determine all the necessary CSS files required for the page to be rendered. The CSS files belonging to the common modules are preloaded to prevent page flickering.

[0124] Specifically, by combining the module list (which records the module names of each module) and module dependencies constructed above, when a page is accessed, all module files used by the page can be obtained directly in O(1) time complexity. That is, all module files used by the page can be obtained in constant time, including the page code module and the public modules that the page code module depends on.

[0125] For example, when the page to be rendered is the homepage, code that only appears on the homepage is loaded first, such as the index.chunk.css style file. Then, the system searches the previously established module dependencies to find which common modules have parts referenced by the homepage module (index.chunk.css) (i.e., it looks for which common modules have dependencies that include the homepage module), such as the search box module index-user.chunk.css. Therefore, when loading the homepage, in addition to loading the code used by the homepage itself, the code of common modules is preloaded for caching. Specifically, these common modules can be preloaded in the head of the HTML file to avoid style flickering issues.

[0126] In this embodiment, by placing the CSS file in the `<head>` section, the DOM tree can be rendered simultaneously when the HTML is loaded and the Document Object Model (DOM) tree is generated. This prevents flickering, blank screens, or layout chaos.

[0127] As mentioned above Figure 5 For example, assuming the page to be rendered is the homepage, according to the module list and module dependencies, the homepage module (index.chunk.css) is included in the dependencies of public module a (data1 module), public module b (data2 module), and public module c (data3 module). Therefore, some or all of these three public modules need to be placed in the head of the HTML file in advance for loading.

[0128] See Figure 8 As shown, it is a schematic diagram of a page to be rendered in an embodiment of this application. Figure 8 The page to be rendered shown is the homepage of a certain browser, which will be displayed when the user opens the browser. Figure 8 The page shown displays a search icon S80 and a search box S81, along with some recommended information. The elements within the dashed box S80 can be considered data corresponding to common module a (data1 module), and the elements within the dashed box S81 can be considered data corresponding to common module b (data2 module).

[0129] Optionally, after step S33, page switching (page redirection) can also be performed, as follows:

[0130] The page to be rendered is switched to the next level page, where the next level page and the page to be rendered jointly call the target common module; the second page code module used by the next level page is loaded, and the pre-loaded target common module is obtained for page rendering.

[0131] For example, if the next level page is a details page, then according to the module list and module dependencies, the target common modules called by both the details page and the homepage are: common module b (data2 module) and common module c (data3 module). When the user switches from the homepage to the details page, the second page code module used by the details page (i.e., detail.chunk.css) is loaded, and the pre-loaded target common modules, data2 module and data3 module, are obtained. The page is rendered based on these obtained codes.

[0132] See Figure 9 As shown, it is a schematic diagram of a next-level page in an embodiment of this application. Figure 9The next level page shown is Figure 8 The details page shown in the browser, when the user is on Figure 8 When you enter the keyword "Zhang San" in the search box shown, the search results will appear as follows. Figure 9 The details page shown displays a search icon S90 and a search box S91. In addition, some search results are displayed as information cards on the page, such as... Figure 9 The phrases "Zhang San - BxDx Encyclopedia" and "Zhang San - Hot Topics" appear in the text. The elements within the dashed box S90 can also be considered as data corresponding to common module a (data1 module), and the elements within the dashed box S91 can be considered as data corresponding to common module b (data2 module). Clearly, in the context of... Figure 8 The homepage shown redirects to Figure 9 When viewing the details page, the styles of element 1 (search icon) and element 2 (search box) remain unchanged.

[0133] For example, if the next level page is a user page, then according to the module list and module dependencies, the target common modules called by both the user page and the homepage are: common module a (data1 module) and common module c (data3 module). When the user switches from the homepage to the user page, the second page code module used by the user page (i.e., user.chunk.css) is loaded, and the pre-loaded target common modules: data1 module and data3 module are obtained. The page is rendered based on the obtained code.

[0134] In the above implementation, when navigating from the page to be rendered to the next level page, it is only necessary to load the second page code module of the next level page (containing only the code used by the next level page itself) and retrieve the code of the relevant common modules from the cache. Since the common code of the page to be rendered and the next level page has already been loaded and cached when accessing the page to be rendered, the relevant common code can be directly retrieved from the cache when accessing the next level page, without any resource consumption. There is no need to reload the common modules. Loading the required modules on demand can achieve the page switching effect, reducing the time spent repeatedly loading common files, thereby reducing the page switching time and improving page access efficiency. Moreover, it eliminates the unfriendly experience of users waiting for page switching, such as lag and blank pages.

[0135] Furthermore, in this embodiment, module naming allows for quick identification of which pages use the common module. By mapping module names using a hash algorithm, the mapping relationship can also quickly determine which pages use the common module. This effectively improves the speed of module code retrieval, thereby achieving efficient page rendering.

[0136] See Figure 10The diagram shown is a flowchart illustrating a specific page rendering method in this application. The specific implementation process of this method is as follows:

[0137] Step S101: The server builds its own page code module for each web page and displays and assigns a module name to each page code module;

[0138] Step S102: The server obtains the set of sub-code modules called by each page code module according to the module construction information;

[0139] Step S103: The server obtains the set of page code modules to which each sub-code module belongs based on the set of sub-code modules;

[0140] Step S104: The server determines the common modules in each sub-code module based on the set of code modules for each page;

[0141] Step S105: The server determines the module name of each public module based on the module name of the page code module that uses each public module;

[0142] Step S106: The server optimizes the module name of the public module using a hash algorithm;

[0143] Step S107: When the server accesses the page to be rendered, it loads the first page code module used by the page to be rendered according to the module name and module dependency relationship, and determines at least one common module that the first page code module depends on based on the set of each page code module, and preloads at least one common module.

[0144] Step S108: When switching from the page to be rendered to the next level page, the server loads the second page code module used by the next level page according to the module name and module dependency relationship, and obtains the pre-loaded target public module for page rendering.

[0145] In this embodiment, the above-mentioned functions such as module construction and module dependency relationship construction can be implemented automatically at the framework level, without relying on manual optimization by developers, thus minimizing the operational burden. In addition, it ensures that when each page loads code, it only loads the parts used by that page and does not load the parts that are not used, and different pages will not load duplicate content.

[0146] The following is combined Figure 11A and Figure 11B Here is a brief summary of the page rendering logic in the embodiments of this application.

[0147] See Figure 11AAs shown, it is a logical schematic diagram of a page rendering method in an embodiment of this application. Figure 11A This example primarily uses the CSS module (the JS module is similar, and repeated examples will not be repeated):

[0148] During the build phase: First, a module name needs to be assigned to each webpage, such as the homepage module index.chunk.css, the details page module detail.chunk.css, the user page module user.chunk.css, and so on. Then, the dependency module sets for each of the above three page code modules are obtained (i.e., the sets of each dependency module are retrieved), such as index.chunk.css: data1 module, data2 module, data3 module, and other homepage modules; detail.chunk.css: data2 module, data3 module, and other details page modules; user.chunk.css: data1 module, data3 module, and other user page modules. ...; and then by building module dependencies, the common modules are determined and named (the specific process can be found in the above embodiments, and the repeated parts will not be repeated), such as: data1 module: index-user.chunk.css (or user-index.chunk.css, not shown in the figure), date2 module: index-detail.chunk.css (or detail-index.chunk.css, not shown in the figure); date3 module: index-detail-user.chunk.css (or user-detail-index.chunk.css, not shown in the figure).

[0149] Based on the above, during the runtime phase, module code can be loaded / preloaded and the page rendered according to the module list (including module names) and module dependencies.

[0150] Based on the above process, it can be ensured that when each page loads code, it will only load the parts that are used by that page and will not load the parts that are not used. At the same time, different pages will not load duplicate content.

[0151] The naming process for each module is briefly summarized below:

[0152] See Figure 11B The diagram illustrates the naming logic of various modules in one embodiment of this application. In this embodiment, all pages depend on the header; specifically, the homepage and details page depend on weui. Weui is a user interface (UI) style library.

[0153] For example, assign a module name (chunkName) to the homepage module: index.chunk.css, indicating that the style code is only used on the homepage; similarly, for the details page module: detail.chunk.css, indicating that the style code is only used on the details page, and for the user page module: user.chunk.css, indicating that the style code is only used on the user page; by analyzing the module meta information, find the common module that they all use, then find the top-level page (i.e., the upper-level chunk) corresponding to the common module, and assign a specific name, such as naming the common style containing the homepage and details page as detail-index.chunk.css, and naming the common style containing the homepage, details page, and user page as user-detail-index.chunk.css.

[0154] Furthermore, the module name can be optimized using a hash algorithm.

[0155] In this embodiment, the naming of each module during the build phase directly reflects the relationship between modules and pages, as well as the relationship between modules themselves, facilitating the loading of relevant code during the runtime phase. Furthermore, this functionality can be implemented automatically at the framework level, without relying on manual optimization by developers.

[0156] Based on the same inventive concept, embodiments of this application also provide a page rendering apparatus. For example... Figure 12 As shown, this is a structural schematic diagram of a page rendering device 1200, which may include:

[0157] The first analysis unit 1201 is used to obtain the set of sub-code modules called by each page code module according to the preset module construction information. Each page code module includes: dedicated code for rendering the corresponding web page; each sub-code module includes: common code for rendering at least one web page.

[0158] The second analysis unit 1202 is used to obtain the set of page code modules to which each sub-code module belongs, based on each set of sub-code modules.

[0159] The rendering unit 1203 is used to load the first page code module used by the page to be rendered when accessing the page to be rendered; and to determine at least one common module that the first page code module depends on based on the set of page code modules, and to preload at least one common module, wherein each common module is a sub-code module called by at least two page code modules.

[0160] Optionally, at least one public module includes a public module with asynchronous styles, wherein the public module with asynchronous styles is a module that contains the cascading styles of the web page and is not loaded when the web page is first accessed.

[0161] Optionally, the device also includes:

[0162] The module construction unit 1204 is used to construct a page code module for each web page before the first analysis unit 1201 obtains the set of sub-code modules called by each page code module according to the preset module construction information, and assigns a module name to each page code module so that the module name of each page code module represents the web page to which the page code module belongs.

[0163] When accessing a page to be rendered, the first page code module is determined based on the module name of each page code module.

[0164] Optionally, the second analysis unit 1202 is also used for:

[0165] Based on the set of code modules for each page, identify the common modules in each sub-code module;

[0166] Based on the module name of the page code module that uses each public module, determine the module name of each public module so that the module name of each public module represents the web page that uses the public module.

[0167] When accessing a page to be rendered, at least one common module is determined based on the module name of each common module.

[0168] Optionally, the second analysis unit 1202 is specifically used for:

[0169] For each common module, perform the following operations:

[0170] For a common module, the module names of the various page code modules that call the common module are combined to obtain the module name corresponding to the common module.

[0171] Optionally, the second analysis unit 1202 is also used for:

[0172] The combination result obtained by combining the module names of the various page code modules that call a common module through a hash algorithm is mapped to a fixed-length string.

[0173] Adjust the module name corresponding to a public module based on a string.

[0174] Optionally, the second analysis unit 1202 is also used for:

[0175] Establish a module name mapping relationship between each string obtained from the mapping and the corresponding combination result. The module name mapping relationship is used to represent each web page that uses the corresponding public module.

[0176] Optionally, rendering unit 1203 is also used for:

[0177] The page to be rendered is switched to the next level page, and the next level page and the page to be rendered jointly call the target common module;

[0178] Load the second page code module used by the next level page, and obtain the preloaded target common module for page rendering.

[0179] Because this application pre-divides modules based on whether the code modules used by a webpage are shared by other webpages during the module construction stage before accessing the webpage, it determines the page code module containing the exclusive code used to implement the rendering of the corresponding webpage, and the sub-code module containing the common code used to implement the rendering of at least one webpage. Then, based on the module construction information, it obtains the set of sub-code modules called by each page code module, and then, based on the obtained sets of sub-code modules, it inversely deduces which page code modules will call each sub-code module. That is, in the embodiments of this application, the dependency relationship between the page code module and the sub-code module can be determined before running the code. Therefore, when accessing the page, the dependency relationship constructed above can be directly referenced to quickly determine the various code modules related to the page. Only the code parts used by the page need to be loaded, and the unused parts will not be loaded. Furthermore, by placing the code parts shared by different pages in the header of the HTML file for pre-loading and caching, they can be directly read and used from the cache later, ensuring that different pages do not load duplicate code. Therefore, resources are not wasted, system performance is effectively guaranteed, and efficient page rendering is achieved.

[0180] For ease of description, the above sections are divided into modules (or units) according to their functions and described separately. Of course, in implementing this application, the functions of each module (or unit) can be implemented in one or more software or hardware components.

[0181] Having introduced the page rendering method and apparatus according to exemplary embodiments of this application, we will now introduce an electronic device according to another exemplary embodiment of this application.

[0182] Those skilled in the art will understand that various aspects of this application can be implemented as a system, method, or program product. Therefore, various aspects of this application can be specifically implemented in the following forms: a completely hardware implementation, a completely software implementation (including firmware, microcode, etc.), or a combination of hardware and software implementations, collectively referred to herein as a "circuit," "module," or "system."

[0183] Based on the same inventive concept as the above-described method embodiments, this application also provides an electronic device. In one embodiment, the structure of the electronic device can be as follows: Figure 13 As shown, it includes a memory 1301, a communication module 1303, and one or more processors 1302.

[0184] The memory 1301 is used to store computer programs executed by the processor 1302. The memory 1301 may mainly include a program storage area and a data storage area. The program storage area may store the operating system and programs required to run instant messaging functions, etc.; the data storage area may store various instant messaging information and operation instruction sets, etc.

[0185] Memory 1301 may be volatile memory, such as random-access memory (RAM); memory 1301 may also be non-volatile memory, such as read-only memory, flash memory, hard disk drive (HDD), or solid-state drive (SSD); or memory 1301 may be any other medium capable of carrying or storing a desired computer program having the form of instructions or data structures and accessible by a computer, but is not limited thereto. Memory 1301 may be a combination of the above-described memories.

[0186] Processor 1302 may include one or more central processing units (CPUs) or digital processing units, etc. Processor 1302 is used to implement the above-described page rendering method when calling computer programs stored in memory 1301.

[0187] The communication module 1303 is used to communicate with terminal devices and other servers.

[0188] This application embodiment does not limit the specific connection medium between the memory 1301, communication module 1303, and processor 1302. This application embodiment... Figure 13 The memory 1301 and the processor 1302 are connected via a bus 1304, and the bus 1304 is in Figure 13 The diagram uses thick lines to describe the connections between other components; these are for illustrative purposes only and should not be considered limiting. The 1304 bus can be divided into address bus, data bus, control bus, etc. For ease of description, Figure 13 It is described using only a thick line, but does not indicate that there is only one bus or one type of bus.

[0189] The memory 1301 stores a computer storage medium, which stores computer-executable instructions for implementing the page rendering method of this application embodiment. The processor 1302 is used to execute the above-described page rendering method, such as... Figure 3 As shown.

[0190] In some possible implementations, the computing device according to this application may include at least one processor and at least one memory. The memory stores program code that, when executed by the processor, causes the processor to perform the steps in the page rendering methods according to the various exemplary embodiments of this application described above. For example, the processor may perform actions such as... Figure 3 The steps are shown in the figure.

[0191] The following reference Figure 14 To describe a computing device 1400 according to this embodiment of the present application. Figure 14 The computing device 1400 is merely an example and should not impose any limitations on the functionality and scope of use of the embodiments of this application.

[0192] like Figure 14 As shown, the computing device 1400 is presented in the form of a general-purpose computing device. The components of the computing device 1400 may include, but are not limited to: at least one processing unit 1401, at least one storage unit 1402, and a bus 1403 connecting different system components (including storage unit 1402 and processing unit 1401).

[0193] Bus 1403 represents one or more of several bus structures, including a memory bus or memory controller, peripheral bus, processor, or local bus using any of the various bus structures.

[0194] Storage unit 1402 may include a readable medium in the form of volatile memory, such as random access memory (RAM) 14021 and / or cache memory 14022, and may further include read-only memory (ROM) 14023.

[0195] Storage unit 1402 may also include a program / utility 14025 having a set (at least one) of program modules 14024, such program modules 14024 including but not limited to: operating system, one or more application programs, other program modules and program data, each or some combination of these examples may include an implementation of a network environment.

[0196] The computing device 1400 can also communicate with one or more external devices 1404 (e.g., keyboard, pointing device, etc.), one or more devices that enable a user to interact with the computing device 1400, and / or any device that enables the computing device 1400 to communicate with one or more other computing devices (e.g., router, modem, etc.). This communication can be performed via input / output (I / O) interface 1405. Furthermore, the computing device 1400 can also communicate with one or more networks (e.g., local area network (LAN), wide area network (WAN), and / or public networks, such as the Internet) via network adapter 1406. As shown, network adapter 1406 communicates with other modules for the computing device 1400 via bus 1403. It should be understood that, although not shown in the figures, other hardware and / or software modules can be used in conjunction with the computing device 1400, including but not limited to: microcode, device drivers, redundant processors, external disk drive arrays, RAID systems, tape drives, and data backup storage systems.

[0197] In some possible implementations, various aspects of the page rendering method provided in this application can also be implemented as a program product, which includes a computer program. When the program product is run on an electronic device, the computer program causes the electronic device to perform the steps in the page rendering method according to the various exemplary embodiments of this application described above. For example, the electronic device can perform actions such as... Figure 3 The steps are shown in the figure.

[0198] The program product may employ any combination of one or more readable media. A readable medium may be a readable signal medium or a readable storage medium. A readable storage medium may be, for example, but not limited to, an electrical, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or any combination thereof. More specific examples (a non-exhaustive list) of readable storage media include: electrical connections having one or more wires, portable disks, hard disks, random access memory (RAM), read-only memory (ROM), erasable programmable read-only memory (EPROM or flash memory), optical fiber, portable compact disk read-only memory (CD-ROM), optical storage devices, magnetic storage devices, or any suitable combination thereof.

[0199] The program product of the embodiments of this application may employ a portable compact disc read-only memory (CD-ROM) and include a computer program, and may run on an electronic device. However, the program product of this application is not limited thereto. In this document, the readable storage medium may be any tangible medium that contains or stores a program that may be used by or in conjunction with a command execution system, apparatus, or device.

[0200] A readable signal medium may include a data signal propagated in baseband or as part of a carrier wave, carrying a readable computer program. This propagated data signal may take various forms, including but not limited to electromagnetic signals, optical signals, or any suitable combination thereof. A readable signal medium may also be any readable medium other than a readable storage medium, capable of sending, propagating, or transmitting a program for use by or in conjunction with a command execution system, apparatus, or device.

[0201] Computer programs contained on readable media may be transmitted using any suitable medium, including but not limited to wireless, wired, optical fiber, RF, etc., or any suitable combination thereof.

[0202] Computer programs for performing the operations of this application can be written in any combination of one or more programming languages, including object-oriented programming languages ​​such as Java and C++, and conventional procedural programming languages ​​such as C or similar languages. The computer program can execute entirely on the user's electronic device, partially on the user's electronic device, as a standalone software package, partially on the user's electronic device and partially on a remote electronic device, or entirely on a remote electronic device or server. In cases involving remote electronic devices, the remote electronic device can be connected to the user's electronic device via any type of network, including a local area network (LAN) or a wide area network (WAN), or it can be connected to an external electronic device (e.g., via the Internet using an Internet service provider).

[0203] It should be noted that although several units or sub-units of the device have been mentioned in the detailed description above, this division is merely exemplary and not mandatory. In fact, according to embodiments of this application, the features and functions of two or more units described above can be embodied in one unit. Conversely, the features and functions of one unit described above can be further divided and embodied by multiple units.

[0204] Furthermore, although the operations of the method of this application are described in a specific order in the accompanying drawings, this does not require or imply that these operations must be performed in that specific order, or that all the operations shown must be performed to achieve the desired result. Additionally or alternatively, certain steps may be omitted, multiple steps may be combined into one step, and / or one step may be broken down into multiple steps.

[0205] Those skilled in the art will understand that embodiments of this application can be provided as methods, systems, or computer program products. Therefore, this application can take the form of a completely hardware embodiment, a completely software embodiment, or an embodiment combining software and hardware aspects. Furthermore, this application can take the form of a computer program product embodied on one or more computer-usable storage media (including, but not limited to, disk storage, CD-ROM, optical storage, etc.) containing a computer-usable computer program.

[0206] Although preferred embodiments of this application have been described, those skilled in the art, upon learning the basic inventive concept, can make other changes and modifications to these embodiments. Therefore, the appended claims are intended to be interpreted as including the preferred embodiments as well as all changes and modifications falling within the scope of this application.

[0207] Obviously, those skilled in the art can make various modifications and variations to this application without departing from the spirit and scope of this application. Therefore, if such modifications and variations fall within the scope of the claims of this application and their equivalents, this application also intends to include such modifications and variations.

Claims

1. A page rendering method, characterized in that, The method includes: Based on the preset module construction information, obtain the set of sub-code modules called by each page code module. Each page code module contains: dedicated code for rendering the corresponding web page; each sub-code module contains: common code for rendering at least one web page. For each sub-code module in each sub-code module set, the corresponding page code module set is obtained by reverse engineering. The page code module set consists of each page code module that calls the sub-code module. When accessing a page to be rendered, a first page code module used by the page to be rendered is loaded; and, based on the set of each page code module, at least one public module that the first page code module depends on is determined, and the at least one public module is injected into the hypertext markup language file header of the page to be rendered for preloading cache, wherein each public module is a sub-code module that is called by at least two page code modules and has a direct calling relationship with the first page code module.

2. The method as described in claim 1, characterized in that, The at least one public module includes an asynchronous style public module, wherein the asynchronous style public module is a module that contains the web page cascading style and is not loaded when the web page is first accessed.

3. The method as described in claim 1, characterized in that, Before obtaining the set of sub-code modules called by each page code module according to the preset module construction information, the method further includes: Each webpage is constructed with its own page code module, and each page code module is assigned a module name so that the module name of each page code module represents the webpage to which the page code module belongs; When accessing the page to be rendered, the first page code module is determined based on the module name of each page code module.

4. The method as described in claim 1, characterized in that, Before accessing the page to be rendered, the following is also included: Based on the set of code modules for each page, identify the common modules in each sub-code module; The module name of each public module is determined based on the module name of the page code module that uses each public module, so that the module name of each public module represents the web page that uses the public module. When accessing the page to be rendered, the at least one common module is determined based on the module names of each common module.

5. The method as described in claim 4, characterized in that, The step of determining the module name of each public module based on the module name of the page code module that uses each public module includes: For each common module, perform the following operations: For a common module, the module names of the various page code modules of the common module are combined to obtain the module name corresponding to the common module.

6. The method as described in claim 5, characterized in that, The method further includes: The combination result obtained by combining the module names of the various page code modules that call the common module through a hash algorithm is mapped to a fixed-length string. Adjust the module name corresponding to the public module based on the string.

7. The method as described in claim 6, characterized in that, The method further includes: Establish a module name mapping relationship between each string obtained from the mapping and the corresponding combination result. The module name mapping relationship is used to represent each web page that uses the corresponding public module.

8. The method according to any one of claims 1 to 7, characterized in that, The method further includes: The page to be rendered is switched to the next level page, and the next level page and the page to be rendered jointly call the target common module; Load the second page code module used by the next level page, and obtain the pre-loaded target common module for page rendering.

9. A page rendering device, characterized in that, include: The first analysis unit is used to obtain the set of sub-code modules called by each page code module according to the preset module construction information. Each page code module contains: dedicated code for rendering the corresponding web page; each sub-code module contains: common code for rendering at least one web page. The second analysis unit is used to reverse-engineer the page code module set corresponding to each sub-code module in each sub-code module set, wherein the page code module set is composed of each page code module that calls the sub-code module; A rendering unit is configured to load a first page code module used by the page to be rendered when accessing the page to be rendered; and, based on the set of page code modules, determine at least one common module that the first page code module depends on, and preload and cache the at least one common module injected into the hypertext markup language file header of the page to be rendered, wherein each common module is a sub-code module that is called by at least two page code modules and has a direct calling relationship with the first page code module.

10. The apparatus as claimed in claim 9, characterized in that, The at least one public module includes an asynchronous style public module, wherein the asynchronous style public module is a module that contains the web page cascading style and is not loaded when the web page is first accessed.

11. The apparatus as claimed in claim 9, characterized in that, The device further includes: The module construction unit is used to construct a page code module for each web page before the first analysis unit obtains the set of sub-code modules called by each page code module according to the preset module construction information, and to assign a module name to each page code module so that the module name of each page code module represents the web page to which the page code module belongs. When accessing the page to be rendered, the first page code module is determined based on the module name of each page code module.

12. The apparatus as claimed in claim 9, characterized in that, The second analysis unit is also used for: Based on the set of code modules for each page, identify the common modules in each sub-code module; The module name of each public module is determined based on the module name of the page code module that uses each public module, so that the module name of each public module represents the web page that uses the public module. When accessing the page to be rendered, the at least one common module is determined based on the module names of each common module.

13. An electronic device, characterized in that, It includes a processor and a memory, wherein the memory stores a computer program that, when executed by the processor, causes the processor to perform the steps of any of the methods described in claims 1 to 8.

14. A computer-readable storage medium, characterized in that, It includes a computer program that, when run on an electronic device, causes the electronic device to perform the steps of any of the methods described in claims 1 to 8.

15. A computer program product, characterized in that, The method includes a computer program stored in a computer-readable storage medium; when a processor of an electronic device reads the computer program from the computer-readable storage medium, the processor executes the computer program, causing the electronic device to perform the steps of any one of claims 1 to 8.

Images