Plain & Vanity

bring balance to the force
Paul Li

About me

Paul Li
HTML / CSS / JavaScript / ActionScript

facebook:
http://www.facebook.com/mei.studio.li

Agenda

  • What's ServicePlus ?
  • Usability
  • Performance
  • References

What's ServicePlus ?

onLine (鬼屋篇)

onLine (鬼屋篇) - Origin

onLine (鬼屋篇) - Origin

onLine (鬼屋篇) - Live

onLine (鬼屋篇) - Live

onLine (鬼屋篇) - Live

onLine (鬼屋篇) - Live

onLine (鬼屋篇) - Live

onLine (鬼屋篇) - Live

onLine (鬼屋篇) - Live

onLine (鬼屋篇) - Live

onLine (鬼屋篇) - Live

onLine (鬼屋篇) - Live

onLine (鬼屋篇) - Live

onLine (鬼屋篇) - Live

onLine (鬼屋篇) - Live

onLine (鬼屋篇) - Live

onLine (鬼屋篇) - Live

onLine (鬼屋篇) - Live

onLine (鬼屋篇) - Live

onLine (鬼屋篇) - Demo

PJAX (回不去篇)

PJAX - intro

PJAX(pushState + AJAX) comes with HTML5 and makes AJAX complete.

It makes browser's prev/next buttons workable in AJAX pages and also offers 64k for storage.

Besides that, it also looks like a client side rewrite rule.

PJAX Live Demo - 591

PJAX Live Demo - 591

PJAX Live Demo - ServicePlus

AutoComplete

AutoComplete

AutoComplete - intro

autoComplete is a very common and useful tool.

Enhance its performance and response time is the primary task.

That's why we have following features.

  • Valuable Request
  • Data share

AutoComplete Classic

AutoComplete - ServicePlus

PageVisibility

PageVisibility - intro

We can paused some events when user unfocused the current tab. Such as ADs pull to sever or video played.

How to fire them ?

  • switch tabs
  • minimize browser

PageVisibility Live Demo

Mighty Blue Bar

Mighty Blue Bar - intro


Sometimes user will lost focus on page.

They will forget what section they just reviewd.
That's why we introduce Mighty Blue Bar to service.
To remind user which section you could continue.

Mighty Blue Bar Live Demo

HotKey

HotKey - intro

Hotkey could make it easy to use service.

It's very hard to educate user to use hotkey.
So we like to use some common hotkey to inherit other service's UX.

Hotkey we supported:

  • J: goto Prev item
  • K: goto Next item
  • /: goto searchbar

HotKey Live Demo

Web Storage

Work Flow

Web Storage - intro

Use Web Storage(Web SQL Database / indexedDB) for client Data cache system and support with AJAX.

What benefit can we gain ?

  • Fast & more fast
  • Reduce the request amounts

Web Storage Live Demo

Web Workers

Web Workers - intro

The Web Workers specification defines an API for spawning background scripts in your web application.

We can do things like fire up long-running scripts to handle computationally intensive tasks, but without blocking the UI or other scripts to handle user interactions.

ServicePlus use web workers for IO & JSON parse.

Web Workers Live Demo

Page Render

Life of a web-page in WebKit

How to improve ?

Looks like JavaScript & CSS can influence page render. We can figure out these:


  • JavaScript can block the DOM construction
  • JavaScript can block on CSS
  • Rendering is blocked on CSS...

JavaScript Attributes


.Normal execution <script>
This is the default behavior of the <script> element. Parsing of the HTML code pauses while the script is executing. For slow servers and heavy scripts this means that displaying the webpage will be delayed.

.Deferred execution <script defer>
Simply put: delaying script execution until the HTML parser has finished. A positive effect of this attribute is that the DOM will be available for your script.

.Asynchronous execution <script async>
Don’t care when the script will be available? Asynchronous is the best of both worlds: HTML parsing may continue and the script will be executed as soon as it’s ready.

Common Strackture

<!DOCTYPE>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Keynote - ServicePlus & Page Render</title>
<link href="css/keynoteyahoo.css" rel="stylesheet" type="text/css">
</head>
<body>
	<h1>Welcome to this sharing.</h1>
</body>
<script src="script/prototype-min.js"></script>
<script src="script/func.js"></script>
<script src="script/keynote_yahoo.js"></script>
<script>
var str = 'Show me the money.';
</script>
</html>

New Strackture

<!DOCTYPE>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Keynote - ServicePlus & Page Render</title>
<link href="css/keynoteyahoo.css" rel="stylesheet" type="text/css">

<script src="script/pageRender.js" data-source="script/prototype-min.js&script/func.js&script/keynote_yahoo.js"></script>

</head>
<body>
	<h1>Welcome to this sharing.</h1>
</body>
</html>

Analyze - HP(Before)

42 requests | 32.49KB transferred | 588ms (onload:637ms,DOMContentLoaded:365ms)


Analyze - HP(After)

42 requests | 30.96KB transferred | 687ms (onload:653ms,DOMContentLoaded:199ms)


Analyze - Item(Before)

45 requests | 125KB transferred | 2.16s (onload:1.93s,DOMContentLoaded:911ms)


Analyze - Item(After)

46 requests | 196KB transferred | 1.85s (onload:1.63s,DOMContentLoaded:361ms)


RequestAnimationFrame

RequestAnimationFrame - intro

Use RequestAnimationFrame to get more sample and smooth animation process.

ServicePlus use rAF to support scroll events.

Such as:

  • delay by view (lazy load)
  • scroll to top
  • roll to anywhere

RequestAnimationFrame Live Demo

References

Special Thanks

Special Thanks