2020年01月08日你要记录点什么？(简单理解下 http2 的多路复用)

koala-coding / day-day-up

每天进步一点点，记录每天在公司的一个小收获，一年后你回顾肯定收获了很多，哪怕是你知道了一个新函数，甚至一个新单词都可以。也算是一个个人成长秘籍吧

Apache License 2.0

9 stars 0 forks source link

css基础😉😉😉

水平居中

文本、行内块, text-align: center;
width: 100px; margin: 0 auto;
text-align: center; + display: inline-block;
绝对定位+transform
flex

垂直居中

单行: height + line-height;
多行: height + n * line-height;
图片: vertical-align: middle;
display: table-cell;vertical-align: middle;
display: flex; flex-direction: column;justify-content: center;
绝对定位+transform
display: flex;+ align-self: center;

绝对居中

position: absolute;
    margin: auto;
    width: 100px;
    height: 50px;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;

两列布局

左列定宽,右列自适应: 左侧定宽,右侧flex:1;

九宫格布局

#parent {
    width: 1200px;
    height: 500px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr); /*等同于1fr 1fr 1fr,此为重复的合并写法*/
    grid-template-rows: repeat(3, 1fr);  /*等同于1fr 1fr 1fr,此为重复的合并写法*/
}
.item {
    border: 1px solid #000;
}

栅格

@media screen and (max-width: 768px) {
 ...
}
@media screen and (min-width: 768px) {
 ...
}

纯css实现顶部滚动条😉😉😉

文档

export default function () {
  return (
    <div className={styles.normal}>
      <div className={styles.item}>111</div>
      <div className={styles.item}>111</div>
      .
      .
      .
      <div className={styles.item}>111</div>
    </div>
  );
}

.normal {
  background-image: linear-gradient(to right top, #ffcc00 50%, #eee 50%);
  background-size: 100% calc(100% - 100vh + 5px);
  background-repeat: no-repeat;
}

.item {
  position: relative;
  height: 50px;
  z-index: 1;
}

.normal::after {
  content: "";
  position: fixed;
  top: 5px;
  left: 0;
  bottom: 0;
  right: 0;
  background: #fff;
  z-index: 0;
}

background-image可以给dom配置多个背景图和背景色
background-size可以修饰background-image,两者的参数位置一一对应
linear-gradient渐变

一个div画出一个棋盘😉😉😉

.box {
  font-size: 50px;
  width: 6em;
  background-color: green;
  height: 4em;
  background-image:
    linear-gradient(to bottom, transparent 95%, white 95%),
    linear-gradient(to right, transparent 95%, white 95%),
    linear-gradient(to top, transparent 95%, white 95%),
    linear-gradient(to left, transparent 95%, white 95%);
  background-size: 1em 1em;
  background-repeat: repeat, repeat, repeat-x, repeat-y;
}

http/2 多路复用的认识

之前都没有听过这个词, 见到不认是的东西, 就想认识一下.

http/2和http/1相比

HTTP/2采用二进制格式而非文本格式

HTTP/2是完全多路复用的，而非有序并阻塞的——只需一个连接即可实现并行

使用报头压缩，HTTP/2降低了开销

HTTP/2让服务器可以将响应主动“推送”到客户端缓存中

HTTP/1存在的问题 在http1.1中,发起一个请求是这样的流程: 浏览器请求url => 域名解析 => 建立HTTP连接 => 服务器处理文件 => 返回数据 => 浏览器解析,渲染

在这个流程中, 每次请求都要建立一次HTTP连接, 这个过程会占用相当长的时间, 所有就想能不能就建立一次连接, 不间断的请求都使用这个通道.

为了解决这个问题 HTTP1.1中提供的Keep-alive, 允许我们建立一次HTTP连接,来返回多次请求数据; 但是却还是存在两个问题:

HTTP1.1是串行数据, 因此这些请求必须是有序的, 所以才有Keep-alive我们只节省了连接时间, 请求数据的时间没有减少

其次就是并发数问题, 假设我们在 Apache 中设置了最大并发数 300，而因为浏览器本身的限制，最大请求数为 6，那么服务器能承载的最高并发数是 50

HTTP/2的多路复用

接下来就看看HTTP/2的多路复用是如何解决上面问题的:

比如我们要传输: hello http, 在HTTP1.1中只能从 h到p一个个的顺序传输, 不能并行传输,因为接收端不知道这些字符的顺序

而在HTTP/2 引入二进制数据帧和流的概念, 其中帧对数据进行顺序标识，这样浏览器收到数据之后，就可以按照序列对数据进行合并，而不会出现合并后数据错乱的情况。

关于并发: HTTP/2对统一域名下所有请求都是基于流, 也就是说不管同一域名下不管访问多少文件, 都只建立一个连接,同样Apache的最大连接数为300，因为有了这个新特性，最大的并发就可以提升到300，比原来提升了6倍！

koala-coding / day-day-up