关于网页内容加速黑科技的趣谈

此外，这种技巧处理起 HTML 来，要比 innerHTML 更接近标准的页面加载解析器。尤其是脚本依然会被下载，并在父级文档的高低文中履行 —— 只是在 Firefox 中完全不会履行，但我认为这是个 bug更新：其实脚本根本不该该履行(感激 Simon Pieters 指出这一点)，但 Edge、Safari、Chrome 都这么干。

接下来我们只须要大年夜办事端获取 HTML 数据流，每当一个部分的数据达到的时刻，就调用 iframe.contentDocument.write()。流式传输和 fetch() 搭配起来会更好，但为了支撑 Safari，我们照样应用 XHR 来 hack 一下吧。

我已经写好了一个 demo，可以拿来和 Github 进行比较。下面是在 3G 收集下的测试结不雅：

点击这里查看原始测试数据。

应用 iframe 进行流式衬着，页面加载速度进步了 1.5 s。头像也提前半秒钟加载完成 —— 流式衬着意味着浏览器可以更早发明它们，并与内容一路并行下载。

膳绫擎的办法对 Github 来说照样有效的，因为它的办事器返回的是 HTML。如不雅你应用的是框架，由框架本身治理 DOM 的┞饭示，那可能就麻烦一些了。这种情况下可以看看下面这个次优选项：

换行符分隔的 JSON

很多网站应用 JSON 驱动动态内容。何其不幸，JSON 并不是一种对流友爱的格局。尽管也有流式 JSON 解析器，可用起往来交往并不那么简单。

所以与其传输下面如许一大年夜块 JSON 数据：

{ 
  "Comments": [ 
    {"author": "Alex", "body": "…"}, 
    {"author": "Jake", "body": "…"} 
  ] 
}

还不如像下面如许一行输出一个 JSON 对象：

iframe 早已跻身圈内最臭黑科技之列。但下面这个办法就应用了 iframe 和 document.write()，如许我们就能将内容以流的情势添加到页面中了。示例如下：

{"author": "Alex", "body": "…"} 
 
{"author": "Jake", "body": "…"}

这种被称为 “换行符分隔的 JSON” 是有标准的：ndjson。给膳绫擎的内容写一个解析器就要简零丁了。到了 2017 年，我们也许可以应用一系列组合变换流(composable transform streams)来描述(译者注：本文写作于 2016 年 12 月)：

// 在 2017 年的某个时刻可能会是如许： 
const response = await fetch('comments.ndjson'); 
const comments = response.body 
  // 大年夜字节到文本: 
  .pipeThrough(new TextDecoder()) 
  // 一向缓冲，直到碰到换行符: 
  .pipeThrough(splitStream('\n')) 
  // 将内容块解析为JSON: 
  .pipeThrough(parseJSON()); 
 
for await (const comment of comments) { 
  // 处理每条评论，并将其添加到页面: 
  // (不管你应用的是什么模板或虚拟 DOM) 
  addCommentToPage(comment); 
}

在膳绫擎的代铝闼楝splitStream 和 parseJSON 是可复竽暌姑变换流(reusable transform streams)。与此同时，为了实现最大年夜程度的兼容，我们可以应用 XHR 进行 hack。

2/3 首页上一页 1 2 3 下一页尾页

　　推荐阅读

　　改区域就真的能增强路由器的Wi-Fi覆盖吗？

比拟之下无线路由器厂商给出的方檀卷更直接更有效了，今朝市场上各类“穿墙王”路由器确切有着比通>>>详细阅读

本文标题：关于网页内容加速黑科技的趣谈

地址：http://www.17bianji.com/lsqh/37898.html

1/2 1