最近使用el-tabs组件发生了一件不可思议的事情，浏览器卡顿到崩溃~
 
之前将el-tabs放在for循环里面出现过该情况，一直以为是循环数据量过大导致，于是没有采用el-tabs组件，后来在<transition>里面嵌套<el-tabs>标签也出现浏览器卡顿现象，惊觉这是一件大事！
 
经过各种搜索与尝试找到了解决办法：
 
<el-col :span = "24">
    <el-tabs>
        <el-tab-pane label = "111" name = "first">   

        </el-tab-pane>
    </el-tabs>
</el-col>
 
在el-tabs外层用<el-col :span=24></el-col>包裹即可

 
浏览器中输入URL后发生了什么？
 
DNS域名解析
使用IP协议、ARP协议、OSPF等协议将消息上传到服务器上
客户端和服务端建立连接
客户端发送HTTP请求
服务端响应HTPP请求
浏览器解析html代码，并请求HTML代码中的资源
断开TCP连接
浏览器对页面进行渲染呈现给用户
  
 

 
在浏览器中输入URL后，执行的全部过程、也就是一次http请求的过程
 
DNS域名解析
 
 
 
1.DNS域名解析协议
 DNS协议的产生主要是IP地址不便记忆，在TCP／IP协议中、起初有一个叫做主机识别码的机制，这种的识别的方式指的是为每一台计算机都赋予唯一的主机名，再进行网络通信的时候可以直接使用主机名来代替IP地址,主机往往维护一个叫做hosts的数据库文件,这个数据库文件存放的就是主机名和IP地址的映射,也就是说,如果IP地址增加或者更新的话,中心的hosts数据库文件就得更新,也就是其它的计算机都要定期的更新这个hosts数据库文件、才能正确的使用网络.网络规模的扩大使这种方式的可行性降低.
 所以就有了DNS系统、可以有效地管理主机名和IP之间的对应的关系,
 因特网的域名系统被设计成一个联机分布式的数据库系统，并采用客户/服务器模式。域名到IP地址的解析是在域名服务器上进行的，一个服务器所负责（或者说是有权限的）的管辖范围称为区（不是以“域”为单位），各单位根据具体情况来划分自己管辖范围的区，但在一个区中的所有节点必须是能够连通的，每一个区设置相应的权限域名服务器，用来保护该区中的所有主机的域名IP地址的映射。每一个域名服务器不但能够进行一些域名到IP地址的解析，而且还必须具有连向其他域名服务器的信息，当自己不能进行域名到IP地址的转换时，能够知道什么地方去找别的域名服务器。
 1、浏览器搜索自己的DNS缓存（维护一张域名与IP地址的对应表）；
 2、若没有，则搜索操作系统中的DNS缓存（维护一张域名与IP地址的对应表）；
 3、若没有，则搜索操作系统的hosts文件（Windows环境下，维护一张域名与IP地址的对应表）；
 4、若没有，则操作系统将域名发送至本地域名服务器—（递归查询方式），本地域名服务器查询自己的DNS缓存，查找成功则返回结果，否则，（以下是迭代查询方式）
 4.1. 本地域名服务器向根域名服务器（其虽然没有每个域名的具体信息，但存储了负责每个域，如com、net、org等解析的顶级域名服务器的地址）发起请求，此处，根域名服务器返回com域的顶级域名服务器的地址；
 4.2. 本地域名服务器向com域的顶级域名服务器发起请求，返回baidu.com权限域名服务器（权限域名服务器，用来保存该区中的所有主机域名到IP地址的映射）地址；
 4.3. 本地域名服务器向baidu.com权限域名服务器发起请求，得到www.baidu.com的IP地址；
 5、本地域名服务器将得到的IP地址返回给操作系统，同时自己也将IP地址缓存起来；
 6、操作系统将IP地址返回给浏览器，同时自己也将IP地址缓存起来；
 7、至此，浏览器已经得到了域名对应的IP地址；
 
 
使用IP协议、ARP协议、OSPF等协议将消息上传到服务器上
 
 
 
2.使用IP协议、ARP协议、OSPF等协议将消息上传到服务器上
 在实际的通信中，如果只是使用IP协议肯定是不行的，比如在数据链路层的传输，在以太网的情况下使用的是ＭＡＣ地址来传输数据包的，所以在传输数据的时候，需要其它的协议的辅助.比如ARP和OSPFX协议
 ARP解决的是同一个局域网内，主机或路由器的IP地址和MAC地址的映射问题。如果源主机和目的主机在同一个局域网内（目标IP和本机IP分别与子网掩码相与的结果相同，那么它们在一个子网），就可以用ARP找到目的主机的MAC地址；如果不在一个局域网内，用ARP协议找到本网络内的一个路由器的MAC地址，剩下的工作由这个路由器来完成。
 OSPF:Open Shortest Path First
 它属于链路状态路由协议，具有路由变化收敛速度快、无路由环路、支持变长子网掩码（VLSM）和汇总、层次区域划分等优点。在网络中使用OSPF协议后，大部分路由将由OSPF协议自行计算和生成，无须网络管理员人工配置，当网络拓扑发生变化时，协议可以自动计算、更正路由，极大地方便了网络管理.
 
 
客户端和服务端建立连接
 
 
 
3.使用TCP建立连接
 也常说的三次握手
 
 TCP服务器进程先创建传输控制块TCB，时刻准备接受客户进程的连接请求，此时服务器就进入了LISTEN（监听）状态；
 TCP客户进程也是先创建传输控制块TCB，然后向服务器发出连接请求报文，由Client发出请求连接即 SYN=1 ACK=0 ,同时选择一个初始序列号 seq=x ，此时，TCP客户端进程进入了 SYN-SENT（同步已发送状态）状态。TCP规定，SYN报文段（SYN=1的报文段）不能携带数据，但需要消耗掉一个序号。
 TCP服务器收到请求报文后，如果同意连接，则发出确认报文。确认报文中应该 ACK=1，SYN=1，确认号是ack=x+1，同时也要为自己初始化一个序列号 seq=y，此时，TCP服务器进程进入了SYN-RCVD（同步收到）状态。这个报文也不能携带数据，但是同样要消耗一个序号。
 TCP客户进程收到确认后，还要向服务器给出确认。确认报文的ACK=1，ack=y+1，自己的序列号seq=x+1，此时，TCP连接建立，客户端进入ESTABLISHED（已建立连接）状态。TCP规定，ACK报文段可以携带数据，但是如果不携带数据则不消耗序号。
 当服务器收到客户端的确认后也进入ESTABLISHED状态，此后双方就可以开始通信了。
 
 
客户端发送HTTP请求
 
 
 
4.建立TCP连接后发起HTTP请求
 HTTP请求也就是以特定的格式发送的数据、格式参考👇我的这篇博客HTTP、HTTPS
 
 
服务端响应HTPP请求
 
 
 
5.服务器响应HTTP请求
 HTTP响应也就是以特定的格式发送的数据、格式参考👇我的这篇博客HTTP、HTTPS
 1.负载均衡
 网站可能会有负载均衡设备来平均分配所有用户的请求。即对工作任务进行平衡,分摊到多个操作单元上执行,如图片服务器,应用服务器等。
 2请求处理阅读请求及它的参数和 cookies
 
 
浏览器解析html代码，并请求HTML代码中的资源
 
 
 
6.浏览器解析html代码，并请求HTML代码中的资源（如js、css、图片等）具体的过程参考这篇博客点击查看
 
 
断开TCP连接
 
 
 
7.断开TCP连接
 也就是常说的四次挥手
 但要HTTP请求中是否是长连接。来决定是不是断开TCP连接
 
 在HTTP/1.0中默认使用短连接。也就是说，客户端和服务器每进行一次HTTP操作，就建立一次连接，任务结束就中断连接。当客户端浏览器访问的某个HTML或其他类型的Web页中包含有其他的Web资源（如JavaScript文件、图像文件、CSS文件等），每遇到这样一个Web资源，浏览器就会重新建立一个HTTP会话。
 而从HTTP/1.1起，默认使用长连接，用以保持连接特性。使用长连接的HTTP协议，会在响应头加入这行代码：
 在使用长连接的情况下，当一个网页打开完成后，客户端和服务器之间用于传输HTTP数据的TCP连接不会关闭，客户端再次访问这个服务器时，会继续使用这一条已经建立的连接。Keep-Alive不会永久保持连接，它有一个保持时间，可以在不同的服务器软件（如Apache）中设定这个时间。实现长连接需要客户端和服务端都支持长连接。
 HTTP协议的长连接和短连接，实质上是TCP协议的长连接和短连接。
 长连接可以省去较多的TCP建立和关闭的操作，减少浪费，节约时间。对于频繁请求资源的客户端适合使用长连接。在长连接的应用场景下，client端一般不会主动关闭连接，当client与server之间的连接一直不关闭，随着客户端连接越来越多，server会保持过多连接。这时候server端需要采取一些策略，如关闭一些长时间没有请求发生的连接，这样可以避免一些恶意连接导致server端服务受损；如果条件允许则可以限制每个客户端的最大长连接数，这样可以完全避免恶意的客户端拖垮整体后端服务。
 短连接对于服务器来说管理较为简单，存在的连接都是有用的连接，不需要额外的控制手段。但如果客户请求频繁，将在TCP的建立和关闭操作上浪费较多时间和带宽。
 
 客户端进程发出连接释放报文，并且停止发送数据。释放数据报文首部，FIN=1，其序列号为seq=u（等于前面已经传送过来的数据的最后一个字节的序号加1），此时，客户端进入FIN-WAIT-1（终止等待1）状态。 TCP规定，FIN报文段即使不携带数据，也要消耗一个序号。
 服务器收到连接释放报文，发出确认报文，ACK=1，ack=u+1，并且带上自己的序列号seq=v，此时，服务端就进入了CLOSE-WAIT（关闭等待）状态。TCP服务器通知高层的应用进程，客户端向服务器的方向就释放了，这时候处于半关闭状态，即客户端已经没有数据要发送了，但是服务器若发送数据，客户端依然要接受。这个状态还要持续一段时间，也就是整个CLOSE-WAIT状态持续的时间。
 客户端收到服务器的确认请求后，此时，客户端就进入FIN-WAIT-2（终止等待2）状态，等待服务器发送连接释放报文（在这之前还需要接受服务器发送的最后的数据）。
 服务器将最后的数据发送完毕后，就向客户端发送连接释放报文，FIN=1，ack=u+1，由于在半关闭状态，服务器很可能又发送了一些数据，假定此时的序列号为seq=w，此时，服务器就进入了LAST-ACK（最后确认）状态，等待客户端的确认。
 客户端收到服务器的连接释放报文后，必须发出确认，ACK=1，ack=w+1，而自己的序列号是seq=u+1，此时，客户端就进入了TIME-WAIT（时间等待）状态。注意此时TCP连接还没有释放，必须经过2MSL（最长报文段寿命）的时间后，当客户端撤销相应的TCB后，才进入CLOSED状态。
 服务器只要收到了客户端发出的确认，立即进入CLOSED状态。同样，撤销TCB后，就结束了这次的TCP连接。可以看到，服务器结束TCP连接的时间要比客户端早一些。
 
 
浏览器对页面进行渲染呈现给用户
 
 
 
8.浏览器对页面进行渲染呈现给用户
 浏览器渲染引擎最重要的工作就是将HTML文档和CSS文档解析组合并绘制到浏览器窗口上。
 具体的过程参考这篇博客点击查看
 

我们经常在浏览器中输入一个网址，但是在输入这个网址后，发生了什么？今天我们来分析一下！
 
通常，在输入一个网址后，发生的事情分为六步：DNS域名解析，TCP连接，HTTP请求，接收响应结果，浏览器解析HTML，浏览器布局渲染。
 
1. 查找域名的IP地址
 
我们在浏览器中输入一个网址（URL），首先，浏览器会根据输入的网址找到对应的IP地址。那么，怎样找到对应的IP地址呢？接下来我们就来看一下。
 
（1）URL的格式
 
一个URL包括协议，网络地址，资源路径；
 
协议，最常用的比如HTTP（超文本传输协议），FTP（文件传输协议）；
 
网络地址，可以是域名或IP地址，包括端口号，如果没有端口号，默认为80；
 
资源路径，可以是多种多样的。
 
（2）DNS域名解析
 
浏览器发现输入的网址不是IP地址，便向操作系统发送请求IP地址，操作系统启动DNS域名解析协议，接下来就开始DNS查询了。
 
第一步：先在各种缓存信息中查找
 
 浏览器缓存——浏览器会缓存DNS一段时间，但是操作系统不会告诉浏览器缓存多长时间，这个缓存时间完全由浏览器自己决定。
 
系统缓存——如果在浏览器中没有找到，浏览器会做一个系统调用，获得系统缓存中的记录。
 
路由器缓存——接着会将请求发给路由器，路由器一般也有自己的DNS缓存。
 
如果在缓存信息中都没有查找到，则转第二步。
 
第二步：DNS服务器查找
 
全球所有的DNS服务器组成了一个DNS域名解析系统，在这个系统中，包含了全球所有的主机和IP地址的映射。所以，先在和它直接相连的DNS服务器中查找，一般情况下，在这个DNS服务器中都可以找到，但是也不排除特殊情况。
 
如果在和本地相连的服务器上没有找到想要的IP地址，则进行递归查找。本地服务器请求比他高一级的服务器或者根服务器，根服务器查询自己的数据库，如果知道对应的IP地址，则返回信息给本地服务器，本地服务器再将信息返回给浏览器；如果没有直接找到对应的IP地址，则告诉本地服务器应该在另外的哪一个服务器上询问，然后将询问到的信息返回给浏览器。（在根服务器上一定可以找到对应的IP地址）。
 
2. TCP连接
 
在知道对应的IP地址后，接下来我们就可以进行TCP连接请求了。TCP向服务器端发送SYN连接请求，经过TCP三次连接成功后，浏览器就和服务器端建立好连接了，就可以相互发送数据了。
 
TCP三次连接可以参考https://blog.csdn.net/qq_37954088/article/details/80315829
 
3. 浏览器发起web服务器 HTTP请求
 
根据HTTP协议的要求，组织一个HTTP数据包，HTTP请求的报头有请求行和报文，请求行包括三部分，请求方法，URL（服务器上的资源），版本。报文有一些其他信息，比如请求正文的有效载荷长度（Content_Length），缓存信息（Cache_Control）,Cookie等。
 
                              
 
（1）常见的请求方法
 
                                                                          
 
（2）常见的HTTP版本
 
有两种，为HTTP/1.1和HTTP/1.0，HTTP/1.1默认的连接方式为长连接（Connection：keep-alive），而HTTP/1.0默认的连接方式为短连接（Connection：close）。
 
注：HTTP报头在结束时，会向下留下空行，这个空行也是将报头和正文分开的依据。
 
4. HTTP响应
 
在通过HTTP请求服务后，服务器会向浏览器返回一个应答信息——HTTP响应。HTTP响应的报头包括三部分——版本，状态码，状态码描述。
 
                                        
 
常见的状态和状态码
 
                              
 
注：如果服务器返回的响应信息为3XX，此时要转到第五步。
 
5. 浏览器跟踪重定向地址
 
现在浏览器知道了真正要访问的目标服务器在哪里，便向此目标服务器发送和第三步相同的报文，请求响应。
 
6. 服务器处理请求
 
 
 
服务器接收到获取请求，然后处理并返回一个响应。
 
这表面上看起来是一个顺向的任务，但其实这中间发生了很多有意思的东西：
 
Web 服务器软件
 web服务器软件（像IIS和阿帕奇）接收到HTTP请求，然后确定执行什么请求处理来处理它。请求处理就是一个能够读懂请求并且能生成HTML来进行响应的程序（像ASP.NET,PHP,RUBY...）。
请求处理
 请求处理阅读请求及它的参数和cookies。它会读取也可能更新一些数据，并讲数据存储在服务器上。然后，需求处理会生成一个HTML响应。
7. 浏览器解析HTML
 
就像我们平常请求网页一样，浏览器会一个一个的响应出用户请求的页面，这个页面里面有表格，有图片，有文字，也可能有视频等等。
 
浏览器按顺序解析html文件，构建DOM树，在解析到外部的css和js文件时，向服务器发起请求下载资源，若是下载css文件，则解析器会在下载的同时继续解析后面的html来构建DOM树，则在下载js文件和执行它时，解析器会停止对html的解析。
 
8. 浏览器布局渲染
 
布局：通过计算得到每个渲染对象在可视区域中的具体位置信息（大小和位置），这是一个递归的过程。
绘制：将计算好的每个像素点信息绘制在屏幕。
9. TCP断开连接
 
在完成所有的工作后，客户端就要发送断开连接请求了，TCP释放连接需要四次挥手。
 
TCP四次挥手的工作可以参考https://blog.csdn.net/qq_37954088/article/details/80315829
 
 
 
 
 
 
 
 

原文："天龙八步"细说浏览器输入URL后发生了什么   慕课大神
 
本文摘要：
1.DNS域名解析；
2.建立TCP连接；
3.发送HTTP请求；
4.服务器处理请求；
5.返回响应结果；
6.关闭TCP连接；
7.浏览器解析HTML；
8.浏览器布局渲染；
  
 
1.浏览器（客户端）进行地址解析，补全域名，然后DNS域名解析；
 
    浏览器会对一些默认的东西进行补齐。例如：互联网url默认端口号为80，浏览器默认补齐功能会补齐协议http，有些还会直接在域名前面补上www。所以实际上，即使我们输入的是imooc.com，然而实际访问的却是http://www.imooc.com
 
dns解析分为以下几个步骤：
 1、先查看浏览器dns缓存中是否有域名对应的ip。
 2、如果没有，则查看操作系统dns缓存中是否有对应的ip（例如windows的hosts文件）。
 3、依旧没有就对本地区的dns服务器发起请求，
 4、如果还是没有，就直接到Root Server域名服务器请求解析。
 <1>、DNS在进行区域传输的时候使用TCP协议，其它时候则使用UDP协议；
 
<2>、全球只有十三台逻辑根服务器
 
 
2.通过ip寻址和arp，找到目标（服务器）地址，三次握手建立TCP连接；
 
    ip协议在第三层互联网层（网络层），arp协议在第四层网络访问层（链路层）。第2步获取到了ip，此时直接通过ip寻址找到ip对应的服务器，然后通过arp协议找到服务器的mac地址。

ip寻址主要有两种方式，一种是同一网段，一种是不同网段。要判断两个IP地址是不是在同一个网段，就将它们的IP地址分别与子网掩码做与运算，得到的结果一网络号，如果网络号相同，就在同一子网，否则，不在同一子网。arp就是地址转化协议，也就是把ip地址转化为mac地址。和dns很像，先查缓存，然后查路由器。

 为什么有了ip地址，还要mac地址？这个问题很关键，就像是我有驾驶证了你非要让我提供身份证。这个涉及一些历史问题，因为一开始没有互联网的时候就只有mac地址，还不存在ip地址。后来互联网越来越大之后，发现mac地址找起来太麻烦，并且耗时也越来越久，就发明了ip地址。并且mac地址在一个局域网中还是很有用的，所以就两个一起存在了。
 
第三步我们找到了目标ip，并获得了服务器ip的mac地址。此时浏览器就会请求和服务器连接，用来传输数据。tcp 是稳定双向面向连接的，断开时也会分两边分别断开。面向连接不是说tcp一个双方一直开着的通道，而是维持一个连接的状态，让它看起来有连接。
 
 
 
 
上图也可以这么理解：
 
3.发送HTTP请求；等待响应
 
    浏览器会对请求进行包装，包装成请求报文。请求报文的格式如下：
 起始行：如 GET / HTTP/1.0 （请求的方法 请求的URL 请求所使用的协议）
 头部信息：User-Agent Host等成对出现的值
 
主体：请求头部和主体之间有一个回车换行。如果是get请求，则没有主体部分，post请求有主体部分。
 
 
4.服务器处理请求；
 
 
 
    浏览器请求报文到达服务器之后，服务器接口会对请求报文进行处理，执行接口对应的代码，处理完成后响应客户端。由于http是无状态的，正常情况下，客户端收到响应后就会直接断开连接，然后一次http事物就完成了。但是http1.0有一个keep-alive的请求字段，可以在一定时间内不断开连接（有时时间甚至很长）。http1.1直接就默认开启了keep-alive选项。这导致了一个后果是服务器已经处理完了请求，但是客户端不会主动断开连接，这就导致服务器资源一直被占用。这时服务器就不得不自己主动断开连接，而主动断开连接的一方会出现TIME_WAIT，占用连接池，这就是产生SYN Flood攻击的原因。
 
 
5.返回响应结果；
 
 
 
    需要关注一个报文头--accept。accept代表发送端（客户端）希望接受的数据类型，这是浏览器自动封装的请求头。如果服务器返回的content-type是accept中的任何一个，浏览器都能解析，并直接展示在网页上。如果服务器返回的content-type是其他类型，此时浏览器有三种处理状态：
 1、正常显示。例如返回类型为text/javascript，浏览器能直接处理并展示。
 2、下载。例如返回类型为application/octet-stream（二进制流，不知道下载文件类型），这种浏览器不能直接处理的，会被下载。
 3、报错。当我们返回一个字符串hello world，却使用text/xml，格式时，浏览器不能正确解析，就会报错，并把报错信息呈现在网页中。
 
浏览器能直接处理很多种格式，并直接呈现在网页中，并不限于accept中规定的字段。
 
 
6.关闭TCP连接；
 
 
上图可以这么理解：
 客户端：“兄弟，我这边没数据要传了，咱关闭连接吧。”
 服务端：“收到，我看看我这边有木有数据了。”
 服务端：“兄弟，我这边也没数据要传你了，咱可以关闭连接了。”
 客户端：“好嘞。”
 
7.浏览器解析HTML；
 
浏览器通过解析HTML，生成DOM树，解析CSS，生成CSS规则树，然后通过DOM树和CSS规则树生成渲染树。渲染树与DOM树不同，渲染树中并没有head、display为none等不必显示的节点。
 
8.浏览器布局渲染
 
    浏览器会根据相应的content-type字段对响应字符串进行解析。能够解析并成功解析就显示，能够解析但解析错误就报错，不能解析就下载。由于浏览器采用至上而下的方式解析，所以会先解析html，直到遇到外部样式和外部脚本。这时会阻塞浏览器的解析，外部样式和外部脚本（在没有async、defer属性下）会并行加载，但是外部样式会阻塞外部脚本的执行，dom加载完毕，js脚本执行成功后dom树构建完成（DOMContentLoaded），之后就加载dom中引用的图片等静态资源。
html解析->外部样式、脚本加载->外部样式执行->外部脚本执行->html继续解析->dom树构建完成->加载图片->页面加载完成
  
 
总结一下：运维人员需要处理页面缓存、cdn及keep-alive引起的连接池占用等问题；后端人员需要处理代码逻辑、缓存、传输优化、报错等问题；前段人员需要做好前端性能优化和配合运维、后端做好借口调试，缓存处理等问题。所以无论是前端、后台、运维都应该很清楚整个流程中的每一步，才能在配合时，得心应手，才能在出现问题时，快速准确的定位问题解决问题，才能在需要优化时，迅速完整的给出方案。
 
 
 
WEB服务器如何选择 Apache or Nginx？
 
Apache拥有丰富的模块组件支持，稳定性强，BUG少，动态内容处理强。
 
Nginx轻量级，占用资源少，负载均衡，高并发处理强，静态内容处理高效
 
 
 
程序员最核心的竞争力是什么？
 
「看文档」其实是最快的学习方法
「读源码」