探讨Web前端开发中性能的优化设计

　　摘 要：现代移动互联网发展迅速，各种移动设备应用广泛，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 客户端缓存，向用户呈现最新的结果。设置位置判断模块，减少 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.

　　[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.