那些遇到过的问题

HTTP2推送和本机ES模块：“进入”模块推送被忽略

Sem*_*lon 5 http2 es6-modules

我一直在尝试通过HTTP2服务本机ES模块的方法。几乎所有东西都运行良好（在支持的情况下），但是有一个我不太理解的怪癖。

给定一个对/文档的请求，我推送直接或间接被认为是该文档依赖项的资源。在这种情况下，最终是通过推送搭载的三个其他资源：

  • /index.css（通过的依赖项<link href ...>）
  • /index.js（通过 <script type="module" src ...>
  • /routes.js（间接依赖项，由导入index.js）

所有这三个资源似乎都已从服务器端成功推送。但是，尽管第一个请求被推送，Chrome仍对“ /index.js”提出了第二个请求。其他两个资源均未请求；这些推送的响应似乎被正确确认。

起初，我认为这是Chrome的古怪之处，只是新创建功能的粗略边缘。但是，当启用模块支持标志时，在Firefox中也演示了相同的行为，这使我想知道这是否出于某些原因是故意的。

网络活动

从与上述请求相对应的后端记录：

RECEIVED REQUEST: GET /
...PUSHING /index.css
...PUSHING /index.js
...PUSHING /routes.js
RECEIVED REQUEST: GET /index.js
...PUSHING /routes.js
Run Code Online (Sandbox Code Playgroud)

遵循@sbordet的指示：这是两个请求的记录（很高兴知道这些内容可以在Chrome中自省！）：

第一要求（/）

3067: HTTP2_SESSION
death.tips:443 (DIRECT)
Start Time: 2017-10-09 10:49:24.597

t=304289 [st= 0] +HTTP2_SESSION  [dt=?]
                  --> host = "death.tips:443"
                  --> proxy = "DIRECT"
t=304289 [st= 0]    HTTP2_SESSION_INITIALIZED
                    --> protocol = "h2"
                    --> source_dependency = 3064 (SOCKET)
t=304289 [st= 0]    HTTP2_SESSION_SEND_SETTINGS
                    --> settings = ["[id:1 (SETTINGS_HEADER_TABLE_SIZE) value:65536]","[id:3 (SETTINGS_MAX_CONCURRENT_STREAMS) value:1000]","[id:4 (SETTINGS_INITIAL_WINDOW_SIZE) value:6291456]"]
t=304289 [st= 0]    HTTP2_SESSION_UPDATE_RECV_WINDOW
                    --> delta = 15663105
                    --> window_size = 15728640
t=304289 [st= 0]    HTTP2_SESSION_SEND_WINDOW_UPDATE
                    --> delta = 15663105
                    --> stream_id = 0
t=304289 [st= 0]    HTTP2_SESSION_SEND_HEADERS
                    --> exclusive = true
                    --> fin = true
                    --> has_priority = true
                    --> :method: GET
                        :authority: death.tips
                        :scheme: https
                        :path: /
                        pragma: no-cache
                        cache-control: no-cache
                        upgrade-insecure-requests: 1
                        user-agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/63.0.3236.0 Safari/537.36
                        accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8
                        accept-encoding: gzip, deflate, br
                        accept-language: en-US,en;q=0.9
                    --> parent_stream_id = 0
                    --> source_dependency = 3060 (HTTP_STREAM_JOB)
                    --> stream_id = 1
                    --> weight = 256
t=304310 [st=21]    HTTP2_SESSION_RECV_SETTINGS
t=304310 [st=21]    HTTP2_SESSION_SEND_SETTINGS_ACK
t=304313 [st=24]    HTTP2_SESSION_RECV_SETTINGS_ACK
t=304336 [st=47]    HTTP2_SESSION_RECV_PUSH_PROMISE
                    --> :scheme: https
                        :authority: death.tips
                        :path: /index.css
                        :method: GET
                    --> id = 1
                    --> promised_stream_id = 2
t=304336 [st=47]    HTTP2_STREAM_SEND_PRIORITY
                    --> exclusive = true
                    --> parent_stream_id = 1
                    --> stream_id = 2
                    --> weight = 110
t=304336 [st=47]    HTTP2_SESSION_RECV_PUSH_PROMISE
                    --> :scheme: https
                        :authority: death.tips
                        :path: /index.js
                        :method: GET
                    --> id = 1
                    --> promised_stream_id = 4
t=304336 [st=47]    HTTP2_STREAM_SEND_PRIORITY
                    --> exclusive = true
                    --> parent_stream_id = 2
                    --> stream_id = 4
                    --> weight = 110
t=304336 [st=47]    HTTP2_SESSION_RECV_PUSH_PROMISE
                    --> :scheme: https
                        :authority: death.tips
                        :path: /routes.js
                        :method: GET
                    --> id = 1
                    --> promised_stream_id = 6
t=304336 [st=47]    HTTP2_STREAM_SEND_PRIORITY
                    --> exclusive = true
                    --> parent_stream_id = 4
                    --> stream_id = 6
                    --> weight = 110
t=304336 [st=47]    HTTP2_SESSION_RECV_HEADERS
                    --> fin = false
                    --> :status: 200
                        cache-control: public, max-age=0
                        content-encoding: deflate
                        content-length: 388
                        content-type: text/html; charset=utf-8
                        date: Mon, 09 Oct 2017 14:49:24 GMT
                        etag: "c3QDLn1lTsAqsErFvMgM3bEsUsY="
                        last-modified: Mon, 09 Oct 2017 14:43:24 GMT
                    --> stream_id = 1
t=304336 [st=47]    HTTP2_SESSION_RECV_HEADERS
                    --> fin = false
                    --> :status: 200
                        cache-control: public, max-age=0
                        content-encoding: deflate
                        content-length: 88
                        content-type: text/css
                        date: Mon, 09 Oct 2017 14:49:24 GMT
                        etag: "/qkigeCvJgEE+0+5YhHLgByhKL0="
                        last-modified: Mon, 09 Oct 2017 14:43:24 GMT
                    --> stream_id = 2
t=304336 [st=47]    HTTP2_SESSION_RECV_HEADERS
                    --> fin = false
                    --> :status: 200
                        cache-control: public, max-age=0
                        content-encoding: deflate
                        content-length: 60
                        content-type: text/javascript
                        date: Mon, 09 Oct 2017 14:49:24 GMT
                        etag: "/+cUWoFWkafsB6vSI5wBuB7v4Tk="
                        last-modified: Mon, 09 Oct 2017 14:43:24 GMT
                    --> stream_id = 4
t=304336 [st=47]    HTTP2_SESSION_RECV_HEADERS
                    --> fin = false
                    --> :status: 200
                        cache-control: public, max-age=0
                        content-encoding: deflate
                        content-length: 64
                        content-type: text/javascript
                        date: Mon, 09 Oct 2017 14:49:24 GMT
                        etag: "2ZM3pEXqn9z1d5tkBr2x5kdHsGk="
                        last-modified: Mon, 09 Oct 2017 14:43:24 GMT
                    --> stream_id = 6
t=304336 [st=47]    HTTP2_SESSION_RECV_DATA
                    --> fin = false
                    --> size = 388
                    --> stream_id = 1
t=304336 [st=47]    HTTP2_SESSION_UPDATE_RECV_WINDOW
                    --> delta = -388
                    --> window_size = 15728252
t=304336 [st=47]    HTTP2_SESSION_RECV_DATA
                    --> fin = true
                    --> size = 0
                    --> stream_id = 1
t=304336 [st=47]    HTTP2_SESSION_RECV_DATA
                    --> fin = false
                    --> size = 88
                    --> stream_id = 2
t=304336 [st=47]    HTTP2_SESSION_UPDATE_RECV_WINDOW
                    --> delta = -88
                    --> window_size = 15728164
t=304336 [st=47]    HTTP2_SESSION_RECV_DATA
                    --> fin = true
                    --> size = 0
                    --> stream_id = 2
t=304336 [st=47]    HTTP2_SESSION_RECV_DATA
                    --> fin = false
                    --> size = 60
                    --> stream_id = 4
t=304336 [st=47]    HTTP2_SESSION_UPDATE_RECV_WINDOW
                    --> delta = -60
                    --> window_size = 15728104
t=304336 [st=47]    HTTP2_SESSION_RECV_DATA
                    --> fin = true
                    --> size = 0
                    --> stream_id = 4
t=304336 [st=47]    HTTP2_SESSION_RECV_DATA
                    --> fin = false
                    --> size = 64
                    --> stream_id = 6
t=304336 [st=47]    HTTP2_SESSION_UPDATE_RECV_WINDOW
                    --> delta = -64
                    --> window_size = 15728040
t=304336 [st=47]    HTTP2_SESSION_RECV_DATA
                    --> fin = true
                    --> size = 0
                    --> stream_id = 6
t=304337 [st=48]    HTTP2_SESSION_UPDATE_RECV_WINDOW
                    --> delta = 388
                    --> window_size = 15728428
t=304342 [st=53]    HTTP2_STREAM_ADOPTED_PUSH_STREAM
                    --> stream_id = 2
                    --> url = "https://death.tips/index.css"
t=304343 [st=54]    HTTP2_SESSION_UPDATE_RECV_WINDOW
                    --> delta = 88
                    --> window_size = 15728516
Run Code Online (Sandbox Code Playgroud)

第二要求（/index.js）

3085: HTTP2_SESSION
death.tips:443 (DIRECT)
Start Time: 2017-10-09 10:49:24.694

t=304386 [st= 0] +HTTP2_SESSION  [dt=?]
                  --> host = "death.tips:443"
                  --> proxy = "DIRECT"
t=304386 [st= 0]    HTTP2_SESSION_INITIALIZED
                    --> protocol = "h2"
                    --> source_dependency = 3084 (SOCKET)
t=304386 [st= 0]    HTTP2_SESSION_SEND_SETTINGS
                    --> settings = ["[id:1 (SETTINGS_HEADER_TABLE_SIZE) value:65536]","[id:3 (SETTINGS_MAX_CONCURRENT_STREAMS) value:1000]","[id:4 (SETTINGS_INITIAL_WINDOW_SIZE) value:6291456]"]
t=304386 [st= 0]    HTTP2_SESSION_UPDATE_RECV_WINDOW
                    --> delta = 15663105
                    --> window_size = 15728640
t=304386 [st= 0]    HTTP2_SESSION_SEND_WINDOW_UPDATE
                    --> delta = 15663105
                    --> stream_id = 0
t=304386 [st= 0]    HTTP2_SESSION_SEND_HEADERS
                    --> exclusive = true
                    --> fin = true
                    --> has_priority = true
                    --> :method: GET
                        :authority: death.tips
                        :scheme: https
                        :path: /index.js
                        pragma: no-cache
                        cache-control: no-cache
                        origin: https://death.tips
                        user-agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/63.0.3236.0 Safari/537.36
                        accept: */*
                        referer: https://death.tips/
                        accept-encoding: gzip, deflate, br
                        accept-language: en-US,en;q=0.9
                    --> parent_stream_id = 0
                    --> source_dependency = 3080 (HTTP_STREAM_JOB)
                    --> stream_id = 1
                    --> weight = 220
t=304405 [st=19]    HTTP2_SESSION_RECV_SETTINGS
t=304405 [st=19]    HTTP2_SESSION_SEND_SETTINGS_ACK
t=304409 [st=23]    HTTP2_SESSION_RECV_SETTINGS_ACK
t=304409 [st=23]    HTTP2_SESSION_RECV_PUSH_PROMISE
                    --> :scheme: https
                        :authority: death.tips
                        :path: /routes.js
                        :method: GET
                    --> id = 1
                    --> promised_stream_id = 2
t=304409 [st=23]    HTTP2_STREAM_SEND_PRIORITY
                    --> exclusive = true
                    --> parent_stream_id = 1
                    --> stream_id = 2
                    --> weight = 110
t=304409 [st=23]    HTTP2_SESSION_RECV_HEADERS
                    --> fin = false
                    --> :status: 200
                        cache-control: public, max-age=0
                        content-encoding: deflate
                        content-length: 60
                        content-type: text/javascript
                        date: Mon, 09 Oct 2017 14:49:24 GMT
                        etag: "/+cUWoFWkafsB6vSI5wBuB7v4Tk="
                        last-modified: Mon, 09 Oct 2017 14:43:24 GMT
                    --> stream_id = 1
t=304409 [st=23]    HTTP2_SESSION_RECV_HEADERS
                    --> fin = false
                    --> :status: 200
                        cache-control: public, max-age=0
                        content-encoding: deflate
                        content-length: 64
                        content-type: text/javascript
                        date: Mon, 09 Oct 2017 14:49:24 GMT
                        etag: "2ZM3pEXqn9z1d5tkBr2x5kdHsGk="
                        last-modified: Mon, 09 Oct 2017 14:43:24 GMT
                    --> stream_id = 2
t=304409 [st=23]    HTTP2_SESSION_RECV_DATA
                    --> fin = false
                    --> size = 60
                    --> stream_id = 1
t=304409 [st=23]    HTTP2_SESSION_UPDATE_RECV_WINDOW
                    --> delta = -60
                    --> window_size = 15728580
t=304409 [st=23]    HTTP2_SESSION_RECV_DATA
                    --> fin = true
                    --> size = 0
                    --> stream_id = 1
t=304409 [st=23]    HTTP2_SESSION_RECV_DATA
                    --> fin = false
                    --> size = 64
                    --> stream_id = 2
t=304409 [st=23]    HTTP2_SESSION_UPDATE_RECV_WINDOW
                    --> delta = -64
                    --> window_size = 15728516
t=304409 [st=23]    HTTP2_SESSION_RECV_DATA
                    --> fin = true
                    --> size = 0
                    --> stream_id = 2
t=304410 [st=24]    HTTP2_SESSION_UPDATE_RECV_WINDOW
                    --> delta = 60
                    --> window_size = 15728576
t=304412 [st=26]    HTTP2_STREAM_ADOPTED_PUSH_STREAM
                    --> stream_id = 2
                    --> url = "https://death.tips/routes.js"
t=304413 [st=27]    HTTP2_SESSION_UPDATE_RECV_WINDOW
                    --> delta = 64
                    --> window_size = 15728640
Run Code Online (Sandbox Code Playgroud)

Sem*_*lon 5

这真是一个谜！

\n\n

问题是 \xe2\x80\x94 好吧，我 \xe2\x80\x99m 无法很好地解释这一点，但我的浅薄理解是，文档是“使用凭据”请求的，但默认情况下会触发<script type="module">“无凭据”请求。该脚本的推送承诺是通过关联“带有凭据”，但是never the twain shall meet。因此浏览器必须发出新请求，因为推送承诺“确实有效”。并且有一个解决方案：

\n\n
<script type="module" src="/index.js" crossorigin="use-credentials">\n
Run Code Online (Sandbox Code Playgroud)\n\n

我从来没有想过使用“ crossorigin”属性来获取同一站点上的资源，但它就是这样。推被采用，我的小实验速度提高了一倍。

\n\n
\n\n

这里\xe2\x80\x99是#whatwg中整个对话的记录：

\n\n
[7:35pm] <bathos> I\xe2\x80\x99ve got a question about interactions between module\n  loading and HTTP2 that\xe2\x80\x99s had me scratching my head for a few days \xe2\x80\x94 is\n  that something appropriate to ask about here?\n[7:37pm] <jyasskin> bathos: Yes.\n[7:39pm] <bathos> Cool. I\xe2\x80\x99ve been experimenting with serving resources using\n  HTTP2 push \xe2\x80\x94 assemble a dep graph in advance and follow through on\n  requests by provisioning their known dependencies as push promises. This\n  works great on the whole, but there\xe2\x80\x99s a quirk I\xe2\x80\x99ve observed that seems to\n  be related specifically to ES module "entrypoints".\n[7:40pm] <bathos> I asked about it on SO, so there\xe2\x80\x99s a bit of detail in the\n  question and comments there: /sf/ask/3264979861/\n[7:40pm] <bathos> The gist though:\n[7:41pm] <bathos> Given a request for a document which contains\n  <script type="module" src="something">, and an http2 session which\n  includes a push promise for "something", the "something" push is never\n  adopted. Instead, the browser makes a fresh request for it.\n[7:41pm] <jyasskin> Domenic: ^\n[7:42pm] <bathos> Dependencies imported _in_ ES are adopted.\n[7:42pm] <jyasskin> bathos: I\'m not an expert here, but your question\n  reminds me of the with-vs-no-credentials problem in\n  https://github.com/whatwg/fetch/issues/354.\n[7:42pm] <bathos> And if I reference the same module in a different way in\n  the root document, e.g. a preload <link>, it is successfully adopted. It\xe2\x80\x99s\n  peculiar to type="module"\n[7:43pm] <bathos> oh, interesting\n[7:43pm] <jyasskin> Apologies if I\'ve just sent you on a wild goose chase.\n[7:44pm] <bathos> I have been on a lot for the last two days haha! Since\n  HTTP2 is still pretty mysterious to me, it\xe2\x80\x99d been hard to rule out the\n  possibility that I\xe2\x80\x99m doing something weird there, though I\xe2\x80\x99m pretty sure\n  at this point that I\xe2\x80\x99m not.\n[7:52pm] <bathos> jyasskin you genius!\n[7:53pm] <jyasskin> s/genius/pattern-matcher/ :)\n[7:53pm] <bathos> crossorigin="use-credentials" in the doc actually makes\n  the module push promise get adopted\n[7:54pm] <bathos> I never would have thought to try "crossorigin" on a file\n  on the same host haha\n
Run Code Online (Sandbox Code Playgroud)\n

归档时间：

查看次数：

317 次

最近记录：

8 年，1 月 前
相关归档
ES6:"import*as alias"vs"import alias" 13
为什么Chrome浏览器无法识别我的http2服务器？ 6
PM2 带 ES 模块。错误：ERR_REQUIRE_ESM 6
HTTP/2 与 OkHttp3 和 Retrofit2 5
Why does mutating a module update the reference if calling that module from another module, but not if calling from itself? 5
ES6 导入在 next.js 应用程序中无法正常工作 5
gRPC - Firestore如何实现服务器-&gt;客户端实时流式传输 5
package.json 不支持 esm 和 cjs npm 包的导出属性 4
cURL 不适用于 nghttp2 2
为什么HTTP/2多路复用优于http/1.1？ 1
难疑归档
为什么Android模拟器这么慢？我们如何加快Android模拟器的速度？ 3356
使用__init __()方法理解Python super() 2366
在JavaScript中验证十进制数 - IsNumeric() 2318
根据pandas中列的值从DataFrame中选择行 1649
如何确定Python变量的类型？ 1437
如何获取所有Git分支 1371
如何在PHP中进行重定向？ 1201
有效地使用Git和Dropbox？ 1117
在拉动期间解决Git合并冲突以支持其更改 1104
如何将命令行参数传递给rake任务 1065