基于web前端的性能优化框架模型计算机研究

来源: www.sblunwen.com 作者:vicky 发布时间:2018-10-12 论文字数:37411字
论文编号: sb2018091421150523061 论文语言:中文 论文类型:硕士毕业论文
本文是一篇计算机论文,本文通过研究前后端分离模型,研究前后端分离的开发模式,提出一种高效的前后端技术分离模型,设计了面向 SaaS 应用的前后端分离模型,并提出了面向企业业务应用
本文是一篇计算机论文,本文在基于 Nignx 的负载均衡算法基础上,实现 web 前端性能的优化,大量的静态页面的访问可以通过 Nignx,后台不再关心静态页面访问带来的压力,提升了 web 网站的处理效率。最后,本文通过企业级开发应用的实践,将上述模型及方法应用在一款上线的企业级 web 产品开发中,通过实践证明该开发模型能够满足多终端的设计及运行需求,在访问及使用过程中,效果较好,能够满足企业级 web 应用程序的大型分布式架构、弹性计算架构、微服务架构、多端化服务的开发需求。

1 绪论

1.1 课题研究背景与意义
宽带的普及,让网速变得越来越快的同时也让网页越来越复杂,用户的耐心越来越少,网页打开时间稍长,就会造成大量的用户流失。对于 Web 性能的追求不仅仅是用户体验上的需要,更是互联网公司核心业务的驱动力。无论是靠电商、游戏、娱乐、社交、搜索引擎功成名就的 IT 巨头,都在实践中证明:网站越快访问体验越好,用户黏性越高、用户忠诚度更高、用户转化率也越高。可见,随着互联网的发展,web 应用的复杂化,web 性能优化的重要性有增无减。
本文深入研究前后端分离的开发模式,提出一种解决多终端兼容,解决web 性能的组件化开发和打包部署的开发模型,提升前后端开发效率,最后通过实际系统的开发,证明该模型的高效性。
雅虎公司作为互联网公司的先驱,其前端团队提出 14 条网站性能优化原则:尽量减少 HTTP 的请求数,使用 CDN,添加 Expires 头,启用 Gzip 压缩,将 CSS 放在页面最上面,将 script 放在页面最下面,避免在 CSS 中使用Expressions,把 JavaScript 和 CSS 都放到外部文件中,减少 DNS 查询,压缩 JavaScript 和 CSS,避免重定向,移除重复的脚本,配置实体标签,使 AJAX缓存。其给出的优化建议多是基于现行 HTTP 协议展开的,并未对协议进行改进。
........................

1.2 国内外研究现状
Google 公司对 Web 应用程序前端的性能优化也非常重视,其研究和开发了多款提升前端性能的应用,包括:
(1) Web 前端性能的分析插件 Page Speed;
(2) Javascript 和 CSS 的压缩工具 Google Closure Compiler;
(3) 自主研发的 V8 JavaScript 引擎在运行之前将 JavaScript 编译成了机器码,以此提升性能;
(4) google 的前端框架 AngularJS 实现构建单页面应用,得到广泛使用,但是,伴随着模块化在 ES2015 的尘埃落定,更多优秀的框架如 reactJs、VueJs,对 AngularJS 的首要地位造成撼动,其中重要的一点是 AngularJS文件太大,对性能有一定的影响,因此 2015 年新出的 AngularJS2.0 在性能方面进行一定的改进,提升其竞争力;
(5) Google 甚至在协议上进行改进,Google2012 年开始 SPDY 项目,致力于在 HTTP/1.x 之上实现更快的速度,目前处于起草阶段的 HTTP2 也是基于SPDY 的标准,HTTP2 的出现让 web 性能得到大幅度的提升,目前已得到众多大公司的应用和浏览器(其中就有 google Chrome)的支持,但是HTTP2 的普及还需要相当长的时间,google 为了推广 HTTP2,宣布在 2016年停止对 SPDY 项目的支持。
由上可见,互联网巨头 google 公司对于 web 性能也是非常重视的。
相比国外,国内的 web 前端研究起步较晚,但是国内 web 前端技术发展迅猛,近几年国内领先的 IT 公司在 web 前端性能方面做了大量的研究和实践。
..........................

2 相关技术分析

2.1 Json 技术介绍
JSON 是一种 JavaScript 对象表示法(JavaScript Object Notation),是一种轻量级的文本数据交换格式。JSON 基于 ECMAScript 的一个子集,采用完全独立于编程语言的文本格式来存储和表示数据。相较于 XML,JSON 以简单的数据结构表示复杂的数据结构,从而简化工作量。虽然 JSON 使用Javascript 语法来描述数据对象,但是 JSON 独立于语言与平台,针对 JSON,许多编程语言都有解析器和序列化器。JSON 简洁和清晰的层次结构让它成为理想的数据交换语言,易于人们阅读和编写,同时也易于机器解析和生成,并有效地提升网络传输效率。在语法上,JSON 文本格式与创建 Javascript对象的代码相同。在 Javascript 的语法中,一切皆对象,因此可以用 JSON来表示任何 JavaScript 支持的类型,比如常见字符串、数字、数组、对象等类型的值。在实际应用中,JSON 常用来表示复杂的数据结构,其中数组和对象是比较常用的两种类型。
JSON 表示对象:首先了解对象在 JavaScript 中是使用花括号包裹{}起来的内容,数据结构为{key1:value1, key2:value2, ...}的键值对结构。在面向对象的语言中,key 为对象的属性,value 为对应的值。键名可以使用整数和字符串来表示,值的类型可以是任意类型。JSON 键值对是用来保存JavaScript 对象的一种方式,和 JavaScript 对象的写法只有小部分的差异,键/值对组合中的键名写在前面并用双引号(符号为" ")包裹,使用冒号(符号为:)分隔,然后紧接着值,如下举例表示 JSON 表示对象和 JavaScript语法的区别于联系:

........................

2.2 Node.js 技术介绍
Node.js 是一个采用 C++程序编写和基于 Chrome V8 引擎的 JavaScript运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型,使其轻量又高效,且其可以跨平台使用。Node.js 的包管理器 npm,代替 Node.js 解决了许多部署上的问题,提高开发效率,Node.js 8 已经发布了,NPM 模块每周下载量超过 10 亿,是全球最大的开源库生态系统。
Node.js 逐渐发展成一个成熟的开发平台,近几年,Node.js 吸引了越来越多的关注,其发展和被关注度已然有超越 Java 的趋势。基于 Node.js 的应用层出不穷,国内外诸多大型高流量网站都采用 Node.js 进行开发,比如:PayPal 为全世界 2 亿活跃用户提供服务,PayPal 选择 Node.js 替换 Java 开发后端,使前后端开发只需要使用 javascrip 一种语言,数据统计显示 PayPal采用 Node.js 之后,应用开发速度提高 2 倍、文件数目减少 40%、代码量减少 33%,并且,接口的请求时间减少了 35%、每秒处理的请求数增加了 2 倍;Mozilla 使用 Node.js 开发了大量应用,统一前后端使用 javascript 一种开发语言,从而提高开发效率;淘宝双十一,天猫首页、天猫的活动页和双十一会场等页面全部都基于 Node.js 应用提供服务,据淘宝开发团队描述,Node.js 不仅帮助前端开发团队高效解决双十一页面渲染上的问题,并且降低了硬件成本;微软、腾讯等也采用 Node.js 做网络应用。
Node.js 的发展,为 web 研发模式带来了新的解决思路,即通过在传统的前端和后端之间引入 Node.js 作为中间层,使得前端和后端实现完全解耦,业界诸如阿里、百度都已有基于 Node.js 做前后端分离的应用 。
Express 框架是 Node.js 在实际应用中必不可少的一部分,Express是一个基于 Node.js 平台的灵活且极简的 web 应用开发框架,提供一系列强大的特性帮助开发人员创建各种 web 应用,但是不对 Node.js 已有的特性进行二次抽象,它只是在 Node.js 的基础上扩展 web 应用所需的基本功能。Express提供丰富的 HTTP 快捷方法和任意排列组合的 Connect 中间件,可以帮助开发人员快速创建健壮且友好的 API。Express 框架的核心特性提供:支持通过设置中间件来响应 HTTP 请求;支持定义的路由表来执行不同的 HTTP 请求动作;支持通过向模板传递参数来动态渲染 HTML 页面。Express 的安装和实施也比较简单,其官方文档提供了完整的实施教程。
..........................
3 基于 web 前端的性能优化关键技术............................. 15
3.1 基于 web 前端性能的影响因素分析................ 15
3.1.1 浏览器的工作原理................. 15
3.1.2 影响 web 前端性能的因素................. 19
4 面向 SaaS 应用的性能优化框架模型的实践............................. 25
4.1 SaaS 应用的业务介绍和概要设计................. 25
4.1.1 需求分析..................... 25
4.1.2 概要设计............................ 30
5 测试和对比分析........................ 54
5.1 功能测试......................... 54
5.2 性能测试........................... 57

5 测试和对比分析

5.1 功能测试
针对该电子签名系统,功能性测试主要从系统实现的业务逻辑、系统功能实现程度以及不同终端网页视觉渲染效果三方面做测试,该系统面向多终端设计,功能测试分别对移动端和电脑端做了测试,电脑端的功能模块包括登录、注册、文件、文件签署、文档预览、签章管理、个人信息设置、实名认证,移动端的功能模块包括文件、文件签署、个人信息,根据系统功能进行可测试用例编写并根据测试用例进行了测试,发现的 bug 已经得到及时的解决。
视觉渲染效果测试主要是测试移动端和电脑端网页的渲染是否正常,按照不同终端对应渲染的指定页面,使用 Chrome 自带的终端模拟工具进行测试,移动端和电脑端的网页测试结果显示是正常,页面根据不同终端进行了适配渲染。如下图 5-1 以登录界面分别在移动端和电脑端的渲染测试效果图作为示例:

..............................

6 总结与展望

6.1 总结
经过对本文提出的 web 前端性能优化模型的实践和测试,证明了该模型在 SaaS 应用开发过程中的可用性和高效性,在 SaaS 应用性能问题上进一步提高了开发效率,并且为企业级 web 应用程序的大型分布式架构、弹性计算架构、微服务架构、多端化服务打下坚实的基础,从而增强企业竞争力。其带来的具体好处表现在如下几方面:
(1) 解耦前后端职责,从而解决前后端协作问题:基于 Node.js 的前后端分离方案,后端与前端只需要通过 restful api 接口进行连接,前端的路由配置等不再受限于后端,后端对外只需要关心提供的接口服务,将更多的精力放在后端服务的架构和性能上,脱离了前端的页面管理工作。
(2) 前后端开发由串行变为并行,提高整体开发效率:前后端分离之后,前后端通过接口进行直接联调,即使后端接口没有实现也不影响前端开发继续进行,前端可以通过调用 mock 数据先进行接口对接工作,同时后台进行接口的实际开发并进行单独的接口测试。前端完成之后,测试也可以按序进行。对于前端来说,后台接口开发完成之后,只是更换一下接口地址即可,从而实现前后端开发并行的效果。
(3) 前端开发人员按层分配任务,减小新人上手难度:面向企业业务组件化的开发模型进行工程构建,可以轻易实现将前端开发人员进行分层,擅长网络层和 javascript 开发的人员,即可专注 web server 端与后台接口的对接,并且可专注书写提供客户端调用的 javascript 模块,而擅长css 和 html 的前端开发人员,即可专注 UI 业务组件的实现,同时新人也可以快速上手,减少团队招人的困难。
参考文献(略)


原文地址:http://www.sblunwen.com/jsjlw/23061.html,如有转载请标明出处,谢谢。

您可能在寻找计算机论文方面的范文,您可以移步到计算机论文频道(http://www.sblunwen.com/jsjlw/)查找