Answer 1

面试被问到过，写一写：

function fetchLimit(urls, max) {
        let num = 0;
        let len = urls.length;
        let _res = [];

        function req(url) {
            fetch(url)
                .then(res => _res[num] = res)
                .catch(err => _res[num] = err)
                .finally(() => {
                    if (num >= len) return _res;

                    req(urls[num])
                });
            ++num;
        }


        for (let i = 0; i < max; i++) {
            req(urls[i])
        }
    }

Answer 2

4. flexbox 布局中剩余空间分配的问题

hybrid 开发中碰到的一个 flexbox 布局问题：https://codepen.io/creeper/pen/evVOQR

上中下三栏布局中，上下固定高，中间flex-grow: 1（中间块 overflow: auto，其内容较多时可滚动），结果导致上下被挤压。

原因就是 flexbox 布局中剩余空间分配的默认规则跟我们小的不太一样，我们要正确设置 flex-shrink/flex-grow/flex-basis。

http://zhoon.github.io/css3/2014/08/23/flex.html 这篇文章可以一看，对剩余空间分配讲解的比较清楚：

什么是剩余空间呢？

具备flex环境的父容器，通常是有一条主轴和一条侧轴，默认情况下主轴就是水平从左向右的，侧轴是垂直从上到下的（类似书写模式）。 剩余空间就是父容器在主轴的方向上还有多少可用的空间。

<div class="container">
  <span class="B1"></span>
  <span class="B2"></span>
  <span class="B3"></span>
</div>

假设 container 高度 500px ，那么剩余高度就是 500px - B1.width - B2.width: B3.width。

flex-grow

flex-grow 就是索取父容器的剩余空间，默认值是0 ，就是不索取剩余空间。

接上面的例子，假设 B1/B2/B3 的 width 都是 100px 。因为默认值是 0，那么剩余的 200px 不会被占用。

1. 设置 B2 的 flex-grow: 1 ，那么剩余 200px 都被 B2 占用，B2 变成 300px。
2. 设置 B1 的 flex-grow: 1 ，B2 的 flex-grow: 2 ，那么 B1 和 B2 都参与剩余空间瓜分，B1 瓜分 200px / 3 * 1，B2 瓜分 200px / 3 * 2。

flex-basis

flex-basis 用于和父容器预约空间（预约剩下的归入剩余空间），默认值是 auto，即由自身内容决定空间占用（长度）。

1. 属于 width 的替代品。如果同时设置 flex-basis 和 width ，则 width 被覆盖，即 flex-basis 的优先级更高。有一点需要注意，如果 flex-basis 和 width 其中有一个是 auto ，那么另外一个非 auto 的属性优先级会更高。

flex-shrink

讲到现在，都是容器长度超过子元素长度和（flex 默认不换行，这里先不考虑 flex-wrap），如果小于会怎么样？小于的话怎么计算剩余空间？

这里就要说到 flex-shrink 了。

flex-shrink 属性用于设置 flexbox 的收缩比率，** 默认值是 1 **，即子元素长度和超过容器时默认压缩。

接上面的例子：

设置各自的长度为：
container: 500px;
B1: 300px;
B2: 160px;
B3: 120px;

则

剩余空间是  500 - 300 - 160 - 120 = -80px; 要进行压缩（假设没有设置 flex-wrap）。
因为 flex-shrink 默认 1，
则最终：
B1: 258.63px; 缩小 41.37 = 80 * （300 ／ 580）
B2: 137.94px; 缩小 22.06 = 80 * （160 ／ 580）
B3: 103.45px; 缩小 16.55 = 80 * （120 ／ 580）


如果我们把 B1 的 flex-shrink 设为 2，则最终：
B1: 245.45px; 缩小 54.55 = 80 * ((300 + 300) ／ (580 + 300))
B2: 145.45px; 缩小 22.06 = 80 * (160 ／ (580 + 300))
B3: 109.09px; 缩小 16.55 = 80 * (120 ／ (580 + 300))

Answer 3

在 HTTP/1 中，每次请求都会建立一次HTTP连接，也就是我们常说的3次握手4次挥手，这个过程在一次请求过程中占用了相当长的时间，即使开启了 Keep-Alive ，解决了多次连接的问题，但是依然有两个效率上的问题：

• 第一个：串行的文件传输。当请求a文件时，b文件只能等待，等待a连接到服务器、服务器处理文件、服务器返回文件，这三个步骤。我们假设这三步用时都是1秒，那么a文件用时为3秒，b文件传输完成用时为6秒，依此类推。（注：此项计算有一个前提条件，就是浏览器和服务器是单通道传输）
• 第二个：连接数过多。我们假设Apache设置了最大并发数为300，因为浏览器限制，浏览器发起的最大请求数为6，也就是服务器能承载的最高并发为50，当第51个人访问时，就需要等待前面某个请求处理完成。

HTTP/2的多路复用就是为了解决上述的两个性能问题。
在 HTTP/2 中，有两个非常重要的概念，分别是帧（frame）和流（stream）。
帧代表着最小的数据单位，每个帧会标识出该帧属于哪个流，流也就是多个帧组成的数据流。
多路复用，就是在一个 TCP 连接中可以存在多条流。换句话说，也就是可以发送多个请求，对端可以通过帧中的标识知道属于哪个请求。通过这个技术，可以避免 HTTP 旧版本中的队头阻塞问题，极大的提高传输性能。

Answer 4

博主，这句哈撒意思？ES6 是新增了 Symbol 类型，博主是否写错了？
" 然而当我们使用 typeof 对这些数据类型的值进行操作的时候，返回的结果却不是一一对应，分别是：
undefined、object、boolean、number、string、object "

加油写，我会一直看的。