移动端Web App组件化开发与性能优化

发布时间：2018-03-19 15:53

本文选题：移动互联网　切入点：Web　出处：《山东大学》2017年硕士论文　论文类型：学位论文

【摘要】：近年来,智能移动设备快速普及,移动互联网迅猛发展,根据我国最新的互联网发展状况统计报告,截至2016年6月我国网民数量已经达到7.10亿,其中手机网民6.56亿[1]。移动互联网时代早已经开启,成为了互联网行业的新战场。为了适应快速发展的移动端开发技术,基于HTML5技术的移动端Web App应运而生。Web App是利用HTML5等新一代Web技术实现特定功能,并且运行于网络和浏览器的移动端应用程序。随着设备性能的不断提高,移动端Web App的用户体验也渐渐逼近客户端应用。相对于已被人熟知的Android应用和IOS应用,移动端Web App最大的优势就是不需要下载安装即可使用,用户通过扫一扫二维码,或者通过推送的URL即可打开应用,又无需安装、更新或卸载。并且移动端Web App开发过程高效,版本迭代迅速,具有支持跨平台的内在属性。当然与客户端应用比起来,移动端Web App也存在稳定性低,兼容性差等问题。本论文所述的移动端Web App组件化开发,是针对Web App开发而设计的一种快速开发模式。在大型软件项目开发中,组件化开发能减少代码变更代价,每次变更业务需求时甚至不需要修改代码,仅仅是变更相关配置就可以实现新需求,可以大大提高开发效率,提高代码重复利用率,降低维护成本。另外,移动端设备的电量、内存等资源十分有限,提高移动端应用性能的意义不言而喻。在移动端业务需求越来越复杂的情况下,Web App性能优化的意义也越来越重要。作者读研期间,在腾讯科技(深圳)有限公司-社交网络事业群-社交平台部做过一年软件开发实习生。作者的主要工作就是参与Qzone移动端Web App基础组件库的构建、维护,以及利用基础组件库快速开发手机版QQ空间客户端内嵌的各种Web App,并且对其进行必要的性能优化。本论文所述的Web App组件化开发及性能优化课题,是来源于实习期间所做项目。本论文首先介绍了移动端Web App的发展背景与发展现状,引入了 Web App相关技术HTML5、CSS3、jQuery的介绍。然后介绍了基础组件库和组件化开发模式,以Qzone业务为背景介绍了基础组件库的构建过程,基础组件库主要包括滚屏组件、支付组件、抽奖组件、获奖记录组件、地址填写组件和分享定制组件,并且以一个Web App的开发实例详述了利用基础组件库进行组件化开发过程。随后从脚本加载优化、CSS图像拼合技术优化、Gzip压缩技术优化三个方面探讨了Web App性能优化的方案。最后,论文总结并展望了 Web App组件化开发技术和性能优化技术,以及Web App对移动互联网发展所起的积极作用。
[Abstract]:In recent years, intelligent mobile devices have been rapidly popularized, and mobile Internet has developed rapidly. According to the latest statistical report on Internet development in China, the number of Internet users in China has reached 710 million as of June 2016. Mobile Internet users 656 million [1]. The era of mobile Internet has already opened, and has become a new battlefield of the Internet industry. In order to adapt to the rapid development of mobile development technology, The mobile end Web App based on HTML5 technology emerges as the times require. Web App is a mobile terminal application program which uses the new generation Web technology such as HTML5 to realize the special function and runs in the network and browser. The user experience of mobile side Web App is also getting closer to the client application. Compared with the well-known Android and IOS applications, the biggest advantage of the mobile side Web App is that it can be used without downloading and installing, and the user can scan the QR code by sweeping the QR code. Or you can open the application with a push URL without having to install, update, or uninstall it. And the mobile Web App development process is efficient, version iterations are fast, and it has built-in properties that support cross-platform, of course, compared to client-side applications. The mobile Web App also has some problems, such as low stability and poor compatibility. In this paper, the component development of mobile Web App is a rapid development mode designed for Web App development. Component development can reduce the cost of code change, change the business requirements without even modifying the code, just change the related configuration can realize the new requirements, can greatly improve the development efficiency and code reuse. Reduce maintenance costs. In addition, the power of mobile devices, memory and other resources are very limited, The significance of improving the performance of mobile applications is self-evident. The significance of optimizing the performance of App is becoming more and more important when the requirements of mobile services are becoming more and more complex. Worked as a software development intern in Tencent Technology (Shenzhen) Co., Ltd. Social Network Group, a social platform department for one year. The author's main job is to participate in the construction and maintenance of the Web App basic component library on the Qzone mobile side. And using the basic component library to quickly develop various kinds of Web Appas embedded in the client side of QZone's mobile computer, and carry on the necessary performance optimization to them. The Web App componentized development and the performance optimization project described in this paper, This paper first introduces the development background and current situation of mobile Web App, introduces the Web App related technology, then introduces the basic component library and the componentized development mode. This paper introduces the construction process of basic component library based on Qzone business. The basic component library mainly includes scrolling component, payment component, raffle component, winning record component, address filling component and sharing custom component. In this paper, a development example of Web App is given to illustrate the process of component-based development using basic component library. Then, the scheme of Web App performance optimization is discussed from three aspects: script loading optimization, Web image assembly technology, and Gzip compression technology optimization. This paper summarizes and prospects Web App component development technology and performance optimization technology, as well as the positive role of Web App in the development of mobile Internet.
【学位授予单位】：山东大学
【学位级别】：硕士
【学位授予年份】：2017
【分类号】：TP311.56;TP393.09

【相似文献】