订阅以接收新文章的通知:

不那么静态……引入HTMLRewriter API Beta到Cloudflare Workers

2019-09-30

3 分钟阅读时间
这篇博文也有 EnglishDeutsch日本語EspañolFrançais版本。

今天,我们很高兴地发布HTMLRewriter beta——一种流HTML解析器,它有一个易于使用的基于JavaScript API的DOM操作选择器,可以在Cloudflare Workers运行时使用。

这里向对此不熟的人们做一个简单的介绍,Cloudflare Workers是一个轻量级的无服务器平台,允许开发人员利用Cloudflare的网络来扩展现有的应用程序或创建全新的应用程序,而无需配置或维护基础设施。

从静态站点到动态应用程序

星期五,我们发布了Workers Sites:一个内置在 Wrangler CLI工具中的静态站点部署工作流。现在,配合HTML Rewriter API,您就可以在您的静态HTML上执行DOM转换,就在Cloudflare边缘网络上。

在此之前,您可以通过将响应的整个主体摄取到Worker中来完成此任务,但是,该方法容易引入一些问题。首先,解析一个大文件必然会遇到内存或CPU限制。此外,它还将影响TTFB,因为主体无法被流式处理,并且浏览器无法进行任何推测性分析来加载后续资源。

HTMLRewriter是让你的应用程序完全活在边缘所缺的一块拼图——万事具备,只欠东风。您可以将Cloudflare Workers上的API构建为一个无服务器的函数,将前端的静态元素托管在Workers Sites上,并使用HTMLRewriter API动态地将它们绑定在一起。

输入JAMStack

你也许在想:“等等!”JavaScript,无服务器API……这听起来有点耳熟。我们来此说应该也很熟悉。

pic.twitter.com/1yWAxV6KMK

— steveklabnik (@steveklabnik) September 27, 2019

这是JAMStack吗

首先,让我们回答这个问题——什么是JAMStack?JAMStack是Mathias Biilmann创造的一个术语,代表JavaScript、API和标记。JAMStack应用程序非常易于扩展,因为它们依赖于简化的静态站点部署。它们还旨在简化web开发工作流,特别是前端开发人员,通过将传统上在后端进行的数据操作和呈现带到前端,并仅通过API调用与后端进行交互。

所以在某种程度上,是的,这就是JAMStack。但是,HTMLRewriter使这一想法更进一步。

边缘:不完全是客户端,不完全是服务器

大多数JAMStack应用程序依赖于对第三方API的客户端调用,在第三方api中,可以使用JavaScript在客户端处理渲染,从而允许前端开发人员使用他们已经熟悉的工具链和语言。然而,这意味着每次加载页面时,客户端都必须回到原点,等待HTML和JS,然后在解析和加载之后对API进行多次调用。此外,所有这一切都发生在客户端设备上,这些设备不可避免地要比服务器的功能更弱,并且最后一英里的连接可能不稳定。

使用Workers中的HTMLRewriter,您可以从边缘进行那些API调用,与客户端设备连接相比,失败的可能性要小得多,并且其结果通常可以被缓存。更好的是,您可以在Workers中自己编写API,并将结果直接合并到HTML中——所有这些都在同一台强大的边缘“计算机”上完成。使用这些机器来执行HTMLRewriter的“边缘端点渲染”总是可以尽可能地靠近你的终端用户,而不必在设备本身生成渲染结果,它消除了一直移动到向源服务器请求内容的延迟。

HTMLRewriter API是什么样的?

HTMLRewriter类是一种类似于jQuery的体验,直接位于Workers应用程序内部,允许开发人员构建功能强大的应用程序,依靠强大的JavaScript API来解析和转换HTML。

以下是使用HTMLRewriter重写网页上从HTTP到HTTPS的链接的示例。

const REWRITER = new HTMLRewriter()
    .on('a.avatar', { element:  e => rewriteUrl(e, 'href') })
    .on('img', { element: e => rewriteUrl(e, 'src') });

async function handleRequest(req) {
  const res = await fetch(req);
  return REWRITER.transform(res);
}

在上面的示例中,我们创建了一个新的HTMLRewriter实例,并使用选择器来查找a和img元素的所有实例,并分别对href和src属性调用rewriteURL函数。

国际化和本地化教程:如果你想更进一步,我们有完整的教程,介绍了如何使用HTMLRewriter让您的应用程序对i18n(国际化)友好。

入门

如果您已经在使用Cloudflare Workers,您可以通过查阅我们的文档(不需要注册或任何其他要求!)来简单地开始使用HTMLRewriter。如果您是Cloudflare Workers的新手,建议您点击这里开始注册。

如果您对HTMLRewriter如何工作的细节感兴趣,并且想了解更多关于解析DOM的知识,请继续关注我们。我们很高兴能在以后的文章中与您分享这些细节。

最后一件事,您不受限于Workers Sites。由于Cloudflare Workers可以在任意应用程序的前端作为代理部署,因此您可以使用HTMLRewriter作为扩展现有站点的简便方法,并可以轻松地添加动态元素,而无需考虑后端。

我们很乐意收到您的来信!

我们一直在反复努力根据客户的反馈来改进我们的产品!请就您的体验填写我们的调查问卷,来帮助我们做得更好。


您是否使用Workers构建了一些有趣的东西呢?请@CloudflareDev告知我们!

我们保护整个企业网络,帮助客户高效构建互联网规模的应用程序,加速任何网站或互联网应用程序抵御 DDoS 攻击,防止黑客入侵,并能协助您实现 Zero Trust 的过程

从任何设备访问 1.1.1.1,以开始使用我们的免费应用程序,帮助您更快、更安全地访问互联网。要进一步了解我们帮助构建更美好互联网的使命,请从这里开始。如果您正在寻找新的职业方向,请查看我们的空缺职位
ServerlessCloudflare WorkersWorkers Sites开发人员Developer Platform

在 X 上关注

Rita Kozlov|@ritakozlov_
Cloudflare|@cloudflare

相关帖子