基于改进的Diff算法的Web前端性能优化及应用

发布时间：2017-06-08 02:13

  本文关键词：基于改进的Diff算法的Web前端性能优化及应用，由笔耕文化传播整理发布。

【摘要】：近些年来随着移动终端的广泛普及,移动互联网的增长已经成为互联网发展的主角。然而以HTML5为代表的移动Web应用,还处于初级发展阶段,其本身标准也在不断改进和完善之中。当用户选择产品时,一定会优先选择反应迅速、交互设计完美的产品。因此,优化页面响应速度就必须要对Web应用进行全面性能优化,从而为用户提供更好体验。Web应用的性能优化分为前端优化和后端优化两个方向。目前后端方向的性能优化已经相对成熟,而前端性能优化并未得到与后端性能优化同等的重视程度,依旧存在很大的优化空间。本文重点研究Web前端性能优化,在保持后端系统不变的情况下,努力提升Web应用的整体性能。本文主要做了以下工作：首先,阐述前端性能优化的课题背景、国内与国外的研究状况,再分析前端性能优化的必要性。而后在对Web前端的工作流程进行逐步分析与描述,从HTTP协议本身到浏览器的工作原理,以及移动开发的特殊性等方面,分别进行相关研究与分析。着眼于性能优化的方向,本文从浏览器相关特性出发,并分析编程语言特性,具体到浏览器缓存的使用、CDN加速、图片优化等多方面来逐一进行分析,优化的主要目标是CPU和内存,再联系移动开发的特殊性,进行有针对性的移动前端性能优化方案介绍。其次,对Virtual DOM的差异化算法(diff algorithm)做出了进一步优化。2015年国内最受关注的前端技术是FaceBook公司推出的开源项目React, React提出了Virtual DOM的全新概念,优化了虚拟DOM的diff算法,进而提升了DOM树的对比速度。从算法应用角度来看,React实现了diff算法在前端方向的落地。它通过改变diff的流程与规则,使对比效率大大提升。本文在此基础上,进一步调整算法流程,新增相关规则,从而进一步对算法进行优化,并展示优化效果。最后,设计并实现了Web前端性能监控系统,可以实时监控Web应用状况,获取应用性能参数与用户操作信息,比如：首屏加载时间、白屏时间、用户可操作时间、页面资源是否有效等相关信息,实现对Web应用性能和质量的监控,系统也可以监控用户行为,进而为产品后期优化提供可靠的数据保证。
【关键词】：Web前端 性能优化 虚拟DOM Diff dom tree 性能监控
【学位授予单位】：华中师范大学
【学位级别】：硕士
【学位授予年份】：2016
【分类号】：TP393.09
【目录】：

• 摘要5-6
• Abstract6-10
• 1 绪论10-14
• 1.1 研究背景及意义10-11
• 1.2 国内外研究现状11-12
• 1.3 本文研究内容12-13
• 1.4 本文结构安排13-14
• 2 Web系统前端性能优化的概述14-22
• 2.1 Web系统概述14-16
• 2.1.1 Web应用系统概述14
• 2.1.2 Web系统的起源和发展14-15
• 2.1.3 Web前端应用的演变15-16
• 2.1.4 Web前端内容16
• 2.2 Web应用前端性能优化相关原理16-20
• 2.2.1 剖析一个URL请求响应过程16-17
• 2.2.2 浏览器工作机制17-18
• 2.2.3 HTTP协议分析18-20
• 2.3 移动Web开发的特殊性20-21
• 2.3.1 屏幕尺寸多样化20
• 2.3.2 移动端浏览器内核种类繁多20-21
• 2.3.3 移动设备性能差异化21
• 2.4 本章小结21-22
• 3 Web前端性能优化方案22-34
• 3.1 客户端显示优化处理22-28
• 3.1.1 HTML的优化处理22-23
• 3.1.2 CSS的优化处理23-25
• 3.1.3 JavaScript的优化处理25-27
• 3.1.4 压缩组件27-28
• 3.2 图片优化方式28-29
• 3.2.1 字体与SVG图标28
• 3.2.2 图片格式选择28
• 3.2.3 图片优化处理28-29
• 3.3 Web缓存优化的优化方案29-33
• 3.3.1 浏览器缓存优化30-31
• 3.3.2 Web缓存优化31-32
• 3.3.3 CDN技术32-33
• 3.4 本章小结33-34
• 4 改进的Diff DOM Tree算法对Web前端性能的优化34-49
• 4.1 DOM定义及操作34-35
• 4.1.1 DOM的定义34
• 4.1.2 DOM的节点34-35
• 4.1.3 DOM操作方法35
• 4.2 虚拟DOM35-38
• 4.2.1 虚拟DOM的定义35-36
• 4.2.2 Virtula DOM的简单实现36-38
• 4.3 改进的Diff算法在Web前端性能优化中的应用38-48
• 4.3.1 Virtual DOM Diff算法的由来38-39
• 4.3.2 传统的Diff算法39-41
• 4.3.3 改进的Diff算法41-46
• 4.3.4 基于改进的diff算法的优化46-48
• 4.4 本章小结48-49
• 5 Web前端性能监控系统应用的设计与实现49-54
• 5.1 Web前端性能监控系统应用需求分析49-50
• 5.1.1 系统背景介绍49
• 5.1.2 系统功能需求49
• 5.1.3 系统非功能需求49-50
• 5.2 前端性能监控系统应用原型设计50-51
• 5.2.1 前端埋点50-51
• 5.2.2 用户管理模块51
• 5.2.3 后端处理数据模块51
• 5.2.4 数据展示模块51
• 5.3 前端性能监控系统应用的实现过程51-53
• 5.3.1 前端性能监控系统的技术选型51
• 5.3.2 前端性能监控系统的系统架构51-52
• 5.3.3 前端性能监控系统的监控信息页面的展示52-53
• 5.4 本章小结53-54
• 6 总结与展望54-56
• 6.1 总结54
• 6.2 展望54-56
• 参考文献56-58
• 攻读硕士期间参与项目和科研成果58-59
• 致谢59-60

【相似文献】

中国期刊全文数据库 前10条

1 丁燕云;魏娟;;浅析SQL数据库的性能优化问题[J];科技信息(学术研究);2007年34期

2 ;简单易用网络性能优化软件[J];网络与信息;1999年10期

3 袁山龙,吴洁明;证券网上集中交易系统性能优化的研究与应用[J];微计算机应用;2003年05期

4 张建华;王群华;;对系统性能优化的十点辨析[J];计算机系统应用;2007年05期

5 王勇;;基于SQL数据库的性能优化问题分析[J];电脑知识与技术;2008年15期

6 王保平;;性能优化的简单法则[J];程序员;2009年09期

7 李培慧;何宗键;;某人力资源管理系统中用户导入模块性能优化方案分析[J];科技信息;2010年35期

8 晓慧;;本本性能优化圣手[J];电脑知识与技术(经验技巧);2012年01期

9 王江伟;陈琛;;浅析软件性能优化[J];科技风;2012年08期

10 杨波;;系统性能优化问题研究[J];科技致富向导;2013年09期

中国重要会议论文全文数据库 前10条

1 姚杰;;宝钢不锈钢系统数据库性能优化方案[A];中国计量协会冶金分会2007年会论文集[C];2007年

2 代桂平;殷保群;奚宏生;周亚平;;受控M／G／1排队系统的性能优化[A];第二十二届中国控制会议论文集（下）[C];2003年

3 李彦;王屹;徐继明;;ERP系统的性能优化[A];全国炼钢连铸过程自动化技术交流会论文集[C];2006年

4 赵海波;杨昭;方筝;徐振军;;燃气压缩式热泵系统全年季节性能优化[A];中国制冷学会2007学术年会论文集[C];2007年

5 高明星;;DB2数据库应用性能优化问题浅谈[A];科技、工程与经济社会协调发展——中国科协第五届青年学术年会论文集[C];2004年

6 奚宏生;唐昊;殷保群;周亚平;;Markov控制过程在紧致行动集上的性能优化[A];第二十一届中国控制会议论文集[C];2002年

7 高明星;;DB2数据库应用性能优化问题浅谈[A];铁道部信息技术中心成立30周年暨铁路运输管理信息系统（TMIS）工程全面竣工投产TMIS工程建设论文专辑（二）[C];2005年

8 高明星;;DB2数据库应用性能优化问题浅谈[A];中国铁道学会——2004年度学术活动优秀论文评奖论文集[C];2005年

9 杜劲松;李强;包劲松;;国产600MW机组循环效率试验及性能优化分析[A];2008中国可持续发展论坛论文集（3）[C];2008年

10 杜劲松;李强;包劲松;;国产600MW机组循环效率试验及性能优化分析[A];全国火电大机组（600MW级）竞赛第十二届年会论文集（上册）[C];2008年

中国重要报纸全文数据库 前4条

1 陈翔;性能优化只能救火[N];中国计算机报;2007年

2 本报记者 郭平;EMC简单高效实现私有云[N];计算机世界;2010年

3 ;安图特引入新型数据加速解决方案[N];人民邮电;2008年

4 陈洪康 郭宝群 李雪梅;浅谈VLDB性能优化与维护[N];人民邮电;2001年

中国博士学位论文全文数据库 前8条

1 李攀攀;云服务SLA合规性验证及性能优化研究[D];哈尔滨工业大学;2016年

2 陈伟锋;大规模复杂过程系统的高性能优化理论与方法研究[D];浙江大学;2011年

3 李磊;分布式系统中容错机制性能优化技术研究[D];国防科学技术大学;2007年

4 贾海鹏;面向GPU计算平台的若干并行优化关键技术研究[D];中国海洋大学;2012年

5 那俊;基于两阶段适应的ASBS性能持续优化方法研究[D];东北大学;2011年

6 魏丫丫;Web传输的性能优化[D];清华大学;2006年

7 何倩;P2P系统性能优化若干关键技术研究[D];北京邮电大学;2010年

8 毛宏燕;基于部分计值的服务性能优化研究[D];上海交通大学;2006年

中国硕士学位论文全文数据库 前10条

1 邹兴伟;防伪纤维荧光检测仪性能优化研究[D];西南科技大学;2015年

2 邱能俊;科学大数据云分析服务的性能优化技术研究[D];贵州大学;2015年

3 陈俊t，

本文编号：431060