CN114237763B - 提高组件首次加载速度的方法、装置、设备、介质及产品 - Google Patents

Abstract

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

Description

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

技术领域

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

背景技术

当前，前端和后端开发的分离是网站应用开发和APP开发等软件开发过程的主流方式。前端开发，也称为客户端开发，简单来说用户在应用程序或网站屏幕上看到的所有内容都属于前端开发的内容。后端开发，也称为服务器端开发，也就是软件系统“后面”所发生的事情，简单来说，在应用程序或网站屏幕上看不到的所有东西都属于后端。

后端的性能优化一般包括数据库的数据冗余、分区处理、系统负载均衡等内容，而前端的性能优化一般从页面加载渲染优化、浏览器优化、网络优化等方面着手。

页面加载渲染优化是前端性能优化的关注点之一，其中的首页加载优化也得到了很多关注，首页加载的时间过长会导致用户体验不佳。为了减少首页加载时间，软件开发人员提出了多种优化方案，包括减少页面的HTTP请求、使用外部的JavaScript和CSS、精简JavaScript、不在数据定义中定义数据及去除依赖法等。

减少页面的HTTP请求方案通过将多张图片合成来提高页面或组件的加载速度，如图1所示，原本页面中有五张图片，每张图片对应一个HTTP的网络请求，将五张图片合成为一张则只会产生一个HTTP请求，从而加载速度提高。使用外部的JavaScript和CSS方案中，通过让浏览器对外部引入脚本或样式文件进行缓存，也可以提高页面或组件的加载速度。精简JavaScript的方案中，通过从代码中移除不必要的字符如空格、换行、制表符等从而减小文件大小以提高页面加载速度，还可以对可复用函数进行提取从而达到组件复用的效果。不在数据定义中定义数据方案中，通过不在数据定义中声明数据而是在赋值时声明数据来避免数据的依赖收集过程，数据的依赖收集过程非常影响性能，也可以自定义属性方式进行声明，但是无法像在数据定义中声明一样知道数据相关属性。去除依赖法是对数据的属性进行标识，例如在属性前增加‘$’等，可以避免数据的依赖收集，但是标记后的数据就变得不可观测了。

上述方案中，是通过牺牲其它方面如让数据变得复杂不方便理解或不可观测来实现首页加载的优化，并不是在代码层面进行的优化，因此无法在根本上提高性能。

发明内容

本申请实施例提供了一种提高组件首次加载速度的方法、装置、设备、介质及产品，从代码层面对前端组件首次加载的加载速度进行优化。

第一方面，本申请实施例提供了一种提高组件首次加载速度的方法，该方法包括：

获取组件代码，组件代码至少包括计算属性定义代码和数据定义代码；

检查计算属性定义代码，确定计算属性定义代码包括在循环体中使用对象引用关键字访问数据定义代码中数据的情况，则将计算属性定义代码中通过对象引用关键字访问数据定义代码中数据的部分代码修改为通过解构赋值方式访问数据定义代码中数据的代码；

将修改后的组件代码提供给组件解释器执行。

在上述第一方面的一种可能的实现中，组件代码还包括模板定义代码，该方法还包括：

检查模板定义代码中的数据访问代码，确定数据访问代码包括在循环体中访问数据定义代码中数据的情况，则通过修改代码将数据访问代码访问的数据定义为非响应式数据，并在计算属性定义代码中增加相应的数据处理代码。

在上述第一方面的一种可能的实现中，将数据访问代码访问的数据定义为非响应式数据，包括：

在组件生命周期的钩子函数中对数据访问代码访问的数据进行定义。

在上述第一方面的一种可能的实现中，在计算属性定义代码中增加相应的数据处理代码，包括：

在数据定义代码中定义数据处理对象，并在计算属性定义代码中增加用于处理非响应式数据的数据处理函数，数据处理函数的参数为数据处理对象。

在上述第一方面的一种可能的实现中，对象引用关键字为this关键字。

在上述第一方面的一种可能的实现中，将计算属性定义代码中通过对象引用关键字访问数据定义代码中数据的部分代码修改为通过解构赋值方式访问数据定义代码中数据的代码，包括：

将计算属性定义代码中通过对象引用关键字访问的数据定义代码中数据作为计算属性定义代码中对应函数的参数变量，并去除对应函数中使用的对象引用关键字。

在上述第一方面的一种可能的实现中，组件解释器为Vue框架提供的解释器。

本申请实施例提供的方法通过对组件代码中计算属性和模板定义相关代码的调整，可以减少通过对象引用关键字对数据定义中数据进行访问的次数，进而减少触发数据依赖收集的次数，能够降低组件在首次加载过程中的处理时间，从而使得组件在首次加载过程中的加载速度提高。

第二方面，本申请实施例提供了一种提高组件首次加载速度的装置，该装置包括：

获取模块，用于获取组件代码，组件代码至少包括计算属性定义代码和数据定义代码；

计算属性检查模块，用于检查计算属性定义代码，确定计算属性定义代码包括在循环体中使用对象引用关键字访问数据定义代码中数据的情况，则将计算属性定义代码中通过对象引用关键字访问数据定义代码中数据的部分代码修改为通过解构赋值方式访问数据定义代码中数据的代码；

代码提供模块，用于将修改后的组件代码提供给组件解释器执行。

第三方面，本申请实施例提供了一种电子设备，该电子设备包括：

存储器，用于存储由电子设备的一个或多个处理器执行的指令，以及

处理器，是电子设备的处理器之一，用于执行上述第一方面以及第一方面的各种可能实现中的任意一种提高组件首次加载速度的方法。

第四方面，本申请实施例提供了一种可读存储介质，可读存储介质上存储有指令，该指令在电子设备上执行时使电子设备执行上述第一方面以及第一方面的各种可能实现中的任意一种提高组件首次加载速度的方法。

第五方面，本申请实施例提供了一种计算机程序产品，包括计算机程序/指令，其特征在于，该计算机程序/指令被处理器执行时实现上述第一方面以及第一方面的各种可能实现中的任意一种提高组件首次加载速度的方法。

附图说明

图1根据本申请的一些实施例，示出了一种减少页面HTTP请求方案的示意图。

图2根据本申请的一些实施例，示出了一种提高组件首次加载速度的方法的场景示意图。

图3根据本申请的一些实施例，示出了一种首次加载组件页面后相关数据的变化情况的示意图。

图4根据本申请的一些实施例，示出了一种首次加载组件页面后内存使用增长状况的示意图。

图5根据本申请的一些实施例，示出了一种电子设备的硬件结构图。

图6根据本申请的一些实施例，示出了一种提高组件首次加载速度的方法的流程图。

具体实施方式

本申请的说明性实施例包括但不限于提高组件首次加载速度的方法、装置、设备、介质及产品。

可以理解，在本申请各实施例中，处理器可以是微处理器、数字信号处理器、微控制器等，和/或其任何组合。根据另一个方面，所述处理器可以是单核处理器，多核处理器等，和/或其任何组合。

可以理解，本申请的提高组件首次加载速度的方法适用于对用于显示用户界面的组件代码通过组件解释器进行首次加载运行的场景。

下面将结合附图对本申请的实施例作进一步地详细描述。

图2根据本申请的一些实施例，提供了一种对用于前端显示的组件代码通过组件解释器进行首次加载运行的场景。如图2所示，组件解释器200接收提供的组件代码100，组件解释器200对组件代码100进行解释并执行，最后生成组件代码100对应的组件实例300。

随着软件开发技术的不断发展，用于与用户直接进行交互的前端代码和用于实现后台处理功能的后端代码实现了分离，前端代码负责用户界面的模板渲染、数据填充和交互逻辑，后端代码负责向前端代码提供数据。前端代码主要用于展现用户可见的界面，例如浏览网页时接触的所有视觉内容——从字体到颜色，以及下拉菜单和侧边栏等。后端代码是不直接与用户产生关联的代码，用于让服务器、软件应用和数据库进行交互，后端代码涉及到的逻辑代码比前端要多很多。

图2中的组件代码100是前端代码，其中包括前端组件相关的代码，前端组件是前端代码组件化的产物，可以让用户界面例如网站的页面中的各个部分可以被复用，从而减少重复的代码。前端页面可以借助某种前端框架例如Vue.js、Angular、React等实现前端代码的组件化开发，使得前端代码更容易复用。此时，一个页面不再是由一个个独立的HTML、CSS和JavaScript文件组成，而是按照组件的思想将页面划分为一个个组件，例如轮播图组件、列表组件、导航栏组件等，将这些组件拼装在一起，就形成一个完整的页面。

组件代码100中包括模板定义、计算属性定义和数据定义相关的代码，其中模板定义代码用于定义页面组件的模板；计算属性定义代码用于定义页面组件中计算属性的相关内容，计算属性定义代码中包括至少一个与计算相关的函数，函数用于接收输入参数，根据输入参数进行数据处理并返回最后的数据处理结果；数据定义代码用于定义页面组件中使用的数据，可以属性或函数的形式来描述。

可以理解，组件代码100中还可以包括用于实现其它功能的代码，例如CSS样式相关的代码等，本申请实施例中对组件代码100的相关内容代码不做具体限制。

组件解释器200用于接收组件代码100并对组件代码100进行解释并执行，执行前端代码通常以解释的方式进行，组件解释器200不对组件代码100进行预先编译，而是在组件代码100需要运行的时候才将组件代码100翻译为可执行的机器码，组件代码100中的每条语句在执行时被翻译为机器码。

组件实例300是组件解释器200对组件代码100进行解释执行后得到的组件对应的实例，组件代码100中定义了组件相关的信息，但是代码没有执行之前组件只有静态的定义，而没有动态的实例，代码执行时根据静态的组件定义生成了组件实例，组件实例可以提供组件相关的功能，例如显示一个页面、显示页面上的按钮组件等。

为了对组件代码100的首次加载过程中可能存在的性能问题进行分析，本申请实施例中对组件代码100的首次加载过程中数据变化和内存使用增长情况进行了监测。以下以加载Vue框架中任意组件页面代码的过程为例对组件代码100的首次加载过程进行分析。

Vue框架是一套用于构建用户界面的渐进式前端框架，能够实现数据驱动视图，为软件开发人员提供了高效的数据绑定和灵活的组件系统。Vue框架中使用了双向数据绑定技术，即响应式数据绑定，页面中显示的内容会随着其对应数据的变化而变化。为了实现响应式数据绑定，Vue框架记录了Vue组件的显示内容和对应数据之间的依赖关系，对数据进行操作时也同时执行依赖收集的工作，这里Vue组件是用户界面中可复用的界面元素如页面、表单、按钮、选项卡等。

在此，通过谷歌浏览器的Chrome Debugger开发者工具对Vue框架中任意组件页面代码的首次加载过程进行调试。图3示出了首次加载组件页面后相关数据的变化情况，图4示出了首次加载组件页面后内存使用增长状况。如图3和图4所示，图3示出了首次加载组件页面后某段时刻中JavaScript堆内存容量的增加情况，如图中黑色框部分显示内容可知，JavaScript堆内存容量的使用情况是不断上升的。在图3中还可通过勾选JS Heap、Documents、Nodes、Listeners等选项来显示相应数据，对相应数据展示的曲线图进行分析。图4中的数据是随机录制的一段内存使用增长的区域，从图3和图4中可以看出，在内存使用增长的过程中，Observer类相关的代码如defineReactive等被频繁调用。如图4中的黑色框部分的数据所示，defineReactive使用了30％以上的内存空间，Observer类使用的内存空间一次超过5％，一次超过10％，因此可知Observer类因为频繁调用在内存使用中占据了很大的比例，从而使用了很大一部分内存。如果在处理使用canvas画布对象或CSS3样式代码来进行渲染的页面，在监听数据响应变化过程中，Observer类相关的代码的调用会更加频繁。

通过Chrome Debugger开发者工具输出的内容可知，Vue框架中对应Observer类相关代码的调用很频繁，而Observer类相关代码用于监听对象中数据的变化即对应依赖收集工作，频繁调用Observer类相关代码说明依赖收集工作很频繁，因此频繁的依赖收集工作对组件页面的首次加载的性能有很大影响，要提高首次加载的性能，需要对Vue框架中的依赖收集相关情况进行分析。

Vue框架中实现依赖收集主要有三种方式，分别是侦听属性(watch)、计算属性(computed)和订阅者(Watcher)。Vue框架中为每个计算属性提供了取值函数(getter)和存值函数(setter)，通过这两个函数对实现响应式数据绑定的数据进行存取，即数据改变时组件相应内容实时进行变化。类似地，侦听属性同样用于响应数据的变化，如果需要在数据变化时执行异步或开销大的操作，则可以使用侦听属性。另外，Vue框架通过为每个页面组件实例提供对应的订阅者(Watcher)实例及渲染组件的过程，进而实现依赖收集。

另外，Vue框架中提供了用于存储依赖的依赖存储对象，即Dep对象(Dep.target)。Dep对象用于存储Vue组件的方法和数据，target对象是Dep对象的子对象，用于存储依赖相关信息。

依赖收集的实现涉及到对数据的访问，在前端技术中，频繁使用对象引用关键字来对数据进行访问。对象引用关键字例如可以是this关键字。this关键字用来在程序运行过程中引用实例化的对象，是引用实例化对象的一种非常方便的方法。this关键字使用的场合不同，所引用的对象也不同。例如，在函数中使用this关键字，this指的是函数本身；在事件调用中使用this关键字，this指的是事件调用者；在Vue组件内部的数据定义即data函数中使用this关键字，this指的是Vue实例本身。在data函数中定义的各个数据，通过this关键字可以进行访问。类似地，Vue框架中为data函数中定义的数据提供取值函数和存值函数来将数据转换为响应式数据，从而在data函数中定义的数据发生改变时对相应的显示内容进行更新。

在Vue组件的相关代码中，使用this关键字对数据进行访问会造成依赖收集的过程，而过多的依赖收集会造成组件首次加载的加载速度降低，因此，需要对Vue组件中使用this关键字的情况进行分析。Vue组件中使用this关键字对数据定义即data函数中的数据进行访问，会产生对相应数据的取值函数的调用，即产生this.getter形式的调用，在实现依赖收集的三种方式中，this.getter调用的具体实现方式各不相同。

(1)侦听属性(watch属性)中使用this关键字的情况

在watch属性中this.getter形式的调用实际调用的是parsePath函数，其函数参数就是相关的侦听对象。例如，侦听属性的一个实例中定义了两个函数a和a.b.c，执行侦听属性中的代码会使得函数a和a.b.c返回一个函数赋值给this.getter，通过this.getter就可以间接得到this.a和this.a.b.c的值，因此侦听属性中this.getter的使用不会引发多次的依赖收集，从而不会导致组件实例首次加载的加载速度下降。

(2)计算属性(computed属性)中使用this关键字的情况

计算属性中this.getter调用有两种情况，如果计算属性返回的是函数，则this.getter调用得到的结果是函数本身；如果计算属性返回的是对象，则this.getter调用得到的结果是该对象的属性值对应的取值函数。

例如，计算属性的一个实例中定义了函数fun，该函数是计算属性中的依赖，会存储到依赖存储对象Dep.target中，而函数fun中存在以循环方式使用this关键字对data函数中定义的数据a、b、c、d、e进行访问的代码如result+＝this.a[key].num+this.b+this.c等，类似的代码会导致Vue框架触发多次的依赖收集，从而对组件实例首次加载的加载速度造成较大影响。因此，计算属性中滥用this关键字对data函数中定义数据进行访问会对组件实例首次加载的性能造成影响。

(3)订阅者(Watcher)中使用this关键字的情况

Vue组件的订阅者中使用this.getter调用时实际调用的是函数updateComponent，函数updateComponent又调用了函数vm._render，函数vm._render会根据模板定义(即<template>标签中代码)生成渲染函数然后转换成虚拟的文档对象模型即DOM(VNode)。生成的渲染函数会调用代码“with(this)”，该代码的具体形式例如为with(this){a+b}，该形式的代码等同于代码“this.a+this.b”。

通常情况下，每个Vue组件都有模板定义相关的代码，即通过<template>标签定义的模板，模板中可以包括实现页面或组件视图相关的内容。

模板定义中可以使用多种格式对数据进行读取，例如可以使用类似“{{a}}”的格式。模板定义的一个实例中可以包括例如<div v-for＝(item,index)in list>、<div>{{arr[item.index].id}}</div>之类的代码，虽然模板定义中的代码并没有使用this关键字，但是通过v-for定义了对list数组中数据进行for循环读取。Vue框架运行<template>标签中的代码时，会触发调用订阅者的取值函数updateComponent，updateComponent函数中调用的vm._render函数会根据<template>标签中的代码生成渲染函数，而渲染函数中会使用“with(this)”形式的代码去读取数据定义即data中定义的list对象中的数据，即arr数组和obj对象中的数据，通过this关键字对数组数据和对象数据的访问会触发依赖收集工作，通过this关键字的多次数据访问导致多次的依赖收集工作，从而导致组件实例在初始渲染的时候速度降低，进而使得组件实例的首次加载的时间变长。因此，模板定义的代码中使用不当格式对数据定义中数据进行访问，也会对组件实例的首次加载的性能造成影响。

本申请技术方案提供的方法通过对组件代码中计算属性和模板定义相关代码的调整，可以减少通过对象引用关键字对数据定义中数据进行访问的次数，进而减少触发数据依赖收集的次数，能够降低组件在首次加载过程中的处理时间，从而使得组件在首次加载过程中的加载速度提高。

图5根据本申请的一些实施例，示出了一种用于提高组件首次加载速度的方法的电子设备20的硬件结构框图。在图5所示的实施例中，电子设备20可以包括一个或多个处理器201，与处理器201中的至少一个连接的系统控制逻辑202，与系统控制逻辑202连接的系统内存203，与系统控制逻辑202连接的非易失性存储器(Non-Volatile Memory,NVM)204，以及与系统控制逻辑202连接的网络接口206。

在一些实施例中，处理器201可以包括一个或多个单核或多核处理器。在一些实施例中，处理器201可以包括通用处理器和专用处理器(例如，图形处理器，应用处理器，基带处理器等)的任意组合。在电子设备20采用增强型基站(Evolved Node B，eNB)或无线接入网(Radio Access Network，RAN)控制器的实施例中，处理器201可以被配置为执行各种符合的实施例。例如，处理器201可以用于实现提高组件首次加载速度的方法。

在一些实施例中，系统控制逻辑202可以包括任意合适的接口控制器，以向处理器201中至少一个与系统控制逻辑202通信的、任意合适的设备或组件提供任意合适的接口。

在一些实施例中，系统控制逻辑202可以包括一个或多个存储器控制器，以提供连接到系统内存203的接口。系统内存203可以用于加载以及存储数据和/或指令。例如，系统内存203可以加载本申请实施例中的组件相关代码，也可以保存数据定义中的数据等。

在一些实施例中电子设备20的系统内存203可以包括任意合适的易失性存储器，例如合适的动态随机存取存储器(Dynamic Random Access Memory，DRAM)。

NVM存储器204可以包括用于存储数据和/或指令的一个或多个有形的、非暂时性的计算机可读介质。在一些实施例中，NVM存储器204可以包括闪存等任意合适的非易失性存储器和/或任意合适的非易失性存储设备，例如硬盘驱动器(Hard Disk Drive，HDD)，光盘(Compact Disc，CD)驱动器，数字通用光盘(Digital Versatile Disc，DVD)驱动器中的至少一个。在本申请实施例中，NVM存储器204可以用于存储外部的JavaScript文件或CSS样式文件等。

NVM存储器204可以包括安装电子设备20的装置上的一部分存储资源，或者它可以由设备访问，但不一定是设备的一部分。例如，可以经由网络接口206通过网络访问NVM存储器204。

特别地，系统内存203和NVM存储器204可以分别包括：指令205的暂时副本和永久副本。指令205可以包括：由处理器201中的至少一个执行时导致电子设备20实施如图5所示的方法的指令。在一些实施例中，指令205、硬件、固件和/或其软件组件可另外地/替代地置于系统控制逻辑202，网络接口206和/或处理器201中。

网络接口206可以包括收发器，用于为电子设备20提供无线电接口，进而通过一个或多个网络与任意其他合适的设备(如前端模块，天线等)进行通信。在一些实施例中，网络接口206可以集成于电子设备20的其他组件。例如，网络接口206可以集成于处理器201的，系统内存203，NVM存储器204，和具有指令的固件设备(未示出)中的至少一种，当处理器201中的至少一个执行所述指令时，电子设备20实现如方法实施例中示出的方法。在本申请实施例中，网络接口206可以用于接收后端服务器对组件实例的访问请求。

网络接口206可以进一步包括任意合适的硬件和/或固件，以提供多输入多输出无线电接口。例如，网络接口206可以是网络适配器，无线网络适配器，电话调制解调器和/或无线调制解调器。

在一些实施例中，处理器201中的至少一个可以与用于系统控制逻辑202的一个或多个控制器的逻辑封装在一起，以形成系统封装(System In a Package，SiP)。在一些实施例中，处理器201中的至少一个可以与用于系统控制逻辑202的一个或多个控制器的逻辑集成在同一管芯上，以形成片上系统(System on Chip，SoC)。

电子设备20可以进一步包括：输入/输出(I/O)设备207。I/O设备207可以包括用户界面，使得用户能够与电子设备20进行交互；外围组件接口的设计使得外围组件也能够与电子设备20交互。在一些实施例中，电子设备20还包括传感器，用于确定与电子设备20相关的环境条件和位置信息的至少一种。

在一些实施例中，用户界面可包括但不限于显示器(例如，液晶显示器，触摸屏显示器等)，扬声器，麦克风，一个或多个相机(例如，静止图像照相机和/或摄像机)，手电筒(例如，发光二极管闪光灯)和键盘。

在一些实施例中，外围组件接口可以包括但不限于非易失性存储器端口、音频插孔和电源接口。

在一些实施例中，传感器可包括但不限于陀螺仪传感器，加速度计，近程传感器，环境光线传感器和定位单元。定位单元还可以是网络接口206的一部分或与网络接口206交互，以与定位网络的组件(例如，北斗卫星)进行通信。

可以理解的是，图5示意的结构并不构成对电子设备20的具体限定。在本申请另外一些实施例中电子设备20可以包括比图示更多或更少的部件，或者组合某些部件，或者拆分某些部件，或者不同的部件布置。图示的部件可以由硬件或软件，或软件和硬件的组合实现。

下面结合上述图5所示的结构，根据图6并结合具体场景，详细介绍本申请的技术方案。以下以Vue框架中组件页面代码为例对提高组件首次加载速度的方案进行说明。如图6所示，本申请的一些实施例中提高组件首次加载速度的方案包括：

S601：获取组件代码。

在此，首先获取Vue组件代码，Vue组件代码中可以包括多种形式的代码，例如HTML代码、CSS代码、JavaScript代码和Vue框架支持的代码等。Vue组件代码中包括模板定义、计算属性定义和数据定义，这些定义以代码形式表示。

S602：对计算属性定义的代码进行检查，确定所述计算属性定义的代码包括在循环体中使用this关键字的情况，则将通过this关键字访问数据的代码修改为通过解构赋值方式访问数据的代码。

可以理解，对Vue组件代码进行检查，可以通过软件工具对代码以自动化方式进行检查，本申请实施例对检查Vue组件代码的设备不做具体限制。

在此，计算属性定义中包括对函数的声明和定义，函数的定义中包括对数据的处理。仍以上述计算属性的示例代码进行说明。计算属性定义的一个实例中定义了一个函数fun，函数fun中通过循环方式获取数组a的数据例如代码for(let key in this.a)，并根据数组a中每个数据的大小分别将其与不同的变量进行累加例如代码result+＝this.a[key].num+this.b+this.c和result+＝this.a[key].num+this.d+this.e，最后输出累加结果。

通过对上述计算属性定义的代码进行检查，能够确定该代码中包括for关键字定义的循环体，循环体中使用this关键字对数组a和变量b、c、d、e进行访问，由于代码中有在循环体中通过this关键字访问数据的情况，因此上述计算属性定义的代码在执行过程中会触发多次重复的依赖收集工作，从而导致组件首次加载的速度降低。

本申请的一些实施例中，将上述计算属性定义的代码中通过this关键字访问数据的代码修改为通过解构赋值方式访问数据的代码，可以避免触发多次重复的依赖收集。解构赋值是由标准化规范ES6所提出的一种运算方式，可以对数组或对象中的数据进行模式匹配，然后对其中的变量进行对应赋值。标准化规范ES6是由ECMA国际标准化组织制定的一项脚本语言的标准化规范，ES是指ECMAScript，ES6表明是ES标准化规范的第6版。

对于上述计算属性定义的代码，可以在函数处理之前通过解构赋值将需要通过this关键字访问的数据进行解构。通过解构赋值的方式，可以提前将数据定义的代码中定义的变量a、b、c、d、e赋值给函数fun的参数变量a、b、c、d、e，例如使用代码fun({a,b,c,d,e})，对变量进行累加的代码也相应进行了调整，例如使用代码result+＝a[key].num+b+c等，从而使得计算属性在执行时不会触发依赖收集。上述通过解构赋值方式访问数据的代码中，只需要通过this关键字读取一次在数据定义的代码中的数据，只会触发一次依赖收集，避免多次重复触发依赖收集工作，可以提高组件首次加载的加载速度。

S603：对模板定义中数据访问的代码进行检查，确定所述模板定义的代码包括以循环方式读取数据的情况，则修改代码将数据定义为非响应式数据，将数据处理设定到计算属性中，并相应修改模板定义中数据访问代码。

可以理解，S602和S603的执行顺序没有固定的限制，既可以先执行S602，后执行S603，也可以先执行S603，后执行S602，本申请实施例对S602和S603的执行顺序不做具体限制。

在此，Vue组件中的函数Watcher会根据模板定义的代码触发通过this关键字对数据的访问，进而触发依赖收集工作，因此需要对模板定义的代码进行检查，避免造成多次使用this关键字访问数据的情况。

模板定义的一个实例中包括数据访问的相关代码，数据访问的代码例如为<divv-for＝(item,index)in list>、<div>{{arr[item.index].id}}</div>和<div>{{obj[item.index].name}}</div>，即通过v-for以循环方式读取数组arr和对象obj中的数据，因此该模板定义实例中的代码在运行中会触发函数Watcher通过this关键字来访问数据，并且会因为以循环方式通过this关键字访问数据而触发多次重复的依赖收集工作，导致包括上述模板定义的示例代码的组件的首次加载速度变慢。

为避免触发多次重复的依赖收集工作，对模板定义的代码中数据访问的代码进行修改，并将数据定义为非响应式数据和将对数据的处理过程放到计算属性中。

修改后的模板定义代码中的数据访问代码例如为<div v-for＝item in listArr>、<div{{item.name}}</div>和<div>{{item.age}}</div>，其中listArr是一个函数，该函数返回一个数组对象，修改后的数据访问代码通过v-for以循环方式对listArr函数返回的数组对象进行遍历，访问数组中每个对象的name和age属性。

在此，模板定义的代码在运行中获取的数据一般会用到组件页面的渲染过程中，但是通过循环方式获取的列表数据和对象数据是不参与渲染过程的，因此不需要通过with(this)形式的代码来获取数据，可以将需要在模板定义中以循环方式访问的数组或对象在其它地方定义。

本申请的一些实施例中，将模板定义中访问的数据在组件生命周期相关的钩子函数中定义，使得数据成为非响应式数据。在此，vue组件的生命周期是指vue组件从初始化创建到实例销毁的过程，期间会有十个钩子函数的调用。生命周期钩子函数包括：beforeCreate(创建前)、created(创建后)、beforeMount(挂载前)、mounted(挂载后)、beforeUpdate(更新前)、updated(更新后)、activated(激活前)、deactivated(激活后)、beforeDestroy(销毁前)和destroyed(销毁后)。不同的生命周期钩子函数分别对应生命周期的不同阶段，从而实现在不同阶段对数据的处理。

另外，数据被定义为非响应式数据后，对数据的访问就不会触发相应的依赖收集工作。将数组arr和对象obj在钩子函数created中定义，可以使用代码例如this.arr＝[]和this.obj＝{}，钩子函数中定义的数据不会被转为响应式数据。

此外，还需要将相应的数据处理过程在计算属性中进行设定。例如，通过代码data(){return{dataList:[],}可以在数据定义的data函数中定义数据处理的返回参数dataList，并通过代码listArr:function({dataList})在计算属性中定义相应的数据处理函数listArr，并在数据处理函数中访问相应数据。

通过对代码的修改，模板定义的代码在执行时就不会以循环方式多次触发依赖收集，避免降低组件的首次加载过程的加载速度。对于计算属性中的数据，也可以参照上述通过解构赋值进行数据访问的方式进行。

S604：将修改后的代码提供给组件解释器执行。

在此，修改后的代码在代码层面上保证了不会以循环方式多次触发依赖收集工作，将修改后的代码由组件解释器进行执行同样不会触发多次的依赖收集工作。与未修改的组件代码相比，修改后的组件代码在首次加载过程中进行的依赖收集工作的次数更少，能够提高组件首次加载的加载速度。

本申请技术方案提供的方法通过对组件代码中计算属性和模板定义相关代码的调整，可以减少通过this关键字对数据定义中数据进行访问的次数，进而减少触发数据依赖收集的次数，能够降低组件在首次加载过程中的处理时间，从而使得组件在首次加载过程中的加载速度提高。

本申请公开的机制的各实施例可以被实现在硬件、软件、固件或这些实现方法的组合中。本申请的实施例可实现为在可编程系统上执行的计算机程序或程序代码，该可编程系统包括至少一个处理器、存储系统(包括易失性和非易失性存储器和/或存储元件)、至少一个输入设备以及至少一个输出设备。

可将程序代码应用于输入指令，以执行本申请描述的各功能并生成输出信息。可以按已知方式将输出信息应用于一个或多个输出设备。为了本申请的目的，处理系统包括具有诸如例如数字信号处理器(Digital Signal Processor，DSP)、微控制器、专用集成电路(Application Specific Integrated Circuit，ASIC)或微处理器之类的处理器的任何系统。

程序代码可以用高级程序化语言或面向对象的编程语言来实现，以便与处理系统通信。在需要时，也可用汇编语言或机器语言来实现程序代码。事实上，本申请中描述的机制不限于任何特定编程语言的范围。在任一情形下，该语言可以是编译语言或解释语言。

至少一个实施例的一个或多个方面可以由存储在计算机可读存储介质上的表示性指令来实现，指令表示处理器中的各种逻辑，指令在被机器读取时使得该机器制作用于执行本文所述的技术的逻辑。被称为“IP核”的这些表示可以被存储在有形的计算机可读存储介质上，并被提供给多个客户或生产设施以加载到实际制造该逻辑或处理器的制造机器中。

在一些情况下，所公开的实施例可以以硬件、固件、软件或其任何组合来实现。所公开的实施例还可以被实现为由一个或多个暂时或非暂时性机器可读(例如，计算机可读)存储介质承载或存储在其上的指令，其可以由一个或多个处理器读取和执行。例如，指令可以通过网络或通过其他计算机可读介质分发。因此，机器可读介质可以包括用于以机器(例如，计算机)可读的形式存储或传输信息的任何机制，包括但不限于，软盘、光盘、光碟、只读存储器(CD-ROMs)、磁光盘、只读存储器(Read Only Memory，ROM)、随机存取存储器(RandomAccess Memory，RAM)、可擦除可编程只读存储器(Erasable Programmable Read OnlyMemory，EPROM)、电可擦除可编程只读存储器(Electrically Erasable ProgrammableRead-Only Memory，EEPROM)、磁卡或光卡、闪存、或用于利用因特网以电、光、声或其他形式的传播信号来传输信息(例如，载波、红外信号数字信号等)的有形的机器可读存储器。因此，机器可读介质包括适合于以机器(例如计算机)可读的形式存储或传输电子指令或信息的任何类型的机器可读介质。

在附图中，可以以特定布置和/或顺序示出一些结构或方法特征。然而，应该理解，可能不需要这样的特定布置和/或排序。而是，在一些实施例中，这些特征可以以不同于说明性附图中所示的方式和/或顺序来布置。另外，在特定图中包括结构或方法特征并不意味着暗示在所有实施例中都需要这样的特征，并且在一些实施例中，可以不包括这些特征或者可以与其他特征组合。

需要说明的是，本申请各设备实施例中提到的各单元/模块都是逻辑单元/模块，在物理上，一个逻辑单元/模块可以是一个物理单元/模块，也可以是一个物理单元/模块的一部分，还可以以多个物理单元/模块的组合实现，这些逻辑单元/模块本身的物理实现方式并不是最重要的，这些逻辑单元/模块所实现的功能的组合才是解决本申请所提出的技术问题的关键。此外，为了突出本申请的创新部分，本申请上述各设备实施例并没有将与解决本申请所提出的技术问题关系不太密切的单元/模块引入，这并不表明上述设备实施例并不存在其它的单元/模块。

需要说明的是，在本专利的示例和说明书中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个”限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。

虽然通过参照本申请的某些优选实施例，已经对本申请进行了图示和描述，但本领域的普通技术人员应该明白，可以在形式上和细节上对其作各种改变，而不偏离本申请的精神和范围。

Claims (9)

1.一种提高组件首次加载速度的方法，其特征在于，该方法包括：

获取组件代码，其中，所述组件代码至少包括计算属性定义代码、数据定义代码和模板定义代码；

检查所述计算属性定义代码，确定所述计算属性定义代码包括在循环体中使用对象引用关键字访问所述数据定义代码中数据的情况，则将所述计算属性定义代码中通过对象引用关键字访问所述数据定义代码中数据的部分代码修改为通过解构赋值方式访问所述数据定义代码中数据的代码；

检查所述模板定义代码中的数据访问代码，确定所述数据访问代码包括在循环体中访问所述数据定义代码中数据的情况，则通过修改代码将所述数据访问代码访问的数据定义为非响应式数据，并在所述计算属性定义代码中增加相应的数据处理代码；

将修改后的所述组件代码提供给组件解释器执行。

2.根据权利要求1所述的方法，其特征在于，将所述数据访问代码访问的数据定义为非响应式数据，包括：

在组件生命周期的钩子函数中对所述数据访问代码访问的数据进行定义。

3.根据权利要求1所述的方法，其特征在于，在所述计算属性定义代码中增加相应的数据处理代码，包括：

在所述数据定义代码中定义数据处理对象，并在所述计算属性定义代码中增加用于处理所述非响应式数据的数据处理函数，所述数据处理函数的参数为所述数据处理对象。

4.根据权利要求1所述的方法，其特征在于，所述对象引用关键字为this关键字。

5.根据权利要求1所述的方法，其特征在于，将所述计算属性定义代码中通过对象引用关键字访问所述数据定义代码中数据的部分代码修改为通过解构赋值方式访问所述数据定义代码中数据的代码，包括：

将所述计算属性定义代码中通过对象引用关键字访问的所述数据定义代码中数据作为所述计算属性定义代码中对应函数的参数变量，并去除所述对应函数中使用的对象引用关键字。

6.根据权利要求1所述的方法，其特征在于，所述组件解释器为Vue框架提供的解释器。

7.一种提高组件首次加载速度的装置，其特征在于，包括：

获取模块，用于获取组件代码，其中，所述组件代码至少包括计算属性定义代码、数据定义代码和模板定义代码；

计算属性检查模块，用于检查所述计算属性定义代码，确定所述计算属性定义代码包括在循环体中使用对象引用关键字访问所述数据定义代码中数据的情况，则将所述计算属性定义代码中通过对象引用关键字访问所述数据定义代码中数据的部分代码修改为通过解构赋值方式访问所述数据定义代码中数据的代码，并且还用于检查所述模板定义代码中的数据访问代码，确定所述数据访问代码包括在循环体中访问所述数据定义代码中数据的情况，则通过修改代码将所述数据访问代码访问的数据定义为非响应式数据，并在所述计算属性定义代码中增加相应的数据处理代码；

代码提供模块，用于将修改后的所述组件代码提供给组件解释器执行。

8.一种电子设备，其特征在于，包括：

存储器，用于存储由电子设备的一个或多个处理器执行的指令，以及

处理器，是电子设备的处理器之一，用于执行权利要求1-6中任一项所述的提高组件首次加载速度的方法。

9.一种可读存储介质，其特征在于，所述可读存储介质上存储有指令，该指令在电子设备上执行时使电子设备执行权利要求1-6中任一项所述的提高组件首次加载速度的方法。

Images