JS in Rural Communities

JS in Rural Communities

Matthew
Keas

@matthiasak

http://mkeas.org

http://parivedasolutions.com

!e
Ky
Rr e
Ayou
He
he

r

n
po
u
en gons
p

a
p
ha of dr
y
ma o r y
t
as

"one of the senior engineers began a rant about the
page weight of the video watch page being far too
large"

"1.2MB and dozens of requests"
"if they can write an entire Quake clone in under
100KB, we have no excuse for this!"

"After three painstaking days, I had arrived at a much leaner
solution. It still was not under 100KB though. Having just
finished writing the HTML5 video player, I decided to plug it
in instead of the far heavier Flash player. Bam! 98KB and
only 14 requests."

tiny

HTML

"I decided to limit the functionality"
masthead
video player
five related videos
sharing button
flagging tool
ten comments loaded in via AJAX

remedy?

"After a week of data collection, the numbers came back…
and they were baffling. The average aggregate page latency
under Feather had actually INCREASED"

HALLOWEEN

Party

"We plotted the data geographically and compared it to our total
numbers broken out by region"

hello!
howdy!

YOUTUBE
. YES!!

Southeast Asia

A m e ri c a
South

OPEN
Come in,

Re
m

ot
e

Si
be

ri a

WE’RE

A

ca
ri
f

Average page load time under Feather was over TWO
MINUTES!

50
POSTAGE
STAMP

Normal page would take over 20 minutes.

"By keeping your client side code small and
lightweight, you can literally open your product up
to new markets."

ADDING

MATT'ISM

Improve you experience and broaden your reach
with:
• Fewer requests per page load
• Smaller requests per page load
• Less frequent requests per page load

ADDING

MATT'ISM

Improve you experience and broaden your reach
with:
• Fewer requests per page load (inlining, base64
encoding)
• Smaller requests per page load (concatenation,
compression, minification)
• Less frequent requests per page load (caching)

Methods of Caching?
Implied persistence
HTML <meta> tags
(http://www.mnot.net/cache_docs/)
HTTP Headers
(http://www.mobify.com/blog/beginners-guideto-http-cache-headers/)
Persist data via cookies...
Appcache
JavaScript?
23

ADMIT
NONE

17

HTML <meta> tags
Meta tags are easy to use, but aren’t very effective.
That’s because they’re only honored by a few
browser caches, not proxy caches (which almost
never read the HTML in the document).

HTTP Headers
Example Caching headers for dynamic content (Wordpress blog):

HTTP/1.1 200 OK
Cache-Control: no-transform,public,max-age=300,s-maxage=900
Content-Type: text/html; charset=UTF-8
Date: Mon, 29 Apr 2013 16:38:15 GMT
ETag: "bbea5db7e1785119a7f94fdd504c546e"
Last-Modified: Sat, 27 Apr 2013 00:44:54 GMT
Server: AmazonS3
Vary: Accept-Encoding
X-Cache: HIT

HTML5 Appcache
(http://caniuse.com/#search=appcache
)
No support IE9- (trolololollllll)
Offline browsing - users can navigate your full site
when they're offline. (good)
Speed - cached resources are local, and therefore
load faster. (good)
Reduced server load (good)

Pretty Sexy

Más Problemas
http://appcachefacts.info
/

One failed file in CACHE section => entire cache
disregarded.
Regardless of whether you include the address
of the current page in the manifest, it will be
cached.
In Firefox, any resources served with Cachecontrol: no-store will not be cached, even if
they're explicitly included in the manifest.
No granular dynamic control from JS.

:–(

Is using JS to manage your cache
reasonable?
Yes. (http://caniuse.com/#feat=namevalue-storage)
If you need to support IE7 or Opera Mobile, then
employ HTTP Headers and/or just load resources
lazily.
Also, polyfills.
IE8 implemented this?
Wow.

Is this an original idea?
Sort of.

Anal
y

tics

Many Script Loaders Employed
Today

We truly are spoiled with such an
awesome community

We started POC'ing Local
Storage as a cache

Local
St

orage

KIC
KS
GRA
SS
SINC
E IE8

Local Storage
Like cookies
Persistent
At least 5MB
Never attached blindly to requests
Event model to keep other tabs and windows
synchronized
Polyfills

Broke-al Storage
String values only — serialization may be
necessary (awkward)
Unstructured data with no transactions, indexing
or searching facilities (awkward)
May exhibit poor performance on large datasets
(bad)

Loader
https://github.com/matthiasak/Loader

ary year
nor he
ho t

of
me
na

oa
L

r
e
d

Loading Browser Assets
CORS compatible or Same Origin? AJAX in
parallel, cache, and execute/embed sequentially.
Not Same Origin? Add Script/Link and set the
src/href.

Loading Browser Assets
Promises to control flow of async downloads and
"readystates".
Small abstraction for making a GET
Small functions to write tags to the <HEAD>
Tiny abstraction for Local Storage and error
handling
Automatically look for files to load (in similar
fashion to Require.js)

Load Only What Is Needed
1

2

3

Performance, Pro-formance
http://www.stevesouders.com/blog/2011/03/28/storager-case-study-binggoogle/

"Bing and Google Search make extensive use of
localStorage for stashing SCRIPT and STYLE blocks
that are used on subsequent page views. None of
the other top sites from my previous post use
localStorage in this way. Are Bing and Google
Search onto something?
Yes, definitely."

Real-World Testing?
http://jsperf.com/localstorage-versus-browsercache/6

"Cutting the mustard"
http://responsivenews.co.uk/post/18948466399/cutting-themustard

Where I Put My Experiments Before
They Are Ready For Primetime

JS in Rural Communities

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Ähnlich wie JS in Rural Communities

Ähnlich wie JS in Rural Communities (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

JS in Rural Communities