移动Web前端性能与图片优化的研究

1、 泌峭?硕士学位论文移动前端性能与图片优化的研究论文作者:朱聚豹指导教师:郑世珏教授学科专业:计算机系统结构研究方向:计算机网络华中师范大学计算机学院年月何匆,彳劢缀豇.觑 :.硕士学位论文 华中师范大学学位论文原创性声明和使用授权说明原创性声明本人郑重声明:所呈交的学位论文,是本人在导师指导下,独立进行研究工作所取得的研究成果。除文中已经标明引用的内容外,本论文不包含任何其他个人或集体已经发表或撰写过的研究成果。对本文的研究做出贡献的个人和集体,均已在文中以明确方式标明。本声明的法律结果由本人承担。作者签名:日期:,年/月弓日薯醐学位论文版权使用授权书学位论文作者完全了解华中师范大学有关保留

2、、使用学位论文的规定,即:研究生在校攻读学位期问论文工作的知识产权单位属华中师范大学。学校有权保留并向国家有关部门或机构送交论文的复印件和电子版,允许学位论文被查阅和借阅;学校可以公布学位论文的全部或部分内容,可以允许采用影印、缩印或其它复制手段保存、汇编学位论文。保密的学位论文在解密后遵守此规定保密论文注释:本学位论文属于保密,在?年解密后适用本授权书。非保密论文注释:本学位论文不属于保密范围,适用本授权书。导作者签名:味象韵日日期.,;年月日本人已经认真阅读“高校学位论文全文数据库发布章程”,同意将本人的学位论文提交“高校学位论文全文数据库”中全文发布,并可按“章程”中的规定享受相关权益。

3、作者签名:来日期:加,许硕士学位论文 摘要近年来,随着智能移动设备的普及,移动互联网成为了互联网发展的新动力,同时也为移动学习的跨越式发展带来了新契机。移动设备间的差异和无线网络资源的稀缺决定在移动学习开发时必须关注应用的性能问题。在纷繁复杂的移动学习站点中,用户更倾向于使用可以迅速响应、完美交互的优秀产品。这就形成了对站点进行优化的迫切需求。站点优化可分为后端优化和前端优化两部分。研究表明,用户响应时间中只有%是花在了下载文档上,其余的时间则花在了下载页面中的所有组件上。也就是说,如果关注前端性能并将其响应时间减少一半,整体响应时间可减少%;加之国内在后端的优化技术已经比较成熟,所以本文专注

4、于前端的性能优化。本文首先介绍了移动前端优化的国内外研究现状,提出进行移动前端性能优化的必要性。然后对的工作方式如协议、浏览器工作机制等和移动开发的特殊性进行介绍,工作方式构成了在移动学习开发过程中进行性能优化的现实依据和理论基础。本文中间部分从、图片和缓存五个方面,围绕内存和两个核心主题,结合移动学习开发的实践,分类展开了移动前端性能优化方案的介绍。本文最后对图片优化方案之一,进行了制作时的再优化。现在每个网站都有大量图片需要下载,而一个一个地下载不如整合到一块下载来的迅速,这就是技术。 技术的出现在一定程度上加速了网站的响应时问,从而可提供更好的用户体验。前端开发起步较晚,而图片制作往往是

5、交互设计师的任务,职能的细化造成了他们在实际工作中不能采用软件工程师一样的思维去用算法进行优化。本文针对的制作,提出一个将多个具有不同宽度和高度的矩形图像整合为一个矩形图像时的优化算法,并展示了此算法是如何达到最优的一个过程。关键词:移动学习;前端;性能优化; ,. ,., ,. .%, . % %,. ,.?, , .,/,.,., , . . , . . ?; ;: ;硕士学位论文 目 录摘荽?.?.?.第一章绪论?.课题背景?。.国内外现状分析?。.国内现状.国外现状?.:。.本文所做工作?一.论文章节安排第二章前端性能优化概述.网站优化?。.搜索引擎市场营销?.网站性能优化.前端性能优

6、化。.站点页面的组成.客户端工作机制?.协议.移动开发的特殊性一.屏幕尺寸多样化?。.设备性能?一.本章小结?.第三章移动前端性能优化的方案. 的优化处理.减少的重新布局与重绘?. 的合法性测试.的压缩处理。.的优化. 文件放在文档顶部?。.编写高校的选择器?.利用的?硕士学位论文 .不要过分信任和滥用.的内存控制?一.事件处理.数据访问.算法优化和流程控制?.的加载与执行?.图片的优化.简单的优化处理?一.具体的无损图像优化?。. 及其优化?。.移动设备对图片的特殊要求?一.利用缓存技术.本章小结?。第四章 制作算法的提出与优化?.常规算法?.算法的平凡解一.常规算法?一.不重叠地放置矩形一

7、.算法改进?.减小闭合矩形的宽度时有效增加高度?一.无法放置所有的矩形时有效增加闭合矩形的高度.权衡外接矩形的大小与求解时间。.算法测试?.评测标准.测试结果.本章小结?第五章总结与展望?.总结.展望.参考文献?。攻读硕士学位期间参与的项目?:谢硕士学位论文 第一章绪论.课题背景一个站点的访问者,在获得良好的用户体验前,首先要能够快速地获取想要浏览的网页,才会有兴致继续停留在该站点进行其它操作。如果一个滚动条艰难爬行了秒还没有剑达终点,大部分用户会关闭这个网页。而对各互联网公司,尤其电商来说,丢失客户就意味丢失利润。来自、网站的数会导致用户搜索请求据统计再次证明了这一点:网站访问速度每慢下降.

8、%;.的加载时间每增加其收入下降%;网站若有延迟会导致流量下降%。提高网页加载速度有助于提升用户的满意度,让公司获得更高的转换率【】。截止年月底,我国域名总数为万个,在中国境内的网站数多达万个,网页数量为亿个。年中国单个网站的平均网页数和单个网页的平均字节数均保持增长:平均网站的网页数达.万个,较上年同期增长.%;平均每个网页的字节数为,增长.%;我国网民规模达.亿,其中 网民数量为.亿,占网民规模的.%。我国站点和用户的规模已处于高位。网络视频、网络购物、团购、电子支付、旅行预订、 即时通信、社交网站等各类应用方兴未艾,科技正以前所未有的方式改变着人们的生活习惯。年我国用网人员平均每人每周上

9、网时长达到.小时。如今,云计算服务如火如荼,国外的、等代表着云计算的先驱,国内的阿里巴巴、百度、腾讯等公司也都开始运营商业化的云计算服务。用户只需一个浏览器,就可完成多数工作。把所有的应用通过/架构来实现,无论是对于服务器、网络系统还是客户端,都提出了很高的要求。伴随着、 等移动产品的出现与普及,移动端的应用呈现受到社会越来越多的重视。社交类移动应用如新浪微博、腾讯微信,新闻客户端类应用如搜狐、网易,国内公司都在向移动倾斜。年,我国移动端网站处于快速发展初期,端网站无线化速度加快,在总网站的比例高达%【。被称为未来的学习模式的移动学习,如能抓住这次移动互联网高速发展的历史机遇,必会成为教育界的

10、一次变革。移动互联网虽然作为互联网发展的新极点成为了公司角逐的战场,移动设硕士学位论文 备的配置也日新月异,但用户不再仅满足于简单地获取信息,他们更希望通过移动设备获得如同端一样顺畅、良好的用户体验【】。而移动联网的整体仍有一定局限,如设备配置整体低、屏幕分辨率各异、网络带宽慢等,这对站点的优化提出了更为迫切的需求。除此之外,移动设备间功能和尺寸各异,这也无疑增加了移动应用推广的难度。移动学习的推广,面临着同样的问题。程序设计语言编移动应用的实现现在主要有两种模式,一种是用不具有平台无关性,写,一种是充分借鉴并利用万维网已有经验和技术。更多的选择的是后者。无论是端,还是移动设备上,作为在线应用

11、,内容都是存在服务器上的,客户端通过协议向服务器发送请求,服务器处理后会在响应中回送所请求的数据。客户端和服务器构成了万维网的基本组件。服务器端和网络系统通常被称为“后端”,而客户端则被称为“前端。一次完整的交互包含后端和前端两部分。自然站点性能优化应该包含后端性能优化和前端性能优化两部分。不过事实上,只有%的最终用户响应时间消耗在从服务器获取文档并经网络传送到浏览器这一过程中。而关于后端优化,比如数据库索引、内存管理等一直以来都受到很大重视。在站点优化中,更应关注那剩余的%的最终用户体验。本论文主要就是针对移动客户端的性能优化,也即前端性能优化。.国内外现状分析.国内现状国内互联网的生态环境

12、不容乐观,中国互联网低质站点的比例很高。年中国低质站点占/,低质站点的泛滥给中文互联网网站的运营发展产生的负面影响已日益突出。这些低质站点,大多数为采集页面或具有明显的作弊行为,不仅内容无甚价值,在用户体验上也是乏善可陈。而对优质站点的分析表明,用户对高质量视频资源及图片资源、商品供求类资源的需求明显增长。在国内互联网界,站点优化势在必行。国内部分优秀的互联网企业已经认识到这个问题,并在网站布局中采取了优化措施。阿里巴巴、百度、腾讯等公司已经拥有自己独立的用户体验师和前端工程师等,在网站性能优化和用户交互体验上开始向优秀标准靠拢;但多为照搬外国已有经验成果,在前端性能优化意识上,和众多中小型公

13、司一样,依旧淡漠,很少能独硕士学位论文 立发现并解决性能问题。国内越来越容易更快地受到国外科技变化的影响。国外科技公司风云变化,当年的诺基亚在的冲击下,没几年的时光就已然湮没无闻。苹果从当年的几欲破产,到后来发布一系列让世人至今惊叹不已的移动产品,智能 和平板电脑借着西风在全世界迅速扩张并普及。移动互联网上似乎蕴含着一切的可能性。国内公司都开始着手布局移动互联网,试图抢占移动互联网利益争夺战场的高地。移动学习也应该重新思考并布局。移动学习不仅仅是把传统的学习资料整理成能在移动设备上可呈现的方式,如今它更应注重学习的社交化、碎片化、游戏化、即时化。移动意味着只要想起就可以拿起的便捷,但现在的智能

14、移动终端都有一个明显的缺陷,就是电池续航能力弱。无论用户通过移动浏览器实现什么,移动支付也好,移动学习也罢,都需要为剩余的电量提心吊胆。当浏览图片内容丰富的新闻网站时,当在学习论坛上进行一些简单却频繁的交互时,电池电量正加倍损耗。即便电量问题在未来的某一天不再成为问题,但用户也许仍要为用 打开一个个人主页一半时卡掉而烦恼不已。这就要求在网站开发时考虑到移动接收端,进而进行相应的优化。而对于移动前端性能优化的系统考虑与总结,国内更是稀少。现在国内公司对前端岗位的认识正在逐步转化,并有了一个不错的技术分享的氛围。但在大学内,前端依旧更多地被认为是一个非技术流的学术方向而不被重视。很少有大学专门开设

15、前端相关课程,学生在前端方面的知识积累更多地源于从国外站点进行自学。技术在实践中才能得到最好发展甚至创新,这句话在前端界甚是合适。而本文就是对目前参与项目详见攻读硕士学位期间参与的项目之三中遇到问题的总结、解决与创新。.国外现状在国外,尤其是美国,前端性能优化是一个非常重要的研究课题,被众学者和工程师所重视,他们甚至会计较到一个字节。他们在前端性能优化方面做出的成果具有很大的借鉴意义。而 就是其中的佼佼者之一。性能布道者,也是前首席性能工程师。其是结合.以来开发领域的最新形势和特点,系统提出了改善网站性能的条优化原则,并开发了网页性能分析插件,对于改善前端性能有很大辅助作用。现作为互联网大佬,

16、也一直很重视网站优化。它在年推出的是版本号更新最快的浏览器,其设计简单而高效,的最新标准一般都可在该浏引擎在解析速度上更是让其他览器上找到支持,而该款浏览器依赖的浏览器厂商只能望其项背。曾推出一款服务器组件,可有效改进服务器的服务器请求;推出的曲网页图像标准也比传统的格式图片更小加载更快。也推出一款网页性能分析插件,名叫,它不仅给出了优化建议,更量化地给出了如果采用了建议性能将得到的改善。但是以上内容如同国内现状,多是针对传统客户端的前端性能优化,移动前端性能优化寥寥无几。.本文所做工作针对国内前端性能优化意识淡薄、移动互联网迅速崛起的现状,本文首先阐述了站点优化的概念,并着力阐述前端性能优化

17、的基础理论和移动开发的独特性。然后从、图片和缓存五个角度出发,分析移动前端性能可优化的环节,并提出优化方案。接下来,针对其中的图片优化,提出将多个具有不同宽度和高度的矩形图像整合为一个矩形图像时的优化算法。.论文章节安排本文主要工作是对移动前端性能优化问题进行总结,并提出一种的优化算法。共分五章,内容如下:第一章绪论。阐述选题背景及研究内容,概述本论文主要研究内容及章节安排。第二章阐述移动前端优化的基础理论,包括协议、浏览器的渲染机制等,并分析了移动设备的特殊性,这些基础理论和现实构成了研究前端性能优化时的基石。第三章分为六个小节,从、图片和缓存技术五个角度出发,分别提出优化方案,这些优化方案

18、的提出,是第二章介绍的基础理论的外在表现,如果不能遵循或者利用正常的理论,那极有可能出现性能的亏损。第四章着重介绍针对将多个具有不同宽度和高度的矩形图像整合为一个矩形图像时的优化算法,并展示了此算法是如何达到最优的一个过程。这是对移动设备端比较重视的一个性能问题的探究。第五章总结本文所作的工作,在此基础上提出有待进一步解决的问题,并对移动曲前端性能优化进行展望。硕士学位论文 第二章前端性能优化概述云计算和物联网的发展如火如茶,科技生活必定会进步到“一网打天下”的一个时代。到那时,足不出户,人们就可以通过电脑或者智能手持设备等终端实现远程办公、团购、旅游预订、电子支付等,具体的实现操作对用户来说

19、是透明的,实际上,用户也无需关心这些功能实现细节。用户感兴趣的是这些应用是否具有较好的可用性、流畅的交互操作。这便需要对网站进行优化,以便更好地满足用户需求。.网站优化关于网站优化的本质,不同的人有不同的理解。网站优化大师.认为,网站优化 ,本质上是一系列最大化网站投资收益的行为。可用性大师则从用户角度出发,认为,网站优化的最终目的是为了更好地服务用户【。尽管在网站优化的最终目的上意见分歧,但在对网站如何优化上,学术界和工业界都保持了观点上的一致性。网站优化要使站点的一些评价指标达标,如,网站要易于发现【】、更方便使用、访问速度更快、更有美感、运营费用更低以及更有吸引力【。从网站利益相关者出发

20、,便是要采取一些切实有效的方法实现这一系列的指标,从而为企业带来更大经济效益。从用户角度出发,便是想用户之所想、急用户之所急,为用户提供便捷、流畅而优雅的服务。可分为两个方向:搜索引擎市场营销,和网站性能优化。.搜索引擎市场营销是为了提高网站的展现率而采取的一些措施,主要有使用自然搜索引擎优化和点击付费广告,以及优化转化率。当用户有需求时,经常的操作是在搜索引擎的搜索框中键入几个关键字,在搜索结果页面中查找自己满意的结果。让站点获得更高搜索引擎排名,从而更易被检索到就显得非常重要。这是因为大约四分之三的搜索者不会浏览第一页以后的搜索结果¨。就是获得高排名的过程。提高企业品牌知名度的有

21、效方法是广告宣传,在互联网世界亦无例外。点击付费或,广告,是向网站导入流量的一种广告模硕士学位论文 型,只有在广告被点击时,网站拥有者才向广告提供商付费。这种方法费用很高,、百度竞价,以及但是效果也很好。现在有许多广告商,如搜狐和新浪等门户网站等。以上两个都是为让更多的用户点击站点而可采取的措施。然而网站,尤其是电子商务网站,它们不仅仅需要用户浏览自己的站点,更需要采取多种不同技术将一般访客变为买家。而这种途径通常被称为转化率优化,它也包括吸引访问者带来更多可以转化成买家的访问者【 。可实现最大转化率的方法有很多,比如使用基于可信性的设计、增加网站的易用性、设计一个能引人注目的广告语等。主要是

22、针对想要提高网站可见度和转换率的网络商家,三种措施的具体实施者各有不同。可以由专门的专家来完成,有各种商家提供此服务,则更多地涉及到应用心理学和设计学。.网站性能优化网站性能优化是指改进网页内容、优化服务器以更快地发送网页。它包括前端性能优化和后端性能优化两部分。当用户点击了搜索引擎结果页面的链接,或直接在浏览器地址栏键入网站地址时,用户便与目的网站开始了一次简单的交互之旅。一次应用程序请求,就是从浏览器发出一些参数到网站的服务器,然后服务器上的程序对请求进行处理,再生成浏览器可识别的内容,最后由浏览器将这些内容渲染呈现给访问者。人们将这一过程划分为“后端”和“前端”。如图.所示: 通常认为“

23、后端更具神秘性,更具影响力。程序员在后端已经投入了很大精力,尝试各种优化方法,如大数据处理中数据库的性能优化、算法的改进、索引的定期维护等。在现在众多用户的海量需求面前,网站必须有运营良好的后台做支撑。后端性能优化是网站性能优化不可或缺的重要组成部分。然而,事实上在后端消耗的时间只占整个流程的%。其余则全部消耗在了前端。前端性能的优化,更利于网站整体性能的提升。.前端性能优化在开展前端性能优化之前,有必要理解下站点页面的组成,客户端的工作机制以及对性能的影响。.站点页面的组成。一个网页可分为结构层、表现层、行为层三部分【结构层给予内容含义,是网页最重要的基础。表现层定义如何显示。行为层则为页面

24、增加交互。结构层是一个网页不可或缺的基础。而和则都是可选项,它们的存在给页面的显示提供了更多的可能,并增加页面的交互性。曲,和的规范主要由万维网联盟来维护。是下一个主要的修订版本,现在仍处于完善阶段。广义上讲时,实际指的是包括、在内的一系列技术组合,。旨在减少浏览器对插件的利用时不损失甚至增强网页的表现性能【.客户端工作机制这里的客户端特制的是浏览器。今天主流浏览器有、和】五种。浏览器的主要功能是呈现用户选择的资源。这要求浏览器首先向服务器发送请求,然后将响应显示在浏览器的窗口中。资源格式通常是的,但也有、图片和其它种类的。资源的位置由用户使用统一资源标识符来指定。浏览器如何解释并呈现文件由和

25、规范决定。浏览器历来是大佬们利益争夺的重要焦点。在互联网热潮初期,微软公司和网景公司就曾展开了长达年之久的浏览器之争,最终以网景公司的失败告终。微软率先在上支持,但同时在其发展中加入了非标准的专属标签,令做出的网页只适合使用浏览器。而且在年微软取得竞争的胜利后,在很长的时间内没有更新浏览器硕士学位论文 的技术。目前的情况是,对于既有的和规范标准,现在各浏览器的支持程度会有不同,即便支持,对同一标签的解释和呈现方式有的也有不同。这为开发者带来了严重的兼容性问题。但是各厂商的浏览器的工作原理大体是相似的。浏览器的结构浏览器的主要构件有【引:用户界面 , :由地址栏、后退/前进按钮、书签菜单等构成。

26、也就是浏览器窗口中除了显示用户请求的页面的部分,其余皆是浏览器的用户界面。浏览器引擎:在查询和操作渲染引擎的接口。渲染引擎 :负责在窗口中显示请求到的内容,浏览器的灵魂。如果请求的内容是文档,那它就用来解析和,计算网页的显示方式,然后将内容输出呈现至屏幕上。所有的网页浏览器、电子邮件客户端以及其他需要编辑、显示网页内容的应用程序都需要渲染引擎。网络:用来调用网络,比如,丌请求。它的接口具有平台无关性,可为每个平台实现底层实现。后端 :用于绘制会话框、窗等诸如此类的基本组件。提供了平台无关的通用接口,底层则采用操作系统的用户界面方法。:用于解析和执行代码。查解析器数据存储 。浏览器需要在本地硬盘

27、上保存各种数据,如。定义了 技术,这是一种轻量级的客户端存储技术。浏览器的渲染引擎对网站在客户端的性能表现很重要。以下对此进行了深入分析。渲染引擎渲染引擎因浏览器而异。微软的使用的是,使用的是,的和的使用的则是框架不过在最新的中,已采用自主浏览器引擎代替了引擎,曾使用自己的渲染引擎在年月号宣布将浏览器迁移到上。渲染引擎首先要从网络层获取所请求文档的内容。之后按图.所示流程工作:硕士学位论文 渲染引擎首先要解析文档,把其中的标签转换成相应的节点,而节点则由父子关系、兄弟关系构成树。是文档对象模型的缩写,是文档的对象表示,作为元素的外部接口供等调用。解析算法是用状态机来描述的。当解析完成后,浏览器

28、将文档标记为交互状态,并触发一个事件;同时浏览器开始解析处于“延时”模式中的脚本,这些脚本只有在文档解析完成后才执行。是一种“软性”的语法,它能包容语法上的错误,简化网络开发。如果文档的格式正确,就直接解析;如果格式错误,出现了无效的代码,解析器会在内部进行一定的纠错处理。虽然不同浏览器的错误处理机制相似,但错误修复的过程无疑增加了解析负担,从而延长了解析时间。接着,开始解析外部文件和内嵌元素中的样式,样式信息结合树,最终构建一个渲染树。规范定义了的词法和语法文法,渲染引擎会从语法文法中自动生成解析器,将每个文件解析成为样式表对象,每个对象包含规则。规则对象则包含了选择器和声明对象,和其它一些

29、符合语法的对象。在此同时,如果解析器遇至标签时,默认情况下会立即解析并执行脚本。这会阻断文档的解析过程,直至脚本执行完毕。如果脚本是外部的,文档的解析过程同样会被阻断,直到从网络获取脚本完成后再继续。在中如果将脚本标注为“”,这样它会等到文档解析结束后才执行,从而不会阻断文档的解析过程。增加了一个选项,可将脚本标记为异步,这样可以由其他线程解析和执行圳。渲染树由一些包含了颜色、大小等可视化属性的矩形构成,它们的顺序决定了在屏幕呈现时的先后。渲染树和树是相对应的,但并不是一一对应的。不可见的元素不会被插入到渲染树中,比如元素,属性为“”的元素,但属性值为“的元素仍旧会出现在渲染树中。在构建渲染树

30、时,每个元素的可视化属性通过对其样式属性的计算而得。样式属性的来源包括浏览器默认样式表,网页作者和用户提供的样式表等。样式数据是非常大的结构,保存大量的样式属性会带来内存问题,而且为每个元素查找匹配的规则都需要遍历整个样式表。构建完渲染树后,渲染引擎就开始布局了。在这一过程中,每一个节点都会被分配上一组用以在显示器上显示的精确坐标。使用基于流的布局模型。它从根渲染对象开始,然后递归遍历部分或所有的框架层次结构。通常情况下,只需遍历一遍就能计算出元素的几何信息。处于流中较后位置的元素通常不会影响靠前位置元素的几何特性。但中表格的计算就需要不止一次的遍历。当一个渲染对硕士学位论文象发生了变化或被添

31、加或被删除时,就可能引发该渲染对象或整个渲染树的重新布局。如果变化只是发生在元素自身而并不干扰其他元素,那么布局并不从根开始。下一步,就是绘制渲染树了,渲染引擎会遍历渲染树并利用后端绘制出来。结果就是浏览器窗口中的效果,或者是一个制作精美的富媒体网页,或者是一个简单的静态网页。和布局一样,绘制也可以使全局或部分的。为了获得更好的用户体验,渲染引擎并不会等到完全被解析完才开始创建并布局渲染树。这是一个渐进的过程,渲染引擎总是试图最早地将内容呈现出来。也就是说,在渲染引擎的实际工作中,它是边解析边呈现的,甚至是同时还正在从网上下载网页的其它组件。.协议客户端的网络构件是用来调用网络的,主要是进行丌

32、请求【】。号称是因特网的多媒体信使,是现代全球互联网中使用的公共语言。使用的是可靠的数据传输协议,可保证图片、页面、等资源从服务器到客户端的迅速、便捷、可靠地迁移¨。当下采用的协议版本当下采用的协议有几个版本,应用程序需要尽量强健地支持多种不同协议。主要使用的版本是/.。该版本协议继承自?/.,在其基础上校正了设计中的结构缺陷,明确语义,引入重要的性能优化措施,并删除了一些不好的特性。无奈的是,有些显而易见的错误,无法矫正,比如首部的拼写错误仍在沿用。不过已经被广泛使用,且无伤大雅,那就将错就错了。报文语法报文可分为两类:请求报文 和响应报文】。请求报文向.服务器请求一个动作,响应报

33、文则携带请求结果返回给客户端。请求报文和响应报文的报文结构基本类似。请求报文的格式:方法请求瓜版本号首部实体的主体部分响应报文的格式:版本号状态原因短语首部硕士学位论文 实体的主体部分方法是指浏览器希望服务器对资源执行的动作。比如,等。请求是请求资源的位置表述。版本号是报文使用的曙版本,格式为/主版本号.次版本号。首部是一系列的键值对,可以有零个或多个首部。每个首部首先是一个名字,后跟着一个冒号,然后是一个可选的空格,接着是一个值,最后是一个空行。实体的主体部分包含一个由任意数据组成的数据块。不是所有的报文都包含实体的主体部分。状态码描述了请求过程中发生的情况。由三个数字组成。原因短句是面向人

34、的,是数字码的具体解释。当在浏览器本文凡提到浏览器的,若不指明,均指地址栏输入.并敲击回撤键后,请求报文内容没有实体的主体部分如下:/.:.:.:.:/,/,/;.,?严;:.:/. ./. 刑,删./.:,:,;.:;.,枣;.:一.;.?接收到的响应报文内容如下有实体的主体部分,但未录:订/. : :,:?/.?:/.:/;硕士学位论文 : :,: :,?:,:,:?:.的连接管理连接是报文传输的关键通道,由/承载,位于网络协议栈的应用层。如图.所示,其中是的安全版本,就是在和之间加了一个密码加密层。?的连接之于网页就好比交通状况之于汽车,对网页下载速度有直接影响。回应用层叵应用层叵安全层

35、田传输层传输层口网络层口网络层】圃数据链路层二困数据链路层图. 和网络协议栈传送报文时,以流的形式将报文数据通过一条打开的连接按序传输。收到数据流之后,将数据流分成被称为段的小数据块,并将段封装在分组中,经由互联网进行传输。啤位于的上层,因而旧事务的性能在很大程度上取决于底层通道的性能。在建立连接,传送请求报文,处理和回送响应报文的过程中,事务处理时间可能是很短的。除非浏览器或服务器超载,或正在处理复杂的动态资源,否则时延就是由网络时延构成的。与缓存相关的首部以下主要针对协议里与性能相关的部分进行剖析,而与性能相关的主要是缓存处理幽。如果有本地缓存文件,曙协议的缓存机制可以保证在本地缓存文件有

36、效期硕士学位论文 内无需将,丌请求报文送至服务器端,而直接利用本地的缓存文件。这大大减少了网络传输时间,从而可提高网络性能。与缓存机制有关的首部主要有口:/.四:一个时间,试图告诉浏览器,在此日期内,缓存可无需与服务器联系而直接使用缓存中的副本。缺点是,绝对时间依赖于计算机始终的正确设置。/.:一个时间,标示被请求实体的最后修改时间,用来校验其缓存副本是否过期。但缓存过期了并不意味着它和原始服务器上的文档有实际的区别。为此,协议提供了五个条件方法用来缓存再验证。.:最常见的缓存再验证首部,如果自指定日期后,文档被修改了,.条件为真,通常返回一个常规的请求的响应。否则,返回一个 响应报文。.:实

37、体标签再验证,如果服务器上的实体标签已经发生变化,服务器会在一个 响应中返回新的内容以及相应的新的。:./.:对定义的唯一伪指令,效果等同于,丌/.的.:。./.:值有以下:仅在响应首部里出现,意识是任何途径的缓存者,可以无条件地缓存该响应。:告诉缓存者,只针对单个用户缓存响应,且可以具体指定某个字段。.:在请求首部中出现,是要告知缓存者,必须原封不动地转发原始请求,不许使用任何缓存副本;若出现在响应中,则允许缓存者缓存副本,只是在与原始服务器进行新鲜度再验证前,缓存不能将其提供给客户端使用。.可以出现在请求和响应首部中,表示请求和响应都禁止被缓存。.表示从服务器将文档传来之时起,可以认为此文

38、档处于新鲜期的秒数。.移动开发的特殊性现在全球智能 和市场进入高速增长阶段,平板电脑也开始在消费者里迅速蔓延。各种移动终端丰富了人们的生活,一定程度上也满足了工作需求。但移动设备各公司软硬件标准不一,屏幕大小多样。这就形成了移动开发的独特问题。.屏幕尺寸多样化移动手持设备屏幕分辨率各异,即便是同一产品,其不同版本间也没有统一标硕士学位论文 准。表.所示的是公司的几种移动产品:表.几种移动设备的屏幕分辨率 类型× ×屏幕分辨率考虑到移动设备除 之外,还有大量的平板电脑等,移动手持设备屏幕分辨率之杂可见一斑。这要求在网站制作时需要考虑到大多数情况。而这个问题是在传统的网站开发中

39、不需考虑的。屏幕尺寸不同造成的影响是多方面的。为在不同设备上尽量呈现出相同的效果,首先要进行设备识别,而在移动端进行网页布局时也采用不同与传统前端工作的流体布局。在图片载入上,工程师也需针对不同尺寸的设备制作不同大小的图片。要综合考量,保证各设备的兼容。.设备性能高端智能 和平板电脑的性能参数。型号 .双核单核双核. 四核.小米四核. 四核. .酷睿 智能 正在以空前的速度发展,但性能仍有一定局限,而且考虑到所有用户,低中端设备的拥有者占多数。用户交互,网页从服务器端下载到本地需要占用一定内存,而网页的解析、渲染、布局、绘制等工作也必定消耗内存。在移动设备中,系统资源分配给浏览器的资源是有限的

40、。这就要求在移动端编写网页,除了考虑各硕士学位论文 设备分辨率的兼容问题,还应该考虑到设备性能问题。从问题本质出发,本论文认为在移动前端性能优化中,必须坚持减少的实时运算消耗和减少内存中存储的内容这一主题。.本章小结本章首先从站点优化全局出发,讲述了前端性能优化在站点优化中的重要性和必要性。接着重点介绍了网页的基本构成、浏览器的工作机制、协议对性能的影响,这是接下来解决移动端性能问题的关键所在。而在本章最后,对当下移动设备进行分析,指出移动开发面临的问题,并提出处理移动前端性能优化的两个核心:和内存。硕士学位论文 第三章移动前端性能优化的方案上一章节已指出移动性能优化应该关注的两个核心问题是和

41、内存,这也是移动学习在移动端实践时应该关注的两个性能上的核心问题。页面主要有、和组成阁。下面就针对这两个核心,借鉴传统性能优化方法的同时,考虑到移动端的特殊性,分别从、和网络性能出发提出相应的优化措施。.的优化处理是网页的结构层,构成了网页的基础架构。中的标签被解析成元素,元素操作不当会引发全局布局与重绘,从而造成严重的性能损耗。.减少的重新布局与重绘用进行操作以改变网贞部分元素的代价是很昂贵的,这是富应用和移动开发常见的性能瓶颈。由第二章的浏览器的工作原理可知,的解析与执行,同操作与渲染是由两个不同的框架来完成的。这意味着,如果要利用去操作对象,就需要使两个独立的框架通过接口产生连接。而连接

42、通道的产生便产生内存损耗。因此要尽量减少与的操作。另外元素的改变有可能引起局部布局甚至全局布局的改变,进而引发重绘操作。如果对操作次数很多的话,会造成更为严重的消耗。避免直接操作在需要访问元素或者集合元素时,可使用局部变量指代元素。比如以下:.”;/.”;/在文档外建立一个文档片段,对其进行操作,并在最后将该片段加入到文档中叨。代码如下:.,”觚”,”】,;.;.”;】硕士学位论文 .;.;.;对需要修改的节点创建一个副本,对副本进行相应操作,然后在操作完成后将副本代替原来的节点。.”,.,【”舡”】,;”;.”;.;.”;.;.;.,;利用浏览器的渲染机制,可以先将元素设为不可见,然后对其进

43、行各种操作,最后将元素设为可见。这样也可以避免多次布局和重绘。代码如下:.¨”;.”;.”;”;.”;或利用和字符串特性,先将修改的内容处理为一个字符串,最后将字符串以被操作元素的形式添加进来。使元素脱离文档流由浏览器工作机制得知,脱离文档流的元素是不会影响文档中其它元素的布局与渲染的。因此,可以将有可能改动的元素脱离文档流。而脱离文档流的常用方法是,设置元素的属性为进行绝对定位,或设置为进行固定定位。另外,浮动元素在布局和渲染过程中也是完全脱离文档流的。减少可能修改的元素的子代数量与深度元素被修改而需要重新布局和重绘时,其子代元素也会进行重新布局和硕士学位论文 重绘。因此,减少可能

44、修改的元素的子元素的数量,可减少重新布局和重绘的工作里减少影响元素布局位置的属性的变动元素只有在影响位置的属性,如宽高、外边距、内边距等,改动时,会影响其他元素甚至整个文档的布局,这是最坏的情况,这时需要重新全局布局与绘制。因此,应尽量避免修改影响元素布局位置的属性的变动。减少标签的使用浏览器对标签的布局与绘制过程需要反复遍历,如果文档中出现大量元素,网页呈现与用户可交互时间会被大大延迟。.的合法性测试虽然现代浏览器都有较好的容错性,但如果站点中出现了标签没闭合、标签丢失、标签错误嵌套等情况时,轻者仅是增加浏览器的纠错修复时间,严重的则会出现在不同浏览器出现不同显示效果的局面。加上移动端尤其是

45、 端浏览器做的不如端浏览器功能强大与完善,在网站发布前,对其进行反复测试保证的合法性是最低的要求。现在的测试框架有、等【】。. 的压缩处理要尽可能地对文档进行压缩处理。用户向服务器发送的请求首部中有个是,表示该浏览器支持哪种编码转换类型,服务器端可以用来压缩文档至相应的格式以获得更快的下载。目前的值包括:、和。是目前最流行和最有效的压缩方法,压缩后可减少%左右的响应量【】。而在响应首部中,有个的首部,表示针对中的某个值,服务器端采用了对应的方法进行了压缩。对统计的国内网站进行分析后,如表.,从中可以看出各大网站对压缩的重视。但并不是每个站点都注意到了这个问题,比如.。硕士学位论文 朊 压缩方

46、压缩方式压缩方式式. .的优化是网页的表现层,.和新的标准规范的充分利用可以使应用更加优美,但是使用不当则会加剧内存的损耗,从而有损于网页的呈现。下面介绍的优化方案。.文件放在文档顶部这同样与浏览器渐进渲染并显示的工作方式相关。如果将文件放置在文档底部,当浏览器下载并解析完文档其它组件后,并不能进行显示,必须等到文件下载并解析后,才能构建出渲染树,进而实现网页内容的布局与绘制。而如果将文件放置在文档项部,则首先下载并解析文件,形成样式表对象,并与之后浏览器下载的其它组件一起,构建部分渲染树,实现渐进渲染与显示的结果。有时网页本身就能够显示下载的进度,比如,当网络速度慢时,网页会一部分一部分地显

47、示,直至全部元素显示完毕。.编写高效的选择器在效率上,从最低开销到最高开销的顺序讲,选择器的顺序依次为:选择器,选择器,选择器,相邻兄弟选择器,子选择器,后代选择器,通配符选择器,属性选择器,伪类和伪元素【】。编写高效选择符有几个通用规则【】:避免使用统配规则;硕士学位论文 不要限定选择器,如是没必要的;避免限定类选择符,如,.比.效率高;,不如创建一个类,比如.,然尽量将规则细化,比如,与其后添加到适当的元素上;避免使用后代选择器:通常使用后代选择器的开销是最高的,可以使用子选择器代替;避免使用标签标签.子选择器:比如这样基于标签的子选择符,可以用.来代替;质疑所有子选择器的用途:尽可能用具

48、体的类来取代;依靠继承:避免重复指定,也可减少文件大小。.利用的中新添加的特性,可实现针对不同屏幕大小的浏览器编写独立的样式表,在无需改动和的基础上灵活实现内容的差异化布局。这样,应用更具针对性,在大小各异的屏幕上,开发人员能够从可用性出发,做出用户体验更佳的产品来。在 端的支持版本如下表.所示【截止日期:年月号:表.的支持情况空缺者表示不支持 版本. . . . . . . . . . .当日. .一. . . . . .版本硕士学位论文 在移动学习开发项目中,目标对象采用的系统主要是和,由上表可知,可以放心使用属性。一个 包含一个类型和一个或多个用来检测特定媒体特征的表达式。而在 之前,通

49、常还需要添加】这个标签,该标签最初由移动版的引进,现在其他 浏览器也基本支持。如下:项目中用到的针对移动网页优化过的最佳,?,在设计网页时,按照高分辨度布局优先,采取功能减法向低分辨率进行过渡。网页设计师往往优先考虑宽屏电脑进行原型设计,设计出的应用原型视觉元素更多。而前端开发工程师在开发中,进行功能减法比加法容易。在向低分辨率过渡过程中,如有必要,只需适当删减功能模块即可完成移动端的网页开发工作。当把安排到一个文件时,可采用如下方案:严普通电脑宰/及以下的平板电脑/?:严仅竖版幸/:/及以下幸/:产仅横版宰/:?:产仅竖版幸/:.不要过分信任和滥用虽能便捷地实现一些较为绚丽的展示效果,但一方面,现在移动端浏览器对的支持度并不很好,另一个方面,的一些特性很耗电量。这些特性有,.、?等。尤其是网页动画效果。网页动画效果一般可由三种方法制作,的传统组织,试的统计结果。硕士学位论文 表.对三种动画制作方式的测试时间 平滑与否 时间 平滑度否 否否 是是 是否 否是 是是 是否 否是 是是 是其中和参评 都内置有,硬件加速能很好地支持效果。但是不管是几维效果,只要是动画,都会加速移动设备电量的损耗。因此,要在移动开发时,尽量减少动画效果。如果确实有动画显示的必要,尽量避免大批量同时应用,且最好把动画元素设置:,限制纹理绘制范围。因为纹理的创建