AALTO UNIVERSITY SCHOOL OF ELECTRICAL ENGINEERING
Department of Communications and Networking
Shuang Gu
Page Load Performance Evaluation for Mobile Browser on a Cloud
Computing Platform
Master’s Thesis submitted for the degree of Master of Science in Technology.
Espoo, 1 May, 2011
Supervisor: Docent Timo O. Korhonen
Instructor: Docent Timo O. Korhonen
AALTO UNIVERSITY
SCHOOL OF ELECTRICAL ENGINEERING
Abstract of the Master’s Thesis
Author: Shuang Gu
Name of the thesis: Page Load Performance Evaluation for Mobile Browser on a
Cloud Computing Platform
Date: 1 May, 2011
Number of pages: xx + xx
Faculty: Faculty of Electronics, Communications and Automation
Professorship: S-72 Communications
Supervisor: Docent Timo Korhonen
Instructor: Docent Timo Korhonen
Abstract text:
More and more network data flows of the Internet are nowadays contributed by
wireless access which is initiated from mobile devices, such as smartphones and tablets.
As a result, the performance of mobile browser applications integrated in software stacks
of these portable devices draws more and more attentions to the public. In order to meet
the needs of software engineering and benchmarking among various device vendors, it is
getting increasingly important to evaluate the performance of mobile browser accurately
and efficiently. However, due to the distinct hardware and software circumstances,
traditional measurement methods which are widely deployed for desktop browsing
environment are not appropriate for mobile browsers.
This study tries to solve this problem by finding out a practical approach to evaluate
the page load performance of mobile browsers without redundant investments on
measurements. Several measuring means are therefore introduced, discussed and
evaluated during the research in order to point out the most accurate and efficient one. As
a benchmarking tool and a support to the conclusion, an online web application is
designed and implemented in the experimental part of the study. The generated data from
it are collected and analyzed to serve the study.
The implementation of such a web application and its context of the benchmarking
framework provide an outline of an ideal approach to measure page load performance of
mobile browsers. This optimized approach not only eliminates complexity to configure
software environment of mobile devices, but also provides relatively accurate
measurement results for continuous evaluation on mobile browsers’ performance, which
is useful for developers to increase mobile browser’s speed incrementally. The collected
data in such an approach are also useful as pieces of reference to do benchmarking among
different brands of mobile browsers.
The research found out also those factors which influence the measurement of
performance. And discussed also related features provided by mobile browser.
Keywords:
Mobile browser, Page load performance, Cloud computing, JavaScript, Ajax,
Google App Engine
i
Preface
[Motivation to write this topic]
[Thanks to related persons]
Espoo, 1 May, 2011
Shuang Gu
ii
Table of Contents
Preface ......................................................................................................................................ii
Table of Contents .....................................................................................................................iii
List of Figures .......................................................................................................................... vii
List of Abbreviations .............................................................................................................. viii
List of Concepts .........................................................................................................................x
1. Introduction ....................................................................................................................... 14
1.1. Purpose of the Study................................................................................................... 16
1.2. Research Questions .................................................................................................... 18
1st Question: How to evaluate page load performance of mobile browsers accurately and
efficiently?........................................................................................................................... 18
2nd Question: What are the benefits and drawbacks to implement the measurement
application on a cloud computing platform? ...................................................................... 19
3rd Question: How to improve the page load performance of a mobile browser? ........... 19
1.3. Structure of the Thesis ................................................................................................ 20
2. Literature Overview ........................................................................................................... 21
2.1. Mobile Browser ........................................................................................................... 21
2.1.1. Structure of Mobile Browser .................................................................................... 22
User Interface ..................................................................................................................... 23
Browser Engine ................................................................................................................... 23
Rendering Engine ................................................................................................................ 23
Networking.......................................................................................................................... 23
JavaScript Interpreter ......................................................................................................... 23
XML Parser .......................................................................................................................... 24
Display Backend .................................................................................................................. 24
Data Persistence ................................................................................................................. 24
2.2. Browser Performance Metrics .................................................................................... 24
Startup speed ...................................................................................................................... 24
JavaScript speed .................................................................................................................. 24
DOM selection speed .......................................................................................................... 25
Page load time .................................................................................................................... 25
iii
Average CPU and memory usage ....................................................................................... 25
CSS rendering speed ........................................................................................................... 25
Browser cache performance ............................................................................................... 25
2.3. Page Load Performance .............................................................................................. 26
2.4. Cloud Computing and Google App Engine .................................................................. 26
3. Research ............................................................................................................................. 28
3.1. Research Method ........................................................................................................ 28
Requirement Analysis ......................................................................................................... 28
Design.................................................................................................................................. 28
Implementation .................................................................................................................. 29
Verification .......................................................................................................................... 29
Deployment and Maintenance ........................................................................................... 29
3.2. Requirement Analysis ................................................................................................. 29
Handmade ........................................................................................................................... 29
Automatic............................................................................................................................ 30
3.2.1. Comparation: automatic vs Handmade timestopper ............................................... 30
3.2.2. Comparation: web server on device vs remote ........................................................ 30
3.2.3. Comparation: 3G vs WiFi .......................................................................................... 30
3.3. Design - Choice of Measurement Tool ........................................................................ 30
3.4. Implementation .......................................................................................................... 31
3.4.1. Functionality ............................................................................................................. 31
3.4.2. Language on user interface ....................................................................................... 31
3.4.3. Service capacity ......................................................................................................... 31
3.4.4. Financial support....................................................................................................... 31
3.4.5. Knowledge transfer ................................................................................................... 31
3.5. Testing ......................................................................................................................... 32
3.5.1. Choice of hosting platform ....................................................................................... 32
3.5.2. Choice of development tools .................................................................................... 33
Web application framework ............................................................................................... 33
JavaScript library ................................................................................................................. 33
iv
Programming language ....................................................................................................... 34
3.5.3. User interface............................................................................................................ 34
3.5.4. Incentive mechanism ................................................................................................ 35
3.6. Deployment and Maintenance ................................................................................... 35
3.6.1. General View ............................................................................................................. 36
3.6.2. Run Page ................................................................................................................... 36
3.6.3. Detail Page ................................................................................................................ 36
3.6.4. Browser compatibility ............................................................................................... 36
3.6.5. Invoking API of JavaScript library .............................................................................. 37
4. Results ................................................................................................................................ 39
4.1. Decision of Design ....................................................................................................... 39
4.1.1. User interface............................................................................................................ 39
4.1.2. Interactive UI elements ............................................................................................. 40
4.1.3. User ranking system .................................................................................................. 40
4.2. Solution of Implementation ........................................................................................ 41
4.2.1. Model-Template-View vs. Ajax ................................................................................. 41
4.2.2. jQuery vs. REST.......................................................................................................... 41
4.2.3. Ajax over JSON .......................................................................................................... 42
4.2.4. Browser compatibility ............................................................................................... 42
4.2.5. Invoking API of JavaScript library .............................................................................. 42
5. Discussion........................................................................................................................... 43
5.1. Answering Research Questions................................................................................... 43
1st Question: How to evaluate page load performance of mobile browser accurately and
efficiently?........................................................................................................................... 43
2nd Question: How to implement an optimized performance measurement tool?.......... 43
3rd Question: What features of mobile browser are beneficial to increase page load
performance?...................................................................................................................... 43
5.2. Benchmarks................................................................................................................. 43
5.2.1. Comparison with other measurement toolkits......................................................... 43
Mozilla SunSpider................................................................................................................ 43
v
6. Conclusion .......................................................................................................................... 44
6.1. Research Evaluation .................................................................................................... 44
Strengths ............................................................................................................................. 45
Weaknesses ........................................................................................................................ 45
Opportunities ...................................................................................................................... 46
Threats ................................................................................................................................ 47
6.2. Challenge of the study ................................................................................................ 47
6.3. Possible future work ................................................................................................... 48
Content tagging................................................................................................................... 48
Bibliography ........................................................................................................................... 49
Appendices............................................................................................................................. 52
Appendix A: Top 35 of Global Top Sites retrieved from Alexa .......................................... 52
Appendix B: Source Code of Experimental Part................................................................. 55
File: app.yaml ...................................................................................................................... 55
File: model.py ...................................................................................................................... 56
File: preset.yaml .................................................................................................................. 57
File: view.py ........................................................................................................................ 58
File: static/main.js ............................................................................................................... 60
File: static/run.js ................................................................................................................. 61
File: templates/case.html ................................................................................................... 62
File: templates/info.html .................................................................................................... 63
File: templates/info.html .................................................................................................... 64
File: templates/run.html ..................................................................................................... 66
File: templates/title_style.html .......................................................................................... 67
vi
List of Figures
Figure 1.1: The infrastructure of mobile access to the Internet. (Ye, 2010) .............................. 15
Figure 3.1: The agile software development process model used in the research. ................... 28
Figure 3.2: General measurement model for mobile browser to access the Internet............... 29
Figure 3.3: Ideal measurement model to test page load performance of mobile browser. ...... 30
Figure 3.4: The Projects Management Triangle.......................................................................... 31
Figure 6.1: The SWOT model (CIPD, 2008) ................................................................................. 44
Figure 0.1: Top 35 of Global Top Sites retrieved from Alexa ...................................................... 54
vii
List of Abbreviations
Ajax
Asynchronous JavaScript and XML
API
Application Programming Interface
CSS
Cascading Style Sheets
CRUD
Create, Read, Update, and Delete
DOM
Document Object Model
DRY
Don’t Repeat Yourself
GUI
Graphical User Interface
HTML
Hypertext Markup Language
HTTP
Hypertext Transfer Protocol
IIS
Internet Information Services
IM
Instant Messaging
JSON
JavaScript Object Notation
JVM
Java Virtual Machine
LAMP
Linux, Apache, MySQL, and PHP
MTV
Model-Template-View
MVC
Model-View-Controller
ORM
Object-Relational Mapping
OS
Operating System
REST
Representational State Transfer
RIA
Rich Internet Application
RSS
Really Simple Syndication / Rich Site Summary
SDK
Software Development Kit
SQL
Structured Query Language
viii
SWOT
Strengths, Weaknesses, Opportunities, and Threats
UI
User Interface
URI
Uniform Resource Identifier
URL
Uniform Resource Locator
UX
User Experience
YAML
YAML Ain’t Markup Language
XML
Extensible Markup Language
ix
List of Concepts
(Most important indicated by “*”)
Ajax
A group of interrelated web development techniques used on the
client-side to create interactive web applications.
Cloud computing
Internet-based development and use of computer technology.
Instead of traditional client-server structure, cloud computing
abstracts the details of control over technology infrastructure
from users and sets up a new supplement, consumption, and
delivery model based on the Internet. It typically involves the
provision of dynamically scalable and often virtualized resources
as a service over the Internet.
Convention over Configuration
A software design philosophy and technique with a strategy of
defaults over explicit configuration.
Don’t Repeat Yourself
A principle of software development to reduce repetition of
source code and all related information of software engineering.
Facebook
The most popular social networking application. It enables e.g.
creating your own profile, contacting friends, and sharing photos.
Google App Engine
A development environment for web applications and a hosting
service provided by Google. It consists of a Python-based web
framework and an un-relational data base, which is called
Bigtable. For personal usage, it is free of charge to register and
use with CPU and storage limitations.
iPhone
JavaScript engine
JavaScript library
A library of pre-written JavaScript controls which provides
convenience to development of JavaScript-based applications,
especially for Ajax and other web-centric technologies.
jQuery
A fast and concise JavaScript library that simplifies HTML
document traversing, event handling, animating, and Ajax
x
interactions for rapid web development. jQuery is designed to
change the way that you write JavaScript.
Language runtime
One of the standard web infrastructures on server side which
explains and executes computer language scripts or binary
executables. This includes, for instance, PHP’s runtime, Python’s,
Ruby’s, JVM (Java Virtual Machine), and so on.
Mobile Browser
Model-View-Controller
A software architectural pattern widely accepted in structural
design of web application frameworks.
Object-relational mapping
A programming technique for converting data between
incompatible type systems in relational databases and objectoriented programming languages.
Operating System
One of the standard web infrastructures on server side which
provides an interface between the hardware and other software.
This includes for instance Unix, Linux, FreeBSD, Microsoft
Windows, and so on.
Page Load Performance
Page Loading Speed
Page Loading Time
Python
A general-purpose high-level programming language. Its design
philosophy emphasizes code readability. Its use of indentation for
block delimiters is unusual among popular programming
languages. (Python Software Foundation, 1990-2010)
Representational State Transfer (REST)
A style of software architecture for web applications and other
distributed hypermedia systems. A web application framework is
RESTful by providing convenience to the application development
following REST style.
xi
Rich internet application
These applications work more like desktop applications than
traditional web applications, e.g. webmail. RIA’s are enabled by
rich technologies such as Ajax which lead into faster response
times and more interactive GUI (graphical user interface)
elements, e.g. always visible floating menus, and controls, e.g.
the dragging of GUI elements.
Runtime
Social networking
refers to online communities which are formed with social
networking applications, which offer ways of finding people with
similar interests, communicating with others, and expressing
oneself. Facebook is the most popular application.
Start-up Speed
Syndication
Presenting data from various web pages on a single page. The
most common syndication format is RSS.
Tag
Tag is a descriptive keyword that is attached to a digital object
such as a web page, an image, a blog entry, or a video. Tags are
facilitating search functions and the arranging of digital objects.
Usability
Is a part of user experience that measures how easy and
pleasurable a product or service is to use.
User experience
Positive user experience is achieved when service’s features and
design meet user’s needs and expectations in a usable and
pleasurable way.
Web 1.0
A concept in order to present traditional web technologies being
used before Web 2.0 concept appearing. The web technologies of
Web 1.0 include for instance HTML, XHTML and CSS.
Web 2.0
A concept for a collection of new technologies, applications,
concepts, ideas, business strategies, and social trends in the web.
Web 2.0 is more dynamic and more interactive than Web 1.0.
webapp
A simple web application framework provided by Google App
Engine by default.
xii
Web application framework A software framework that is designed to support the
development of dynamic websites, web applications and web
services. These include, for instance, Rails, Django, Spring, etc.
Web Browser
Web server
One of the standard web infrastructures on server side which
delivers contents using kinds of data transferring protocols over
network. This includes for instance Apache, Microsoft IIS,
Lighttpd, and so on.
Wiki
A web-based tool for creating, modifying, and deleting web
content collaboratively. Web-based encyclopedia Wikipedia is the
best known wiki.
xiii
1. Introduction
With the explosive growth on personal usage of smartphones and handheld computing
devices in recent years, especially after the launch of the revolutionary mobile device,
iPhone (iPhone, 2011) introduced by Apple Incorporation (Apple, 2011) to public in early
2007, the proportion of mobile access to the Internet [See Figure 1.1] keeps increasing
dramatically compared to the traditional web access initiated from desktop computers and
laptops. Consequently, people pay more and more attention to the software performance
of mobile browser applications which are used most frequently (Gardner, 2010) on their
handheld devices. However, instead of variously convenient software measurement tools
to evaluate performance of web browser applications running on desktop computing
environment, there are seldom such kinds of performance measurement tools available
which are optimized specifically for those web browser applications integrated in mobile
computing devices.
Different than running in capable hardware and software environments on desktop
computers and laptops, the performance of web browser applications running on handheld
devices is deeply affected by limited hardware capacities, restricted software execution
environment, slow and unstable wireless connection, and shrunken interfaces for HumanComputer Interaction (HCI). Furthermore, it is difficult to completely execute all subjects of
comprehensive performance evaluation options to a mobile browser because there are a
huge amount of performance metrics for a browser application which are able to measure
manually or automatically for comparison and benchmarking. Depending on various
intentions from device manufacturers, vendors, network operators, technology media
agencies and end users, a large number of human resources and computing resources
committed to measure and benchmark the performance of various brands and editions of
mobile browsers together with hosted devices in the market in their own way from time to
time. Increasing amount of measurement facilities and environments are therefore
established and served privately or in public all over the world although many of them are
actually, as a matter of fact, redundant and unsustainable.
14
3G
Cell site
Internet
Mobile device
Wi-Fi
Web server
WLAN AP
Figure 1.1: The infrastructure of mobile access to the Internet. (Ye, 2010)
Explanation of the terms in above figure:
Mobile device
refers to smartphone or other handheld computing devices
which is used to access the Internet via wireless connection.
3G
refers to the third generation of mobile telecommunication
standards for wide-area wireless voice telephone, mobile
Internet access, and other application services.
Wi-Fi
refers to a narrow range of connectivity technologies including
Wireless Local Area Network (WLAN) based on the IEEE 802.11
standards and etc.
Cell site
refers to a base station consists of antennas and electronic
communication equipment to create a cell in a cellular 3G
network.
WLAN AP
refers to an access point of WLAN connecting to a wired
network.
Web server
refers to both hardware and software help on delivering
content accessible through the Internet.
15
The page load performance of a mobile browser is commonly indicated by the time period
spent by a browser application to completely present visual contents on a web page to the
browser’s display area immediately after acknowledged a new request submitted by user.
The time period spent for one single web page, or the sum of all time periods spent for a
bunch of web pages, is called page loading time, as known as page loading speed. The page
loading speed of a mobile browser is a measure to tell how fast the mobile browser’s
infrastructure, such as parsers and engines, can parse, interpret and render web contents
to the browser’s user interface when responding to user requests for web addresses.
Compared with some other performance metrics of a mobile browser, such as initial startup speed or JavaScript execution speed, page loading speed is much easier and more
frequent to be observed by users who used to access the Internet frequently and switch
back and forth within a bunch of hyperlinks to web sites, and thus is more intuitive and
relevant to the user experience.
However, as similar as the evaluation on other performance metrics of mobile browsers,
the measurement of page loading speed has no conventional operating practices which
have been regulated or documented in public domain. For example, the usage of
stopwatches to manually measure the page loading time of a web page on mobile devices is
widely observed from individual users of mobile devices, from where the measurement
environment is handy to set up but lacks of reliability and scalability for large-scale and
continuous performance evaluation. On the other hand, some development and testing
teams of mobile browsers working for mobile device manufacturers, such as Nokia’s
Maemo Browser teams, utilize high level Software Quality Assurance (SQA) process and
more standardized practices to evaluate the page load performance than individuals, which
enable the measurement process and data storage being automatic. But the teams had to
commit a lot of hardware and human resources at the beginning to establish a specific
measurement environment. However, the established environment consisting of valuable
hardware and software commitments would not be portable to fit the performance
evaluation demand on any other mobile device than the one in investment.
1.1. Purpose of the Study
In order to help on current situation of performance evaluation of mobile browsers, this
study focuses on finding out an efficient and accurate measurement process to determine
the page loading speed of mobile browsers while avoiding unnecessary manual
intervention and redundant commitment to measurement environment. The purpose of
16
this study is to identify a relatively accurate and efficient process to evaluate the execution
performance of a mobile browser, and to implement a measurement application
accordingly in the experimental part. The study concentrates on one of critical performance
metrics, the page loading speed, instead of trying to cover all possible performance metrics
of a mobile browser, because page load performance of a mobile browser is more intuitive
and significant than other metrics which a browser user would experience.
Meanwhile, as a part of the implementation of the measurement application in the
experimental part, this study tries to eliminate the complexity for setting up the
measurement environment by introducing cloud computing services as the hosting
platform and execution environment to the measurement application which is thus publicly
accessible anytime anywhere from the Internet as most modern web 2.0 applications are.
In order to measure the page loading speed of mobile browsers, a set of web pages should
be defined beforehand as the standard responding data for browser’s page loading
requests. In the experimental part of the study, the category of web pages which are used
in the measurement process as the basis for detecting page loading speed of mobile
browsers is collected from a well-known Internet traffic and page ranking service provider,
Alexa.com, which provides a reliable list of global top sites based on their traffics.
There have no standard data of absolute values available to judge a browser’s page load
performance. Instead, continuous measurement on page loading time and data collecting
are useful to provide reliable reference to determine possible performance advancement or
regression after changes to application implementation or execution dependencies of the
mobile browser. These recorded data on page loading time are also useful to weigh up the
performance gap among various mobile browsers from different manufacturers.
To design and implement such a measurement application of mobile browser’s page
loading speed on a cloud computing platform is as the same as to create a web application
on the Internet. The User Interface (UI) design specific for mobile devices and some Web
2.0 techniques, such as Ajax, are necessary for the implementation to improve the online
experience of mobile users.
17
1.2. Research Questions
The research questions of this study concern mainly on finding out a measurement process
to the page loading speed and according practices to ease the evaluation on the page load
performance of mobile browsers in an accurate and efficient way. The research focuses on
also the benefits and defects brought by using the cloud computing services as the
implementation environment and hosting platform of the experimental work. Through the
observation on practical usage of the implemented online application in the experimental
part of the study, this research tries also to find out possible factors which affect the page
load performance of a mobile browser. The research questions are presented here in an
order of importance.
1st Question: How to evaluate page load performance of mobile browsers
accurately and efficiently?
This study concentrates on identifying an optional measurement process to determine the
page loading speed of a mobile browser, which should be not only easy to operate and
proper on collected results, but also widely applicable to most kinds of mobile browsers on
various mobile devices available in the market no matter on their manufactures or vendors.
The structure of a mobile browser will be introduced and discussed from part to part in
order to understand the procedure of a mobile browser to execute a page loading on a web
page and find out possible measurement approaches. Both advantages and disadvantages
of these approaches will be presented and discussed during the study.
By selecting a possible process model which is based on web 2.0 concepts and techniques, a
customized application framework of an optional performance measurement process is
specified and described in detail. The main objectives are to indicate:

What is in consideration for a common measurement process to determine the
page loading speed of a mobile browser?

How to identify a practical measurement process from alternatives?
Looking though the options which may influence the accuracy and efficiency of a
measurement process to evaluate the page load performance of mobile browsers helps on
improving other performance evaluation processes which are in use in the industry of
mobile devices.
18
2nd Question: What are the benefits and drawbacks to implement the
measurement application on a cloud computing platform?
In the experimental part of this study, a software application is designed, implemented,
tested and deployed to examine and verify the usability of the measurement process which
is determined as the answer of previous question. Different than traditional software
engineering practices, the experimental work is implemented and deployed on a cloud
computing platform. There are many cloud computing services available on the Internet
served by various providers, such as Elastic Compute Cloud (EC2) from Amazon, and App
Engine from Google. The selection of the cloud computing platform in the experimental
work is Google’s App Engine because it is easy to get started and free of charge without
limitation on time usage for low traffic, which is sufficient to sustain all of the data flows
generated from the measurement practices in the experimental work.
Compared with traditional application development process which is commonly
implemented and executed locally, an application based on cloud computing services is
similar as modern web 2.0 applications popular on the Internet nowadays, which is
accessible online all the time and ready to use from anywhere in the world. As the
experimental part of the study achieved the design and implementation of the
measurement application within cloud computing services, this study tries to determine the
influences brought by this kind of practices. Therefore, this thesis focuses also on the
following topics:

What are the benefits to introduce a cloud computing platform into the
experimental work?

What are the drawbacks to deploy the measurement tool onto a cloud computing
platform?
Determining the benefits and drawbacks to implement and deploy the performance
management tool on a cloud computing platform may help to find out more possibilities on
design and development a more practical measurement environment for mobile browsers.
3rd Question: How to improve the page load performance of a mobile browser?
After the discussion on possible factors to influence the measurement process and the
practical implementation of a measurement application, there will be some related
observation on the possible factors which influence the page loading speed of a mobile
browser. Some may come from the content of the web pages visited on page loading
operation; some come from the specific features or components of the mobile browser,
19
and some from the adopted measurement process and practical environment and software
tool chains. The collection of these factors observed from the operation practices by using
the implemented online management application in the experimental part of the study
would be the answer of this question. The purpose is to find out:

How does the design of a web page influence its page loading time in a mobile
browser?

What features or components of a mobile browser may influence its page load
performance?
Determining these factors which are possible to enhance the page load performance of a
mobile browser is beneficial not only for the web page designers and developers to create
faster web sites for mobile access, but also for end users to achieve better user experience
when using mobile devices to surf the Internet in daily occasions.
1.3. Structure of the Thesis
The structure of this Master’s thesis is the following: the literature overview concentrates
on determining the concepts of mobile browser, page load performance and cloud
computing, as well as the characteristics and features provided by the practical
development environment and hosting platform, Google App Engine. The research chapter
describes the research methods using in the experimental part of the study, and lists issues
found, as well as considerations and possible solutions which emerged during the research.
[See Section 3] The results of the research and code structure of the experimental part are
located in the results chapter. [See Section 4] In the discussion chapter, the predetermined
research questions are answered with further discussions around the UI design and
recognizing of user group. [See Section 5] In the last chapter of the thesis, the conclusions
of the research, defects and possible directions of future research are discussed. [See
Section 6] The final user interface of the web site and source code are presented in the
appendices.
20
2. Literature Overview
The page load performance of a mobile browser is related not only to the hardware
capabilities of the running mobile device, but also to the structurally modular software
design of the browser application. Additionally, bandwidth of the wireless network
connection and performance measuring approaches are also deeply relevant to the results
of the performance evaluation. In this chapter the concepts of mobile browser and its
structural components will be introduced. Several commonly used measurement
approaches for performance evaluation on mobile browsers are then described in brief. In
the left part the concept of cloud computing services and the selected instance in the
experimental part of the study, Google App Engine, are also introduced.
2.1. Mobile Browser
A mobile browser, also called a micro-browser, mini-browser or wireless Internet browser,
is a web browsing software application designed for use on a mobile device, such as a
mobile phone, PDA, tablet computer or one of any other kinds of wireless handheld devices.
Mobile browsers are commonly optimized depending on the hardware capabilities of
hosting handheld devices, which considerably means weak computing power, limited
memory capacity, insufficient electric power provided by batteries, low and unstable
bandwidth of wireless connection, restricted Human-Computer Interaction (HCI) interface,
and compact display area, to present web content quickly and properly in best efforts.
In order to achieve the similar user experience as traditional web browser applications
running on desktop computing environment, a number of mobile browsers developed in
early ages had to restrict some useful functionalities and storage consumption, thus
stripped away some non-trivial features, such as advanced Cascading Style Sheets (CSS)
support, JavaScript interpretation, and allowance of multimedia plugins which are playing
critical roles in modern social network services supported by Web 2.0 technologies. As time
goes by, these features start retuning back to new models of mobile devices gradually since
dramatic evolutions on their hardware capabilities keep going all the way.
Nowadays, mobile browsers play more and more important roles in the field of
telecommunication and information technology industry. For mobile operators, mobile
browsers introduce an extensive and fully customizable data services platform and
consistent end user experience across multiple device types; For device manufacturers,
mobile browsers provide a modularized architecture, easy integration, extensibility,
compact footprint, and a reliable and proven solution on all major platforms and operating
21
systems; For end users, they offer the fastest, richest and most intuitive, full-Internet
browsing experience and services on mobile devices; And for contents providers, they
contribute a rich content rendering platform for embedded devices.
[A table to compare diff hardware profiles]
2.1.1. Structure of Mobile Browser
In order to identify the factors related to the performance of mobile browsers, the
structure of a mobile browser needs to be understood clearly.
Derived from fully functional web browser applications running on desktop computing
environment, most modern mobile browsers are constructed in software architectures as
the same as those of their predecessors. As the main components in the high level
structure of these mobile browsers are kind of similar, they will be introduced here in a
unified way. The general structure of mobile browser is shown in the graph below. It
comprised eight major subsystems, which consist of User Interface, Browser Engine,
Rendering Engine, Networking subsystem, JavaScript Interpreter, XML Parser, UI Backend,
and Data Persistence subsystem, together with the dependencies between them.
22
[http://taligarsiel.com/Projects/howbrowserswork1.htm#The_browser_high_level_structur
e]
User Interface
The User Interface subsystem is the layer between the user and the Browser Engine. It
provides features such as toolbars, visual page-load progress, smart download handling,
preferences, and printing. It may be integrated with the desktop environment to provide
browser session management or communication with other desktop applications.
Browser Engine
The Browser Engine subsystem is an embeddable component that provides a high-level
interface to the Rendering Engine. It loads a given URI and supports primitive browsing
actions such as forward, back, and reload. It provides hooks for viewing various aspects of
the browsing session such as current page load process and JavaScript alerts. It also allows
the querying and manipulation of Rendering Engine settings.
Rendering Engine
The Rendering Engine subsystem produces a visual representation for a given URI. It is
capable of displaying HTML and Extensible Markup Language (XML) documents, optionally
styles with CSS, as well as embedded content such as images. It calculates the exact page
layout and may use “reflow” algorithms to incrementally adjust the position of elements on
the page. This subsystem also includes the HTML parser, which is often tightly integrated
with the Rendering Engine for performance reasons and can provide varying levels of
support for broken or nonstandard HTML. This tight integration is the result of a design
decision and seems to be a common feature of web browser architectures.
Networking
The Networking subsystem implements file transfer protocols such as HTTP and FTP. It
translates between different character sets, and resolves MIME media types for files. It may
implement a cache of recently retrieved resources.
JavaScript Interpreter
The JavaScript Interpreter evaluates JavaScript code, which may be embedded in web pages.
JavaScript is an object-oriented scripting language developed by Netscape. Certain
JavaScript functionality, such as the opening of pop-up windows, may be disabled by the
Browser Engine or Rendering Engine for security purposes.
23
XML Parser
The XML Parser subsystem parses XML documents into a Document Object Model (DOM)
tree. This is one of the most reusable subsystems in the architecture. In fact, almost all
browser implementations leverage an existing XML Parser rather than creating their own
from scratch. Although arguably less important to the functionality of the system, the XML
Parser is a generic, reusable component with a standard, will-defined interface.
Display Backend
The Display Backend subsystem provides drawing and windowing primitives, a set of user
interface widgets, and a set of fonts. It may be tied closely with the operating system.
Data Persistence
The Data Persistence subsystem stores various data associated with the browsing session
on disk. This may be high level data such as bookmarks or toolbar settings, or it may be low
level data such as cookies, security certificates, or cache.
2.2. Browser Performance Metrics
The measurement of performance of a browser application can be separated into several
aspects based on different requirement from user’s point of view. A user of browser
application hopes both the application itself and the web pages he tries to surf to respond
to his operation instantly always.
Startup speed
Browser’s Startup speed means the time a browser uses to launch, which starts commonly
from single- or double-click on its application icon to the visible view area of the first page
being fully presented to the user.
JavaScript speed
JavaScript, also known as ECMAScript, is a dynamic, weekly-typed, object-oriented scripting
language that is primarily used in the form of client-side script interpreter and executor as
part of a web browser in order to provide enhanced user interfaces on dynamic websites.
The speed of JavaScript interpreter deeply influenced the speed for web browser to render
websites, especially to web 2.0 websites which are implemented with comprehensive
scripts to present interactive effects on user interface and to manipulate the data across
the browser and remote servers.
24
Combined JavaScript with asynchronous data transferring interface provided by most web
browsers and redefined data packaging convention for streaming, Ajax techniques provide
the opportunities to create much better user experiences than ever, on social network
websites and other web applications.
Faster JavaScript execution times means that Ajax-heavy sites like Digg and webapps like
Gmail will be more responsive to user actions. To test core JavaScript function execution
speeds, SunSpider JavaScript Benchmark was used.
[Mention common JS benchmark tool suites.]
DOM selection speed
The faster a browser can select elements in a web page, the more responsive it is on
asynchronous page updates (which most Web 2.0 apps heavily rely on). SlickSpeed was
used to see how fast jQuery selects elements.
Page load time
The total time it takes to load Yahoo.com’s front page was measured using Numion
Stopwatch. Note that due to latency differences that occur with variable site traffic and
server load, caution should be used when interpreting the results.
Average CPU and memory usage
CPU(Computer Processing Unit) usage reveals how much system resources a browser needs:
resource hogs show higher CPU utilization. Windows Resource Monitor was used to obtain
average CPU occupations in percentage while SunSpider was running to simulate activity.
[mention some common measurement methods on different system]
[mention this is not critical to measure on mobile platform. Why]
CSS rendering speed
Browsers with fast CSS rendering speeds have faster page response times. The
nontroppo.org CSS Rendering Benchmark was used to measure the onLoad duration for
complete table-to-div conversion.
Browser cache performance
Total page load times for Yahoo.com with primed caches were measured to see how well
browsers perform when you have visited a website already. The same variable latency
difference may be relevant here with calculating page load times.
25
2.3. Page Load Performance
Page load performance of a mobile browser is calculated mainly by measuring a browser’s
page load speed for a single web address or the average speed of a series of web addresses
in checklists. There have no absolutely standardized data available to judge a browser’s
page load performance, but such kind of continuous measurement and records of collected
values are useful to provide reliable reference to determine possible advancement or
regression of performance after changes in source code or runtime environment of the
browser application. The recorded measurement results are also used to weigh up the
performance gap among alternative mobile browsers which come from different
manufacturers.
2.4. Cloud Computing and Google App Engine
Cloud computing is a model for enabling convenient, on-demand network access to a
shared pool of configurable computing resources that can be rapidly provisioned and
released with minimal management effort or service provider interaction. It is often
considered as web application development and technical manipulation based on the
Internet. Instead of traditional client-server structure, cloud computing abstracts the details
of control over technology infrastructure from users and sets up a new supplement,
consumption, and delivery model based on the Internet. It typically involves the provision
of dynamically scalable and often virtualized resources as a service over the Internet.
Nowadays, there are quite some Cloud Computing services available in the business market.
One of them is Google App Engine. Google App Engine is a platform for developing and
hosting web applications in Google’s infrastructure. With the power of Google-managed
servers and data centers, web applications implemented and deployed on App Engine are
migrated with cloud computing technology seamlessly, which assures the stability and
flexibility of its hosting service globally. (Google, 2008)
Google App Engine was designed and implemented to be programming language
independent to attract web developers from different technical backgrounds. When it was
first released as a beta version in April 2008, Google App Engine supports Python only. And
one year later the support of Java was added. After the Java support was added in early
2009, theoretically, any programming language which is supported by the Java Virtual
Machine (JVM) is available to be used for coding with App Engine nowadays.
26
Google App Engine was designed to work with most web application frameworks which are
written in any one of its supported programming languages. For Python programmers,
Google App Engine provides also a simple web application framework named as webapp,
(Google, 2008) which inherited some advantages and characteristics from another powerful
Python-based web application framework, Django. (Django Software Foundation, 20052010) With this built-in web application framework and other unique features, Google App
Engine provides a complete, feature-rich environment for implementation and online
publication of web applications.
27
3. Research
In order to find out the most accurate and efficient method to measure page load speed of
mobile browsers, the framework of a set of ideal measurement tools needs to be identified,
implemented and evaluated. In this chapter, the research method which has been used in
the experimental part of the study is discussed. Each step of the research process has been
picked up and discussed separately with details of consideration, alternative solution, and
final implementation. Some coding practices of the research issues are also presented in
this chapter.
3.1. Research Method
The research method in this study tries to follow the standard development process of
industrial software engineering, since one of the aims of the study is to create a practical
software application to implement the approach to measure the page load speed of mobile
browsers.
Figure 3.1: The agile software development process model used in the research.
Requirement Analysis
Requirement Analysis is the first step of the work in order to identify the requirements of
our purpose. The analysis will collect and classify the need for creating the measuring
procedure and suitable environment and then trying to find the most suitable
measurement model.
Design
During design process each part of the selected measurement model is justified after being
compared with possible alternatives.
28
Implementation
The implementation tries to create the specified measurement model as the foundation
work of the experimental part of this study.
Verification
For testing purpose several models of mobile phones are selected to be the testing objects.
The generated page load speed data would be collected and presented to verify the
implemented model.
Deployment and Maintenance
This step of the process is to fix the final shape of the measurement model.
3.2. Requirement Analysis
As this research is to find out a best measurement method of mobile browser’s page load
performance. We have acknowledged that the focus will be on the page load speed
measurement. In order to do measure the page load performance, a measurement toolset
needs to be set up.
3G
Mobile station
Internet
Mobile device
WiFi
WLAN AP
Figure 3.2: General measurement model for mobile browser to access the Internet.
Let’s at first find out possible measurement approaches.
Handmade
[Aasdasdad]
29
Automatic
asdasdasdasd
3.2.1. Comparation: automatic vs Handmade timestopper
3.2.2. Comparation: web server on device vs remote
[Needs to Setting up a structure of measurement tool.]
So, as a result, Pick up the structure here.
3.2.3. Comparation: 3G vs WiFi
pick up a general structure of measurement tool,
and
then, we will discuss every aspect of it which is possibly changeable.
3.3. Design - Choice of Measurement Tool
[background description]
WiFi
Internet
WLAN AP
Mobile device
Figure 3.3: Ideal measurement model to test page load performance of mobile browser.
30
3.4. Implementation
3.4.1. Functionality
3.4.2. Language on user interface
3.4.3. Service capacity
3.4.4. Financial support
Figure 3.4: The Projects Management Triangle
A basic factor of the project requirement was a non-existent budget, considering the
financial situation of such an organization, which demanded that the creation, hosting, and
maintenance of the re-defined web site in this study should be all free of cost both for now
and in the foreseeable future. This influences the choice of web development tools, hosting
platform, complexity of site implementation, and related aspects to be considered.
3.4.5. Knowledge transfer
When the new site is created and deployed successfully by the end of the experimental part
of the study, the maintenance work would probably be transferred to other one or several
persons. In order to transfer both written code and knowledge lying behind smoothly, all
31
code and related documents should be addressed in an accessible and secure location
where is convenient for collaboration work among all developers and maintainers of the
web site. Additionally, to decrease the difficulty of becoming familiar with the code for later
coming developers, the whole structure and every piece of code of the re-defined web site
should follow the KISS (Keep It Simple and Stupid) principle wherever possible.
3.5. Testing
3.5.1. Choice of hosting platform
The choice of hosting location is critical to every web site and online service, needing to be
accessible from anywhere, and stable enough to be usable at any time. Depending on the
programmable characteristic of the web service in this experimental part, the hosting
platform needs to provide background database support, and an environment for running
dynamic language scripts also.
The limitation of a non-existent budget [See Section 3.4.4] required that the selected web
hosting platform needs to be completely free of charge for its services. Unfortunately, the
majority of hosting services available on the Internet did not satisfy this requirement when
considering dynamic language programming ability.
One possible choice is the web server service provided freely by TKY (Student Union of
Aalto University School of Science and Technology). Based on a traditional LAMP structure,
the hosting server provided by TKY allows a registered web site administrator to upload
static web pages and PHP-based dynamic scripts, to construct the web site with Apache and
a background MySQL database. The hosting server is maintained by TKY who has forbidden
all possible online accesses from outside the university campus area, which means that the
web site administrator has to be a student who registered in TKY, and he has to establish
the connection to the server to do maintenance work from an inner IP address on the
campus network. (The outdated CSSA-Espoo web site and the discussion forum were
established on this server service.)
The main alternative, however, is the public online hosting service provided by Google App
Engine. [See Section Error! Reference source not found.] As a feature-rich hosting platform,
pp Engine provides industrial scalability and is free of charge when the storage and page
views per month do not exceed limited values. (Google, 2010) After balancing these values
with the required server capability discussed in the requirement analysis [See Section 3.4.3],
32
it has been agreed that the limited values for the free usage of App Engine service is
sufficient for the experimental part of this study.
Compared with the network connecting limitation of TKY’s web server, Google App Engine
has better accessibility which allows anyone who wishes to help with the maintenance
work of the re-designed online application. Furthermore, App Engine provides relatively
complete documentation of integrated APIs and a feature-rich SDK for web developers,
which was absent from the traditional LAMP-based web server provided by TKY.
After the measurement of benefits and limitations between these two possible solutions,
Google App Engine was finally chosen to be the hosting platform of the re-engineered web
site. As a matter of the fact, this decision influenced also the choice of web site
development tools.
3.5.2. Choice of development tools
In order to investigate the benefits brought by a web application framework and Ajax
techniques to web site development, the experimental part of the study will use a web
application framework as a part of the development tools together with a JavaScript library
which contains the necessary Ajax functionalities. All choices of development tools
highlighted reducing the programming workload while minimizing the necessary time
required learning how to use and maintain system.
Web application framework
Based on the choice of hosting platform, the built-in web application framework provided
by Google App Engine, webapp, turned out to be the first, as well as the best, choice for the
experimental part of this study. Webapp is simple but powerful enough to be used in the
research work as it provides all general features a web application framework should have.
[See Section Error! Reference source not found.] Since it is built-in to App Engine by
efault, it is not necessary for developers to be concerned about the binding work which is
compulsory for any other web application framework to work with the App Engine
platform.
JavaScript library
The JavaScript library is commonly used nowadays in web development on the Internet. It
releases web developers from tedious JavaScript coding and debugging, and make it
possible for beginners to implement the comprehensive behaviors of web page elements.
Although webapp in Google App Engine does not contain a JavaScript library by default,
33
there are many JavaScript libraries available with a free software license. As most of those
libraries provide similar functionalities, one would be enough to be used in the research
work.
Based on the survey of usage of common JavaScript libraries, jQuery is the most popular
JavaScript library used on the Internet. (BuiltWith, 2010) It was also chosen to be used for
the experimental part of the research.
Programming language
Based on the decision of using Google App Engine as hosting platform and webapp as the
web application framework, Python turns out to be the best choice of working language for
the programming part of the research. It is a remarkably powerful dynamic programming
language that is used in a wide variety of application domains and available for all major
operating systems. (Python Software Foundation, 1990-2010)
3.5.3. User interface
Based on the results from the requirement analysis, some basic web elements are selected
to be used in the online user interface of the web site. These include a text input block for
users to contribute content to the web site [See Error! Reference source not found.],
everal uneditable text blocks for showing user-generated content on the page together
with buttons to allow users to provide feedback to each text message contributed by other
users [See Error! Reference source not found.]. Considering the other standard
unctionalities necessary for the correct behaviors of the web site, some other buttons, for
instance login, logout, turning to next and previous page, are also necessary to be
presented on the web page.
In order to regulate the page layout easily, the maximum number of total characters
contained in a text field should be limited to a fixed number in the text input field [See
Error! Reference source not found.]. With the limitation of character amount, the layout of
he user interface could prevent chaos resulting from the irregular size of text blocks.
Besides the uneditable text field [See Error! Reference source not found.], the buttons for
sers to provide feedback to messages created by other users should not always be clickable.
These buttons should not be available when the message is created by the user himself.
When the user has already provided his feedback to the message, only one of these two
buttons should be available. The available button should turn around the user’s feedback
from “like” to “dislike”, and vice versa.
34
Ajax techniques would provide a good user experience when the user interacts with the
page elements. After the “submit” button or one of the feedback buttons is pressed, the
page should not try to refresh the whole layout. Instead, only those text blocks which have
been changed in content would be re-rendered on the page.
3.5.4. Incentive mechanism
Beyond the design of user interface, a set of incentive mechanisms are also necessary to
activate user participation of the re-engineered web site.
There should be two sets of ranking system existing on the web site. One set of ranking
system is used to compare different text messages submitted by users. If a text message
receives more positive feedback from users than another message, it should have higher
ranking points and should be listed in front of the other. If two or more messages achieve
the same ranking points from user feedback, the ranking order should be based on the
timestamps of their creation. The later created message should be listed in front of the
older one.
The other set of ranking system is used to compare the contribution among different users.
Every user should get some ranking points when contributing new contents to the web site.
The behavior of providing feedback to other users’ contribution should be rewarded also no
matter whether the feedback is positive or negative. In order to encourage users to
contribute high-quality content, the message which receives more positive than negative
feedback should add more ranking points to the author. Correspondingly, those messages
which receive more negative feedback than positive feedback should decrease the ranking
points of the author.
3.6. Deployment and Maintenance
The practical implementation work started after the decision of development tools had
been made and the user interface had been drafted out. Unavoidably, there was some time
consumed for the pre-study of necessary knowledge to become familiar with develop tools,
which included the jQuery JavaScript library, webapp framework and database API provided
by App Engine, and the Python language for coding practice. Fortunately, there were rich
documents for web developers to learn these skills rapidly.
During the coding practice, several issues emerged when trying to combine the webapp
framework with the jQuery library. These issues and solutions are described in the next
sections.
35
3.6.1. General View
3.6.2. Run Page
3.6.3. Detail Page
In the process of software engineering, testing commonly happens after the
implementation work has finished according to the design. In practical programming work,
the testing actually happens together with implementation from time to time. It is quite
difficult to specify in which time period the work of testing separated from implementation.
This is more obvious in agile-styled development.
As many tiny issues, for instance coding syntax errors, were found actually during
implementation and solved easily, they will not be mentioned here. Instead, the issues
found during integration testing which were so serious that the whole structure of the
research work had to be considered once again because of those are discussed in the next
sections.
3.6.4. Browser compatibility
Compatibility testing is always a critical step for any web application development process
because differences among browser applications always exist. As browser applications are
software products produced by different commercial companies, each company
implements web browser standards in an independent way. The browser’s parser of CSS is
one example of these conflicts.
CSS (Cascading Style Sheets) is commonly used on web sites as a basic standard to regulate
presenting styles of text and pictures in web pages. W3C (W3C, 2010) has published the CSS
standards from version 1 to 3, to reflect the demand of web design requirement. (W3C,
2010) However, all browsers do not follow these de facto standards. Some grammars were
replaced by their unique implementation out of standard. Some features were even not
implemented at all.
In the design of the experimental part of this research, CSS would be used heavily to
present text and page styles of the whole web site. Some UI effects are based on the CSS
parser and operations, which include round-corner blocks and half-transparent blocks.
During the testing phrase, it was observed that although the majority of modern browser
applications, for instance Mozilla Firefox, Google Chrome, and Apple Safari supported these
CSS effects created for the experimental part of work, Microsoft Internet Explorer seemed
do not.
36
For the half-transparent effect of text blocks, Internet Explorer provided a differently
named CSS attribute to achieve the similar results. But for the round-corner-block effect,
this browser application totally blocked the possibility of implementing it in a CSS way.
3.6.5. Invoking API of JavaScript library
Another compatibility issue which emerged in the testing phrase of the engineering process
was generated by the usage of the invoking API of JavaScript libraries provided by Google.
This set of APIs was named by Google as the AJAX Libraries API. It is a content distribution
network and loading architecture for the most popular, Open Source JavaScript libraries.
(Google, 2010) It provides a simple method, google.load (Google, 2010), for JavaScript
programs to launch the necessary JavaScript libraries easily. One of these important
JavaScript libraries is jQuery, which was used in the implementation heavily for all
interactive behaviors presented to users and asynchronous data transfer in the
background.
By using Google’s AJAX Libraries API, these JavaScript libraries which are commonly used on
web sites get the benefits by an offline cache mechanism provided by most kinds of
browser applications. When a browser application is requested by a user operation to fetch
a JavaScript library file from a remote address, it will check if the file has been downloaded
into the local cache before trying to download it a second time. Providing a unified web
location to store the most famous JavaScript libraries in Google’s infrastructure
undoubtedly saves the downloading time of all of the users who visit these web sites, thus
benefiting the web sites by increased loading speed from the client user's point of view.
Unfortunately, from the observation during testing of this research, Microsoft Internet
Explorer has a proven lack of support for this set of APIs. It blocked the attempt to run the
unified invoking function provided by Google, which was used to specify the version
number and related options in order to invoke a correct JavaScript library file. This behavior
was observed from Microsoft Internet Explorer version 6, 7, and 8, which led the user to
see only incorrectly rendered pages of web sites. Instead, other commonly used web
browser applications, for instance Mozilla Firefox, Google Chrome, and Apple Safari, loaded
the JavaScript library correctly and rendered web pages quite well.
The deployment step in software engineering means to deliver the finished coding results
into the real working environment. For web applications, this means setting up the serverside services and getting those ready to serve client users. In web application development,
deployment could be more difficult than local software applications since web service has
37
to be a combination of services by the HTTP server, database server, language runtime, and
other relative services. The configuration and adjustment of all these interconnected
services are time-consuming and error-prone.
Fortunately, Google App Engine provides a powerful SDK for web developers to deploy the
tested application onto the remote server. The SDK is responsible for detection of any file
changes since the last time when new site content was submitted, and uploads the changed
files automatically for the user.
Google App Engine supports also debugging on the remote server directly. After the coding
work has been deployed onto the App Engine platform, App Engine will record all warnings
and errors happening during the serving time, which are easy to access by web developers.
This helps web developers to easily trace hidden issues happening only in the real
environment.
Maintenance is the last step of the software engineering process. It commonly consists of
fixing bugs found after deployment, adding new features onto existing applications, and
other code modification to fit the user’s requirement changes. Because the experimental
part of the study aimed to create a web site with new styled user interface to encourage
users’ interaction, maintenance was certainly important for following the feedback of users
and upgrading the user interface and functionalities.
In order to help other developers to become familiar with the code and the whole structure
of the experimental part of the study as quickly as possible so that they could continue the
maintenance work later after this study, all parts of the research work have been saved in
the source code and uploaded to a public online version control system. The usage of a
version control system helps several developers to share source code changes and prevent
the risk of data loss or undesired operations resulting from human mistakes. [See Appendix
C]
38
4. Results
The results of the study are presented here which consist of both the final user interface
and code implementation. Related to the interface design, consideration of how to increase
the users’ visiting rate and, thus the generated mechanism of a user rating system built-in
to the final application, is also introduced. For the coding presentation, the results of the
research of conflicts among Google App Engine platform, jQuery, and related coding
guidelines are presented and discussed.
[description of the code part]
[description of the comparation]
4.1. Decision of Design
This section described decisions made during the design phrase of the research process,
which included the final presence of the user interface, the usage of dynamic effects on
page UI elements, and the incentive mechanism adopted for stimulating user participation.
4.1.1. User interface
In order to simplify the functionalities of the web application and the development work of
the coding part, the experimental part of the study was designed as a single-page web
application, which means the user interface was unified all over the functional steps across
the usage. [See Error! Reference source not found.]
One benefit of keeping the application as a single-page application is the avoidance of users’
reloading operation of the web page. All of the data transfer is done by Ajax when users
interact with the application. And the UI will change according to the data modifications
made by the users’ data requests.
Another benefit of using single-page design is the unified user experience across all users’
operation behaviors. The UI keeps the same all the time from when to user starting
browsing the web site until leaving it. This helps users become familiar with the application
faster at the first visit without the need for any form of tutorial, and to maintain familiarity
when they come back later.
Furthermore, the unification of the UI helps the implementation work to be done with
relative ease, because the UI design does not change when the data transfer state changes.
39
For an experimental part of this study, such a decision may save a lot of time otherwise
spent on coding work.
4.1.2. Interactive UI elements
Although this web application has a single-page UI, the implementation tries to add some
interactive UI elements to enhance the user experience and provide more functions in a
more convenient method. So, as a result, some JavaScript based user-interactive-driven
DOM (Document Object Model) behaviors were added to the UI.
One of the examples of these is the button behavior. When a user moves his cursor over to
a button of the application, the button slides a bit to the right side smoothly, and shows a
word as a hint of the functionality it has, while the floating cursor turns to a finger shape at
the same time. All these changes of the behaviors help users a lot to recognize the usage of
the UI elements of the application. Instead, if a button widget is not clickable, the widget
will not be interactive with the cursor, nor the cursor shape will change.
Another example of such interactive UI elements is the button used for the rating system.
As a normal button of the application, users can click the button to rate a message when
the button is clickable. But according to the background logic judgment, the button might
turn to be unable to click, to avoid a user to rate a message twice or to rate one produced
by himself. In such a context, the button’s background color turns to dark, and the cursor
hovering on it will not change to a finger shape, but remain the same as a normal one.
4.1.3. User ranking system
Based on the rating system designed for arranging the order of all messages published on
the application, a ranking calculation of each registered user of the web application is also
running in the background. Every user will get some points when he submits a new
message to the application, and when the message is labeled as “like” or “dislike” by any
one or several other users, the author of the message will be rewarded or punished by the
overall rating of the messaged received.
Additionally, a user will also get points when he points out his “like” or “dislike” to a
message created by another user. Every user has only one vote for each message which is
however allowed to be changed to opposite later after voted. When a message is later
deleted by its author, the points other users got by voting on the message will be removed
also.
40
Based on these points achieved by each user of the application, the ranking order of all
users is easy to be defined. By showing the names of several top ranking users, the
application tries to stimulate users to create more useful messages and also give feedback
to every message created by others, and also competing with other users to reach the
highest rank.
4.2. Solution of Implementation
This section summarizes all issues and conflicts found out in the implementation and
testing phrases of the research process, and describes the corresponding solutions which
were decided and implemented in the finished coding practice. Each issue mentioned
below has been described in the Research chapter in detail.
4.2.1. Model-Template-View vs. Ajax
This issue arose because the MTV structure of the webapp framework was not suitable for
Ajax techniques to be used easily. [See Section Error! Reference source not found.]
As a solution, in the final code structure of this experimental part of the research, the
Controller layer was added into the code structure, dealing with the fetching requests of all
asynchronous data, and sending pure data results back to the client side in JSON (JavaScript
Object Notation) format. This new pattern combined the benefits from MVC and MTV
altogether, and solved the issue of using Ajax techniques together with the webapp
framework.
4.2.2. jQuery vs. REST
This issue arose because the jQuery JavaScript library removed the support of two standard
HTTP methods, PUT and DELETE, in order to increase its compatibility across browser
applications. [See Section Error! Reference source not found.]
To fix this issue to allow jQuery to support all four standard keywords of the HTTP protocol,
a patch was created and put into the final application code. The patch consists of two selfdefined functions which were implemented to simulate the behaviors of PUT and DELETE
keywords. Getting these two HTTP methods back to work made the implementation based
on the REST principle being possible. As a drawback, the compatibility across different kinds
of browsers of this re-engineered web site would be affected. The browser applications
those do not support PUT and DELETE keywords would not render the web site correctly.
41
4.2.3. Ajax over JSON
This issue arose because the default API set in the webapp framework introduced a bug to
the built-in function which was necessary for operating JSON-formatted data. [See Section
Error! Reference source not found.]
To fix this issue in the final implementation, some lines of code were added to the header
part of every executable script file in the experimental part of the work. These lines of code
requested the webapp framework to load the latest Django API (version 1.1 instead of
version 0.96 by default) before invoking any function borrowed from Django directly. This
ensures JSON-formatted data being correctly analyzed and operated by the webapp
framework and client-side browser applications.
4.2.4. Browser compatibility
This issue arose because the browser application, Microsoft Internet Explorer, did not
support part of standard CSS effects used in the user interface implementation. [See
Section 3.6.4]
In order to decrease the workload for enhancing the compatibility of the web site, the
experimental part of the research did not try everything to perfect the user experience for
users who used Microsoft Internet Explorer for browsing. It has been observed during the
testing period that the lack of specific modification of code for Internet Explorer did not,
however, greatly affect user experience. There existed also the expectation that the W3C’s
CSS standards will be accepted and implemented across all browser applications in the
world in the near future.
4.2.5. Invoking API of JavaScript library
This issue arose because the browser application, Microsoft Internet Explorer, did not
support the API provided by Google for invoking JavaScript libraries. [See Section 3.6.5]
The temporary “work-round” solution of this issue was to avoid using the invoking API for
JavaScript libraries provided by Google, instead using the direct URI in the declaration of
the JavaScript library, which is jQuery in the research work. In such a way, the jQuery library
will be ensured to be pre-fetched by all browser applications. But by pointing out a direct
web link explicitly, we lost the flexibility of using the API to fetch the library file dynamically.
42
5. Discussion
In this chapter, based on the research work and results of the experimental part of the
study, an attempt has been made to answer the questions generated in the Introduction
chapter [See Section 1.2].
5.1. Answering Research Questions
In the beginning of this thesis, research questions were defined [See Section 1.2]. Based on
the conducted research and the results presented in the Research chapter [See Section 3]
and the Results chapter [See Section 4], the research questions will now be reviewed.
1st Question: How to evaluate page load performance of mobile browser
accurately and efficiently?
2nd Question: How to implement an optimized performance measurement tool?
3rd Question: What features of mobile browser are beneficial to increase page
load performance?
5.2. Benchmarks
The benchmark section tries to compare the re-engineered web site with other styles of
web applications which provide different functionalities in order to find out the user group
differences.
In the second part, the web site was compared with some famous web sites on the Internet.
It would be interesting and valuable to compare the results of the experimental part of the
study with common social network applications on the Internet. The comparison helps to
find out the advantages and disadvantages of the design and implementation, and provides
a reference for possible future work for bug fixing or adding new features.
5.2.1. Comparison with other measurement toolkits
Here the differences between the web application in the experimental part of this study
and some widely deployed web services are presented. The discussion concentrates on the
user interactive method, UI design and related technical issues.
Mozilla SunSpider
From a technical point of view, all of the existing web sites which consist mainly of static
web pages are Web 1.0 sites. The majority of the documentation pages of these web sites
are written purely with HTML, thus are not able to interactive with behaviors of users.
43
6. Conclusion
One of the main purposes of this study was to find out the benefits which a web application
framework and Ajax techniques may bring to online service development. The business
possibility of the re-engineered web application was presented here. At the end of the
chapter, the challenges of the study are discussed and the research process will be
evaluated. The possible future work is also discussed.
6.1. Research Evaluation
SWOT Analysis is a strategic planning method used to evaluate the Strengths, Weaknesses,
Opportunities, and Threats involved in a project or in a business venture. It involves
specifying the objective of the business venture or project and identifying the internal and
external factors that are favorable and unfavorable to achieving that objective. SWOT is an
ideal way to measure business demand and indentify the possibility of making profits from
the market. By using SWOT, the business opportunity is easier to be understood. Here is a
paragraph which describes the SWOT analysis results.
Figure 6.1: The SWOT model (CIPD, 2008)
Here the results of the experimental part of the study will be analyzed for the business
prospects by using the SWOT analysis methods. The purpose is to find out the potentials to
migrate the application structure to serve more users and to achieve commercial benefits if
possible. The listed analysis results are based on the SWOT analysis template. (Chapman,
1995-2010)
44
Strengths
Advantages of proposition: Ajax-styled user interface and user incentive mechanism.
Capabilities: Concise code structure. Ease of maintenance.
Competitive advantages: Free distribution of source code. Platform of Cloud computing.
Unique selling points: Google infrastructure. Free distribution of source code.
Resources, assets, people: Single developer product. Free development tools.
Experience, knowledge, data: DVCS in use. Rich documentation from the Internet.
Financial reserves, likely returns: Possible online advertisements.
Marketing – reach, distribution, awareness: Available online now.
Innovative aspects: Concise user interface. Coding less with the help from development
tools.
Location and geographical: Accessible online from anywhere of the world.
Price, value, quality: Free access and free usage. Ease for maintenance.
Accreditations, qualifications, certifications: Similar online sites proved successful.
Processes, systems, IT, communications: Everything is online. Ease for maintenance.
Cultural, attitudinal, behavioral: Ease for localization. Ease for extending user amount.
Management cover, succession: Single person product. Ease of knowledge transfer.
Weaknesses
Disadvantages of proposition: Simple functionalities. Some functionality is missing.
Gaps in capabilities: Lots of work to do to add new features.
Lack of competitive strength: Some functionality is missing.
Reputation, presence and reach: No one has noticed its existence so far.
Financials: No budget available at all. No income would be available in the near future.
45
Own known vulnerabilities: Some functionality is missing.
Timescales, deadlines and pressures: Single person product relies on a personal schedule.
Cash flow, start-up cash-drain: No cash at all.
Continuity, supply chain robustness: Depends on the interests from users.
Effects on core activities, distraction: Browser compatibility would be a trouble.
Reliability of data, plan predictability: online users lose interests faster.
Morale, commitment, leadership: Single person product.
Accreditations, etc: Too many failure examples of Web 2.0 sites.
Processes and systems, etc: Dependence on accessibility to Google servers.
Management cover, succession: Knowledge was not shared in team. Too much knowledge
to learn for a newbie.
Opportunities
Market developments: More functionality could be added.
Competitors’ vulnerabilities: Higher budgets. More payment for human resources.
Industry or lifestyle trends: User-centered concepts will collect user interests.
Technology development and innovation: Users enjoy responding to new ideas.
Global influences: Accessible from anywhere in the world.
New markets, vertical, horizontal: More functionality to ease life of oversea users.
Geographical, export, import: Accessible from anywhere in the world.
New unique selling points: Google’s cloud computing platform.
Business and product development: Possible to adhere to Google Adsence.
Information and research: Possible to add more functionality ready on App Engine.
Partnerships, agencies, distribution: Combined with Google service. Google Account is the
only requirement for new user registration.
46
Volumes, production, economies: Free of charge for hosting and code upgrading.
Threats
Political effects: Google services may not be accessible in specific geographic locations.
Legislative effects: Content filter might be necessary.
Environmental effects: None.
IT developments: Experienced web developer is necessary for maintenance.
Competitor intentions –various: Social network services may offer the same functionality.
Market demand: UI usability from mobile devices.
New technologies, services, ideas: Maintenance work might be a lot to catch up with
changes.
Vital contracts and partners: Google App Engine might be not free any more on some day.
Sustaining internal capabilities: Another experienced web developer is needed.
Obstacles faced: Users refuse to try something new.
Insurmountable weaknesses: lack of support for mobile SMS access.
Loss of key staff: If there has no another experienced web developer coming.
Sustainable financial backing: Google Adsence might not work.
6.2. Challenge of the study
During the preparation period of this research, it took a very long time for grasping the
necessary concepts and knowledge for exerting development tools well enough. Since web
development technologies evolve rapidly, web developers have to learn new concepts and
coding practices fast, which is relatively difficult for an amateur who can only do this study
work in spare time.
The web application framework is a new concept for web development. After Rails was
published in the year 2004, the power of the web application frameworks was recognized
by the web industry little by little. As a result, more and more general-purposed web
application frameworks appeared based on different kinds of languages. Every web
application framework has its own advantages and drawbacks when compared to others. It
47
is hard to tell whether a web application framework is better to be used on one occasion
than on another without getting familiar with and accumulating enough practical
experiences on both of them. And the evolution of web application frameworks themselves
will never stop. The Rails framework is going to release its third major version, Rails 3.0, and
the Django framework has released the schedule for its next minor version update, Django
1.2.
The rapid upgrading of the structures influences the stability of the APIs of these
frameworks. Some functions disappeared or were renamed after a minor update of the
framework. Some ready-made web applications did not work anymore when the
dependent web application framework was upgraded without careful detection of possible
conflicts. Even the tutorials would turn out to be useless when a new minor version
upgrade appeared.
The initial idea of this research was generated before Google released its App Engine
platform. It was a big surprise to find out there was such a free yet powerful service
provided by a commercial company to be a practical field for web development. To start
working with App Engine, necessary knowledge of Python language has to be learned. The
documentation of App Engine API was another task for web developers to study in detail.
These study processes were done together with the endless upgrading of the App Engine
SDK from the core team of the App Engine platform.
6.3. Possible future work
As the experimental part of the study concentrated on identifying the web development
changes brought by the web application framework and Ajax techniques with moderate
programming load, some advanced features which are commonly available in social
network services are absent from the re-engineered web site. This section listed some of
these features in order to provide a reference for possible future development of the site.
Content tagging
48
Bibliography
Ambler, S. W. (2010). Mapping Objects to Relational Databases: O/R Mapping In Detail.
Retrieved April 30, 2010, from www.agiledata.org: Techniques for Successful Evolutionary /
Agile Database Development: http://www.agiledata.org/essays/mappingObjects.html
Apple. (2011). Apple. Retrieved May 2, 2011, from http://www.apple.com/
Bennett, J. (2006, July 2). Django and Ajax. Retrieved April 26, 2010, from b-list.org:
http://www.b-list.org/weblog/2006/jul/02/django-and-ajax/
BuiltWith. (2010). JavaScript Usage Statistics. Retrieved May 1, 2010, from Web and
Internet Technology Usage Statistics: http://trends.builtwith.com/javascript
Chapman, A. (1995-2010). SWOT Analysis. Retrieved May 3, 2010, from businessballs.com:
http://www.businessballs.com/swotanalysisfreetemplate.htm
CIPD. (2008, March). SWOT analysis. Retrieved May 3, 2010, from cipd.co.uk:
http://www.cipd.co.uk/subjects/corpstrtgy/general/swot-analysis.htm
CSSA-Espoo. (2008). Chinese-list -- Mail list for Chinese in Aalto. Retrieved May 1, 2010,
from CSSA-Espoo mailing list: http://list.ayy.fi/mailman/listinfo/chinese-list/
Django Software Foundation. (2005-2010). Django | The Web framework for perfectionists
with deadlines. Retrieved April 18, 2010, from http://www.djangoproject.com/
DocForge. (2010, April 18). Web application framework. Retrieved April 26, 2010, from
DocForge: http://docforge.com/wiki/Web_application_framework
Evans, C. C. (2004). The Official YAML Web Site. Retrieved April 18, 2010, from
http://www.yaml.org/
Facebook. (2010). Welcome to Facebook. Retrieved May 3, 2010, from Facebook:
http://www.facebook.com/
Fielding, R. T., & Taylor, R. N. (2002). Principled Design of the Modern Web Architecture. In
R. T. Fielding, & R. N. Taylor, Principled Design of the Modern Web Architecture (pp. 115150). ACM Transactions on Internet Technology, Vol. 2, No. 2, May 2002.
Gardner, R. (2010, July 9). Mobile Browser Usage on the Increase. Retrieved May 2, 2011,
from http://netprofitstoday.com/blog/mobile-browser-usage-on-the-increase/
49
Garrett, J. J. (2005, February 18). Ajax: A New Approach to Web Applications. Retrieved
April
26,
2010,
from
adaptive
path:
http://www.adaptivepath.com/ideas/essays/archives/000385.php
Google. (2008). Google App Engine. Retrieved April 18, 2010, from Google Code:
http://code.google.com/appengine/
Google. (2008). The webapp Framework - Google App Engine. Retrieved April 18, 2010,
from Google Code: http://code.google.com/appengine/docs/python/tools/webapp/
Google. (2010). Developer's Guide - Google AJAX APIs. Retrieved May 5, 2010, from Google
Code: http://code.google.com/apis/ajax/documentation/
Google. (2010). Google Accounts Python API Overview - Google App Engine. Retrieved April
30,
2010,
from
Google
Code:
http://code.google.com/appengine/docs/python/users/overview.html
Google. (2010). Google AJAX Libraries API. Retrieved May 3, 2010, from Google Code:
http://code.google.com/apis/ajaxlibs/
Google. (2010). Project Hosting on Google Code. Retrieved May 3, 2010, from Google Code:
http://code.google.com/projecthosting/
Google. (2010). Quotas - Google App Engine. Retrieved May 1, 2010, from Google Code:
http://code.google.com/appengine/docs/quotas.html
Google. (2010). Using Templates - Google App Engine. Retrieved April 30, 2010, from
Google
Code:
http://code.google.com/appengine/docs/python/gettingstarted/templates.html
Google. (2010). XMPP Python API - Google App Engine. Retrieved May 3, 2010, from Google
Code: http://code.google.com/appengine/docs/python/xmpp/
Harvard Law. (2003, July 15). RSS 2.0 Specification (RSS 2.0 at Harvard Law). Retrieved May
3, 2010, from Berkman Center For Internet & Society at Harvard University:
http://cyber.law.harvard.edu/rss/rss.html
Hunt, A. (2010, 1 13). Dont Repeat Yourself. Retrieved April 18, 2010, from c2.com:
http://c2.com/cgi/wiki?DontRepeatYourself
iPhone. (2011). iPhone. Retrieved May 2, 2011, from http://www.apple.com/iphone/
50
jQuery. (2006). jQuery: The Write Less, Do More, JavaScript Library. Retrieved April 18,
2010, from http://jquery.com/
jQuery. (2010). Browser Compatibility. Retrieved April 26, 2010, from jQuery JavaScript
Library: http://docs.jquery.com/Browser_Compatibility
JSON. (1999). Introducing JSON. Retrieved April 25, 2010, from http://www.json.org/
Mazzetti, P., Nativi, S., & Bigagli, L. (2008). Integration of REST style and AJAX technologies
to build Web applications; an example of framework for Location-Based-Services.
Information and Communication Technologies: From Theory to Applications, 2008. ICTTA
2008. 3rd International Conference on (pp. 1 - 6). Univ. of Florence Prato, Florence: IEEE
Conferences .
Mell, P., & Grance, T. (2009, October 7). The NIST Definition of Cloud Computing. Retrieved
April 18, 2010, from NIST.gov - Computer Security Division - Computer Security Resource
Center: http://csrc.nist.gov/groups/SNS/cloud-computing/index.html
Miller, J. (2009, February). Design For Convention Over Configuration. (Microsoft) Retrieved
April
18,
2010,
from
MSDN
Magazine:
http://msdn.microsoft.com/en-
us/magazine/dd419655.aspx
Prototype. (2006). Prototype JavaScript Framework: ease development of dynamic web
applications. Retrieved April 25, 2010, from http://www.prototypejs.org/
Python Software Foundation. (1990-2010). Python Programming Language -- Official
Website. Retrieved April 18, 2010, from http://www.python.org/
Selfa, D., Carrillo, M., & Del Rocio Boone, M. (2006). A Database and Web Application Based
on MVC Architecture. Electronics, Communications and Computers, 2006. CONIELECOMP
2006. 16th International Conference on (pp. 48 - 48). Benemerita Universidad Autónoma de
Puebla, Mexico: IEEE Conferences.
Shan, T. C., & Hua, W. W. (2006). Taxonomy of Java Web Application Frameworks. eBusiness Engineering, 2006. ICEBE '06. IEEE International Conference on (pp. 378 - 385).
Shanghai: IEEE Conferences.
SpringSource.
(2004-2010).
SpringSource.org.
http://www.springsource.org/
51
Retrieved
April
18,
2010,
from
Thomas, D. (2003, March 10). Orthogonality and the DRY Principle. (i. b. Venners, Editor)
Retrieved April 18, 2010, from artima developer: http://www.artima.com/intv/dry.html
Twitter. (2010). Twitter - Discover what’s happening right now, anywhere in the world.
Retrieved May 3, 2010, from twitter.com: http://twitter.com/
W3C. (2010). Cascading Style Sheets. Retrieved May 3, 2010, from W3C.org:
http://www.w3.org/Style/CSS/
W3C.
(2010).
World
Wide
Web
Consortium.
Retrieved
May
3, 2010,
from
http://www.w3.org/
Yahoo!
Inc.
(2010).
Help:
Tags.
Retrieved
May
3,
2010,
from
Flickr:
http://www.flickr.com/help/tags/
Ye, P. (2010). Research on Mobile Browser's Model and Evaluation. 978-1-4244-6359-6/10
IEEE (pp. 712-715). 2010 IEEE.
Appendices
Appendix A: Top 35 of Global Top Sites retrieved from Alexa
In this section, the collection of web sites duplicated locally as mirroring components in the
experimental part of the study are presented in a unified form. The rank orders of these
web sites are as the same as those of the Global Top Sites being presented on the website
of Alexa.com, which is freely available on the Internet by visiting the web address below:
http://www.alexa.com/topsites (Retrieved April 28, 2011)
Because of the issues which are found out during the experimental part of the study, some
web sites listed in the form below could not be correctly mirrored in order to fetch correct
results during the measurement. Therefore these sites are marked here with different
background colors for classified reasons. Without counting in these problematic web sites,
the total number of available sites in the form is 20, which is the maximum number of
mirrored web sites being manipulated in the experimental part of the study.
52
Rank
Site Name
Web Address
Brief Description
1
Google
google.com
Internet search engine
2
Facebook
facebook.com
Social networking service
3
YouTube
youtube.com
Worldwide video sharing service
4
Yahoo!
yahoo.com
Internet portal and service provider
5
Blogger
blogspot.com
Weblog publishing tool
6
Baidu (百度)
baidu.com
Search engine in Chinese language
7
Wikipedia
wikipedia.org
A free encyclopedia on wiki
8
Windows Live
live.com
Search engine from Microsoft
9
Twitter
twitter.com
Social networking and microblogging
10
QQ
qq.com
Internet service portal in China
11
MSN
msn.com
Internet service portal
12
Yahoo! Japan
yahoo.co.jp
Japanese version of Yahoo!
13
Sina (新浪)
sina.com.cn
Internet news in Chinese language
14
Google India
google.co.in
Indian version of Google
15
Taobao (淘宝)
taobao.com
Person to person transaction in China
53
Rank
Site Name
Web Address
Brief Description
16
Amazon
amazon.com
Customer-centric online purchase
17
LinkedIn
linkedin.com
Networking focusing on business
18
Google Hongkong
google.com.hk
Chinese version of Google
19
WordPress
wordpress.com
Free blog management
20
Google Germany
google.de
German version of Google
21
Bing
bing.com
Search engine from Microsoft
22
Google UK
google.co.uk
UK version of Google
23
Yandex (Яндекс)
yandex.ru
Search engine in Russian language
24
eBay
ebay.com
Person to persion auction
25
Google Japan
google.co.jp
Japanese version of Google
26
Microsoft
microsoft.com
Main site of Microsoft corporation
27
Google France
google.fr
French version of Google
28
NetEase (网易)
163.com
Internet portal and networking in China
29
Google Brasil
google.com.br
Brazilian version of Google
30
Google User Content
(N/A)
User content of Google
31
Flickr
flickr.com
Free picture galleries
32
FC2
fc2.com
Video sharing service in Japan
33
Mail.ru
mail.ru
Email service provider in Russia
34
Google Italy
google.it
Italian version of Google
35
Craigslist
craigslist.org
Centralized community network
Explanation of the background colors to web sites in rows:
Normal
Green
Red
Yellow
Available in the experimental part
Duplicate site content
Fail to execute page loading for evaluation
Unable to mirror locally
Figure 0.1: Top 35 of Global Top Sites retrieved from Alexa
54
Appendix B: Source Code of Experimental Part
The source code of the experimental part of the study has been uploaded and managed by
the online version control service provided freely by Google. (Google, 2010) The code
resources and all pictures used on the user interface are located in the URL below. The
whole research work is released under GNU GPL v2.
http://code.google.com/p/meixi/source/browse/#hg/ptest
Here in the appendix all source code files are not listed. Only the important source files are
listed for providing reference to the research evidence. Other unlisted source code files can
be accessed from the URL above.
File: app.yaml
application: pageloadspeed
version: 1
runtime: python
api_version: 1
handlers:
- url: /sites
static_dir: local_sites
- url: /static
static_dir: static
- url: /favicon.ico
static_files: static/favicon.ico
upload: static/favicon.ico
- url: /.*
script: view.py
55
File: model.py
import yaml
from google.appengine.ext import db
PRESET = yaml.load(file('preset.yaml', 'r'))
class Case(db.Model):
name = db.StringProperty()
core = db.StringProperty()
device = db.StringProperty()
connection = db.StringProperty()
scope = db.StringProperty()
created = db.DateTimeProperty(auto_now_add=True)
def getOne(self):
case = {}
case['key'] = str(self.key())
case['name'] = self.name
case['result'] = Record().speedSum(self)
case['core'] = self.core
case['device'] = self.device.split()[-1]
case['connection'] = self.connection.split()[-1]
case['scope'] = self.scope.split()[-1]
case['created'] = str(self.created).rsplit(':', 1)[0]
return case
def getList(self):
list = []
query = self.all().order('-created')
for x in query:
list.append(x.getOne())
return list
def remove(self):
Record().removeBy(self)
self.delete()
def removeAll(self):
query = self.all()
for x in query:
x.remove()
class Record(db.Model):
case = db.ReferenceProperty(Case)
pagerank = db.IntegerProperty()
speed = db.IntegerProperty()
def getList(self, case):
list = []
query = self.all().filter('case = ', case).order('pagerank')
for x in query:
record = {}
record['rank'] = x.pagerank
record['site'] = PRESET['sites'][x.pagerank - 1]
record['speed'] = x.speed
list.append(record)
return list
def speedSum(self, case):
sum = 0
query = self.all().filter('case = ', case)
for x in query:
sum += x.speed
return sum
def removeBy(self, case):
query = self.all().filter('case = ', case)
for x in query:
x.delete()
56
File: preset.yaml
devices:
- Nokia N900
- Nokia N97 Mini
- Apple iTouch
- PC
connections:
- WiFi 802.11b
- WiFi 802.11g
- WiFi 802.11n
- 3G
- Ethernet
scopes:
- Small - 5
- Midium - 10
- Large - 20
sites:
- google
- facebook
- youtube
- yahoo
- blogger #5
- baidu
# - live # iframe error
- wikipedia
- twitter
- qq
# - msn
- yahoo_jp #10
# - sina # cookie error
# - google_in
- taobao
- amazon
- linkedin
# - google_hk
# - google_de
- wordpress
- bing #15
# - google_uk
- yandex
# - google_jp
- ebay
- microsoft
# - google_fr
# - 163 # failed to download
# - google_br
- mail_ru
- flickr #20
57
File: view.py
import os
os.environ['DJANGO_SETTINGS_MODULE'] = 'settings'
from google.appengine.dist import use_library
use_library('django', '1.2')
from google.appengine.ext import webapp
from google.appengine.ext.webapp.util import run_wsgi_app
from google.appengine.ext.webapp import template
from django.utils import simplejson
from model import *
class MainView(webapp.RequestHandler):
def get(self):
values = {
'devices': PRESET['devices'],
'connections': PRESET['connections'],
'scopes': PRESET['scopes'],
'cases': Case().getList(),
}
path = os.path.join(os.path.dirname(__file__), 'templates/main.html')
self.response.out.write(template.render(path, values))
class CaseClean(webapp.RequestHandler):
def get(self):
Case().removeAll()
self.redirect('/')
class CaseView(webapp.RequestHandler):
def get(self):
act, key = self.request.path.strip('/').split('/')
try:
case = db.get(db.Key(key))
except db.Error:
self.redirect('/')
return
if act == 'read':
values = {
'case': case.getOne(),
'records': Record().getList(case),
}
path = os.path.join(os.path.dirname(__file__), 'templates/case.html')
self.response.out.write(template.render(path, values))
elif act == 'run':
values = {
'case': case.getOne(),
}
path = os.path.join(os.path.dirname(__file__), 'templates/run.html')
self.response.out.write(template.render(path, values))
elif act == 'delete':
case.remove()
self.redirect('/')
def post(self):
name = self.request.get('name')
core = self.request.get('core')
device = self.request.get('device')
connection = self.request.get('connection')
scope = self.request.get('scope')
case = Case(name=name, core=core, device=device, connection=connection,
scope=scope)
case.put()
self.response.headers['Content-Type'] = 'application/json'
self.response.out.write(simplejson.dumps(str(case.key())))
class CreateRecord(webapp.RequestHandler):
def post(self):
key = self.request.get('key')
results = self.request.get('results').split(',')
try:
case = db.get(db.Key(key))
except db.Error:
self.redirect('/')
return
58
for i, x in enumerate(results):
record = Record(case=case, pagerank=i+1, speed=int(x))
record.put()
class SiteList(webapp.RequestHandler):
def get(self):
self.response.headers['Content-Type'] = 'application/json'
self.response.out.write(simplejson.dumps(PRESET['sites']))
class Redirect(webapp.RequestHandler):
def get(self):
self.redirect('/')
application = webapp.WSGIApplication([('/', MainView),
('/caseclean', CaseClean),
('/create', CaseView),
('/read/.+', CaseView),
('/run/.+', CaseView),
('/delete/.+', CaseView),
('/record', CreateRecord),
('/sitelist', SiteList),
('/.*', Redirect)],
debug=True)
def main():
run_wsgi_app(application)
if __name__ == "__main__":
main()
59
File: static/main.js
$(function() {
getCore();
$('input#name').val('New Run');
$('#submit').click( function() {
var name = $('input#name').val();
var core = $('input#core').val();
var device = $('select#device option:selected').val();
var connection = $('select#connection option:selected').val();
var scope = $('select#scope option:selected').val();
$.post('/create', {'name': name,
'core': core,
'device': device,
'connection': connection,
'scope': scope},
function(key){ window.location='/run/' + key; }
);
});
});
function getCore() {
$.each($.browser, function(i, val) {
if(val === true) {
$('input#core').val(i + ' ' + $.browser.version);
return false;
}
});
}
60
File: static/run.js
$(function() {
$('div#hint').hide();
$('iframe#subframe').load( function() { stopWatch(); });
key = document.location.href.split('/').pop();
rank = 0;
scope = parseInt( $('td#info_scope').text() );
sites = [];
results = [];
$.getJSON('/sitelist', function(list) {
sites = list;
if(scope > sites.length) scope = sites.length;
$('div#hint').show();
startWatch();
});
});
function startWatch() {
$('span#timer').text((rank + 1) + '/' + scope);
start_time = new Date();
$('iframe#subframe').attr('src', '/sites/' + sites[rank] + '.html');
}
function stopWatch() {
stop_time = new Date();
var speed = stop_time - start_time;
$('iframe#subframe').attr('src', '');
results.push(speed);
if(++rank < scope) {
startWatch();
} else {
$("iframe#subframe").unbind('load');
$.post('/record', {'key': key, 'results': '' + results}, function() {
$("div#hint").append(' .. Done.');
window.location = "/";
});
}
}
61
File: templates/case.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
{% include "title_style.html" %}
</head>
<body>
<h5>pTest - Measurement of page load performance</h5>
{% include "info.html" %}
<table>
<tr>
<th>Rank</th>
<th>Website</th>
<th>Page load speed</th>
</tr>
{% for record in records %}
<tr>
<td>{{ record.rank }}</td>
<td>{{ record.site }}</td>
<td>{{ record.speed }}</td>
</tr>
{% endfor %}
</table>
</body>
</html>
62
File: templates/info.html
<table>
<tr>
<th>Name</th>
<th>Core</th>
<th>Result</th>
<th>Device</th>
<th>Connection</th>
<th>Scope</th>
</tr>
<tr>
<td>{{ case.name }}</td>
<td>{{ case.core }}</td>
{% if case.result %}
<td>{{ case.result }}</td>
{% else %}
<td> ... </td>
{% endif %}
<td>{{ case.device }}</td>
<td>{{ case.connection }}</td>
<td id="info_scope">{{ case.scope }}</td>
</tr>
</table>
<p />
63
File: templates/info.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
{% include "title_style.html" %}
<script type="text/javascript" src="/static/jquery.min.js"></script>
<script type="text/javascript" src="/static/main.js"></script>
</head>
<body>
<h5>pTest - Measurement of page load performance</h5>
<table>
<tr>
<td>Name:</td>
<td><input id="name" type="text" /></td>
</tr>
<tr>
<td>Browser Core:</td>
<td><input id="core" type="text" readonly="readonly" disabled="disabled" /></td>
</tr>
<tr>
<td>Device:</td>
<td>
<select id="device">
{% for device in devices %}
<option>{{ device }}</option>
{% endfor %}
</select>
</td>
</tr>
<tr>
<td>Connection:</td>
<td>
<select id="connection">
{% for connection in connections %}
<option>{{ connection }}</option>
{% endfor %}
</select>
</td>
</tr>
<tr>
<td>Scope:</td>
<td>
<select id="scope">
{% for scope in scopes %}
<option>{{ scope }}</option>
{% endfor %}
</select>
</td>
</tr>
</table>
<div><input type="submit" value="RUN" id="submit"/></div>
<p /><p />
{% if cases %}
<table id="case_list">
<tr>
<th><a href="/caseclean">C</a></th>
<th>Name</th>
<th>Result</th>
<th>Device</th>
<th>Connection</th>
<th>Scope</th>
<th>Time</th>
</tr>
{% for case in cases %}
<tr>
64
<td><a href="/delete/{{ case.key }}">x</a></td>
<td>{{ case.name }}</td>
<td><a target="_blank" href="/read/{{ case.key }}">{{ case.result }}</a></td>
<td>{{ case.device }}</td>
<td>{{ case.connection }}</td>
<td>{{ case.scope }}</td>
<td>{{ case.created }}</td>
</tr>
{% endfor %}
</table>
<p />
{% else %}
<p>The list of cases is empty.</p>
{% endif %}
</body>
</html>
65
File: templates/run.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="Pragma" content="no-cache" />
<META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE" />
{% include "title_style.html" %}
<script type="text/javascript" src="/static/jquery.min.js"></script>
<script type="text/javascript" src="/static/run.js"></script>
</head>
<body>
<h5>pTest - Measurement of page load performance</h5>
{% include "info.html" %}
<div id="hint">Page load running ... <span id="timer" /></div>
<iframe id="subframe" width="80%" height="80%" />
</body>
</html>
66
File: templates/title_style.html
<title>pTest - Measurement of page load performance</title>
<style type="text/css">
body {font-size: 1.2em;}
input, select {font-size: 1.1em;}
select {width: 10.5em;}
th {background-color: #66ff99;}
th, td {padding: 4px 16px 2px 16px;}
td {background-color: #ddd;
text-align: right;}
tr:nth-child(odd) td {background-color: #ccc;}
</style>
67