一种页面优化方法、装置及系统与流程

本发明涉及计算机，具体而言，涉及一种页面优化方法、装置及系统。

背景技术：

1、在网页应用开发领域，性能优化是保证用户体验的关键环节。目前，虽然可以利用特定的分析工具生成网页的性能报告，但仍需要开发人员在代码库中手动定位导致性能问题的具体组件、逻辑或资源引用，这个过程不仅效率低下并且依赖开发人员的技术水平与个人经验，其人员成本与技术成本都较高。

技术实现思路

1、有鉴于此，本发明实施例至少提供了一种页面优化方法、装置、电子设备及存储介质，能够通过联合分析性能检测报告与页面源代码，将网页出现的性能问题直接关联至对应的代码片段，并生成性能问题的优化方案，无需人工执行问题定位与修复，降低了页面优化的人力与技术成本，并提高了页面优化效率。

2、第一方面，本发明实施例提供了一种页面优化方法，包括：

3、确定待优化页面的性能检测报告，并根据待优化页面所属的代码仓库地址确定待优化页面对应的页面源代码；

4、将性能检测报告与页面源代码输入至预先训练的人工智能模型，以使人工智能模型输出与性能检测报告中的异常问题对应的代码片段与优化信息；

5、根据异常问题、代码片段与优化信息，生成与待优化页面对应的优化方案。

6、可选地，确定待优化页面的性能检测报告之前，还包括：

7、响应于用户针对待优化页面发起访问请求，读取待优化页面的页面地址；

8、向用户展示信息收集界面；信息收集界面中包括输入框控件与选择器控件，以使用户在信息收集界面中输入或选择用于发起访问请求的设备类型、待优化页面所属的代码仓库地址与分支名称。

9、可选地，将性能检测报告与页面源代码输入至预先训练的人工智能模型，以使人工智能模型输出与性能检测报告中的异常问题对应的代码片段与优化信息；根据异常问题、代码片段与优化信息，生成与待优化页面对应的优化方案，包括：

10、将性能检测报告与页面源代码输入至预先训练的人工智能模型，以使人工智能模型确定与性能检测报告中的异常问题对应的代码片段，并使人工智能模型基于相关性评分在预先嵌入的案例知识库中匹配与异常问题和代码片段关联的历史案例；

11、基于历史案例对应的优化信息模拟异常问题的优化结果，并确定优化后的性能评分；

12、响应于性能评分大于或等于预设阈值，基于异常问题、代码片段与历史案例对应的优化信息，生成与待优化页面对应的优化方案；

13、响应于性能评分小于预设阈值，基于异常问题、代码片段、人工智能模型针对待优化页面输出的优化信息以及历史案例对应的优化信息，生成待优化页面对应的优化方案。

14、第二方面，本发明实施例提供了一种页面优化系统，包括客户端、服务端、页面检测单元、性能分析单元与代码获取单元；其中，

15、客户端响应于用户发起针对待优化页面的访问请求，采集发起访问请求的设备类型、待优化页面的页面地址、分支名称与所属的代码仓库地址；

16、服务端用于根据页面地址与设备类型，从性能分析单元获取待优化页面的性能检测报告，并根据待优化页面所属的代码仓库地址与分支名称，从代码获取单元确定待优化页面对应的页面源代码；将性能检测报告与页面源代码发送至页面检测单元，接收页面检测单元返回的待优化页面对应的优化方案；

17、页面检测单元用于调用预先训练的人工智能模型，将性能检测报告与页面源代码作为人工智能模型的输入数据，以确定与性能检测报告中的异常问题对应的代码片段与优化信息；根据异常问题、代码片段与优化信息，生成与待优化页面对应的优化方案，并将优化方案发送至服务端；

18、性能分析单元用于根据服务端发送的设备类型与待优化页面的页面地址，对待优化页面进行性能检测，生成性能检测报告并将性能检测报告发送至服务端；

19、代码获取单元用于根据服务端发送的待优化页面所属的代码仓库地址与待优化页面的分支名称，获取待优化页面的页面源代码，并将页面源代码返回至服务端。

20、可选地，服务端还用于根据待优化页面的分支名称，确定与待优化页面对应的提示词模板；基于性能检测报告、页面源代码与提示词模板，构建待优化页面的检测提示信息。

21、可选地，优化信息包括优化建议与优化代码示例；

22、页面检测单元还用于接收服务端发送的检测提示信息；根据检测提示信息中的页面源代码以及性能检测报告中的异常问题，对待优化页面进行代码分析，确定导致异常问题的代码片段；基于代码片段生成与异常问题对应的优化建议，并生成与代码片段对应的优化代码示例；按照检测提示信息中指示的目标格式整合异常问题、代码片段、优化建议与优化代码示例，以得到待优化页面的优化方案。

23、可选地，客户端还用于接收页面检测单元返回的优化方案，基于优化方案构建方案展示页面，并将方案展示页面展示给用户；

24、其中，方案展示页面中包括第一区域与第二区域；第一区域中包括待优化页面的异常问题列表以及与用户在异常问题列表中选中的目标问题对应的优化信息；第二区域中包括待优化页面的性能评分以及各异常问题对应的异常结果。

25、第三方面，本发明实施例提供了一种页面优化装置，包括：

26、确定模块，用于确定待优化页面的性能检测报告，并根据待优化页面所属的代码仓库地址确定待优化页面对应的页面源代码；

27、分析模块，用于将性能检测报告与页面源代码输入至预先训练的人工智能模型，以使人工智能模型输出与性能检测报告中的异常问题对应的代码片段与优化信息；

28、生成模块，用于根据异常问题、代码片段与优化信息，生成与待优化页面对应的优化方案。

29、第四方面，本发明实施例还提供一种电子设备，包括：处理器、存储器和总线，存储器存储有处理器可执行的机器可读指令，当计算机设备运行时，处理器与存储器之间通过总线通信，机器可读指令被处理器执行时执行上述第一方面，或第一方面中任一种可选的实施方式中的步骤。

30、第五方面，本发明实施例还提供一种计算机可读存储介质，该计算机可读存储介质上存储有计算机程序，该计算机程序被处理器运行时执行上述第一方面，或第一方面中任一种可选的实施方式中的步骤。

31、第六方面，本发明实施例还提供一种计算机程序产品，包括计算机程序，计算机程序在被处理器执行时实现上述任一实施例的方法。

32、上述任一方面或任一方面的任一实施方式，可以先获取待优化页面的性能检测报告以及待优化页面对应的页面源代码。其中，可以由性能分析工具针对页面加载过程进行检测得到性能检测报告，报告中可以包含首屏渲染时间、资源加载耗时、脚本执行耗时、页面交互延迟、网络请求情况等性能指标。而后可以将性能检测报告与页面源代码共同输入至页面检测单元进行关联分析。页面检测单元可以利用预先训练的人工智能模型，基于性能检测报告中记载的异常问题，从页面源代码中检索与异常问题对应的代码逻辑、资源引用关系、组件调用关系以及页面执行链路，分析导致性能指标异常的根本代码原因，并确定与异常问题对应的代码片段。例如，当性能检测报告显示页面加载时间过长时，可进一步定位导致加载延迟的图片资源加载代码、冗余脚本代码或重复请求代码；当性能检测报告显示脚本执行时间过长时，可进一步定位对应的高复杂度计算逻辑或低效循环代码。在完成异常问题与代码片段的关联定位后，可以利用上述人工智能模型对代码片段进行优化分析，生成对应的优化信息，其中可以包括问题产生原因、优化策略、优化建议以及优化后的代码实现方式。最后可以根据异常问题、代码片段与优化信息生成待优化页面对应的优化方案，使优化方案能够同时给出性能问题、问题所在代码位置以及对应的修复措施。通过将性能检测报告与页面源代码进行联合分析，实现了从性能异常发现、问题定位到优化建议生成的自动化处理过程，能够直接将页面出现的性能问题关联至具体代码片段，无需开发人员人工排查页面逻辑、逐步定位问题原因以及手动制定修复方案，从而降低了页面优化过程中的人力与技术成本，提高了性能问题的定位效率以及页面优化效率。

33、上述页面优化装置、电子设备及存储介质的有益效果参见上述页面优化方法的说明，此处不再赘述。