提高组件首次加载速度的方法、装置、设备、介质及产品制造方法及图纸

本申请涉及数据处理技术领域，公开了一种提高组件首次加载速度的方法、装置、设备、介质及产品。本申请的提高组件首次加载速度的方法，通过对组件代码中计算属性和模板定义相关代码的调整，可以减少通过对象引用关键字对数据定义中数据进行访问的次数，进而减少触发数据依赖收集的次数，能够降低组件在首次加载过程中的处理时间，从而使得组件在首次加载过程中的加载速度提高。中的加载速度提高。中的加载速度提高。

【技术实现步骤摘要】
提高组件首次加载速度的方法、装置、设备、介质及产品


[0001]本申请涉及数据处理
，特别涉及一种提高组件首次加载速度的方法、装置、设备、介质及产品。

技术介绍

[0002]当前，前端和后端开发的分离是网站应用开发和APP开发等软件开发过程的主流方式。前端开发，也称为客户端开发，简单来说用户在应用程序或网站屏幕上看到的所有内容都属于前端开发的内容。后端开发，也称为服务器端开发，也就是软件系统“后面”所发生的事情，简单来说，在应用程序或网站屏幕上看不到的所有东西都属于后端。
[0003]后端的性能优化一般包括数据库的数据冗余、分区处理、系统负载均衡等内容，而前端的性能优化一般从页面加载渲染优化、浏览器优化、网络优化等方面着手。
[0004]页面加载渲染优化是前端性能优化的关注点之一，其中的首页加载优化也得到了很多关注，首页加载的时间过长会导致用户体验不佳。为了减少首页加载时间，软件开发人员提出了多种优化方案，包括减少页面的HTTP请求、使用外部的JavaScript和CSS、精简JavaScript、不在数据定义中定义数据及去除依赖法等。
[0005]减少页面的HTTP请求方案通过将多张图片合成来提高页面或组件的加载速度，如图1所示，原本页面中有五张图片，每张图片对应一个HTTP的网络请求，将五张图片合成为一张则只会产生一个HTTP请求，从而加载速度提高。使用外部的JavaScript和CSS方案中，通过让浏览器对外部引入脚本或样式文件进行缓存，也可以提高页面或组件的加载速度。精简JavaScript的方案中，通过从代码中移除不必要的字符如空格、换行、制表符等从而减小文件大小以提高页面加载速度，还可以对可复用函数进行提取从而达到组件复用的效果。不在数据定义中定义数据方案中，通过不在数据定义中声明数据而是在赋值时声明数据来避免数据的依赖收集过程，数据的依赖收集过程非常影响性能，也可以自定义属性方式进行声明，但是无法像在数据定义中声明一样知道数据相关属性。去除依赖法是对数据的属性进行标识，例如在属性前增加
‘
$
’
等，可以避免数据的依赖收集，但是标记后的数据就变得不可观测了。
[0006]上述方案中，是通过牺牲其它方面如让数据变得复杂不方便理解或不可观测来实现首页加载的优化，并不是在代码层面进行的优化，因此无法在根本上提高性能。

技术实现思路

[0007]本申请实施例提供了一种提高组件首次加载速度的方法、装置、设备、介质及产品，从代码层面对前端组件首次加载的加载速度进行优化。
[0008]第一方面，本申请实施例提供了一种提高组件首次加载速度的方法，该方法包括：
[0009]获取组件代码，组件代码至少包括计算属性定义代码和数据定义代码；
[0010]检查计算属性定义代码，确定计算属性定义代码包括在循环体中使用对象引用关键字访问数据定义代码中数据的情况，则将计算属性定义代码中通过对象引用关键字访问
数据定义代码中数据的部分代码修改为通过解构赋值方式访问数据定义代码中数据的代码；
[0011]将修改后的组件代码提供给组件解释器执行。
[0012]在上述第一方面的一种可能的实现中，组件代码还包括模板定义代码，该方法还包括：
[0013]检查模板定义代码中的数据访问代码，确定数据访问代码包括在循环体中访问数据定义代码中数据的情况，则通过修改代码将数据访问代码访问的数据定义为非响应式数据，并在计算属性定义代码中增加相应的数据处理代码。
[0014]在上述第一方面的一种可能的实现中，将数据访问代码访问的数据定义为非响应式数据，包括：
[0015]在组件生命周期的钩子函数中对数据访问代码访问的数据进行定义。
[0016]在上述第一方面的一种可能的实现中，在计算属性定义代码中增加相应的数据处理代码，包括：
[0017]在数据定义代码中定义数据处理对象，并在计算属性定义代码中增加用于处理非响应式数据的数据处理函数，数据处理函数的参数为数据处理对象。
[0018]在上述第一方面的一种可能的实现中，对象引用关键字为this关键字。
[0019]在上述第一方面的一种可能的实现中，将计算属性定义代码中通过对象引用关键字访问数据定义代码中数据的部分代码修改为通过解构赋值方式访问数据定义代码中数据的代码，包括：
[0020]将计算属性定义代码中通过对象引用关键字访问的数据定义代码中数据作为计算属性定义代码中对应函数的参数变量，并去除对应函数中使用的对象引用关键字。
[0021]在上述第一方面的一种可能的实现中，组件解释器为Vue框架提供的解释器。
[0022]本申请实施例提供的方法通过对组件代码中计算属性和模板定义相关代码的调整，可以减少通过对象引用关键字对数据定义中数据进行访问的次数，进而减少触发数据依赖收集的次数，能够降低组件在首次加载过程中的处理时间，从而使得组件在首次加载过程中的加载速度提高。
[0023]第二方面，本申请实施例提供了一种提高组件首次加载速度的装置，该装置包括：
[0024]获取模块，用于获取组件代码，组件代码至少包括计算属性定义代码和数据定义代码；
[0025]计算属性检查模块，用于检查计算属性定义代码，确定计算属性定义代码包括在循环体中使用对象引用关键字访问数据定义代码中数据的情况，则将计算属性定义代码中通过对象引用关键字访问数据定义代码中数据的部分代码修改为通过解构赋值方式访问数据定义代码中数据的代码；
[0026]代码提供模块，用于将修改后的组件代码提供给组件解释器执行。
[0027]第三方面，本申请实施例提供了一种电子设备，该电子设备包括：
[0028]存储器，用于存储由电子设备的一个或多个处理器执行的指令，以及
[0029]处理器，是电子设备的处理器之一，用于执行上述第一方面以及第一方面的各种可能实现中的任意一种提高组件首次加载速度的方法。
[0030]第四方面，本申请实施例提供了一种可读存储介质，可读存储介质上存储有指令，
该指令在电子设备上执行时使电子设备执行上述第一方面以及第一方面的各种可能实现中的任意一种提高组件首次加载速度的方法。
[0031]第五方面，本申请实施例提供了一种计算机程序产品，包括计算机程序/指令，其特征在于，该计算机程序/指令被处理器执行时实现上述第一方面以及第一方面的各种可能实现中的任意一种提高组件首次加载速度的方法。
附图说明
[0032]图1根据本申请的一些实施例，示出了一种减少页面HTTP请求方案的示意图。
[0033]图2根据本申请的一些实施例，示出了一种提高组件首次加载速度的方法的场景示意图。
[0034]图3根据本申请的一些实施例，示出了一种首次加载组件页面后相关数据的变化情况的示意图。
[0035]图4根据本申请的一些实施例，示出了一种首次加载组件页面后内存使用增长状况的示意图本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种提高组件首次加载速度的方法，其特征在于，该方法包括：获取组件代码，其中，所述组件代码至少包括计算属性定义代码和数据定义代码；检查所述计算属性定义代码，确定所述计算属性定义代码包括在循环体中使用对象引用关键字访问所述数据定义代码中数据的情况，则将所述计算属性定义代码中通过对象引用关键字访问所述数据定义代码中数据的部分代码修改为通过解构赋值方式访问所述数据定义代码中数据的代码；将修改后的所述组件代码提供给组件解释器执行。2.根据权利要求1所述的方法，其特征在于，所述组件代码还包括模板定义代码，该方法还包括：检查所述模板定义代码中的数据访问代码，确定所述数据访问代码包括在循环体中访问所述数据定义代码中数据的情况，则通过修改代码将所述数据访问代码访问的数据定义为非响应式数据，并在所述计算属性定义代码中增加相应的数据处理代码。3.根据权利要求2所述的方法，其特征在于，将所述数据访问代码访问的数据定义为非响应式数据，包括：在组件生命周期的钩子函数中对所述数据访问代码访问的数据进行定义。4.根据权利要求2所述的方法，其特征在于，在所述计算属性定义代码中增加相应的数据处理代码，包括：在所述数据定义代码中定义数据处理对象，并在所述计算属性定义代码中增加用于处理所述非响应式数据的数据处理函数，所述数据处理函数的参数为所述数据处理对象。5.根据权利要求1所述的方法，其特征在于，所述对象引用关键字为this关键字。6.根据权利要求1所述的方法，其特征在于，将所述计算属性定义代码中通过对象引用关键字访问所述数据定义代码中数据的部分代码修改为通过解构赋值方式访问所...

【专利技术属性】
技术研发人员：李钦坚，邓玉，胡仲强，谢潇宇，
申请(专利权)人：建信金融科技有限责任公司，
类型：发明
国别省市：