移动端搜索结果页自动优化与优选方案的设计与实现分析.docx

精选资料学位论文版权使用授权书本学位论文作者完全了解北京交通大学有关保留、使用学位论文的规定。特 授权北京交通大学可以将学位论文的全部或部分内容编入有关数据库进行检索， 提供阅览服务，并采用影印、缩印或扫描等复制手段保存、汇编以供查阅和借阅。 同意学校向国家有关部门或机构送交论文的复印件和磁盘。学校可以为存在馆际 合作关系的兄弟高校用户提供文献传递服务和交换服务。(保密的学位论文在解密后适用本授权说明)学位论文作者签名：庶一位导师签名：1钦(火签字日期：五f午年月牛H签字日期：乙夕哗年7月尹扫万方数据可修改编辑学校代码：10004密级：公开北京交通大学硕士专业学位论文移动端搜索结果页自动优化与优选方案的设计与实现Design and Implement of Optimization for Search Result Webpage onMobile Terminals作者姓名：李一佳学号：12126008导师姓名：张红延职称：副教授工程硕士专业领域：软件工程学位级别：硕士北京交通大学 2014年7月万方数据致谢本论文的工作是在我的导师张红延教授的悉心指导下完成的，张红延教授严 谨的治学态度和科学的工作方法给了我极大的帮助和影响。在此衷心感谢两年来 张红延教授对我的关心和指导。在学习中，张红延教授悉心指导我们根据自己的研究方向进行学习，并经常 组织我们进行讨论，互相学习。并且还让我们与清华大学的教授沟通学习，都让 我们在软件工程领域有了一个更深的认知。在生活中，张红延教授把我们当做自己的孩子一样对待，让我们去她的家里 做客，给我们展示她的摄影作品，完全把我们当做她的好朋友。张红延教授对于我的研究工作和论文都提出了许多的宝贵意见，在此表示衷 心的感谢。另外也感谢家人，他们的理解和支持使我能够在学校专心完成我的学业。万方数据北京交通大学硕士专业学位论文摘要摘要近年来，移动通信业务和互联网业务逐渐成为当今世界发展最快、潜力最大、 前景最广的两大业务，其中移动通信业务的增长尤为引人注目，这种快速增长也 大幅度提升了移动终端的网页浏览量。用户在进行移动端网页浏览时存在的主要 问题是：由于网页设计日趋复杂，导致网页加载时间逐渐加长，最终造成用户的 网页浏览体验下降。该问题的原因是由于移动端网页没有针对不同网络类型的移 动设备进行优化与优选造成的。为了解决该问题，需要设计一套网页优化与优选 方案，在尽可能保留原网页信息的前提下，减少流量消耗，提升网页加载速度， 提高用户满意度。本文的目标是基于对移动端网页性能影响要素与技术途径的分析，提出一整 套移动端网页优化与优选方案，并用这套方案优化网页内容，生成不同样式的网 页展示，根据移动端的网络类型优选网页并进行适配。本人主要工作是通过使用 高速摄像机截取网页加载结果，进行不同搜索引擎之间的性能对比实验，提出了 系统优化及优选方案。优化方案中涉及到检测网页冗余代码，拆分网页搜索结果 并进行独立点调，缩减网页请求路径，监控网页优化结果等内容。优选方案中通 过建立速度适配库，根据用户当前所处的IP段来判断用户的网络类型，进行内容 适配，最终给出性能验证方案的设计与实现。本文通过一整套性能自动化验证方案对网页优化及优选结果进行了实际测 试。通过对移动端网页的优化，实际缩减了6的加载时间；通过对移动端网页的 优选，实际缩减了28的加载时间。该测试结果证明了优化与优选方案显著加快 了移动端网页的加载速度，减少了流量消耗，提升了用户的浏览体验。本文的主要结构为：首先介绍项目研究背景、研究现状、研究目标与意义等， 然后分析移动端网页性能影响要素及技术途径选择方案，其次分别就优化及优选 方案进行研究并验证，最终给出网页性能验证自动化方案的设计与实现。关键词：移动互联网；性能优化；性能优选；网络适配万方数据北京交通大学硕士专业学位论文 A B S T RA C TABSTRACTIn recent years，mobile communication and Internet have become the worlds mostpotential fieldsThe rapid growth of mobile communication is particular attractiveThemain problem existing in the mobile webpage is that the webpage design is becoming more and more complex，resulting in webpage loading time longer,and resulting in reducing the user browsing experienceThe cause of the problem is due to the mobile terminal webpage doesnt preference according to different types of network andoptimize the webpage contentIn order to solve this problem，we design a set of webpage optimization and preference scheme to improve webpage loading speed and improve user satisfactionThe author completes the following workThe author used the hi【gh speed camera tocapture webpage loading results，compared the performance between different search engines，and realized the system optimization and preference schemeAbout optimization scheme，includes detecting webpage redundant code，splitting webpage search results，reducing webpage request path，monitoring webpage optimization resultsAbout preference scheme，it established a network adaptation library to determine theuser network type according to the user IPThe solution reduced the loading time by 6、itll the mobile terminal webpageoptimization；reduced the loading time by 28with the mobile terminal preference The testing results prove the optimization and preference scheme actually Can accelerate the mobile terminal webpage loading speed，improve the users browsing experienceThe main structure of the paper is as follows：firstly introduces the research background，research objectives and significance，and then analyze the influencing factors and technical ways of mobile terminal webpage performance optimization，thenfollowed by the optimization and preference research and verification，at last design andimplements the webpage automated performance testing solutionKEYWORDS： mobile Internet；performance optimization；performance preference；network adaptation万方数据北京交通大学硕士专业学位论文目录目录摘要iiiABSTRACTivl引言111研究背景112国内外研究现状213研究目标与意义214论文研究难点315论文的组织结构316专有名词介绍42移动端网页性能影响要素分析与技术途径选择521移动端网页优化途径的介绍5211原设计方案5212新设计方案522移动端网页性能影响要素的研究实验7221测试方法7222测试数据处理8223处理后数据分析1 5224移动端网页性能研究结论1623技术途径的优选1724本章小结193移动端网页性能优化方案的设计与实现2031基于内容展现形式的移动端网页优化方案的设计20311网页展现内容的冗余CSS代码优化21312网页展现内容的排序优化方案23313网页URL内容优化2432网页优化方案的监控设计25321网页内容条目完整性监控25322网页加载性能监控2933移动端网页性能优化方案的验证3334本章小结一354网页与网络适配选择方法的研究与设计36万方数据北京交通大学硕士专业学位论文目录41网页与网络类型适配方法的研究与设计3642网页与网络适配选择方法的验证一4043本章小结425网页性能验证自动化方案的设计与实现4351性能验证标准。4352性能验证自动化方案设计4453性能验证自动化方案实现4454本章小结476总结与展望4961总结4962展望49参考文献5 1附录A53作者简历及攻读硕士专业学位期间取得的研究成果55独创性声明56学位论文数据集57万方数据北京交通大学硕士专业学位论文引言1引言本文通过研究移动端搜索网页优化与优选方法，针对不同搜索引擎进行性能 测试，分析测试结果，最终设计出一整套移动端搜索结果页优化与优选方案。本 人在方案设计过程中开发出一个性能自动化测试插件，能够较好的验证优化与优 选方案的正确性及实用性。1。1研究背景Web应用在移动端的发展有一个必须的基础：移动互联网。移动互联网将移 动通信和互联网二者结合起来，成为一体。在近几年里，移动通信和互联网成为 当今世界发展最快、市场潜力最大、前景最诱人的两大业务，作为两者的结合体移动互联网也随之快速增长。这种快速增长让移动终端web应用越发广泛。智能手机的迅速流行，以及移动4G的来临，人们对于移动网络的要求日益增加， 对移动端网页的性能以及用户体验要求也逐步增加。对搜索引擎来说，优化搜索 结果页以提升用户体验。大部分的移动端网页没有根据移动设备自身的硬件条件 以及所处的网络环境进行网页展现优化。最终导致网页加载速度缓慢，页面呈现 效果差，用户体验不好等结果。通过在实习期间查看用户反馈信息，得出用户比较注重的几个方面： (1)搜索结果页中的结果是否能够直接展现出用户想要的结果，这样可以不用再逐一点击搜索结果去浏览具体的网页，从而节省了大量的时间； (2)对于使用不同类型网络的手机终端，应该根据手机终端类型展现不同的结果样式。比如当用户使用智能机时，展现出样式新颖的结果；当用户使用 较低端的手机时，展现出几乎不添加样式的文字结果(比如没有图片等)； (3)而对于样式新颖的结果，当用户处于不同网络时，应该能够根据网络状况 的不同而对结果进行适配，适配的目的是为了提供适合用户屏幕的展现方 式，优化手机展示结果，提高用户体验，现有5个适配版本，wml(极简 版)、middle(炫彩版)、big(触屏版)、iphone(智能机版)、pad版，不 同适配策略下，搜索结果的展示策略不同，展现模板不同比如当网络较好 时(例WiFi)，会将图片展现质量较好的结果，而当网络情况较差时(例 2G)，默认展示出极简版的搜索结果，这样既可以节省用户流量，又可以 较快给用户展现出搜索结果，同时提供给用户炫彩版的切换按钮，方便用户切换。万方数据北京交通大学硕士专业学位论文引言12国内外研究现状本人分析了雅虎、Google以及百度的搜索结果页优化方法，具体分析如下： (1)雅虎：雅虎团队在网站页面性能优化方面给出了34条黄金守则，其中包括内容、服务器、cookie、CSS、JavaScript、图片、移动应用等七部分。 这些是雅虎团队关于网站性能优化给出的建议21：(2)Google：减少URL长度，在网页设计中，文字内容才是最重要的，因此 网页越简单越好，不要过多进行修饰，简单明了展现给用户是最好的。网 页大小同样也是越小越好，设计风格保持简单一致，这样也能提升用户满 意度；(3)百度：分析网站代码，精简结构，减少冗余，使网站性能更优，加载更流 畅。全站诊断，改进各流程操作的交互体验，有针对性的进行体验优化， 降低用户操作成本，提高用户友好度。分析页面访问情况及大众用户操作 偏好，作出相应调整，突出重点信息。优化网站静态资源，减少带宽及服 务器请求数节约带宽成本、提高服务器性能。用户体验优化就是网站针对 于用户的体验进行优化，面对用户层面的网站优化，本着为访客服务的原 则，改善网站功能，操作，视觉等网站要素，从而获得访客的青睐通过 优化来提高流量转化率。而在这个过程中，很多站长都会在网站中使用社 会化媒体因素，比如使用相关按钮。13研究目标与意义随着移动端搜索引擎以及移动端设备的迅速发展，越来越多的公司开始注重 移动端搜索引擎的优化，给用户提供更好的使用体验。因为要考虑不同用户移动 端设备性能的差异以及用户所处的网络状况的差异，因此所提供差异化的搜索结 果页是有存在的必要性的。作者通过研究现有搜索引擎的优化方法，进行性能优 化测试对比试验，得出了优化的可能性，并提出了优化方法。在研究并实现优化 与优选的方法的同时，研究性能测试自动化平台的实现方法。最终通过实习公司 实际项目进行验证，得出了该优化及优选方法的有效性与实用性。本论文拟达到的目标：对于优化过程，网页性能比优化前提升5；对于优选 过程，在2G网络下，网页加载时间比之前提升15。本论文的意义在于，该项目能够显著减少网页在移动设备端的加载时间，提 升使用者的用户体验。最终提升产品的客户使用量。而且该项目能够为不同类型 的移动软件提供网页加载的帮助，具有较高的复用性。2万方数据北京交通大学硕士专业学位论文引言14论文研究难点本文的难点在于如何通过研究得出切实可靠的优化与优选方案。移动端设备 由于硬件性能参差不齐，网络类型多样(有2G、3G、WiFi等不同类型)，导致请 求的网页加载速度和展现效果与PC端相比大打折扣。因此我们需要为不同机型及 网络类型的机器适配不同的版式。作者根据实际项目经历，学习现有搜索引擎的 优化方法最后总结出如下以下优化优选方案：(1)检测移动设备的硬件条件：可返回移动设备的型号，与服务器后台的所有 型号进行查找；(2)检测移动设备所处的网络环境：可基于设备的IP来区分设备使用的是2G或3G网络：(3)优化原网页：将原网页变为可以适配不同移动设备的一个集合，比如不同 的CSS脚本，不同清晰度的图片等；(邻对需要加载的网页进行优选：根据不同的设备型号、网络环境组合适当的 网页内容，进行加载；(5)自动计算移动端网页的最终加载速度：开发网页插件，使得测试者能够在 电脑端模拟移动设备环境，自动测试、记录并展现网页的加载过程。 作者针对现有搜索引擎优化方案设计了一个性能测试实验，来获得它们的实际优化结果，具体内容在第二章体现。第三章、第四章、第五章主要针对网页优 化与优选方案进行设计与实现并最终验证了实际的优化结果达到预期。15论文的组织结构本论文分为六章，具体内容如下： 第一章：引言简要介绍课题的研究背景、国内外技术发展现状、研究意义、主要任务以及 本论文的内容结构安排。第二章：移动端网页性能影响要素分析与技术途径选择 本章节通过进行网页性能测试实验，并得出实验结论，以此分析问题解决途径，得出本文的解决方案。 第三章：移动端网页性能优化方案的设计与实现本章节通过对移动端网页优化方案的研究，给出三种优化方法，并进行验证。 第四章：网页与网络适配选择方法的研究与设计 本章节实现对适配选择方法的设计，并进行验证。万方数据北京交通大学硕士专业学位论文引言第五章：网页性能验证自动化方案的设计与实现 本章节介绍网页性能验证方案的设计及其实现。 第六章：总结与展望本章节介绍项目最终的运行情况，总结系统所取得成果及个人在项目建设过 程中的成长收获，并对系统未来的发展进行展望。16专有名词介绍本节主要介绍在文中出现的专有名词含义。目的是为了让用户更好地理解在 文中出现的缩写词，以及一些专业术语。(1)UA：UserAgent，用户手机终端，其包含终端硬件信息，比如操作系统， 手机型号等等；(2)Query：用户所输入的检索词； (3)首屏：用户在未滑动屏幕时在移动终端中看到的首个屏幕； (4)PV：Page View页面浏览量。4万方数据北京交通大学硕士专业学位论文移动端网页性能影响要素分析与技术途径选择2移动端网页性能影响要素分析与技术途径选择本章节首先介绍了移动端网页优化途径，从原设计方案过渡到新设计方案。 然后通过实验对比四种搜索引擎的移动端网页性能，对实验数据进行处理后，得 出搜索结果页优化的建议，最终根据优化建议进行技术途径选择的研究。21移动端网页优化途径的介绍为了更好地展现网页优化与优选在整个流程(即从移动端发送请求到服务器 端返回数据给移动端的过程)中的位置，本节将介绍移动端网页整体的设计，从 整体的设计中来看哪些方面能够进行优化，再根据22节中的实验得出具体结果。211原设计方案首先展示出原设计方案，如图21所示，该图中展现出对于搜索引擎，从前端 到后端的整体过程。从用户请求搜索域名开始，请求(携带query)会发送到服务器端，然后服务器解析query，分析得出query的类型，之后经过查询后端数据库并进行排序，最终将结果根据模板拼装起来并以页面形式返回给用户，这样用户 就能够在移动端看到相应的搜索结果页。Request-飘叠般Response,ifr。-_图21原设计方案图Figure 2-1Chart ofThe Original Design212新设计方案根据图21中的整体流程，可以看出，首先我们可以获取到用户的硬件信息， 比如手机型号等，这样就可以根据用户手机型号进行适配，同样我们可以根据历 史日志来划分基于口段的网络适配，通过得到用户当前的IP地址，在速度库中进 行匹配，这样就可以大致判断用户当前所在的网络为2G、3G还是WiFi，最近新 推出的4G网络同样可以进行匹配，但是由于当前用户较少，需要一段时间来积累万方数据北京交通大学硕士专业学位论文移动端网页性能影响要素分析与技术途径选择数据，从而得到4G网络的P库，最终加入到速度适配库中。然后当手机型号以 及网络情况的数据传到服务器端时，就会将结果根据手机型号进行不同模板的匹 配，比如当手机为高端智能机，则结果就是炫彩的，若手机为低端机，则没有过 多的修饰在其中；而针对网络情况，则进行结果质量的区分，比如网络为W讵i或 者4G情况下，则展现的图片质量较高，同时展现较多自定义搜索结果，反之当网 络为2G情况下，就较少展现自定义搜索结果(由于其加载比一般自然结果要耗 时)。同时对于高端智能机，当网络为2G时，同样也提供一个转换为WiFi情况下 的结果的提示。这样对于用户来说，就会有较好的用户体验，用户可以自己来选 择查看哪种结果，但是我们默认会根据用户的网络进行网络适配，而对用户来说 就可以更快的获取想得到的信息睁引。由于目前搜索引擎都提供很多直接的结果，比如搜索“天气”，搜索引擎会根 据定位确定您所在的城市，默认展现出“XX天气”，而在搜索结果页中，第一个 结果就是直接展现天气的搜索结果，一目了然，用户无需再进入网站查看具体信 息，正是由于这种搜索结果很多，影响页面加载速度，因此实现网络适配还是有 必要的。同样对于这些自定义搜索结果的代码优化也同样会影响到整个网页的性 能，因此本文作者根据项目实际的情况来进行优化。在图22中，展现出优化及优选的流程，与原设计方案不同，当用户请求检索 服务时，同时会将用户设备信息传给服务器以得到对应的模板，并将IP地址传给 速度适配库以得到用户网络信息状况，这两个过程就是优选过程，最终通过组装 得到整个搜索结果页面，需要对页面代码进行优化(比如对自定义搜索结果代码 进行删减，去除冗余代码等等)，返回给客户端。从图22的整体方案中可以更好 地理解优化与优选过程在整体系统中的位置。PreferablyPHP optimization图2-2新设计方案图Figure 2-2 Chart of the New Design6万方数据北京交通大学硕士专业学位论文 移动端网页性能影响要素分析与技术途径选择22移动端网页性能影响要素的研究实验搜索用户是指具有获取一定信息的需求，并通过搜索引擎检索相关信息的人 或者单位。检索用户整体的信息检索维度可以包含世界上几乎所有维度的信息， 搜索用户的行为具有以下特点：(1)搜索结果排名的敏感性：从统计层面上来看，搜索用户几乎只对搜索引擎 返回的前十条结果感兴趣；(2)搜索结果相关度敏感性：搜索用户一般能够在非常短的时问内就能够根据 搜索引擎返回的搜索结果摘要信息来判断搜索结果是否符合其搜索意图：(3)使用连贯性：虽然目前互联网商业搜索引擎品牌非常多，但是搜索用户对 单一搜索引擎品牌的使用连贯性比较强；(4)用户流失性：如果搜索引擎在一段时间内在相关性上不能满足用户的搜索 意图，搜索用户就会流失，转而选择其他品牌的搜索引擎。而用户对于搜索引擎好坏的评价基本上有三点：“快、多、准”，快代表 搜索结果反馈的速度，目前大型搜索引擎基本都可以做到这点：多即返回的 结果要多，而且要把相关结果也反馈回来；准返回的信息要准确，即是用户 希望的结果。为了更好的研究移动端网页性能，本文作者使用高速摄像机进行了对比试验， 得出了实验结论，并且给出了优化建议。221 测试方法本节主要介绍性能试验的方法，在实际的测试环节主要采用了以下两种测试 方法：(1)JavaSeript打点计时；(2)高速摄像机高频截图。 JavaSeript打点计时是指通过JavaSeript脚本记录搜索结果页首屏展示(firstSc)、请求数据返回(net)、dom树建立(dome)、完整内容加载(10ad)这四个阶段各自消耗的时间。高速摄像机高频截图是指，通过高速摄像机在网页开 始加载直至加载完毕的过程中以很高的频率对手机展示结果页进行截屏，最终根 据每个截屏的时间戳来获得实际的加载消耗时间。JavaSeript打点计时测试的具体步骤如下： (1)使用某搜索引擎进行搜索；(2)执行JavaSeript脚本，记录搜索结果页首屏展示(firstSe)、请求数据返回万方数据北京交通大学硕士专业学位论文移动端网页性能影响要素分析与技术途径选择(net)、dom树建立(dome)、完整内容加载(10ad)这四个阶段各自消耗的时间； (3)重复12的操作，完整进行10次测试。 高速摄像机高频截图测试的具体步骤如下： (1)使用某搜索引擎进行搜索；(2)启动高速摄像头，按下搜索按钮，利用高速摄像机高频度的截取整个搜索 结果页的加载过程；(3)设定拍摄图片张数(如400张)，直至所有的query搜索完毕； (4)清除浏览器的所有数据(如缓存，搜索历史等存储在用户本地客户端的数据)；(5)重复1-4的操作，完整进行10次测试。222测试数据处理首先介绍测试数据中几个指标的含义：dns表示域名解析时间，tcp表示建立 连接时间，response表示获得响应时间，download表示元素下载时间。根据221 所描述的测试方法，进行性能测试，结果如表21所示。表21四种搜索引擎性能测试结果Table2一lTable of Four Kinds of Search Engines Performance Testing Result搜平有效产索指标l23456789lO均平均r-)口词值值dns24二00000001025Otop5l444438504640424242439439I。V3r135response82114|3081798384801011069l85刘百29590德dmmload7236113797103866674917808605901度4l华doa结构建818019229689838166507566056968018013立完成63元素加载16151617681361361587451376255542186015164完成034万方数据北京交通大学硕士专业学位论文移动端网页性能影响要素分析与技术途径选择表21(续表)Table2-1(Cont)进度282827条结24342752812054570888646130314528273423束Dns000000000000Tcp一11000001000120Respo搜狗146_1209676629590861208597692nSeDmmli1418021781741772741621241901851807oad37dora结构建15601294143614521254166311791134119514361371立完8751成 全部搜狗元素161ll“91451146712851708143613911482149714498加载02798完成 进度19151805刘条结18291875169319951845178418151754180523527毫2德束华Dns0000000000O0Tcp23169109910131213124llRespo17191831751742181631631851572241832nSe852Downl3227360467265221257335331323424323323oad89dora结构建83878991028816862102878674177l12558995立完175成9万方数据北京交通大学硕士专业学位论文移动端网页性能影响要素分析与技术途径选择表2-1(续表)Table2-1(Cont)全部元素3714 j1羽2 嚣15871315