Web资源离线化和增量更新平台的设计与实现

发布时间：2020-05-08 14:39

【摘要】：随着互联网行业的高速发展,越来越多的企业开始希望实现软件产品的高速迭代,并且降低软件的开发成本。在这样的背景下Web App被越来越多的厂家所关注,Web App具有跨平台,更新灵活的优点。用户无论何时打开都可以访问到最新的版本,厂家无需维护多个版本的应用程序,极大的降低了开发成本和运维成本。但是由于Web App对网络的依赖高的特点,Web App的加载性能一直是一个短板,在Web App加载的过程中一般需要多次资源请求,如果用户的网络状况不佳例如延迟大、带宽低资源请求的时间就会大大加长,很多Web App在弱网的条件下无法满足用户需求。该平台主要瞄准网络这个限制Web App加载性能最大的短板,提出了一套全新的解决方案。利用离线化技术将用户使用的资源文件存在本地,在次访问页面时可以直接从缓存中读取资源,无需重新进行网络请求,大大减少了网络请求的数量。使用增量更新的方式在更新时只下载文件变动的部分,无需重新下载全量的文件减少对网络带宽的消耗。利用这两大核心技术减少Web App对于网络的依赖,同时减轻应用服务器的流量压力,使应用服务器的并发性能得到很大的提升。通过利用浏览器支持的缓存方式以及我们提供的资源缓存方案可以使缓存变得可控,相较于浏览器的缓存策略使用代码去控制缓存策略可以使Web App在不同的浏览器中达到一致的缓存效果,更加准确的判断缓存的有效性。用户可以针对性的缓存加载时需要的资源,当用户再次访问系统时就无需重新下载资源,大大的提高了页面的加载性能。同时增加了缓存的校验,提高了缓存的可靠性为增量更新提供了基础。通过构建资源管理平台可以对项目的历史资源进行系统化的管理,开发者可以通过可视化的操作界面或者命令行工具来管理自己的Web资源,并且可以将历史版本统一管理,让增量更新成为可能。当应用程序发生更新时,如果用户的缓存中有历史版本的缓存,用户只需要发送增量更新请求,增量更新后台服务会为用户计算升级到最新版本的补丁包,下载含有文件发生变化部分的补丁包即可完成更新,大大的降低了更新时的网络开销,降低了对网络的依赖,提高了缓存的利用率。该系统简单易用,开发者只需要简单的操作即可完成接入,对业务代码的侵入性极低,极大的降低了接入成本。接入后可以对Web应用程序的加载性能和更新速度起到极大的提升。本人在项目中主要完成了命令行工具、后台管理系统、离线化模块的Local Storage模块的开发以及智能预热模块的方案设计。最终该平台达到了设计的预期目标,但是该平台还有很多需要优化改进的地方,有待在日后的工作中改进。
【图文】：

加载过程

Ｆｉｇｕｒｅ邋１－１邋Ｗｅｂ邋Ａｐｐ邋ｌｏａｄｉｎｇ邋ｐｒｏｃｅｓｓ逡逑（２）网络状况逡逑从前面的Ｗｅｂ邋Ａｐｐ加载过程可以看出Ｗｅｂ邋Ａｐｐ加载时的几个关键环节都是赖于网络。随着谷歌公司的Ｖ８引擎的出现以及硬件设备的日益升级目前Ｗｅｂ引逡逑擎对于ＪａｖａＳｃｒｉｐｔ的执行效率以及页面渲染效率己经非常高了［５］，所以在Ｗｅｂ邋Ａｐ加载时间里网络加载时间一般占了绝大的部分。Ｗｅｂ邋Ａｐｐ通过网络下载资源的过逡逑程中会经过非常多的环节，任何一个环节出现抖动都会对网络的响应时间造成非逡逑常大的影响进而拉长页面加载的时间。逡逑在页面请求资源时首先浏览器会将资源的ＵＲＬ域名发送给ＤＮＳ服务器。ＤＮＳ服务器会把这个域名翻译成对应的ＩＰ地址。查询到ＩＰ地址后ＤＮＳ将域名所对的ＩＰ地址发送给浏览器。浏览器通过ＩＰ地址与服务器三次握手建立ＴＣＰ链接。逡逑通过ＴＣＰ链接浏览器发送ＨＴＴＰ请求，请求Ｗｅｂ邋Ａｐｐ中的各个资源，，最后服务返回浏览器请求的资源［６］。具体请求过程如图１－２所示。逡逑服务逡逑

过程图,资源请求,过程,域名

下载ＪＳ文件逡逑ｃ加载完成）逡逑图１－１邋Ｗｅｂ邋Ａｐｐ加载过程逡逑Ｆｉｇｕｒｅ邋１－１邋Ｗｅｂ邋Ａｐｐ邋ｌｏａｄｉｎｇ邋ｐｒｏｃｅｓｓ逡逑（２）网络状况逡逑从前面的Ｗｅｂ邋Ａｐｐ加载过程可以看出Ｗｅｂ邋Ａｐｐ加载时的几个关键环节都是依逡逑赖于网络。随着谷歌公司的Ｖ８引擎的出现以及硬件设备的日益升级目前Ｗｅｂ引逡逑擎对于ＪａｖａＳｃｒｉｐｔ的执行效率以及页面渲染效率己经非常高了［５］，所以在Ｗｅｂ邋Ａｐｐ逡逑加载时间里网络加载时间一般占了绝大的部分。Ｗｅｂ邋Ａｐｐ通过网络下载资源的过逡逑程中会经过非常多的环节，任何一个环节出现抖动都会对网络的响应时间造成非逡逑常大的影响进而拉长页面加载的时间。逡逑在页面请求资源时首先浏览器会将资源的ＵＲＬ域名发送给ＤＮＳ服务器。ＤＮＳ逡逑服务器会把这个域名翻译成对应的ＩＰ地址。查询到ＩＰ地址后ＤＮＳ将域名所对应逡逑的ＩＰ地址发送给浏览器。浏览器通过ＩＰ地址与服务器三次握手建立ＴＣＰ链接。逡逑通过ＴＣＰ链接浏览器发送ＨＴＴＰ请求，请求Ｗｅｂ邋Ａｐｐ中的各个资源，最后服务器逡逑返回浏览器请求的资源［６］。具体请求过程如图１－２所示。逡逑服务逡逑服务器域名逡逑服务器ＩＰ逡逑ＴＣＰ三次握手／逡逑／邋Ｙ逦邋ＳＹＭ＝Ｌ邋ｓｅｑ＝ｘ邋逦＾邋资＇逡逑浏邋＞—ＳＹＮ＝１，邋ＡＣＫ＝１，邋ｓｅｑ＝ｙ；邋ＡＣＫｎｕｍ＝ｘ＋ｌ邋—＾源逡逑览逦ＡＣＫ＝１，邋ＡＣＫｎｕｍ＝ｙ＋ｌ邋逦＾邋月艮逡逑器
【学位授予单位】：北京交通大学
【学位级别】：硕士
【学位授予年份】：2019
【分类号】：TP311.56;TP393.09

【参考文献】