1.HTTP网络协议
HTTP状态码
RFC 规定 HTTP 的状态码为三位数，被分为五类:
- 1xx: 表示目前是协议处理的中间状态，还需要后续操作。
- 2xx: 表示成功状态。
- 3xx: 重定向状态，资源位置发生变动，需要重新请求。
- 4xx: 请求报文有误。
- 5xx: 服务器端发生错误。
接下来就一一分析这里面具体的状态码。
1xx
101 Switching Protocols。在HTTP升级为WebSocket的时候，如果服务器同意变更，就会发送状态码 101。
2xx
200 OK是见得最多的成功状态码。通常在响应体中放有数据。
204 No Content含义与 200 相同，但响应头后没有 body 数据。
206 Partial Content顾名思义，表示部分内容，它的使用场景为 HTTP 分块下载和断点续传，当然也会带上相应的响应头字段Content-Range。
3xx
301 Moved Permanently即永久重定向，对应着302 Found，即临时重定向。
比如你的网站从 HTTP 升级到了 HTTPS 了，以前的站点再也不用了，应当返回301，这个时候浏览器默认会做缓存优化，在第二次访问的时候自动访问重定向的那个地址。
而如果只是暂时不可用，那么直接返回302即可，和301不同的是，浏览器并不会做缓存优化。
304 Not Modified: 当协商缓存命中时会返回这个状态码。详见浏览器缓存
4xx
400 Bad Request: 开发者经常看到一头雾水，只是笼统地提示了一下错误，并不知道哪里出错了。
403 Forbidden: 这实际上并不是请求报文出错，而是服务器禁止访问，原因有很多，比如法律禁止、信息敏感。
404 Not Found: 资源未找到，表示没在服务器上找到相应的资源。
405 Method Not Allowed: 请求方法不被服务器端允许。
406 Not Acceptable: 资源无法满足客户端的条件。
408 Request Timeout: 服务器等待了太长时间。
409 Conflict: 多个请求发生了冲突。
413 Request Entity Too Large: 请求体的数据过大。
414 Request-URI Too Long: 请求行里的 URI 太大。
429 Too Many Request: 客户端发送的请求过多。
431 Request Header Fields Too Large请求头的字段内容太大。
5xx
500 Internal Server Error: 仅仅告诉你服务器出错了，出了啥错咱也不知道。
501 Not Implemented: 表示客户端请求的功能还不支持。
502 Bad Gateway: 服务器自身是正常的，但访问的时候出错了，啥错误咱也不知道。
503 Service Unavailable: 表示服务器当前很忙，暂时无法响应服务。
为什么需要HTTPS
HTTP协议是明文传输的，不安全 HTTPS是安全版的HTTP，采用加密传输，非对称加密和对称加密
HTTPS是如何保证安全？
HTTPS在传输数据的过程中会对数据进行加密处理，保证安全性 目前常见的加密算法可以分为三类：
- 对称加密算法
- 非对称加密算法
- hash算法
什么是对称加密？
对称加密：
-
加密与解密使用相同的密钥
特点：
- 加密速度快，效率高
使用场景：
- 本地数据加密，HTTPS通信，网络传输等
什么是非对称加密？
加密与解密使用不同的规则，只要这两种规则之间存在某种对应关系即可 通信的双方使用不同的密钥进行密钥加密，（私钥+公钥） 特点：
- 优点：非对称加密与对称加密相比其安全性更好
- 缺点：加密与解密花费时间长，速度慢，只适合少量数据进行加密
使用场景： https会话前期、CA数字证书，信息加密，登录认证
常见算法： RSA、ECC（移动设备）、Diffie-Hellman、EI Gamal、DSA(数字签名)
HTTPS加密解决方案
结合两种加密方式：
- 将对称加密的密钥（一串约定好的字符串）用非对称加密的公钥，进行加密并发送出去，接收方使用私钥解密得到对称加密秘钥
- 双方沟通时使用 对称加密秘钥进行 可以看到，只有在发送密钥阶段才使用非对称加密，而后续的通信都使用对称加密，这样就解决了性能问题
HTTPS目前所使用的TLS协议就是目前采用的加密通道规范协议，它利用对称加密、（公私钥）非对称加密，以及其密钥交换算法，可完成可信任的信息传输
http缓存控制
web服务器缓存大致分为：
- 数据库缓存
- 服务器缓存（代理服务器缓存、CDN服务器缓存）
- 浏览器缓存
浏览器缓存包含很多内容：
- HTTP缓存、indexDB、cookie、localstorage等
HTTP缓存：
- 强缓存
- 协商缓存
在具体了解HTTP缓存之前明确几个术语：
- 缓存命中率：从缓存中得到数据请求数与所有请求数的比率。理想状态是越高越好
- 过期内容：超过设置的有效事件，被标记为陈旧内容
- 验证：验证缓存中的过期内容是否仍然有效，验证通过的话刷新时间
- 失效：失效就是把内容从缓存中移除
浏览器缓存主要就是HTTP协议定义的缓存机制
浏览器缓存，HTTP缓存分类
浏览器缓存分为强缓存和协商缓存，浏览器加载一个页面的简单流程如下：
1.浏览器先根据这个资源的http头信息来判断是否命中强缓存 如果直接命中则直接加载在缓存中的资源，并不会将请求发送到服务器（强缓存）
2.如果未命中强缓存，则浏览器会将资源加载请求发送到服务器，服务器来判断浏览器本地缓存是否有效，若可以使用，则服务器不会返回资源信息，浏览器继续从缓存加载资源（协商缓存）
TCP协议
1.什么是TCP协议？
TCP传输控制协议是HTTP的底层协议
2.一次完整的HTTP服务过程是什么？
当我们在web浏览器的地址栏出入：www.baidu.com，具体发生了什么？
- 输入www.baidu.com.回车后，需要先进行DNS解析，得到对应的IP地址
- 根据IP地址，找到对应的服务器，发起TCP的三次握手
- 建立TCP连接后，发起HTTP请求
- 服务器响应HTTP请求，浏览器得到HTML代码
- 浏览器接信息HTML代码，并请求HTML代码中的资源
- 浏览器对页面进行渲染呈现给用户
- 服务器过程完毕，关闭TCP连接，四次挥手
重绘与重排（回流）
1.重绘：
对界面，进行渲染绘制 何时发生重绘：
- 改变了不影响布局的样式，只触发重绘
- 改变布局了，布局更新后，也会触发重绘
2.重排：
对布局重新计算排布，更新布局
何时会触发重排：（布局发生改变）添加或删除可见的DOM元素
3.区别：
- 重绘不一定会触发重排，比如：只改变了背景色
- 只要重排了，必然触发重绘
重绘与重排的角度如何优化页面渲染性能？
主要有几大方面：
- 尽可能减少重绘和重排的次数
- 集中修改样式
- 尽量避免在遍历循环中，进行元素offsetTop等样式值的获取操作
- 利用transform实现动画变化效果，去替代left、top的变换（轮播图）transform变换只是视觉效果，不会影响其他盒子，只触发了自己的重绘
- 使用文档碎片（documentFragment)，用于批量处理，创建元素
文档碎片的理解：
documentFragment是一个保存多个元素的容器对象（保存到内存）当更新一个或者多个元素时，页面不会更新，当容器中保存的所有元素操作完毕了，只有将其插入到页面中才会更新页面 。
2.CSS
谈谈你对BFC的理解？
BFC：
块级格式化上下文，是一块独立的渲染区域（触发了BFC，这块区域就是一块独立的渲染区域）
触发BFC方式：
- position：absolute/fixed
- float:left/ringht;浮动的元素多个放在一起，会互相隔开
- overflow:hidden/auto/scroll
- display:inline-block
BFC应用：
- 处理块级元素，上下margin合并的问题
- 处理margin塌陷
- 清除浮动
- 实现自适应布局
- 圣杯布局
CSS中有哪些定位方式？
静态定位(Static positioning)是每个元素默认的属性——它表示“将元素放在文档布局流的默认位置。
相对定位(Relative positioning)允许我们相对于元素在正常的文档流中的位置移动它——包括将两个元素叠放在页面上。这对于微调和精准设计(design pinpointing)非常有用。
绝对定位(Absolute positioning)脱离文档流。我们可以将元素相对于页面的 元素边缘固定，或者相对于该元素的最近被定位祖先元素(nearest positioned ancestor element)。绝对定位在创建复杂布局效果时非常有用，例如通过标签显示和隐藏的内容面板或者通过按钮控制滑动到屏幕中的信息面板。
固定定位(Fixed positioning)与绝对定位非常类似，但是它是将一个元素相对浏览器视口固定。 这在创建类似在整个页面滚动过程中总是处于屏幕的某个位置的导航菜单时非常有用。
粘性定位(Sticky positioning)它会让元素先保持和position: static一样的定位，当它的相对视口位置(offset from the viewport)达到某一个预设值时，他就会再像position: fixed一样定位（某些网站头导航栏滚动到一定位置固定到屏幕）。
z-index的小坑？
- 如果父辈元素有定位，且配置了z-index，优先按照父辈元素的定位的z-index进行比较
伪类与伪元素的区别？
伪类： ：前缀，可被添加到一个选择器末尾的关键字，权重与类一致
它用于让样式在元素的特定状态下才被应用到实际的元素上：如：checked，：hover，：disabled，：nth-child（）
伪元素： ：before、：after 伪元素用于创建一些不在DOM树中的元素，并为其添加样式
伪元素是无法注册事件的，所有不要通过JS控制伪元素
区别：
- 伪类是用来匹配元素的特殊状态
- 伪元素是来创建DOM，但在DOM树中不体现
