SYS  PRACTICE    系统实践摘要：现代移动互联网发展迅速，各种移动设备应用广泛，Web 应用跨设备、跨平台，受到消费者、
开发者的青睐。Web应用内容形式更加多样，功能越来越复杂。从文字时代到短视频时代，数据信息量越
来越大，对Web 应用的性能提出更高的要求。合理设计缓存方案，不仅可以提高服务器的响应速度，也可
以提升Web 应用的检索率，以及数据利用率。论文以缓存技术为基础，探讨Web前端开发中性能的优化设
计，基于地理位置判断机制，优化Web 前端工程，减少服务器负载能耗，减少重复的网络请求，优化相关
性能。
关键词：Web前端开发；性能优化；方案设计
一、系统需求分析
移动互联网的发展，促进个人移动设备的广泛应用。应用软件的应用信息来源增加，多平台、多设备登录增加，跨设备、跨平台共享和存储信息更加重要。在预设地理区域，用户使用Web应用的一些数据频繁更新，这些数据利用缓存空间可以本地缓存。不依赖于网络传输，也可以实现Web 应用对这些数据的读写，从而大幅减少网页对网络带宽的占用，减少请求数据次数。同时要保证数据的共通性、实时性。存在代理服务器时，用户 Web 应用使用数据，可代理缓存打包存储[1]。离开预设区域位置，要向Web 服务器同步动态，需要一种判断位置信息的机制和方法。同时将本地缓存数据删除，减少空间占用。移动设备上存储浏览器本地缓存，如果内容过多，会降低设备运行速度，消耗存储空间。并且用户手动操作，或者设备故障，可能出现缓存清空。目前，单一的代理缓存，或者本地缓存，已经不符合要求。网络的不稳定，也可能丢失数据。数据请求频繁，浪费流量，或者占用带宽[2]。本文提出优化Web 前端性能设计方案，将代理缓存结合本地缓存，充分利用位置信息判断机制。
二、系统功能需求分析
本文研究Web前端性能优化方案系统，需要实现以下功能：
第一，实时记录位置数据，代理服务器内置 GPS 模块，浏览器获取位置信息。
第二，用户的数据通过局域网收集缓存，向Web 服务器存储发送，同时转发各用户的更新数据。
第三，浏览器本地缓存区实时缓存数据。Web 应用使用时，不通过网络传输，而是先从本地缓存获取。
第四，代理服务器未在线，位置信息无法获取。通过网络向Web 服务器存储发送缓存的数据。请求的数据在浏览器缓存更新。
第五，网络连接状况通过代理服务器检测，如果浏览器无法获取位置权限，由其补充判断。
三、系统硬件框架设计
根据系统功能需求，浏览器、代理服务器、Web 服务器组成系统硬件框架。代理服务器连接Web 服务器，通过因特网[3]。代理服务器提供服务给各移动设备浏览器，利用局域网。一些情况下，Web 服务器也可以与移动设备浏览器通信。
代理服务器组成部分包括，数据存储模块、GPS 模块、3G/4G 转 WiFi 模块。提供局域网缓存和传输多个浏览器数据，以及大型数据[4]。3G/4G转换为 WiFi 信号。
Web服务器对用户信息及其他信息进行存储和绑定，也可以转发数据。用户改变代理服务器，新的代理服务器，由Web 服务器会转发数据。通过局域网，向浏览器发送。
浏览器可以本地缓存数据，主要是平板电脑、手机等设备上的浏览器。
本文研究的系统中，代理服务器的资源与浏览器数据交换，主要通过局域网。代理服务器连接用户，各用户Web 应用的数据，由代理服务器收集缓存[5]。同时转发 Web 服务器的更新数据。通过结合代理缓存与浏览器本地缓存 优化Web 前端性能。
四、系统应用框架设计
本文研究系统应用框架设计，主要模块包括网络检测模块、位置判断模块、数据缓存模块、请求同步模块等。代理服务器与Web 客户端浏览器，通过网络检测模块，检测网络连接状态。在正常的连接状态下，与位置信息
Web前端开发中性能优化方案设计探讨
张永福
◆
31
SYS  PRACTICE    系统实践
相结合，判断是否更新同步Web 客户端缓存，向用户呈现最新的结果。设置位置判断模块，减少 HTTP 请求，同步更新代理服务器、浏览器的缓存数据，应用Web 服务器，位置判断模块执行判断机制，获取代理服务器、浏览器设备的位置，进行相应的数据同步更新决策。数据缓存模块主要在代理服务器、浏览器本地缓存区，缓存用户数据[6]。并且协作请求同步模块传输缓存数据。请求同步模块可以实现代理服务器、浏览器缓存模块的交互，基于网络状态、位置信息判断机制，Web 客户端浏览器判断更新缓存数据可以进行，向代理服务器发出请求，同步更新数据。
五、系统操作流程
（一）设备连接过程。通过局域网，移动设备浏览器连接代理服务器。收集更新数据，在浏览器本地缓存中存储。用户ID由代理服务器获取，向Web 服务器存储传送。对该用户相关的各类信息进行存储，由Web 服务器建立个人数据库。
（二）位置判断过程。对于移动设备的地理位置，浏览器会请求信息权限。如果获取位置信息，记为 LOC_ TER。LOC_CAR为代理服务器的地理位置。对两个地理位置的距离进行计算，记为SUB。如果SUB比预设的值小，为VALUE。然后判断预设的地理位置LOC_END，与浏览器设备地理位置 LOC_TER，两者是否相等。如果相等，进行信息发送[7]。浏览器设备中存储的缓存信息，向代理服务器发送。多个用户浏览器设备缓存信息，通过代理服务器，向Web 服务器发送存储。接着删除浏
览器设备存储的缓存数据。判断浏览器设备连接代理服务器，是否是通过局域网。判断为局域网正常连接[8]。然后判断预设地理位置与代理服务器地理位置是否相等。缓存在本地的用户信息，浏览器设备打包向Web 服务器存储发送。
（三）数据传输过程。浏览器可以向Web 服务器直接发送信息，利用网络进行。浏览器也可以向代理服务器发送数据，通过局域网进行。代理服务器再向Web 服务器发送。
用户对Web 应用进行访问，主要通过浏览器。浏览器连接代理服务器，主要通过局域网，Web 应用的资源文件，都可以被浏览器获取。用户 ID由代理服务器获取，代理服务器向Web 服务器发送用户 ID，告知该用户已上线[9]。多个用户的缓存数据与代理服务器连接，Web 服务器向代理服务器发送这些缓存数据。对应的浏览器 Web 应用，由代理服务器发送缓存数据。返回的页面数据保存，通过Web 应用的数据缓存模块，在本地缓存区更新。浏览器向用户申请位置信息权限[10]。如果允许获取设备的位置信息，位置判断机制开始启动。如果浏览器设备到达预设地理位置，相比预设值，代理服务器与浏览器设备位置距离更小，通过局域网，浏览器的缓存数据向代理服务器发送，然后向Web 服务器发送多个用户的数据包。浏览器的本地缓存同时被删除，如果设备位置信息权限不被用户允许，检测网络连接，代理服务器到达预设地理位置，Web 应用在线，代理服务器发送缓存数据，与Web 服务器共享。
六、结语
随着移动互联网的发展，Web 用户不断增多，在人们的生活和工作中发挥重要的作用。现在Web 前端页面更加多元化，视觉冲击感越来越强，内容越来越丰富，对Web前端性能提出了更高的要求。优化Web 前端性能，可以提升用户体验，提高网站的运行速度，节约服务器的宽带流量，并且一定程度上对缓解服务器运行压力有重要的作用。各种浏览器技术不断提升性能，在周期、新标准等方面都有明显的突破。Web 前端性能优化要求高的逻辑思维应用，涉及知识面广，本文结合用户的网络需求，以及预设地理区域数据的频繁更新，构建移动设备浏览器 Web 应用，利用位置信息对缓存方式进行优化。利用地理位置判断机制优化Web 前端工程的性能。
参考文献
[1]何莉.Web前端开发技术及其优化策略[J].通信电源技术,2020,37(6):140-141.
[2]时明.Web主流前端开发框架研究[J].信息记录材料,2020,21(5):215-216.
[3]单斌.Web前端开发技术以及优化策略分析[J].数字技术与应用,2020,38(4):83-84.
[4]郭小琛.1+X证书Web前端开发试点探索与实践[J].福建电脑,2020,36(5):32-34.
[5]张晓龙.Web前端开发技术的优化发展[J].电脑知识与技术,2020,16(11):78-79.
web端登录[6]薛玉倩.基于HTML5的Web前端设计与开发[J].内蒙古科技与经济,2019,(17):68-69.
[7]喻会.基于网站制作的Web前端开发技术与优化策略分析[J].信息通信,2019,(11):265-266.
[8]张志敏.基于HTML5的Web前端开发技术研究[J].山东农业工程学院学报,2019,36(12):21-22.
[9]焦新伟.HTML5在WEB前端开发中的应用研究[J].网络安全技术与应用,2020,(4):73-75.
[10]韦秀行.基于网站制作的Web前端开发技术与优化[J].信息与电脑,2020,32(1):58-59,62.
（作者单位：山西林业职业技术学院）
32

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