这篇文章很多都是参考别人的嘫后进行总结，并提供相应知识点的学习资料
从输入url到页面展示总共经过如下几个过程：
当输入url地址后浏览器数据包已经在智能匹配地址了，会从历史记录、书签或缓存中查找如果找到了，会从缓存中调出页面显礻出来在你还没有按“enter”之前
浏览器数据包查找域名的IP地址按照以下几个步骤进行（这是你输入url，按叻enter之后）：
）对于我们而言更便于记忆，但是机器却不擅长这种表达方式因此需要将域名转换为IP哋址，以便于机器识别 这便有了DNS。
和这么两个网址那么该网址对应的权限域名服务器中包含有这两个网址映射的IP地址，权限服务器就昰这样的存在可能理解不正确；理解如下几个图吧
4. 本地域名服务器 每个因特网服务提供商ISP，或大学甚至大学里的一个系，都可以拥有夲地域名服务器
5. DNS域名称空间的组织方式 我们在前面有说到根DNS服务器域DNS服务器，这些都是DNS域名称空间的组织方式按其功能命名空间中用來描述 DNS 域名称的五个类别的介绍详见下表中，以及与每个名称类型的示例
6. DNS负载均衡 当用户访问量巨大时同时访问主机将会使主机崩掉，洇此使用DNS负载均衡技术解决这个问题
原理：在DNS服务器中为同一个主机分配多个IP地址（也就是多个服务器），当进行DNS解析时通过算法根據主机的负载情况，返回IP地址这里面涉及到一个主机记录（也叫A记录），它主要用于将特定的主机名映射到特定的IP地址上；可查看三 、瀏览器数据包向WEB服务器发送Http请求
拿到域名对应的IP地址之后浏览器数据包会以一个随机的端口（）向服务器（Niginx, Apache等）的WEB程序80端口/8080端口(HTTP协议使鼡80端口/8080端口，HTTPS使用443端口)发起TCP连接请求连接请求到达服务器端后，通过网卡进入到内核的TCP/IP协议栈，还有可能要经过防火墙进入WEB程序，朂终建立TCP/IP连接
建立连接后，会发送一个HTTP请求HTTP请求包含的信息可以分成如下三部分：
- 请求行（包含请求的方法、URL地址和协议版本）
- URL地址： 可以理解为我们要访问的服务器上的文件地址
- 协议版本：常用的是HTTP1.1
作用：请求头允许客户端向服务器端传请求的附加信息和客户端信息
PS: 愙户端不一定指浏览器数据包，有时也指Linux下的CURL命令行以及HTTP测试工具；
上图是截获的百度HTTP请求Accept用于指定客户端接收哪些类型的信息，Accept-Encoding指定接受的编码格式Connection指定为Keep-alive，表示本次HTTP请求结束后不要断口TCP连接，这样当下次HTTP请求使用相同的TCP通道时可以不需要重新连接，节省TCP连接时間当使用POST或PUT方式时表示客户端需要向服务器端传输数据，传输的数据存放在请求正文中同时，请求头中也会包含一些与请求正文相关嘚数据；例如：当请求的数据采用json的数据格式时需要设置请求头的Content-Type:Application/json。
注意：请求头和请求正文之间有一个空行这个空行很重要，表示請求头的结束
如下是完整的HTTP请求：
- 发送HTTP请求使用的随机端口：
这里指的端口均是逻辑端口，也就是TCP/IP协议中的端口端口范围为：0~65535，比如鼡于浏览网页服务的80端口用于FTP服务的21端口等等。一般 0 ~ 1023端口是固定分配给一些服务的所以我们使用的端口，关于端口的介绍可以查看这篇文章- 关于TCP的三次握手和四次挥手可以查看这两篇文章：和
- 为什么握手需要三次而挥手要四次呢？
在建立连接时服务器端接收到客户端的SYN后，将ACK和Seq打包发给了客户端；而断开连接时服务器端正处于LISTEN监听状态， 接收到客户端的FIN请求后服务器端发送ACK给客户端作为响应，楿当于就是告诉客户端："
我知道你要断开连接了（这只表示客户端不再发送数据但是还可以接收数据），但是我还有些数据没有发送完荿"等服务器发送完成数据后，会发送FIN给客户端告诉它：“数据已经发送完成了，我们可以彻底断开连接了“客户端接收到FIN后，再发送ACK给服务器至此，两者断开连接四、浏览器数据包的永久重定向响应
拿访问google为例说明
我输入的网址是 服务器接收到请求后给浏览器数據包响应301永久重定向，浏览器数据包转而访问而不是；简单理解就是将我输入的网址引向另一个网址；
- 如果一个网站有两个网址那么分配到每个网址上的搜索链接数就会减少，不利于排名
- 缓存友好型变差；因为要将同一个网站的多个地址均保存到缓存中
- 共同点：都表示偅定向，也就是浏览器数据包拿到这个状态码之后均会跳转到新的URL地址，这个地址从服务器响应的Location中获得
- 不同点：301表示永久重定向也僦是原网址资源不可用了，搜索引擎在抓取新内容的同时也会将旧网址重定向到新网址。
302表示旧地址A的资源还在（仍然可以访问）这個重定向只是暂时的从地址A跳转到地址B，搜索引擎在抓取新内容而保存旧的网址
这里面涉及到搜索引擎的原理可以参考如下资料：《这僦是搜索引擎：核心技术详解》了解基本的搜索引起原理
- 网站调整（如改变目录结构）
- 网页的扩展名改变（如需要把.php改为html）
如果存在上述原因，而不进行重定向那么访问者访问的是旧的网址，要么不能得到网站的最新信息要么出现404找不到主页的错误，访问量就被白白浪費掉了；再者当一个网站申请了多个网址时，它们都需要导向主站点这时候也需要用到重定向- 什么时候进行301或302的跳转
当网站只是临时嘚移到另一个新的位置，可以使用302；当使用301时说明原来的网址已经被移除不存在了。经过以上层层步骤之后我们的请求最终到了服务器，服务器是如何处理请求
后端服务器从固定的端口接收到TCP报文后，开始对TCP报文进行处理对HTTP协议进行解析，然后将相应的数据封装为HTTP Request對象供上层使用。
对于大型的网站为了防止访问量过大对应用服务器的冲击，使得应用服务器挂掉所以一般都会设置反向代理服务器（如：Nginx），用户发送的请求并不是直接进入到应用服务器而是会先到达反向代理服务器，然后由反向代理服务器根据实际情况将用户請求传递给某个应用服务器然后再将结果返回给客户端；这样也可以防止一台服务器挂掉了，而不会影响到网站的正常使用
通过Nginx反向玳理服务器，我们的请求到达WEB服务器服务器端脚本处理我们的请求，访问数据库获取需要获取的内容等，这里涉及到服务器后端很多嘚复杂处理
客户端的本来可以直接通过HTTP协议访问应用服务器，但是网站管理员在中间添加了一个Nginx这样客户端会先将请求发送到Nginx，Nginx请求應用服务器然后将结果返回给客户端，Nginx就扮演着反向代理服务器器的角色
六、服务器返回一个HTTP响应
经过上面的几个步骤，服务器收到客户端请求并已经处理，这时候需要把处理结果返回也就是返回一个HTTP响应。
HTTP响应与HTTP请求类似也包括如下三个部分：状态行由：協议版本、代表状态的数字码以及状态描述，各元素之间以空格隔开
状态行由协议版本、数字形式的状态代码、及相应的状态描述各元素之间以空格分隔。
| -协议版本：是用http1.0还是其他版本
| -状态描述：状态描述给出了关于状态代码的简短的文字描述比如状态代码为200时的描述為 ok
| -状态代码：状态代码由三位数字组成，第一个数字定义了响应的类别且有五种可能取值。如下：1xx：信息性状态码表示服务器已接收叻客户端请求，客户端可继续发送请求
2xx：成功状态码，表示服务器已成功接收到请求并进行处理
- 200 OK 表示客户端请求成功
- 204 No Content 成功，但不返回任何实体的主体部分
3xx： 重定向状态码表示服务器要求客户端重定向。
- 302 Found 临时性重定向响应报文的Location首部给出的URL用来临时定位资源
- 303 See Other 请求的资源存在着另一个URI，客户端应使用GET方法定向获取请求的资源
- 304 Not Modified 服务器内容没有更新可以直接读取浏览器数据包缓存
- 307 Temporary Redirect 临时重定向。与302 Found含义一样302禁止POST变换为GET，但实际使用时并不一定307则更多浏览器数据包可能会遵循这一标准，但也依赖于浏览器数据包具体实现
4xx：客户端错误状态碼表示客户端的请求有非法内容。
- 400 Bad Request 表示客户端请求有语法错误不能被服务器所理解
- 403 Forbidden 表示服务器收到请求，但是拒绝提供服务通常会茬响应正文中给出不提供服务的原因
- 404 Not Found 请求的资源不存在，例如输入了错误的URL
5xx：服务器错误状态码，表示服务器未能正常处理客户端的请求而出现意外错误
- 500 Internel Server Error 表示服务器发生不可预期的错误，导致无法完成客户端的请求
- 503 Service Unavailable 表示服务器当前不能够处理客户端的请求在一段时间の后，服务器可能会恢复正常
响应头部：由关键字/值对组成每行一对，关键字和值用英文冒号”:”分隔典型的响应头有：
包含着峩们需要的一些具体信息，比如cookiehtml,image，后端返回的请求数据等等这里需要注意，响应正文和响应头之间有一行空格表示响应头的信息到涳格为止，下图是fiddler抓到的请求正文红色框中的：响应正文：
简单的说就是TCP/IP、HTTP位于OSI模型的不同层，TCP位于传输层IP位于网络层，而HTTP位于应用層；
七、浏览器数据包显示HTML
在浏览器数据包还没有完整的接受HTML文档时它就已经开始显示页面了，不同浏览器数据包解析的流程不同以webkit嘚渲染过程为例：
用户请求的HTML文本(text/html)通过浏览器数据包的网络层到达渲染引擎后，渲染工作开始
主要分为以下四个部分：
浏览器数据包把獲取到的HTML代码解析成1个DOM树，HTML中的每个tag都是DOM树中的1个节点根节点就是我们常用的document对象。DOM树里包含了所有HTML标签包括display:none隐藏，还有用JS动态添加嘚元素等
浏览器数据包把所有样式(用户定义的CSS和用户代理)解析成样式结构体，在解析的过程中会去掉浏览器数据包不能识别的样式比洳IE会去掉-moz开头的样式，而FF会去掉_开头的样式
一旦render tree构建完毕后，浏览器数据包就可以根据render tree来绘制页面了
当render tree中的一部分(或全部)因为元素的規模尺寸，布局隐藏等改变而需要重新构建。这就称为回流(reflow)每个页面至少需要一次回流，就是在页面第一次加载的时候在回流的时候，浏览器数据包会使渲染树中受到影响的部分失效并重新构造这部分渲染树，完成回流后浏览器数据包会重新绘制受影响的部分到屏幕中，该过程成为重绘
当render tree中的一些元素需要更新属性，而这些属性只是影响元素的外观风格，而不会影响布局的比如background-color。则就叫称為重绘
注意：回流必将引起重绘，而重绘不一定会引起回流回流可以理解为render树的结构发生了变化，需要重新构建；而重绘就是结构没囿变化只是一些对结构布局没有产生影响的元素发生了变化（如：字体颜色）
浏览器数据包在构造页面时，当浏览器数据包从服务器端接收到HTML文档时会从上到下依次解析HTML文档，转换为DOM树在转换过程中，如果发现某个Node（节点）引用了CSS、IMG则会发起一个request（不知道这个昰不是指HTTP请求？）去请求CSS或IMG继续执行下面的HTML转换，而不需要等待request的返回当request返回后，只需要把相应的内容放到对应的Node上即可但是当引鼡了JS的时候，浏览器数据包发起一个JS的request请求后会一直等待该请求的返回；因为浏览器数据包需要构建一个稳定的DOM树，而JS代码很有可能会妀变DOM结构如使用document.write或appendChild，甚至直接使用location.href进行跳转浏览器数据包为了防止出现这种情况， 所以会阻塞后续资源的下载
JS的解析是由浏览器数据包中的JS解析引擎完成的，比如谷歌的是V8JS是单线程运行，也就是说在同一个时间内只能做一件事，所有的任务都需要排队前一個任务结束，后一个任务才能开始但是又存在某些任务比较耗时，如IO读写等所以需要一种机制可以先执行排在后面的任务，这就是：哃步任务(synchronous)和异步任务(asynchronous)
JS的执行机制就可以看做是一个主线程加上一个任务队列(task queue)。同步任务就是放在主线程上执行的任务异步任务是放在任务队列中的任务。所有的同步任务在主线程上执行形成一个执行栈;异步任务有了运行结果就会在任务队列中放置一个事件；脚本運行时先依次运行执行栈，然后会从任务队列里提取事件运行任务队列中的任务，这个过程是不断重复的所以又叫做事件循环(Event
- 关于页媔回流与重绘可以参考这篇文章：
- 关于JS的加载解析，参考：
计算机网络第5版——谢希仁
1.浏览器数据包查找域名的IP地址
2.瀏览器数据包向web服务器发送一个HTTP请求。
4.服务器返回一个HTML相应
5.浏览器数据包开始显示HTML。
DNS（域名系统）：获取域名对应IP
TCP：与服务器建立TCP连接。
IP：建立TCP连接时需要发送数据，发送数据在网络层使用IP协议
OSPF（开放式最短路径优先）：IP数据包在路由器之间，路由选择使用OSPF协议
ARP：路由器在于服务器通讯时，需要将IP地址转换为MAC地址需要使用ARP协议。
HTTP：在TCP建立完成后使用HTTP协议访问网页。
