【React】面试题:如何在Http1.1基础上实现多路复用？

Z时代
2024-01-10
分类：技术分享

在我叙述完Http2.0与Http1.1的区别后，面试官来了一句如何在Http1.1基础上实现多路复用？
这下好了，又到了我的知识盲区了文本转换为流？怎样保证顺序？
【React】面试题:如何在Http1.1基础上实现多路复用？

回答

好问题，先点个赞
个人看法仅供参考
其实这里就是要利用现有的服务端+keep-alive+浏览器实现：
0.合并请求
1.多文件合成流
2.多个流同时发送/接受
3.校验完整性、合并、执行

举例：浏览器收到 html 之后有三个文件a.css，b.js，c.jpg，正常应该是顺序加载的
0.原 http 需要同步加载的三个文件，<link href="https://segmentfault.com/q/1010000021181827/a.css"> <script src="https://segmentfault.com/q/1010000021181827/b.js"> <img src="https://segmentfault.com/q/1010000021181827/c.jsp>%EF%BC%8C%E5%8F%98%E6%88%90%E4%BA%86%E4%B8%80%E6%AE%B5%E5%BC%82%E6%AD%A5%E8%AF%B7%E6%B1%8212%E4%B8%AAblob%E7%9A%84%E4%B8%80%E6%AE%B5js%EF%BC%8C%E8%BF%9912%E4%B8%AAblob%E6%9D%A5%E8%87%AA%E4%B8%A4%E4%B8%AA%E4%B8%8D%E5%90%8C%E7%9A%84%E5%9F%9F
1.%E5%8E%9F%E6%9D%A5%E6%9C%8D%E5%8A%A1%E5%99%A8%E4%B8%8A%E6%94%BE%E7%9A%84%E4%B8%89%E4%B8%AA%E6%96%87%E4%BB%B6%EF%BC%8C%E7%8E%B0%E5%9C%A8%E4%BB%A5%E4%BA%8C%E8%BF%9B%E5%88%B6%E7%9A%84%E5%BD%A2%E5%BC%8F%E5%AD%98%E6%94%BE%E4%BA%8E12%E4%B8%AA%E6%96%87%E4%BB%B6%E4%B8%AD%EF%BC%8C%E6%94%BE%E5%9C%A8%E4%B8%A4%E4%B8%AA%E4%B8%8D%E5%90%8C%E5%9F%9F%E4%B8%8A
2.http%E6%96%87%E4%BB%B6%E5%8A%A0%E8%BD%BD%EF%BC%8Cjs%E6%89%A7%E8%A1%8C%EF%BC%8Cblob%E5%BC%82%E6%AD%A5%E6%8E%A5%E5%8F%97%EF%BC%8Cpromise.all %E7%9A%84%E6%97%B6%E5%80%99%E5%90%88%E5%B9%B6%E6%88%90%E5%AD%97%E7%AC%A6%E4%B8%B2%E3%80%82%E5%90%88%E5%B9%B6%E5%90%8E%E7%9A%84%E5%AD%97%E7%AC%A6%E4%B8%B2%E5%BA%94%E8%AF%A5%E5%B0%B1%E6%98%AF<style>*{...}</style>%EF%BC%8C<script>({}())()</script>%EF%BC%8C<img src="base64:img/jpg"> 的形式
3.完整性其实http本身就实现了，顶多监听个 onerror 重新加载。上面字符串按照设定好的顺序插入DOM即可