2018.10.24.md LOG：http http2 how
2018-10-25 本文已影响0人
灰喵九命
昨天去了躺华西，郑光明大夫又给我开了700多的药，加上上次1000多，都要突破2000大关了，没手术，没住院，就回家吃药2个月就2000，这也是没谁了。使着劲的开药，药可以当饭吃么？
这两天看了关于响应式设计和浏览器原理，HTTP相关的知识，分享一下。
响应式设计
建议：大型的综合网站还是根据PC、平板、手机的情况分开来做样式；小型并且操作不复杂的网站，例如博客，还是用响应式布局吧，以移动优先，毕竟现在的人除了办公，已经很少有人像程序员一样天天用PC了吧。
- 一般的网站就用用media query就行了，没必要用第三方框架，bootstrap这种玩具还是会影响性能滴，当然如果图方便或者敷衍上司，用用也行，但用之前还是把不需要的剔除掉
- @media布局关键在两点：流式布局/断点设置
- 布局：一般采用flex、float、百分比、rem等
- 兼容：IE9以下需要引用respond
- 响应式设计的难点：图片，视频，表格，后面在看
- 断点：bootstrap默认断点，可以借鉴
/ 默认为手机端样式
// 等于或大于 34*16 = 544px（手机横屏）
@media (min-width: 34em) { ... }
// 等于或大于 48*16 = 768px(平板竖屏)
@media (min-width: 48em) { ... }
// 等于或大于 62*16 = 992px（pc窄屏）
@media (min-width: 62em) { ... }
// 等于或大于 75*16 = 1200px（ pc宽屏）
@media (min-width: 75em) { ... }
// pc超大屏 1380px
@media (min-width: 1380px) { ... }
web是如何工作的
web工作这个话题非常复杂，涉及到浏览器，协议栈，系统网卡，路由器，ISP等等。简单的举个例子吧，你可以把web工作的过程，简单的想象成找代购帮你到日本买奶粉。
- HTTP请求包含了需要购买商品的所有信息，包括购买的地址，回寄的信息，奶粉的品牌，质量要求，数量，价格范围等
- 客户端TCP/IP就像本地做代购的，他将你的信息加上他们自己通讯和防伪标志通过协议栈，网卡，路由器等传送给日本的外贸商，当然日本的外贸商就是服务器的TCP/IP,他们早已有了联系
- 日本商店就像服务器应用程序，收到了外贸商的订单后就解析您的需求，拿出合适您的商品交给外贸商，再快递回本地代购，本地代购再给您
- 您通过快递信息、商品条形码等附加信息判断商品的真伪，并使用商品，交易结束
浏览器原理
用一个图来解释
image
- 根据来自服务器端的HTML代码形成文档对象模型（DOM）
- 加载并解析样式，形成CSS对象模型
- 在文档对象模型和CSS对象模型之上，创建一棵由一组待生成渲染的对象组成的渲染树
- 对渲染树上的每个元素，计算它的坐标，称之为布局
- 渲染树上的元素最终展示在浏览器里
这里重要要说两个概念，一个是Reflow，另一个是Repaint。这两个不是一回事。
Repaint——屏幕的一部分要重画，比如某个CSS的背景色变了。但是元素的几何尺寸没有变。
Reflow——意味着元件的几何尺寸变了，我们需要重新验证并计算Render Tree。是Render Tree的一部分或全部发生了变化。这就是Reflow，或是Layout。
所以，下面这些动作有很大可能会是成本比较高的。
- 当你增加、删除、修改DOM结点时，会导致Reflow或Repaint
- 当你移动DOM的位置，或是搞个动画的时候。
- 当你修改CSS样式的时候。
- 当你Resize窗口的时候（移动端没有这个问题），或是滚动的时候。
- 当你修改网页的默认字体时。
如何避免，请参照以下建议：
- 不要一条一条地修改DOM的样式。与其这样，还不如预先定义好css的class，然后修改DOM的className
- 把DOM离线后修改，先把DOM给display:none(有一次reflow)，然后你想怎么改就怎么改
- 不要把DOM结点的属性值放在一个循环里当成循环里的变量
- 尽可能的修改层级比较低的DOM
- 为动画的HTML元件使用fixed或absoult的position
- 千万不要使用table布局
- 尽量简化和优化CSS选择器,将嵌套程度保持在最低水平
- 在使用滚动时禁用复杂的悬停动效
HTTP/2
HTTP/1.x的缺陷
- 连接无法复用：连接无法复用会导致每次请求都经历三次握手和慢启动
- Head-Of-Line Blocking：导致带宽无法被充分利用，以及后续健康请求被阻塞
- 协议开销大
- 安全因素：HTTP/1.x中传输的内容都是明文，客户端和服务端双方无法验证身份
HTTP/2的新特性
- 新的二进制格式
- Header压缩
- 流（stream）和多路复用（MultiPlexing）
- 优先级
基于HTTP /2可以有哪些优化规则，HTTP/1.x哪些优化可以放弃了，请参照以下文章
HTTP2的Web优化
HTTP2提升性能7个建议
