基于Diff算法的Web前端性能优化及评估

发布时间：2020-06-25 06:15

【摘要】：Web应用在Hybrid APP中越来越重要。然而,相对于Native应用,Web应用的打开速度和交互响应速度较慢。本文旨在提升Web应用的加载性能和渲染性能,使Hybrid APP中的Web应用具有与原生Native应用相近的性能,从而为用户提供更好的体验。传统的静态存储实现主要采用浏览器提供的接口,具有容量限制和兼容性问题。本文提出离线与增量更新插件系统,将Web页面静态资源存储在移动端内置存储器中,以提升Web应用打开速度。传统的增量包生成算法包括Rsync算法和编辑距离算法,Rsync算法复杂度较低但是生成的增量包体积较大,编辑距离算法生成的增量包体积较小但复杂度较高。本文利用Rsync算法复杂度低和编辑距离算法生成的增量包体积小的特点提出了新的增量包生成算法,在增量包体积相对于编辑距离算法无明显增加的情况下,提高了增量包生成效率。React框架使用虚拟DOM树表示Web页面,并使用React Diff算法计算虚拟DOM树之间的差异,根据差异更新Web页面。React Diff算法计算同层虚拟DOM节点差异时,得到的结果差异性较大。本文提出了最长公共子数组算法,优化了 React框架使用的Element Diff算法,节省了交互等待时间。利用模块化思想设计和实现了离线与增量更新插件系统并对其进行了功能测试和性能测试。此插件系统实现了页面静态资源本地存储,当再次访问此页面时无需再向服务器发送资源请求,使得请求等待时间减少了59%。在资源版本更新时,增量更新使用的增量包占完整资源体积大小的20%至30%,并且实现了 31%的加载速度提升。将最长公共子数组算法应用于React框架中后,节省了 5%的页面交互等待时间。
【学位授予单位】：北京邮电大学
【学位级别】：硕士
【学位授予年份】：2019
【分类号】：TP393.09;TP301.6
【图文】：

执行机制,中间件

第二章相关技术及方案现状．２邋Ｗｅｂ邋框架邋Ｋｏａ逡逑Ｋｏａ是基于Ｎｏｄｅ．ｊｓ平台的下一代Ｗｅｂ开发框架，特点是简单、表达力度较高。Ｋｏａ应用程序是一个包含一组中间件（Ｍｉｄｄｌｅｗａｒｅ）函数的对象，处于Ｈｔｔｐ邋Ｒｅｑｕｅｓｔ和Ｈｔｔｐ邋Ｒｅｓｐｏｎｓｅ之间，用来实现中间功能。首先，级中间件中提供了高级的语法糖，包括内容协商、缓存清理、代理支持等常见任务的方法，提高了互操作性和稳健性，使得书写中间件更加程序开发工程师愉快地开发服务端应用程序。另外，Ｋｏａ通过使用ａｓｙｎｃ决了回调地狱问题，并有力的增强了错误处理。逡逑Ｋｏａ中的功能通过中间件实现，每个中间件函数接收两个参数作为参数，二个参数是ｎｅｘｔ函数，调用ｎｅｘｔ函数会把执行权交给下一个中间件函个Ｋｏａ应用中如果存在多个中间件，这些中间件是按照类似堆栈的方执行的，执行机制如图２－１：逡逑

矩阵图,编辑距离,矩阵,动态规划

当第一个字符串的第ｉ个字符不等于第二个字符串的第ｊ个字符时，上述逡逑动态规划公式中的ｆ（ｉ，ｊ）邋＝邋１，否则ｆ（ｉ，ｊ）邋＝邋０。当旧文件为“ｂｕｐｔｓ”，新文件为逡逑“ｂｖｐｔｏｎ”时，根据上述动态规划公式计算得到图２－４：逡逑ｂ邋ｖ邋ｐ邋ｔ邋0邋ｎ逡逑ｂ逦０逦１逦２逦３逦４逦５逡逑ｕ逦１逦１逦２逦３逦４逦５逡逑ｐ逦２逦２逦１逦２逦３逦４逡逑ｔ逦３逦３逦２逦１逦２逦３逡逑ｓ逦４逦４逦３逦２逦２逦３逡逑图２－４编辑距离矩阵逡逑１１逡逑

【相似文献】