📄 前端知识清单（持续更新）

1.DOCTYPE的作用

DOCTYPE 是document type (文档类型) 的缩写。声明位于文档的最前面，处于标签之前，它不是html标签。主要作用是告诉浏览器的解析器使用哪种HTML规范或者XHTML规范来解析页面。

2.删除会发生什么？

在W3C标准出来之前，不同的浏览器对页面渲染有不同的标准，产生了一定的差异。这种渲染方式叫做混杂模式。在W3C标准出来之后，浏览器对页面的渲染有了统一的标准，这种渲染方式叫做标准模式。不存在或者形式不正确会导致HTML或XHTML文档以混杂模式呈现，就是把如何渲染html页面的权利交给了浏览器，有多少种浏览器就有多少种展示方式。因此要提高浏览器兼容性就必须重视。

3.严格模式和混杂模式

严格模式和混杂模式都是浏览器的呈现模式，浏览器究竟使用混杂模式还是严格模式呈现页面与网页中的DTD（文件类型定义）有关，DTD里面包含了文档的规则。比如：loose.dtd。

严格模式：又称标准模式，是指浏览器按照W3C标准来解析代码，呈现页面。

混杂模式：又称为怪异模式或者兼容模式，是指浏览器按照自己的方式来解析代码，使用一种比较宽松的向后兼容的方式来显示页面。

五大常见浏览器介绍：

• IE （edge）（Trident）(blink)
• 火狐（firefox）（Gecko）
• 谷歌（chrome）（blink）
• 苹果（safari）（webkit）
• 欧朋（Opera）（blink 早期：presto ）

一些特殊的符号，我们再 html 里面很难或者不方便直接 使用，我们此时可以使用下面的替代代码。

• link 是 HTML 标签，@import 是css提供的一种引入方式。
• link 引入的样式页面加载时同时加载，@import引入的样式需等页面加载完成后再加载。
• link 没有兼容性问题，@import 不兼容ie5以下。
• link 可以通过 js 操作 DOM 动态引入样式表改变样式，而 @import 不可以。

HTML5新增了哪些标签？

html5是html的最新版本，是14年由w3c完成标准制定。增强了，浏览器的原生功能，减少浏览器插件（eg：flash）的应用，提高用户体验满意度，让开发更加方便。

article、aside、audio、bdi、canvas、command、datalist、details、embed、figcaption、figure、footer、header、hgroup、keygen、mark、meter、nav、output、progress、rp、rt、ruby、section、source、summary、time、track、video。

其中常用的标签有：

• article
• aside
• audio
• video
• canvas
• footer
• header
• nav
• section

1.属性lang是英语language的缩写，意思是语言，”en”代表英语，”zh-CN”代表中文；

2.其实不写lang属性，整个HTML文档的显示是没有任何问题的；

3.我们都知道，如果你在中国，本地浏览器的默认语言是中文，当我们打开一个外国网站时，浏览器会提示”是否将网页内容翻译成中文”；

4.登录几个中国的本土网站，发现源码中并没有写lang属性，也没有翻译的提示；

5.搜索引擎首先自己无法判断自己抓取的页面中的内容是什么语言，因为在它看来都是二进制文件，那么这时就需要我们告诉它这个页面中的内容是什么语言，进而它才能知道下一步该干嘛，也就是说，当你把lang设置为”en”时，无论你网页中是什么语言的内容，在它看来都是英语，如果本地浏览器的默认语言不是英语，就会提示上面的选项，问您是否需要翻译；

CSS有三个非常重要的三个特性：层叠性、继承性、优先级

① 层叠性

相同选择器给设置相同的样式，此时一个样式就会覆盖(层叠) 另一个冲突的样式, 层叠行主要解决冲突的问题；

层叠性原则：

样式冲突, 遵循的原则就是就近原则, 哪个样式离结构进, 就执行哪个样式 样式不冲突, 不会层叠；

② 继承性

CSS中的继承：子标签会继承父标签的某些样式, 如文本颜色和字号。

恰当地使用继承可以简化代码，降低CSS样式的复杂性 子元素可以继承父元素的样式( text- ,font- , line- 这些元素的开头可以继承,以及color属性)

③ 优先级

!important>内联>id>class>标签>*

① display：none;

② visibility:hidden;

③ overflow:hidden;

④ position：absolute;top:-999px;

⑤ opacity:0;

因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。

最简单的初始化方法就是： * {padding: 0; margin: 0;} 。

① 行内元素会在一条直线上排列（默认宽度只与内容有关），都是同一行的，水平方向排列。

② 块级元素各占据一行（默认宽度是它本身父容器的100%（和父元素的宽度一致），与内容无关），垂直方向排列。块级元素从新行开始，结束接着一个断行。

③ 块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素，只能包含文本或者其它行内元素。

④ 行内元素与块级元素属性的不同，主要是盒模型属性上：行内元素设置width无效，height无效(可以设置line-height)，padding左右有效 ，但是由于设置padding上下不占页面空间，无法显示效果，所以无效。

① 父级div定义height。

② 结尾处加空div标签clear:both。

③ 父级div定义伪类:after和zoom。

④ 父级div定义overflow:hidden。

⑤ 父级div定义overflow:auto。

⑥ 父级div也浮动，需要定义宽度。

⑦ 父级div定义display:table。

⑧ 结尾处加br标签clear:both。

比较好的方式是第三种。

① block:此元素将显示为块级元素，此元素前后会带有换行符。

② none:此元素不会被显示。

③ inline:行内元素类型。默认宽度为内容宽度，不可设置宽高，同行显示。

④ inline-block:行内块元素，默认宽度为内容宽度，可以设置宽高，同行显示。

⑤ list-item:此元素会作为列表显示。

⑥ table: 此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。

⑦ inherit:规定应该从父元素继承 display 属性的值。

• JavaScript事件代理则是一种简单的技巧，通过它你可以把事件处理器添加到一个父级元素上，这样就避免了把事件处理器添加到多个子级元素上。

• 当我们需要对很多元素添加事件的时候，可以通过将事件添加到它们的父节点而将事件委托给父节点来触发处理函数。这主要得益于浏览器的事件冒泡机制。

有六种可能:

number,string,boolean,undefined,function,object

基本数据类型（7个）：

boolean、null、undefined、number、string、symbol(ES5)、BigInt(ES10)

引用数据类型（3个）：

Object、Array、Function

什么是内存泄漏？

内存泄露是指一块被分配的内存既不能使用，又不能回收，直到浏览器进程结束。在C++中，因为是手动管理内存，内存泄露是经常出现的事情。而现在流行的C#和Java等语言采用了自动垃圾回收方法管理内存，正常使用的情况下几乎不会发生内存泄露。浏览器中也是采用自动垃圾回收方法管理内存，但由于浏览器垃圾回收方法有bug，会产生内存泄露。

JS的回收机制

JavaScript垃圾回收的机制很简单：找出不再使用的变量，然后释放掉其占用的内存，但是这个过程不是实时的，因为其开销比较大，所以垃圾回收系统（GC）会按照固定的时间间隔,周期性的执行。

到底哪个变量是没有用的？所以垃圾收集器必须跟踪到底哪个变量没用，对于不再有用的变量打上标记，以备将来收回其内存。用于标记的无用变量的策略可能因实现而有所区别，通常情况下有两种实现方式：标记清除和引用计数。引用计数不太常用，标记清除较为常用。

标记清除

js中最常用的垃圾回收方式就是标记清除。当变量进入环境时，例如，在函数中声明一个变量，就将这个变量标记为“进入环境”。从逻辑上讲，永远不能释放进入环境的变量所占用的内存，因为只要执行流进入相应的环境，就可能会用到它们。而当变量离开环境时，则将其标记为“离开环境”。

function test(){
  var a = 10; //被标记，进入环境
  var b = 20; //被标记，进入环境
}
test(); //执行完毕之后a、b又被标记离开环境，被回收

引用计数

引用计数的含义是跟踪记录每个值被引用的次数。当声明了一个变量并将一个引用类型值（function object array）赋给该变量时，则这个值的引用次数就是1。如果同一个值又被赋给另一个变量，则该值的引用次数加1。相反，如果包含对这个值引用的变量又取得了另外一个值，则这个值的引用次数减1。当这个值的引用次数变成0时，则说明没有办法再访问这个值了，因而就可以将其占用的内存空间回收回来。这样，当垃圾回收器下次再运行时，它就会释放那些引用次数为0的值所占用的内存。

function test(){
  var a = {}; // a的引用次数为0
  var b = a; // a的引用次数加1，为1
  var c = a; // a的引用次数加1，为2
  var b = {}; // a的引用次数减1，为1
}

哪些操作会造成内存泄露？

① 内存泄漏指任何对象在您不再拥有或需要它之后仍然存在。

② 垃圾回收器定期扫描对象，并计算引用了每个对象的其他对象的数量。如果一个对象的引用数量为 0（没有其他对象引用过该对象），或对该对象的惟一引用是循环的，那么该对象的内存即可回收。

③ setTimeout 的第一个参数使用字符串而非函数的话，会引发内存泄漏。

④ 闭包、控制台日志、循环（在两个对象彼此引用且彼此保留时，就会产生一个循环）。

怎样避免内存泄露？

① 减少不必要的全局变量，或者生命周期较长的对象，及时对无用的数据进行垃圾回收；

② 注意程序逻辑，避免“死循环”之类的 ；

③ 避免创建过多的对象 原则：不用了的东西要及时归还。

• 一个程序至少有一个进程,一个进程至少有一个线程。线程的划分尺度小于进程，使得多线程程序的并发性高。
• 进程在执行过程中拥有独立的内存单元，而多个线程共享内存，从而极大地提高了程序的运行效率。
• 线程在执行过程中与进程还是有区别的。每个独立的线程有一个程序运行的入口、顺序执行序列和程序的出口。但是线程不能够独立执行，必须依存在应用程序中，由应用程序提供多个线程执行控制。
• 从逻辑角度来看，多线程的意义在于一个应用程序中，有多个执行部分可以同时执行。但操作系统并没有将多个线程看做多个独立的应用，来实现进程的调度和管理以及资源分配。这就是进程和线程的重要区别。

推荐文章：

• 进程与线程的一个简单解释-阮一峰
• 前端必知必会之 JS 单线程与异步

① apply() 函数有两个参数：第一个参数是上下文，第二个参数是参数组成的数组。如果上下文是null，则使用全局对象代替。

如：function.apply(this,[1,2,3]);

② call() 的第一个参数是上下文，后续是实例传入的参数序列。

如：function.call(this,1,2,3);

http(Hypertext transfer protocol)超文本传输协议，是一个基于请求与响应，无状态的，应用层的协议，常基于TCP/IP协议传输数据，互联网上应用最为广泛的一种网络协议,所有的WWW文件都必须遵守这个标准。设计HTTP的初衷是为了提供一种发布和接收HTML页面的方法。

超文本

文本比较好理解就是字符串嘛，在计算机刚刚发明的时代网络通信传输的就只是字符串，后面随着技术的发展我们不满足仅限字符串的传输通信，还涉及到 图片、音视频、排版（CSS）、交互行为（JS）等资源的传输。之前传输的文本逐渐丰富起来，这个时候文本的语义就扩大了，我们把语义扩大后的文本称为超文本（Hypertext）。

传输

把上面提到过的超文本解析成二进制的数据包，通过传输载体比如网线等从一台设备传输到另一台设备的过程叫做传输。

协议

计算机之间相互通信需要遵守一定的规则，规则中定义了请求端如何传递参数，响应端如何解析数据，这个就是网络协议。 现在我们知道了 http（超文本传输协议）就是在多台网络设备之间传输 文字、图片、音视频 等超文本内容的具体规范和约定。 网络协议除了http之外，常见的还有 电子邮件传输协议 SMTP、文件上传协议 FTP、域名解析协议 DNS 。

发展历史：

http的特点

• 灵活可扩展，主要体现在两个方面。一个是语义上的自由，只规定了基本格式，比如空格分隔单词，换行分隔字段，其他的各个部分都没有严格的语法限制。另一个是传输形式的多样性，不仅仅可以传输文本，还能传输图片、视频等任意数据，非常方便。

• 可靠传输，HTTP 基于 TCP/IP，因此把这一特性继承了下来。这属于 TCP 的特性，不具体介绍了。

• 请求-应答，也就是一发一收、有来有回， 当然这个请求方和应答方不单单指客户端和服务器之间，如果某台服务器作为代理来连接后端的服务端，那么这台服务器也会扮演请求方的角色。

• 无状态，这里的状态是指通信过程的上下文信息，而每次 http 请求都是独立、无关的，默认不需要保留状态信息。

http的缺点

① 无状态

所谓的优点和缺点还是要分场景来看的，对于 HTTP 而言，最具争议的地方在于它的无状态。在需要长连接的场景中，需要保存大量的上下文信息，以免传输大量重复的信息，那么这时候无状态就是 http 的缺点了。但与此同时，另外一些应用仅仅只是为了获取一些数据，不需要保存连接上下文信息，无状态反而减少了网络开销，成为了 http 的优点。

② 明文传输

即协议里的报文(主要指的是头部)不使用二进制数据，而是文本形式。这当然对于调试提供了便利，但同时也让 HTTP 的报文信息暴露给了外界，给攻击者也提供了便利。WIFI陷阱就是利用 HTTP 明文传输的缺点，诱导你连上热点，然后疯狂抓你所有的流量，从而拿到你的敏感信息。

③ 队头阻塞问题

• 其根本原因在于HTTP是基于 请求-响应 的模型，在同一个TCP长连接中，前一个请求没有得到响应，后面的请求就会被阻塞。

• 用并发连接 和 域名分片 来解决了这个问题。但并不是从HTTP本身的层面来解决的，只是增加了 TCP 连接，分摊风险而已。

• HTTP/2中的多路复用从HTTP本身的层面解决了这个问题

• 和TCP队头阻塞的区别：TCP传输的单位是数据包，它的队头阻塞表示的是前一个报文没有收到便不会将下一个报文上传给HTTP。而HTTP队头阻塞是在 请求-响应 层面，前一个请求还没有处理完，后面的请求就被阻塞。

HTTP 是明文传输，很容易被攻击者窃取重要信息，鉴于此，HTTPS 应运而生。HTTPS 的全称为 （Hyper Text Transfer Protocol over SecureSocket Layer），HTTPS 和 HTTP 有很大的不同在于 HTTPS 是以安全为目标的 HTTP 通道，在 HTTP 的基础上通过传输加密和身份认证保证了传输过程的安全性。HTTPS 在 HTTP 的基础上增加了 SSL 层，也就是说 HTTPS = HTTP + SSL。

什么是报文？

报文就是HTTP协议交互中传递的信息，就是一堆参数和声明，报文本身是多行结构的字符串文本，客户端发送给服务端的叫请求报文，服务端下发给客户端的叫响应报文。报文由四部分组成分别是 起始行、头部字段、空行、主体，在请求报文中起始行又叫请求行，在响应报文中起始行又叫状态行。

请求报文

请求报文由四部分构成分别是 请求行、头部字段、空行、主体，其中 请求行、头部字段 合起来就是我们常说的请求头(Req Header)，http协议规定每次请求必须发送请求头，请求主体(body)则可有可无，而空行就是用来分割请求头和请求体的。

• 请求行 说明了本次请求要做什么，在请求行中定义了请求方法、请求地址、HTTP版本。

• 头部字段 头部字段以 key-value 的形式存在，最后以换行结束。头部字段是可扩展的，可以自定义新的字段名称，名称大小写均可，通常情况下只大写首字母。如果定义了重复的字段名称只会保留一个，值会被后面的覆盖。HTTP协议并没有对头部字段的整体长度做限制，但是在服务端实践中长度超过某一个额定值4K或8K处于安全考虑会主动抛出一个错误。 头部字段的标头分为四种分别是 通用标头、请求标头、响应标头 和 实体标头，这个先放在后面讲。

• 空行 分割请求头和请求体，告诉服务端下面的内容是请求体。

• 主体（报文实体） 就是具体的数据了，也就是body部分，请求报文对应请求体。

响应报文

响应报文由四部分组成分别是 状态行、头部字段、空行、主体，其中 状态行、头部字段 合起来就是响应头(Res Header)。

• 状态行 状态行说明本次请求的结果是什么，在状态行中定义了 HTTP版本、状态码、以及“短语消息”，短语消息为状态码提供了文本形式的解释，状态码和短语消息是一一对应的，比如状态码200就对应着OK。

• 头部字段 参考请求报文的头部字段

• 空行 分割响应头和响应体，告诉客户端下面的内容是响应体。

• 主体（报文实体） 就是具体的数据了，也就是body部分，响应报文对应响应体

头部字段

头部字段分为以下五类，分别是 通用头部、请求头部、响应头部、实体头部、扩展头部。

• 通用头部： 在请求头和响应头中都适用，比如 Content-Type 字段。

• 请求头部： 只能出现在请求报文中，如 Origin 字段。

• 响应头部： 只能出现在响应报文中，如 Server 字段。

• 实体头部： 用来描述报文主体的头部字段，比如 Content-Length 字段，要注意的是请求和响应报文中都有可能包含实体部分，所以这两种类型的报文都有可能出现实体头部。

• 扩展头部： 并非规定的标准头部字段，是开发者自行定义的头部字段。

http/1.1规定了以下请求方法(注意，都是大写):

RFC 规定 HTTP 的状态码为三位数，被分为五类:

• 1xx: 信息型，服务器收到请求，需要请求者继续操作。
• 2xx: 表示成功状态。
• 3xx: 重定向状态，资源位置发生变动，需要重新请求。
• 4xx: 客户端出现错误。
• 5xx: 服务器端出现错误。

常见状态码：

• 101 Switching Protocols。在HTTP升级为WebSocket的时候，如果服务器同意变更，就会发送状态码 101。
• 200 OK：请求成功，通常返回的数据中带有响应体。
• 204 No Content：意思和200一样，不过返回的数据中不带有响应体。
• 206 Partial Content：客户端进行了范围请求且服务端正常处理，响应报文的首部应该还有Content-Range字段指定实体的范围。使用场景为HTTP分块下载和断点续传。
• 301 Moved Permanently：永久重定向，最新的URI为响应报文首部的 Location 字段。场景是：例如你的网站换了地址了，之前的地址不用了，若用户还是从之前的地址进的话则会返回301且在Location中带上最新的URI。且浏览器默认会做缓存优化，减少服务器压力，在第二次访问的时候自动访问重定向的那个地址。
• 302 Found：临时重定向，和301不同，它表示请求的资源临时被移动到了别的URI上，因为是暂时的，所以不会被缓存。
• 303 See Other：临时重定向，请求的资源临时被移动到了别的URI上，但是明确表示客户端应该使用GET方法获取资源。
• 304 Not Modefied：客户端带条件请求时虽未满足条件但是也允许返回该资源，它虽然被划分在3xx中，但其实和重定向没有关系。场景例如：协商缓存成功就会返回304，表示请求的资源在服务器上并未发送改变，告诉请求者可以使用缓存。
• 307 Temprary Redirect：临时重定向，但是比302更加明确，重定向的请求方法和实体都不允许变动。场景例如：HSTS协议，强制客户端使用https建立连接，比如你的网站从HTTP升级到了HTTPS，而你还是通过http://xxx访问的话，就会返回307。(可以试一下http:www.baidu.com)
• 400 Bad Request：请求报文中存在语法错误，但是没有具体指出是哪里。
• 401 Unauthorized：需要有通过HTTP认证的认证信息或者表示用户认证失败。
• 403 Forbidden：请求资源被拒绝，原因是：比如法律禁止、信息敏感。
• 404 Not Found：请求资源未找到，表示没在服务器上找到相应的资源。
• 405 Method Not Allowed：请求方法不被服务器端允许，并且会把所有支持的方法写入响应报文首部字段Allow中返回。
• 408 Request Timeout: 服务器等待了太长时间。
• 409 Conflict: 多个请求发生了冲突。
• 413 Request Entity Too Large: 请求体的数据过大。
• 500 Internal Server Error：服务器内部错误，但是没有具体指出是哪里，和400有点像。
• 501 Not Implemented：表示客户端请求的功能还不支持。
• 502 Bad GateWay：服务器自身是正常的，但是代理服务器无法获取到合法响应(点外卖时外卖小哥没送)
• 503 Service Unavailable: 表示服务器当前很忙，暂时无法响应服务。

• 从缓存的角度，GET 请求会被浏览器主动缓存下来，留下历史记录，而 POST 默认不会。
• 从编码的角度，GET 只能进行 URL 编码，只能接收 ASCII 字符，而 POST 没有限制。
• 从参数的角度，GET 一般放在 URL 中，因此不安全，POST 放在请求体中，更适合传输敏感信息，GET 请求在 URL 中传送的参数是有长度限制的，而 POST 没有。
• 从幂等性的角度，GET是幂等的，而POST不是。(幂等表示执行相同的操作，结果也是相同的)
• 从TCP的角度，GET 请求会把请求报文一次性发出去，而 POST 会分为两个 TCP 数据包，首先发 header 部分，如果服务器响应 100(continue)， 然后发 body 部分。(火狐浏览器除外，它的 POST 请求只发一个 TCP 包)

总体来说分为以下几个过程：

• 输入地址。
• DNS解析。
• TCP连接。
• 发送http请求。
• 返回http响应。
• 浏览器解析渲染页面。
• 断开连接。

一、输入地址：

当我们在浏览器输入地址的时候，浏览器已经在只能匹配到可能得到的url了，他会从历史记录，书签等地方，找到已经输入的字符串可能对应的 url，然后给出智能提示，让你可以补全url地址。

二、DNS解析：

DNS解析的过程就是寻找哪台机器上有你需要资源的过程。当你在浏览器中输入一个地址时，例如www.baidu.com，其实不是百度网站真正意义上的地址。互联网上每一台计算机的唯一标识是它的IP地址，但是IP地址并不方便记忆。用户更喜欢用方便记忆的网址去寻找互联网上的其它计算机，也就是上面提到的百度的网址。所以互联网设计者需要在用户的方便性与可用性方面做一个权衡，这个权衡就是一个网址到IP地址的转换，这个过程就是DNS解析。

解析过程：

1. 查找浏览器缓存：因为浏览器一般会缓存DNS记录一段时间，不同浏览器的时间可能不一样，一般2-30分钟不等，浏览器去查找这些缓存，如果有缓存，直接返回IP，否则下一步。
2. 查找系统缓存：浏览器缓存中找不到IP之后，浏览器会查看本地硬盘的 hosts 文件，看看其中有没有和这个域名对应的规则，如果有的话就直接使用 hosts 文件里面的 ip 地址。
3. 如果在本地的 hosts 文件没有能够找到对应的 ip 地址，浏览器会发出一个 DNS请求到本地DNS服务器 。
4. 查询你输入的网址的DNS请求到达本地DNS服务器之后，本地DNS服务器会首先查询它的缓存记录，如果缓存中有此条记录，就可以直接返回结果，此过程是递归的方式进行查询。如果没有，本地DNS服务器还要向DNS根服务器进行查询。
5. 根DNS服务器没有记录具体的域名和IP地址的对应关系，而是告诉本地DNS服务器，你可以到域服务器上去继续查询，并给出域服务器的地址。这种过程是迭代的过程。
6. 本地DNS服务器继续向域服务器发出请求，在这个例子中，请求的对象是.com域服务器。.com域服务器收到请求之后，也不会直接返回域名和IP地址的对应关系，而是告诉本地DNS服务器，你的域名的解析服务器的地址。
7. 最后，本地DNS服务器向域名的解析服务器发出请求，这时就能收到一个域名和IP地址对应关系，本地DNS服务器不仅要把IP地址返回给用户电脑，还要把这个对应关系保存在缓存中，以备下次别的用户查询时，可以直接返回结果，加快网络访问。

三、TCP连接：

主机浏览器通过DNS解析得到了目标服务器的IP地址后，与服务器建立TCP连接。

TCP三次握手：

• 第一次握手：客户端将标志位SYN置为1,随机产生一个值为seq=J（J的取值范围为=1234567）的数据包到服务器，客户端进入SYN_SENT状态，等待服务端确认；

• 第二次握手：服务端收到数据包后由标志位SYN=1知道客户端请求建立连接，服务端将标志位SYN和ACK都置为1，ack=J+1，随机产生一个值seq=K，并将该数据包发送给客户端以确认连接请求，服务端进入SYN_RCVD状态。

• 第三次握手：客户端收到确认后，检查ack是否为J+1，ACK是否为1，如果正确则将标志位ACK置为1，ack=K+1，并将该数据包发送给服务端，服务端检查ack是否为K+1，ACK是否为1，如果正确则连接建立成功，完成三次握手，随后客户端A与服务端B之间可以开始传输数据了。

为什么需要三次握手：

三次握手的目的是“为了防止已失效的连接请求报文段突然又传送到了服务端，因而产生错误。

四、发送http请求：

建立了TCP连接之后，发起一个http请求。一个典型的 http request header 一般需要包括请求的方法，例如 GET 或者 POST 等，不常用的还有 PUT 和 DELETE 、HEAD、OPTION以及 TRACE 方法。

五、返回http响应：

服务器接受并处理完请求，返回 HTTP 响应，一个响应报文格式基本等同于请求报文，由响应行、响应头、空行、实体组成。

六、浏览器解析渲染页面：

浏览器是一个边解析边渲染的过程。首先浏览器解析HTML文件构建DOM树，然后解析CSS文件构建渲染树，等到渲染树构建完成后，浏览器开始布局渲染树并将其绘制到屏幕上。这个过程比较复杂，涉及到两个概念: reflow(回流)和repain(重绘)。DOM节点中的各个元素都是以盒模型的形式存在，这些都需要浏览器去计算其位置和大小等，这个过程称为relow;当盒模型的位置,大小以及其他属性，如颜色,字体,等确定下来之后，浏览器便开始绘制内容，这个过程称为repain。页面在首次加载时必然会经历reflow和repain。reflow和repain过程是非常消耗性能的，尤其是在移动设备上，它会破坏用户体验，有时会造成页面卡顿。所以我们应该尽可能少的减少reflow和repain。

七、断开连接：

TCP四次挥手：

• 第一次挥手：Client发送一个FIN，用来关闭Client到Server的数据传送，Client进入FIN_WAIT_1状态。

• 第二次挥手：Server收到FIN后，发送一个ACK给Client，确认序号为收到序号+1（与SYN相同，一个FIN占用一个序号），Server进入CLOSE_WAIT状态。

• 第三次挥手：Server发送一个FIN，用来关闭Server到Client的数据传送，Server进入LAST_ACK状态。

• 第四次挥手：Client收到FIN后，Client进入TIME_WAIT状态，接着发送一个ACK给Server，确认序号为收到序号+1，Server进入CLOSED状态，完成四次挥手。