CN114282233A

CN114282233A - WEB performance optimization method and device, computer equipment and storage medium

Info

Publication number: CN114282233A
Application number: CN202111413959.4A
Authority: CN
Inventors: 李欢; 侯禹臣; 程星; 王卓然; 李岳松
Original assignee: Shanghai Pudong Development Bank Co Ltd
Current assignee: Shanghai Pudong Development Bank Co Ltd
Priority date: 2021-11-25
Filing date: 2021-11-25
Publication date: 2022-04-05

Abstract

The application relates to a WEB performance optimization method, a device, a computer device, a storage medium and a computer program product, wherein an access request for a target page is acquired, when the access request is legal, the access request is encoded by adopting a preset encoding mode to obtain an encoded encoding character string, the encoding character string is encrypted based on the current time and a random code to obtain a target character string of the access request, and the target character string of the access request is further sent to a server. Because the algorithm for coding is simple in the embodiment, the method has higher encryption and decryption speed, and the response speed of the request can be effectively improved; and because the random code used for encryption processing is randomly generated and the current time is unique, the safety of the algorithm is further improved, and the optimization of the response speed and the safety is realized.

Description

WEB performance optimization method and device, computer equipment and storage medium

Technical Field

The present application relates to the field of computer technologies, and in particular, to a method and an apparatus for optimizing WEB performance based on VUE, a computer device, a storage medium, and a computer program product.

Background

In recent years, the Web front-end application keeps a high-speed growth state due to the characteristics of low development cost, cross-platform performance, high online speed and the like, and has penetrated into various aspects of people's lives. People can inquire information, shop online, learn online and the like by browsing websites, and also have Web of a plurality of traditional industries and traditional software, and the functions provided by the websites are more and more abundant under the promotion of the requirements. With the rapid development of front-end technology, the Web application not only needs to meet the requirements of users, but also needs to be close to the interactive experience of Native applications (Native APPs), which puts higher requirements on the website performance.

The front-end performance optimization is a part of Web application optimization, and is to shorten the processing time of each step by technical means in the process from the resource request of a user to the complete display of the resource so as to improve the access and presentation speed of the resource. The conventional front-end performance optimization scheme mainly includes: HTML (Hyper Text Markup Language) optimization, namely optimization is carried out by reducing the size of an HTML document; CSS (Cascading Style Sheets) optimization, including optimization in a mode of reducing the use of CSS expressions, placing CSS codes at the top of a page and the like; JavaScript (a lightweight, interpreted, or just-in-time compiled programming language with function precedence) optimization by minimizing DOM (Document Object Model) access and optimizing js (JavaScript) code as an external file reference; and fourthly, optimizing the size of the picture, namely optimizing by using a scheme such as zooming pictures and the like without using HTML (hypertext markup language).

However, with the evolution of Web front-end development technology, various development frameworks are emerging, such as Vue (a set of progressive frameworks for constructing a user interface) and other lightweight front-end development frameworks, and therefore, the conventional performance optimization method is not suitable for the Web development frameworks. Most of the existing front-end performance optimization methods are based on local consideration, and various factors influencing the front-end performance are not comprehensively considered, so that the final optimization effect is not ideal.

Disclosure of Invention

In view of the foregoing, it is necessary to provide a VUE-based WEB performance optimization method, apparatus, computer device, computer-readable storage medium, and computer program product with better optimization effect.

In a first aspect, the present application provides a method for optimizing WEB performance. The method comprises the following steps:

acquiring an access request for a target page, wherein the target page is a user interface constructed based on a VUE framework;

when the access request is legal, coding the access request by adopting a preset coding mode to obtain a coded character string;

encrypting the coded character string based on the current time and a random code to obtain a target character string of the access request, wherein the random code is generated randomly;

and sending a target character string of the access request to a server, so that the server decodes the target character string according to a decoding mode corresponding to the preset coding mode to obtain a corresponding access request, and returning a data file of the target page according to the access request.

In one embodiment, the encrypting the encoded string based on the current time and the random code to obtain the target string of the access request includes: generating corresponding interference information based on the current time, and performing first splicing on the interference information and the code character string according to a preset splicing mode to obtain a corresponding splicing character string; adopting the random code to perform upward offset processing on the spliced character string to obtain a corresponding offset character string; and carrying out second splicing on the random code and the offset character string according to a preset position to obtain a target character string.

In one embodiment, the method further comprises: receiving a message ciphertext of the target page returned by the server, wherein the message ciphertext is obtained by encoding and encrypting the data message of the target page by the server; decrypting the message ciphertext by adopting a preset decryption mode to obtain a decrypted decryption character string; decoding the decrypted character string to obtain a data message of a target page corresponding to the message ciphertext; and loading page content according to the data message, and rendering according to the page content to obtain a target page and displaying the target page.

In one embodiment, the decrypting the message ciphertext by using a preset decryption method to obtain a decrypted decryption string includes: extracting a random code from a preset position of the message ciphertext, and deleting the random code in the message ciphertext to obtain a first character string; carrying out downward offset processing on the first character string by adopting the random code to obtain a second character string after offset processing; and identifying interference information in the second character string, and deleting the interference information to obtain a decrypted character string.

In one embodiment, after obtaining the access request to the target page, the method further includes: and when the access request is illegal, displaying an identity verification page to acquire user information through the identity verification page for verification.

In one embodiment, the method further comprises: receiving a page file, wherein the page file comprises static information, hypertext markup language structure information and content information of a page; and compressing and storing the static information, the structural information and the content information of the hypertext markup language of the page by adopting a Gzip tool.

In one embodiment, before obtaining the access request to the target page, the method further includes: and acquiring a configuration file of the target page, wherein the configuration file comprises a plurality of page components, and the page components are registered in the VUE for centralized management.

In one embodiment, the loading page content according to the data packet includes: sending a page content loading request, wherein the page content loading request carries at least one target domain name of a corresponding page content file; and acquiring a corresponding page content file from a content distribution network corresponding to at least one target domain name.

In one embodiment, the page content comprises a picture; the loading page content according to the data message comprises: acquiring a picture in a current visual window according to the data message and loading the picture; and loading a preset picture when the picture is not loaded successfully.

In one embodiment, the loading page content according to the data packet includes: and identifying the calculation attribute corresponding to the data message, and loading the page content according to the calculation attribute.

In a second aspect, the present application further provides a WEB performance optimization apparatus. The device comprises:

the system comprises an access request acquisition module, a data processing module and a data processing module, wherein the access request acquisition module is used for acquiring an access request for a target page, and the target page is a user interface constructed based on a VUE framework;

the coding module is used for coding the access request by adopting a preset coding mode when the access request is legal to obtain a coded code character string;

the encryption module is used for encrypting the coding character string based on the current time and a random code to obtain a target character string of the access request, and the random code is generated randomly;

and the sending module is used for sending the target character string of the access request to a server so that the server decodes the target character string according to a decoding mode corresponding to the preset coding mode to obtain a corresponding access request, and returns the data message of the target page according to the access request.

In a third aspect, the present application also provides a computer device. The computer device comprises a memory storing a computer program and a processor implementing the steps of the method according to the first aspect as described above when executing the computer program.

In a fourth aspect, the present application further provides a computer-readable storage medium. The computer-readable storage medium having stored thereon a computer program which, when executed by a processor, performs the steps of the method according to the first aspect.

In a fifth aspect, the present application further provides a computer program product. The computer program product comprising a computer program which, when executed by a processor, performs the steps of the method according to the first aspect.

According to the WEB performance optimization method, the WEB performance optimization device, the storage medium and the computer program product, the access request to the target page is obtained, when the access request is legal, the access request is encoded in a preset encoding mode to obtain an encoded encoding character string, the encoding character string is encrypted based on the current time and the random code to obtain the target character string of the access request, and the target character string of the access request is further sent to the server. Because the algorithm for coding is simple in the embodiment, the method has higher encryption and decryption speed, and the response speed of the request can be effectively improved; because the random code used for encryption processing is randomly generated and the current time is unique, the obtained ciphertexts are different even if the same access request is encrypted for multiple times, thereby further improving the safety of the algorithm and realizing the optimization of the response speed and the safety.

Drawings

FIG. 1 is a diagram of an application environment of a WEB performance optimization method according to an embodiment;

FIG. 2 is a schematic flow chart of a method for optimizing WEB performance according to an embodiment;

FIG. 3 is a flowchart illustrating steps of encrypting an encoded string according to an embodiment;

FIG. 4 is a schematic flow chart of a WEB performance optimization method according to another embodiment;

FIG. 5 is a flowchart illustrating the steps of decrypting a ciphertext message in one embodiment;

FIG. 6 is a flowchart illustrating the step of loading page content in one embodiment;

FIG. 7 is a block diagram showing the structure of a WEB performance optimizing apparatus according to an embodiment;

FIG. 8 is a diagram illustrating an internal structure of a computer device according to an embodiment.

Detailed Description

In order to make the objects, technical solutions and advantages of the present application more apparent, the present application is described in further detail below with reference to the accompanying drawings and embodiments. It should be understood that the specific embodiments described herein are merely illustrative of the present application and are not intended to limit the present application.

The WEB performance optimization method provided by the embodiment of the application can be applied to an application environment as shown in fig. 1. Wherein the terminal 102 communicates with the server 104 via a network. The data storage system may store data that the server 104 needs to process. The data storage system may be integrated on the server 104, or may be located on the cloud or other network server. Specifically, the terminal 102 may be, but is not limited to, various personal computers, notebook computers, smart phones, tablet computers, internet of things devices, portable wearable devices, and the like. The server 104 may be implemented as a stand-alone server or as a server cluster comprised of multiple servers.

In an embodiment, as shown in fig. 2, a WEB performance optimization method is provided, which is described by taking the method applied to the terminal in fig. 1 as an example, and includes the following steps:

step 202, obtaining an access request for a target page.

Wherein the target page is a user interface which is requested by a user and constructed based on the VUE framework. The access request refers to a request for accessing a target page initiated by a user through a browser, and may specifically be an HTTP (hypertext Transfer Protocol) request, for example. In this embodiment, when a user needs to access a page, the browser may initiate an access request for a specific page (i.e., a target page), and the terminal may obtain a corresponding access request.

And 204, when the access request is legal, coding the access request by adopting a preset coding mode to obtain a coded code character string.

Generally, in order to ensure the security of data transmission, when a terminal performs data interaction with a server, the terminal generally encrypts and transmits data. And the complicated encryption and decryption algorithm takes a long time, so that the response speed of the request is influenced. Based on this, while ensuring the security of data transmission, in order to further improve the response speed of the request, in this embodiment, after the terminal acquires the access request of the target page, the legitimacy of the access request is verified, and when the access request is confirmed to be legitimate, the access request is encoded by using a preset encoding mode, so as to obtain an encoded encoding character string. The validity check may be to check the user identity or user right of the access request, for example, when the user identity is valid or the user has a corresponding access right, the access request is considered to be valid, and if the user identity is invalid or the user does not have a corresponding access right, the access request is considered to be invalid. The preset encoding mode refers to a preset data processing mode for encoding the access request to hide plaintext, such as a Base64 (binary data is represented based on 64 printable characters). The encoded character string is an encoded result obtained by encoding the access request by using a preset encoding method, for example, if the preset encoding method is encoding twice by using Base64, the access request is encoded twice by using Base64, and the encoded character string can be obtained.

And step 206, encrypting the coded character string based on the current time and the random code to obtain a target character string of the access request.

Wherein the random code is a randomly generated number, such as a random number generated by the JS method. The current time is the time that the encryption processing is required currently. The encryption processing is a processing mode that changes original information data by a special algorithm, so that even if an unauthorized user obtains encrypted information, the content of the information cannot be known because the unauthorized user does not know a decryption method. Specifically, the encryption processing in the present embodiment may be a manner of encrypting information that is set in advance. The target character string is an encryption result obtained by encrypting the obtained coding character string. In this embodiment, the obtained encoded character string is encrypted by using the current time and the random code, so as to obtain the target character string of the access request.

Step 208, the target character string of the access request is sent to the server.

Specifically, the terminal sends the target character string after the encryption processing is carried out on the access request to the server, so that the safety of data transmission is guaranteed. And then the server can decode the target character string according to a decoding mode corresponding to the preset encoding mode to obtain a corresponding access request, and return the data message of the target page according to the access request.

In the WEB performance optimization method, the access request to the target page is acquired, when the access request is legal, the access request is encoded in a preset encoding mode to obtain an encoded character string, the encoded character string is encrypted based on the current time and the random code to obtain the target character string of the access request, and the target character string of the access request is further sent to the server. Because the algorithm for coding is simple in the embodiment, the method has higher encryption and decryption speed, and the response speed of the request can be effectively improved; because the random code used for encryption processing is randomly generated and the current time is unique, the obtained ciphertexts are different even if the same access request is encrypted for multiple times, thereby improving the safety of the algorithm and realizing the optimization of the response speed and the safety.

In an embodiment, as shown in fig. 3, the encrypting the encoded character string based on the current time and the random code to obtain the target character string of the access request specifically includes the following steps:

step 302, generating corresponding interference information based on the current time, and performing first splicing on the interference information and the code character string according to a preset splicing mode to obtain a corresponding splicing character string.

Wherein the interference information is noise added in the encryption process. Specifically, the interference information may be generated based on the current time, for example, a corresponding time sequence number may be generated according to the current time, so that the time sequence number is used as the interference information. The preset splicing manner refers to a preset or predetermined splicing sequence, for example, splicing the interference information before or after the encoding character string, or splicing a part of the interference information before the encoding character string and another part after the encoding character string. In this embodiment, a time sequence with 16 bits of interference information is taken as an example, and the corresponding splicing manner is to splice the first 8 bits of the interference information before the encoding character string and splice the last 8 bits after the encoding character string. The terminal may generate a 16-bit time sequence based on the current time, and concatenate the first 8 bits of the time sequence before the encoded character string and the last 8 bits after the encoded character string, thereby obtaining a corresponding concatenated character string.

And 304, carrying out upward offset processing on the spliced character string by adopting a random code to obtain a corresponding offset character string.

Specifically, the obtained concatenation character string is subjected to upward offset processing through the generated random code, so that a corresponding offset character string is obtained.

And step 306, performing second splicing on the random code and the offset character string according to the preset position to obtain a target character string.

The preset position is a preset or predetermined position for splicing the random code, for example, the random code may be spliced at the last of the offset string, or the random code may be spliced at the forefront of the offset string, or the random code may be spliced at a specified position in the offset string, for example, after the 5 th bit of the offset string. For the example that the preset position is the last of the offset character strings, the terminal splices the random code to the last of the offset character strings after obtaining the corresponding offset character strings through the above processing, so as to obtain the target character string subjected to the second splicing, that is, the target character string subjected to the encoding and encryption of the access request.

In the above embodiment, the corresponding interference information is generated based on the current time, the interference information is first spliced with the code character string according to a preset splicing mode to obtain the corresponding spliced character string, upward offset processing is performed on the spliced character string by using the random code to obtain the corresponding offset character string, and then the random code is second spliced with the offset character string according to the preset position to obtain the target character string.

In one embodiment, as shown in fig. 4, after sending the target character string of the access request to the server, the method may further include the following steps:

step 402, receiving a message ciphertext of the target page returned by the server.

The message ciphertext is obtained by the server performing encoding and encryption processing on the data message of the target page corresponding to the access request, for example, the encoding and encryption may be performed in the same processing manner as the access request by the terminal shown in fig. 2. In this embodiment, when a user needs to access a page, a browser of the terminal may initiate an access request for a specific page (i.e., a target page) to the server, and further may receive a message ciphertext of the target page returned by the server according to the access request. It can be understood that, in order to ensure the security of data transmission, when a terminal and a server perform data interaction, data is generally encrypted and then transmitted, and therefore, when transmitting data, no matter the terminal or the server may employ an agreed encoding and encryption processing method to encode and encrypt the data and then transmit the data.

And step 404, decrypting the message ciphertext by adopting a preset decryption mode to obtain a decrypted decryption character string.

The preset decryption mode may be a decryption mode agreed between the terminal and the server. In this embodiment, taking the encoding encryption adopted by the server as the same processing manner for the access request shown in fig. 2 as an example, the preset decryption manner of this embodiment is a manner corresponding to the encryption manner described above, specifically, the decryption manner is the inverse manner of the encryption manner. The decryption character string is a decryption result obtained by decrypting the message ciphertext. In this embodiment, the terminal decrypts the message ciphertext by using a decryption method corresponding to the encryption processing, so as to obtain a decrypted decryption string.

And 406, decoding the decrypted character string to obtain a data message of the target page corresponding to the message ciphertext.

The decoding process is a scheme corresponding to the above-described encoding process scheme, and specifically, the decoding scheme is an inverse scheme of the encoding process scheme. Specifically, the terminal performs decoding processing on the obtained decryption character string by adopting a decoding mode corresponding to the encoding processing, so as to obtain a data message of a target page corresponding to the message ciphertext. Specifically, the data message is a message related to a target page transmitted by the server.

And step 408, loading page content according to the data message, and rendering according to the page content to obtain a target page and displaying the target page.

Specifically, the terminal loads page content according to the data message obtained by decoding, and then renders according to the page content to obtain a target page and displays the target page.

In the WEB performance optimization method, the message ciphertext of the target page returned by the server is received, the message ciphertext is decrypted by adopting a preset decryption mode to obtain a decrypted decryption character string, the decrypted character string is further decoded to obtain a data message of the target page corresponding to the message ciphertext, page content is loaded according to the data message, and the target page is obtained and displayed by rendering according to the page content. The algorithm for decoding is simple in the embodiment, so that the method has higher decryption speed, and the response speed can be effectively improved; and because the decoding and decryption modes are both agreed in advance, the safety of the algorithm is improved, and the optimization of the response speed and the safety is realized.

In an embodiment, as shown in fig. 5, the decrypting the message ciphertext by using the preset decryption method to obtain the decrypted decryption character string specifically includes the following steps:

step 502, extracting a random code from a preset position of a message ciphertext, and deleting the random code in a target character string to obtain a first character string.

The preset position refers to a preset or predetermined position of the spliced random code. For example, the first or last bit of the message cipher text. In this embodiment, taking the preset position as the last bit of the message ciphertext as an example, the terminal extracts the random code from the last bit of the message ciphertext and deletes the random code in the message ciphertext, that is, deletes the last bit of the message ciphertext, thereby obtaining the first character string.

And step 504, performing downward offset processing on the first character string by using a random code to obtain a second character string after offset processing.

If the server uses the random code to perform upward offset processing in the encryption process, the terminal uses the random code to perform downward offset processing on the obtained first character string when performing reverse processing, so as to obtain a second character string after offset processing, namely, a reverse processing mode with the server processing is adopted.

Step 506, identifying the interference information in the second character string, and deleting the interference information to obtain the decrypted character string.

And if the splicing character string is obtained after the server splices the interference information according to a preset splicing mode. In this embodiment, the interference information in the second string may be identified based on the preset splicing manner, and the identified interference information may be deleted, so as to obtain the decrypted string.

For example, if the interference information is a 16-bit time sequence, the corresponding splicing manner is to splice the first 8 bits of the interference information before splicing the second 8 bits of the interference information after splicing. The terminal identifies that the first 8 bits and the last 8 bits of the second character string are interference information based on the splicing mode, so that the first 8 bits and the last 8 bits of the second character string are deleted, and the decrypted character string is obtained.

In the above embodiment, the random code is extracted from the preset position of the message ciphertext, the random code in the message ciphertext is deleted to obtain the first character string, the random code is adopted to perform downward offset processing on the first character string to obtain the offset-processed second character string, the interference information in the second character string is identified, and the interference information is deleted to obtain the decrypted character string.

In an embodiment, after obtaining the access request to the target page, the method may further include: and when the access request is illegal, displaying the authentication page to acquire the user information through the authentication page for authentication.

Since the validity check is to check the user identity or user right of the access request, for example, when the user identity is valid or the user has a corresponding access right, the access request is considered to be valid, and if the user identity is invalid or the user does not have a corresponding access right, the access request is considered to be invalid. Thus, in this embodiment, a route interception and routing gatekeeper may be used to check the user login status to confirm whether the access request is legitimate. For example, when the route is jumped, that is, before the user jumps from one page to another page, login state verification can be performed, if the user does not log in or the user login is disabled, the log-in popup component (i.e., the authentication page) registered in the global is invoked by using the original type chain method, and after the user login is successful, the next operation is performed. Therefore, the problem of request verification is solved globally, developers do not need to consider the problem of login state verification when developing codes, and only need to concentrate on business logic development. The specific implementation steps are as follows

(1) Installation:

npm install vue-router

(2) beforeeach registers a global front guard using router:

(3) and (3) service development:

in one embodiment, the method may further include: receiving a page file, wherein the page file comprises static information, hypertext markup language structure information and content information of a page, and compressing and storing the static information, the hypertext markup language structure information and the content information of the page by adopting a Gzip (which is short for a plurality of file compression programs and is used for compressing and processing files) tool.

Specifically, the VUE can open the Gzip compressed file during packaging, so that the static information, the hypertext markup language structure information and the content information of the page of the same page are compressed and stored, the storage volume of the page file is reduced, the page loading speed can be increased, and better user experience is brought. And because Gzip has higher compression efficiency and can generally reach 70% of compression rate, the use of Gzip compression can reduce the size of a page file data packet and improve the loading speed of a page. The related steps are as follows:

(1) installation:

npm install compression--save

(2) adding code logic:

var compression＝require('compression')；

var app＝express()；

app.use(compression())

in an embodiment, before the obtaining the access request to the target page, the method may further include: and acquiring a configuration file of the target page, wherein the configuration file comprises a plurality of page components, and the page components are components which are registered in the VUE for centralized management.

Specifically, the global components are managed uniformly by being registered in the configuration file of the VUE, and thus the components having the same function can be multiplexed. In addition, by using keep-alive (a relatively abstract component provided by the VUE), the information of the component can be cached by using a cache when the component is hidden and needs to be opened repeatedly, so that the component is prevented from being re-rendered when opened twice, and the performance is saved. In addition, dynamic loading of components can be carried out, and a plurality of components are often adopted in the first page of a project, and some part of the page is required to be dynamic and support configurable. If the component is loaded regardless of whether it is used, the rendering speed of the page is severely reduced. Thus, the idea of dynamically loading components can be used, which are loaded when they are needed. The dynamic loading component does not load the relevant information of the component when the page is rendered, the DOM is re-rendered to load the component only when the component is needed, and the dynamic loading component can be specifically realized through the virtual DOM of the VUE and the two-way binding principle.

In an embodiment, as shown in fig. 6, loading the page content according to the data packet may specifically include:

step 602, a page content loading request is sent.

The page content loading request refers to a request that a terminal interacts with a server to acquire corresponding resources based on resources required by page rendering. Specifically, the page content loading request carries at least one target domain name of the corresponding page content file.

Step 604, a corresponding page content file is obtained from a content distribution network corresponding to at least one target domain name.

When the terminal loads the page content, it is generally required to download corresponding page content files, such as CSS, js, pictures and other files, from the server. Most servers have limited bandwidth, and if the bandwidth exceeds the limit, the response of the web page is slow. And a Content Delivery Network (CDN) can load a file through different domain names, so that the number of concurrent connections for downloading the file is greatly increased.

Based on this, in practical application, the resource files in the project can be put into the CDN. In addition, the domain names of the CDN servers are generally multiple, and the design is mainly to consider the limitation of concurrent requests under the same domain name of the browser. For example: the style text file and the picture file may use different CDN domain names. Therefore, the page content loading request in this embodiment may carry at least one target domain name corresponding to the page content file, that is, carry at least one CDN domain name, and further may be connected to at least one CDN to concurrently request data, so as to improve the loading speed of the page content.

In one embodiment, if the page content includes a picture, loading the page content according to the data packet specifically includes: acquiring a picture in a current visual window according to the data message and loading the picture; and loading the preset picture when the picture is not loaded successfully.

Specifically, in this embodiment, for a page with too many pictures, the picture resources in the visual window may be loaded according to the current visual window, and the resources that are not in the current visual window are not loaded, so that the loading speed may be increased. The picture which is not loaded can be replaced by setting a default picture (namely, a preset picture), so that the page loading performance is improved, and the user experience is improved due to the improvement of the loading speed.

In specific application, an vue-lazyload plug-in can be used, and the specific steps are as follows:

(1) installing a plug-in;

npm install vue-lazyload--save-dev

(2) js is introduced and used in the entry file;

(3) the src attribute of the img tag is changed directly to v-lazy in the vue file, thereby changing the picture display mode to a lazy-loading display.

In an embodiment, the loading the page content according to the data packet may specifically further include: and identifying the calculation attribute corresponding to the data message, and loading the page content according to the calculation attribute.

In particular, different computing attributes computed or watch may be used based on different scene choices. For example, when a value needs to be calculated and depends on other data, that is, one attribute is calculated from other attributes, and the attribute depends on other attributes, the calculated calculation attribute can be used, so that the cache property of the calculated can be utilized to avoid recalculation each time a value is acquired. When asynchronous or high-cost operation needs to be executed when data changes, that is, when one attribute changes, corresponding operation needs to be executed, the calculation attribute of the watch can be used.

In one embodiment, VUE condition decision optimization may also be employed, which may specifically employ different instructions, such as v-if or v-show, based on different usage scenarios. Where v-if is applicable to scenarios where conditions are rarely changed at runtime and do not require frequent switching of conditions. The v-show is suitable for scenes that require conditions to be switched very frequently. For example, if the page element is only displayed or hidden and the display state is not changed again, that is, whether a certain element of the page is displayed or hidden is controlled through the data of the backend interface, and the subsequent change is not performed, the v-if is suitable at this time; and if the page element frequently changes the display state, namely a button is arranged in the page, and the button is clicked to control the display or the hiding of a certain element, the v-show is suitable at the moment.

Further, when the list data is subjected to traversal rendering, a unique key value needs to be set for each item, so that the list data can be accurately found by a Vue. v-for has higher priority than v-if, which affects speed if the whole array needs to be traversed each time, especially when a small part needs to be rendered, it should be replaced with a computed attribute if necessary, because the computed supports caching, and the computation will be performed again only if the dependent data changes. Thus, a v-for traversal can add a key to an item and avoid the simultaneous use of v-if (a usage rule can be configured in eslinet, avoiding the simultaneous use of v-for and v-if).

Further, in the VUE, it is defined that the view layer is notified to re-render the page every time data in the data changes. Therefore, if the variables are not the variables required by the view, the variables can be not defined in the data, and the variables can be defined externally or directly mounted on the VUE instance, so as to avoid wasting resources.

It should be understood that, although the steps in the flowcharts related to the embodiments as described above are sequentially displayed as indicated by arrows, the steps are not necessarily performed sequentially as indicated by the arrows. The steps are not performed in the exact order shown and described, and may be performed in other orders, unless explicitly stated otherwise. Moreover, at least a part of the steps in the flowcharts related to the embodiments described above may include multiple steps or multiple stages, which are not necessarily performed at the same time, but may be performed at different times, and the execution order of the steps or stages is not necessarily sequential, but may be rotated or alternated with other steps or at least a part of the steps or stages in other steps.

Based on the same inventive concept, the embodiment of the present application further provides a WEB performance optimization apparatus for implementing the above-mentioned WEB performance optimization method. The implementation scheme for solving the problem provided by the apparatus is similar to the implementation scheme described in the above method, so specific limitations in one or more embodiments of the WEB performance optimization apparatus provided below may refer to the limitations of the WEB performance optimization method in the foregoing, and details are not described herein again.

In one embodiment, as shown in fig. 7, a WEB performance optimizing apparatus is provided, including: an access request acquisition module 702, an encoding module 704, an encryption module 706, and a sending module 708, wherein:

an access request obtaining module 702, configured to obtain an access request for a target page, where the target page is a user interface constructed based on a VUE framework;

the encoding module 704 is configured to, when the access request is legal, encode the access request in a preset encoding manner to obtain an encoded character string;

an encryption module 706, configured to encrypt the encoded character string based on the current time and a random code to obtain a target character string of the access request, where the random code is generated randomly;

a sending module 708, configured to send the target character string of the access request to a server, so that the server performs decoding processing on the target character string according to a decoding manner corresponding to the preset encoding manner to obtain a corresponding access request, and returns a data packet of the target page according to the access request.

In one embodiment, the encryption module is specifically configured to: generating corresponding interference information based on the current time, and performing first splicing on the interference information and the code character string according to a preset splicing mode to obtain a corresponding splicing character string; adopting the random code to perform upward offset processing on the spliced character string to obtain a corresponding offset character string; and carrying out second splicing on the random code and the offset character string according to a preset position to obtain a target character string.

In one embodiment, the above apparatus further comprises:

the message ciphertext receiving module is used for receiving the message ciphertext of the target page, which is returned by the server, wherein the message ciphertext is obtained by the server after encoding and encrypting the data message of the target page;

the decryption module is used for decrypting the message ciphertext by adopting a preset decryption mode to obtain a decrypted decryption character string;

the decoding module is used for decoding the decrypted character string to obtain a data message of a target page corresponding to the message ciphertext;

and the page loading module is used for loading page content according to the data message, and rendering according to the page content to obtain a target page and displaying the target page.

In one embodiment, the decryption module is specifically configured to: extracting a random code from a preset position of the message ciphertext, and deleting the random code in the message ciphertext to obtain a first character string; carrying out downward offset processing on the first character string by adopting the random code to obtain a second character string after offset processing; and identifying interference information in the second character string, and deleting the interference information to obtain a decrypted character string.

In one embodiment, the apparatus further includes a verification module, configured to display an authentication page when the access request is illegal, so as to obtain user information through the authentication page for verification.

In one embodiment, the apparatus further comprises a compression processing module for receiving a page file, the page file comprising static information, hypertext markup language structure information, and content information of a page; and compressing and storing the static information, the structural information and the content information of the hypertext markup language of the page by adopting a Gzip tool.

In an embodiment, the apparatus further includes a component configuration module, configured to obtain a configuration file of the target page, where the configuration file includes a plurality of page components, and the page components are components registered in the VUE for centralized management.

In one embodiment, the page loading module is further configured to: sending a page content loading request, wherein the page content loading request carries at least one target domain name of a corresponding page content file; and acquiring a corresponding page content file from a content distribution network corresponding to at least one target domain name.

In one embodiment, the page content includes a picture, and the page loading module is further configured to: acquiring a picture in a current visual window according to the data message and loading the picture; and loading a preset picture when the picture is not loaded successfully.

In one embodiment, the page loading module is further configured to: and identifying the calculation attribute corresponding to the data message, and loading the page content according to the calculation attribute.

Each module in the WEB performance optimization apparatus may be implemented in whole or in part by software, hardware, or a combination thereof. The modules can be embedded in a hardware form or independent from a processor in the computer device, and can also be stored in a memory in the computer device in a software form, so that the processor can call and execute operations corresponding to the modules.

In one embodiment, a computer device is provided, which may be a terminal, and its internal structure diagram may be as shown in fig. 8. The computer device includes a processor, a memory, a communication interface, a display screen, and an input device connected by a system bus. Wherein the processor of the computer device is configured to provide computing and control capabilities. The memory of the computer device comprises a nonvolatile storage medium and an internal memory. The non-volatile storage medium stores an operating system and a computer program. The internal memory provides an environment for the operation of an operating system and computer programs in the non-volatile storage medium. The communication interface of the computer device is used for carrying out wired or wireless communication with an external terminal, and the wireless communication can be realized through WIFI, a mobile cellular network, NFC (near field communication) or other technologies. The computer program is executed by a processor to implement a WEB performance optimization method. The display screen of the computer equipment can be a liquid crystal display screen or an electronic ink display screen, and the input device of the computer equipment can be a touch layer covered on the display screen, a key, a track ball or a touch pad arranged on the shell of the computer equipment, an external keyboard, a touch pad or a mouse and the like.

Those skilled in the art will appreciate that the architecture shown in fig. 8 is merely a block diagram of some of the structures associated with the disclosed aspects and is not intended to limit the computing devices to which the disclosed aspects apply, as particular computing devices may include more or less components than those shown, or may combine certain components, or have a different arrangement of components.

In one embodiment, a computer device is provided, comprising a memory and a processor, the memory having a computer program stored therein, the processor implementing the following steps when executing the computer program:

and sending the target character string of the access request to a server, so that the server decodes the target character string according to a decoding mode corresponding to the preset coding mode to obtain a corresponding access request, and returning the data message of the target page according to the access request.

In one embodiment, the processor, when executing the computer program, further performs the steps of: generating corresponding interference information based on the current time, and performing first splicing on the interference information and the code character string according to a preset splicing mode to obtain a corresponding splicing character string; adopting the random code to perform upward offset processing on the spliced character string to obtain a corresponding offset character string; and carrying out second splicing on the random code and the offset character string according to a preset position to obtain a target character string.

In one embodiment, the processor, when executing the computer program, further performs the steps of: receiving a message ciphertext of the target page returned by the server, wherein the message ciphertext is obtained by encoding and encrypting the data message of the target page by the server; decrypting the message ciphertext by adopting a preset decryption mode to obtain a decrypted decryption character string; decoding the decrypted character string to obtain a data message of a target page corresponding to the message ciphertext; and loading page content according to the data message, and rendering according to the page content to obtain a target page and displaying the target page.

In one embodiment, the processor, when executing the computer program, further performs the steps of: extracting a random code from a preset position of the message ciphertext, and deleting the random code in the message ciphertext to obtain a first character string; carrying out downward offset processing on the first character string by adopting the random code to obtain a second character string after offset processing; and identifying interference information in the second character string, and deleting the interference information to obtain a decrypted character string.

In one embodiment, the processor, when executing the computer program, further performs the steps of: and when the access request is illegal, displaying an identity verification page to acquire user information through the identity verification page for verification.

In one embodiment, the processor, when executing the computer program, further performs the steps of: receiving a page file, wherein the page file comprises static information, hypertext markup language structure information and content information of a page; and compressing and storing the static information, the structural information and the content information of the hypertext markup language of the page by adopting a Gzip tool.

In one embodiment, the processor, when executing the computer program, further performs the steps of: and acquiring a configuration file of the target page, wherein the configuration file comprises a plurality of page components, and the page components are registered in the VUE for centralized management.

In one embodiment, the processor, when executing the computer program, further performs the steps of: sending a page content loading request, wherein the page content loading request carries at least one target domain name of a corresponding page content file; and acquiring a corresponding page content file from a content distribution network corresponding to at least one target domain name.

In one embodiment, the processor, when executing the computer program, further performs the steps of: acquiring a picture in a current visual window according to the data message and loading the picture; and loading a preset picture when the picture is not loaded successfully.

In one embodiment, the processor, when executing the computer program, further performs the steps of: and identifying the calculation attribute corresponding to the data message, and loading the page content according to the calculation attribute.

In one embodiment, a computer-readable storage medium is provided, having a computer program stored thereon, which when executed by a processor, performs the steps of:

In one embodiment, the computer program when executed by the processor further performs the steps of: generating corresponding interference information based on the current time, and performing first splicing on the interference information and the code character string according to a preset splicing mode to obtain a corresponding splicing character string; adopting the random code to perform upward offset processing on the spliced character string to obtain a corresponding offset character string; and carrying out second splicing on the random code and the offset character string according to a preset position to obtain a target character string.

In one embodiment, the computer program when executed by the processor further performs the steps of: receiving a message ciphertext of the target page returned by the server, wherein the message ciphertext is obtained by encoding and encrypting the data message of the target page by the server; decrypting the message ciphertext by adopting a preset decryption mode to obtain a decrypted decryption character string; decoding the decrypted character string to obtain a data message of a target page corresponding to the message ciphertext; and loading page content according to the data message, and rendering according to the page content to obtain a target page and displaying the target page.

In one embodiment, the computer program when executed by the processor further performs the steps of: extracting a random code from a preset position of the message ciphertext, and deleting the random code in the message ciphertext to obtain a first character string; carrying out downward offset processing on the first character string by adopting the random code to obtain a second character string after offset processing; and identifying interference information in the second character string, and deleting the interference information to obtain a decrypted character string.

In one embodiment, the computer program when executed by the processor further performs the steps of: and when the access request is illegal, displaying an identity verification page to acquire user information through the identity verification page for verification.

In one embodiment, the computer program when executed by the processor further performs the steps of: receiving a page file, wherein the page file comprises static information, hypertext markup language structure information and content information of a page; and compressing and storing the static information, the structural information and the content information of the hypertext markup language of the page by adopting a Gzip tool.

In one embodiment, the computer program when executed by the processor further performs the steps of: and acquiring a configuration file of the target page, wherein the configuration file comprises a plurality of page components, and the page components are registered in the VUE for centralized management.

In one embodiment, the computer program when executed by the processor further performs the steps of: sending a page content loading request, wherein the page content loading request carries at least one target domain name of a corresponding page content file; and acquiring a corresponding page content file from a content distribution network corresponding to at least one target domain name.

In one embodiment, the computer program when executed by the processor further performs the steps of: acquiring a picture in a current visual window according to the data message and loading the picture; and loading a preset picture when the picture is not loaded successfully.

In one embodiment, the computer program when executed by the processor further performs the steps of: and identifying the calculation attribute corresponding to the data message, and loading the page content according to the calculation attribute.

In one embodiment, a computer program product is provided, comprising a computer program which, when executed by a processor, performs the steps of:

It should be noted that, the user information (including but not limited to user device information, user personal information, etc.) and data (including but not limited to data for analysis, stored data, presented data, etc.) referred to in the present application are information and data authorized by the user or sufficiently authorized by each party.

It will be understood by those skilled in the art that all or part of the processes of the methods of the embodiments described above can be implemented by hardware instructions of a computer program, which can be stored in a non-volatile computer-readable storage medium, and when executed, can include the processes of the embodiments of the methods described above. Any reference to memory, database, or other medium used in the embodiments provided herein may include at least one of non-volatile and volatile memory. The nonvolatile Memory may include Read-Only Memory (ROM), magnetic tape, floppy disk, flash Memory, optical Memory, high-density embedded nonvolatile Memory, resistive Random Access Memory (ReRAM), Magnetic Random Access Memory (MRAM), Ferroelectric Random Access Memory (FRAM), Phase Change Memory (PCM), graphene Memory, and the like. Volatile Memory can include Random Access Memory (RAM), external cache Memory, and the like. By way of illustration and not limitation, RAM can take many forms, such as Static Random Access Memory (SRAM) or Dynamic Random Access Memory (DRAM), among others. The databases referred to in various embodiments provided herein may include at least one of relational and non-relational databases. The non-relational database may include, but is not limited to, a block chain based distributed database, and the like. The processors referred to in the embodiments provided herein may be general purpose processors, central processing units, graphics processors, digital signal processors, programmable logic devices, quantum computing based data processing logic devices, etc., without limitation.

The technical features of the above embodiments can be arbitrarily combined, and for the sake of brevity, all possible combinations of the technical features in the above embodiments are not described, but should be considered as the scope of the present specification as long as there is no contradiction between the combinations of the technical features.

The above-mentioned embodiments only express several embodiments of the present application, and the description thereof is more specific and detailed, but not construed as limiting the scope of the present application. It should be noted that, for a person skilled in the art, several variations and modifications can be made without departing from the concept of the present application, which falls within the scope of protection of the present application. Therefore, the protection scope of the present application shall be subject to the appended claims.

Claims

1. A WEB performance optimization method is characterized by comprising the following steps:

2. The method of claim 1, wherein the encrypting the encoded string based on the current time and a random code to obtain the target string of the access request comprises:

generating corresponding interference information based on the current time, and performing first splicing on the interference information and the code character string according to a preset splicing mode to obtain a corresponding splicing character string;

adopting the random code to perform upward offset processing on the spliced character string to obtain a corresponding offset character string;

and carrying out second splicing on the random code and the offset character string according to a preset position to obtain a target character string.

3. The method of claim 1, further comprising:

receiving a message ciphertext of the target page returned by the server, wherein the message ciphertext is obtained by encoding and encrypting the data message of the target page by the server;

decrypting the message ciphertext by adopting a preset decryption mode to obtain a decrypted decryption character string;

decoding the decrypted character string to obtain a data message of a target page corresponding to the message ciphertext;

and loading page content according to the data message, and rendering according to the page content to obtain a target page and displaying the target page.

4. The method according to claim 3, wherein the decrypting the message ciphertext by using a preset decryption mode to obtain a decrypted decryption string comprises:

extracting a random code from a preset position of the message ciphertext, and deleting the random code in the message ciphertext to obtain a first character string;

carrying out downward offset processing on the first character string by adopting the random code to obtain a second character string after offset processing;

and identifying interference information in the second character string, and deleting the interference information to obtain a decrypted character string.

5. The method of any of claims 1 to 4, wherein after obtaining the access request to the target page, the method further comprises:

and when the access request is illegal, displaying an identity verification page to acquire user information through the identity verification page for verification.

6. The method according to any one of claims 1 to 4, further comprising:

receiving a page file, wherein the page file comprises static information, hypertext markup language structure information and content information of a page;

and compressing and storing the static information, the structural information and the content information of the hypertext markup language of the page by adopting a Gzip tool.

7. The method of any of claims 1 to 4, wherein prior to obtaining the request for access to the target page, the method further comprises:

and acquiring a configuration file of the target page, wherein the configuration file comprises a plurality of page components, and the page components are registered in the VUE for centralized management.

8. The method according to claim 3 or 4, wherein said loading page content according to said data packets comprises:

sending a page content loading request, wherein the page content loading request carries at least one target domain name of a corresponding page content file;

and acquiring a corresponding page content file from a content distribution network corresponding to at least one target domain name.

9. The method of claim 3 or 4, wherein the page content comprises a picture; the loading page content according to the data message comprises:

acquiring a picture in a current visual window according to the data message and loading the picture; and the number of the first and second groups,

and when the picture is not loaded successfully, loading a preset picture.

10. The method according to claim 3 or 4, wherein said loading page content according to said data packets comprises:

and identifying the calculation attribute corresponding to the data message, and loading the page content according to the calculation attribute.

11. A WEB performance optimization apparatus, comprising:

12. A computer device comprising a memory and a processor, the memory storing a computer program, characterized in that the processor realizes the steps of the method of any one of claims 1 to 10 when executing the computer program.

13. A computer-readable storage medium, on which a computer program is stored, which, when being executed by a processor, carries out the steps of the method of any one of claims 1 to 10.

14. A computer program product comprising a computer program, characterized in that the computer program realizes the steps of the method of any one of claims 1 to 10 when executed by a processor.