充值商店前端系统的设计实现与性能优化

发布时间：2021-10-29 16:04

　　随着移动互联网的快速发展,基于移动平台的各种应用不断涌现,满足了人们日常生活中方方面面的需求。其中Web应用因为其具有的轻量、跨平台、便于维护等优秀的特性,在移动互联网时代扮演着不可替代的角色。现在人们对移动Web应用依赖越来越重,加上越来越庞大的用户群体,这些因素给移动端Web应用带来了新的挑战,性能优化已经成为决定一款移动端Web应用优劣的重要因素。通过分析Web应用的工作模式,结合B/S架构、浏览器渲染机制、HTTP和HTTPS协议以及HTTP缓存等方面的工作原理,得出影响前端页面性能的主要因素是资源加载耗时严重。其中HTTP缓存机制难以准确控制缓存过期时间,存在资源更新不及时和无意义的304请求等问题,可以利用Localstorage实现本地缓存和增量更新的方案进行优化,提高缓存命中率,消除304请求;大部分网站为了提高页面安全性都启用了 HTTPS协议,但同时会因为加密连接和握手而增加建立连接时耗,可以用SPDY协议和提高SSL Session复用率等方法提高HTTPS协议下的建立连接性能;同时针对SPA单页应用中首页加载内容增多而影响加载性能的问题,提出用首页数据直出和资源... 

【文章来源】：华中科技大学湖北省 211工程院校 985工程院校 教育部直属院校

【文章页数】：77 页

【学位级别】：硕士

【部分图文】：

图２－１传统Ｗｅｂ模式工作流程??（３）?Ａｊａｘ工作模式??

?｜＼??＾＇ｖｉｖｉｖｉ＾??发起谓求?晌应谓求?发起谓求?响应诮求?发起谓求?响应谓求??Ｉ，Ｕ?Ｕ?Ｕ?＞１??服务器〉??图２－１传统Ｗｅｂ模式工作流程??（３）?Ａｊａｘ工作模式??Ａｊ?ａｘｉ作模式的核心是利用晃步ＪａｖａＳｃｒｉｐｔ实现异步请求。图２－２展示了?Ａｊ?ａｘ模??式工作流程１??｜?页面１?＞?｜?页面２?＞??？?ｒ?ｒ?ｔ?ｔ?ｒ?ｒ?７?ｔ?＾??Ｉ１?＼＼Ｍ??ｒ?Ｕｊ?Ｕ??Ｉ服务器??图２－２?Ａｊａｘ模式工作流程??９??

会随着用户的操作而翼新加载页面或者进行页面跳转，而是利用ＪａｖａＳｃｒｉｐｔ在浏览器??做业务处理，动态地变换页面内容，从而对用户操作做出响应［２４］，ＳＰＡ应用〇：作模??式如图２－３所示。单页Ｗｅｂ应用并不是突然诞生的一门新技术，而是Ｗｅｂ页面展示的??一种新的方式，可以提供菲常流畅的甩户体验，使Ｗｅｂ应用拥有可以媲美Ｎａｔｉｖｅ应??用的体验。??丽１〉?页面１?＞?页面１?＞??ｃ?ｒｒ？?ＴｒｒＴ??Ａｊａｘ组件〉?．??Ｉ：围??Ｉ，ＶＵ?ＵＳ??［服务器＞??图２－３?ＳＰＡ应用工作流程??１０??


本文编号：3464962