在线学习平台的前端设计优化与实现

发布时间：2017-10-13 03:23

  本文关键词：在线学习平台的前端设计优化与实现

  更多相关文章： Web前端 模块化 组件开发 性能优化

【摘要】：随着互联网技术的发展,人们越来越习惯通过网络获取信息,在线学习平台也因此应运而生。同时,人们对于网站的易用性和交互体验的要求也越来越高,设计良好、性能优良的网站可以提高用户体验,增加用户留存率,而设计糟糕、性能缓慢的网站则会使用户印象不佳,大量流失。因此对网站应用的前端设计与优化则显得更加重要。本文论述的在线学习平台上线于2012年底,随着业务的发展、功能的增多、用户量的增加,原有的前端架构不堪重负,不能适应快速的发展,产生了大量性能问题,影响了用户体验。因此,本文从框架设计和性能优化两个方面入手,对原有的前端设计进行了优化。本文的工作主要包括：(1)提出了前端框架优化和性能优化的方案。在框架方面,主要从模块化和组件化两个角度进行。整个框架采用分层模式,分为基础功能库、基础组件、应用级组件、模块、子系统等层次。在前端的模块内部采用MVC模式,模块之间通过调度器进行注册和消息通信。组件功能分离为展示结构和功能逻辑的组件,用以降低组件之间的耦合和响应变化。在性能优化方面则结合了雅虎十四条进行归纳和设计。(2)在优化方案的基础上,结合具体业务进行了实现。从课程展示功能、消息通知功能、支付购买功能、个人设置与登录及学习中心等功能的相关页面和组件入手,实现了前端的设计和优化方案。本文的前端架构在模块化和组件化方向上的思想和设计,有利于前端模块化开发和功能解耦,提高了前端的开发效率和维护效率；在性能优化上的实践则为其他应用的前端性能优化提供了参考。
【关键词】：Web前端 模块化 组件开发 性能优化
【学位授予单位】：南京大学
【学位级别】：硕士
【学位授予年份】：2016
【分类号】：TP311.52
【目录】：

• 摘要5-6
• Abstract6-13
• 第一章 引言13-19
• 1.1 选题背景及意义13-14
• 1.2 国内外研究现状14-17
• 1.3 论文研究内容17
• 1.4 论文组织结构17-19
• 第二章 技术综述19-30
• 2.1 前端模块化设计思想与规范19-20
• 2.2 js,HTML与CSS相关技术20-26
• 2.2.1 CSS预编译20-21
• 2.2.2 模板21-24
• 2.2.3 组件化24-25
• 2.2.4 AJAX-RPC25-26
• 2.3 浏览器引擎相关原理26-29
• 2.3.1 webkit渲染页面原理26-28
• 2.3.2 回流与重绘28-29
• 2.4 本章小结29-30
• 第三章 需求分析与前端设计优化方案30-57
• 3.1 平台前端需求分析30-37
• 3.1.1 功能性需求30-36
• 3.1.2 非功能性需求36-37
• 3.2 前端框架设计优化37-46
• 3.2.1 前端架构层次设计37-39
• 3.2.2 前端基础库设计39-41
• 3.2.3 前端模块化设计41-45
• 3.2.4 前端组件设计45-46
• 3.3 平台业务功能的前端设计46-56
• 3.3.1 课程展示功能47-49
• 3.3.2 消息/通知功能49-51
• 3.3.3 支付/购买功能51-53
• 3.3.4 个人设置与登录53-55
• 3.3.5 学习中心55-56
• 3.4 本章小结56-57
• 第四章 在线学习平台前端框架和性能优化的实现57-77
• 4.1 系统部署57-58
• 4.2 前端框架设计的实现58-65
• 4.2.1 课程展示功能的实现58-60
• 4.2.2 消息/通知功能60-62
• 4.2.3 支付/购买功能62-64
• 4.2.4 个人设置与登录64
• 4.2.5 学习中心的实现64-65
• 4.3 性能优化的实现65-72
• 4.3.1 对请求数量的优化66-67
• 4.3.2 优化请求带宽67-68
• 4.3.3 缓存利用68-70
• 4.3.4 页面结构的优化70-71
• 4.3.5 其他优化71-72
• 4.4 系统使用案例72-75
• 4.5 统计分析75-76
• 4.6 本章小结76-77
• 第五章 总结与展望77-79
• 5.1 总结77
• 5.2 进一步工作展望77-79
• 参考文献79-81
• 致谢81-83

【参考文献】

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

1 王运;;Web前端技术在开放大学在线学习平台中的应用研究[J];电脑知识与技术;2015年13期

2 姬一文;吴庆波;杨沙洲;;一种服务器端模板引擎的改进与实现[J];计算机应用研究;2011年03期

3 陈_，

本文编号：1022553