Front-end performance optimization method, device, equipment and medium

Abstract

The invention discloses a front-end performance optimization method and device, equipment and a medium, which are applied to a financial scene or a medical scene, and are used for acquiring historical performance data of a front-end page according to a preset acquisition index, and performing data preprocessing and feature selection on the historical performance data to obtain target performance data; performing model training on a pre-established duration prediction model by using the historical performance data, performing model parameter adjustment in the duration prediction model by using a Hyperpt library to obtain a trained target duration prediction model, and inputting the target performance data and the initial loading strategy into the target duration prediction model for prediction to obtain page loading duration, the initial loading strategy comprises a page loading mode and a page loading priority, and then performance optimization is performed on the front-end page according to the page loading duration and the user behavior data, so that rapid and accurate processing of front-end performance problems is realized, manual and manual operations are greatly reduced, and the efficiency and effect of front-end performance optimization are improved.

Description

Technical Field

[0001] The present invention relates to the field of front-end optimization technology, and in particular to a front-end performance optimization method, device, equipment and medium. Background Art

[0002] With the rapid expansion of financial or medical services, users' expectations for front-end response speed and operating efficiency continue to rise, making front-end performance optimization increasingly important, and the industry's evaluation standards for front-end performance are also constantly improving.

[0003] At present, existing technologies can only start with file size and loading process blocking, and rely on fixed optimization strategies and parameter settings, with low automation, unable to distinguish between different devices or business scenarios, and difficult to accurately locate performance bottlenecks in complex environments, resulting in significant errors in optimization results. Therefore, how to quickly and accurately optimize front-end performance to improve optimization results is a technical problem that needs to be solved urgently. Summary of the invention

[0004] Based on this, it is necessary to address the above technical problems. The embodiments of the present invention provide a front-end performance optimization method, device, equipment and medium to solve the technical problem that the prior art cannot quickly and accurately optimize the front-end performance, resulting in significant errors in the optimization effect.

[0005] A first aspect of an embodiment of the present application provides a front-end performance optimization method, the front-end performance optimization method comprising: Collect historical performance data of the front-end page according to the preset collection index, and perform data preprocessing and feature selection on the historical performance data to obtain target performance data; Using the historical performance data to train a pre-established duration prediction model, and using the Hyperopt library to adjust model parameters in the duration prediction model to obtain a trained target duration prediction model; Inputting the target performance data and the initial loading strategy into the target duration prediction model for prediction to obtain the page loading duration, wherein the initial loading strategy includes a page loading mode and a page loading priority; The performance of the front-end page is optimized according to the page loading time and user behavior data.

[0006] A second aspect of an embodiment of the present application provides a front-end performance optimization device, the front-end performance optimization device comprising: The collection module is used to collect the historical performance data of the front-end page according to the preset collection indicators, and perform data preprocessing and feature selection on the historical performance data to obtain the target performance data; A training module, configured to train a pre-established duration prediction model by using the historical performance data, and perform model parameter tuning on the duration prediction model by using the Hyperopt library to obtain a trained target duration prediction model; A prediction module, configured to input the target performance data and an initial loading strategy into the target duration prediction model for prediction to obtain a page loading duration, where the initial loading strategy includes a page loading method and a page loading priority; An optimization module, configured to perform performance optimization on the front-end page according to the page loading duration and user behavior data.

[0007] In a third aspect, a computer device is provided, including a memory, a processor, and a computer program stored in the memory and executable on the processor, where when the processor executes the computer program, the front-end performance optimization method as described in the first aspect is implemented.

[0008] In a fourth aspect, a computer-readable storage medium is provided, where the computer-readable storage medium stores a computer program, and when the computer program is executed by a processor, the front-end performance optimization method as described in the first aspect is implemented.

[0009] In summary, the present invention provides a front-end performance optimization method, device, equipment, and medium. By collecting historical performance data of a front-end page according to pre-set collection metrics, performing data preprocessing and feature selection on the historical performance data to obtain target performance data, training a pre-established duration prediction model by using the historical performance data, and performing model parameter tuning on the duration prediction model by using the Hyperopt library to obtain a trained target duration prediction model, inputting the target performance data and an initial loading strategy into the target duration prediction model for prediction to obtain a page loading duration, where the initial loading strategy includes a page loading method and a page loading priority, and then performing performance optimization on the front-end page according to the page loading duration and user behavior data, the rapid and accurate handling of front-end performance problems is realized, the manual and manual operations are greatly reduced, and the efficiency and effect of front-end performance optimization are improved. Description of the Drawings

[0010] In order to more clearly illustrate the technical solutions of the embodiments of the present invention, the drawings required for the description of the embodiments of the present invention will be briefly introduced below. Obviously, the drawings in the following description are only some embodiments of the present invention, and for those of ordinary skill in the art, other drawings can be obtained according to these drawings without creative efforts.

[0011] Figure 1 It is an application environment diagram of a front-end performance optimization method provided by an embodiment of the present invention; Figure 2 It is a schematic flowchart of a front - end performance optimization method provided by an embodiment of the present invention; Figure 3 It is a schematic structural diagram of a front - end performance optimization device provided by an embodiment of the present invention; Figure 4 It is a schematic structural diagram of a computer device provided by an embodiment of the present invention. Detailed implementation manners

[0012] Next, the technical solutions in the embodiments of the present invention will be clearly and completely described in conjunction with the accompanying drawings in the embodiments of the present invention. Obviously, the described embodiments are part of the embodiments of the present invention, rather than all of the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by those of ordinary skill in the art without creative efforts fall within the scope of protection of the present invention.

[0013] It should be understood that when used in the specification of the present invention and the appended claims, the term "comprising" indicates the presence of the described features, wholes, steps, operations, elements, and / or components, but does not exclude the presence or addition of one or more other features, wholes, steps, operations, elements, components, and / or their combinations.

[0014] It should also be understood that the term "and / or" used in the specification of the present invention and the appended claims refers to any combination and all possible combinations of one or more of the associated listed items, and includes these combinations.

[0015] As used in the specification of the present invention and the appended claims, the term "if" can be interpreted as "when", "once", or "in response to determining" depending on the context. Similarly, the phrase "if it is determined" or "if [the described condition or event] is compared" can be interpreted as meaning "once determined", "in response to determining", "once [the described condition or event] is compared", or "in response to comparing [the described condition or event]" depending on the context.

[0016] In addition, in the description of the specification of the present invention and the appended claims, the terms "first", "second", "third", etc. are only used for distinguishing descriptions and cannot be understood as indicating or implying relative importance.

[0017] References to "one embodiment" or "some embodiments" in the description of the present invention mean that specific features, structures, or characteristics described in connection with that embodiment are included in one or more embodiments of the present invention. Thus, statements such as "in one embodiment", "in some embodiments", "in other some embodiments", "in still other embodiments", etc., which appear in different places in this specification, do not necessarily all refer to the same embodiment, but mean "one or more but not all embodiments", unless otherwise specifically emphasized. The terms "comprising", "including", "having" and their variants mean "including but not limited to", unless otherwise specifically emphasized.

[0018] It should be understood that the magnitudes of the sequence numbers of the steps in the following embodiments do not imply the order of execution, and the order of execution of each process should be determined by its function and internal logic, and should not constitute any limitation to the implementation process of the embodiments of the present invention.

[0019] In order to illustrate the technical solution of the present invention, specific embodiments are used for illustration below.

[0020] See Figure 1 , which is an application environment diagram of a front-end performance optimization method provided by an embodiment of the present invention. A front-end performance optimization method provided by an embodiment of the present invention can be applied to an application environment such as Figure 1 . Among them, the client communicates with the server. The client includes, but is not limited to, computer devices such as a palm computer, a desktop computer, a notebook computer, an ultra-mobile personal computer (UMPC), a netbook, a personal digital assistant (PDA), etc. Here, the client is replaced by a business management system. The server can be implemented by an independent server or a server cluster composed of multiple servers. For example, a financial trading platform is an important channel for investors to conduct activities such as securities trading and futures trading, and has extremely high requirements for system performance and user interaction experience. By adopting the front-end performance optimization method of the present application to optimize the front-end page of the financial trading platform, the rapid and accurate handling of front-end performance problems in the financial or medical field is realized, and an intuitive, user-friendly trading interface and rich chart and data visualization functions are provided.

[0021] See Figure 2 , which is a schematic flowchart of a front-end performance optimization method provided by an embodiment of the present invention. As Figure 2 shown, the front-end performance optimization method can be implemented through the following steps.

[0022] S201: Collect historical performance data of the front-end page according to preset collection metrics, and perform data preprocessing and feature selection on the historical performance data to obtain target performance data.

[0023] In step S201, before collecting historical performance data, according to the characteristics of the financial or medical field, determine the front-end page performance data metrics to be collected. Taking an online trading insurance platform in the financial field as an example, the collection metrics to be determined are user behavior metrics (such as trading behavior, user retention, etc.), transaction performance metrics (such as transaction success rate, transaction volume, etc.), and network performance metrics (such as network latency, bandwidth usage, etc.). By embedding collection code in the front-end page, according to the preset collection metrics, collect historical performance data in real time or regularly according to the preset collection frequency, and store the collected historical performance data in a database or data warehouse for subsequent analysis and processing. In the initial stage of historical performance data processing, in order to achieve data reliability and integrity, it is usually necessary to integrate, preprocess, and perform feature selection on the historical performance data to obtain target performance data. For example, in the medical platform field, the target performance data can be the time required to evaluate the medical platform to process user requests (such as querying medical records, making appointments, etc.), the number of tasks that can be processed per unit time, and the degree of optimization of the diagnosis and treatment process. This application does not make any limitations on this.

[0024] In an embodiment of the invention, collecting historical performance data of the front-end page according to preset collection metrics includes: Obtain performance monitoring code; Insert the performance monitoring code into the front-end page to be collected; In response to the loading instruction of the front-end page, execute the performance detection code and the preset collection metrics to collect historical performance data, where the historical performance data includes at least one of resource loading conditions, network status information, CPU, and memory usage.

[0025] Specifically, pre-select a performance monitoring tool, such as Google Analytics, New Relic, or a custom monitoring tool, and then obtain the monitoring code from the official website of the tool or other channels. For example, it is a piece of JavaScript code. By inserting the obtained monitoring code into the front-end page to be collected, it can be placed within the tag <script>标签中，或者在<body>标签的结尾处的<script>标签中，这样，当用户访问前端页面时，监测代码将被加载和执行，一旦监测代码被加载和执行，则基于预先设定的采集指标采集历史性能数据。该历史性能数据包括资源加载情况、网络状况信息、CPU和内存使用率等等，其中，资源加载情况是指网页或应用程序在加载过程中，各种资源（如HTML、CSS、JavaScript、图片、视频等）的下载、解析和执行的状态；网络状况信息是指描述网络连接质量和性能的各种数据，这包括但不限于网络延迟（即数据包从发送端到接收端所需的时间）、带宽（即网络传输数据的速率）、丢包率（即数据包在传输过程中丢失的比例）等；CPU使用率是指中央处理器（CPU）在处理任务时所占用的时间比例，通常以百分比表示；内存使用率是指系统内存（RAM）在特定时间内被占用的比例。最后将收集到的历史性能数据通过网络请求进行传输，一般使用HTTP或HTTPS协议，进而发送到监测工具的服务器上，以便进一步分析和报告，从而可以帮助快速准确地评估网页的加载速度、优化性能瓶颈以及改进用户体验。

[0026] 在一发明实施例中，对所述历史性能数据进行数据预处理和特征选择，得到目标性能数据，包括：检查所述历史性能数据中的异常值和缺失值；对所述异常值和所述缺失值进行修正或删除；对修正或删除所述异常值和所述缺失值的历史性能数据进行标准化，得到标准化性能数据；利用集成学习算法计算所述标准化性能数据中的每个样本特征的权重；根据所述每个样本特征的权重，通过皮尔森相关系数计算公式，确定不同样本特征与目标变量之间的相关关系；根据所述不同样本特征与目标变量之间的相关关系，确定目标性能数据。

[0027] 具体地，通过检查历史性能数据中的异常值和缺失值，对异常值和缺失值进行修正或删除，其中，异常值是指与其他数据点相比具有显著偏离的值，通常采用标准差或箱线图等方式来处理异常值，以便识别和排除异常值，即可以根据设定的阈值将超过阈值的数据点视为异常值，并进行修正或排除；缺失值是指在数据集中缺少某些值的情况。通常采用删除带有缺失值的数据点、使用均值或中位数填充缺失值、使用插值方法进行估计等方式来处理缺失值，进而再对修正或删除异常值和缺失值的历史性能数据进行标准化，得到标准化性能数据，数据标准化是将不同尺度的数据转换为具有相同尺度的数据，以便进行比较和分析。常见的数据标准化方法包括Z-score标准化和Min-Max标准化。Z-score标准化将数据转换为以平均值为中心，标准差为单位的数据，而Min-Max标准化将数据缩放到特定范围内(通常是0到1之间)。例如，检查医院信息系统的历史性能数据是否存在异常值和缺失值，使用统计方法或可视化工具来识别异常值，并查找缺失值的模式，根据设定的阈值，将超过阈值的数据点视为异常值，可以选择删除异常值或使用合适的统计方法进行修正，根据缺失值的数量和性质，选择适当的缺失值处理方法，如果缺失值较少，可以选择删除带有缺失值的数据点。如果缺失值较多，可以使用插值方法进行估计，或者使用均值、中位数等填充缺失值，根据数据的需求和分析目的，选择适当的数据标准化方法。Z-score标准化适用于需要考虑数据分布和离群值的情况，而Min-Max标准化适用于需要将数据缩放到特定范围的情况，从而得到标准化性能数据。通过上述步骤，对历史性能数据进行预处理，以保证数据的质量和可用性，提高了系统强大的交互效果和数据可视化功能。

[0028] 在得到标准化性能数据后，再利用集成学习算法计算标准化性能数据中的每个样本特征的权重，其中，集成学习算法包括Bagging算法、随机森林算法、Boosting算法、GBDT算法以及XGBoost算法等，以随机森林算法为例，选择的标准化性能数据的每一条性能数据样本共有5个特征，依次分别为A、B、C、D、E，使用随机森林算法可以计算每个样本特征的权重。首先，计算随机森林中每一颗决策树的袋外数据的误差，袋外数据是指没用于训练决策树的剩余数据。之后随机改变样本特征X处的值，再次计算袋外数据的误差。并且五个特征的权重都大于0 .15，故不存在无关特征。假设森林中有N棵树，则特征X的权重可以通过如下公式计算得到：其中，为特征X的权重，为改变后袋外数据的误差，为初始袋外数据的误差，进而根据每个样本特征的权重，通过皮尔森相关系数Pearson计算公式，确定确定不同样本特征与目标变量之间的相关关系，其中，皮尔森相关系数Pearson是一种线性相关系数，记为r，用于反映两个变量a和b的线性相关程度，r值介于-1到1之间，皮尔森相关系数Pearson越接近-1表示两个变量之间负线性关系越强，越接近1表示两个变量之间正线性关系越强，越接近0表示两个变量之间无线性相关关系，即相关系数的取值范围为 -1到1，其中，-1 表示负相关，0表示无相关，1表示正相关。判断相关性的强度：一般认为绝对值大于 0.7 的相关性较强，绝对值在 0.3 到 0.7 之间的相关性为中等，绝对值小于 0.3 的相关性较弱。其中，假设特征为 X，目标变量为 Y，则相关关系的计算公司为：其中，为不同样本特征与目标变量之间的相关关系，表示特征的每个样本值，表示特征的均值，表示目标变量的每个样本值，表示目标变量的均值。在通过皮尔森相关系数Pearson计算不同样本特征与目标变量之间的相关关系后，再利用散点图来可视化不同样本特征与目标变量之间的相关关系，以观察不同样本特征的分布情况和趋势，然后根据不同样本特征的分布情况和趋势的结果，确定目标性能数据，其中，散点图是指在回归分析中，数据点在直角坐标系平面上的分布图，散点图表示因变量随自变量而变化的大致趋势，据此可以选择合适的函数对数据点进行拟合，常用于比较跨类别的聚合数据。通过上述步骤，对标准化性能数据进行特征选择，从而能够快速准确地得到目标性能数据，以保证目标性能数据的质量和可用性。

[0029] 本申请实施例中，通过根据预先设定的采集指标采集前端页面的历史性能数据，并对历史性能数据进行数据预处理和特征选择，从而得到目标性能数据，提高了目标性能数据的准确性和可靠性，以便后续能够快速准确地对目标性能数据进行数据处理，从而推动前端页面优化的实现。

[0030] S202：利用所述历史性能数据对预先建立的时长预测模型进行模型训练，并在所述时长预测模型中使用Hyperopt库进行模型调参，得到训练好的目标时长预测模型。

[0031] 在步骤S202中，通过利用历史性能数据对预先建立的时长预测模型进行模型训练，并在模型训练过程中使用python的Hyperopt库的自动调参框架对时长预测模型的模型参数进行自动搜索，在限定时间内输出搜索过程中的最佳参数，实现模型自动调参，进而得到训练好的目标时长预测模型。其中，模型参数包括数的层次、步长和迭代次数等。

[0032] 在一发明实施例中，得到训练好的目标时长预测模型，包括：通过分层抽样将所述历史性能数据分成训练集和验证集；利用机器学习算法建立时长预测模型，并根据训练集的历史数据和相关特征对所述时长预测模型进行训练，迭代优化模型参数，得到训练后的时长预测模型；利用所述验证集对所述训练后的时长预测模型进行评估，确定评估结果；判断所述评估结果是否达到预设的指标阈值；若所述评估结果达到预设的指标阈值，则使用Hyperopt库进行模型调参，得到训练好的目标时长预测模型。

[0033] 具体地，利用分层抽样将历史性能数据分成训练集和验证集，用于时长预测模型的训练和评估，首先根据数据特点选择合适的机器学习算法建立时长预测模型，如线性回归、决策树、随机森林、梯度提升树（GBM）、神经网络等。然后通过训练集对时长预测模型进行训练，迭代优化模型参数，得到训练后的时长预测模型，然后服务端使用验证集对训练后的时长预测模型进行验证，并根据验证结果计算模型评估指标AUC(area under thecurve)，若AUC的值达到预设的指标阈值，则确认该训练后的时长预测模型即为训练好的目标时长预测模型，若AUC的值未达到预设的指标阈值，则服务端按照预设分割比例重新随机分割训练集和验证集，并继续采用本步骤对训练后的时长预测模型进行训练和验证，直到ACU的值达到预设的指标阈值为止，进而使用Hyperopt库进行模型调参，得到训练好的目标时长预测模型。其中，预设的指标阈值可以是80%，也可以是90%，可根据具体需要而设置，本申请实例不做任何限定。通过上述步骤，通过使用训练集来训练时长预测模型，再使用验证集来评估时长预测模型的准确性和效果，从而可以不断迭代优化和调整时长预测模型，以提高模型性能预测的准确性和稳定性。

[0034] 值得注意的是，在本发明的其他实施例中，可针对时长预测模型验证方式可选用其他的方式，例如基于算法模型的验证等，本发明并不以此为限。

[0035] 本实施例中，通过利用历史性能数据对时长预测模型进行模型训练，并在时长预测模型中使用Hyperopt库进行模型调参，得到训练好的目标时长预测模型，保证了后续前端页面优化的效率和准确性，还提高了时长预测模型的泛化能力和性能。

[0036] S203：将所述目标性能数据以及初始加载策略输入所述目标时长预测模型进行预测，得到页面加载时长，其中，所述初始加载策略包括页面加载方式和页面加载优先级。

[0037] 在步骤S203中，页面加载方式是指页面资源（如HTML、CSS、JavaScript、图片等）在浏览器中的加载顺序和方式，常见的页面加载方式包括：同步加载、异步加载和懒加载等；页面加载优先级是指根据页面资源和用户行为等因素，确定资源加载的先后顺序，常见的页面加载优先级策略包括关键资源优先加载、按需加载和渐进式加载等。在得到训练好的目标时长预测模型后，输入当前前端页面的目标性能数据，如当前网络延迟、服务器负载、用户设备性能等，输入当前的初始加载策略，如缓存策略、资源压缩比例、CDN节点选择等，如果目标时长预测模型期望输入是一个二维矩阵，将目标性能数据和初始加载策略数据按列拼接成一个样本矩阵，使用目标时长预测模型对输入数据进行预测。以神经网络模型为例，数据会在模型的各层中进行前向传播，经过神经元的计算和激活函数的处理，最终输出预测的页面加载时长。对于决策树模型，则会根据输入数据在树结构中进行路径搜索，最终基于叶子节点的信息得出预测结果。

[0038] 需要说明的是，目标时长预测模型输出的结果即为预测的页面加载时长，可能是一个具体的数值（如 3.2 秒），也可能是一个时间范围（如 2.5-3.5 秒），具体取决于目标时长预测模型的训练目标和输出形式，本申请对此不做任何限定。

[0039] 本实施例中，通过将目标性能数据以及初始加载策略输入目标时长预测模型进行预测，能够快速地得到页面加载时长，以便后续能够更加准确地对前端页面进行性能优化，提高前端页面的稳定性和可靠性。

[0040] S204：根据所述页面加载时长和用户行为数据，对所述前端页面进行性能优化。

[0041] 在步骤S204中，通过利用专业工具如 Google PageSpeed Insights、GTmetrix等，获取页面各阶段的加载时长，包括 DNS 解析时间、TCP 连接时间、HTTP 请求响应时间、页面渲染时间等。进而分析各个阶段的耗时，确定是网络问题、服务器响应慢，还是前端资源加载和渲染的问题。例如，如果 DNS 解析时间过长，可能需要优化 DNS 设置；如果页面渲染时间长，可能是 HTML、CSS 或 JavaScript 代码存在问题。然后再通过埋点技术收集用户在页面上的行为数据，如点击、滚动、停留时间等。也可以使用 Google Analytics、百度统计等工具，了解用户在页面上的主要操作路径和关注点，找出用户容易流失的页面位置和操作环节。例如，如果用户在某个特定按钮点击后流失率较高，可能是该按钮的功能或交互设计存在问题。最后根据页面加载时长和用户行为数据的分析结果，采用有针对性的优化方式对前端页面进行性能优化。

[0042] 在一发明实施例中，根据所述页面加载时长和用户行为数据，对所述前端页面进行性能优化，包括：根据所述页面加载时长，判断所述前端页面是否需要优化；当所述前端页面需要优化时，则利用预设的学习算法，根据所述目标性能数据和所述用户行为数据确定最优配置参数；根据所述最优配置参数对所述前端页面进行性能优化。

[0043] 具体地，在使用性能监控工具测试页面加载时长后，进而根据页面加载时长，判断前端页面是否需要优化，当前端页面需要优化时，从获取到的目标性能数据和用户行为数据中选取出的各衡量指标和各衡量指标对应的第一指标值，并预先设定的衡量指标与前端页面的对应关系，根据预设的学习算法（如网格搜索、随机搜索、贝叶斯优化等），在预设的参数范围内调整配置参数，在每次配置参数调整后，通过前端页面实时获取衡量指标的指标值，进而根据衡量指标的指标值评估当前配置参数的性能，根据性能评估结果，不断调整配置参数，直到找到最优配置参数，进而根据最优配置参数对前端页面进行性能优化，即调整前端页面的资源加载顺序，如优先加载关键资源（如CSS、JavaScript文件）；压缩和优化图片、CSS、JavaScript文件等资源，减少文件大小；利用CDN加速静态资源的加载，缩短用户访问距离等。通过上述步骤，可以使在线医疗咨询平台成功对前端页面做出更加精准和高效的优化决策，优化后的页面加载时间明显缩短，用户满意度和留存率显著提升，避免人为判断的主观性和不确定性，从而确保优化效果的最大化。

[0044] 在一发明实施例中，根据所述页面加载时长，判断所述前端页面是否需要优化，包括：判断所述页面加载时长是否大于预设时长阈值；若所述页面加载时长大于预设时长阈值，则确定所述前端页面需要优化。

[0045] 具体地，根据业务需求和用户体验目标，设定页面加载时长阈值，具体可根据实际情况进行设定，本申请对此不做任何限定。例如：首屏加载时间（FCP）应小于2秒；最大内容绘制时间（LCP）应小于2.5秒；页面整体加载时间应小于5秒。通过使用性能监控工具（如Google Analytics、Lighthouse、Web Vitals）实时收集页面加载时长数据，并将收集到的数据与性能阈值进行对比，如果页面加载时长大于预设时长阈值，则确定前端页面需要优化。以在线医疗咨询平台为例，当患者进入医疗首页时，首屏加载时间为3秒，超过预先设置时长阈值2秒，则确定判定前端页面需要优化。本申请通过判断页面加载时长大于预设时长阈值，从而确保前端页面需要优化，能够及时的性能优化并缩短页面加载时间，从而提升用户满意度和留存率，提高了性能优化的效率和准确性。

[0046] 在一发明实施例中，对所述前端页面进行性能优化之后，包括：根据预先设定的监控指标对所述前端页面进行实时监控，并将监控结果以可视化方式进行展示。

[0047] 具体地，根据业务需求和技术特点，确定需要监控的前端页面性能指标，如页面加载时间、资源加载时间、渲染时间、内存占用、JS错误率、API错误率等。根据监控指标的需求，选择适合的前端性能监控工具，如Lighthouse、PageSpeed Insights、岳鹰等。将监控代码集成到前端应用中，确保能够实时收集性能数据，以得到监控结果。监控代码通常包括页面加载脚本、事件监听器等，进而通过监控工具收集前端应用的性能数据，包括用户行为数据、网络请求数据、资源加载数据等。在得到监控结果后，将监控结果以可视化方式进行展示，确保前端页面的持续高性能，并且能够及时发现前端页面的性能问题。其中，可视化方式包括数据可视化工具（如FineReport、FineVis等）或自定义可视化界面，将收集到的性能监控数据以图表、图形等形式进行展示。最后根据预设的监控指标阈值，设置告警机制，当监控数据超过阈值时，自动触发告警，以便及时响应和处理性能问题。

[0048] 本申请实施例中，通过根据页面加载时长和用户行为数据，对前端页面进行性能优化，避免了开发者手动进行调整优化的过程，提高了前端页面性能的优化效率，降低了优化工作的复杂性和耗时，也大大降低了优化效果的不确定性。

[0049] 综上所述，本发明提供了一种前端性能优化方法、装置、设备及介质，通过根据预先设定的采集指标采集前端页面的历史性能数据，并对历史性能数据进行数据预处理和特征选择，得到目标性能数据，利用历史性能数据对预先建立的时长预测模型进行模型训练，并在时长预测模型中使用Hyperopt库进行模型调参，得到训练好的目标时长预测模型，将目标性能数据以及初始加载策略输入目标时长预测模型进行预测，得到页面加载时长，其中，初始加载策略包括页面加载方式和页面加载优先级，进而根据页面加载时长和用户行为数据，对前端页面进行性能优化，从而实现了前端性能问题的迅速且精准处理，大幅减少了人工和手动操作，提高了前端性能优化的效率和效果。

[0050] 请参阅图3，图3是本发明实施例提供的前端性能优化装置的结构示意图。本实施例中该终端包括的各单元用于执行图2对应的实施例中的各步骤。具体请参阅图2以及图2所对应的实施例中的相关描述。为了便于说明，仅示出了与本实施例相关的部分。参见图3，前端性能优化装置30包括：采集模块31，训练模块32，预测模块33，优化模块34。

[0051] 采集模块31，用于根据预先设定的采集指标采集前端页面的历史性能数据，并对所述历史性能数据进行数据预处理和特征选择，得到目标性能数据；训练模块32，用于利用所述历史性能数据对预先建立的时长预测模型进行模型训练，并在所述时长预测模型中使用Hyperopt库进行模型调参，得到训练好的目标时长预测模型；预测模块33，用于将所述目标性能数据以及初始加载策略输入所述目标时长预测模型中进行预测，得到页面加载时长，其中，所述初始加载策略包括页面加载方式和页面加载优先级；优化模块34，用于根据所述页面加载时长和用户行为数据，对所述前端页面进行性能优化。

[0052] 可选地，上述采集模块31具体用于：获取性能监测代码；在待采集的前端页面中插入所述性能监测代码；响应于所述前端页面的加载指令，执行所述性能检测代码和预先设定的采集指标采集历史性能数据，其中，所述历史性能数据包括资源加载情况、网络状况信息、CPU和内存使用率中的至少之一。

[0053] 可选地，上述采集模块31还用于：检查所述历史性能数据中的异常值和缺失值；对所述异常值和所述缺失值进行修正或删除；对修正或删除所述异常值和所述缺失值的历史性能数据进行标准化，得到标准化性能数据；利用集成学习算法计算所述标准化性能数据中的每个样本特征的权重；根据所述每个样本特征的权重，通过皮尔森相关系数计算公式，确定不同样本特征与目标变量之间的相关关系；根据所述不同样本特征与目标变量之间的相关关系，确定目标性能数据。

[0054] 可选地，上述训练模块32具体用于：通过分层抽样将所述历史性能数据分成训练集和验证集；利用机器学习算法建立时长预测模型，并根据训练集的历史数据和相关特征对所述时长预测模型进行训练，迭代优化模型参数，得到训练后的时长预测模型；利用所述验证集对所述训练后的时长预测模型进行评估，确定评估结果；判断所述评估结果是否达到预设的指标阈值；若所述评估结果达到预设的指标阈值，则使用Hyperopt库进行模型调参，得到训练好的目标时长预测模型。

[0055] 可选地，上述优化模块34具体用于：根据所述页面加载时长，判断所述前端页面是否需要优化；当所述前端页面需要优化时，则利用预设的学习算法，根据所述目标性能数据和所述用户行为数据确定最优配置参数；根据所述最优配置参数对所述前端页面进行性能优化。

[0056] 可选地，上述优化模块34还用于：判断所述页面加载时长是否大于预设时长阈值；若所述页面加载时长大于预设时长阈值，则确定所述前端页面需要优化。

[0057] 可选地，上述优化模块34之后具体用于：根据预先设定的监控指标对所述前端页面进行实时监控，并将监控结果以可视化方式进行展示。

[0058] 需要说明的是，上述单元之间的信息交互、执行过程等内容，由于与本发明方法实施例基于同一构思，其具体功能及带来的技术效果，具体可参见方法实施例部分，此处不再赘述。

[0059] 图4是本发明实施例提供的一种计算机设备的结构示意图。如图4所示，该实施例的计算机设备包括：至少一个处理器（图4中仅示出一个）、存储器以及存储在存储器中并可在至少一个处理器上运行的计算机程序，处理器执行计算机程序时实现上述任意前端性能优化方法实施例中的步骤。

[0060] 该计算机设备可包括，但不仅限于，处理器、存储器。本领域技术业务可以理解，图4仅仅是计算机设备的举例，并不构成对计算机设备的限定，计算机设备可以包括比图示更多或更少的部件，或者组合某些部件，或者不同的部件，例如还可以包括网络接口、显示屏和输入系统等。

[0061] 在一实施例中，提供了一种计算机可读存储介质，当计算机可读存储介质中的指令由计算机设备中的处理器执行时，使得计算机设备能够执行如本发明公开的一种前端性能优化方法任一实施例的各个步骤，在此不重复赘述。所述计算机可读存储介质可以是非易失性，也可以是易失性。

[0062] 所称处理器可以是CPU，该处理器还可以是其他通用处理器、数字信号处理器（Digital Signal Processor，DSP）、专用集成电路（Application Specific IntegratedCircuit，ASIC）、现成可编程门阵列（Field-Programmable Gate Array，FPGA）或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件等。通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等。

[0063] 存储器包括可读存储介质、内存储器等，其中，内存储器可以是计算机设备的内存，内存储器为可读存储介质中的操作系统和计算机可读指令的运行提供环境。可读存储介质可以是计算机设备的硬盘，在另一些实施例中也可以是计算机设备的外部存储设备，例如，计算机设备上配备的插接式硬盘、智能存储卡（Smart Media Card，SMC）、安全数字（Secure Digital，SD）卡、闪存卡（Flash Card）等。进一步地，存储器还可以既包括计算机设备的内部存储单元也包括外部存储设备。存储器用于存储操作系统、应用程序、引导装载程序（BootLoader）、数据以及其他程序等，该其他程序如计算机程序的程序代码等。存储器还可以用于暂时地存储已经输出或者将要输出的数据。

[0064] 本领域普通技术业务可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，该计算机程序可存储于一非易失性计算机可读取存储介质中，该计算机程序在执行时，可包括如上述各方法的实施例的流程。其中，本申请所提供的各实施例中所使用的对存储器、存储、数据库或其它介质的任何引用，均可包括非易失性和 / 或易失性存储器。非易失性存储器可包括只读存储器（ROM）、可编程ROM（PROM）、电可编程ROM（EPROM）、电可擦除可编程ROM（EEPROM）或闪存。易失性存储器可包括随机存取存储器（RAM）或者外部高速缓冲存储器。作为说明而非局限，RAM以多种形式可得，诸如静态RAM（SRAM）、动态RAM（DRAM）、同步DRAM（SDRAM）、双数据率SDRAM（DDRSDRAM）、增强型SDRAM（ESDRAM）、同步链路（Synchlink） DRAM（SLDRAM）、存储器总线（Rambus）直接RAM（RDRAM）、直接存储器总线动态RAM（DRDRAM）、以及存储器总线动态RAM（RDRAM）等。

[0065] 所属领域的技术业务可以清楚地了解到，为了描述的方便和简洁，仅以上述各功能单元、模块的划分进行举例说明，实际应用中，可以根据需要而将上述功能分配由不同的功能单元、模块完成，即将系统的内部结构划分成不同的功能单元或模块，以完成以上描述的全部或者部分功能。实施例中的各功能单元、模块可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中，上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。另外，各功能单元、模块的具体名称也只是为了便于相互区分，并不用于限制本发明的保护范围。上述系统中单元、模块的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。集成的单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。

[0066] 以上所述实施例仅用以说明本发明的技术方案，而非对其限制；尽管参照前述实施例对本发明进行了详细的说明，本领域的普通技术业务应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明各实施例技术方案的精神和范围，均应包含在本发明的保护范围之内。< / script>

Claims

1. A front-end performance optimization method, characterized in that: include: Collect historical performance data of the front-end page according to the preset collection index, and perform data preprocessing and feature selection on the historical performance data to obtain target performance data; Using the historical performance data to train a pre-established duration prediction model, and using the Hyperopt library to adjust model parameters in the duration prediction model to obtain a trained target duration prediction model; Inputting the target performance data and the initial loading strategy into the target duration prediction model for prediction to obtain the page loading duration, wherein the initial loading strategy includes a page loading mode and a page loading priority; The performance of the front-end page is optimized according to the page loading time and user behavior data.

2. The front-end performance optimization method according to claim 1, characterized in that: The collecting of historical performance data of the front-end page according to the preset collection index includes: Get the performance monitoring code; Inserting the performance monitoring code into the front-end page to be collected; In response to the loading instruction of the front-end page, the performance detection code and the pre-set collection indicators are executed to collect historical performance data, wherein the historical performance data includes at least one of resource loading status, network status information, and CPU and memory usage.

3. The front-end performance optimization method according to claim 1, characterized in that: The performing data preprocessing and feature selection on the historical performance data to obtain target performance data includes: checking the historical performance data for outliers and missing values; Correcting or deleting the abnormal values ​​and the missing values; Standardizing the historical performance data after correcting or deleting the abnormal values ​​and the missing values ​​to obtain standardized performance data; Calculating the weight of each sample feature in the standardized performance data using an ensemble learning algorithm; According to the weight of each sample feature, the correlation between different sample features and the target variable is determined by the Pearson correlation coefficient calculation formula; The target performance data is determined based on the correlation between the different sample characteristics and the target variable.

4. The front-end performance optimization method according to claim 1, characterized in that: The method of using the historical performance data to train a pre-established duration prediction model and using the Hyperopt library to adjust model parameters in the duration prediction model to obtain a trained target duration prediction model includes: Dividing the historical performance data into a training set and a validation set by stratified sampling; A duration prediction model is established by using a machine learning algorithm, and the duration prediction model is trained according to historical data and relevant features of a training set, and model parameters are iteratively optimized to obtain a trained duration prediction model; Using the validation set to evaluate the trained duration prediction model and determine an evaluation result; Determine whether the evaluation result reaches a preset indicator threshold; If the evaluation result reaches the preset indicator threshold, the Hyperopt library is used to adjust the model parameters to obtain a trained target duration prediction model.

5. The front-end performance optimization method according to claim 1, characterized in that: The performance optimization of the front-end page according to the page loading time and user behavior data includes: Determine whether the front-end page needs to be optimized according to the page loading time; When the front-end page needs to be optimized, a preset learning algorithm is used to determine the optimal configuration parameters according to the target performance data and the user behavior data; The performance of the front-end page is optimized according to the optimal configuration parameters.

6. The front-end performance optimization method according to claim 5, characterized in that: The determining whether the front-end page needs to be optimized according to the page loading time includes: Determine whether the page loading time is greater than a preset time threshold; If the page loading time is longer than a preset time threshold, it is determined that the front-end page needs to be optimized.

7. The front-end performance optimization method according to claim 1, characterized in that: After the performance optimization of the front-end page is performed, it includes: The front-end page is monitored in real time according to pre-set monitoring indicators, and the monitoring results are displayed in a visual manner.

8. A front-end performance optimization device, characterized in that: include: The collection module is used to collect the historical performance data of the front-end page according to the preset collection indicators, and perform data preprocessing and feature selection on the historical performance data to obtain the target performance data; A training module, used to perform model training on a pre-established duration prediction model using the historical performance data, and to adjust model parameters using the Hyperopt library in the duration prediction model to obtain a trained target duration prediction model; A prediction module, used for inputting the target performance data and the initial loading strategy into the target duration prediction model to make a prediction and obtain the page loading duration, wherein the initial loading strategy includes a page loading mode and a page loading priority; The optimization module is used to optimize the performance of the front-end page according to the page loading time and user behavior data.

9. A computer device comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, characterized in that: When the processor executes the computer program, the front-end performance optimization method as described in any one of claims 1 to 7 is implemented.

10. A computer-readable storage medium storing a computer program, characterized in that: When the computer program is executed by a processor, the front-end performance optimization method as described in any one of claims 1 to 7 is implemented.

Images