Knowledge Network Node

Research and Application of Web System Front-end Performance Optimization Based on Vue

石冠洲

长安大学

Abstract: In recent years,with the rapid development of society and economy,computer Internet technology has penetrated into every aspect of people’s daily life.As one of the highlight technology products of the development of the Internet in recent years,the Web site has made great progress driven by the Internet.People not only obtain information and online shopping through Web sites,but also hope to obtain faster and efficient services and experiences.This also places higher requirements on the performance of Web sites.Therefore,the performance optimization of Web sites Significance.For a Web site,you can optimize its performance from both the back-end and front-end.Back-end optimization techniques such as hardware equipment upgrades are relatively expensive.In addition,domestic back-end optimization techniques are already relatively mature.Therefore,this paper focuses on the research of front-end performance optimization of Web systems,mainly doing the following research work:1.Summarizes the development process of Web front-end,the content of Web front-end and the importance of Web front-end performance optimization.Studies the working mechanism of Web front-end and the working principle of browser,analyzes the existing related research situation,and summarizes the main factors affecting the performance of Web front-end.2.Aiming at the main factors that affect the performance of Web front-end,this paper studies the performance optimization model of Web front-end,and gives the optimization scheme in four aspects: front-end rendering optimization,picture optimization,browser cache optimization and network connection optimization.In terms of front-end rendering,the front-end rendering performance of the Web system is optimized from the aspects of optimizing the presentation process of the Web front-end and by combining the virtual DOM with the Web Worker;In the aspect of picture optimization,the picture loading performance of Web front-end is improved by changing the format and compression of the picture and adopting picture lazy loading technology;In terms of browser cache optimization,cache technologies such as Web Storage are mainly used to cache various static resources in the process of users accessing Web applications to the browser,so as to improve the response efficiency of the Web front end;In terms of network connection optimization,the improved SACC algorithm is used to effectively solve the problem of browser concurrent connection limitation.Using methods such as making picture maps reduces the number of HTTP requests in the Web system.It also improves the loading rate of the Web system through Vue’s routing lazy loading technology.3.Studied the structure of the Web front-end framework,focused on the analysis of the working principle and advantages of the Vue framework,combined with the needs of the electronic mall system,developed an electronic mall system based on the Vue front-end framework design,and realized the overall architecture and various Function.4.The optimization model is applied to the designed shopping mall system.By using front-end performance tools to compare and analyze the system performance data before and after application of the optimization model and the actual effect before and after system optimization,the feasibility and effectiveness of the optimization model are verified.
Keywords：

Web front-end; performance optimization; Vue; mall system;

  • Series：

    (I) Electronic Technology ＆ Information Science

  • Subject：

    Internet Technology

  • DOI：

    10.26976/d.cnki.gchau.2020.001476

  • Classification Code：

    TP393.09

Tutor：

王夏黎;

Retraction:

工程硕士（专业学位）

QRcode

Download the mobile appuse the app to scan this coderead the article.

Tips: Please download CAJViewer to view CAJ format full text.

Download: 3016 Page: 69 Size: 3542K

Related Literature
  • Similar Article
  • Reader Recommendationr
  • Citation Network
  • Study Results