GET 和 POST 的区别

• GET 和 POST 本质没有区别。GET 和 POST 是 HTTP 协议中的两种发送请求的方法。HTTP 是基于 TCP/IP 的关于数据如何在万维网中如何通信的协议。HTTP 的底层是 TCP/IP。所以 GET 和 POST 的底层也是 TCP/IP，也就是说，GET/POST 都是 TCP 链接。GET 和 POST 能做的事情是一样一样的。也可以给 GET 加上 request body，给 POST 带上 url 参数
• GET 长度受浏览器长度限制。POST 没有
• GET 请求只能进行 url 编码 ASCII 字符，而 POST 支持多种编码方式。
• GET 参数通过 URL 传递，POST 放在 Request body 中。
• GET 产生一个 TCP 数据包；POST 产生两个 TCP 数据包。（对于 GET 方式的请求，浏览器会把 http header 和 data 一并发送出去，服务器响应 200（返回数据）；而对于 POST，浏览器先发送 header，服务器响应 100 continue，浏览器再发送 data，服务器响应 200 ok（返回数据）。）

从输入 url 到显示经历了什么？

1. 浏览器有五大线程：定时器线程，事件线程，网络线程，渲染线程，js 线程

2. 当输入 url 后，浏览器会开辟一条网络线程，经历 DNS 查询，三次握手，四次挥手。

   • DNS 查询：先检查浏览器本身有没有缓存，如果没有则查找本地，如果本地也没用查找 host，如果也没用就去找根服务器
   • 三次握手
   • 四次挥手

3. 后端接收到请求后，经过一系列统一性验证后，执行后端代码，然后 HTTP 响应包发送给前端，完成交互

4. 前端接受到报文后先解析 HTML，构建 DOM 树

5. 解析 CSS，构建 CSSOM 树

6. 合并 DOM 树和 CSSOM 树，构建 render 树

7. 布局 render 树

8. 绘制 render 树

9. 浏览器会将各层的信息发送给 GPU,GPU 将各层合成显示在屏幕上。

10. 遇到 script 标签时，会执行并阻塞渲染:因为浏览器渲染和 js 执行公用一个线程,而且这里必须是单线程操作,多线程会产生渲染 DOM 冲突.等 script 标签完成后,浏览器会继续渲染.这也可以解释为什么 js 放在 html 底部,JS 放在底部可以保证让浏览器优先渲染完现有的 HTML 内容，让用户先看到内容，体验好。另外，JS 执行如果涉及 DOM 操作，得等待 DOM 解析完成才行，JS 放在底部执行时，HTML 肯定都解析成了 DOM 结构。JS 如果放在 HTML 顶部，JS 执行的时候 HTML 还没来得及转换为 DOM 结构，可能会报错。

跨域

跨域是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器施加的安全限制.同源是指域名协议端口均相同.同源策略主要用来防止 CSRF 攻击
解决方案:

1. JSONP:JSONP = json + padding 填充式 json 利用的是动态创建 script 标签，向服务器请求 json 数据，服务器收到请求后，服务器将传回来的数据放在指定名字的回调函数中传回来，这样就可以实现跨域访问。简单实用，老旧浏览器都适用
2. 配置 nginx 代理
3. CORS:服务端设置 Access-Control-Allow-Origin 就可以开启 CORS。 该属性表示哪些域名可以访问资源，如果设置通配符则表示所有网站都可以访问资源。

BFC

BFC（Block Formatting Context）直译为“块级格式化上下文”，是用于布局块级盒子的一块渲染区域。它规定了内部的块级如何布局，并且与这个区域外部毫不相干。简单的概括为：所谓的 BFC 就是 CSS 布局的一个概念，是一块区域，一个环境。
通俗的来讲 BFC 就是创建了一个独立黑盒子，这个黑盒子与外部没有关系，内外不能互相影响。

创建一个 BFC 有以下几种方式

• 根元素
• overflow 值非 visible
• 使用绝对定位和固定定位 absolute，fixed
• 使用 float
• display 为 inline-block，table-cell，flex，inline-flex
• 现在可以使用 display 的 flow-root 属性来创建 BFC

BFC 布局的规则

• 创建 BFC 元素的内部的 box 会垂直排列
• 计算 BFC 高度的时候，浮动元素也会算在内
• BFC 内部相邻的 box 的垂直外边距会合并
• BFC 就是页面上一个独立的容器，内部是不会影响外部的元素，反之亦然

BFC 的使用

• 首先它可以用在避免外边距合并上，应为 BFC 是独立的容器，所以可以给某个元素外面包裹一个 BFC，这样就可以避免外边距合并
• 清除浮动，因为使用 overflow 的 hidden，auto 时，可以创建一个 BFC，而 BFC 计算本身容器高度的时候是将浮动元素也是计算在内的，所以，这个时候就可以避免浮动引起的高度塌陷，从而清除浮动
• 避免文字环绕。可以为元素显示的利用 overflow 将其变为 bfc，这样就变为一个独立的容器，这样就不会出现文字环绕

清除浮动

第一种 父元素指定固定高度

高度已知，手动撑开浮动元素的包含框

第二种 结尾增加空的 div，然后对其使用 clear：both

让父级 div 自动获取高度

第三种 父级 div 使用伪类 after，zoom（IE）

使用 clear：both
和第二种效果一样，但是 IE8 以下不支持 after 伪类，代替他的是，zoom=1

第四种 父级使用 overflow：hidden

原理是超出元素区域将进行裁剪，虽然浮动元素脱离文档流，但是他和普通流组成了一个立体流，所以使用 overflow 时，要确定内容区域高度，就会将浮动元素也算进来

第五种 父级定义 overflow：auto

原理和使用 hidden 一样，但是这个会出现滚动条

第六种 父级 div 跟着一起浮动

这样浮动元素就自成一派，称为一个整体

第七种 将父级元素 display 为 table，变成表格

第八种 结尾使用 br。让其 clear：both