「一道面试题」输入URL到渲染全面梳理下-总结篇

要知道

此文是一道面试题，又不仅仅是一道面试题，你会发现，这题不论大厂小厂，都会问，为什么

由于它满意经典，接连写了三篇帖子，每篇都上万字，依然感觉不行细，涉及的点真的很检测一个人的常识覆盖率，仍是多方面的检测，假如让我来面试的话，我觉得v : J彻底能够经过这一道题挖掘出面试N ( S f者的基础常识储备量，延展性更是超强

SO，答好它能够让面试官眼前一亮，让你与众不同

此文是总结篇，没有看过前两篇的小伙伴建议先看看，然后自己总结总结，再来看这篇，由于前两文是为了能够看懂此文才写的

「一道面试题」输入URL到烘托全面梳理上-网络通讯篇

「一道面试题」输入URL到烘托全面梳理中-页面烘托篇

假如你都看过了，那就来一块总结吧，首要，还请为我的张狂码字点个赞再/ ` q r j z i看哦，最近打字速度都快了不少

回忆？

本来这块儿会简略回忆下前) q C l X两文常识点再进行总结的，还有一个思想导图，本来现已写的差不多了，大概有个1万字了，后来写着写着被+ P % V V D我删了大半从头写了

由于某天心血来潮，! k j i I / S W想把整篇文章/ ) . G l 2 / J P换成一面试的问答帖，写帖X * ( * M 6 {嘛，我比较喜欢 仔细且为所欲为 ，就删了重来了，所以此文才会慢了些

下文会以一个面试官和面试者问答的进程来描绘这些个问题，主体问题答完之{ _ E J t K C后还会有; ] j h f 8 3 a一些比较常见的主体发散的问题，最近得空看完了k G ] Q } n D 9电视剧 鬓边不是海棠红 ，R G a Z : &看的说话都有点被带跑偏了，用剧中 老北京腔 来说便是 得，您瞧好吧！ ，好了，调侃完毕，开端正派了，V h B 9 Z y . w干巴巴的万字小文来了，做m i N好预备哦

首要请带入你自己，你便是一个面试者，仔细看每道题，先静心想一会，然后在心中答复，终究再看总结的M F % ` u [ A答案 ( 此答案也不必定对，个人感悟，只给咱们做参考，也望咱们给予补充或纠正 )

问(主体)：输入URL到页面烘托都经历了什么？

个人觉得 ，不要急着答复，先考虑30秒，在% k } `心中形成一个大s G D I致进程的归纳，先归纳，然后再渐渐道来，留意节奏，中心也能够时刻短中止考虑，面试官不会由于你想了一会就 pass 掉你，相反，你直接脱口而出一堆内容，会让面试官觉得你像是背X y M `课文

关于主体问题，写了两种答复，觉得需求留意两点来选择性答复，至少我这么觉得

面试官的状况

大致判别^ ~ a面试官是一个什么样的人，留意面试官这个人的状况，这很重要，经过对面试官当时状况的判别来决议精简答复或是轰炸式答h T Z _ . d复，这儿的轰g K N 2 R A P炸式答复不是说越多越好，说的是咱们在答复的时分顺带牵出一些常识点来证明咱们{ = w的常识量，可是不论怎样答复6 ^ X – % i ! ;都要答复在点上，不要认为答得越多越好就扯一些有的没的，这大概便是察言观色吧

你的状况

你的状况就比较简略了解了，假如你对一些常识点把握不可靠或有些紧张，这个时分就不要死撑还争夺答复的八面玲珑了 (面试官面前不太i 9 f ! ^懂硬装做什么都懂z E ] } L _ k，简略引起少许恶感)，尽量精简，把你熟的当地多说一点，这样能够对面试官进行一个暗~ . ]示引导，b { s然后等候让面试官发散问你，一般你哪里说的多，面试官就会往哪个方向发散，假如你满意自信，那L ? g d C D就纵情说好了，不在意他的发散，只需不说没用的就，G U 4 k绝大多数面试官关于这种状况应该都会喜欢

一本正派的轰炸式答复

面试官你好，这个问题是一个经典问题，我业余时刻也有仔细阅读过一些相关书本? t =，做过一些总结，由? / q F于涉及到的常识点许多，所以或许会花一些时刻，假如中心您有什么问题或许我的答复c ~ H ~ u f有不正确，还请您随时打断我，为我指出过错，谢谢

我觉得从URL输入到页面烘托大体上能够分为网络通讯 和 页面烘托 两个阶段

首要是网络通讯阶段，在互联网中网络设备之间的通讯都会遵循A y B z TCP/IP四层协议，经过 TCP/IP 网络分层次序与对方进行通讯，分2 – 7层由高到低别离为：运用层、传输层、网络层、J 2 / Y m数据链路层，咱们浏览器输] } 8 U / v p _入URL也便是发送端会从 运用层 往下走，接纳端也便是服务器会从 数据链路层 往上走，一般咱们会用五层协议来[ = K i E / [ ? y解说，数7 u W据链路层这一层会分成物理层和数据链路层两层

浏览器输入URL

输入URL按下回车后，就进入了a ] ) P p r & 运用层 开端往下走，浏览器会开一个线程来处理Z 4 [ m ^ ~，先对URL进行解析，一般包括 ( 协议头、主机域名或IP地4 # e 5 Y ; p址、端口号、恳求路径、查询参数、hash等等 )，然后打开网络线e H d E 6程宣布一个完好的恳求

运用层DNS解析域名

这其间DNS解析，也便是 域名或IP解析 是由于咱们输入的URL一般都是一个域名，核算机不认识域名只知道IP，所以需求DNS解析经过域名查询得到对应IP，关于DNq x (S解析时

• 首要会查看浏览器DNS缓存
• 没有的话就查询核算机本地DNS缓存
• 还没有就询问递归式DNS服务器（便是网络供给商，一般这个服务器都会有自己的缓存，所以IP查L w R询大多都在这儿完结）
• 假如依然没有缓存，那就需求经过 根域名服务器 和 TLD域名服务器 再到对应的 威望DNS服务器 找记载，并缓存到 递归式服务器，然后 递归服务器 再将记载回来给本地

运用层客户端发送HTTP恳求

IP地址有了，运用层的客户端想看页面，就会发一个 HTTP 恳求，HTTP 恳求分为 恳求u p % C C : y j报头 和 恳求主体 ，恳求主体便是客户端要发送给服务器或许服务器回来B j } K 9 ! d给客户端的内容，恳求报头比较重要，包括通讯办法也便是恳求办法 (POST / G– ! 6 T MET / INPUT / DELETE等)、URI、) z $协议版本号以及恳求头部办法（Accept、Cache-ContrT r ` g : k Tol…）

传输层TCP传输报文

运用层 发送了一个恳求后q m % n [ Q，为了传输便利，在 传输层 会把从 运用层 接纳到的数据 ( 便是那个HTE } U L Y A Z C ,TP恳求报文 ) 进行切割，并为每个报文编号后再m S $ r b & H s [转发给 网络层，编号便是便利服务器接纳时能准确地复原报文信息，这儿用到B { #了咱们y ^ c常说的 TCP协议

TCP协议 会经过 三次握手 确保传输的安全可靠，也能够这样说，客户端在 传输层 开端和服务器经过 三次握手 树立 TCP/IP 联接

所谓的 三次握手 ，便是发送端先发送一个带有 S| D N O d A 2 d |YN ( syncY , p S F ) Shronize ) 标志的数据包给接纳端，在必定的推迟时刻内等候接纳端的回复，接纳端收到数据包后p c N e *，传回一个带有 SYN / ACK 标志的数据包以表明传达承认信息，接纳方收到后再发送一个带有 ACK 标志的数据包4 5 | C C 3 N给接纳端以表明握手成功，在这个进程中，假如发送端在规则推迟时刻内没有收到回复则默许接纳方没有收到恳求，而再次发送，直到i / ` G } r [ ;收到回复为止

也便是上一文说的

• 小李 (客户端)：您好，您是xx的面试官吗？

• 面试官 (服b m ,务端)：嗯嗯，是的，你是昨日投简历的小李吗？

• 小李 (0 K m V .客户端)：嗯嗯，是的，我是

网络层IP协议查询MAC地址

树立联接后 网络层 IP协议会v N / B查询 MAC地址 进行数据包的传输

浅显来说，IP协议 担任把各种数据包传送给接纳方，由于要确保确} c 2 d实能传输到对方，所以需求确定接纳方的 MAC地址 也便是咱们说的物理地址，IP地址 能够和 MF G ? BAC地址 经过_ x u L 4 .映射表逐个配对上，一个网络设备# m n i $ g G的IP地址能够替换，可是MAC地址一般是固定不变的，而 IP 到 MAC 的解析进程则依赖于 ARP协议，它能够依据通讯方的 IP地址 反查出对应的 MAC地址

由于一般通讯两边是无法直接进行通讯的（除非在同一局域网G ~ h B J |），会经过多台核算机2 + 8 r 9 J或路由器来进行中转，所以也就需求 ARP 来一路承认下一个中转站，协助数据~ 5 ~ J . 1 K : 2包的传输

数据抵达数据链路层

找到对方的 MAC地0 l Y l i ! S址 后，就会将数据发送到 数据链路层传输，到此客户端发送恳求阶段就完毕了

服务器接纳数据

然后接纳端的服务器在 数据链路层 接纳到数据包，再经过相反的办法将数据一层一层的复原回 运用j _ S c : E v层 ，这进程中包括在运送层那里经过TCP协议将分段的数据包从头* 4 O H组成本来的HTTP恳求报文

恳求到了后台服务器，一般来说会有统一的验证，如安全验证、跨域验证等，验证未经过就直接回来相应的HTTP报文，验证经过后，就会进入后台代码，s E ( 6 ^ p此刻程序收到恳求，然后会履行对应的操作

假如浏览器~ b ` s ] # B c拜访过，且缓存上有对应的资源，就会与服务器终究修正时刻对比，共同便回来304，告知浏览器可运用本地缓存

服务器呼应恳求

服务器接纳到客户端发送的HTTP恳求后，! L 会查找客户端恳求的Y _ 4 | u + J ?资源，并回来呼应报文

另外现在许多网站都会有E t Q z 3 x 5 Q重定向功用，比方恳# r l U j 4 l o求域名省去了 www.，它会给你重定向来添加上，这也就意味着第一次恳求; O % L 3 [ 8 a HTML 的进程中咱们是需求建议两次恳求的

这样做的原因在于搜索引擎会认为 www.xxx.com 和 xxx.com 是两个网站，然后形成网站排名下降，还有假如两个地址都有打开过，会形成剩余 ( 双倍 ) 的浏览u f G器缓存

服务器回来相应文件

恳求成功后，服务器会回来相应的网页，浏览器接纳到m w W呼应成功的报文后便开端下载网页，至此，网络通讯完毕

解析HTML构建DOM Tree

拿到服务器回来的网页后，首要，依据顶部界说的DTD类型进行l k M E h对应的解析办法，网页的解析将会被交给内部的GUI烘托线程处理

烘托线程中的HTML解说器，将HTML网页和资源从字节省解说转换成字符流，再经过词法分析器将字符流解说成词，之后经过语法分析器依据词构建成节点，终究经过这些节点组建一个DOM树

这个进程中，假如遇到的节点是 JS 代码，就会调用 JS引擎 对 JS代码进行解说履行，此刻由于 JS引擎E 1 U o M 和 GUI烘托线程 的互斥，GUI烘托线程 就会被挂起，烘托进程中止，假如 JS 代码的运转中对DOM树进行了修正，那么o Y i 1 m J (DOM的构建n b : q需求从头开端

假如节点需求依赖其他资源，图片/CSS等等，就会调用网络模块的资源加载器来加载它们，它们是异步的，不0 B h & f n e z i会堵塞当时DOM树的构建

假如遇到的是 JS 资源URL（没有符号异步），则需求中止当时DOM的构建，直到 JS 的资源加载并被 JS引擎 履行后才持续构建DOM

解析CSS构建CSSOM Tree

CSS解说器会将CSS文件解说成内部表明结构，生成CSS规则树，这4 7 %个进程也是和DOM解析相似的，CSS 字节转换成字符，接着词法解析与法解析，终究构成 CSS对象模型(CSSOQ / e w pM) 的树结构

构建的进程中浏览器得递归 DOM 树来确定元素究竟是什么款式，为了 CS8 8 W ! ) PSOM 的完好性，只需等构建完毕才能进入到下一个阶段，所以就算 DOM 现已构建完了，也得等 CSSOM，然后才能进入下一个阶段

构建烘托树 (Render Tree)

接着 CSSOM 树和 DOM 树 合并成烘托树，也叫呈现树，烘托树 只包括烘托网页所需的节点，然后用于核算每个可见元素的布局，并输出给制作流程，将像素烘托到屏幕上

布局 (Layout)

烘托树 同时包括了屏幕上的一切可见内容及B d 3 2 5其款式信Q H = 1 _ B : `息，有了烘托J W J `树，再接着就会进入布局 ( layo~ 1 f / N I = vut ) 阶段了，到目前为止，浏览器核算了哪些节点应该d b = o是可见的以及它们的核算款式O = j，但还没有核算它们在设备视口内的切当方位和大小，这便是 布局 ( Layout ) 阶段，也称为 主动重排 或 回流 ( Reflow )

此阶段一般意味着元素的内容、结构、方位或尺寸发生z d ( 1 X了改动，需求从头核算款式和烘托树

制作 (Painting)

经由前几步咱们知道了哪些节点可见、它们的核算款式以及几许z Q , s . n B信息，将这些信息及烘托树中的每个节点转换成屏幕上的实践像素，也便是俗称的 制作 或 栅格化 阶段

组成(Composite)

终究一步组成( composite )，这一进程浏览器会将各层信息发送给GPU，GPU^ c r将各层组成，U m F 7 9 Z显现在屏幕上

至此上述的内容便是我了解的一个URL从解析到烘U n m ; U Y x 托的生命进程了

洁净简练的归纳式答复

PS：这儿大体的点我觉得仍是要答出来的，能够依据自己的了解进行某些方面的扩展，至少我觉得是这姿态的，也是个人了解，欢迎探讨

面试管你好，URL输入到页面烘托，这是一个经典的论题，涉及的常识点也许多，我依照我的O * Y D , K {个人了解给您简略归纳下，有不对的( V b X p w F – 8当地还请您指出T x N } :

首要，客户端浏览器输入URL，由所以域名，运用层DNS开端解析域名

接着，运用层客户端发送一个HTTP恳求，把拿到的运用层HTTP恳求报文数据切割编号，为了便利安全的传输，传输层会经过TCP三次握手树立TCP/IP链接

树立联接后 网络层 IP协议会查询服务器 MAC地址 也便是物理地址进行数据包的传输

找到对方的 MA. _ { oC地址 后，将数据发送到 数据链路层传输，到此客户端发送恳求阶段完毕

接纳端的服务器在) U ` u 7 数据链路层 接纳到数据 4 J = e y Q包，再经过相反的办法将数据一层一层的复原回 运用层

服务 C z J e V器接纳到客户端发送的HTW V ~ , n [ c 9TP恳求后，会查g A 4找客户端恳求的资源，并回来呼应报文

恳求成功后，服务器会回来相应的M b z网页，浏览器接纳到呼应成功的报文后便开端下载1 3 K ]网页，至此g + 5 M E r z Z，网络通讯完毕

浏览器拿到网页文件后，首要依据顶部界说的DTD类型进行对应解析办法，网页解析会交给内部GUI烘托线程处理

接着构建DOM树和CSSOM树，进程中，假如遇到节点是 JS ，就会调用 JS引擎 对 JS代码进行解说履C / k S * q行，此刻由于 JS引擎 和 GUI烘托线程 互斥，GUIQ O l烘托线程 会被挂起，烘托进程中止，假如 JS 代码的运转中对DOM树进行了修正，那q ? @ 么DOM构建要从头开端，然后DOM树和CSSOM树构建为烘托树

然后进入布局阶段，核算烘托树节点在设备视口内的切当方位和大小

再接着将烘托树中每个节点转} s v & d . & e 换成屏幕上的实践像素，也便是制作阶段

终究的组成阶段浏– I E , . t览器会将各层信息发送给GN [ QPU，GPU将各层组成，显现在屏幕上

问：TCP/I6 G }P四、五层，OSI七层模型有什么差异？

网络层次可划分为 四层因特网协议栈 和 七层因特网协议栈 ，起先网络分层是标准的七层，也便是咱们所说的 OSII e . ~ 1 - I 七层模型 ，参考模型是国际标准化组织 ISO 拟定的一个用于核算机或通讯体系间互联的标准体系，一般称为 OSI参考模型 或 七层模型

所谓的 TCP/IP 四层模型 和 TCP/IP 五层模型 是以 OSI 七层 优化而来，把某些层进h F K / _ 8 t行合并了，本质上仍是+ : L w 相同的，OSI七层模型 太过细化，有必定的参考含义，但完结起来比较繁琐，相M y ; ~ J v B n比较D . g % g e 2而言，TCP/IP模型 比较简练，具有较强的实践运用价值

TD ? ? ^ 5 } s |CP/IP 将核算机网络分成了四个层次，一般资料或教程里都是结合 OSI7层模+ T D o u型 和 TCP/IP4层模型，将核算机网络依照5层的模型来讲，5层模型仅仅为了便利介绍核算# s P K P Z L 1 *机网络原理而设计的，而在实践运用中仍是 TCP/IP四层模型

各层对应联系如下

问：e l ! J 2DNS解析可优化吗，为什么优化又怎样优化？

是否

能够优化

为什么

用户打开网站~ I 8 N ;的{ 3 ~ { D a 3整个流程中，DNS解析是第一环，当用户输入域名并敲回车后，体系调用 DNS客户端，寻找到用户配置或许主动分配的DNS I) D q ]P，之后就开端整个解析进程，DNS服务器 完结解析到此域名的 数字IP服务器，一般状况下回来给定域名对应的R R H 6 F MIP地址会花费 20~120毫秒 的时刻，而且在这个进程中浏览器什么都不会做直到DNS查询完毕

一旦解析完结，联接树立并坚持，也便是顺畅的拜S V c 2 ^ e N l 6访往后，网页往后的下载速度就和DNS没联系了，直到下一次从头解析和建~ n # E o 1 j E o议拜访恳求

许多小型网站，DNS解析时刻都挨近 0.5s，有些乃至需求 1s 左右才能够解析出成果，一般网站用户的等候时刻超越 8s 就会放弃拜访，而关于电子商务网站，4s 便是用户忍耐极限，而一般经过优化的小型网站，DNS解析时刻都& o [能够操控在 200ms 左右，而带宽在 100M 左右的网站，经过优化，DNS解析时刻能够操A I 1 y k控在 50~| ; B - & u100ms ，所以DNS优R ? a E化仍是很有必要的

怎样

DNS解析优化-善用缓存之TTL

DN. _ ZS存在着多级缓存，每次找这么多级，很定耗时刻，咱a B Q V ~们要尽量多的让用户1 k h M v : B直接从运营商的x 6 PDNS缓存中拿到解析记载，这样就不需求走根域名服务器以下的这些进程，天然就节省了一些时刻

购买域名做域名解析时，有一个 TTL 值，它指的是域名解析的生命周期 ( 秒为单位 )，简略来说它表明DNS服务器解析域名时记R ! a % 3载在DNS服务器上的缓存时刻，这个值的大小设置也是很有学问的，咱们要在尽或许快的状况. Z s下又要确保当服务器出问题时能够尽快切换

• 咱们自己必定清楚自己的服务器有没有多台或备L N B t份，若无备份，那服务器宕机时只能生抗，所以，TTL 时刻关于你来说是越长越好，由于b n z O TTL 短的意图是服务器发生问题时，能够及时切换，这个关于没有备份的网站根本利用不上，所以这– ( U W G H时你的 TTL 设置就越长越好，当然了，也不能太长，一般设置 TTL 3600 即可
• 若有E : ) !备份或多台服务器，会发生由于服务器宕机需求及时做切换，TV z 3 4 0 U * 4TL 时刻越短切换越及时，可是 TTL 时刻越短，也就意味着运营商DNS经常缓存不住，一般用户，设置为 TTL 600 即可，假如对及时切换，要求特别苛刻的网站，设置 TTL 120 就行

DNS解析优化-负载均衡

在DNS服务器中为同一个主机名配置多个IP地址D u U，在应对DNS查询时，DNS服务器对每个查询将以DNS文M Q r f O 8 K件中主机记载的IP地址按次序回来不同的解析成果，将b G I n客户端的拜访引导到不同的机器上去，使得不同的客户端拜访不同的服务器，然后达到负载均衡的意图，能够依据每台机器的负载量或该机器离用户地理方位的间隔v } 4 S N入手

就像咱们运用CDN厂商做域% s J C e ! (名解析，它也是利用DNS的重定向2 l c F _技能，DNS服务器会回来一个跟用户最挨近的点的IPY $ * @ 4 b A D 0地址给用户，CDN节点的服务器担任呼运用户的恳求，供给所需的内容a 1 ) V，CDN厂商的域名解U 3 –析服务器用户量多被拜访的次数也多，域名解析服务器的A记载根本上会被各地运营商的D9 U ; : Q iNS一向缓存着，所以服务效果也是最好的

问：TCP/IP协议与UDP协议优缺点及差异？

首要请留意，这标题自身便是一个坑

TCP/IP协议 是一个协议簇，它包括许多协议，5 Q A a A , e 4UDP协议 仅仅其间的一个，之所以命名为 TCP/IP协议，是由于TCP和IP协议是两个很重要的协议，就用它两命名了，仅此而已，SO，这个标题是不正确的，正确的问法应该是TCP协议和UDP8 @ K , A D )协议优缺点及差异

你或许会说有面试官这样问吗？甭说这抠字眼的题，还真有人由于忽略了这点被组织过

问：TCP协议和UDP协议优缺点及差异？

优缺点

TCP 的长处： 安稳可靠， 这体现在TCP传递数据之前，会有三次握手来树立联接，且在数据传递时，有承认、窗口、重传、拥塞操控机制，在数据传完后，还会断开联接用来节省一些体系资源

TCP的缺点：占用体系资源高，慢且效率低，TCP在传递数据之前，要先建联接，会耗费时刻，在数据传递时，承认机制、重传机制、拥塞操控机制等都会耗费很多的时刻，而且要在每台设备上保护一切的传输联接，每个联接都会占用体系的CPU、内存U e r H l等硬件资源

UDP 的长处： 快，UDP是一个无状况的传输协议，所以它在传递数据时非常快

UDP 的缺点： 不可靠，不f T ! w l 3 T –安稳，由于UDP没有TC) F 5 y ? r aP那些可靠的机制，在数据传递时，假如网络质量欠好，就会很简略丢包

一般当咱们对网络通讯质量有要求的时分，就应该运用TCP，要把整个数据准确无误2 Q r _ K &的传递给` L a L p V f对方，比方HTTP、HT{ @ ! T u !TPS、FTP等协议，当对网络通讯质量要求不高的时分，要求网络通讯速度能尽量的快，这时就能够运用UDP，如语音，视频等

差异

• TCP协议依据联接U: & z a h x W DP协议无联接

• TCP协议面向字节省，简略说TCP把数据当作一连串无结构的字节省而UDP协议面向报文

• TCP协议传送数据，无差错不丢掉不重复，且按序抵达，UDP不确保可靠交付和次序，或许丢包

• TCF # 7 QP首部开支20字节，UDP的首部开支较小，只需8个字节

• TCk I ) S T !P协议联接只能是点到点的，UDP支撑一对一，一对多，多对一和? P s { | O多对多的交互通讯

问：简略介绍下TCP三次握手四次挥手？

三次握手 ( 网图侵删 )

PS: 请仔细看图并合作, N )下面文字了解

开端时，双端处^ b u w于 CLF l lOSE (封闭状况)，服务端要供给服务，会主动监听某个端口，进入 LISTEN (监听状况)

客户端主动发送联接的SYN包，之后进入 SYN-SENT (同步已发送状况)

服务端在收到客户端发来的SYN包后，回复SYN/ACK包，之后进入 SYN-RCVD (同步收B P v 6 - J U到状况)

客户端收到服务端发来的SYN/ACK包后，承认对方后回复ACK包，并进入 ESTABLI 8 $ { M YSHED (已树立联接状况)

当服务( = 8 } v器收到客户端的承认后也进入 ESTABL1 e Y $ISHED (已树立联接状况) ，尔后两边就能够开端通讯了

四次挥手 ( 网图侵删 )

PS: 请仔细看图并合作下面文字了解

开端时双端还都处于 ESTABLISHED (已树立联接状况) 并传输数据，某一端能够主动建议 FIN 包预备断开联+ d L i P U # ! e接，上图为客户端建议 FIN 恳求，k f b在宣布FIN后，客户端进入 FIN-WAIT-1 (停止等候状况1)

服务端收到 FIN 音讯后，回复 ACK 表明知道了，并从ESTABLISH) b { N r a C l bED (已树立联接状况)进入 CLOSED-W9 Y N o f EAIT (封闭等候e ( M /状况)，开端做一些断开联接前的预备作业

客户端收到之前FIN的回复 ACK 音讯后，进入 FIN-WAIT-2 (停止等候状况2)，当服务端做好断开前的预备作业后，也会发送一个 FIN/ACK 的音讯給客户端，表明我也好了，恳求断开联接，并在发送音讯后，服务端进入 LAST-ACK (终究承认状况)

客户端在收到 FIN/ACK 音讯后，会立即回复 ACK ，表明知道了，并: S r +进入 TIME_WAIT ( 时刻等候状况)，为了安稳和安全考虑，客户端会在 TIMEA e L 8 y-WAIT ( 时刻等候状况) 等候 2MSL ( 最长报文段寿数 ) 的时长，终究进入 CLOSED ( 封闭状况 )

服务端收到客7 r J户端回复的 ACK 音讯后，直接从 LAST-ACK (终究承认状况) 状况进入 CLOSED (r U D U 3 封闭状况 )

四w Z ` 6 H次挥手之后，双端都进入 CLOSED ( 封闭状况 )，在此之后，双端正式断开了联接

PS: MSL ( Mad 8 ; 6 |ximum Se/ $ h ! 9 N fgment Lifetime ) 为 最长报文段寿数，它指的是任何报文在网络上存在的最长时刻，超越这个时刻报文将被丢掉，TCP允许不同的完结能够设置不同的 MSL 值

问：为什么树立联接是三次握手，封闭联接确是四次挥手？

树立联接的时分， 服务器在 LI- A # sSTEN (监听状况) ，收到树立联接恳求的 SYN 报文后，把 ACK 和 SYN 放在一个报文里发送给客户端就能够了

而封| 8 F ~ l 7 6 # ]闭联接时，服务器收到对方的 FI] 0 tN 报文时，仅代表对方不再发送数据了可是还能接[ e T / # J { / {纳数据，而自己未必全部数据都发送给对方了，所以自己能够立即封闭，也能够发送一些数据给对方后，再发送 FIN 报文给对方来表明同意现在封闭联接，因此，己方 ACK 和 FIN 一般都会分隔发8 W ` 8 G c送K o W : N 2 U t h，然后导致多了一次

问：为什么要三次握手创立链接，终究一次承认有必要吗？

防止现已失效的联接恳求报文忽然G B * F g又传送到了服务器，然后发生过错) – y

假如运用两次握手树立联接，h 8 ( w M + 3 4假如客户端发送了第一个恳求联接而且没有丢掉，仅仅由于在网络结点中停留的时刻太长了，由于 TCP 的客户端迟迟没有收到承认报文，认为服务器没有收到，此刻从头向服务器发送这条报文，然后客户端和服务器经过两次握手完结联接，传输数据后封闭联接，此刻之前停留的那一次恳求联接，网络通畅了抵达了服务器，这个报文本该是失效的，可: l l b t t m是，两次握手机制就会让客户端和服务器再次树立联接，会导致不必要的过错和资源的浪费

选用三次握手，就算是那一次失效K 0 f b S的报文传送过来了，服务端承受到了那条失效报文而且回复了承7 / H –认报文，可是客户端不t L @ $ T P ! :会再次宣布承认，由于服务器收不到承认，就会知道客户端并没有恳求联Z : G接

为什么不必* y j h四次握手就更简略了，三次就能够创q 2 A a m c 1 m &立安全无– * L K = Q l误的联接为什么用四次，那不是浪费资源A j z % 2 P u嘛

问：三次握手进程中} ) N s 能S B v ! ! a Y够带着数据吗？

第一次、第二次握手不能够带着数据，由于一握二握时还没有树立联接，会让服务器简略受到进犯

而第三次握手，此刻客户端现已处于5 M b ESTABLISHED (已树立联接状况) ，关于客户端来说，现已树立起联接了，而且2 c B B j g也现已知道服务器的接纳、发送才能是正常的了，所以能带着数据也是没问题的

问：四次挥手为什么客户端终究还要等候2MSY = V b 0 & ) y fL？

第一，确保客户端发送的终究f . 9一个 ACK 报文能+ K ! G + v够抵达服务器，由于这个 ACK 报文或许丢掉，站在服务器的视点J K 9 Q H ! 1看来，我现已发送了 FIN+ACK 报文恳i 5 &求断开了，客户端还没有给我回应，应该是我发送的恳求断开报文它没有收到，所以服务器又会从头发送一次，而客户端就能在这个 2MSL 时刻段内收到这个重传的报文，接着给出回应报文，而且会重启 2MSL 计时器

第二，比: O Q z M方上面提P ? *到了的 现已失效的联接恳T 5 K 4 $求报文段 呈现在联接中这种状况，客户端发送完终究一个承认报文后，在这个 2MSL 时刻中，就能够使本联接持续的时刻内所发生的一切报文段都从网络中消失，这样新联接V P s {中就不会呈现旧3 o z F ( 6 J [ ?联接的恳求报文

问：假如现已树立了联接，但客户端忽然毛病怎么办？

TCP 还设有一个保活计时器，客户端假如呈现毛病，服3 l $ 4 K G ! $务器总不能一向等下去，白白浪费资源啊，服务器每收到一次客户端的S ; V n Z B v }恳求后都会从头复位? a P T ! _这个计时器，时刻一般是设置为2小时

若两小时还没有收到客户端的任何数据，服务器就c ^ t会发送一个探测报文段，然后每隔75秒就会再发送一次，10次探测报文后依然没反应的话，服务器就认为客户端出了毛病，接着就封闭联接

问：HTTP 的恳求办法？

HTTP1.0 界说了三种恳求办法9 Z ] z ; I： GET, POST 和 HEAD办法

HTTP1.1 新增了六种恳求办法：OPTIO_ 1 0 . u U $NS、PUT、PATCH、DELETE、TRACE 和 CONNECT( ? F A m 办法

序号	办法	描E b ~ 9 v绘
1	GET	恳求指定的页0 u 4 i ] x面信息，并回来实体主体
2	HEAD	相似于 GET 恳求s b 1，只不Y L B = 9 t I过回来的呼应中没有具体的内容，用于获取报头
3	POST	向指定资源提交数据进行处理恳求 ( 例如提交表单v / N f T :或许上传文件 )，数据被包括在恳求体中，POST 恳求或许会导致新的资源的树立和/或已有资源的修正
4	PUT	从客户端向服务器传送的数据取代u j 指定的文档的内容
5	DELETE	恳求服务器删去指定的页面
6	COZ X F H TNNECT	HTTP/1.1 协议中预留给能够* ! H w . } & 6将联接改为管道办法的署理服务器
7	OPTIONS	允许客户端查看服务器的性能
8	TRACE	回显服务器收到的恳求H 9 /，主要用于测验或确诊
9	PATCH	是对 PUT 办法的补充，用来对已知资源进行局部更新

问：HTTP 状况码别离代表什么9 ! k？

状况码有五类别离代表

• 1xx: 协议s ^ e L 8 + )处理中状况，还需后续操作
• 2xx: 成功状况
• 3xx: 重定向状况，资源方位发生改动，需求从头恳求
• 4xx: 恳求报文有误
• 5xxF % 4 D ? s 5 , z: 服务器端过错

详细状况码就不啰嗦了，直接 copy 菜鸟教程# / X了一份，看一看吧，心中有g c [ – Q个形象j } K 1 _ ( m

状况码	英文名称	描绘
100	Continue	持续。客户端应持续其恳求
101	Switching Protocols	切换协议。服r n c L X P务器依据客户端的恳求切换协议。只能切e c $ a @ N换到更高级的协议，例如，切换到HTTP的新版本协议
200	OK	恳求成功。一/ B – i般用于GET与POST恳求
201	Created	已创立。成功恳求并创立了新的资源
202	Accey Z i / opted	已承受。现已承受恳求，但未处理完结
203	Non-Authoritative Information	非授权信息。恳求成功。但回来的meta信息不在原始的服务器，而是一个副本
204	No Content	无内容。服务器成功处理，但未回来内容。在未更新网页的状况下，可确保浏览器持续显现当时文档
205	Reset Content	重置内容。服务器处理成功，用户终端（例如：浏览器）应重置文档视图。可经过此回来码清除浏览器的表单域; 3 L
206	Partial Content	部分内容。服务器成功处理了部分GET恳求
300	MultipW T M J k j , f .le Choices	多种选择。恳求的资源可包括多个方位，相应可回来一个资源特征与地址的列表 J ( m用于用户终端（例如：浏览器）选择
301	Moved Permanently	永久移动。恳求的资源已被永久的移动到新URI，回来信息会包括新的URI，浏览器会主动定向到新URI。往后任何新的u . e恳求都应运用新的URI代替
302	Found	暂时移动。与301相s a ^似。但资源仅仅暂时被移动。客户端应持续运用原有URI
303	See Other	查看其它地址。与301相似。运用GET和POST恳J Q T =求查看
304	Not Modified	未修正。所p K R b T _恳求的资源未修正，服务器回来此状况码时，不会回来任何资源W h = d N。客户端一般会缓存拜访过的资源，经过供给一个头信息指出客户端希望只回来在指定日期之后修正的资源
305	Use Proxy	运用署理。所恳求的资源 p c R [ Y n有^ F 5 H g 8 b z H必要经过署理拜访
306	Unused	现已被抛弃的HTTP状况码
307! 0 Y d 2 R h A	Temporary Redirec+ E V It	暂时重定向。与302相似。运用GET恳求重定向
400	Bad Request	客户端恳求的语法过错，服务器无法了解
401	Unauthorized	恳求要求用户的身份认证
402	Payment Required	保留，将来运用
4M T 8 O * v U03	Forbidden	服务器了解恳求客户端的恳求，可是拒绝履行此恳求
404	Not Found	服务器无法依据H c i P K b W客户端的恳求找到资源（网页）。经过此代码，网站设计人员可设置”( S T S : {您所恳求的资源无法找到”的个性页面
405	Method Not Allowed	客户端恳求中的办法被制止
406	Not AcceptabQ [ . c D j 3le	服务器无法依据客户端恳求的内容特性完结恳求
407	Proxy Authentication Required	恳求要求署理的身份认证，与401^ 7 z p d * ( g相似，但恳求者应当运用署理进行授权
408	Request TL L W K / N % fime-out	服务器等候客户端发送的恳求时刻过长，超时
409	Conflict	服务器完结客户8 F | G 8 % R z +端的 PUT 恳求时或许回来此代码，服务器处理恳求时发生了抵触
410	Gone	客– F g ] i n *户端恳求的资源现已不存在。410不同于404，假如资源曾经有现在被永久删去了可运用410代码，网站设计人员可经过301代( I o / U i J f码指定资源的新方位
411	Length Required	服务器无法处理客户端发送的不带Content-Length的恳求信息
412	Precondition Failed	客户端恳求信息的先决条件过错
413	Request Entity Too Large	由于恳求的实体过大，服务器无法处理，因此拒绝恳求。为防止客户端的接连恳求，服务器或许会封闭联接k v 5 M x ]。假如仅仅服务器暂时无法处理，则会包= 2 7 l & O t 8 q括一个Retry-After的呼应信息
41r i l4	Request-URI Too Large	恳求的URI过长（URI一般为网址），服务器无法处理
415	Unsupported Media Type	服务器无法处理恳求顺便的媒体格式
416	Requested range not satisfia– K 3 S 7 | 8 4 able	客户端恳求的规模无效
417	Expectation Failed	服务器无法满意Expect的恳求头信息
500	Internal Server Error	服务器内部过错，无法完结恳求
501	Not Implemented	服务器不支r l & X 2 & 5 } (撑恳求的功用，无t N U = $法完结恳求
502	Bad Gateway	作为网关或许署理作业的服务器尝试履行恳求时，从长途服务器接纳到了一个无效的呼应
503	Service Unavailable	由于超载或体系保护，服务器暂时的无法处理客户端的恳求。延时的长度可包括在服务器的RetQ i ; ury-After头信息S k Z w ; I M 中
504	Gateway Time-out	充任网关或_ k Z : v署理的服务器，未及时从远端服务器获取恳求
505	HTTP Version not supported	服务器不支撑恳求的H L qTTP协议的版本，无法完结处理

问：HTTP与HTTPS的差异？

Hi P : Q pTTP协议传输的数据都是未加密的，也便是明文的，所以运用HTTP协议传输隐私信息非常不安全，为了确保这些隐私数据能加密传输，所以网景公司设计了 SSL（Secure Sockets Layer） 协议用于对HTTP协议传输的数据进行加密，然后就诞生了HTTPS

简略来说，HTTPS协议是由 SSQ ] 1 R A _ u P (L+HTTP0 { H 8 . % / - K 协议构建的可进行加密传输、身份认证的网络协议，要比 HTTP 协议安全，K h 2 u T 5 $ Q更多HTTP和HTTPS内容请自行百度，这儿就不长篇大论了

那么简略总: P { w . s结下有差8 N o 2 M J o异

• HTTPS协议需求到 CA 申请证书，一般免费证书较少，因此需求必定费用

• HTTP是超文本传输协议，信息是明文传输，HTTPS 则是具有安全性的 SSL 加密传输协议

• HTTP和HTTPS运用的是彻底不同的联接办法，用的端口也不一样，前者是80，后者是443

• HTTP的联接很简略，是无状况的，HTTPS协议是由 SSL+, ( MHTTP 协议构建的可G _ z w t ^进_ _ , l h行加密传输、a t b Z身份认证的网络协议，比HTTP协议安全

问：什么是简略恳求和非简略恳求？

CORS（cross-origin resource sharing），跨源资源共享，便是广大前端同学所说的跨域，想必咱们都了解，不了解这也不做介绍了，不了解能够看 HTTP拜访操控（CORS）- MDN传送O 0 O P S ? | 门

CORS中把恳求界说为e ] _ 1 )了两类

• 简略恳求
• 非简略恳求

那么什么是a x e 2简略恳求什么对错简略恳求呢？其实也很简略，咱们只c U + Q & R需求知道什么是简略恳求，其他的就都对错简略的了，而简略恳求需求满意的条件是

• 恳求办法只能是GET、P# u Y M _OST、HEAD三种
• HTTP头部信息不超越一下几种字段
  • 无自界说头部字段E ? k g ^ H f
  • Accept、Accept-Language、Content-Language、Last-Event-ID
  • Content-Type只需三个值 a` @ M A H Spplication/x-www-form-ur= ] x n & wlencoded、multipart/form-data、teD 7 w y :xt/plain

简略恳求需求满意 8 X x I E上面的条件，: 7 `其实往常也便是传统的表单恳求了，看了上面的简略恳求条件，那么非[ m Z _简略恳求是不是就呼之欲出了呢，比方下面这些只需满意一个便对错简略恳求

• 恳求办法是PUT、DELETE

• 自界说头部字段

• 发送JSON格式数据等等

非简略恳求的 CORS 恳求，会在正式通讯之前，增加一次 HTTP 查询恳求，恳求办法为 OPTIONS，称为 预检恳求 (preflight)

浏览器会先询问服务器，当时网页所在的域名是否在服` 7 J % ;务器的许可名单之中，以及能够运用哪些 HTTP 办法和头信息字段，得到必定答复，浏览器才会宣布正式的 XMLy r u ! m (Htt= , n V 6pRequest 恳求，不然h # W U f p f就会报错，这是为了防止这些新增的恳求，对传统的没有 CORS 支撑O ( E 7的服务器形成压力，给服务器一个提早拒绝的机会，防止服务器收到很多 DELETE 和 PUT恳求，这些传统的表单不或许跨域宣布的恳求

问：CSS 资源加载会堵塞烘托怎样优化] 5 0？

优化DOM树，DOM尽或许的小

CSS尽量用 id 和 c! 4 Nlass 少直I – ; ` ` * 2 u S接用标签，由于标签节点款式是E b M G = 8 P u能够承继的，所以在构建的进程中浏览器得递归 DOM 树来确定元素究竟是什么款式

关于首屏烘托需求用到的CSS代码参加Inline CSS ( 内联款式 )

关于首屏烘托不需求用到的CSS，能够运用文件形式并在页面内容烘托完结后再加载

问：什么是回流和重绘以及差异？

要知道，生成DOM树时是包括 display} : R x 2:none 的节点的，DOM树和CSSOM树的基础q ! o m A上依据节点的集合特点 margin/padding/width/hc M % , M u m Beight等 生成烘托树 ( render ) ，X q A烘托树不包括 display:none 的节点和 head 等节点，可是包括 visibility:hidden 的节点

当烘托树节点由于大小边距等问题发生改动而需求重建的进程，叫做 回流 (Reflow)

元素发生的改动仅仅影响了元素的一些外观之类的时分 ( 例如，背景色，边框色彩，文字色彩等 )D O y I i R，此刻只需求运用新款式q 2 / p } l制作这个元素就能够了，称之为 重绘 (Repaint)

回流必将引起重绘，而重绘不必定会引起回流，很明显 回流 代价较大

问：什么会引起回流？

• 页面烘托初始化

• DOM结构改动，比方删去了某个节点

• render树改动，比方削减了 padd( 9 & f n Xing ( 内边距 )

• 窗口 resize 事件触发时

• 某些 JS 特点，引发回流，许多浏览器会对回流做优化，比及数量满意时做一次批处理回流， 但除了 render树 的直接改动，当获取一些特点时，浏览器为了获得正确的值也会触发回流，这样使得浏览器优化无效

  • offset ( Top/Left/Width/Height )
  • scrol: Y q B P n M Dl ( Top/Left/Width/Height )
  • cil% y q Y P , Ient ( Top/Left/Width/Height )
  • width, height
  • 调用了 getComputedStyle() 或许IE的 currentStyD y / 8 [ ~le

问：怎么削减和防止回流重绘？

削减逐项更改款式，最好一次性更改 styN g jle，或许将款式界说为 class 并一次性更新

防止循环操作DOM，让DOM离线后再修正

• 创立一个 documentFragment ，在它上面运用一切DOM操作，终究再把它添加到 window.document
• 先把DOM节点 display:none ( 会触发一次 reflow)，然后做修正后，再把它显现出来
• 克隆一个DOM节点在内存里，S * | x , s (修正之后，与在线的节点相替换

防% G ) [ T s 6 u止屡次读取offset等特点，无法防止则将它们缓存到变量

将杂乱的元素绝对定位或固定定位，使得它脱离文档流，不然回流代价会很高

改动字体大小也会引发回流，所以尽或许削减这种操作

table布局，一个小改动会形成整s L J 0 h L { ^个table的从头布局，所以，少用为好

问：你了解一E 2 S ` &般图层和复合图层吗？

浏览器烘托的图层一般包括两大类：一般图层 以及 复合图层

一般文档流能够了解为一个复合图层，咱们叫它T e . c 2 & 0默许u # w N G复合层h # l J n E V 4，由于4 % i W里边不论添加多少元素，其实都是在同一个复合图层中，absolute 布局、 fixed 也一样，虽然能够脱离一般文档流，但它依然归于 默许复合层

复合图层，Y % v能够独立于一般文档流中，改动$ | 6 & j后能够防止整? & ) I o X 0个页面重绘，然后提升性能，但也不能很多运用复合图层，不然由于资源耗费过度& L ; j，页面反而会变的更卡，因小失大

GPU中，各个复合h } H 0图层是独6 y d E V x k N )自制作的，所以也互不影响，经过 硬件加速 的办R G i 3 p s法，会* a m k y a 7 A声明一个 新的复合图层 ，它会独自分配资源，当然也会脱离一般文档流，这样一来，不论这个复合图层中怎么改动，也不会影响 默许复合层 里的L u W t e m W g回流重绘

PS： 硬件加速技能是指运用 GPU 的硬件才能来帮助烘托网页, B r c 6 n

问：浏览器页5 8 L F : .面烘托优化？

• HTMf c * t [ KL文档结构层次尽量少，最好不深于六层

• JS 脚本尽量后放

• 款式结构层次尽量简略

• 少数首屏款式t N _ 4 T D @ 0 ?运用内联办法放在标签内

• 在脚本中尽量削减DOM操作，A 3 . 7 W尽量拜访离线DOM款式信息，防止过度触发回流

• 削减经过 JS 代码修正元素款式，尽量运用修正 class 名办法操作款式或动画

• 尽量削减浏览器重排和重绘的一些状况发生

• 2020年了！就不要运用 table 布局了

• CSS 动画中尽量只运用 transform 和 opacity ，不会发o I y r y生重排和重绘

• 隐藏在屏幕外，或在页面翻滚时，尽e O D S t 6量中止动画

• 尽或许只运用 CSS 做动画，CSS动画必定比 JS 动画要好许多

• 防止浏览器的隐式组成

• 改动复合层的尺寸

终究

对您有帮助的话，动动小手，点个赞鼓励下吧，当然，个人了解，本文由于比较忙，写的时刻较长，断断续续的写，所以或许有些当n J z 5 B ^ * 地联接的欠好，不太通畅或许有不正的当地$ { 4 ~ w – j 8，欢迎指出，不胜感激

哦4 w ; H B ! C I，还有，能够加个老友加下群一同沟通噻，大众K % | b L A g *号【不正派的前端】也欢迎关注呦