<aside> 📘 Server Push 已经被弃用
Removing HTTP/2 Server Push from Chrome - Chrome for Developers
</aside>
"HTTP/2 push will solve that" is something I've heard a lot when it comes to page load performance problems, but I didn't know much about it, so I decided to dig in.
HTTP/2 push is more complicated and low-level than I initially thought, but what really caught me off-guard is how inconsistent it is between browsers – I'd assumed it was a done deal & totally ready for production.
This isn't an "HTTP/2 push is a douchebag" hatchet job – I think HTTP/2 push is really powerful and will improve over time, but I no longer think it's a silver bullet from a golden gun.
Between your page and the destination server there's a series of caches & things that can intercept the request:
Service workerHTTP cacheServerPageImage cachePreload cachePageImage cachePreload cachePush cacheHTTP/2 connectionPush cacheHTTP/2 connection
The above is probably like those flow diagrams people use to try and explain Git or observables – they're reassuring to someone who already knows the thing, but terrifying to others. If that's the case, sorry! Hopefully the next few sections will help.
**Page:**Hey example.com, can I have your homepage please?10:24
**Server:**Sure thing! Oh, but while I'm sending you that, here's a stylesheet, some images, some JavaScript, and some JSON.10:24
**Page:**Uh, sure.10:24
**Page:**I'm just reading the HTML here, and it looks like I'm going to need a stylesh… oh it's the one you're already sending me, cool!10:25
When the server responds to a request it can include additional resources. This includes a set of request headers, so the browser knows how to match it up later. They sit in a cache until the browser asks for a resource that matches its description.
You get a performance boost because you start sending the resources without waiting for the browser to ask for them. In theory, this means the page loads faster.
This is pretty much all I knew about HTTP/2 push for years, and it sounded relatively simple, but the devil is in the details…