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.
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.
We can paused some events when user unfocused the current tab. Such as ADs pull to sever or video played.
How to fire them ?
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.
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:
Use Web Storage(Web SQL Database / indexedDB) for client Data cache system and support with AJAX.
What benefit can we gain ?
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.
．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.
<!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>
<!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>
42 requests | 32.49KB transferred | 588ms (onload:637ms,DOMContentLoaded:365ms)
42 requests | 30.96KB transferred | 687ms (onload:653ms,DOMContentLoaded:199ms)
45 requests | 125KB transferred | 2.16s (onload:1.93s,DOMContentLoaded:911ms)
46 requests | 196KB transferred | 1.85s (onload:1.63s,DOMContentLoaded:361ms)
Use RequestAnimationFrame to get more sample and smooth animation process.
ServicePlus use rAF to support scroll events.