前端渲染加速之 - Big Pipe

首屏渲染速度一直是前端的一个痛点

从最一开的是直接静态资源服务器直接返回资源文件, 到使用CDN分发文件, 再到服务器渲染技术. 无一不是为了让用户得到最佳体验.

Big Pipe 是Facebook所采用的一项加速首屏加载的技术, 在Facebook的首页上可以明显感觉到.

看起来似乎和Ajax一样呢

首先我们需要知道Ajax其实只是另一个普通的HTTP请求. 一个完整HTTP请求的过程为

DNS Resolving -> TCP handshake -> HTTP Request -> Server -> HTTP Response -> TCP shutdown

整个网络链路上花掉的时间都已经不少.

而 Big Pipe 只需要使用一个连接, 不需要额外的请求

Big Pipe 背后所用的到的技术其实并不复杂, 服务器传给浏览器一个没有闭合的 , 此时浏览器会把已经接收到的dom渲染出来(如果还有css, 也渲染上). 但是, 此时由于TCP连接还没有断开, 还没有闭合, 服务器可以继续推送更多的dom到浏览器, 甚至 `); view.push(''); view.push(null); }).catch(e => {}); }); app.listen(5000);