Vue框架的前端交互性能优化解决方案的研究

摘要

目前我们的生活已时刻离不开网络信息，互联网在社会和经济发展中占据着重要的位置，对于整个社会的影响已经到了我们无法忽视的地步。在某些特殊的情况下，有些活动的展开完全依赖于网络技术，离开了网络技术的支持，很多工作将无法展开。Web技术是网页展现的主要方式，其性能对互联网用户的信息传递及服务体验有着重要影响。因此优化前端性能尤为重要，论文将从多个方面来介绍前端性能优化。 论文提出了一种前端交互性能优化的解决方案，它从以下五个方面来进行性能优化的研究：页面元素优化设计；CSS Sprites合并设计；缓存方案设计；首屏加载设计；网页容灾方案设计。页面元素优化设计主要是从代码编写层面来优化性能，注意HTML、CSS、JavaScript的编写规范及将组件放在合理的位置以便在需要的时候加载，防止页面阻塞带来的白屏等问题。CSS Sprites合并设计是将系统中需要的多张小图标通过该技术合并到一张大图中，通过具体的定位来引入图片，减少HTTP请求个数，减少页面加载时间。缓存方案设计分为浏览器缓存和H5缓存，针对一些长时间不会变更的静态资源，页面刷新时直接使用缓存，无需向浏览器再发送请求。首屏加载设计主要是页面加载时，优先加载首屏内容，之后再加载非关键模块，提升用户体验。网页处在方案设计主要是针对断网或页面请求出错的情况下，使用本地缓存或者备用接口，使系统更友好。系统开发初始，我们便需要从以上各方面来设计系统开发以优化方案。为了验证解决方案的可行性，设计开发了VUE框架的研究所网站。在保证系统基本功能和性能正常的前提下，将方案应用到网站中，对比应用方案前后浏览器响应参数的大小。 前端交互性能优化解决方案的研究，可以为开发人员提供一种在设计开发方案时可供参考并使用的性能优化方案。在设计阶段便引入优化方案，提升了网站开发的效率，减少了网站后期维护的工作量，且为用户提供更好的体验。

目录

第一个书签之前