基于图片融合定位的前端性能优化的方法、系统、终端设备及存储介质与流程

1.本发明涉及计算机系统领域，具体而言，涉及一种基于图片融合定位的前端性能优化的方法、系统、终端设备及存储介质。


背景技术：

2.政务信息化，从理论上说，就是工业时代的政府(即传统政府)向信息时代的政府(即现代政府)演变的过程。具体说，政府信息化就是应用现代信息和通信技术，将管理和服务通过网络技术进行集成，以及对政府需要的和拥有的信息资源的开发和管理，来提高政府的工作效率、决策质量、调控能力、廉洁程度、节约政府开支，改进政府的组织结构、业务流程和工作方式，全方位地向社会民众提供超越时间、空间与部门分隔的限制的优质、规范、透明、符合国际水准的管理和服务。
3.图片融合是指将多张小的图片按照一定规则整合成一张大的图片，在大的图片中可以通过位置信息和大小获取对应的小图。
4.而前端性能是指前端页面从外呼后端服务获取数据到最后渲染出来的整体时间和效率，前端性能对于系统的用户体验起着至关重要的作用。
5.前端渠道是沟通政府和百姓的桥梁，政务系统的信息化需要通过各种前端渠道触达到百姓，为百姓提供办事的便利。前端渠道起到了构建政务信息化的基础，其用户体验关系到百姓对政务系统的评价，而前端性能是影响用户体验的重要因素之一，目前针对存在大量图标的前端渠道，由于图标的加载需要耗费较多的性能，使得用户的相对体验感较差。


技术实现要素：

6.本发明实施例提供一种基于图片融合定位的前端性能优化的方法、系统、终端设备及存储介质。
7.一种基于图片融合定位的前端性能优化的方法，具体步骤包括：
8.首先制作合成大图并生成对应配置文件：包括将当前用到的小图合并成一张大图，获取小图在大图中的位置信息，生成配置文件；
9.外呼获取大图和配置文件：包括加载配置文件，然后根据配置文件生成小图在大图中的位置信息对应的map数据结构，方便查找小图的位置；
10.图形加载：包括在页面初始化代码中，根据指定图片的key值查找其在大图中的信息，随后根据小图的位置信息获取对应的小图片，若获取成功将当前位置的图片替换成对应的小图，获取失败则使用默认图片；
11.页面渲染：包括根据图片的信息对页面进行推送。
12.进一步的：map对象中存放有图片加载地址和图片加载后在内存中的存储地址，所述map对象中的key值为所述图片加载地址，map对象中的value值为所述加载图片的一次加载过程中的加载次数，将所有的map对象存放于list关系表中。
13.进一步的：基于图片融合定位的前端性能优化的系统，包括图片合成模块、配置模块、查找模块、图形加载模块以及页面渲染模块；
14.图片合成模块，用于将小图合成为一张大图；
15.配置模块，用于记录小图在大图中的位置信息，并生成配置信息以供调用；
16.查找模块，根据配置文件生成小图在大图中的位置信息对应的map数据结构来查找小图的位置；
17.图形加载模块，根据指定图片的key值查找其在大图中的信息，随后根据小图的位置信息获取对应的小图片，若获取成功将当前位置的图片替换成对应的小图，获取失败则使用默认图片；
18.页面渲染模块，根据图片的信息对页面进行推送。
19.进一步的：终端设备可以包括：处理器、存储介质和总线，存储介质存储有处理器可执行的机器可读指令，当终端设备运行时，处理器与存储介质之间通过总线通信，处理器执行机器可读指令，以执行时执行如前述实施例中所述的深度学习模型训练方法的步骤。
20.进一步的：一种存储介质，该存储有计算机程序，所述计算机程序被处理器运行时执行上述的方法的步骤。
21.本发明的有益效果：本发明方案通过图片整合和定位的方式，把很多的小图片合并到一张较大的图片里，所以在首次加载页面的时候，就不用加载过多的小图片，只需要加载出来将小图片合并起来的那一张大图片即可，这样在一定程度上提升了页面的加载速度，也一定程度上缓解了服务器的压力，可以在满足业务开发需求的情况下，降低前后端交互的次数，从而提升前端渠道的性能和用户体验。基于图片融合和定位的前端性能优化方案是将前端渠道中用到的大量小图片整合成一张较大的图片，在前端通过小图在大图中的位置信息获取相关的图片，从而实现页面的渲染。该方案可以减少前后端交互的次数，降低网络消耗，从而提升前端性能。
附图说明
22.为了更清楚地说明本发明实施例的技术方案，下面将对实施例中所需要使用的附图作简单地介绍，应当理解，以下附图仅示出了本发明的某些实施例，因此不应被看作是对范围的限定，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他相关的附图。
23.图1示出了本发明方法的流程示意图；
24.图2示出了本发明系统的组成示意图；
25.图3示出了本发明终端设备的组成示意图；
具体实施方式
26.为使本发明实施例的目的、技术方案和优点更加清楚，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，应当理解，本发明中附图仅起到说明和描述的目的，并不用于限定本发明的保护范围。另外，应当理解，示意性的附图并未按实物比例绘制。本发明中使用的流程图示出了根据本发明的一些实施例实现的操作。应该理解，流程图的操作可以不按顺序实现，没有逻辑的上下文关系的步骤可以反转顺
序或者同时实施。此外，本领域技术人员在本发明内容的指引下，可以向流程图添加一个或多个其他操作，也可以从流程图中移除一个或多个操作。
27.另外，本发明所描述的实施例仅仅是本发明的一部分实施例，而不是全部的实施例。通常在此处附图中描述和示出的本发明实施例的组件可以以各种不同的配置来布置和设计。因此，以下对在附图中提供的本发明的实施例的详细描述并非旨在限制要求保护的本发明的范围，而是仅仅表示本发明的选定实施例。基于本发明的实施例，本领域技术人员在没有做出创造性劳动的前提下所获得的所有其他实施例，都属于本发明保护的范围。
28.需要说明的是，本发明实施例中将会用到术语“包括”，用于指出其后所声明的特征的存在，但并不排除增加其它的特征。还应注意到：相似的标号和字母在下面的附图中表示类似项，因此，一旦某一项在一个附图中被定义，则在随后的附图中不需要对其进行进一步定义和解释。在本发明的描述中，还需要说明的是，术语“第一”、“第二”、“第三”等仅用于区分描述，而不能理解为指示或暗示相对重要性。
29.本发明所描述的方法主要在于可以通过将多张小图拼成一张大图，然后在使用阶段根据图片的位置信息获取对应的图片的方式来提升前端性能。在传统的前端渠道开发中，渠道中涉及到的图片都是通过并发外呼的方式来从后台获取，该方式一方面增加了前后端交互的次数，同时也对前端设备的性能存在着巨大的挑战。
30.本方案通过图片整合和定位的方式，把很多的小图片合并到一张较大的图片里，所以在首次加载页面的时候，就不用加载过多的小图片，只需要加载出来将小图片合并起来的那一张大图片即可，这样在一定程度上提升了页面的加载速度，也一定程度上缓解了服务器的压力，可以在满足业务开发需求的情况下，降低前后端交互的次数，从而提升前端渠道的性能和用户体验。
31.应用现代信息和通信技术，将管理和服务通过网络技术进行集成，以及对需求的和拥有的信息资源的开发和管理，来提高工作效率、决策质量、调控能力、廉洁程度、节约开支，改进组织结构、业务流程和工作方式，全方位地提供超越时间、空间与部门分隔的限制的优质、规范、透明、符合国际水准的管理和服务。
32.前端渠道起到了构建信息化的基础，前端性能是影响用户体验的重要因素之一。针对存在大量图标的前端渠道，由于图标的加载需要耗费较多的性能，因此需要提供一种优化方案来提升加载性能。
33.针对本案背景技术中涉及的相关技术名词，结合本实施例进一步进行详述。
34.图片融合：指将多张小的图片按照一定规则整合成一张大的图片，在大的图片中可以通过位置信息和大小获取对应的小图。
35.前端性能：指前端页面从外呼后端服务获取数据到最后渲染出来的整体时间和效率。前端性能对于系统的用户体验起着至关重要的作用。
36.图1示出了本发明方法的步骤流程图。
37.对应的处理流程步骤包括：
38.首先制作合成大图并生成对应配置文件：包括将当前用到的小图合并成一张大图，获取小图在大图中的位置信息，生成配置文件；
39.外呼获取大图和配置文件：包括加载配置文件，然后根据配置文件生成小图在大图中的位置信息对应的map数据结构，方便查找小图的位置，map对象中存放有图片加载地
址和图片加载后在内存中的存储地址，所述map对象中的key值为所述图片加载地址，map对象中的value值为所述加载图片的一次加载过程中的加载次数，将所有的map对象存放于list关系表中；
40.图形加载：包括在页面初始化代码中，根据指定图片的key值查找其在大图中的信息，随后根据小图的位置信息获取对应的小图片，若获取成功将当前位置的图片替换成对应的小图，获取失败则使用默认图片；
41.页面渲染：包括根据图片的信息对页面进行推送。
42.图2示出了本发明方法所对应的系统模块图。
43.本发明所述的系统，包括图片合成模块、配置模块、查找模块、图形加载模块以及页面渲染模块；
44.图片合成模块，用于将小图合成为一张大图；
45.配置模块，用于记录小图在大图中的位置信息，并生成配置信息以供调用；
46.查找模块，根据配置文件生成小图在大图中的位置信息对应的map数据结构来查找小图的位置；
47.图形加载模块，根据指定图片的key值查找其在大图中的信息，随后根据小图的位置信息获取对应的小图片，若获取成功将当前位置的图片替换成对应的小图，获取失败则使用默认图片；
48.页面渲染模块，根据图片的信息对页面进行推送。
49.如图3所示，该终端设备6可以包括：处理器601、存储介质602和总线603，存储介质602存储有处理器601可执行的机器可读指令，当终端设备运行时，处理器601与存储介质602之间通过总线603通信，处理器601执行机器可读指令，以执行时执行如前述实施例中所述的深度学习模型训练方法的步骤。具体实现方式和技术效果类似，在此不再赘述。
50.为了便于说明，在上述终端设备中仅描述了一个处理器。然而，应当注意，一些实施例中，本发明中的终端设备还可以包括多个处理器，因此本发明中描述的一个处理器执行的步骤也可以由多个处理器联合执行或单独执行。
51.以上仅为本发明的具体实施方式，但本发明的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本发明揭露的技术范围内，可轻易想到变化或替换，都应涵盖在本发明的保护范围之内。因此，本发明的保护范围应以权利要求的保护范围为准。