A method, system and storage medium for new page performance improvement

Abstract

The application discloses a method, system and storage medium for performance improvement of newly opened pages, and belongs to the technical field of front-end Web development. The method aims to solve the problem of low performance of newly opened pages in multi-page applications due to repeated loading and initialization of resources. The method comprises the following steps: in a parent page as a resource provider, identifying and managing resource objects in memory, and exposing an access interface; in a child page as a resource requester, detecting whether a cross-page communication channel allowing direct access to the memory of the parent page exists. If the channel is available, the child page obtains a direct reference to the memory of the target resource object in the parent page through the channel, realizing zero-copy reuse of resources; if the channel is not available, the mode of independently loading all resources is automatically degraded. The application can greatly improve the page loading performance while retaining the advantages of the multi-page application architecture, and optimize the user experience.

Description

Technical Field

[0001] This invention relates to the field of computer technology, and in particular to a method, system, and storage medium for improving the performance of new page opening. Background Technology

[0002] With the increasing complexity of modern web applications, page loading performance has become a key factor determining user experience. Currently, web application architectures are mainly divided into two modes: Single Page Application (SPA) and Multi-Page Application (MPA). SPAs provide a smooth interactive experience by dynamically updating content within a single page, avoiding repeated resource loading during page transitions. However, SPA architectures are typically more complex, with high coupling between modules, and suffer from problems such as long initial page load times and difficult memory management. MPA is a traditional web application architecture where each page is an independent document, offering advantages such as simple architecture, good isolation between pages, and benefits for search engine optimization (SEO). However, a significant drawback of MPA architecture is that whenever a user opens a new page or navigates from one page to another, the browser needs to re-request, download, parse, and execute all the resources required for that page, such as JavaScript libraries, CSS stylesheets, and various data. This process leads to significant loading delays, especially in resource-intensive applications (such as online reports, data dashboards, and large management backends), where performance bottlenecks are particularly prominent, severely impacting user experience.

[0003] To optimize MPA loading performance, existing technologies have proposed several solutions. For example, browser caching (HTTP caching, Service Worker, etc.) can avoid repeatedly downloading unchanged static files, but it cannot solve the problem that resources need to be re-parsed, compiled, and initialized every time a page loads, resulting in significant CPU and memory overhead. Another approach is to use preloading / prefetching techniques to download resources that may be used later, but this method relies on accurate prediction of user behavior, potentially leading to wasted bandwidth.

[0004] In addition, some technologies attempt to share data between different pages, such as through the browser's localStorage or using postMessage (an application programming interface for cross-window or cross-origin communication). A common drawback of these methods is that they are based on "pass-by-value" rather than "pass-by-reference." Shared data must first be serialized (e.g., converted to a JSON string), transmitted to the target page, and then deserialized to reconstruct the object. This process not only incurs performance overhead, but more importantly, it cannot share complex, non-serializable objects from the JavaScript runtime, such as functions, module instances, component instances, or established WebSocket connections. Therefore, these methods cannot fundamentally solve the problem of repeated initialization of runtime objects such as core JavaScript libraries and frameworks. In summary, existing technologies have not yet provided a solution that can effectively solve the problem of repeated initialization of cross-page resources while retaining the advantages of the MPA architecture. Summary of the Invention

[0005] To address the performance issues inherent in multi-page applications (MPAs) mentioned in the background, caused by repeated resource loading and initialization when opening new pages, this invention provides a method, system, and storage medium for improving new page performance. This invention aims to achieve runtime resource object reuse by establishing a direct memory reference channel between parent and child pages, thereby preserving the flexibility of the MPA architecture while achieving loading performance similar to that of a single-page application (SPA).

[0006] To achieve the above objectives, the present invention provides a method for improving the performance of new page openings, applied to a computer device, the method comprising: In the parent page that is the resource provider, identify at least one resource object that can be shared within the parent page; Configure resource index information for the at least one resource object, and store the at least one resource object in a resource management structure in the parent page memory; In the global accessibility context of the parent page, an access interface for obtaining resources is exposed; In the subpage acting as the resource requester, detect whether there exists a cross-page communication channel that allows the subpage to directly access objects in the parent page's memory; If it exists, a connection is established with the parent page through the cross-page communication channel, and a request containing resource index information corresponding to the target resource object is sent; and Through the cross-page communication channel, a direct memory reference to a resource object matching the request is obtained, wherein the direct memory reference is a reference to an existing resource object in the memory of the parent page; If it does not exist, the subpage will be switched to full resource loading mode, and all resources required for the subpage to run will be loaded independently.

[0007] This approach allows child pages to directly reuse pre-initialized resource objects from the parent page, skipping the time-consuming download, parsing, and initialization processes, thereby significantly improving loading speed.

[0008] Optionally, configuring resource index information for the at least one resource object includes: assigning a corresponding version number to the at least one resource object; and the request sent by the subpage includes the version requirement expected by the target resource object, the version requirement being used to match the resource object in the resource management structure.

[0009] This approach, by introducing version control, ensures that the resource objects obtained by the child page are version compatible, avoiding functional abnormalities of the child page caused by upgrades to the parent page's resources, and enhancing the stability and maintainability of the system.

[0010] Furthermore, the cross-page communication channel is established based on the browser's window.opener property; and the detection of whether a cross-page communication channel exists that allows the child page to directly access objects in the parent page's memory includes: detecting whether the child page's window.opener object exists, whether the child page and the parent page pointed to by the window.opener are from the same origin, and whether the parent page is alive.

[0011] This method utilizes a secure and reliable mechanism natively provided by the browser under the same-origin policy to establish direct connections between pages, offering good compatibility and ease of implementation.

[0012] In one implementation, establishing a connection with the parent page through the cross-page communication channel includes: performing a handshake protocol through the cross-page communication channel to establish a connection with the parent page; the method further includes: coordinating state synchronization or function calls between the parent page and the child page through a predefined communication protocol based on the direct memory reference.

[0013] The handshake protocol enables authentication and resource inventory negotiation, while subsequent communication protocols support more complex interactions between parent and child pages (such as event notifications and remote method calls), making resource reuse not limited to static objects.

[0014] Optionally, the method further includes: applying a security isolation mechanism to at least one resource object provided by the parent page to the child page to restrict or prevent the child page from writing to the resource object.

[0015] This design prevents child page code from accidentally or maliciously modifying shared resource objects, thereby avoiding contamination of the state of the parent page or other pages sharing the resource and ensuring the stability of the entire application.

[0016] Furthermore, the security isolation mechanism is implemented by wrapping the resource object with a JavaScript proxy, which is used to intercept write operation requests to the resource object.

[0017] Compared to simple object freezing (Object.freeze), using a Proxy provides more flexible and powerful control capabilities, enabling fine-grained management of write operations, such as allowing modification of certain whitelisted properties, logging write operations, or triggering specific logic during interception.

[0018] In one implementation, the method further includes: in the subpage, while obtaining the resource object through reuse, loading the incremental resources unique to the subpage itself in parallel.

[0019] This parallel processing strategy allows the reuse of shared resources and the loading of incremental resources to occur simultaneously, further reducing the total page load time and optimizing the loading path.

[0020] Furthermore, the method also includes: in the subpage, coordinating the resource objects obtained through reuse with the incremental resources loaded by the subpage itself to handle dependencies and naming conflicts.

[0021] This coordination step ensures that all resources (whether reused or newly added) are correctly integrated into the runtime environment of the subpage, resolves dependency order issues and global variable overriding issues that may occur during resource merging, and guarantees the correct execution of page functions.

[0022] The present invention also provides a system for improving the performance of new page opening, which is applied to a computer device, the system comprising: The resource identification module is used to identify at least one shareable resource object within the parent page, which is the resource provider. The resource management module is used to configure resource index information for the at least one resource object and store the at least one resource object in a resource management structure in the parent page memory; The interface exposure module is used to expose access interfaces for obtaining resources in the global accessibility context of the parent page. The channel detection module is used to detect, in the subpage acting as the resource requester, whether there is a cross-page communication channel that allows the subpage to directly access objects in the memory of the parent page; The resource request module is used to establish a connection with the parent page through the cross-page communication channel when the cross-page communication channel exists, and send a request containing resource index information corresponding to the target resource object; The reference acquisition module is used to acquire, when the cross-page communication channel exists, a direct memory reference of a resource object that matches the request through the cross-page communication channel. The direct memory reference is a reference to an existing resource object in the memory of the parent page. The degradation processing module is used to switch the subpage to full resource loading mode when the cross-page communication channel is detected to be absent, and to independently load all resources required for the subpage to run.

[0023] The present invention also provides a computer-readable storage medium having a computer program stored thereon, which, when executed by a processor, implements the method described above.

[0024] Compared with the prior art, the present invention has the following beneficial effects: 1. Significantly improves page loading performance: By directly referencing memory, resource objects can be reused. Subpages do not need to download, parse, compile, and initialize shared JavaScript libraries, frameworks, and other core resources again, which fundamentally eliminates the main performance bottleneck in the MPA architecture and greatly shortens the loading time of new pages.

[0025] 2. Reduced system resource consumption: By reusing existing object instances in the parent page's memory, duplicate object copies are avoided in the child page, thus significantly reducing the memory allocation of the child page, lowering peak memory usage, and alleviating the pressure on the browser's garbage collection (GC).

[0026] 3. Maintain MPA architecture advantages: It does not require disruptive architectural changes to existing MPA applications. It retains the original advantages of MPA, such as page independence, module decoupling, ease of maintenance, and SEO friendliness, making it possible to perform incremental performance optimization in large and complex projects.

[0027] 4. Robustness and Security: The solution incorporates a robust degradation mechanism. When the cross-page communication channel becomes unavailable for any reason (such as browser policies or non-standard opening methods), the page automatically switches to full resource loading mode, ensuring full functionality. Simultaneously, by introducing a security isolation mechanism, it effectively prevents accidental modification of shared resource objects by child pages, guaranteeing the stability of the parent page and the entire application. Attached Figure Description

[0028] Figure 1 This is a flowchart illustrating a method for improving the performance of new page openings, as provided in an embodiment of the present invention.

[0029] Figure 2 This is a diagram showing the internal module structure of the resource sharing pool manager in an embodiment of the present invention.

[0030] Figure 3 This is a diagram showing the internal module structure of the resource reuse bootloader in an embodiment of the present invention.

[0031] Figure 4 This is a schematic diagram comparing direct memory references and traditional value passing in an embodiment of the present invention.

[0032] Figure 5 This is a schematic diagram illustrating the working principle of a security isolation mechanism in an embodiment of the present invention.

[0033] Figure 6 This is a flowchart illustrating a method for improving the performance of new page openings, as provided in an embodiment of the present invention. Detailed Implementation

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

[0035] In the description of this invention, it should be understood that the terms "center," "longitudinal," "lateral," "length," "width," "thickness," "upper," "lower," "front," "rear," "left," "right," "vertical," "horizontal," "top," "bottom," "inner," "outer," "clockwise," and "counterclockwise," etc., indicate the orientation or positional relationship based on the orientation or positional relationship shown in the accompanying drawings. They are only for the convenience of describing this invention and simplifying the description, and do not indicate or imply that the device or element referred to must have a specific orientation, or be constructed and operated in a specific orientation. Therefore, they should not be construed as limitations on this invention.

[0036] Currently, in the field of web application development, multi-page application (MPA) architecture is widely used due to its advantages such as page independence, ease of maintenance, and search engine optimization (SEO) friendliness. However, its core performance bottleneck lies in the fact that every time a new page is opened, all necessary resources need to be independently requested, downloaded, parsed, and initialized, resulting in slow page loading and a poor user experience. Although single-page application (SPA) architecture solves the problem of repeated resource loading by dynamically updating content within a single page, it also brings new challenges such as architectural complexity, slow first-screen loading, and difficult memory management. Existing technologies based on browser caching or cross-page data sharing can either only avoid repeated network downloads but cannot eliminate the overhead of parsing and initialization in memory; or, due to their reliance on serialization and deserialization, they cannot share complex runtime objects such as functions and class instances, and incur performance losses.

[0037] To address the aforementioned technical issues, this invention provides an innovative performance enhancement solution. Utilizing native browser mechanisms, it establishes a communication channel between parent-child pages that allows direct memory access, enabling child pages to reuse initialized resource objects from the parent page with "zero-copy" functionality. Specifically, the "resource object" referred to in this invention is an object within the JavaScript runtime context of the parent page (as the resource provider) that can be reused by the child page, such as global objects of JavaScript libraries or frameworks, application state data, calculation results, component instances, etc. The "cross-page communication channel" is a browser mechanism that allows the child page, as the resource requester, to directly access objects in the parent page's memory. Through this channel, the child page obtains not a copy of the resource object, but a "direct memory reference," i.e., a reference or pointer to an existing resource object in the parent page's memory heap. When this channel is unavailable, the system automatically switches to "full resource loading mode," where the child page independently loads all resources required for its operation in a traditional manner, thus ensuring the robustness of the solution.

[0038] The technical solution of this invention will be described in detail below. This invention provides a system architecture for improving new page opening performance, mainly involving a parent page as a resource provider and a child page as a resource requester. A resource sharing pool manager is deployed within the parent page, and a resource reuse bootstrap is deployed within the child page. When the child page is opened by the parent page, a cross-page communication channel can be established between the two, specifically the `window.opener` reference channel in this embodiment. Through this channel, the resource reuse bootstrap of the child page can communicate with the resource sharing pool manager of the parent page, thereby obtaining direct memory references to the required resource objects, avoiding repeated loading and initialization of resources, and significantly improving the loading performance of the child page.

[0039] The present invention provides a method for improving the performance of new page opening, applied to computer devices, comprising: In the parent page that is the resource provider, identify at least one resource object that can be shared within the parent page; Configure resource index information for the at least one resource object, and store the at least one resource object in a resource management structure in the parent page memory; In the global accessibility context of the parent page, an access interface for obtaining resources is exposed; In the subpage acting as the resource requester, detect whether there exists a cross-page communication channel that allows the subpage to directly access objects in the parent page's memory; If it exists, a connection is established with the parent page through the cross-page communication channel, and a request containing resource index information corresponding to the target resource object is sent; and Through the cross-page communication channel, a direct memory reference to a resource object matching the request is obtained, wherein the direct memory reference is a reference to an existing resource object in the memory of the parent page; If it does not exist, the subpage will be switched to full resource loading mode, and all resources required for the subpage to run will be loaded independently.

[0040] Combination Figure 1 and Figure 6 The flowchart shown summarizes the complete workflow. First, on the parent page, the parent page resource preparation step S100 is executed, which includes identifying and registering shareable resource objects. Then, when the child page is opened, on the child page, the connection detection step S200 is executed, which checks whether a valid cross-page communication channel exists. If the detection result is yes, the resource reuse process begins, sequentially executing the connection establishment and resource request step S300, the memory direct reference acquisition and reuse step S400, and the parallel loading of incremental resources step S500. If the detection result is no, the degradation fallback process begins, executing the full resource loading mode step S600. This method achieves a balance between performance improvement and system robustness by prioritizing resource reuse and seamlessly switching to the traditional loading mode upon failure.

[0041] This invention also includes a system for improving the performance of new page openings, applied to a computer device, the system comprising: The resource identification module is used to identify at least one shareable resource object within the parent page, which is the resource provider. The resource management module is used to configure resource index information for the at least one resource object and store the at least one resource object in a resource management structure in the parent page memory; The interface exposure module is used to expose access interfaces for obtaining resources in the global accessibility context of the parent page. The channel detection module is used to detect, in the subpage acting as the resource requester, whether there is a cross-page communication channel that allows the subpage to directly access objects in the memory of the parent page; The resource request module is used to establish a connection with the parent page through the cross-page communication channel when the cross-page communication channel exists, and send a request containing resource index information corresponding to the target resource object; The reference acquisition module is used to acquire, when the cross-page communication channel exists, a direct memory reference of a resource object that matches the request through the cross-page communication channel. The direct memory reference is a reference to an existing resource object in the memory of the parent page. The degradation processing module is used to switch the subpage to full resource loading mode when the cross-page communication channel is detected to be absent, and to independently load all resources required for the subpage to run.

[0042] Since the parent page and the child page are two different pages, the embodiments of the present invention will describe the relevant functional implementations of the parent page and the child page separately.

[0043] Specifically, in the parent page, the resource sharing pool manager 11 is responsible for the preparation and management of resources. For example... Figure 2 As shown, the manager can include multiple functional modules. After the parent page loads, the resource scanning module 111 starts to scan the JavaScript runtime context of the parent page and identify shareable resource objects. These resource objects can include global object references of JavaScript libraries or frameworks, application state and data, calculation results, component instances, etc. Subsequently, the resource registration module 112 configures unique resource index information for each identified resource object and establishes metadata records. This information is passed to the resource storage module 113, which stores the resource objects in a resource management structure in the parent page's memory, such as a memory resource pool, and can be divided into runtime object areas, data object areas, and calculation result areas according to type. Finally, the access interface module 114 exposes an access interface for obtaining resources on the parent page's globally accessible context (such as the window object), allowing child pages to call it through a cross-page communication channel.

[0044] Accordingly, in subpage 20, resource reuse guide 21 is responsible for requesting and using resources. For example... Figure 3As shown, the bootloader can also include multiple functional modules. At the very beginning of the HTML document header of the subpage, the connection detection module 211 is executed first to detect the existence of a valid cross-page communication channel. If the channel is valid, the handshake establishment module 212 will establish a connection with the parent page through this channel. After the connection is established, the resource receiving module 213 is responsible for sending a request containing the index information of the target resource object and obtaining a direct memory reference of the successfully matched resource object from the parent page. At the same time, the incremental loading module 214 is started to load the incremental resources unique to the subpage in parallel. The fusion coordination module 215 is responsible for coordinating the fusion of reused resources and incremental resources, and handling dependencies and naming conflicts. If the connection detection module 211 detects that the channel is unavailable, the degradation management module 216 will be activated, causing the subpage to switch to full resource loading mode.

[0045] like Figure 4 As shown, the key to the performance improvement of this invention lies in the use of direct memory references. The figure illustrates a comparison between direct memory references and traditional value passing. A resource object 41 exists in the parent page's memory heap 40. Using the method of this invention, the child page's memory heap 50 obtains a direct memory reference 51A, which directly points to the original resource object 41 in the parent page's memory heap 40. This avoids the process of recreating an object copy 51B for the child page, a process that typically involves serialization, transmission, and deserialization, consuming significant CPU and memory resources. By achieving zero-copy reuse, this invention greatly reduces the memory allocation and garbage collection (GC) pressure on child pages, thereby accelerating page rendering and interactivity.

[0046] Furthermore, to ensure resource version consistency and compatibility, the resource index information configured for resource objects in this invention can include a version number. Accordingly, when a child page sends a resource request, its request includes the expected version requirement for the target resource object, such as a minimum compatible version number or a version range. Upon receiving the request, the parent page's resource sharing pool manager matches the version requirement carried in the request within its own resource management structure. Only when the stored resource object version matches the child page's requirements will a direct memory reference be returned. This design effectively prevents errors in child pages due to API incompatibility caused by parent page resource updates (e.g., upgrading a JavaScript library), ensuring stable system operation.

[0047] As a specific implementation, the cross-page communication channel can be established based on the `window.opener` property, which is widely supported by modern browsers. When a page opens a new page via the `window.open()` method or a link with the `target="_blank"` attribute, the new page (child page) can access the `window` object of the page that opened it (parent page) through its `window.opener` property. Therefore, the validity check of the cross-page communication channel by the link detection module 211 in the child page can specifically include the following steps: First, check if the `window.opener` object exists and is not `null`; second, verify whether the child page and the parent page pointed to by `window.opener` satisfy the Same-Origin Policy, because cross-origin access is subject to browser security restrictions; finally, check whether the parent page is still alive, for example, by checking whether the `window.opener.closed` property is `false`. Only when all these conditions are met can a usable cross-page communication channel be confirmed.

[0048] To ensure the reliability and orderliness of communication, a handshake protocol can be introduced during the connection establishment process through the cross-page communication channel. The handshake establishment module 212 first sends a handshake request to the parent page, which can carry the child page's identity and an initial resource requirement summary. Upon receiving the request, the parent page's access interface module 114 performs authentication and permission checks, then returns a handshake confirmation response. This process not only verifies the legitimacy of the connection but also allows for the exchange of capability information between the two parties in advance. Furthermore, after successfully obtaining a direct memory reference, a predefined communication protocol can be implemented to coordinate more complex interactions, such as state synchronization or asynchronous function calls between parent and child pages. This communication protocol can be based on an event-driven publish / subscribe pattern or a pattern similar to Remote Procedure Call (RPC), thus providing flexible interaction capabilities for complex application scenarios.

[0049] While direct memory references offer high performance, they also introduce potential security risks. A child page might accidentally modify shared resources in the parent page through this reference, affecting the parent page's state or even causing it to crash. To address this issue, this invention introduces a security isolation mechanism to protect resource objects provided by the parent page to the child page, restricting or preventing write operations by the child page. For example... Figure 2As shown, the resource sharing pool manager 11 may include a security isolation module 115, which applies this mechanism when resources are registered or provided. The introduction of this mechanism effectively ensures the stability of the parent page and the reliability of the entire system without sacrificing the advantages of zero-copy reuse.

[0050] As a preferred implementation, the security isolation mechanism can be implemented using a proxy introduced in the JavaScript ES6 standard. For example... Figure 5 As shown, the mechanism works as follows: When a parent page provides a shared resource, it does not directly return the original object, but wraps it using a proxy. When a child page directly references the proxy object and initiates a write operation S501 (such as setting a property value), this operation is intercepted by the proxy S502. The proxy's handler checks whether the operation is in a pre-defined whitelist S503. If the operation is allowed (for example, modifying a timestamp property that is allowed to be updated by the child page), the allow operation S504 is executed, forwarding the operation to the original object. If the operation is not in the whitelist, the block operation S505 is executed, which can choose to silently fail, print a warning message, or throw an exception, thus effectively preventing unauthorized modifications. Through the proxy, very flexible and granular access control policies can be implemented.

[0051] The solution of this invention does not completely replace the resource loading process of subpages, but rather adopts a hybrid mode of "reuse + incremental". While the subpage efficiently acquires shared resources through reuse, its own incremental loading module 214 is launched in parallel to load the incremental resources unique to that subpage. These incremental resources may include page-specific CSS style files, business logic scripts, images, or other media files. By parallelizing the reuse of shared resources and the loading of incremental resources, the total page loading time can be shortened to the maximum extent, because network requests and local CPU execution can be performed simultaneously, thereby further improving the page loading speed perceived by the user.

[0052] After loading incremental resources in parallel, a crucial step is to effectively coordinate and merge the two types of resources. The fusion coordination module 215 of the subpage undertakes this function. This module needs to handle potential dependencies between shared and incremental resources. For example, an incrementally loaded business component might depend on a front-end framework runtime (such as Vue or React) reused from the parent page. The fusion coordination module 215 must ensure that the dependent framework runtime is ready via direct memory reference before executing the initialization logic of the business component. Furthermore, this module also needs to handle potential naming conflicts. For instance, when an incrementally loaded script attempts to define a global variable with the same name as a shared resource, a pre-defined strategy (such as ignoring, overriding, or renaming) is needed to resolve the conflict, thereby ensuring the stability and predictability of the subpage's execution environment.

[0053] To more clearly illustrate the technical solution of this invention, its core workflow is demonstrated below through a basic embodiment. Assume there is a parent page 'index.html' that needs to open a child page 'detail.html'. The parent page 'index.html' loads a large JavaScript library, such as 'lodash', in its script.

[0054] In this embodiment, after the parent page 'index.html' is loaded, its built-in resource sharing pool manager 11 recognizes the global object 'window.lodash' as ​​a shareable resource object. The manager then assigns resource index information (e.g., an ID of 'lodash-utils') to this object and stores it in a resource management structure in memory. Simultaneously, an access interface, such as 'window.__ResourcePoolManager__', is exposed on the parent page's 'window' object, which contains a 'getResource(id)' method.

[0055] When a user clicks a link on the parent page to open the child page 'detail.html', the inline script in the child page header will execute immediately. The connection detection module 211 in this script will first check whether 'window.opener' and 'window.opener.__ResourcePoolManager__' exist and are accessible.

[0056] If the detection is successful, it indicates that a valid cross-page communication channel exists. The resource reuse bootstrap 21 of the child page will immediately obtain a direct memory reference to the 'lodash' object via a call to 'window.opener.__ResourcePoolManager__.getResource('lodash-utils')', and assign it to a variable in the child page context. Afterwards, the business logic of the child page can directly use the functions provided by this 'lodash' object without needing to go through '...' <script>’标签再次下载和解析‘lodash.js’文件。与此同时，子页面可以并行加载其独有的样式文件‘detail.css’作为增量资源。

[0057] 反之，如果用户是通过浏览器书签或直接输入URL的方式访问‘detail.html’，那么‘window.opener’将为‘null’。连接检测模块 211 的检测会失败，此时降级管理模块216 会被触发，使子页面进入完整资源加载模式。在该模式下，子页面会执行传统的加载流程，即通过动态创建或静态声明的‘<script>’标签从网络或缓存中加载完整的‘lodash.js’库文件，然后再执行后续的业务逻辑。通过这种方式，即使在无法复用资源的情况下，页面的功能完整性也得到了保障。

[0058] 在上述基础实施例之上，本发明还可以包含更具体的实现细节以应对复杂场景。在一个优选的实施方式中，为了实现精确的版本控制和可靠的通信，子页面与父页面之间的交互可以遵循一个详细的协商协议。例如，子页面在发起握手时，可以构建一个结构化的资源需求清单。该清单可区分为‘required’（必需资源）和‘optional’（可选资源）两部分。对于每个资源，除了ID外，还可以指定其兼容的版本范围，如‘{ id: ‘vue-runtime’,minVersion: ‘3.0.0’, maxVersion: ‘3.x’}’。

[0059] 父页面的资源共享池管理器 11 在收到此需求清单后，会逐项进行匹配。它会检查每个请求的资源是否存在、版本是否在子页面要求的范围之内，以及子页面是否有权限访问。完成匹配后，父页面返回一个供应清单。该清单同样是结构化的，例如包含‘fulfilled’（已满足）和‘unfulfilled’（未满足）两个列表。‘fulfilled’列表会注明已提供的资源及其确切版本号，如‘{ id: ‘vue-runtime’, version: ‘3.2.0’, status: ‘OK’}’。‘unfulfilled’列表则会说明未满足的资源及原因，如‘{ id: ‘cached-dashboard-data’， reason: ‘NOT_FOUND’}’。

[0060] 子页面的资源复用引导器 21 在收到供应清单后，根据其内容做出决策。对于所有‘fulfilled’的资源，通过‘getResource’接口获取它们的内存直接引用。对于‘unfulfilled’的‘optional’资源，它可以触发独立的加载流程。如果一个‘required’资源未被满足，引导器可以决定是报错提示用户，还是直接触发整个页面的完整资源加载模式。通过这种精细的协商机制，大大增强了资源复用过程的灵活性和可靠性。

[0061] 在另一个优选的实施方式中，为了增强共享资源的安全性，可以采用前述的Proxy代理机制，并提供一个具体的实现。例如，可以定义一个名为‘createReadOnlyProxy’的函数，该函数接收一个目标对象‘target’和一些配置项‘options’作为参数，返回一个经过包装的只读代理对象。

[0062] 该‘createReadOnlyProxy’函数的实现细节如下：它内部定义了一个代理处理器‘handler’。该处理器的‘set’方法用于拦截所有写操作。在‘set’方法内部，首先会检查被操作的属性名是否存在于配置项‘options’的‘whitelist’（白名单）数组中。如果存在，则允许写入，调用‘Reflect.set’完成操作。如果不存在，则阻止写入，并可以调用配置项中提供的‘onWriteAttempt’回调函数来记录此安全事件，然后静默地返回‘true’以表示操作"已处理”。类似地，‘deleteProperty’和‘defineProperty’方法也可以被实现来阻止删除和新增属性。此外，‘get’方法可以被用来实现深度保护，即当获取到的属性值本身也是一个对象时，递归地对其也应用‘createReadOnlyProxy’。

[0063] 在实际应用中，父页面的资源共享池管理器 11 在注册一个敏感的共享数据对象（如‘userProfile’）时，就可以调用此函数进行包装：‘registerResource(‘user-profile’, createReadOnlyProxy(globalState.userProfile,{whitelist: [‘lastAccessTime’]}))’。在这个例子中，子页面被允许更新用户的‘lastAccessTime’属性，但任何尝试修改用户名或角色等其他属性的操作都将被拦截和阻止。这就在不影响数据读取的前提下，为共享数据提供了强有力的安全保障。

[0064] 在又一个优选的实施方式中，为协调共享资源与增量资源的协同工作，尤其是在使用前端框架的场景下，融合协调模块 215 的作用至关重要。假设父页面共享了一个‘Vue’运行时实例，而子页面需要使用这个‘Vue’实例来渲染自己特有的组件（作为增量资源）。

[0065] 该场景下的工作流程如下：子页面的资源复用引导器 21 首先通过跨页面通信通道获取到父页面中‘Vue’对象的内存直接引用。此时，子页面的JavaScript上下文中就有了一个可用的‘Vue’对象。接着，增量加载模块 214 并行加载子页面自身的组件定义文件（例如‘ChildComponent.js’）。当该文件加载并执行后，它会导出一个Vue组件的定义对象。此时，融合协调模块 215 的逻辑被触发，它会调用已获取的‘Vue’对象的‘component’方法（如‘Vue.component(‘child-component’, ChildComponent）’)，将这个增量加载的组件注册到共享的‘Vue’运行时中。最后，子页面可以创建自己的Vue应用实例，并在其模板中使用‘<child-component>’标签，然后将整个应用挂载到子页面自身的DOM元素上。通过这一系列协调步骤，成功地将子页面的增量内容与父页面的共享框架基础无缝地整合在一起。

[0066] 考虑到父子页面的生命周期可能不一致，例如父页面可能在子页面仍然活动时被用户关闭，本发明还提供了一种软连接生命周期管理机制。该机制旨在增强子页面在父页面消失后的存活能力。

[0067] 具体实现上，子页面的资源复用引导器 21 在成功建立连接后，会启动一个生命周期监控程序。该程序可以通过‘setInterval’函数，以一个固定的时间间隔（例如每2000毫秒）来轮询检查‘window.opener.closed’属性。一旦检测到该属性为‘true’，或者在尝试访问‘window.opener’时捕获到异常（这通常也意味着父页面已不可访问），监控程序就判定父页面已关闭。此外，还可以尝试为父页面的‘window’对象添加‘beforeunload’事件监听器，以便更及时地获得通知，但这可能因浏览器安全策略而失败，因此轮询检测是更可靠的备用方案。

[0068] 当检测到父页面关闭时，一个预定义的‘switchToSelfSustainMode’（切换到自持模式）函数会被调用。此函数的任务是解除子页面对父页面内存的依赖。对于那些在父页面关闭后内存会被回收的关键共享数据（例如，一个名为‘dashboardData’的大型数据对象），该函数会执行一次深拷贝操作，例如通过‘JSON.parse(JSON.stringify(sharedData.dashboardData))’，将数据完整地复制到子页面自身的内存空间中。对于依赖父页面运行时环境的功能，该函数可能会触发加载缺失的资源并重新进行初始化。通过这种方式，即使父页面意外关闭，子页面也能够继续独立运行，从而大大提高了应用的鲁棒性。

[0069] 为了全面地展示本发明在一个复杂应用场景中的协同工作方式，下面将描述一个应用于大型企业级管理系统的完整实施例。该系统采用MPA架构，用户从主仪表盘（父页面）点击链接，打开一个数据看板页面（子页面）。

[0070] 在父页面（主仪表盘）初始化阶段，其‘DOMContentLoaded’事件触发资源共享池管理器 11 的启动。资源扫描模块 111 扫描并识别出多个可共享的资源对象，包括‘Vue’运行时（ID: ‘vue-runtim', 版本: ‘3.2.0’）、‘ECharts’图表库实例（ID: ‘echarts-instance’， 版本: ‘5.3.0’）以及一个包含当前用户信息的‘user-profile’数据对象。资源注册模块 112 为它们分配资源索引信息。特别地，安全隔离模块 115 使用前述的Proxy代理机制包装‘user-profile’对象，以防止子页面修改。最后，访问接口模块 114 在‘window’对象上暴露了‘__ResourcePoolManager__’接口。

[0071] 当用户点击链接，数据看板页面（子页面）开始加载。其‘<head>’标签内的资源复用引导器 21 脚本最先执行。连接检测模块 211 确认‘window.opener’通道有效。随后，握手建立模块 212 通过该通道调用父页面的‘handshake’接口，并发送一个包含版本要求的资源需求清单，如要求‘vue-runtime’版本为‘3.x’，‘echarts-instance’版本为‘5.x’。父页面验证请求并返回成功的响应。

[0072] 在握手成功后，子页面的资源接收模块 213 立即调用‘getResource’接口，获取‘Vue’和‘ECharts’对象的内存直接引用。子页面无需等待网络下载这些大型库，直接使用获取到的‘Vue’引用来创建其应用实例，并使用获取到的‘ECharts’引用来初始化图表，大大地缩短了页面的白屏时间和可交互时间。

[0073] 与此同时，增量加载模块 214 并行地请求并加载看板页面特有的CSS样式文件和业务组件脚本（例如‘DashboardWidgets.js’）。当这些增量资源加载完成后，融合协调模块215 确保‘DashboardWidgets.js’中定义的组件被正确注册到共享的‘Vue’实例中。这样，复用的框架和增量的业务逻辑便协同工作，共同渲染出完整的看板页面。

[0074] 在该看板页面的运行过程中，如果某个组件尝试修改从父页面共享的‘user-profile’对象中的用户名，这个写操作会被父页面设置的Proxy代理拦截并阻止，同时在控制台打印出警告信息。这展示了安全隔离机制在实际应用中的作用，保护了核心数据的完整性。

[0075] 最后，考虑降级场景。如果用户不是通过主仪表盘的链接，而是通过浏览器书签直接访问数据看板页面的URL，那么子页面的‘window.opener’将为‘null’。连接检测模块211 的检测会失败，降级管理模块 216 随即被触发，使页面进入完整资源加载模式。在此模式下，页面会通过‘<script>’标签加载完整的‘Vue’和‘ECharts’库，并通过API接口向服务器请求看板数据，整个过程完全独立，不依赖任何父页面资源。

[0076] 通过本发明的实施，避免了重复创建大型JavaScript对象，子页面标签页的内存占用峰值也得到了有效控制，减少了浏览器的垃圾回收压力。本发明在保留MPA架构灵活、解耦优势的同时，实现了近似SPA的流畅页面跳转体验，为提升复杂Web应用的性能提供了有效且易于集成的解决方案。

[0077] 本领域内的技术人员应明白，本发明的实施例可提供为方法、系统、或计算机程序产品。因此，本发明可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本发明可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质（包括但不限于磁盘存储器、CD-ROM、光学存储器等）上实施的计算机程序产品的形式。

[0078] 以上所述仅为本发明的优选实施例而已，并不用于限制本发明，对于本领域的技术人员来说，本发明可以有各种更改和变化。凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。< / script>

Claims

1. A method for improving the performance of new page opening, characterized in that, Applied to a computer device, the method includes: In the parent page that is the resource provider, identify at least one resource object that can be shared within the parent page; Configure resource index information for the at least one resource object, and store the at least one resource object in a resource management structure in the parent page memory; In the global accessibility context of the parent page, an access interface for obtaining resources is exposed; In the subpage acting as the resource requester, detect whether there exists a cross-page communication channel that allows the subpage to directly access objects in the parent page's memory; If it exists, a connection is established with the parent page through the cross-page communication channel, and a request containing resource index information corresponding to the target resource object is sent; and, Through the cross-page communication channel, a direct memory reference to a resource object matching the request is obtained, wherein the direct memory reference is a reference to an existing resource object in the memory of the parent page; If it does not exist, the subpage will be switched to full resource loading mode, and all resources required for the subpage to run will be loaded independently.

2. The method for improving the performance of new page opening according to claim 1, characterized in that, Configuring resource index information for the at least one resource object includes: assigning a corresponding version number to each of the at least one resource object; Furthermore, the request sent by the subpage includes the version requirement expected by the target resource object, which is used to match the resource object in the resource management structure.

3. The method for improving performance on new page openings according to claim 1, characterized in that, The cross-page communication channel is established based on the browser's window.opener property; The detection of whether a cross-page communication channel exists that allows the child page to directly access objects in the parent page's memory includes: detecting whether the child page's window.opener object exists, whether the child page and the parent page pointed to by the window.opener are from the same origin, and whether the parent page is alive.

4. The method for improving the performance of new page opening according to claim 1, characterized in that, The step of establishing a connection with the parent page through the cross-page communication channel includes: performing a handshake protocol through the cross-page communication channel to establish a connection with the parent page; The method further includes: based on the direct memory reference, coordinating state synchronization or function calls between the parent page and the child page through a predefined communication protocol.

5. The method for improving the performance of new page opening according to claim 1, characterized in that, The method further includes applying a security isolation mechanism to at least one resource object provided by the parent page to the child page, so as to restrict or prevent the child page from writing to the resource object.

6. The method for improving performance of new page opening according to claim 5, characterized in that, The security isolation mechanism is implemented by wrapping the resource object with a JavaScript proxy, which is used to intercept write operation requests to the resource object.

7. The method for improving the performance of new page opening according to claim 1, characterized in that, The method further includes: in the subpage, while obtaining the resource object through reuse, loading the incremental resources unique to the subpage itself in parallel.

8. The method for improving performance of new page opening according to claim 7, characterized in that, The method further includes: in the subpage, coordinating shared resources obtained through reuse with incremental resources loaded by the subpage itself to handle dependencies and naming conflicts.

9. A system for improving the performance of new page opening, characterized in that, It is applied to computer equipment, and the system includes: The resource identification module is used to identify at least one shareable resource object within the parent page, which is the resource provider. The resource management module is used to configure resource index information for the at least one resource object and store the at least one resource object in a resource management structure in the parent page memory; The interface exposure module is used to expose access interfaces for obtaining resources in the global accessibility context of the parent page. The channel detection module is used to detect, in the subpage acting as the resource requester, whether there is a cross-page communication channel that allows the subpage to directly access objects in the memory of the parent page; The resource request module is used to establish a connection with the parent page through the cross-page communication channel when the cross-page communication channel exists, and send a request containing resource index information corresponding to the target resource object; The reference acquisition module is used to acquire, when the cross-page communication channel exists, a direct memory reference of a resource object that matches the request through the cross-page communication channel. The direct memory reference is a reference to an existing resource object in the memory of the parent page. The degradation processing module is used to switch the subpage to full resource loading mode when the cross-page communication channel is detected to be absent, and to independently load all resources required for the subpage to run.

10. A computer-readable storage medium having a computer program stored thereon, characterized in that, When the computer program is executed by a processor, it implements the method as described in any one of claims 1 to 8.

Images