javascript 如何使用无服务器js(Cloudflare Worker)解析DOM?

iibxawm4  于 2023-02-11  发布在  Java
关注(0)|答案(1)|浏览(117)

我正在构建一个工具,其核心结构是:向Cloudflare工作进程发出AJAX请求,后者获取HTML数据,然后返回。
因此,步骤如下:
1.从客户端发送请求

  1. Worker接收请求并发出另一个请求,后者以典型HTML文档的形式返回响应。
    1.第三步我有两个选择:
  • 通过AJAX响应返回获取的HTML,然后在客户端解析
  • 首先解析HTML,然后通过AJAX响应返回处理后的数据

第一个问题很简单:我从我的工作人员那里接收响应,并将返回的HTML插入到隐藏的<div>中的某个位置,然后解析它。
我更愿意使用第二种方法的原因是,在将HTML从Cloudflare Worker传送回客户端时不浪费带宽,因为原始页面有很多不相关的膨胀。

<div class="very-much-bloat" id="some-other-bloat" useful_parameter ="value">
    <div id="some-other-irrelevant-info" id="really-great-id">
        something that I need
    </div>
</div>

我所需要的就是,比如说

{
    "really-great-id"  : "something that I need",
    "useful_parameter" : "value"
}

如果我执行第一步,在浏览器中解析它将非常简单,但是我将浪费带宽来传递大量稍后要处理的信息。
然而,如果第二个方案涉及使用复杂的库,那么它可能不是一个可行的方法,因为每个请求的最大执行时间是10ms(这是Cloudflare上的免费方案,否则就足够了:每天10万个请求可能比我使用这个应用程序所需要的还要多)。
问题是:有没有什么有效方法可以在Cloudflare worker上解析HTML而不超过10ms的时间限制?使用worker获得的页面大小大约为10 - 100 KB,解析后的数据大小大约为1 - 10KB(大约比原始大小小10倍)。虽然我知道100KB听起来不算很多,但它仍然是垃圾,最好尽快过滤。

68bkxrlz

68bkxrlz1#

Cloudflare Workers目前不支持DOM API,但它支持另一种HTML解析API:HTMLRewriter
https://developers.cloudflare.com/workers/runtime-apis/html-rewriter/
此API与DOM的不同之处在于它以流的方式操作:JavaScript回调是在HTML数据流从服务器传入时调用的,而不是同时将整个文档保存在内存中。与基于DOM的解决方案相比,HTMLRewriter可以使您响应更快,使用更少的资源。HTMLRewriter本身使用的CPU时间甚至不计入10 ms的限制--只计入回调所花费的时间。因此,如果您仔细设计回调函数,那么保持在限制范围内应该没有问题。
请注意,HTMLRewriter主要用于支持在HTML文档流通过时对其进行修改。但是,让它使用文档并生成一种完全不同的数据(如JSON)应该不会太难。本质上,您可以设置重写器,以便丢弃“重写”的HTML。并且您需要让回调单独填充其他一些数据结构或写入表示最终结果的其他一些流。

相关问题