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

不那么静态……引入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

相关帖子

2024年10月31日 13:00

Moving Baselime from AWS to Cloudflare: simpler architecture, improved performance, over 80% lower cloud costs

Post-acquisition, we migrated Baselime from AWS to the Cloudflare Developer Platform and in the process, we improved query times, simplified data ingestion, and now handle far more events, all while cutting costs. Here’s how we built a modern, high-performing observability platform on Cloudflare’s network. ...