126
基于Vue 云管理平台Web 前端性能优化的研究
冯爱花
（合肥财经职业学院人工智能学院，安徽合肥230601）
摘要：作为决定一个云管理平台用户使用感受关键因素之一的Web 前端性能，其优劣程度可直接影响云管理平台的实
际使用量。文章针对一种基于Vue 的云管理平台Web 前端性能优化方法展开研究，通过MVVM 开发模式在所搭建的开发环境中开发出Vue 框架，将此框架作为云管理平台Web 前端的基础框架，对此框架内的页面样式实施编写，获得优化后云管理平台的全新Web 前端页面；结合SACC 算法以TSR 与TDD 两种指数最小化为依据，构建全新Web 前端的综合调度权值运算模型，进一步优化全新Web 前端的综合调度性能，降低并发用户连接请求情况下，用户浏览页面与下载页面元素的等待时间，提高用户的使用感受。关键词：Vue 框架；云管理平台；Web 前端；MVVM 开发模式中图分类号：TP311文献标识码：A 文章编号：2096-9759（2023）07-0126-03
0引言
云管理平台属于一种集中性、可靠性、统一性较高的管理性平台，该平台管理中的关键功能包括研究并优化各类服务结果、监管各类服务的运维过程、分配各类服务申请、均衡调度各类信息资源等。该模式的前端处于未成熟状态，大部分业务逻辑均需依靠后端完成处理，且处理过程中所需连接的数据库较多，导致Web 前端页面的呈现速度较慢，大大延长了用户的页面浏览等待时间，给用户带来不好的体验感。为解决此类问
题，需研究一种恰当的方法对云管理平台Web 前端性能实施优化，改善其页面呈现效果及响应速度，提高用户的实际使用感受。针对此方面的部分研究有：由马郓等人提出了一种针对移动Web 应用浏览器缓存性能的优化方法，此方法结合新型主动式缓存度量模型，以执行时间最小化为目标，优化移动Web 应用浏览器的缓存性能，该方法可有效降低Web 应用执行时间，提高页面加载速度，但对于页面资源的下载响应速度不高[1]；谭文安等人研究了一种Web 服务组合优化方法，该方法是通
也精准调控了协议的复杂度，使其在大型数据集内维持较高的经济性，在联邦学习内的协同训练方面表现出较高的适用性[10]
。
3.3.3同态加密
同态加密这种防御技术最大的特点是在不直接访问明文的情景下，解密密文的操作结果，并使其和明文的操作结果相等。本文这里以加性同态加密作为实例进行分析，有[11]
：
（1）
用公钥加法同态加密方案，（pk ，sk ）表示的是一对公私钥，·代表的是密文之上某类特定的运算形式。
同态加密后，联邦学习中的服务器就聚合处理密文参数，这样就不能获得参与方的隐私数据。
4结语
进入新世纪以来，人工智能技术日益成熟并逐渐实现了普及应用，人们在享受高新科技带来的便利同时，
在隐私保护方面也提出了更多的需求，特别是欧盟组织颁发《通用数据保护条例》，进一步凸显了联邦学习的优越性，对联邦学习的可持续发展起到了促进作用。但客观上讲，当前联邦学习中潜在着诸多安全问题，本文总结了投毒攻击、对抗攻击及隐私泄露三类安全问题，并探究相应的数据安全及隐私保护防御技术，而既有的防御方法适用范围较窄小，仅能在特定的条件下增加模型的鲁棒性，联邦学习中的数据质量、通信效率及模型可解读性等问题尚未解决，所以将来要不断拓展联邦学习领域安全问题的研究深度，加速相关隐私保护技术的开发进度，
以进一步提升联邦学习的发展水平。参考文献：[1]
余晟兴，陈钟.基于同态加密的高效安全联邦学习聚合框架[J ].通信学报,2023,44(01):14-28.
[2]吴彦霖，邱硕，柳亚男，等.基于联邦学习的安全与隐私保护
技术研究[J ].电脑知识与技术,2022,18(36):71-74.
[3]马鑫迪，马卓然，李清华，等.移动计算模式下联邦学习数据
安全研究[J ].保密科学技术,2022(10):40-44.
[4]方晨，郭渊博.面向数据安全共享的联邦学习研究综述[J ].
信息安全与通信保密,2022(10):66-73.
[5]张洪磊，李浥东，邬俊，等.基于隐私保护的联邦推荐算法综
述[J ].自动化学报,2022,48(09):2142-2163.D
[6]邱晓慧，杨波，赵孟晨，等.联邦学习安全防御与隐私保护技
术研究[J ].计算机应用研究,2022,39(11):3220-3231.
[7]何杨.物联网中基于联邦学习的数据共享关键技术研究
[D ].桂林电子科技大学,2022.DOI:10.
[8]黄国鹏，马鑫，谭美淋，等.基于联邦学习的隐私安全和高效
通信模型[J ].无线电工程,2022,52(03):417-422.
[9]孙爽，李晓会，刘妍，等.不同场景的联邦学习安全与隐私保
护研究综述[J ].计算机应用研究,2021,38(12):3527-3534.[10]肖林声，钱慎一.基于防御蒸馏和联邦学习的安全深度神经
网络研究[J ].湖北民族大学学报(自然科学版),2021,39(02):168-174.
[11]郑立志.基于联邦学习的数据安全在银行领域的探索[J ].中
国金融电脑,2020(09)
:22-26.
收稿日期：2023-05-10基金项目：安徽省高等学校自然科学研究重点项目“基于Vue 的Web 系统前端性能优化研究”（基金编号：KJ2021A1593）。作者简介：冯爱花（1984-），女，安徽当涂人，硕士，讲师，从事计算机应用方面的研究。2023年第07期（总第247期
）
Copyright ©博看网. All Rights Reserved.
127
过运用改进花朵授粉算法，动态变换Web 页面的全局与局部搜索，令种得到优化，并结合差分进化算法优化Web 页面的组合服务，该方法可实现Web 页面组合服务的优化，优化后Web 页面的下载与访问速度均有所改善，但其页面样式未得到
优化，视觉感不强[2]
；由王微微等人提出的Web 应用前后端融合优化方法，该方法主要结合遗传算法与种并行化运算方法，构建Web 应用前后端优化模型，完成对Web 应用前后端性能的优化，该方法虽可实现Web 应用前后端性能优化，降低优化后Web 前端的下载速度，但对于用户的并行连接访问请求，其响应速度过慢，且未对Web 前端页面实施优化更新[3]。
Vue 属于一种较为新颖的前端开发框架，能够支持独立开发，且具备大量的组件库，可将以往应用开发中组件不足等问题有效解决。并行连接调度算法（Scheduling Algorithm for Con-current Connections ，SACC ）属于一类资源分配算法，可针对系统并行连接下的各种设定目标，以一定的规则实现资源的综合优化调度。文章结合Vue 框架与SACC 算法，实现对云管理平台Web 前端页面样式及综合调度性能的共同优化，提升用户的整体使用感受。
1云管理平台Web 前端性能优化方法
1.1Vue 框架的MVVM 开发模式
通过运用Vue 框架实现云管理平台的Web 前端设计，同
时为了能够在各种移动设备上应用所设计的Web 前端页面，选用响应式布局方式对所设计页面实施合理
布局。其中，Vue 框架所应用的开发模式为MVVM ，即Model-View-ViewMo-del ，架构图如图1所示
。
图1Vue 框架的MVVM 开发模式架构图
1.2基于SACC 算法的Web 前端性能优化
（1）Web 前端性能指数选取。选取TSR （开始渲染时间）与TDD （文档下载完成时间）两个指标作为评价Web 前端性能的指数。其中，TSR 指数是指在用户对Web 前端页面实施访问的过程中，由用户端浏览器发起请求至此浏览器呈现出所需内容的用时；TDD 指的是整个Web 前端页面内全部文档数据等的下载用时，该指数会受网络宽带等因素的影响，单独使用意义不大，因此需与TSR 指数共同使用。
（2）SACC 算法优化Web 前端性能的实现。综合考量TSR 与TDD 两种指数为前提，运用SACC 算法构建综合调度权值运算模型，实现连接请求的综合最优调度，达到进一步优化Web 前端性能的目的。为该运算模型设定连接请求对象所需渲染用时与对象大小两个度量属性，二者分别通过T 与U 表示；设定一个权重因子通过表示，TSR 与TDD 占总体等待时间的比例
经由实现调节。通过该运算模型得出各个连接请求的综合调度权值w ，以此值为依据将各连接请求的先后发送顺序确定。设现有一个总数为a 个的待调度连接请求序列，该序列中第i 个连接请求的调度权值w
i 的运算模型可表示
为：
（3）
式中，第i 个连接请求的渲染速度通过V i 表示。基于以上过程得知，连接请求所需的渲染用时越低，同时其大小越大，那么此连接请求的综合调度权值w 越高。故在该待调度连接请求序列内全部请求的w 值均被运算得出之后，依据各个请求w 值的大小，确定不同请求的先后发送顺序。即优先发送w 值高的连接请求，如此能够尽可能地对TSR 与TDD 两个指数值实施最小化控制，完成云管理平台Web 前端的最优化综合调度，进一步优化其综合性能。
2实验结果分析
实验中以某高校网络教学云管理平台为例，运用本文方
法对该平台Web 前端性能实施优化，通过本文方法优化后该平台Web 前端的页面样式呈现效果，以及Web 前端的综合调度效果，检验本文方法的综合优化效果。
实验中权重因
子的值设定为0.45，TSR 与TDD 指数值通过Http Watch Professional 获取。实验中选取学生与教师作为实验平台的应用用户，分别在并发连接上限为3与5两种浏览器中应用该平台，并设定一个包含15个连接请求对象的待调度连接请求序列。实验平台的原有Web 前端页面与本文方法优化后的全新Web 前端页面样式呈现效果如图2所示。由图2可看出，与实验平台的原有Web 前端页面样式相比，经本文方法优化后的全新Web 前端页面样式更为新颖，页面内的彩、元素、结构等更加丰富灵活，各类元素内容呈现更清晰，可为用户带来更高的视觉体验，便于用户操作；另外，在使用过程中，原有Web 前端页面与全新Web 前端页面能够随意切换，二者可共同存在互不影响。
选取移动Web 浏览器缓存性能度量与优化方法（文献[1]）、改进花朵授粉算法的Web 服务组合优化方法（文献[2]）、Web 应用前后端融合的遗传算法并行化优化方法（文献[3]）作为本文方法的对比方法，通过三种方法分别对实验平台Web 前端性能实施优化，检验各方法优化之后，实验平台Web 前端处理实验中各请求对象时的TSR 与TDD 指数，运用两种指数统计结果分析各方法的Web 前端性能优化效果。在并发连接上限为3的浏览器中对各方法优化后实验平台Web 前端性能实施检验，所得检验统计结果详见表1。由表1可知，在并发连接上限为3的浏览器中检验各方法优化后实验平台Web 前端处理各请
Copyright ©博看网. All Rights Reserved.
128
求对象过程中的TSR 与TDD 指数。结果显示，各方法优化后平台Web 前端处理过程中的两种指数值，几乎均随着请求对象的增大而升高，但整体看来，经本文方法优化后实验平台Web 前端处理各请求对象的两种指数值均低于其它三种方法，可见，本文方法优化后平台Web 前端可实现对TSR 与TDD 两个指数值的最小化控制，达到平台Web 前端综合调度性能的最优化
。
（a ）实验平台原有Web 前端页
面
（b ）本文方法优化后全新Web 前端页面
前端响应式布局图2实验平台原有Web 前端页面与本文方法优化后
全新Web 前端页面
表1
三连接上限各方法优化平台Web 前端检验结果
请求编号本文方法
文献[7]方法
文献[8]方法
文献[9]方法
TSR/ms TDD/ms TSR/ms TDD/ms TSR/ms TDD/ms TSR/ms TDD/ms 1259140232615853091506348166222851866354203133719563732115327514563451633329155236517174255139632715813051496349166158386868884868890628919993632185341210038122667276146034916333291559370171788828993425903689548591657221998861848132199601026614293281619317153734617001119113372511517236143727615971218976824592722885826599513191134425315342371455273161614311235339925513762470423264115
190
1111
252
1285
230
1214
274
1365
在并发连接上限为5的浏览器中，继续对各方法优化后实验平台处理各请求对象过程中的TSR 与TDD 指数实施统计，依据统计结果检验分析各方法对实验平台Web 前端性能
的优化效果，所得统计结果如图3所示。由图3可知，当所用
浏览器的并发连接上限为5时，各方法优化后平台Web 前端的两种指数值均低于并发连接上限为3时，且三个对比方法中，文献[3]方法优化后实验平台Web 前端的两种指数值明显低于其他两种方法，但仍高于本文方法，尤其是请求对象较大时，该差距更明显。综合说明，本文方法可实现对实验云管理平台Web 前端综合调度性能的优化，优化效果显著，通过优化调度可有效降低用户访问与下载前端页面相关数据的用时，提高用户满意度与体验
感。
（a ）TSR 指数
值
（b ）TDD 指数值
图3
五连接上限各方法优化平台Web 前端检验结果
3结语
本文针对一种基于Vue 的云管理平台Web 前端性能优化方法展开研究，结果表明：该方法优化后的全新Web 前端页面样式新颖，页面内彩、结构等元素更加丰富多变，各类内容呈现清晰，便于用户操作，视觉体验感较强；在不同并发连接上限的浏览器中检验优化后的全新Web 前端综合调度性能，其TSR 与TDD 指数值均较低，可实现两种指数的同步优化，综合调度性能较高，可有效提升并发用户连接请求情况下，Web 前端页面的访问与下载响应速度，保障页面的顺畅运行与用户的使用感受。参考文献：[1]
马郓，刘譞哲，梅宏.面向移动Web 应用的浏览器缓存性能度量与优化[J ].软件学报,2020,31(07):1980-1996.
[2]谭文安，吴嘉凯.基于改进花朵授粉算法的Web 服务组合
优化[J ].计算机工程,2020,46(12):67-72.
[3]王微微，李奕超，赵瑞莲，等.Web 应用前后端融合的遗传算
法并行化测试用例生成[J ].软件学报,2020,31(05):1314-1331.
Copyright ©博看网. All Rights Reserved.

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。