那么为什么还要用Iframe，而不仅仅用innerHTML？即便innerHtml如今已是html5规范的一部分，将服务器的响应直接插入未检查过的区域的做法也是有危害的。写作本文期间，我发现几乎所有人都是使用的innerHTML。如Jquery在其核心中使用，仅在发生异常时有一个回调函数来处理。而JQuery Mobile 也是这样使用的。当然我没有针对innerHTML的"随机停止工作"的状况做过任何严格的测试，但查看比较各个平台的对iframe和innerHTML的不同作用效果将十分有趣，更想知道那种方式的性能会好些...在这两种方式下其实我都已经听到了不少抱怨了。

网络类型，处理，性能分析

既然我们有能力来缓存(预测缓存)我们的web应用，我们必须提供更好的网络连接类型检测功能使得我们的应用更加智能。

这就是为什么移动应用的开发在 在线/离线模式和连接速度下变得十分敏感的原因。进入The Network Information API网络信息API. 每次我在演讲这个功能点的时，台下总有人会举起收提问"那我们使用它做什么呢?".那么肯定有种方式来开发一个超级智能的移动应用的。

第一烦人场景是...在高速列车上从移动设备访问一个Web站点，网络的连接在各个不同的时刻和不同的地理环境下很可能失去，因此导致各种不同的传输速度。 (如, HSPA 或 3G在一些城镇地区可以用, 但偏远地区可能只支持速度很慢的2G技术). 下面的代码解决了网络连接问题中的大部分场景。

接下来的代码演示的是：

通过应用程序缓存进行脱机访问 。

探测是否加为书签或脱机访问。

探测是否 从 脱机 切换 至 在线 访问 。

检测 低速连接 并 获取 基于 网络 类型 的 内容 。

并且 ， 所有 这些 功能的实现 只需要 很 少 的 代码 。 首先 我们 探测 我们 的 事件 并获取 加载 情况 ：

window.addEventListener('load', function(e) { if (navigator.onLine) { // new page load processOnline(); } else { // the app is probably already cached and (maybe) bookmarked... processOffline(); } }, false); window.addEventListener("offline", function(e) { // we just lost our connection and entered offline mode, disable eternal link processOffline(e.type); }, false); window.addEventListener("online", function(e) { // just came back online, enable links processOnline(e.type); }, false);

在 上述事件 的监听中 ， 我们 必须 告诉 我们 的 代码是否被 事件 或 实际 页面 请求 刷新所 调用 。 主要 的 原因 是 因为 在 联机 和 脱机 模式 之间 切换 时 ， 不会触发(fired) 关于页面正在 加载中的 事件 。

下一步 ， 我们 做 一个 简单 的 检查是否存在 匿名 在线 或 加载 事件 。此代码需要禁用链接重置， 当 从 脱机 模式切换 为 联机状态 。这个应用需要 更 复杂 的功能， 你 可能 需要做一些逻辑插入来执行 恢复抓取内容和为间歇性连接而处理UX。

function processOnline(eventType) { setupApp(); checkAppCache(); // reset our once disabled offline links if (eventType) { for (var i = 0; i < disabledLinks.length; i++) { disabledLinks[i].onclick = null; } } }processOffine()函数也是同样的过程。假设你想让你的app到离线模式并且试图恢复之前场景所有的事务。下面的代码找出所有的外部链接并且让它们失效，永远在我们离线的应用中捕获用户，hoho function processOffline() { setupApp(); // disable external links until we come back - setting the bounds of app disabledLinks = getUnconvertedLinks(document); // helper for onlcick below var onclickHelper = function(e) { return function(f) { alert('This app is currently offline and cannot access the hotness');return false; } }; for (var i = 0; i < disabledLinks.length; i++) { if (disabledLinks[i].onclick == null) { //alert user we're not online disabledLinks[i].onclick = onclickHelper(disabledLinks[i].href); } } }

好，这是多好的东东。现在我们的app知道处于何种连接状态，当它在线时，我们也可以检查连接类型，并且相应的调整它。我曾经监听典型的北美网络供应商下载并且潜在地给每种连接的添加了注释。

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); } }fetchAndCache进程，有很多的设置参数，但是在此我仅仅让他执行同步（给参数false）的或者异步（给参数true）的去取给定连接的资源。

Edge (同步) 请求时间线

WIFI (异步) 请求时间线