Browser optimization method and system based on dynamic resource loading and intelligent caching

Abstract

The invention discloses a browser optimization method and system based on dynamic resource loading and intelligent caching, belongs to the technical field of browser optimization, and aims to solve the technical problems of how to improve browser resource loading efficiency, reduce bandwidth consumption and improve user experience. Comprising the steps of predicting a next page possibly accessed by a user or required resources through a lightweight learning model based on a historical browsing path of the user, and obtaining the resources required by the user; carrying out on-demand dynamic loading on resources required by the user; the loaded resources are cached through a multi-level caching strategy; comparing the resources of the local cache of the browser with the latest version of the server side based on the resource fingerprints, and if the resource versions are inconsistent, downloading the resources of the latest version from the server and updating the local cache of the browser; a priority scheduling and parallel loading strategy is adopted for resources of various levels; and dynamically adjusting a resource loading strategy and resource quality according to the current network state.

Description

TECHNICAL FIELD

[0001] The present application relates to the technical field of browser optimization, in particular to a browser optimization method and system based on dynamic resource loading and intelligent caching. BACKGROUND

[0002] With the complication of web applications, the resource loading mode of traditional browsers has the following problems:

[0003] (1) Resource loading redundancy: static resources (such as JS, CSS, pictures) are usually loaded once, even if part of the resources are not needed by the current page;

[0004] (2) Low cache utilization rate: the browser cache strategy is single, and cannot intelligently identify high-frequency access resources, resulting in repeated requests;

[0005] (3) Rendering blocking: synchronous loading of JS / CSS files may block page rendering, affecting user experience;

[0006] (4) Mobile performance bottleneck: in low-end devices or weak network environments, traditional optimization methods (such as CDN, HTTP / 2) still cannot meet the smooth experience demand;

[0007] Although the existing technologies (such as HTTP / 2 Server Push, Service Worker caching) can partially optimize, they still have the problem of insufficient dynamic adaptation capability.

[0008] How to improve the efficiency of browser resource loading, reduce bandwidth consumption and improve user experience is a technical problem to be solved. SUMMARY

[0009] The technical task of the present application is to provide a browser optimization method and system based on dynamic resource loading and intelligent caching to solve the technical problem of how to improve the efficiency of browser resource loading, reduce bandwidth consumption and improve user experience.

[0010] In a first aspect, the present application provides a browser optimization method based on dynamic resource loading and intelligent caching, comprising the following steps:

[0011] User behavior analysis: obtaining user historical browsing path, predicting the next page or required resources that the user may access based on the user historical browsing path through a lightweight learning model, and obtaining the required resources of the user;

[0012] Dynamic resource loading: dynamically loading the required resources of the user on demand;

[0013] Multi-level caching: Loaded resources are cached using a multi-level caching strategy, which includes memory caching, browser local caching, and server-side collaborative caching. Memory caching is used to store frequently accessed resources, browser local caching is used to store long-term valid resources, and server-side collaborative caching is used to interact with the server to obtain the latest resource version information from the server and update the browser local cache synchronously.

[0014] Resource fingerprint and version comparison: For server-cached resources, a unique resource fingerprint is generated for each resource. Each time a resource is requested, the browser's local cached resource is compared with the latest version on the server based on the resource fingerprint. If the resource versions are inconsistent, the latest version of the resource is downloaded from the server and the browser's local cache is updated.

[0015] Priority scheduling and parallel loading: Resources with different levels of demand are classified, and priority scheduling and parallel loading strategies are adopted for resources of various levels.

[0016] Adaptive network environment adjustment: Dynamically adjust resource loading strategy and resource quality according to the current network status. When the network status is below the threshold, prioritize loading critical resources and reduce the quality of non-critical resources or delay loading them.

[0017] Preferably, the lightweight learning model is a Markov chain model.

[0018] Preferably, during dynamic resource loading, a dynamic cache weight is calculated based on the resource access frequency, resource size, and current network quality score. Resources are then dynamically loaded based on this dynamic cache weight, prioritizing resources with higher dynamic cache weights and performing low-priority preloading in the background. The formula for calculating the dynamic cache weight w is as follows:

[0019]

[0020] Where Frequency represents the frequency of resource access, α represents the weight of the frequency of resource access, Size represents the size of the resource, β represents the weight of the size of the resource, NetworkScore represents the current network quality score, and γ represents the weight of the current network quality.

[0021] As a preferred approach, for server-side cached resources, a hash value is calculated based on the content of the file in the resource as the resource fingerprint.

[0022] As a preferred approach, priority scheduling and parallel loading include the following operations:

[0023] Key CSS inline: Identifies key path resources, including content on the first screen, and loads key path resources first;

[0024] Lazy loading of JavaScript: Use of non-critical JavaScript <script defer>或动态import()加载；

[0025] 图片懒加载：结合Intersection Observer API实现视口外图片延迟加载。

[0026] 第二方面，本发明一种基于动态资源加载与智能缓存的浏览器优化系统，包括用户行为分析模块、动态资源加载模块、多级缓存模块、资源指纹与版本比对模块、优先级调度与并行加载模块以及自适应网络环境调节模块；

[0027] 用户行为分析模块用于执行如下：获取用户历史浏览路径，基于用户历史浏览路径、通过轻量级学习模型预测用户可能访问的下一页面或所需资源，得到用户所需资源；

[0028] 动态资源加载模块用于执行如下：对用户所需资源进行按需动态加载；

[0029] 多级缓存模块用于执行如下：通过多级缓存策略对加载的资源进行缓存，其中，多级缓存策略中包括内存缓存、浏览器本地缓存和服务器端协同缓存，内存缓存用于存储高频访问的资源，浏览器本地缓存用于存储长期有效的资源，服务器端协同缓存用于与服务器端交互，从服务器端获取最新的资源版本信息并同步更新浏览器本地缓存；

[0030] 资源指纹与版本比对模块用于执行如下：对于服务器端缓存的资源，为每个资源生成唯一的资源指纹，每次资源请求时，基于资源指纹将浏览器本地缓存的资源与服务器端的最新版本进行比对，如果资源版本不一致，从服务器下载最新版本的资源并更新浏览器本地缓存；

[0031] 优先级调度与并行加载模块用于执行如下：对不同需求程度的资源进行分级，对各种级别的资源采用优先级调度与并行加载策略；

[0032] 自适应网络环境调节模块用于执行如下：根据当前网络状态动态调整资源加载策略与资源质量，在网络状态低于阈值时，优先加载关键资源，降低非关键资源的质量或延迟加载。

[0033] 作为优选，所述轻量级学习模型为Markov链模型。

[0034] 作为优选，动态资源加载时，动态资源加载模块用于基于资源访问频率、资源大小以及当前网络质量评分计算资源的动态缓存权重，基于资源的动态缓存权重对资源进行动态加载，优先加载动态缓存权重高的资源，在后台进行低优先级预加载，其中，动态缓存权重w的计算公式表示为：

[0035]

[0036] 其中，Frequency表示资源访问频率，α表示资源访问频率的权重，Size表示资源大小，β表示资源大小的权重，NetworkScore表示当前网络质量评分，γ表示当前网络质量的权重。

[0037] 作为优选，对于服务器端缓存的资源，资源指纹与版本比对模块用于基于资源中文件的内容计算哈希值作为资源指纹。

[0038] 作为优选，优先级调度与并行加载模块用于执行如下操作：

[0039] 关键CSS内联：识别包括首屏内容的关键路径资源，关键路径资源优先加载；

[0040] JS延迟加载：非关键JS使用<script defer>或动态import()加载；

[0041] 图片懒加载：结合Intersection Observer API实现视口外图片延迟加载。

[0042] 本发明的基于动态资源加载与智能缓存的浏览器优化方法及系统具有以下优点：

[0043] 1、通过分析用户行为模式与页面访问路径，实现资源的按需动态加载与预测性预加载，结合多级缓存策略(包括内存缓存、本地存储与服务端协同缓存)，智能判断资源的缓存有效性与更新机制；

[0044] 2、利用轻量级机器学习模型预测用户可能访问的下一页面或所需资源，并提前在后台进行低优先级预加载，同时，通过资源指纹(如哈希值)与版本比对机制，实现缓存资源的精准更新，避免无效刷新与重复下载，对于关键路径资源(如首屏内容)，采用优先级调度与并行加载策略，确保快速渲染；

[0045] 3、支持自适应网络环境调节，根据当前网络状况(如4G、Wi-Fi、弱网)动态调整加载策略与资源质量，实现性能与体验的最优平衡。实验表明，该技术可显著减少页面首屏加载时间(LCP)与交互延迟(TTI)，提升前端性能评分，适用于Web应用、移动浏览器及PWA等场景。附图说明

[0046] 为了更清楚地说明本发明实施例中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域的普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

[0047] 下面结合附图对本发明进一步说明。

[0048] 图1为实施例1一种基于动态资源加载与智能缓存的浏览器优化方法的流程框图。具体实施方式

[0049] 下面结合附图和具体实施例对本发明作进一步说明，以使本领域的技术人员可以更好地理解本发明并能予以实施，但所举实施例不作为对本发明的限定，在不冲突的情况下，本发明实施例以及实施例中的技术特征可以相互结合。

[0050] 本发明实施例提供基于动态资源加载与智能缓存的浏览器优化方法及系统，用于解决如何提高浏览器资源加载效率、降低带宽消耗并改善用户体验的技术问题。

[0051] 实施例1：

[0052] 本发明一种基于动态资源加载与智能缓存的浏览器优化方法，包括用户行为分析、动态资源加载、多级缓存、资源指纹与版本比对、优先级调度与并行加载以及自适应网络环境调节六个步骤。

[0053] 步骤S100用户行为分析：获取用户历史浏览路径，基于用户历史浏览路径、通过轻量级学习模型预测用户可能访问的下一页面或所需资源，得到用户所需资源。

[0054] 其中，轻量级学习模型为Markov链模型。

[0055] 步骤S200动态资源加载：对用户所需资源进行按需动态加载。

[0056] 其中动态资源加载时，基于资源访问频率、资源大小以及当前网络质量评分计算资源的动态缓存权重，基于资源的动态缓存权重对资源进行动态加载，优先加载动态缓存权重高的资源，在后台进行低优先级预加载，其中，动态缓存权重w的计算公式表示为：

[0057]

[0058] 其中，Frequency表示资源访问频率，α表示资源访问频率的权重，Size表示资源大小，β表示资源大小的权重，NetworkScore表示当前网络质量评分，γ表示当前网络质量的权重。

[0059] 本实施例中，将高频访问的资源存储在内存中，减少磁盘读取次数；利用浏览器的本地存储(如LocalStorage、IndexedDB)保存长期有效的资源。

[0060] 步骤S300多级缓存：通过多级缓存策略对加载的资源进行缓存，其中，多级缓存策略中包括内存缓存、浏览器本地缓存和服务器端协同缓存，内存缓存用于存储高频访问的资源，浏览器本地缓存用于存储长期有效的资源，服务器端协同缓存用于与服务器端交互，从服务器端获取最新的资源版本信息并同步更新浏览器本地缓存。

[0061] 其中，对于服务器端缓存的资源，基于资源中文件的内容计算哈希值作为资源指纹。

[0062] 步骤S400资源指纹与版本比对：对于服务器端缓存的资源，为每个资源生成唯一的资源指纹，每次资源请求时，基于资源指纹将浏览器本地缓存的资源与服务器端的最新版本进行比对，如果资源版本不一致，从服务器下载最新版本的资源并更新浏览器本地缓存。

[0063] 步骤S500优先级调度与并行加载：对不同需求程度的资源进行分级，对各种级别的资源采用优先级调度与并行加载策略。

[0064] 本实施例中优先级调度与并行加载包括如下操作：

[0065] (1)关键CSS内联：识别包括首屏内容的关键路径资源，关键路径资源优先加载；

[0066] (2)JS延迟加载：非关键JS使用<script defer>或动态import()加载；

[0067] (3)图片懒加载：结合Intersection Observer API实现视口外图片延迟加载。

[0068] 步骤S600自适应网络环境调节：根据当前网络状态动态调整资源加载策略与资源质量，在网络状态低于阈值时，优先加载关键资源，降低非关键资源的质量或延迟加载。

[0069] 本实施例中检测当前网络状况(如4G、Wi-Fi、弱网)，根据网络状况动态调整加载策略与资源质量，在网络状况不佳时，优先加载关键资源，降低非关键资源的质量或延迟加载。

[0070] 基于本实施例公开的方法，给出如下案例。

[0071] 案例1：智能预加载，操作如下：

[0072] (1)用户访问页面A，系统记录其历史行为(如80％概率下一步访问页面B)；

[0073] (2)后台预加载页面B的JS / CSS，但暂不执行；

[0074] (3)用户点击跳转至B时，直接使用预加载资源，减少等待时间。

[0075] 案例2：自适应缓存，操作如下：

[0076] (1)对 / common.js(高频访问、小文件)赋予高缓存权重，长期保留；

[0077] (2)对 / banner.jpg(大文件、低频)采用短期缓存，内存不足时优先释放。

[0078] 本实施例的方法实现了如下功能：

[0079] (1)智能预加载：基于用户行为预测，提前加载可能访问的资源；

[0080] (2)自适应缓存策略：结合访问频率、资源大小、网络环境动态调整缓存策略；

[0081] (3)非阻塞渲染优化：优化关键渲染路径(CRP)，减少首屏加载时间；

[0082] (4)资源按需加载：采用动态模块化加载，减少初始请求量；

[0083] (5)网络环境调节：根据网络环境，动态加载静态资源，减少网络的影响。

[0084] 实施例2：

[0085] 本发明一种基于动态资源加载与智能缓存的浏览器优化系统，包括用户行为分析模块、动态资源加载模块、多级缓存模块、资源指纹与版本比对模块、优先级调度与并行加载模块以及自适应网络环境调节模块。

[0086] 用户行为分析模块用于执行如下：获取用户历史浏览路径，基于用户历史浏览路径、通过轻量级学习模型预测用户可能访问的下一页面或所需资源，得到用户所需资源。

[0087] 其中，轻量级学习模型为Markov链模型。

[0088] 动态资源加载模块用于执行如下：对用户所需资源进行按需动态加载。

[0089] 其中动态资源加载时，基于资源访问频率、资源大小以及当前网络质量评分计算资源的动态缓存权重，基于资源的动态缓存权重对资源进行动态加载，优先加载动态缓存权重高的资源，在后台进行低优先级预加载，其中，动态缓存权重w的计算公式表示为：

[0090]

[0091] 其中，Frequency表示资源访问频率，α表示资源访问频率的权重，Size表示资源大小，β表示资源大小的权重，NetworkScore表示当前网络质量评分，γ表示当前网络质量的权重。

[0092] 本实施例中，将高频访问的资源存储在内存中，减少磁盘读取次数；利用浏览器的本地存储(如LocalStorage、IndexedDB)保存长期有效的资源。

[0093] 多级缓存模块用于执行如下：通过多级缓存策略对加载的资源进行缓存，其中，多级缓存策略中包括内存缓存、浏览器本地缓存和服务器端协同缓存，内存缓存用于存储高频访问的资源，浏览器本地缓存用于存储长期有效的资源，服务器端协同缓存用于与服务器端交互，从服务器端获取最新的资源版本信息并同步更新浏览器本地缓存。

[0094] 其中，对于服务器端缓存的资源，基于资源中文件的内容计算哈希值作为资源指纹。

[0095] 资源指纹与版本比对模块用于执行如下：对于服务器端缓存的资源，为每个资源生成唯一的资源指纹，每次资源请求时，基于资源指纹将浏览器本地缓存的资源与服务器端的最新版本进行比对，如果资源版本不一致，从服务器下载最新版本的资源并更新浏览器本地缓存。

[0096] 优先级调度与并行加载模块用于执行如下：对不同需求程度的资源进行分级，对各种级别的资源采用优先级调度与并行加载策略。

[0097] 本实施例中优先级调度与并行加载包括如下操作：

[0098] (1)关键CSS内联：识别包括首屏内容的关键路径资源，关键路径资源优先加载；

[0099] (2)JS延迟加载：非关键JS使用<script defer>或动态import()加载；

[0100] (3)图片懒加载：结合Intersection Observer API实现视口外图片延迟加载。

[0101] 自适应网络环境调节模块用于执行如下：根据当前网络状态动态调整资源加载策略与资源质量，在网络状态低于阈值时，优先加载关键资源，降低非关键资源的质量或延迟加载。

[0102] 本实施例中检测当前网络状况(如4G、Wi-Fi、弱网)，根据网络状况动态调整加载策略与资源质量，在网络状况不佳时，优先加载关键资源，降低非关键资源的质量或延迟加载。

[0103] 本实施例的系统可执行实施例1公开的方法实现浏览器优化。

[0104] 以上对本发明所提供的基于动态资源加载与智能缓存的浏览器优化方法及系统进行了详细介绍，本文中应用了具体个例对本发明的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本发明的方法及其核心思想；同时，对于本领域的一般技术人员，依据本发明的思想，在具体实施方式及应用范围上均会有改变之处，综上所述，本说明书内容不应理解为对本发明的限制。< / script>

Claims

1. A browser optimization method based on dynamic resource loading and intelligent caching, characterized in that, Includes the following steps: User behavior analysis: Obtain the user's historical browsing path, and based on the user's historical browsing path, use a lightweight learning model to predict the next page or resource that the user may visit, and obtain the resources required by the user; Dynamic resource loading: Loads the resources required by the user on demand; Multi-level caching: Loaded resources are cached using a multi-level caching strategy, which includes memory caching, browser local caching, and server-side collaborative caching. Memory caching is used to store frequently accessed resources, browser local caching is used to store long-term valid resources, and server-side collaborative caching is used to interact with the server to obtain the latest resource version information from the server and update the browser local cache synchronously. Resource fingerprint and version comparison: For server-cached resources, a unique resource fingerprint is generated for each resource. Each time a resource is requested, the browser's local cached resource is compared with the latest version on the server based on the resource fingerprint. If the resource versions are inconsistent, the latest version of the resource is downloaded from the server and the browser's local cache is updated. Priority scheduling and parallel loading: Resources with different levels of demand are classified, and priority scheduling and parallel loading strategies are adopted for resources of various levels. Adaptive network environment adjustment: Dynamically adjust resource loading strategy and resource quality according to the current network status. When the network status is below the threshold, prioritize loading critical resources and reduce the quality of non-critical resources or delay loading them.

2. The browser optimization method based on dynamic resource loading and intelligent caching according to claim 1, characterized in that, The lightweight learning model is a Markov chain model.

3. The browser optimization method based on dynamic resource loading and intelligent caching according to claim 1, characterized in that, During dynamic resource loading, a dynamic cache weight is calculated based on the resource access frequency, resource size, and current network quality score. Resources are then dynamically loaded based on this dynamic cache weight, prioritizing resources with higher dynamic cache weights and performing low-priority preloading in the background. The formula for calculating the dynamic cache weight w is as follows: Where Frequency represents the frequency of resource access, α represents the weight of the frequency of resource access, Size represents the size of the resource, β represents the weight of the size of the resource, NetworkScore represents the current network quality score, and γ represents the weight of the current network quality.

4. The browser optimization method based on dynamic resource loading and intelligent caching according to claim 1, characterized in that, For resources cached on the server side, a hash value is calculated based on the content of the file in the resource as the resource fingerprint.

5. The browser optimization method based on dynamic resource loading and intelligent caching according to claim 1, characterized in that, Priority scheduling and parallel loading include the following operations: Key CSS inline: Identifies key path resources, including content on the first screen, and loads key path resources first; Lazy loading of JavaScript: Use of non-critical JavaScript <script defer>或动态import()加载；图片懒加载：结合Intersection Observer API实现视口外图片延迟加载。6.一种基于动态资源加载与智能缓存的浏览器优化系统，其特征在于，包括用户行为分析模块、动态资源加载模块、多级缓存模块、资源指纹与版本比对模块、优先级调度与并行加载模块以及自适应网络环境调节模块；用户行为分析模块用于执行如下：获取用户历史浏览路径，基于用户历史浏览路径、通过轻量级学习模型预测用户可能访问的下一页面或所需资源，得到用户所需资源；动态资源加载模块用于执行如下：对用户所需资源进行按需动态加载；多级缓存模块用于执行如下：通过多级缓存策略对加载的资源进行缓存，其中，多级缓存策略中包括内存缓存、浏览器本地缓存和服务器端协同缓存，内存缓存用于存储高频访问的资源，浏览器本地缓存用于存储长期有效的资源，服务器端协同缓存用于与服务器端交互，从服务器端获取最新的资源版本信息并同步更新浏览器本地缓存；资源指纹与版本比对模块用于执行如下：对于服务器端缓存的资源，为每个资源生成唯一的资源指纹，每次资源请求时，基于资源指纹将浏览器本地缓存的资源与服务器端的最新版本进行比对，如果资源版本不一致，从服务器下载最新版本的资源并更新浏览器本地缓存；优先级调度与并行加载模块用于执行如下：对不同需求程度的资源进行分级，对各种级别的资源采用优先级调度与并行加载策略；自适应网络环境调节模块用于执行如下：根据当前网络状态动态调整资源加载策略与资源质量，在网络状态低于阈值时，优先加载关键资源，降低非关键资源的质量或延迟加载。7.根据权利要求6所述的基于动态资源加载与智能缓存的浏览器优化系统，其特征在于，所述轻量级学习模型为Markov链模型。8.根据权利要求6所述的基于动态资源加载与智能缓存的浏览器优化系统，其特征在于，动态资源加载时，动态资源加载模块用于基于资源访问频率、资源大小以及当前网络质量评分计算资源的动态缓存权重，基于资源的动态缓存权重对资源进行动态加载，优先加载动态缓存权重高的资源，在后台进行低优先级预加载，其中，动态缓存权重w的计算公式表示为：其中，Frequency表示资源访问频率，α表示资源访问频率的权重，Size表示资源大小，β表示资源大小的权重，NetworkScore表示当前网络质量评分，γ表示当前网络质量的权重。9.根据权利要求6所述的基于动态资源加载与智能缓存的浏览器优化系统，其特征在于，对于服务器端缓存的资源，资源指纹与版本比对模块用于基于资源中文件的内容计算哈希值作为资源指纹。10.根据权利要求6所述的基于动态资源加载与智能缓存的浏览器优化系统，其特征在于，优先级调度与并行加载模块用于执行如下操作：关键CSS内联：识别包括首屏内容的关键路径资源，关键路径资源优先加载；JS延迟加载：非关键JS使用<script defer>或动态import()加载；图片懒加载：结合Intersection Observer API实现视口外图片延迟加载。< / script>

Images