HTML and CSS Reference
In-Depth Information
function
setupApp
(){
// create a custom object if navigator.connection isn't available
var
connection
=
navigator
.
connection
||
{
'type'
:
'0'
};
if
(
connection
.
type
==
2
||
connection
.
type
==
1
)
{
//wifi/ethernet
//Coffee Wifi latency: ~75ms-200ms
//Home Wifi latency: ~25-35ms
//Coffee Wifi DL speed: ~550kbps-650kbps
//Home Wifi DL speed: ~1000kbps-2000kbps
fetchAndCache
(
true
);
}
else
if
(
connection
.
type
==
3
)
{
//edge
//ATT Edge latency: ~400-600ms
//ATT Edge DL speed: ~2-10kbps
fetchAndCache
(
false
);
}
else
if
(
connection
.
type
==
2
)
{
//3g
//ATT 3G latency: ~400ms
//Verizon 3G latency: ~150-250ms
//ATT 3G DL speed: ~60-100kbps
//Verizon 3G DL speed: ~20-70kbps
fetchAndCache
(
false
);
}
else
{
//unknown
fetchAndCache
(
true
);
}
}
There are numerous adjustments you could make to the
fetchAndCache
process, but
the example code simply tells it to fetch the resources asynchronous (true) or synchro‐
nous (false) for a given connection. To see how this works in practice, consider the edge
(synchronous) request timeline shown in
Figure 3-12
and the WiFi (asynchronous) re‐
quest timeline shown in
Figure 3-13
.
Figure 3-12. Synchronous page loading timeline
