CN114282233A - Web性能优化方法、装置、计算机设备和存储介质 - Google Patents

Abstract

本申请涉及一种WEB性能优化方法、装置、计算机设备、存储介质和计算机程序产品，通过获取对目标页面的访问请求，当访问请求合法时，并采用预设编码方式对访问请求进行编码处理，得到编码后的编码字符串，基于当前时间以及随机码对编码字符串进行加密处理，得到访问请求的目标字符串，进而向服务器发送访问请求的目标字符串。由于本实施例中进行编码的算法简单，因此，具有较快的加解密速度，从而可以有效提高请求的响应速度；又由于用于加密处理的随机码是随机生成的，且当前时间又是唯一的，因此，进一步提高了算法的安全性，实现了对响应速度及安全性的优化。

Description

WEB性能优化方法、装置、计算机设备和存储介质

技术领域

本申请涉及计算机技术领域，特别是涉及一种基于VUE的WEB性能优化方法、装置、计算机设备、存储介质和计算机程序产品。

背景技术

近几年，Web前端应用以其开发成本低、跨平台、上线速度快等特点，一直保持着高速成长状态，并且已经渗透到人们生活的各个方面。人们可以通过浏览网站查询信息、在线购物、在线学习等，还有很多的传统行业和传统软件的Web化，在这些需求的推动下，网站所提供的功能也越来越丰富。随着前端技术的迅速发展，Web应用不仅需要能够满足用户的需求，而且需要能够接近Native应用(原生APP)的交互体验，这就对网站性能提出了更高的要求。

前端性能优化是Web应用优化的一部分，是从用户请求资源到资源完整展现的过程中，通过技术手段缩短每个步骤的处理时间以提升资源的访问和呈现速度。传统的前端性能优化方案主要包括：①HTML(Hyper Text Markup Language，超文本标记语言)优化，即通过减小HTML文档的大小进行优化；②CSS(Cascading Style Sheets，层叠样式表)优化，包括减少使用CSS表达式、将CSS代码放在页面的顶部等方式进行优化；③JavaScript(一种具有函数优先的轻量级，解释型或即时编译型的编程语言)优化，其通过最小化DOM(Document Object Model，文档对象模型)的访问，并且将JS(JavaScript)代码作为外部文件引用的方式进行优化；④图片大小优化，即通过不在HTML中使用缩放图片等方案进行优化。

然而，随着Web前端开发技术的演变，各种开发框架不断涌现，如出现了Vue(一套用于构建用户界面的渐进式框架)等轻量级前端开发框架，因此，传统的性能优化方法也不再适用于这些Web开发框架。且目前前端性能的优化方法大多数都是从局部出发，而没有综合考虑影响前端性能的多种因素，导致最终的优化效果并不理想。

发明内容

基于此，有必要针对上述技术问题，提供一种优化效果较好的的基于VUE的WEB性能优化方法、装置、计算机设备、计算机可读存储介质和计算机程序产品。

第一方面，本申请提供了一种WEB性能优化方法。所述方法包括：

获取对目标页面的访问请求，所述目标页面是基于VUE框架构建的用户界面；

当所述访问请求合法时，采用预设编码方式对所述访问请求进行编码处理，得到编码后的编码字符串；

基于当前时间以及随机码对所述编码字符串进行加密处理，得到所述访问请求的目标字符串，所述随机码随机产生；

向服务器发送所述访问请求的目标字符串，以使所述服务器根据与所述预设的编码方式对应的解码方式对所述目标字符串进行解码处理，得到对应的访问请求，并根据所述访问请求返回所述目标页面的数据文件。

在其中一个实施例中，所述基于当前时间以及随机码对所述编码字符串进行加密处理，得到所述访问请求的目标字符串，包括：基于当前时间生成对应的干扰信息，将所述干扰信息按预设拼接方式与所述编码字符串进行第一拼接，得到对应的拼接字符串；采用所述随机码对所述拼接字符串进行向上偏移处理，得到对应的偏移字符串；将所述随机码按预设位置与所述偏移字符串进行第二拼接，得到目标字符串。

在其中一个实施例中，所述方法还包括：接收所述服务器返回的所述目标页面的报文密文，所述报文密文是所述服务器对所述目标页面的数据报文进行编码加密处理后得到；采用预设的解密方式对所述报文密文进行解密处理，得到解密后的解密字符串；对所述解密字符串进行解码处理，得到所述报文密文对应的目标页面的数据报文；根据所述数据报文加载页面内容，以及根据所述页面内容进行渲染得到目标页面并展示。

在其中一个实施例中，所述采用预设的解密方式对所述报文密文进行解密处理，得到解密后的解密字符串，包括：从所述报文密文的预设位置提取随机码，并删除所述报文密文中的随机码，得到第一字符串；采用所述随机码对所述第一字符串进行向下偏移处理，得到偏移处理后的第二字符串；识别所述第二字符串中的干扰信息，并删除所述干扰信息，得到解密后的解密字符串。

在其中一个实施例中，所述获取对目标页面的访问请求之后，所述方法还包括：当所述访问请求不合法时，展示身份验证页面，以通过所述身份验证页面获取用户信息进行验证。

在其中一个实施例中，所述方法还包括：接收页面文件，所述页面文件包括页面的静态信息、超文本标记语言结构信息和内容信息；采用Gzip工具对所述页面的静态信息、超文本标记语言结构信息和内容信息进行压缩处理并存储。

在其中一个实施例中，所述获取对目标页面的访问请求之前，所述方法还包括：获取所述目标页面的配置文件，所述配置文件包括若干个页面组件，所述页面组件是注册在VUE中进行集中管理的组件。

在其中一个实施例中，所述根据所述数据报文加载页面内容，包括：发送页面内容加载请求，所述页面内容加载请求中携带有对应页面内容文件的至少一个目标域名；从至少一个目标域名对应的内容分发网络中获取对应的页面内容文件。

在其中一个实施例中，所述页面内容包括图片；所述根据所述数据报文加载页面内容，包括：根据所述数据报文获取当前可视窗口内的图片进行加载；以及，当所述图片未能成功加载时，加载预置图片。

在其中一个实施例中，所述根据所述数据报文加载页面内容，包括：识别所述数据报文对应的计算属性，根据所述计算属性加载页面内容。

第二方面，本申请还提供了一种WEB性能优化装置。所述装置包括：

访问请求获取模块，用于获取对目标页面的访问请求，所述目标页面是基于VUE框架构建的用户界面；

编码模块，用于当所述访问请求合法时，采用预设编码方式对所述访问请求进行编码处理，得到编码后的编码字符串；

加密模块，用于基于当前时间以及随机码对所述编码字符串进行加密处理，得到所述访问请求的目标字符串，所述随机码随机产生；

发送模块，用于向服务器发送所述访问请求的目标字符串，以使所述服务器根据与所述预设的编码方式对应的解码方式对所述目标字符串进行解码处理，得到对应的访问请求，并根据所述访问请求返回所述目标页面的数据报文。

第三方面，本申请还提供了一种计算机设备。所述计算机设备包括存储器和处理器，所述存储器存储有计算机程序，所述处理器执行所述计算机程序时实现如上第一方面所述方法的步骤。

第四方面，本申请还提供了一种计算机可读存储介质。所述计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现如上第一方面所述方法的步骤。

第五方面，本申请还提供了一种计算机程序产品。所述计算机程序产品，包括计算机程序，该计算机程序被处理器执行时实现如上第一方面所述方法的步骤。

上述WEB性能优化方法、装置、计算机设备、存储介质和计算机程序产品，通过获取对目标页面的访问请求，当访问请求合法时，并采用预设编码方式对访问请求进行编码处理，得到编码后的编码字符串，基于当前时间以及随机码对编码字符串进行加密处理，得到访问请求的目标字符串，进而向服务器发送访问请求的目标字符串。由于本实施例中进行编码的算法简单，因此，具有较快的加解密速度，从而可以有效提高请求的响应速度；又由于用于加密处理的随机码是随机生成的，且当前时间又是唯一的，因此，就算对于相同的访问请求进行多次加密处理，其得到的密文也各不相同，从而进一步提高了算法的安全性，实现了对响应速度及安全性的优化。

附图说明

图1为一个实施例中WEB性能优化方法的应用环境图；

图2为一个实施例中WEB性能优化方法的流程示意图；

图3为一个实施例中对编码字符串进行加密处理步骤的流程示意图；

图4为另一个实施例中WEB性能优化方法的流程示意图；

图5为一个实施例中对报文密文进行解密处理步骤的流程示意图；

图6为一个实施例中加载页面内容步骤的流程示意图；

图7为一个实施例中WEB性能优化装置的结构框图；

图8为一个实施例中计算机设备的内部结构图。

具体实施方式

为了使本申请的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本申请进行进一步详细说明。应当理解，此处描述的具体实施例仅仅用以解释本申请，并不用于限定本申请。

本申请实施例提供的WEB性能优化方法，可以应用于如图1所示的应用环境中。其中，终端102通过网络与服务器104进行通信。数据存储***可以存储服务器104需要处理的数据。数据存储***可以集成在服务器104上，也可以放在云上或其他网络服务器上。具体地，终端102可以但不限于是各种个人计算机、笔记本电脑、智能手机、平板电脑、物联网设备和便携式可穿戴设备等。服务器104可以用独立的服务器或者是多个服务器组成的服务器集群来实现。

在一个实施例中，如图2所示，提供了一种WEB性能优化方法，以该方法应用于图1中的终端为例进行说明，包括以下步骤：

步骤202，获取对目标页面的访问请求。

其中，目标页面是用户请求的基于VUE框架构建的用户界面。访问请求是指用户通过浏览器发起的访问目标页面的请求，例如，其具体可以是HTTP(Hyper Text TransferProtocol，超文本传输协议)请求。在本实施例中，当用户需要访问页面时，则可以通过浏览器发起对具体页面(即目标页面)的访问请求，终端则可以获取对应的访问请求。

步骤204，当访问请求合法时，采用预设编码方式对访问请求进行编码处理，得到编码后的编码字符串。

通常，为了保障数据传输的安全性，终端在与服务器进行数据交互时，一般会对数据进行加密后传输。又由于复杂的加解密算法会耗费较长时间，从而影响请求的响应速度。基于此，在保障数据传输安全性的同时，为了进一步提高请求的响应速度，本实施例中，终端获取到目标页面的访问请求后，通过对访问请求的合法性进行校验，当确认访问请求合法时，则采用预设编码方式对该访问请求进行编码处理，得到编码后的编码字符串。其中，合法性校验可以是对发起访问请求的用户身份或用户权限进行校验，例如，当用户身份有效或用户具有相应的访问权限时，则认为该访问请求合法，如果用户身份无效或用户并不具有对应的访问权限时，则认为该访问请求不合法。而预设编码方式是指预先设置的用于对访问请求进行编码，以隐藏明文的数据处理方式，如Base64(基于64个可打印字符来表示二进制数据)编码方式。编码字符串则是采用预设编码方式对访问请求进行编码处理后得到的编码结果，例如，若预设的编码方式为采用Base64编码两次，则采用Base64对访问请求进行编码两次，即可得到编码后的编码字符串。

步骤206，基于当前时间以及随机码对编码字符串进行加密处理，得到访问请求的目标字符串。

其中，随机码是随机产生的数，如通过JS方法生成的随机数。当前时间则是指当前需要进行加密处理的时间。加密处理是以某种特殊的算法改变原有的信息数据，使得未授权的用户即使获得了已加密的信息，但因不知解密的方法，仍然无法了解信息的内容的一种处理方式。具体地，本实施例中的加密处理可以是预先设置的一种加密信息的方式。目标字符串则是对上述得到的编码字符串进行加密处理后得到的加密结果。在本实施例中，通过采用当前时间以及随机码对上述得到的编码字符串进行加密处理，从而得到访问请求的目标字符串。

步骤208，向服务器发送访问请求的目标字符串。

具体地，终端通过向服务器发送对访问请求进行加密处理后的目标字符串，从而保障了数据传输的安全性。进而使得服务器可以根据与预设的编码方式对应的解码方式对目标字符串进行解码处理，以得到对应的访问请求，并根据访问请求返回目标页面的数据报文。

上述WEB性能优化方法中，通过获取对目标页面的访问请求，当访问请求合法时，采用预设编码方式对访问请求进行编码处理，得到编码后的编码字符串，基于当前时间以及随机码对编码字符串进行加密处理，得到访问请求的目标字符串，进而向服务器发送访问请求的目标字符串。由于本实施例中进行编码的算法简单，因此，具有较快的加解密速度，从而可以有效提高请求的响应速度；又由于用于加密处理的随机码是随机生成的，且当前时间又是唯一的，因此，就算对于相同的访问请求进行多次加密处理，其得到的密文也各不相同，从而提高了算法的安全性，实现了对响应速度及安全性的优化。

在一个实施例中，如图3所示，上述基于当前时间以及随机码对编码字符串进行加密处理，得到访问请求的目标字符串，具体可以包括如下步骤：

步骤302，基于当前时间生成对应的干扰信息，将干扰信息按预设拼接方式与编码字符串进行第一拼接，得到对应的拼接字符串。

其中，干扰信息是在加密过程中增加的噪声。具体地，干扰信息可以是基于当前时间生成的，例如，可以根据当前时间生成对应的时间序列号，从而将时间序列号作为干扰信息。预设的拼接方式是指预先设置或预先约定的进行拼接的顺序，例如，将干扰信息拼接在编码字符串之前或之后，或者将干扰信息的一部分拼接在编码字符串之前，另一部分拼接在编码字符串之后等。本实施例以干扰信息为16位的时间序列为例，其对应的拼接方式为将干扰信息的前8位拼接在编码字符串之前，后8位拼接在编码字符串之后为例来说。则终端可以基于当前时间生成16位的时间序列，并将时间序列的前8位拼接在编码字符串之前，后8位拼接在编码字符串之后，从而得到对应的拼接字符串。

步骤304，采用随机码对拼接字符串进行向上偏移处理，得到对应的偏移字符串。

具体地，通过生成的随机码对上述得到的拼接字符串进行向上偏移处理，从而得到对应的偏移字符串。

步骤306，将随机码按预设位置与偏移字符串进行第二拼接，得到目标字符串。

其中，预设位置是指预先设置或预先约定的拼接随机码的位置，例如，可以将随机码拼接在偏移字符串的最后，也可以将随机码拼接在偏移字符串的最前面，或者还可以将随机码拼接在偏移字符串中的指定位置，如拼接在偏移字符串的第5位后。本实施例以预设位置为偏移字符串的最后为例来说，则终端在通过上述处理得到对应的偏移字符串后，将随机码拼接到该偏移字符串的最后，从而得到进行第二拼接后的目标字符串，也即得到对访问请求进行编码加密后的目标字符串。

上述实施例中，基于当前时间生成对应的干扰信息，将干扰信息按预设拼接方式与编码字符串进行第一拼接，得到对应的拼接字符串，并采用随机码对拼接字符串进行向上偏移处理，得到对应的偏移字符串，进而将随机码按预设位置与偏移字符串进行第二拼接，得到目标字符串，由于本实施例基于干扰信息及随机码对访问请求的编码字符串进行再次混淆加密处理，从而进一步提高了算法的安全性。

在一个实施例中，如图4所示，在向服务器发送访问请求的目标字符串之后，上述方法还可以包括以下步骤：

步骤402，接收服务器返回的目标页面的报文密文。

其中，报文密文是服务器根据访问请求对应的目标页面的数据报文进行编码加密处理后得到，例如，编码加密可以是上述图2所示终端对访问请求相同的处理方式。在本实施例中，当用户需要访问页面时，则可以通过终端的浏览器向服务器发起对具体页面(即目标页面)的访问请求，进而还可以接收服务器根据访问请求返回的目标页面的报文密文。可以理解的是，为了保障数据传输的安全性，终端和服务器在进行数据交互时，一般会对数据进行加密处理后传输，因此，无论是终端还是服务器，其在传输数据时可以采用约定的编码加密处理方式对数据进行编码加密后传输。

步骤404，采用预设的解密方式对报文密文进行解密处理，得到解密后的解密字符串。

其中，预设的解密方式可以是终端与服务器之间约定的解密方式。在本实施例中，以服务器采用的编码加密为上述图2所示的对访问请求相同的处理方式为例来说，则本实施例的预设的解密方式是与上述加密方式相对应的方式，具体地，解密方式是加密方式的逆方式。解密字符串则是对报文密文进行解密处理后得到的解密结果。在本实施例中，终端通过采用与加密处理对应的解密方式对报文密文进行解密处理，从而得到解密后的解密字符串。

步骤406，对解密字符串进行解码处理，得到报文密文对应的目标页面的数据报文。

其中，解码处理是与上述编码处理方式相对应的方式，具体地，解码方式是编码处理方式的逆方式。具体地，终端通过采用与编码处理对应的解码方式对上述得到的解密字符串进行解码处理，从而得到报文密文对应的目标页面的数据报文。具体地，数据报文是服务器传输的目标页面的相关报文。

步骤408，根据数据报文加载页面内容，以及根据页面内容进行渲染得到目标页面并展示。

具体地，终端根据上述解码得到的数据报文加载页面内容，进而根据页面内容进行渲染以得到目标页面并展示。

上述WEB性能优化方法中，通过接收服务器返回的目标页面的报文密文，并采用预设的解密方式对报文密文进行解密处理，得到解密后的解密字符串，进而对解密字符串进行解码处理，得到报文密文对应的目标页面的数据报文，以根据数据报文加载页面内容，以及根据页面内容进行渲染得到目标页面并展示。由于本实施例中进行解码的算法简单，因此，具有较快的解密速度，从而可以有效提高响应速度；又由于进行解码和解密的方式均是双方事先约定的，因此提高了算法的安全性，实现了对响应速度及安全性的优化。

在一个实施例中，如图5所示，上述采用预设的解密方式对报文密文进行解密处理，得到解密后的解密字符串，具体可以包括以下步骤：

步骤502，从报文密文的预设位置提取随机码，并删除目标字符串中的随机码，得到第一字符串。

其中，预设位置是指预先设置或预先约定的拼接随机码的位置。例如，报文密文的首位或末位。在本实施例中，以预设位置为报文密文的末位为例来说，则终端从报文密文的末位提取随机码，并删除报文密文中的随机码，即删除报文密文的末位，从而得到第一字符串。

步骤504，采用随机码对第一字符串进行向下偏移处理，得到偏移处理后的第二字符串。

如果服务器在加密过程中是采用随机码进行向上偏移处理，则终端在进行逆处理时，采用随机码对上述得到的第一字符串进行向下偏移处理，从而得到偏移处理后的第二字符串，也即采用与服务器处理的逆处理方式。

步骤506，识别第二字符串中的干扰信息，并删除干扰信息，得到解密后的解密字符串。

如果拼接字符串是服务器将干扰信息按预设拼接方式拼接处理后得到的。则在本实施例中，基于预设拼接方式可以识别第二字符串中的干扰信息，进而可以删除识别到的干扰信息，从而得到解密后的解密字符串。

举例来说，若以上述干扰信息为16位的时间序列为例，其对应的拼接方式为将干扰信息的前8位拼接在前，后8位拼接在后为例来说。则终端基于该拼接方式，识别到第二字符串的前8位和后8位均为干扰信息，从而删除第二字符串的前8位和后8位，以得到解密后的解密字符串。

上述实施例中，通过从报文密文的预设位置提取随机码，并删除报文密文中的随机码，得到第一字符串，采用随机码对第一字符串进行向下偏移处理，得到偏移处理后的第二字符串，识别第二字符串中的干扰信息，并删除干扰信息，从而得到解密后的解密字符串，由于本实施例基于干扰信息及随机码混淆加密的逆方式进行处理，从而进一步提高了算法的安全性。

在一个实施例中，上述获取对目标页面的访问请求之后，还可以包括：当访问请求不合法时，展示身份验证页面，以通过身份验证页面获取用户信息进行验证。

由于合法性校验是对发起访问请求的用户身份或用户权限进行校验，例如，当用户身份有效或用户具有相应的访问权限时，则认为该访问请求合法，如果用户身份无效或用户并不具有对应的访问权限时，则认为该访问请求不合法。因此，在本实施例中，可以使用路由拦截与路由守卫来检验用户登录状态以确认访问请求是否合法。例如，可以在路由跳转时，即用户从一个页面跳转至另一个页面之前进行登录状态验证，若用户没有登录或者用户登录已失效则先使用原型链方法唤起注册在全局的登录弹窗组件(即身份验证页面)，用户登录成功后再进行下一步操作。从而从全局上解决了请求校验的问题，开发人员在开发代码时也不用考虑登录状态校验问题，只用专注于业务逻辑开发即可。具体实施步骤如下

(1)安装：

npm install vue-router

(2)使用router.beforeEach注册一个全局前置守卫：

(3)业务开发：

在一个实施例中，上述方法还可以包括：接收页面文件，其中，页面文件包括页面的静态信息、超文本标记语言结构信息和内容信息，采用Gzip(是若干种文件压缩程序的简称，用于文件的压缩处理)工具对页面的静态信息、超文本标记语言结构信息和内容信息进行压缩处理并存储。

具体地，VUE在打包时可以开启Gzip压缩文件，从而对同一页面的静态信息、超文本标记语言结构信息和页面的内容信息进行压缩处理并存储，从而减少页面文件的存储体积，同时也可以提高页面加载速度，带来更好的用户体验。又由于Gzip具有较高的压缩效率，通常可以达到70％的压缩率，因此使用Gzip压缩可以减少页面文件数据包的大小，提升页面的加载速度。相关步骤如下：

(1)安装:

npm install compression--save

(2)添加代码逻辑：

var compression＝require('compression')；

var app＝express()；

app.use(compression())

在一个实施例中，上述获取对目标页面的访问请求之前，还可以包括：获取目标页面的配置文件，其中，配置文件包括若干个页面组件，而页面组件是注册在VUE中进行集中管理的组件。

具体地，通过将全局组件注册在VUE的配置文件中来进行统一管理，因此对功能一样的组件可以进行复用。另外，通过使用keep-alive(VUE提供的一个比较抽象的组件)，可以在组件被隐藏且需要重复打开时使用缓存对组件的信息进行缓存，从而避免二次打开组件时重新渲染该组件，以节省性能。此外，还可以进行组件的动态加载，通常项目的首页往往采用了多种组件，且要求页面中某一部分是动态的、支持可配置的。而如果无论该组件是否使用，都被加载，就会严重降低页面的渲染速度。因此，可以使用动态加载组件的思想，当组件被需要的时候才会加载。动态加载组件在页面渲染时不会加载该组件的相关信息，只有需要该组件时才会重新渲染DOM加载该组件，其具体可以通过VUE的虚拟DOM及双向绑定原理来实现。

在一个实施例中，如图6所示，根据数据报文加载页面内容，具体还可以包括：

步骤602，发送页面内容加载请求。

其中，页面内容加载请求是指终端基于页面渲染所需要的资源而与服务器进行交互以获取相应资源的请求。具体地，页面内容加载请求中携带有对应页面内容文件的至少一个目标域名。

步骤604，从至少一个目标域名对应的内容分发网络获取对应的页面内容文件。

由于终端在加载页面内容时，一般需要从服务器上下载对应的页面内容文件，如CSS、js和图片等文件。而大部分服务器的带宽有限，如果超过限制，就会导致网页反应迟缓。而内容分发网络(Content Delivery Network，简称CDN)可以通过不同的域名来加载文件，从而使下载文件的并发连接数大大增加。

基于此，在实际应用中，可以将项目中的资源文件放入CDN。另外CDN服务器的域名一般有多种，这样设计主要是考虑到浏览器同一域名下并发请求的限制。例如：样式文本文件和图片文件可以使用不同的CDN域名。因此，本实施例中的页面内容加载请求中可以携带有对应页面内容文件的至少一个目标域名，即携带至少一CDN域名，进而可以与至少一个CDN连接，以并发请求数据，从而提高页面内容的加载速度，另外，由于CDN具有更低的网络延迟和丢包率，因此，具有更好的可用性。

在一个实施例中，上述页面内容包括图片，则根据数据报文加载页面内容，具体包括：根据数据报文获取当前可视窗口内的图片进行加载；以及，当图片未能成功加载时，加载预置图片。

具体地，在本实施例中，对于图片过多的页面，可以根据当前可视窗口加载可视窗口内的图片资源，而对于不在当前可视窗口内的资源则不加载，从而可以提高加载速度。此处，可以通过设置默认图片(即预置图片)的方式来替代没有加载出来的图片，从而提高页面加载性能，同时由于加载速度的提高也提高了用户体验。

在具体应用时，可以使用vue-lazyload插件，具体步骤如下：

(1)安装插件；

npm install vue-lazyload--save-dev

(2)在入口文件man.js中引入并使用；

(3)在vue文件中将img标签的src属性直接改为v-lazy，从而将图片显示方式更改为懒加载显示。

在一个实施例中，上述根据数据报文加载页面内容，具体还可以包括：识别数据报文对应的计算属性，根据计算属性加载页面内容。

具体地，可以基于不同的场景选择使用不同的计算属性computed或watch。例如，当需要进行数值计算，并且依赖于其它数据时，即一个属性是由其他属性计算而来的，这个属性依赖其他属性时，可以使用computed的计算属性，因此可以利用computed的缓存特性，避免每次获取数值时，都要重新计算。而当需要在数据变化时执行异步或开销较大的操作时，即当一个属性发生变化时，需要执行对应的操作，则可以使用watch的计算属性。

在一个实施例中，还可以采用VUE条件判断优化，其具体可以基于不同的使用场景而采用不同的指令，如v-if或v-show。其中v-if适用于在运行时很少改变条件，不需要频繁切换条件的场景。v-show则适用于需要非常频繁切换条件的场景。例如，若页面元素只会显示或隐藏不会被再次改变显示状态，即通过后端接口数据控制页面某个元素是否显示或隐藏，且后续不变化，此时用v-if合适；而如果页面元素会频繁的改变显示状态，即页面中有一个按钮，点击按钮来控制某个元素的显示或隐藏，则此时用v-show合适。

进一步地，在列表数据进行遍历渲染时，需要为每一项item设置唯一key值，方便Vue.js内部机制精准找到该条列表数据。v-for比v-if优先级高，如果每一次都需要遍历整个数组，将会影响速度，尤其是当之需要渲染很小一部分的时候，必要情况下应该替换成computed属性，因为computed支持缓存，只有依赖数据发生改变，才会重新进行计算。因此，v-for遍历可以为item添加key，且避免同时使用v-if(可以在eslint中配置使用规则，避免v-for和v-if同时使用)。

进一步地，在VUE中，定义在data里面的数据每次变化时都会通知视图层重新渲染页面。所以如果不是视图所需要的变量，可以不定义在data中，可以在外部定义变量或直接挂载在VUE实例上，以避免造成资源浪费。

应该理解的是，虽然如上所述的各实施例所涉及的流程图中的各个步骤按照箭头的指示依次显示，但是这些步骤并不是必然按照箭头指示的顺序依次执行。除非本文中有明确的说明，这些步骤的执行并没有严格的顺序限制，这些步骤可以以其它的顺序执行。而且，如上所述的各实施例所涉及的流程图中的至少一部分步骤可以包括多个步骤或者多个阶段，这些步骤或者阶段并不必然是在同一时刻执行完成，而是可以在不同的时刻执行，这些步骤或者阶段的执行顺序也不必然是依次进行，而是可以与其它步骤或者其它步骤中的步骤或者阶段的至少一部分轮流或者交替地执行。

基于同样的发明构思，本申请实施例还提供了一种用于实现上述所涉及的WEB性能优化方法的WEB性能优化装置。该装置所提供的解决问题的实现方案与上述方法中所记载的实现方案相似，故下面所提供的一个或多个WEB性能优化装置实施例中的具体限定可以参见上文中对于WEB性能优化方法的限定，在此不再赘述。

在一个实施例中，如图7所示，提供了一种WEB性能优化装置，包括：访问请求获取模块702、编码模块704、加密模块706和发送模块708，其中：

访问请求获取模块702，用于获取对目标页面的访问请求，所述目标页面是基于VUE框架构建的用户界面；

编码模块704，用于当所述访问请求合法时，采用预设编码方式对所述访问请求进行编码处理，得到编码后的编码字符串；

加密模块706，用于基于当前时间以及随机码对所述编码字符串进行加密处理，得到所述访问请求的目标字符串，所述随机码随机产生；

发送模块708，用于向服务器发送所述访问请求的目标字符串，以使所述服务器根据与所述预设的编码方式对应的解码方式对所述目标字符串进行解码处理，得到对应的访问请求，并根据所述访问请求返回所述目标页面的数据报文。

在一个实施例中，所述加密模块具体用于：基于当前时间生成对应的干扰信息，将所述干扰信息按预设拼接方式与所述编码字符串进行第一拼接，得到对应的拼接字符串；采用所述随机码对所述拼接字符串进行向上偏移处理，得到对应的偏移字符串；将所述随机码按预设位置与所述偏移字符串进行第二拼接，得到目标字符串。

在一个实施例中，上述装置还包括：

报文密文接收模块，用于接收所述服务器返回的所述目标页面的报文密文，所述报文密文是所述服务器对所述目标页面的数据报文进行编码加密处理后得到；

解密模块，用于采用预设的解密方式对所述报文密文进行解密处理，得到解密后的解密字符串；

解码模块，用于对所述解密字符串进行解码处理，得到所述报文密文对应的目标页面的数据报文；

页面加载模块，用于根据所述数据报文加载页面内容，以及根据所述页面内容进行渲染得到目标页面并展示。

在一个实施例中，上述解密模块具体用于：从所述报文密文的预设位置提取随机码，并删除所述报文密文中的随机码，得到第一字符串；采用所述随机码对所述第一字符串进行向下偏移处理，得到偏移处理后的第二字符串；识别所述第二字符串中的干扰信息，并删除所述干扰信息，得到解密后的解密字符串。

在一个实施例中，所述装置还包括验证模块，用于当所述访问请求不合法时，展示身份验证页面，以通过所述身份验证页面获取用户信息进行验证。

在一个实施例中，所述装置还包括压缩处理模块，用于接收页面文件，所述页面文件包括页面的静态信息、超文本标记语言结构信息和内容信息；采用Gzip工具对所述页面的静态信息、超文本标记语言结构信息和内容信息进行压缩处理并存储。

在一个实施例中，所述装置还包括组件配置模块，用于获取所述目标页面的配置文件，所述配置文件包括若干个页面组件，所述页面组件是注册在VUE中进行集中管理的组件。

在一个实施例中，所述页面加载模块还用于：发送页面内容加载请求，所述页面内容加载请求中携带有对应页面内容文件的至少一个目标域名；从至少一个目标域名对应的内容分发网络中获取对应的页面内容文件。

在一个实施例中，所述页面内容包括图片，所述页面加载模块还用于：根据所述数据报文获取当前可视窗口内的图片进行加载；以及，当所述图片未能成功加载时，加载预置图片。

在一个实施例中，所述页面加载模块还用于：识别所述数据报文对应的计算属性，根据所述计算属性加载页面内容。

上述WEB性能优化装置中的各个模块可全部或部分通过软件、硬件及其组合来实现。上述各模块可以硬件形式内嵌于或独立于计算机设备中的处理器中，也可以以软件形式存储于计算机设备中的存储器中，以便于处理器调用执行以上各个模块对应的操作。

在一个实施例中，提供了一种计算机设备，该计算机设备可以是终端，其内部结构图可以如图8所示。该计算机设备包括通过***总线连接的处理器、存储器、通信接口、显示屏和输入装置。其中，该计算机设备的处理器用于提供计算和控制能力。该计算机设备的存储器包括非易失性存储介质、内存储器。该非易失性存储介质存储有操作***和计算机程序。该内存储器为非易失性存储介质中的操作***和计算机程序的运行提供环境。该计算机设备的通信接口用于与外部的终端进行有线或无线方式的通信，无线方式可通过WIFI、移动蜂窝网络、NFC(近场通信)或其他技术实现。该计算机程序被处理器执行时以实现一种WEB性能优化方法。该计算机设备的显示屏可以是液晶显示屏或者电子墨水显示屏，该计算机设备的输入装置可以是显示屏上覆盖的触摸层，也可以是计算机设备外壳上设置的按键、轨迹球或触控板，还可以是外接的键盘、触控板或鼠标等。

本领域技术人员可以理解，图8中示出的结构，仅仅是与本申请方案相关的部分结构的框图，并不构成对本申请方案所应用于其上的计算机设备的限定，具体的计算机设备可以包括比图中所示更多或更少的部件，或者组合某些部件，或者具有不同的部件布置。

在一个实施例中，提供了一种计算机设备，包括存储器和处理器，存储器中存储有计算机程序，该处理器执行计算机程序时实现以下步骤：

获取对目标页面的访问请求，所述目标页面是基于VUE框架构建的用户界面；

当所述访问请求合法时，采用预设编码方式对所述访问请求进行编码处理，得到编码后的编码字符串；

基于当前时间以及随机码对所述编码字符串进行加密处理，得到所述访问请求的目标字符串，所述随机码随机产生；

向服务器发送所述访问请求的目标字符串，以使所述服务器根据与所述预设的编码方式对应的解码方式对所述目标字符串进行解码处理，得到对应的访问请求，并根据所述访问请求返回所述目标页面的数据报文。

在一个实施例中，处理器执行计算机程序时还实现以下步骤：基于当前时间生成对应的干扰信息，将所述干扰信息按预设拼接方式与所述编码字符串进行第一拼接，得到对应的拼接字符串；采用所述随机码对所述拼接字符串进行向上偏移处理，得到对应的偏移字符串；将所述随机码按预设位置与所述偏移字符串进行第二拼接，得到目标字符串。

在一个实施例中，处理器执行计算机程序时还实现以下步骤：接收所述服务器返回的所述目标页面的报文密文，所述报文密文是所述服务器对所述目标页面的数据报文进行编码加密处理后得到；采用预设的解密方式对所述报文密文进行解密处理，得到解密后的解密字符串；对所述解密字符串进行解码处理，得到所述报文密文对应的目标页面的数据报文；根据所述数据报文加载页面内容，以及根据所述页面内容进行渲染得到目标页面并展示。

在一个实施例中，处理器执行计算机程序时还实现以下步骤：从所述报文密文的预设位置提取随机码，并删除所述报文密文中的随机码，得到第一字符串；采用所述随机码对所述第一字符串进行向下偏移处理，得到偏移处理后的第二字符串；识别所述第二字符串中的干扰信息，并删除所述干扰信息，得到解密后的解密字符串。

在一个实施例中，处理器执行计算机程序时还实现以下步骤：当所述访问请求不合法时，展示身份验证页面，以通过所述身份验证页面获取用户信息进行验证。

在一个实施例中，处理器执行计算机程序时还实现以下步骤：接收页面文件，所述页面文件包括页面的静态信息、超文本标记语言结构信息和内容信息；采用Gzip工具对所述页面的静态信息、超文本标记语言结构信息和内容信息进行压缩处理并存储。

在一个实施例中，处理器执行计算机程序时还实现以下步骤：获取所述目标页面的配置文件，所述配置文件包括若干个页面组件，所述页面组件是注册在VUE中进行集中管理的组件。

在一个实施例中，处理器执行计算机程序时还实现以下步骤：发送页面内容加载请求，所述页面内容加载请求中携带有对应页面内容文件的至少一个目标域名；从至少一个目标域名对应的内容分发网络中获取对应的页面内容文件。

在一个实施例中，处理器执行计算机程序时还实现以下步骤：根据所述数据报文获取当前可视窗口内的图片进行加载；以及，当所述图片未能成功加载时，加载预置图片。

在一个实施例中，处理器执行计算机程序时还实现以下步骤：识别所述数据报文对应的计算属性，根据所述计算属性加载页面内容。

在一个实施例中，提供了一种计算机可读存储介质，其上存储有计算机程序，计算机程序被处理器执行时实现以下步骤：

获取对目标页面的访问请求，所述目标页面是基于VUE框架构建的用户界面；

当所述访问请求合法时，采用预设编码方式对所述访问请求进行编码处理，得到编码后的编码字符串；

基于当前时间以及随机码对所述编码字符串进行加密处理，得到所述访问请求的目标字符串，所述随机码随机产生；

向服务器发送所述访问请求的目标字符串，以使所述服务器根据与所述预设的编码方式对应的解码方式对所述目标字符串进行解码处理，得到对应的访问请求，并根据所述访问请求返回所述目标页面的数据报文。

在一个实施例中，计算机程序被处理器执行时还实现以下步骤：基于当前时间生成对应的干扰信息，将所述干扰信息按预设拼接方式与所述编码字符串进行第一拼接，得到对应的拼接字符串；采用所述随机码对所述拼接字符串进行向上偏移处理，得到对应的偏移字符串；将所述随机码按预设位置与所述偏移字符串进行第二拼接，得到目标字符串。

在一个实施例中，计算机程序被处理器执行时还实现以下步骤：接收所述服务器返回的所述目标页面的报文密文，所述报文密文是所述服务器对所述目标页面的数据报文进行编码加密处理后得到；采用预设的解密方式对所述报文密文进行解密处理，得到解密后的解密字符串；对所述解密字符串进行解码处理，得到所述报文密文对应的目标页面的数据报文；根据所述数据报文加载页面内容，以及根据所述页面内容进行渲染得到目标页面并展示。

在一个实施例中，计算机程序被处理器执行时还实现以下步骤：从所述报文密文的预设位置提取随机码，并删除所述报文密文中的随机码，得到第一字符串；采用所述随机码对所述第一字符串进行向下偏移处理，得到偏移处理后的第二字符串；识别所述第二字符串中的干扰信息，并删除所述干扰信息，得到解密后的解密字符串。

在一个实施例中，计算机程序被处理器执行时还实现以下步骤：当所述访问请求不合法时，展示身份验证页面，以通过所述身份验证页面获取用户信息进行验证。

在一个实施例中，计算机程序被处理器执行时还实现以下步骤：接收页面文件，所述页面文件包括页面的静态信息、超文本标记语言结构信息和内容信息；采用Gzip工具对所述页面的静态信息、超文本标记语言结构信息和内容信息进行压缩处理并存储。

在一个实施例中，计算机程序被处理器执行时还实现以下步骤：获取所述目标页面的配置文件，所述配置文件包括若干个页面组件，所述页面组件是注册在VUE中进行集中管理的组件。

在一个实施例中，计算机程序被处理器执行时还实现以下步骤：发送页面内容加载请求，所述页面内容加载请求中携带有对应页面内容文件的至少一个目标域名；从至少一个目标域名对应的内容分发网络中获取对应的页面内容文件。

在一个实施例中，计算机程序被处理器执行时还实现以下步骤：根据所述数据报文获取当前可视窗口内的图片进行加载；以及，当所述图片未能成功加载时，加载预置图片。

在一个实施例中，计算机程序被处理器执行时还实现以下步骤：识别所述数据报文对应的计算属性，根据所述计算属性加载页面内容。

在一个实施例中，提供了一种计算机程序产品，包括计算机程序，该计算机程序被处理器执行时实现以下步骤：

获取对目标页面的访问请求，所述目标页面是基于VUE框架构建的用户界面；

当所述访问请求合法时，采用预设编码方式对所述访问请求进行编码处理，得到编码后的编码字符串；

基于当前时间以及随机码对所述编码字符串进行加密处理，得到所述访问请求的目标字符串，所述随机码随机产生；

向服务器发送所述访问请求的目标字符串，以使所述服务器根据与所述预设的编码方式对应的解码方式对所述目标字符串进行解码处理，得到对应的访问请求，并根据所述访问请求返回所述目标页面的数据报文。

在一个实施例中，计算机程序被处理器执行时还实现以下步骤：基于当前时间生成对应的干扰信息，将所述干扰信息按预设拼接方式与所述编码字符串进行第一拼接，得到对应的拼接字符串；采用所述随机码对所述拼接字符串进行向上偏移处理，得到对应的偏移字符串；将所述随机码按预设位置与所述偏移字符串进行第二拼接，得到目标字符串。

在一个实施例中，计算机程序被处理器执行时还实现以下步骤：接收所述服务器返回的所述目标页面的报文密文，所述报文密文是所述服务器对所述目标页面的数据报文进行编码加密处理后得到；采用预设的解密方式对所述报文密文进行解密处理，得到解密后的解密字符串；对所述解密字符串进行解码处理，得到所述报文密文对应的目标页面的数据报文；根据所述数据报文加载页面内容，以及根据所述页面内容进行渲染得到目标页面并展示。

在一个实施例中，计算机程序被处理器执行时还实现以下步骤：从所述报文密文的预设位置提取随机码，并删除所述报文密文中的随机码，得到第一字符串；采用所述随机码对所述第一字符串进行向下偏移处理，得到偏移处理后的第二字符串；识别所述第二字符串中的干扰信息，并删除所述干扰信息，得到解密后的解密字符串。

在一个实施例中，计算机程序被处理器执行时还实现以下步骤：当所述访问请求不合法时，展示身份验证页面，以通过所述身份验证页面获取用户信息进行验证。

在一个实施例中，计算机程序被处理器执行时还实现以下步骤：接收页面文件，所述页面文件包括页面的静态信息、超文本标记语言结构信息和内容信息；采用Gzip工具对所述页面的静态信息、超文本标记语言结构信息和内容信息进行压缩处理并存储。

在一个实施例中，计算机程序被处理器执行时还实现以下步骤：获取所述目标页面的配置文件，所述配置文件包括若干个页面组件，所述页面组件是注册在VUE中进行集中管理的组件。

在一个实施例中，计算机程序被处理器执行时还实现以下步骤：发送页面内容加载请求，所述页面内容加载请求中携带有对应页面内容文件的至少一个目标域名；从至少一个目标域名对应的内容分发网络中获取对应的页面内容文件。

在一个实施例中，计算机程序被处理器执行时还实现以下步骤：根据所述数据报文获取当前可视窗口内的图片进行加载；以及，当所述图片未能成功加载时，加载预置图片。

在一个实施例中，计算机程序被处理器执行时还实现以下步骤：识别所述数据报文对应的计算属性，根据所述计算属性加载页面内容。

需要说明的是，本申请所涉及的用户信息(包括但不限于用户设备信息、用户个人信息等)和数据(包括但不限于用于分析的数据、存储的数据、展示的数据等)，均为经用户授权或者经过各方充分授权的信息和数据。

本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，所述的计算机程序可存储于一非易失性计算机可读取存储介质中，该计算机程序在执行时，可包括如上述各方法的实施例的流程。其中，本申请所提供的各实施例中所使用的对存储器、数据库或其它介质的任何引用，均可包括非易失性和易失性存储器中的至少一种。非易失性存储器可包括只读存储器(Read-OnlyMemory，ROM)、磁带、软盘、闪存、光存储器、高密度嵌入式非易失性存储器、阻变存储器(ReRAM)、磁变存储器(Magnetoresistive Random Access Memory，MRAM)、铁电存储器(Ferroelectric Random Access Memory，FRAM)、相变存储器(Phase Change Memory，PCM)、石墨烯存储器等。易失性存储器可包括随机存取存储器(Random Access Memory，RAM)或外部高速缓冲存储器等。作为说明而非局限，RAM可以是多种形式，比如静态随机存取存储器(Static Random Access Memory，SRAM)或动态随机存取存储器(Dynamic RandomAccess Memory，DRAM)等。本申请所提供的各实施例中所涉及的数据库可包括关系型数据库和非关系型数据库中至少一种。非关系型数据库可包括基于区块链的分布式数据库等，不限于此。本申请所提供的各实施例中所涉及的处理器可为通用处理器、中央处理器、图形处理器、数字信号处理器、可编程逻辑器、基于量子计算的数据处理逻辑器等，不限于此。

以上实施例的各技术特征可以进行任意的组合，为使描述简洁，未对上述实施例中的各个技术特征所有可能的组合都进行描述，然而，只要这些技术特征的组合不存在矛盾，都应当认为是本说明书记载的范围。

以上所述实施例仅表达了本申请的几种实施方式，其描述较为具体和详细，但并不能因此而理解为对本申请专利范围的限制。应当指出的是，对于本领域的普通技术人员来说，在不脱离本申请构思的前提下，还可以做出若干变形和改进，这些都属于本申请的保护范围。因此，本申请的保护范围应以所附权利要求为准。

Claims (14)

1.一种WEB性能优化方法，其特征在于，所述方法包括：

获取对目标页面的访问请求，所述目标页面是基于VUE框架构建的用户界面；

当所述访问请求合法时，采用预设编码方式对所述访问请求进行编码处理，得到编码后的编码字符串；

基于当前时间以及随机码对所述编码字符串进行加密处理，得到所述访问请求的目标字符串，所述随机码随机产生；

向服务器发送所述访问请求的目标字符串，以使所述服务器根据与所述预设的编码方式对应的解码方式对所述目标字符串进行解码处理，得到对应的访问请求，并根据所述访问请求返回所述目标页面的数据报文。

2.根据权利要求1所述的方法，其特征在于，所述基于当前时间以及随机码对所述编码字符串进行加密处理，得到所述访问请求的目标字符串，包括：

基于当前时间生成对应的干扰信息，将所述干扰信息按预设拼接方式与所述编码字符串进行第一拼接，得到对应的拼接字符串；

采用所述随机码对所述拼接字符串进行向上偏移处理，得到对应的偏移字符串；

将所述随机码按预设位置与所述偏移字符串进行第二拼接，得到目标字符串。

3.根据权利要求1所述的方法，其特征在于，所述方法还包括：

接收所述服务器返回的所述目标页面的报文密文，所述报文密文是所述服务器对所述目标页面的数据报文进行编码加密处理后得到；

采用预设的解密方式对所述报文密文进行解密处理，得到解密后的解密字符串；

对所述解密字符串进行解码处理，得到所述报文密文对应的目标页面的数据报文；

根据所述数据报文加载页面内容，以及根据所述页面内容进行渲染得到目标页面并展示。

4.根据权利要求3所述的方法，其特征在于，所述采用预设的解密方式对所述报文密文进行解密处理，得到解密后的解密字符串，包括：

从所述报文密文的预设位置提取随机码，并删除所述报文密文中的随机码，得到第一字符串；

采用所述随机码对所述第一字符串进行向下偏移处理，得到偏移处理后的第二字符串；

识别所述第二字符串中的干扰信息，并删除所述干扰信息，得到解密后的解密字符串。

5.根据权利要求1至4任一项所述的方法，其特征在于，所述获取对目标页面的访问请求之后，所述方法还包括：

当所述访问请求不合法时，展示身份验证页面，以通过所述身份验证页面获取用户信息进行验证。

6.根据权利要求1至4任一项所述的方法，其特征在于，所述方法还包括：

接收页面文件，所述页面文件包括页面的静态信息、超文本标记语言结构信息和内容信息；

采用Gzip工具对所述页面的静态信息、超文本标记语言结构信息和内容信息进行压缩处理并存储。

7.根据权利要求1至4任一项所述的方法，其特征在于，所述获取对目标页面的访问请求之前，所述方法还包括：

获取所述目标页面的配置文件，所述配置文件包括若干个页面组件，所述页面组件是注册在VUE中进行集中管理的组件。

8.根据权利要求3或4所述的方法，其特征在于，所述根据所述数据报文加载页面内容，包括：

发送页面内容加载请求，所述页面内容加载请求中携带有对应页面内容文件的至少一个目标域名；

从至少一个目标域名对应的内容分发网络中获取对应的页面内容文件。

9.根据权利要求3或4所述的方法，其特征在于，所述页面内容包括图片；所述根据所述数据报文加载页面内容，包括：

根据所述数据报文获取当前可视窗口内的图片进行加载；以及，

当所述图片未能成功加载时，加载预置图片。

10.根据权利要求3或4所述的方法，其特征在于，所述根据所述数据报文加载页面内容，包括：

识别所述数据报文对应的计算属性，根据所述计算属性加载页面内容。

11.一种WEB性能优化装置，其特征在于，所述装置包括：

访问请求获取模块，用于获取对目标页面的访问请求，所述目标页面是基于VUE框架构建的用户界面；

编码模块，用于当所述访问请求合法时，采用预设编码方式对所述访问请求进行编码处理，得到编码后的编码字符串；

加密模块，用于基于当前时间以及随机码对所述编码字符串进行加密处理，得到所述访问请求的目标字符串，所述随机码随机产生；

发送模块，用于向服务器发送所述访问请求的目标字符串，以使所述服务器根据与所述预设的编码方式对应的解码方式对所述目标字符串进行解码处理，得到对应的访问请求，并根据所述访问请求返回所述目标页面的数据报文。

12.一种计算机设备，包括存储器和处理器，所述存储器存储有计算机程序，其特征在于，所述处理器执行所述计算机程序时实现权利要求1至10中任一项所述方法的步骤。

13.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现权利要求1至10中任一项所述方法的步骤。

14.一种计算机程序产品，包括计算机程序，其特征在于，该计算机程序被处理器执行时实现权利要求1至10中任一项所述方法的步骤。

Images