Page preloading method and device, equipment, storage medium and product

Abstract

The invention relates to the technical field of computers, and discloses a page preloading method and device, equipment, a storage medium and a product, and the method comprises the steps: extracting public resources according to resource tags in a page, and constructing a dependency graph based on a dependency relationship between the public resources; analyzing the reference condition of the public resource through the dependency graph to obtain a priority sequence; predicting the page jump probability of the target user under the current page based on a preset page jump probability matrix; and pre-loading the target page resource block according to the priority sequence, the page jump probability and the current network environment of the target user. Page switching is close to local application experience through dependency graph dynamic hierarchical loading, elimination of rendering blocking resources and behavior prediction preloading, resource importance, user behavior trends and network conditions can be planned as a whole, dynamic resource loading lag and weak network resource waste are avoided, the accuracy and efficiency of page preloading are improved on the whole, and the user experience is improved. Therefore, the page loading time is shortened, and the user experience is optimized.

Description

Technical Field

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

[0002] With the rapid development of the mobile internet, H5 technology has become the mainstream development standard for mobile web (world wide web) applications due to its cross-platform compatibility and dynamic interactive capabilities. However, traditional H5 pages rely on multiple rounds of HTTP (hypertext transfer protocol) requests to sequentially load resources such as HTML, CSS, JS, and media files. In complex H5 pages, the large number of resources results in users having to wait a relatively long time to load the page. Summary of the Invention

[0003] The main objective of this application is to provide a page preloading method, apparatus, device, storage medium, and product, which aims to solve the technical problem that users have to wait a long time to enter a complex H5 page due to excessive resources.

[0004] To achieve the above objectives, this application proposes a page preloading method, the method comprising:

[0005] Extract common resources from the resource tags on the page, and construct a dependency graph based on the dependency relationships between the common resources. The common resources include dynamic resources and static resources. The resource tags include at least one of style reference tags, script reference tags, and media resource reference tags.

[0006] The dependency graph is used to analyze the references to the public resources and obtain a priority sequence.

[0007] The page jump probability matrix is ​​used to predict the probability of a target user jumping to a new page in the current page. The page jump probability matrix is ​​trained based on the user behavior sequence of the target user.

[0008] Preload target page resource blocks according to the priority sequence, the page redirection probability, and the target user's current network environment.

[0009] Optionally, the step of extracting public resources based on resource tags on the page and constructing a dependency graph based on the dependencies between the public resources includes:

[0010] Identify style reference tags, script reference tags, and media resource reference tags contained on the page, and obtain tag detection results;

[0011] Based on the tag detection results, extract the public resource identification information corresponding to each tag. The identification information includes the resource path, resource name, and resource type description.

[0012] The public resource identification information is matched with the preset resource classification information to determine the public resource and resource type corresponding to the public resource identification information. The preset resource classification information includes feature parameters of dynamic resources and feature parameters of static resources.

[0013] Determine the dependencies between the public resources based on the public resources and the resource types, and construct a dependency graph based on the dependencies.

[0014] Optionally, the step of extracting the public resource identification information corresponding to each tag based on the tag detection results includes:

[0015] The resource description text within the tag is parsed from the tag detection results. The resource description text includes the storage path, function description, and calling parameters of the public resource.

[0016] The resource description text is compared with a preset resource identifier library to determine the core fields in the text that match the identifier library;

[0017] Calculate the matching degree between the core field and the standard identifier in the preset resource identifier library. If the matching degree is greater than the preset matching threshold, then the core field is used as the target identifier information of the public resource.

[0018] If the matching degree is less than or equal to the preset threshold, the feature words in the resource description text are extracted, and the feature words are corrected by combining them with historical manually annotated resource identification samples to generate corrected identification information.

[0019] The public resource identification information corresponding to each label is determined based on the target identification information and the corrected identification information.

[0020] Optionally, the step of analyzing the references to the public resources through the dependency graph to obtain the priority sequence includes:

[0021] Based on the dependency graph, the degree of correlation between each public resource and the implementation of the core functions of the page and the initial content presentation is analyzed, and the influence weight of each public resource is determined.

[0022] Based on the aforementioned influence weights, public resources that are highly correlated with the implementation of core functions and the initial presentation of content are classified as strongly dependent resources, while public resources that are highly correlated with non-core functions and subsequent interactions are classified as weakly dependent resources.

[0023] The strong and weak dependent resources are sorted according to the loading order of the public resources in the dependency graph, and a priority sequence is generated based on the sorting result.

[0024] Optionally, the step of preloading the target page resource block according to the priority sequence, the page redirection probability, and the target user's current network environment includes:

[0025] The loading order of the target page resource blocks corresponding to the public resource is determined according to the priority sequence;

[0026] When the target user stays on the current page for more than a preset stay threshold, and the page redirection probability is greater than a preset probability threshold, the current network environment type of the target user is detected.

[0027] If the network environment type is a high-speed network, preload all target page resource blocks according to the loading order;

[0028] If the network environment type is a medium-speed network, then only the target page resource blocks within a preset size are preloaded;

[0029] If the network environment type is a low-speed network, then preloading will stop.

[0030] Optionally, before the step of predicting the probability of a target user jumping to another page on the current page based on a preset page jump probability matrix, the method further includes:

[0031] Collect the target user's historical user behavior sequence between pages, the user behavior sequence including page dwell time, jump path and click operation;

[0032] A hidden Markov model is trained based on the user behavior sequence, and the jump probability value of each page is output according to the hidden Markov model.

[0033] A page redirection probability matrix is ​​constructed based on the redirection probability values.

[0034] Furthermore, to achieve the above objectives, this application also proposes a page preloading device, which includes:

[0035] The dependency graph construction module is used to extract common resources based on resource tags on the page, and construct a dependency graph based on the dependency relationships between the common resources. The common resources include dynamic resources and static resources, and the resource tags include at least one of style reference tags, script reference tags and media resource reference tags.

[0036] The priority division module is used to analyze the reference status of the public resources through the dependency graph to obtain a priority sequence;

[0037] The probability prediction module is used to predict the probability of a target user jumping to a page on the current page based on a preset page jump probability matrix, wherein the page jump probability matrix is ​​trained according to the user behavior sequence of the target user.

[0038] The resource preloading module is used to preload target page resource blocks according to the priority sequence, the page jump probability, and the target user's current network environment.

[0039] In addition, to achieve the above objectives, this application also proposes a page preloading device, the device comprising: a memory, a processor, and a computer program stored in the memory and executable on the processor, the computer program being configured to implement the steps of the page preloading method as described above.

[0040] In addition, to achieve the above objectives, this application also proposes a storage medium, which is a computer-readable storage medium, on which a computer program is stored, and which, when executed by a processor, implements the steps of the page preloading method described above.

[0041] In addition, to achieve the above objectives, this application also provides a computer program product, which includes a computer program that, when executed by a processor, implements the steps of the page preloading method described above.

[0042] In this application, a public resource dependency graph is constructed to clarify resource loading priorities. A jump probability matrix trained based on user behavior sequences is used to predict page access trends. The preloading strategy is dynamically adjusted according to the network environment. This allows for the accurate identification and priority loading of dynamic and static resources that are crucial to the core functions and initial presentation of the page, avoiding non-critical resources from blocking the loading process. At the same time, by intelligently predicting user behavior and adapting to the network environment, bandwidth waste caused by invalid preloading is reduced, making page switching closer to the experience of native applications. This significantly improves page loading speed and rendering efficiency, avoids dynamic resource loading delays and resource waste in weak networks, shortens page loading time, and especially improves the first-screen loading experience and page jump smoothness, comprehensively optimizing the user's web browsing experience. Attached Figure Description

[0043] The accompanying drawings, which are incorporated in and form part of this specification, illustrate embodiments consistent with this application and, together with the description, serve to explain the principles of this application.

[0044] To more clearly illustrate the technical solutions in the embodiments of this application or the prior art, the drawings used in the description of the embodiments or the prior art will be briefly introduced below. Obviously, for those skilled in the art, other drawings can be obtained based on these drawings without creative effort.

[0045] Figure 1 This is a flowchart illustrating the first embodiment of the page preloading method of this application;

[0046] Figure 2 This is a flowchart illustrating the second embodiment of the page preloading method of this application;

[0047] Figure 3 This is a flowchart illustrating the third embodiment of the page preloading method of this application;

[0048] Figure 4 This is a flowchart illustrating the fourth embodiment of the page preloading method of this application;

[0049] Figure 5 This is a schematic diagram of the module structure of the page preloading device in an embodiment of this application;

[0050] Figure 6 This is a schematic diagram of the device structure of the hardware operating environment involved in the page preloading method in this application embodiment.

[0051] The purpose, features, and advantages of this application will be further explained in conjunction with the embodiments and with reference to the accompanying drawings. Detailed Implementation

[0052] It should be understood that the specific embodiments described herein are merely illustrative of the technical solutions of this application and are not intended to limit this application.

[0053] To better understand the technical solution of this application, a detailed description will be provided below in conjunction with the accompanying drawings and specific implementation methods.

[0054] With the rapid development of the mobile internet, H5 technology has become the mainstream development standard for mobile web applications due to its cross-platform compatibility and dynamic interactive capabilities. However, page loading speed, as a core indicator of user experience, has long faced the following technical bottlenecks: Traditional H5 pages rely on multiple rounds of HTTP requests to load resources serially, which is limited by network latency and bandwidth fluctuations, significantly extending the first-screen rendering time. Unoptimized resource sizes further exacerbate loading latency; when browsers parse HTML, encountering synchronous scripts will pause DOM (Document Object Model) construction, causing critical rendering path blocking. The synchronous construction mechanism of CSSOM (CSS Object Model) and DOM also causes rendering blockage, extending the initial content rendering time.

[0055] Therefore, this application provides a page preloading technology that achieves end-to-end H5 loading speed through the collaborative efforts of intelligent resource grading and behavior prediction preloading engines. Dynamic grading loading based on dependency graphs eliminates rendering resource blocking. Behavior prediction preloading makes page transitions feel closer to native application experiences. A network adaptive strategy avoids burdening weak network conditions.

[0056] It should be noted that the executing entity in this embodiment can be a terminal device equipped with a web browser and a computing service device with program execution capabilities, such as a computer, or a mobile application integrating a WebView component. The following description uses a client device as an example to illustrate this embodiment and the subsequent embodiments.

[0057] Based on this, the embodiments of this application provide a page preloading method, referring to... Figure 1 , Figure 1 This is a flowchart illustrating the first embodiment of the page preloading method of this application.

[0058] In this embodiment, the page preloading method includes:

[0059] Step S10: Extract common resources based on resource tags on the page, and construct a dependency graph based on the dependency relationships between the common resources. The common resources include dynamic resources and static resources, and the resource tags include at least one of style reference tags, script reference tags, and media resource reference tags.

[0060] It should be noted that public resources refer to resources shared by multiple modules or functions on a page. Dynamic resources are those requiring real-time interaction or changing with the scenario, such as real-time data interfaces and user interaction scripts; static resources are those with fixed content, such as basic style sheets and fixed images; resource tags are markers used to reference resources on a page, including style reference tags (such as those for including CSS). <link> Tags), script reference tags (such as those for including JS) <script>标签)及媒体资源引用标签(如引入图片的标签)；依赖图谱是一种以图形化形式呈现公共资源之间依赖关系的结构。图谱中的节点代表各个公共资源，而节点之间的连线表示资源间的依赖关系，如某个脚本资源依赖特定样式资源才能正确运行，在图谱中就会体现为从该脚本节点指向样式节点的连线。

[0061] 应当理解的是，在页面加载中，某些脚本资源可能需要特定的样式资源先加载完成，才能正确执行其功能，这就形成了一种依赖关系；或者一个媒体资源在显示时依赖于特定的脚本对其进行初始化设置。因此，根据资源在页面渲染和功能实现过程中的先后顺序、调用逻辑等，梳理出完整的依赖关系网络。

[0062] 可以理解的是，在识别资源标签时，除了常规的标签解析方式，对于一些复杂的前端框架，也需要借助其特定的编译工具或解析器来准确提取资源引用信息。因为这些框架中资源的引入方式可能经过了特殊处理或存在动态加载机制。在确定资源依赖关系方面，除了通过分析页面渲染逻辑和资源调用顺序，还可以利用运行时监测工具，实时捕捉资源加载和交互过程中的依赖行为，以此来补充和修正通过静态分析得到的依赖关系。另外，构建依赖图谱时，若遇到大规模页面或复杂的资源依赖场景，可考虑采用分布式计算框架来提高构建效率。将页面资源数据分布式存储和处理，并行地进行资源提取和依赖关系分析，最后汇总生成依赖图谱。

[0063] 步骤S20，通过所述依赖图谱分析所述公共资源的引用情况，得到优先级序列。

[0064] 可以理解的是，公共资源的引用情况可以包括资源被其他资源调用的频次、在依赖链中的层级位置及对页面核心功能的支撑作用；优先级序列是指根据资源重要性和加载紧迫性排序的资源列表，用于指导预加载的先后顺序。

[0065] 具体的，基于依赖图谱遍历各公共资源节点，统计每个资源被其他资源引用的次数、在依赖链中的深度(如是否为顶层依赖资源)及与页面首屏渲染、核心交互功能的关联度；将上述引用特征量化为评估指标，通过加权计算得到各资源的综合优先级分值；按分值从高到低对资源进行排序，生成用于预加载的优先级序列。

[0066] 应当理解的是，分析引用情况时，可引入时间维度特征(如资源在用户停留时段的调用频率)动态调整优先级，例如对用户高频交互时段频繁调用的资源提升排序；而对于优先级并列的资源，可补充资源体积、加载耗时等次要指标进行二次排序，避免资源加载冲突。

[0067] 步骤S30，基于预设的页面跳转概率矩阵预测目标用户在当前页面下的页面跳转概率，所述页面跳转概率矩阵根据所述目标用户的用户行为序列训练得到。

[0068] 需要说明的是，页面跳转概率矩阵是一个以矩阵形式存储的概率分布表，其中行表示当前页面，列表示可能跳转的目标页面，矩阵元素值表示从当前页面跳转到对应目标页面的概率；用户行为序列是指目标用户在页面间的历史交互记录，包括访问页面的先后顺序、停留时长、点击路径等时序数据；目标用户的页面跳转概率则是基于上述矩阵，预测该目标用户在当前页面下跳转到其他页面的可能性大小。

[0069] 进一步地，为了通过采集用户历史行为序列并训练隐马尔可夫模型构建跳转概率矩阵，使页面跳转概率的预测基于用户实际行为特征，提高跳转概率预测的精准性，更贴合用户的真实操作习惯。所述步骤S30之前，还包括：

[0070] 采集目标用户在页面间的历史用户行为序列，所述用户行为序列包括页面停留时间、跳转路径及点击操作；基于所述用户行为序列训练隐马尔可夫模型，并根据所述隐马尔可夫模型输出各页面的跳转概率值；基于所述跳转概率值构建页面跳转概率矩阵。

[0071] 需要理解的是，历史用户行为序列是目标用户在页面间交互产生的历史时序数据集合，包含页面停留时间(用户在单个页面的持续访问时长)、跳转路径(页面间的访问先后顺序)及点击操作(用户在页面内的元素点击记录)。隐马尔可夫模型是用于处理序列数据的概率模型，包含隐藏状态(如用户意图)和观测状态(如行为序列)，可通过观测数据推断隐藏状态并预测后续行为。

[0072] 具体的，通过前端埋点或日志系统采集目标用户的历史行为数据，提取页面停留时间、跳转路径及点击操作并按时间顺序组装为历史用户行为序列；将行为序列中的页面标识作为模型的观测状态，通过预设算法训练隐马尔可夫模型，学习状态转移概率和观测概率；利用训练好的模型对用户从当前页面可能跳转的所有目标页面进行概率预测，输出对应的跳转概率值；最后以当前页面为行索引、目标页面为列索引，将跳转概率值填入矩阵对应位置，构建完成页面跳转概率矩阵。

[0073] 应当理解的是，在页面跳转概率矩阵构建过程中，可将页面类型(如首页、商品页)作为辅助特征融入模型，进一步提升跳转概率预测的准确性。

[0074] 步骤S40，根据所述优先级序列、所述页面跳转概率和所述目标用户当前的网络环境预加载目标页资源块。

[0075] 需要说明的是，目标用户当前的网络环境包括网络类型(如Wi-Fi、4G / 5G等)、实时带宽、延迟等影响资源加载速度的网络状态参数；目标页资源块是指目标页面中按功能或加载优先级划分的资源集合，可包含静态资源片段和动态资源接口数据。

[0076] 可以理解的是，根据所述优先级序列、所述页面跳转概率和所述目标用户当前的网络环境预加载目标页资源块可以依据优先级序列确定目标页资源块的加载先后顺序，优先处理对首屏渲染和核心功能起关键作用的资源块；同时结合页面跳转概率判断预加载必要性，当跳转概率高于预设阈值时启动预加载；随后检测目标用户的网络环境参数，若为高速网络则按优先级加载全部资源块，中速网络加载高优先级且体积适中的资源块，低速网络仅加载核心资源块，通过多维度参数动态平衡预加载效率与资源消耗。

[0077] 应当理解的是，预加载过程中也可以设置实时监控机制，若网络环境发生变化，可以立即终止预加载以释放带宽；网络环境判断可细化至具体指标，如延迟＞500ms视为低速，并支持根据用户设备性能(如内存、处理器等)调整预加载资源的数量和体积；对于预加载的动态资源，可设置有效期并在过期前触发增量更新，避免资源失效。

[0078] 在本实施例中，通过构建公共资源依赖图谱明确资源加载优先级，结合用户行为序列训练的跳转概率矩阵预测页面访问趋势，并依据网络环境动态调整预加载策略，能够精准识别并优先加载对页面核心功能及初始呈现至关重要的动态资源和静态资源，避免非关键资源阻塞加载进程，同时通过智能预测用户行为和适配网络环境，减少无效预加载造成的带宽浪费，使页面切换接近本地应用体验，显著提升了页面加载速度和渲染效率，避免动态资源加载滞后和弱网资源浪费，缩短页面加载时间，尤其改善了首屏加载体验和页面跳转流畅性，全面优化了用户的网页浏览体验。

[0079] 参照图2，图2为本申请页面预加载方法第二实施例的流程示意图，基于上述第一实施例，提出本申请页面预加载方法的第二实施例。

[0080] 在第二实施例中，所述步骤S10，包括：

[0081] 步骤S101，识别页面中包含的样式引用标签、脚本引用标签及媒体资源引用标签，获得标签检测结果。

[0082] 需要说明的是，样式引用标签指页面中用于引入样式文件的标记，如HTML中的<link rel＝"stylesheet">标签；脚本引用标签指用于引入脚本文件的标记，如<scriptsrc>标签；媒体资源引用标签指页面中用于引入图片、视频等媒体文件的标记，如<video src>标签；标签检测结果是对页面中上述三类标签的识别记录，包括标签位置、引用路径、属性信息等数据。

[0083] 具体的，可基于浏览器内置解析引擎或第三方库，通过HTML解析器遍历页面DOM结构，识别并提取包含样式引用特征、脚本引用特征、媒体资源引用特征的标签；对提取的标签进行分类标记，记录其标签类型、资源URL(Uniform Resource Locator，统一资源定位符)、所在DOM节点路径等信息，形成结构化的标签检测结果；同时对动态生成的标签(如通过JavaScript插入的<script>标签)进行实时监测，确保检测覆盖静态与动态加载的标签。

[0084] 应当理解的是，检测过程中可结合页面的资源加载日志补充识别通过非标准标签加载的资源，避免遗漏；对于采用模板引擎渲染的页面，可在服务端渲染阶段同步提取标签信息，与客户端检测结果交叉验证；针对压缩或混淆的HTML代码，可先进行格式化处理再执行标签识别，提升检测准确性。

[0085] 步骤S102，基于所述标签检测结果提取各标签对应的公共资源标识信息，所述标识信息包括资源路径、资源名称及资源类型描述。

[0086] 需要说明的是，公共资源标识信息是用于唯一识别公共资源的关键数据，其中资源路径指资源存储的位置，如URL或本地路径，资源名称指资源的专属命名，如"common.css”"utils.js”等，资源类型描述指区分资源类别的信息，如"CSS样式文件”"JavaScript脚本文件”"图片文件”等。

[0087] 应当理解的是，基于所述标签检测结果提取各标签对应的公共资源标识信息时，若遇到相对路径，需结合页面当前URL补全为绝对路径，避免路径解析错误；若标签中存在自定义属性标注资源类型，可优先以自定义属性值作为资源类型描述，兼顾非标准标签的兼容性。

[0088] 进一步地，为了提高公共资源标识信息提取的准确性。即使面对模糊或与标准标识匹配度低的情况，也能通过修正生成可靠的标识信息，确保资源标识的完整性和精准性。所述步骤S102，可以包括：

[0089] 从所述标签检测结果中解析标签内的资源描述文本，所述资源描述文本包括所述公共资源的存储路径、功能说明及调用参数；将所述资源描述文本与预设资源标识库进行比对，确定文本中与标识库匹配的核心字段；计算所述核心字段与预设资源标识库中标准标识的匹配度，若匹配度大于预设匹配阈值，则将所述核心字段作为公共资源的目标标识信息；若匹配度小于或等于预设阈值，则提取所述资源描述文本中的特征词，结合历史人工标注的资源标识样本对特征词进行修正，生成修正后的标识信息；根据所述目标标识信息和所述修正后的标识信息确定各标签对应的公共资源标识信息。

[0090] 需要说明的是，资源描述文本是指资源标签内包含的、用于说明公共资源关键信息的文本内容，涵盖资源存放位置、资源实现的具体作用及资源运行所需的配置数据；预设资源标识库是预先构建的、存储标准资源标识的数据库，可以包括标准路径、功能关键词、参数格式等；核心字段是资源描述文本中与标识库标准标识匹配的关键信息片段；匹配度是核心字段与标准标识的相似程度量化值；历史人工标注的资源标识样本是过往人工校验并标注正确的资源标识数据，用于修正低匹配度场景下的标识信息。

[0091] 具体的，首先从标签检测结果中提取各资源标签内的资源描述文本，获取存储路径、功能说明、调用参数三类信息；将拆分后的文本与预设资源标识库中的标准标识进行逐字段比对，筛选出与标准标识存在重合或相似性的核心字段，如与标准路径部分匹配的路径片段、与标准功能关键词一致的说明文本；通过字符串相似度算法(如余弦相似度、编辑距离等)计算核心字段与标准标识的匹配度，若匹配度超过预设阈值，直接将该核心字段作为目标标识信息；若未达阈值，从资源描述文本中提取功能、类型相关的特征词，如"样式”"交互脚本”等，结合历史人工标注样本中同类特征词对应的正确标识，对特征词进行修正，如将"样式文件”修正为"CSS样式文件”，生成修正后的标识信息；最后整合目标标识信息与修正后的标识信息，形成各资源标签对应的公共资源标识信息。

[0092] 步骤S103，将所述公共资源标识信息与预设资源分类信息进行匹配，确定所述公共资源标识信息对应的公共资源和资源类型，其中，所述预设资源分类信息包括动态资源的特征参数和静态资源的特征参数。

[0093] 应当理解的是，预设资源分类信息是预先定义的、用于区分资源类别的标准数据集合，其中动态资源的特征参数包括实时数据交互标识，如含"api”"dynamic”的路径关键词，参数动态生成规则，如随用户行为变化的调用参数。静态资源的特征参数包括固定存储路径，如含"static”"cdn”的路径关键词)，内容不可变标识，如资源版本号固定；资源类型则是基于分类结果确定的资源属性，分为动态资源和静态资源。

[0094] 可以理解的是，确定所述公共资源标识信息对应的公共资源和资源类型可以是调取预设资源分类信息，明确动态资源与静态资源各自的特征参数；随后将公共资源标识信息中的资源路径、参数规则等内容，与预设分类信息中的特征参数进行逐一比对，例如检查资源路径是否包含动态资源的特征关键词、调用参数是否符合静态资源的固定格式；根据比对结果判断资源属性：若标识信息匹配动态资源特征参数，则确定为动态资源；若匹配静态资源特征参数，则确定为静态资源，完成公共资源与资源类型的对应匹配。

[0095] 步骤S104，根据所述公共资源和所述资源类型确定所述公共资源之间的依赖关系，并基于所述依赖关系构建依赖图谱。

[0096] 需要说明的是，依赖关系是指不同公共资源在页面解析、渲染或功能执行过程中的关联关系，如脚本资源需依赖样式资源才能正常渲染界面、动态数据接口需依赖基础脚本才能发起请求。

[0097] 具体的，首先根据公共资源的资源类型，分析不同类型资源的加载时序与功能关联：静态资源中，样式资源通常需优先加载以支撑页面初始渲染，脚本资源可能依赖特定样式资源的样式定义；动态资源中，数据接口资源需依赖基础脚本资源的请求逻辑，交互脚本资源可能依赖数据接口返回的动态数据。接着通过静态代码分析(如解析脚本中的资源调用语句、样式引用关系)与运行时监测(如记录浏览器加载资源的先后顺序)，确定各公共资源间的直接依赖与间接依赖，如A依赖B、B依赖C，则A间接依赖C。最后以公共资源为节点，按依赖方向绘制节点间的连线，标注依赖类型，如"渲染依赖”"执行依赖”等，构建完整的依赖图谱，同时为图谱添加资源类型标识，用不同颜色节点区分动态 / 静态资源，便于后续分析。

[0098] 应当理解的是，构建依赖图谱后，可对依赖图谱进行依赖强度量化，根据资源被依赖的频次、依赖失效后的影响范围，为节点间的连线赋予权重值，如核心脚本被10个资源依赖，权重设为10，权重值可辅助后续优先级序列的精准排序。

[0099] 在本实施例中，通过资源依赖图谱动态分级加载，消除渲染阻塞资源，避免了因资源识别错误或依赖关系混乱导致的加载阻塞，进一步提升了资源加载的有序性和效率。

[0100] 参照图3，图3为本申请页面预加载方法第三实施例的流程示意图，基于上述第一实施例，提出本申请页面预加载方法的第三实施例。

[0101] 在第三实施例中，所述步骤S20，包括：

[0102] 步骤S201，基于所述依赖图谱，分析各公共资源与页面核心功能实现和初始内容呈现的关联程度，确定各所述公共资源的影响权重。

[0103] 需要说明的是，页面核心功能实现指支撑页面核心价值的功能；初始内容呈现指页面加载时首屏可见区域的内容渲染；关联程度是公共资源对核心功能实现、初始内容呈现的支撑作用大小。影响权重是基于关联程度量化的数值，用于表征公共资源对页面功能与渲染的重要性，权重值越高，资源越关键。

[0104] 在一示例中，首先明确页面核心功能清单与初始内容范围，如通过业务需求文档确定"商品详情展示”"购物车操作”等电商页面核心功能和首屏可见的商品图片、标题、价格区域等初始内容范围；基于依赖图谱遍历各公共资源节点，分析资源与核心功能的关联：若资源为核心功能的直接依赖，如购物车脚本直接支撑购物车操作，标记为"强关联”，若为间接依赖，如基础工具脚本间接支撑购物车数据计算，标记为"弱关联”；同时分析资源与初始内容呈现的关联：若资源参与首屏内容渲染。如首屏商品图片的媒体资源、标题样式的CSS资源，标记为"首屏关联”，反之标记为"非首屏关联”；最后将关联类型量化为影响权重，如强关联和首屏关联权重设为0.9，弱关联和非首屏关联权重设为0.3等，完成各公共资源影响权重的确定。

[0105] 步骤S202，根据所述影响权重，将与核心功能实现及初始内容呈现关联度高的公共资源划分为强依赖资源，将与非核心功能及后续交互关联度高的公共资源划分为弱依赖资源。

[0106] 需要说明的是，强依赖资源是直接影响首屏渲染的CSS或骨架屏JS，可以被赋予最高优先级，如<head>标签内添加预先加载资源preload等；弱依赖资源可以是非首屏组件库或统计SDK(Software Development Kit，软件开发工具包)，可以被延迟加载，如监听DOMContentLoaded事件(监听DOM加载完成的事件)后注入。

[0107] 步骤S203，通过所述依赖图谱中所述公共资源的加载顺序，对所述强依赖资源和所述弱依赖资源进行排序，并根据排序结果生成优先级序列。

[0108] 具体的，对所述强依赖资源和所述弱依赖资源进行排序可以是从依赖图谱中提取公共资源的加载顺序逻辑，明确各资源的依赖层级，如样式资源A为脚本资源B的前置依赖，需先于B加载；优先对强依赖资源进行排序：按照依赖图谱中强依赖资源的加载顺序，将顶层强依赖资源(无前置依赖的核心资源)排在首位，依次向下排列底层强依赖资源(依赖顶层资源的核心资源)；再对弱依赖资源进行排序：同样依据依赖图谱中的加载顺序，将需优先加载的弱依赖资源(如支撑用户首次后续交互的资源)排在弱依赖资源队列前端；最后合并强依赖资源排序结果与弱依赖资源排序结果，形成优先级序列，确保核心资源优先进入预加载流程。

[0109] 应当理解的是，当强依赖资源内部存在加载顺序冲突，如资源C与资源D无直接依赖但均需优先加载时，可补充资源体积、加载耗时等次要指标进行二次排序，如体积更小、加载耗时更短的强依赖资源优先，避免并行加载时占用过多带宽；对于弱依赖资源，可结合用户历史后续交互数据，适当提升高频交互关联弱依赖资源的排序位置；此外，可增加优先级序列动态调整机制：若实时监测到目标用户当前页面停留行为，如频繁点击某功能按钮，则临时上调该功能关联弱依赖资源的排序。

[0110] 在本实施例中，通过划分强依赖资源与弱依赖资源，再结合加载顺序生成优先级序列，能够确保对页面关键体验起决定性作用的资源优先加载，减少非核心资源对首屏渲染等关键环节的干扰，提升页面初始加载的速度。

[0111] 参照图4，图4为本申请页面预加载方法第四实施例的流程示意图，基于上述各实施例，提出本申请页面预加载方法的第四实施例。

[0112] 在第四实施例中，所述步骤S40，包括：

[0113] 步骤S401，根据所述优先级序列确定所述公共资源对应的目标页资源块的加载顺序。

[0114] 可以理解的是，根据所述优先级序列确定所述公共资源对应的目标页资源块的加载顺序，可以首先将优先级序列中的公共资源按功能模块、资源类型(如静态资源块、动态资源块)进行归类，形成若干个目标页资源块，例如将优先级序列中前3位的首屏样式资源、核心交互脚本资源归为首屏核心资源块；以优先级序列为基准，确定各目标页资源块的整体优先级，包含高优先级公共资源的资源块整体排序靠前，包含低优先级公共资源的资源块整体排序靠后；若不同资源块包含相同优先级的公共资源，则可进一步参考资源块内公共资源的平均优先级、资源块体积微调顺序，最终明确所有目标页资源块的加载先后次序。

[0115] 应当理解的是，对于包含动态资源的目标页资源块，如含实时数据接口的资源块，可在确定加载顺序时补充接口响应时效参数，若某动态资源块的接口历史平均响应时间较长，则适当提前其加载顺序，预留充足的数据请求时间。此外，也可以增加加载顺序冲突解决规则，如当两个资源块优先级相同且无依赖关系时，优先加载与用户当前交互行为关联的资源块。

[0116] 步骤S402，当目标用户在当前页面的停留时间超过预设停留阈值，且所述页面跳转概率大于预设概率阈值时，检测所述目标用户当前的网络环境类型。

[0117] 需要说明的是，预设停留阈值是预先设定的、判断用户可能产生跳转意图的最短停留时长，可基于用户行为数据统计得出；预设概率阈值是预先设定的、判断预加载必要性的最低跳转概率，避免低概率跳转场景的无效预加载。网络环境类型指目标用户当前使用的网络连接属性，可以包括高速网络(如Wi-Fi、5G)、中速网络(如4G)、低速网络(如3G、2G)，直接影响资源加载速度。

[0118] 具体的，通过前端埋点代码启动计时器，实时记录目标用户进入当前页面后的停留时间，并与预设停留阈值进行实时比对；同时调用页面跳转概率矩阵，获取用户从当前页面跳转到各目标页面的概率值，筛选出最高跳转概率并与预设概率阈值比对；当两个条件同时满足(停留时间大于预设停留阈值且最高跳转概率大于预设概率阈值)时，触发网络环境检测流程：通过浏览器API(Application Programming Intererface，应用程序接口)获取网络类型(如type属性返回"wifi”"4g”"3g”)、实时带宽、延迟(如往返时间)等参数，结合预设的网络分类规则，如下行带宽大于10Mbps为高速、2～10Mbps为中速、小于2Mbps为低速)，确定目标用户当前的网络环境类型。

[0119] 步骤S403，若所述网络环境类型为高速网络，按照所述加载顺序预加载全部目标页资源块。

[0120] 步骤S404，若所述网络环境类型为中速网络，则仅预加载预设大小以内的所述目标页资源块。

[0121] 步骤S405，若所述网络环境类型为低速网络，则停止预加载。

[0122] 需要说明的是，高速网络指能支撑资源快速加载、延迟低的网络环境，满足下行带宽≥10Mbps、资源加载延迟≤100ms，如Wi-Fi、5G网络，该环境下预加载全部资源块不会明显占用用户带宽或引发卡顿；中速网络指加载速度适中、可支撑部分资源预加载的网络环境，一般下行带宽在2-10Mbps、延迟100-500ms，如4G网络；低速网络指加载速度慢、资源请求易超时的网络环境，通常下行带宽＜2Mbps、延迟＞500ms，如3G、2G网络；预设大小指预先设定的、适配中速网络的资源块体积上限，如500KB，可基于中速网络的平均加载速度与用户可接受等待时间确定；目标页资源块是按功能或优先级划分的目标页面资源集合，其加载顺序由优先级序列确定。

[0123] 具体的，基于前期检测的网络环境类型，利用requestIdleCallback函数预加载目标页资源块，执行对应的预加载策略：若判定为高速网络，直接调用预加载接口，按照已确定的加载顺序，强依赖资源块在前、弱依赖资源块在后，依次请求并缓存目标页面的全部资源块，确保用户跳转时可直接使用本地缓存资源；若判定为中速网络，先遍历所有目标页资源块并计算单个资源块体积，筛选出体积≤预设大小(如500KB)的资源块，仅对这些资源块按加载顺序执行预加载，避免大体积资源占用过多带宽导致当前页面卡顿；若判定为低速网络，立即终止预加载流程，同时释放已启动的预加载请求资源，防止网络资源浪费加剧页面加载延迟。

[0124] 应当理解的是，预设大小可根据目标页资源类型动态调整：如针对以文本为主的目标页，将预设大小设为300KB，针对含少量图片的目标页，将预设大小设为800KB，提升中速网络预加载的针对性；高速网络预加载时，可增加资源块优先级动态调整：若用户在预加载过程中触发当前页面交互，如点击按钮，则临时暂停弱依赖资源块预加载，优先保障当前页面交互所需资源，待交互结束后恢复预加载；此外，还可以包括预加载进度监测：若中速网络下预加载预设大小内资源块的耗时超过预设时长，如3秒，则停止后续资源块预加载，进一步优化中速网络下的资源分配效率。

[0125] 在本实施例中，通过结合用户停留时间、跳转概率及网络环境类型动态调整预加载策略，在保证预加载资源与用户可能的跳转行为匹配的同时，避免了在中低速网络环境下因盲目加载大量资源导致的网络负担加重或加载延迟，实现了预加载在不同网络条件下的自适应优化，既提升了高速网络下的加载效率，又保障了中低速网络下的页面加载稳定性。

[0126] 需要说明的是，上述示例仅用于理解本申请，并不构成对本申请页面预加载方法的限定，基于此技术构思进行更多形式的简单变换，均在本申请的保护范围内。

[0127] 本申请还提供一种页面预加载装置，请参照图5，所述页面预加载装置包括：

[0128] 图谱构建模块10，用于根据页面中的资源标签提取公共资源，并基于所述公共资源之间的依赖关系构建依赖图谱，所述公共资源包括动态资源和静态资源，所述资源标签包括样式引用标签、脚本引用标签及媒体资源引用标签中的至少一种；

[0129] 优先级划分模块20，用于通过所述依赖图谱分析所述公共资源的引用情况，得到优先级序列；

[0130] 概率预测模块30，用于基于预设的页面跳转概率矩阵预测目标用户在当前页面下的页面跳转概率，所述页面跳转概率矩阵根据所述目标用户的用户行为序列训练得到；

[0131] 资源预加载模块40，用于根据所述优先级序列、所述页面跳转概率和所述目标用户当前的网络环境预加载目标页资源块本申请提供的页面预加载装置，采用上述实施例中的页面预加载方法，能够解决在复杂的H5页面中，由于资源过多，使得用户进入页面需要等待较长时间的技术问题。与现有技术相比，本申请提供的页面预加载装置的有益效果与上述实施例提供的页面预加载方法的有益效果相同，且所述页面预加载装置中的其他技术特征与上述实施例方法公开的特征相同，在此不做赘述。

[0132] 本申请提供一种页面预加载设备，页面预加载设备包括：至少一个处理器；以及，与至少一个处理器通信连接的存储器；其中，存储器存储有可被至少一个处理器执行的指令，指令被至少一个处理器执行，以使至少一个处理器能够执行上述实施例一中的页面预加载方法。

[0133] 下面参考图6，其示出了适于用来实现本申请实施例的页面预加载设备的结构示意图。本申请实施例中的页面预加载设备可以包括但不限于诸如移动电话、笔记本电脑、数字广播接收器、PDA(PersonalDigitalAssistant：个人数字助理)、PAD(PortableApplication Description：平板电脑)、PMP(Portable Media Player：便携式多媒体播放器)、车载终端(例如车载导航终端)等等的移动终端以及诸如数字TV、台式计算机等等的固定终端。图6示出的页面预加载设备仅仅是一个示例，不应对本申请实施例的功能和使用范围带来任何限制。

[0134] 如图6所示，页面预加载设备可以包括处理装置1001(例如中央处理器、图形处理器等)，其可以根据存储在只读存储器1002中的程序或者从存储装置1003加载到随机访问存储器1004中的程序而执行各种适当的动作和处理。在随机访问存储器1004中，还存储有页面预加载设备操作所需的各种程序和数据。处理装置1001、只读存储器1002以及随机访问存储器1004通过总线1005彼此相连。输入 / 输出接口1006也连接至总线。通常，以下系统可以连接至输入 / 输出接口1006：包括例如触摸屏、触摸板、键盘、鼠标、图像传感器、麦克风、加速度计、陀螺仪等的输入装置1007；包括例如液晶显示器(LCD：Liquid CrystalDisplay)、扬声器、振动器等的输出装置1008；包括例如磁带、硬盘等的存储装置1003；以及通信装置1009。通信装置1009可以允许页面预加载设备与其他设备进行无线或有线通信以交换数据。虽然图中示出了具有各种系统的页面预加载设备，但是应理解的是，并不要求实施或具备所有示出的系统。可以替代地实施或具备更多或更少的系统。

[0135] 特别地，根据本申请公开的实施例，上文参考流程图描述的过程可以被实现为计算机软件程序。例如，本申请公开的实施例包括一种计算机程序产品，其包括承载在计算机可读介质上的计算机程序，该计算机程序包含用于执行流程图所示的方法的程序代码。在这样的实施例中，该计算机程序可以通过通信装置从网络上被下载和安装，或者从存储装置1003被安装，或者从只读存储器1002被安装。在该计算机程序被处理装置1001执行时，执行本申请公开实施例的方法中限定的上述功能。

[0136] 本申请提供的页面预加载设备，采用上述实施例中的页面预加载方法，能解决在复杂的H5页面中，由于资源过多，使得用户进入页面需要等待较长时间的技术问题。与现有技术相比，本申请提供的页面预加载设备的有益效果与上述实施例提供的页面预加载方法的有益效果相同，且该页面预加载设备中的其他技术特征与上一实施例方法公开的特征相同，在此不做赘述。

[0137] 应当理解，本申请公开的各部分可以用硬件、软件、固件或它们的组合来实现。在上述实施方式的描述中，具体特征、结构、材料或者特点可以在任何的一个或多个实施例或示例中以合适的方式结合。

[0138] 本申请提供一种计算机可读存储介质，具有存储在其上的计算机可读程序指令(即计算机程序)，计算机可读程序指令用于执行上述实施例中的页面预加载方法。

[0139] 本申请提供的计算机可读存储介质例如可以是U盘，但不限于电、磁、光、电磁、红外线或半导体的系统、系统或器件，或者任意以上的组合。计算机可读存储介质的更具体地例子可以包括但不限于：具有一个或多个导线的电连接、便携式计算机磁盘、硬盘、随机访问存储器(RAM：Random Access Memory)、只读存储器(ROM：Read Only Memory)、可擦式可编程只读存储器(EPROM：Erasable Programmable Read Only Memory或闪存)、光纤、便携式紧凑磁盘只读存储器(CD-ROM：CD-Read Only Memory)、光存储器件、磁存储器件，或者上述的任意合适的组合。在本实施例中，计算机可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、系统或者器件使用或者与其结合使用。计算机可读存储介质上包含的程序代码可以用任何适当的介质传输，包括但不限于：电线、光缆、RF(Radio Frequency：射频)等等，或者上述的任意合适的组合。

[0140] 上述计算机可读存储介质可以是页面预加载设备中所包含的；也可以是单独存在，而未装配入页面预加载设备中。

[0141] 上述计算机可读存储介质承载有一个或者多个程序，当上述一个或者多个程序被页面预加载设备执行时，使得页面预加载设备执行上文所述的页面预加载方法。

[0142] 可以以一种或多种程序设计语言或其组合来编写用于执行本申请的操作的计算机程序代码，上述程序设计语言包括面向对象的程序设计语言—诸如Java、Smalltalk、C++，还包括常规的过程式程序设计语言—诸如"C”语言或类似的程序设计语言。程序代码可以完全地在用户计算机上执行、部分地在用户计算机上执行、作为一个独立的软件包执行、部分在用户计算机上部分在远程计算机上执行，或者完全在远程计算机或服务器上执行。在涉及远程计算机的情形中，远程计算机可以通过任意种类的网络——包括局域网(LAN：Local Area Network)或广域网(WAN：Wide Area Network)—连接到用户计算机，或者，可以连接到外部计算机(例如利用因特网服务提供商来通过因特网连接)。

[0143] 附图中的流程图和框图，图示了按照本申请各种实施例的系统、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段或代码的一部分，该模块、程序段或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。

[0144] 描述于本申请实施例中所涉及到的模块可以通过软件的方式实现，也可以通过硬件的方式来实现。其中，模块的名称在某种情况下并不构成对该单元本身的限定。

[0145] 本申请提供的可读存储介质为计算机可读存储介质，所述计算机可读存储介质存储有用于执行上述页面预加载方法的计算机可读程序指令(即计算机程序)，能够解决在复杂的H5页面中，由于资源过多，使得用户进入页面需要等待较长时间的技术问题。与现有技术相比，本申请提供的计算机可读存储介质的有益效果与上述实施例提供的页面预加载方法的有益效果相同，在此不做赘述。

[0146] 本申请还提供一种计算机程序产品，包括计算机程序，所述计算机程序被处理器执行时实现如上述的页面预加载方法的步骤。

[0147] 本申请提供的计算机程序产品能够解决在复杂的H5页面中，由于资源过多，使得用户进入页面需要等待较长时间的技术问题。与现有技术相比，本申请提供的计算机程序产品的有益效果与上述实施例提供的页面预加载方法的有益效果相同，在此不做赘述。

[0148] 以上所述仅为本申请的部分实施例，并非因此限制本申请的范围，凡是在本申请的技术构思下，利用本申请说明书及附图内容所作的等效结构变换，或直接 / 间接运用在其他相关的技术领域均包括在本申请的保护范围内。< / script>

Claims

1. A page preloading method, characterized in that, The page preloading method includes: Extract common resources from the resource tags on the page, and construct a dependency graph based on the dependency relationships between the common resources. The common resources include dynamic resources and static resources. The resource tags include at least one of style reference tags, script reference tags, and media resource reference tags. The dependency graph is used to analyze the references to the public resources and obtain a priority sequence. The page jump probability matrix is ​​used to predict the probability of a target user jumping to a new page in the current page. The page jump probability matrix is ​​trained based on the user behavior sequence of the target user. Preload target page resource blocks according to the priority sequence, the page redirection probability, and the target user's current network environment.

2. The page preloading method as described in claim 1, characterized in that, The step of extracting public resources based on resource tags on the page and constructing a dependency graph based on the dependency relationships between the public resources includes: Identify style reference tags, script reference tags, and media resource reference tags contained on the page, and obtain tag detection results; Based on the tag detection results, extract the public resource identification information corresponding to each tag. The identification information includes the resource path, resource name, and resource type description. The public resource identification information is matched with the preset resource classification information to determine the public resource and resource type corresponding to the public resource identification information. The preset resource classification information includes feature parameters of dynamic resources and feature parameters of static resources. Determine the dependencies between the public resources based on the public resources and the resource types, and construct a dependency graph based on the dependencies.

3. The page preloading method as described in claim 2, characterized in that, The step of extracting the public resource identification information corresponding to each tag based on the tag detection results includes: The resource description text within the tag is parsed from the tag detection results. The resource description text includes the storage path, function description, and calling parameters of the public resource. The resource description text is compared with a preset resource identifier library to determine the core fields in the text that match the identifier library; Calculate the matching degree between the core field and the standard identifier in the preset resource identifier library. If the matching degree is greater than the preset matching threshold, then the core field is used as the target identifier information of the public resource. If the matching degree is less than or equal to the preset threshold, the feature words in the resource description text are extracted, and the feature words are corrected by combining them with historical manually annotated resource identification samples to generate corrected identification information. The public resource identification information corresponding to each label is determined based on the target identification information and the corrected identification information.

4. The page preloading method as described in claim 1, characterized in that, The step of analyzing the references to the public resources through the dependency graph to obtain the priority sequence includes: Based on the dependency graph, the degree of correlation between each public resource and the implementation of the core functions of the page and the initial content presentation is analyzed, and the influence weight of each public resource is determined. Based on the aforementioned influence weights, public resources that are highly correlated with the implementation of core functions and the initial presentation of content are classified as strongly dependent resources, while public resources that are highly correlated with non-core functions and subsequent interactions are classified as weakly dependent resources. The strong and weak dependent resources are sorted according to the loading order of the public resources in the dependency graph, and a priority sequence is generated based on the sorting result.

5. The page preloading method as described in any one of claims 1 to 4, characterized in that, The step of preloading the target page resource block according to the priority sequence, the page redirection probability, and the target user's current network environment includes: The loading order of the target page resource blocks corresponding to the public resource is determined according to the priority sequence; When the target user stays on the current page for more than a preset stay threshold, and the page redirection probability is greater than a preset probability threshold, the current network environment type of the target user is detected. If the network environment type is a high-speed network, preload all target page resource blocks according to the loading order; If the network environment type is a medium-speed network, then only the target page resource blocks within a preset size are preloaded; If the network environment type is a low-speed network, then preloading will stop.

6. The page preloading method according to any one of claims 1 to 4, characterized in that, Before the step of predicting the probability of a target user's page jump on the current page based on a preset page jump probability matrix, the method further includes: Collect the target user's historical user behavior sequence between pages, the user behavior sequence including page dwell time, jump path and click operation; A hidden Markov model is trained based on the user behavior sequence, and the jump probability value of each page is output according to the hidden Markov model. A page redirection probability matrix is ​​constructed based on the redirection probability values.

7. A page preloading device, characterized in that, The device includes: The dependency graph construction module is used to extract common resources based on resource tags on the page, and construct a dependency graph based on the dependency relationships between the common resources. The common resources include dynamic resources and static resources, and the resource tags include at least one of style reference tags, script reference tags and media resource reference tags. The priority division module is used to analyze the reference status of the public resources through the dependency graph to obtain a priority sequence; The probability prediction module is used to predict the probability of a target user jumping to a page on the current page based on a preset page jump probability matrix, wherein the page jump probability matrix is ​​trained according to the user behavior sequence of the target user. The resource preloading module is used to preload target page resource blocks according to the priority sequence, the page jump probability, and the target user's current network environment.

8. A page preloading device, characterized in that, The device includes: a memory, a processor, and a computer program stored in the memory and executable on the processor, the computer program being configured to implement the steps of the page preloading method as described in any one of claims 1 to 6.

9. A storage medium, characterized in that, The storage medium is a computer-readable storage medium, and a computer program is stored on the storage medium. When the computer program is executed by a processor, it implements the steps of the page preloading method as described in any one of claims 1 to 6.

10. A computer program product, characterized in that, The computer program product includes a computer program that, when executed by a processor, implements the steps of the page preloading method as described in any one of claims 1 to 6.

Images