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

精选资料

学位论文版权使用授权书

本学位论文作者完全了解北京交通大学有关保留、使用学位论文的规定。特 授权北京交通大学可以将学位论文的全部或部分内容编入有关数据库进行检索， 提供阅览服务，并采用影印、缩印或扫描等复制手段保存、汇编以供查阅和借阅。 同意学校向国家有关部门或机构送交论文的复印件和磁盘。学校可以为存在馆际 合作关系的兄弟高校用户提供文献传递服务和交换服务。
(保密的学位论文在解密后适用本授权说明)

学位论文作者签名： 庶一位 导师签名： 1钦(火
签字日期：五f午年]月牛H 签字日期：乙夕哗年7月尹扫

万方数据

可修改编辑

学校代码：10004 密级：公开

北京交通大学
硕士专业学位论文

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

Design and Implement of Optimization for Search Result Webpage on
Mobile Terminals

作者姓名：李一佳 学 号：12126008

导师姓名：张红延 职 称：副教授

工程硕士专业领域：软件工程 学位级别：硕士

北京交通大学 2014年7月

万方数据

致谢

本论文的工作是在我的导师张红延教授的悉心指导下完成的，张红延教授严 谨的治学态度和科学的工作方法给了我极大的帮助和影响。在此衷心感谢两年来 张红延教授对我的关心和指导。
在学习中，张红延教授悉心指导我们根据自己的研究方向进行学习，并经常 组织我们进行讨论，互相学习。并且还让我们与清华大学的教授沟通学习，都让 我们在软件工程领域有了一个更深的认知。
在生活中，张红延教授把我们当做自己的孩子一样对待，让我们去她的家里 做客，给我们展示她的摄影作品，完全把我们当做她的好朋友。
张红延教授对于我的研究工作和论文都提出了许多的宝贵意见，在此表示衷 心的感谢。
另外也感谢家人，他们的理解和支持使我能够在学校专心完成我的学业。

万方数据

北京交通大学硕士专业学位论文 摘要

摘要

近年来，移动通信业务和互联网业务逐渐成为当今世界发展最快、潜力最大、 前景最广的两大业务，其中移动通信业务的增长尤为引人注目，这种快速增长也 大幅度提升了移动终端的网页浏览量。用户在进行移动端网页浏览时存在的主要 问题是：由于网页设计日趋复杂，导致网页加载时间逐渐加长，最终造成用户的 网页浏览体验下降。该问题的原因是由于移动端网页没有针对不同网络类型的移 动设备进行优化与优选造成的。为了解决该问题，需要设计一套网页优化与优选 方案，在尽可能保留原网页信息的前提下，减少流量消耗，提升网页加载速度， 提高用户满意度。
本文的目标是基于对移动端网页性能影响要素与技术途径的分析，提出一整 套移动端网页优化与优选方案，并用这套方案优化网页内容，生成不同样式的网 页展示，根据移动端的网络类型优选网页并进行适配。本人主要工作是通过使用 高速摄像机截取网页加载结果，进行不同搜索引擎之间的性能对比实验，提出了 系统优化及优选方案。优化方案中涉及到检测网页冗余代码，拆分网页搜索结果 并进行独立点调，缩减网页请求路径，监控网页优化结果等内容。优选方案中通 过建立速度适配库，根据用户当前所处的IP段来判断用户的网络类型，进行内容 适配，最终给出性能验证方案的设计与实现。
本文通过一整套性能自动化验证方案对网页优化及优选结果进行了实际测 试。通过对移动端网页的优化，实际缩减了6％的加载时间；通过对移动端网页的 优选，实际缩减了28％的加载时间。该测试结果证明了优化与优选方案显著加快 了移动端网页的加载速度，减少了流量消耗，提升了用户的浏览体验。
本文的主要结构为：首先介绍项目研究背景、研究现状、研究目标与意义等， 然后分析移动端网页性能影响要素及技术途径选择方案，其次分别就优化及优选 方案进行研究并验证，最终给出网页性能验证自动化方案的设计与实现。

关键词：移动互联网；性能优化；性能优选；网络适配

万方数据

北京交通大学硕士专业学位论文 A B S T RA C T

ABSTRACT

In recent years，mobile communication and Internet have become the world's most
potential fields．The rapid growth of mobile communication is particular attractive．The
main 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 experience．The cause of the problem is due to the mobile terminal webpage doesn’t preference according to different types of network and
optimize the webpage content．In order to solve this problem，we design a set of webpage optimization and preference scheme to improve webpage loading speed and improve user satisfaction．
The author completes the following work．The author used the hi【gh speed camera to
capture webpage loading results，compared the performance between different search engines，and realized the system optimization and preference scheme．About optimization scheme，includes detecting webpage redundant code，splitting webpage search results，reducing webpage request path，monitoring webpage optimization results．
About preference scheme，it established a network adaptation library to determine the
user network type according to the user IP．
The solution reduced the loading time by 6％、Ⅳitll the mobile terminal webpage
optimization；reduced the loading time by 28％with 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 experience．
The 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，then
followed by the optimization and preference research and verification，at last design and
implements the webpage automated performance testing solution．

KEYWORDS： mobile Internet；performance optimization；performance preference；
network adaptation

万方数据

北京交通大学硕士专业学位论文 目录

目录

摘要 ．iii

ABSTRACT ．iv
l 引言 ．1
1．1 研究背景 1
1．2 国内外研究现状 2
1．3 研究目标与意义 2
1．4 论文研究难点 3
1．5 论文的组织结构 3
1．6 专有名词介绍 4
2 移动端网页性能影响要素分析与技术途径选择 5
2．1 移动端网页优化途径的介绍 5
2．1．1原设计方案 5
2．1．2新设计方案 5
2．2 移动端网页性能影响要素的研究实验 7
2．2．1测试方法 7
2．2．2测试数据处理 8
2．2．3处理后数据分析 ．1 5
2．2．4移动端网页性能研究结论 ．16
2．3 技术途径的优选 ．．17
2．4 本章小结 19
3 移动端网页性能优化方案的设计与实现 ．20
3．1 基于内容展现形式的移动端网页优化方案的设计 ．．20
3．1．1网页展现内容的冗余CSS代码优化 21
3．1．2网页展现内容的排序优化方案 ．23
3．1．3网页URL内容优化 24
3．2 网页优化方案的监控设计 ．．25
3．2．1网页内容条目完整性监控 ．25
3．2．2网页加载性能监控 ．29
3．3 移动端网页性能优化方案的验证 ．．33
3．4 本章小结 一35
4 网页与网络适配选择方法的研究与设计 ．36

万方数据

北京交通大学硕士专业学位论文 目录

4．1 网页与网络类型适配方法的研究与设计 ．．36
4．2 网页与网络适配选择方法的验证 一40
4．3 本章小结 42
5 网页性能验证自动化方案的设计与实现 ．43
5．1 性能验证标准 。43
5．2 性能验证自动化方案设计 ．．44
5．3 性能验证自动化方案实现 ．．44
5．4 本章小结 47
6 总结与展望 ．49
6．1 总结 49
6．2 展望 49
参考文献 5 1
附录A 53
作者简历及攻读硕士专业学位期间取得的研究成果 55
独创性声明 56
学位论文数据集 57

万方数据

北京交通大学硕士专业学位论文 引言

1引言

本文通过研究移动端搜索网页优化与优选方法，针对不同搜索引擎进行性能 测试，分析测试结果，最终设计出一整套移动端搜索结果页优化与优选方案。本 人在方案设计过程中开发出一个性能自动化测试插件，能够较好的验证优化与优 选方案的正确性及实用性。

1。1研究背景

Web应用在移动端的发展有一个必须的基础：移动互联网。移动互联网将移 动通信和互联网二者结合起来，成为一体。在近几年里，移动通信和互联网成为 当今世界发展最快、市场潜力最大、前景最诱人的两大业务，作为两者的结合体
——移动互联网也随之快速增长。这种快速增长让移动终端web应用越发广泛 。
智能手机的迅速流行，以及移动4G的来临，人们对于移动网络的要求日益增加， 对移动端网页的性能以及用户体验要求也逐步增加。对搜索引擎来说，优化搜索 结果页以提升用户体验。大部分的移动端网页没有根据移动设备自身的硬件条件 以及所处的网络环境进行网页展现优化。最终导致网页加载速度缓慢，页面呈现 效果差，用户体验不好等结果。
通过在实习期间查看用户反馈信息，得出用户比较注重的几个方面： (1)搜索结果页中的结果是否能够直接展现出用户想要的结果，这样可以不用
再逐一点击搜索结果去浏览具体的网页，从而节省了大量的时间； (2)对于使用不同类型网络的手机终端，应该根据手机终端类型展现不同的结
果样式。比如当用户使用智能机时，展现出样式新颖的结果；当用户使用 较低端的手机时，展现出几乎不添加样式的文字结果(比如没有图片等)； (3)而对于样式新颖的结果，当用户处于不同网络时，应该能够根据网络状况 的不同而对结果进行适配，适配的目的是为了提供适合用户屏幕的展现方 式，优化手机展示结果，提高用户体验，现有5个适配版本，wml(极简 版)、middle(炫彩版)、big(触屏版)、iphone(智能机版)、pad版，不 同适配策略下，搜索结果的展示策略不同，展现模板不同比如当网络较好 时(例WiFi)，会将图片展现质量较好的结果，而当网络情况较差时(例 2G)，默认展示出极简版的搜索结果，这样既可以节省用户流量，又可以 较快给用户展现出搜索结果，同时提供给用户炫彩版的切换按钮，方便用
户切换。

万方数据

北京交通大学硕士专业学位论文 引言

1．2国内外研究现状

本人分析了雅虎、Google以及百度的搜索结果页优化方法，具体分析如下： (1)雅虎：雅虎团队在网站页面性能优化方面给出了34条黄金守则，其中包
括内容、服务器、cookie、CSS、JavaScript、图片、移动应用等七部分。 这些是雅虎团队关于网站性能优化给出的建议[21：
(2)Google：减少URL长度，在网页设计中，文字内容才是最重要的，因此 网页越简单越好，不要过多进行修饰，简单明了展现给用户是最好的。网 页大小同样也是越小越好，设计风格保持简单一致，这样也能提升用户满 意度；
(3)百度：分析网站代码，精简结构，减少冗余，使网站性能更优，加载更流 畅。全站诊断，改进各流程操作的交互体验，有针对性的进行体验优化， 降低用户操作成本，提高用户友好度。分析页面访问情况及大众用户操作 偏好，作出相应调整，突出重点信息。优化网站静态资源，减少带宽及服 务器请求数节约带宽成本、提高服务器性能。用户体验优化就是网站针对 于用户的体验进行优化，面对用户层面的网站优化，本着为访客服务的原 则，改善网站功能，操作，视觉等网站要素，从而获得访客的青睐．通过 优化来提高流量转化率。而在这个过程中，很多站长都会在网站中使用社 会化媒体因素，比如使用相关按钮。

1．3研究目标与意义

随着移动端搜索引擎以及移动端设备的迅速发展，越来越多的公司开始注重 移动端搜索引擎的优化，给用户提供更好的使用体验。因为要考虑不同用户移动 端设备性能的差异以及用户所处的网络状况的差异，因此所提供差异化的搜索结 果页是有存在的必要性的。作者通过研究现有搜索引擎的优化方法，进行性能优 化测试对比试验，得出了优化的可能性，并提出了优化方法。在研究并实现优化 与优选的方法的同时，研究性能测试自动化平台的实现方法。最终通过实习公司 实际项目进行验证，得出了该优化及优选方法的有效性与实用性。
本论文拟达到的目标：对于优化过程，网页性能比优化前提升5％；对于优选 过程，在2G网络下，网页加载时间比之前提升15％。
本论文的意义在于，该项目能够显著减少网页在移动设备端的加载时间，提 升使用者的用户体验。最终提升产品的客户使用量。而且该项目能够为不同类型 的移动软件提供网页加载的帮助，具有较高的复用性。

2

万方数据

北京交通大学硕士专业学位论文 引言

1．4论文研究难点

本文的难点在于如何通过研究得出切实可靠的优化与优选方案。移动端设备 由于硬件性能参差不齐，网络类型多样(有2G、3G、WiFi等不同类型)，导致请 求的网页加载速度和展现效果与PC端相比大打折扣。因此我们需要为不同机型及 网络类型的机器适配不同的版式。作者根据实际项目经历，学习现有搜索引擎的 优化方法最后总结出如下以下优化优选方案：
(1)检测移动设备的硬件条件：可返回移动设备的型号，与服务器后台的所有 型号进行查找；
(2)检测移动设备所处的网络环境：可基于设备的IP来区分设备使用的是2G
或3G网络：
(3)优化原网页：将原网页变为可以适配不同移动设备的一个集合，比如不同 的CSS脚本，不同清晰度的图片等；
(邻对需要加载的网页进行优选：根据不同的设备型号、网络环境组合适当的 网页内容，进行加载；
(5)自动计算移动端网页的最终加载速度：开发网页插件，使得测试者能够在 电脑端模拟移动设备环境，自动测试、记录并展现网页的加载过程。 作者针对现有搜索引擎优化方案设计了一个性能测试实验，来获得它们的实
际优化结果，具体内容在第二章体现。第三章、第四章、第五章主要针对网页优 化与优选方案进行设计与实现并最终验证了实际的优化结果达到预期。

1．5论文的组织结构

本论文分为六章，具体内容如下： 第一章：引言
简要介绍课题的研究背景、国内外技术发展现状、研究意义、主要任务以及 本论文的内容结构安排。
第二章：移动端网页性能影响要素分析与技术途径选择 本章节通过进行网页性能测试实验，并得出实验结论，以此分析问题解决途
径，得出本文的解决方案。 第三章：移动端网页性能优化方案的设计与实现
本章节通过对移动端网页优化方案的研究，给出三种优化方法，并进行验证。 第四章：网页与网络适配选择方法的研究与设计 本章节实现对适配选择方法的设计，并进行验证。

万方数据

北京交通大学硕士专业学位论文 引言

第五章：网页性能验证自动化方案的设计与实现 本章节介绍网页性能验证方案的设计及其实现。 第六章：总结与展望
本章节介绍项目最终的运行情况，总结系统所取得成果及个人在项目建设过 程中的成长收获，并对系统未来的发展进行展望。

1．6专有名词介绍

本节主要介绍在文中出现的专有名词含义。目的是为了让用户更好地理解在 文中出现的缩写词，以及一些专业术语。
(1)UA：UserAgent，用户手机终端，其包含终端硬件信息，比如操作系统， 手机型号等等；
(2)Query：用户所输入的检索词； (3)首屏：用户在未滑动屏幕时在移动终端中看到的首个屏幕； (4)PV：Page View页面浏览量。

4

万方数据

北京交通大学硕士专业学位论文 移动端网页性能影响要素分析与技术途径选择

2移动端网页性能影响要素分析与技术途径选择

本章节首先介绍了移动端网页优化途径，从原设计方案过渡到新设计方案。 然后通过实验对比四种搜索引擎的移动端网页性能，对实验数据进行处理后，得 出搜索结果页优化的建议，最终根据优化建议进行技术途径选择的研究。

2．1移动端网页优化途径的介绍

为了更好地展现网页优化与优选在整个流程(即从移动端发送请求到服务器 端返回数据给移动端的过程)中的位置，本节将介绍移动端网页整体的设计，从 整体的设计中来看哪些方面能够进行优化，再根据2．2节中的实验得出具体结果。

2．1．1 原设计方案

首先展示出原设计方案，如图2—1所示，该图中展现出对于搜索引擎，从前端 到后端的整体过程。从用户请求搜索域名开始，请求(携带query)会发送到服务
器端，然后服务器解析query，分析得出query的类型，之后经过查询后端数据库
并进行排序，最终将结果根据模板拼装起来并以页面形式返回给用户，这样用户 就能够在移动端看到相应的搜索结果页。

Request
—————-———————◆
飘叠般 Response
',ifr。--_______

图2—1原设计方案图

Figure 2-1 Chart ofThe Original Design

2．1．2 新设计方案

根据图2．1中的整体流程，可以看出，首先我们可以获取到用户的硬件信息， 比如手机型号等，这样就可以根据用户手机型号进行适配，同样我们可以根据历 史日志来划分基于口段的网络适配，通过得到用户当前的IP地址，在速度库中进 行匹配，这样就可以大致判断用户当前所在的网络为2G、3G还是WiFi，最近新 推出的4G网络同样可以进行匹配，但是由于当前用户较少，需要一段时间来积累

万方数据

北京交通大学硕士专业学位论文 移动端网页性能影响要素分析与技术途径选择

数据，从而得到4G网络的P库，最终加入到速度适配库中。然后当手机型号以 及网络情况的数据传到服务器端时，就会将结果根据手机型号进行不同模板的匹 配，比如当手机为高端智能机，则结果就是炫彩的，若手机为低端机，则没有过 多的修饰在其中；而针对网络情况，则进行结果质量的区分，比如网络为W讵i或 者4G情况下，则展现的图片质量较高，同时展现较多自定义搜索结果，反之当网 络为2G情况下，就较少展现自定义搜索结果(由于其加载比一般自然结果要耗 时)。同时对于高端智能机，当网络为2G时，同样也提供一个转换为WiFi情况下 的结果的提示。这样对于用户来说，就会有较好的用户体验，用户可以自己来选 择查看哪种结果，但是我们默认会根据用户的网络进行网络适配，而对用户来说 就可以更快的获取想得到的信息睁引。
由于目前搜索引擎都提供很多直接的结果，比如搜索“天气”，搜索引擎会根 据定位确定您所在的城市，默认展现出“XX天气”，而在搜索结果页中，第一个 结果就是直接展现天气的搜索结果，一目了然，用户无需再进入网站查看具体信 息，正是由于这种搜索结果很多，影响页面加载速度，因此实现网络适配还是有 必要的。同样对于这些自定义搜索结果的代码优化也同样会影响到整个网页的性 能，因此本文作者根据项目实际的情况来进行优化。
在图2—2中，展现出优化及优选的流程，与原设计方案不同，当用户请求检索 服务时，同时会将用户设备信息传给服务器以得到对应的模板，并将IP地址传给 速度适配库以得到用户网络信息状况，这两个过程就是优选过程，最终通过组装 得到整个搜索结果页面，需要对页面代码进行优化(比如对自定义搜索结果代码 进行删减，去除冗余代码等等)，返回给客户端。从图2—2的整体方案中可以更好 地理解优化与优选过程在整体系统中的位置。
Prefer'ably

PHP optimization

图2-2新设计方案图

Figure 2-2 Chart of the New Design

6

万方数据

北京交通大学硕士专业学位论文 移动端网页性能影响要素分析与技术途径选择

2．2移动端网页性能影响要素的研究实验

搜索用户是指具有获取一定信息的需求，并通过搜索引擎检索相关信息的人 或者单位。检索用户整体的信息检索维度可以包含世界上几乎所有维度的信息， 搜索用户的行为具有以下特点：
(1)搜索结果排名的敏感性：从统计层面上来看，搜索用户几乎只对搜索引擎 返回的前十条结果感兴趣；
(2)搜索结果相关度敏感性：搜索用户一般能够在非常短的时问内就能够根据 搜索引擎返回的搜索结果摘要信息来判断搜索结果是否符合其搜索意图：
(3)使用连贯性：虽然目前互联网商业搜索引擎品牌非常多，但是搜索用户对 单一搜索引擎品牌的使用连贯性比较强；
(4)用户流失性：如果搜索引擎在一段时间内在相关性上不能满足用户的搜索 意图，搜索用户就会流失，转而选择其他品牌的搜索引擎。
而用户对于搜索引擎好坏的评价基本上有三点：“快、多、准”，快——代表 搜索结果反馈的速度，目前大型搜索引擎基本都可以做到这点：多——即返回的 结果要多，而且要把相关结果也反馈回来；准——返回的信息要准确，即是用户 希望的结果。
为了更好的研究移动端网页性能，本文作者使用高速摄像机进行了对比试验， 得出了实验结论，并且给出了优化建议。

2．2．1 测试方法

本节主要介绍性能试验的方法，在实际的测试环节主要采用了以下两种测试 方法：

(1)JavaSeript打点计时；
(2)高速摄像机高频截图。 JavaSeript打点计时是指通过JavaSeript脚本记录搜索结果页首屏展示
(firstSc)、请求数据返回(net)、dom树建立(dome)、完整内容加载(10ad)这
四个阶段各自消耗的时间。高速摄像机高频截图是指，通过高速摄像机在网页开 始加载直至加载完毕的过程中以很高的频率对手机展示结果页进行截屏，最终根 据每个截屏的时间戳来获得实际的加载消耗时间。
JavaSeript打点计时测试的具体步骤如下： (1)使用某搜索引擎进行搜索；
(2)执行JavaSeript脚本，记录搜索结果页首屏展示(firstSe)、请求数据返回

万方数据

北京交通大学硕士专业学位论文 移动端网页性能影响要素分析与技术途径选择

(net)、dom树建立(dome)、完整内容加载(10ad)这四个阶段各自消耗
的时间； (3)重复1．2的操作，完整进行10次测试。 高速摄像机高频截图测试的具体步骤如下： (1)使用某搜索引擎进行搜索；
(2)启动高速摄像头，按下搜索按钮，利用高速摄像机高频度的截取整个搜索 结果页的加载过程；
(3)设定拍摄图片张数(如400张)，直至所有的query搜索完毕； (4)清除浏览器的所有数据(如缓存，搜索历史等存储在用户本地客户端的数
据)；
(5)重复1-4的操作，完整进行10次测试。

2．2．2 测试数据处理

首先介绍测试数据中几个指标的含义：dns表示域名解析时间，tcp表示建立 连接时间，response表示获得响应时间，download表示元素下载时间。根据2．2．1 所描述的测试方法，进行性能测试，结果如表2．1所示。

表2．1 四种搜索引擎性能测试结果

Table2一l Table of Four Kinds of Search Engines Performance Testing Result

搜 平 有效
产
索 指标 l 2 3 4 5 6 7 8 9 lO 均 平均
r-)
Ⅱ口
词 值 值

dns 24二0 0 0 0 0 0 0 1 0 2．5 O

top 5l 44 44 38 50 46 40 42 42 42 43．9 43．9
I『

。V 3r 135．
response 82 114．|3081 79 83 84 80 101 106 9l
8 5
刘
百 29 590．
德
dmmload 723 611 379 710 386 667 491 780 860 590．1
度 4 l
华

doa结构建 81 801．
922 968 983 816 650 756 605 696 801 801．3
立完成 6 3

元素加载 16 1516
1768 1361 361 587 451 376 255 542 1860 1516．4
完成 03 ．4

万方数据

北京交通大学硕士专业学位论文 移动端网页性能影响要素分析与技术途径选择

表2．1 (续表)

Table2-1(Cont．)

进度
28 2827
条结 2434 2752 812 054 570 888 646 130 3145 2827．3
42 ．3
束

Dns 0 0 0 0 0 0 0 0 0 0 0 0

Tcp 一11 0 0 0 0 0 1 0 0 0 1．2 0

Respo
搜狗 146_『_ 120 96 76 62 95 90 86 120 85 97．6 92
nSe

Dmml i 14 180．
2∞ 178 174 177 274 162 124 190 185 180．7
oad 3 7

dora结

构建 15 60 1294
1436 1452 1254 1663 1179 1134 1195 1436 1371
立完 87 5 ．1

成 全部
搜狗 元素 16 1l l“9
1451 1467 1285 1708 1436 1391 1482 1497 1449．8
加载 02 79 ．8
完成 进度
19 15 1805
刘 条结 1829 1875 1693 1995 1845 1784 1815 1754 1805．2
35 27 毫2
德 束

华 Dns 0 0 0 0 0 0 0 0 0 0 O 0

Tcp 23 16 9 10 9 9 10 13 12 13 12．4 ll

Respo 17 19 183．
175 174 218 163 163 185 157 224 183．2
nSe 8 5 2

Downl 32 27
360 467 265 221 257 335 331 323 424 323 323
oad 8 9

dora结

构建 83 87 899．
1028 816 862 1028 786 741 77l 1255 899．5
立完 1 7 5

成

9

万方数据

北京交通大学硕士专业学位论文 移动端网页性能影响要素分析与技术途径选择

表2-1 (续表)

Table2-1(Cont．)

全部

元素 37 14 j1羽2 嚣
1587 1315