一、流程预览
-
输入地址
-
浏览器查找域名的IP地址
-
浏览器向web服务器发送一个HTTP请求
-
服务器的永久重定向响应
-
服务器处理请求
-
服务器返回一个HTTP响应
-
浏览器显示HTML
-
浏览器发送请求获取嵌入在HTML中的资源（如图片、音频、视频、CSS、JS等等）
二、流程详解
（一）、输入url
当我们开始在浏览器中输入网址的时候，浏览器其实就已经在智能的匹配可能的url了，他会从历史记录、书签等地方，找到已经输入的字符串可能对应的url，然后给出智能提示，让你可以补全url地址。对于google的chrome的浏览器，甚至会直接从缓存中把网页展示出来，就是说，还没有按下enter，页面就出来了。
**（二）、**浏览器查找域名的IP地址
（三）、浏览器向web服务器发送一个HTTP请求
三次握手建立TCP连接
为什么需要三次握手：为了防止已失效的连接请求报文段突然又传送到了服务端，因为产生错误。
-扩展-
四次挥手
为什么挥手是四次？
这是因为服务端在LISTEN状态下，收到建立连接请求的SYN报文后，把ACK和SYN放在一个报文里发送给客户端。而关闭连接时，当收到对方的FIN报文时，仅仅表示对方不再发送数据了但是还能接收数据，己方也未必全部数据都发送给对方了，所以己方可以立即close，也可以发送一些数据给对方后，再发送FIN报文给对方来表示同意现在关闭连接，因此，己方ACK和FIN一般都会分开发送。
（四）、服务器的永久重定向响应
服务器给浏览器一个301永久重定向响应，意思是就地址A的资源已经被永久的移除了，这个资源不可访问了，搜索引擎在抓取新内容的同时也将旧的网址交换为重定向之后的网址。
302表示旧地址A的资源还在，这个重定向只是临时地从旧地址A跳到地址B，搜索引擎会抓取新的内容而保存旧的网址。
重定向的原因：
- 网站调整（如改变目录结构）
- 网页被移到一个新地址；
- 网页扩展名改变
（五）、服务器处理请求
后端从在固定的端口接收到TCP报文开始，它会对TCP连接进行处理，对HTTP协议进行解析，并按照报文格式进一步封装成HTTP Request对象，供上层使用。
一些大的网站会将你的请求到反向代理服务器中，因为当网站访问量非常大，网站越来越慢，一台服务器已经不够用了。于是将同一个应用部署在多台服务器上，将大量用户的请求分配给多台机器处理。
此时，客户端不是直接通过HTTP协议访问某网站应用服务器，而是先请求到Nginx，Nginx再请求应用服务器，然后将结果返回给客户端，这里Nginx的作用是反向代理服务器。同时有一个好处，其中一台服务器挂了，只要还有其他服务器正常运行，就不会影响用户使用。
通过Nginx的反向代理，我们到达了web服务器，服务端脚本处理我们的请求，访问我们的数据库，获取需要获取的内容等等，当然，这个过程涉及很多后端脚本的复杂操作等。
（六）、服务器返回一个HTTP响应
1、构成：HTTP响应与HTTP请求相似，HTTP响应也由3个部分构成，分别是：状态行、响应头、响应正文。
（1）、状态行：由协议版本、数字形态的状态代码及相应的状态描述，各元素之间以空格分隔。
1）、协议版本：是用http1.0还是其他版本
2）、状态描述：状态描述给出了关于状态代码的简短的文字描述。比如状态代码为200时的描述为 ok
3）、状态码： 状态代码由三位数字组成，第一个数字定义了响应的类别，且有五种可能取值，如下：
1xx：信息性状态码，表示服务器已接收了客户端请求，客户端可继续发送请求。
- 100 Continue
- 101 Switching Protocols
2xx：成功状态码，表示服务器已成功接收到请求并进行处理。
- 200 OK
- 204 No Content成功，但不返回任何实体的主体部分
- 206 Partial Content 成功执行了一个范围请求
3xx：重定向状态码，表示服务器要求客户端重定向。
- 301 Moved Permanently 永久性重定向，响应报文的Location首部应该有该资源的新URL
- 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 表示客户端请求有语法错误，不能被服务器所理解
- 401 Unauthonzed 表示请求未经授权，该状态代码必须与 WWW-Authenticate 报头域一起使用
- 403 Forbidden 表示服务器收到请求，但是拒绝提供服务，通常会在响应正文中给出不提供服务的原因
- 404 Not Found 请求的资源不存在，例如，输入了错误的URL
5xx：服务器错误状态码，表示服务器未能正常处理客户端的请求而出现意外错误。
- 500 Internel Server Error 表示服务器发生不可预期的错误，导致无法完成客户端的请求
- 503 Service Unavailable 表示服务器当前不能够处理客户端的请求，在一段时间之后，服务器可能会恢复正常
（2）、响应头**：**
（3）、响应正文
包含着我们需要的一些具体信息，比如cookie，html，image，后端返回的请求数据等等。
（七）、浏览器显示HTML
1、浏览器的主要功能
向服务器发出请求，在浏览器窗口中展示您选择的网络资源。
2、浏览器的主要组件：
_（1）、用户界面_～包括地址栏、前进/后退按钮、书签菜单等。除了浏览器主窗口显示的您请求的页面外，其他显示的各个部分都属于用户界面。
_（2）、浏览器引擎_～在用户界面和呈现引擎之间传送指令。
_（3）、呈现引擎_～负责显示请求的内容。如果请求的内容是 HTML，它就负责解析 HTML 和 CSS 内容，并将解析后的内容显示在屏幕上。
_（4）、网络_～用于网络调用，比如 HTTP 请求。其接口与平台无关，并为所有平台提供底层实现。
_（5）、用户界面后端_～用于绘制基本的窗口小部件，比如组合框和窗口。其公开了与平台无关的通用接口，而在底层使用操作系统的用户界面方法。
_（6）、JavaScript解释器_～用于解析和执行 JavaScript 代码。
_（7）、数据存储_～这是持久层。浏览器需要在硬盘上保存各种数据，例如 Cookie。新的 HTML 规范 (HTML5) 定义了“网络数据库”，这是一个完整（但是轻便）的浏览器内数据库。
3、呈现引擎基本流程
呈现引擎一开始会从网络层获取请求文档的内容，内容的大小一般限制在8000个块以内。然后进行如下所示的基本流程：解析HTML构建DOM树 -> 构建render tree -> render tree布局 -> 绘制渲染树
主流程式例：
webkit 主流程：
mozilla的Gecko呈现引擎主流程：
详细过程一览：
1、解析和DOM树构建
（1）、解析-综述
解析过程分为词法分析和语法分析。
词法分析是将输入内容分割成大量标记的过程。标记是语言中的词汇，即构成内容的单位，在人类语言中，它相当于语言字典中的单词。
语法分析是应用语言的词法规则的过程。
解析器通常将解析工作分给以下两个组件来处理：词法分析器和解析器
解析过程：文档 -> 词法分析（使用词法分析器） -> 语法分析 （解析器）-> 解析树
翻译
解析通常是在翻译过程中使用的，而翻译是指将输入文档转换成另一种格式。
Source Code -> Parsing -> Parse Tree -> Translation -> Machine Code (编译流程)
（2）、HTML解析器
HTML解析器的任务是将HTML标记解析成解析树。
解析器的输出“解析树”是由 DOM 元素和属性节点构成的树结构。DOM 是文档对象模型 (Document Object Model) 的缩写。它是 HTML 文档的对象表示，同时也是外部内容（例如 JavaScript）与 HTML 元素之间的接口。
解析树的根节点是“Document”对象
（3）、CSS解析
和 HTML 不同，CSS 是上下文无关的语法，可以使用简介中描述的各种解析器进行解析
（4）、处理脚本和样式表的顺序
脚本：网络的模型是同步的。网页作者希望解析器遇到
预解析：WebKit 和 Firefox 都进行了这项优化。在执行脚本时，其他线程会解析文档的其余部分，找出并加载需要通过网络加载的其他资源。通过这种方式，资源可以在并行连接上加载，从而提高总体速度。请注意，预解析器不会修改 DOM 树，而是将这项工作交由主解析器处理；预解析器只会解析外部资源（例如外部脚本、样式表和图片）的引用。
样式表：另一方面，样式表有着不同的模型。理论上来说，应用样式表不会更改 DOM 树，因此似乎没有必要等待样式表并停止文档解析。但这涉及到一个问题，就是脚本在文档解析阶段会请求样式信息。如果当时还没有加载和解析样式，脚本就会获得错误的回复，这样显然会产生很多问题。这看上去是一个非典型案例，但事实上非常普遍。Firefox 在样式表加载和解析的过程中，会禁止所有脚本。而对于 WebKit 而言，仅当脚本尝试访问的样式属性可能受尚未加载的样式表影响时，它才会禁止该脚本。
2、呈现树构建
（1）、呈现树和DOM树的关系
在DOM树构建的同时，浏览器还会构建另一个树结构：呈现树。这是由可视化元素按照其显示顺序而组成的树，也是文档的可视化表示。它的作用是让您按照正确的顺序绘制内容。
呈现树是和 DOM 元素相对应的，但并非一一对应。例如‘head’元素，或者display属性值为none的元素。
（2）、构建呈现树的流程
（3）、样式计算
构建呈现树时，需要计算每一个呈现对象的可视化属性。这是通过计算每个元素的样式属性来完成的。
样式包括来自各种来源的样式表、inline 样式元素和 HTML 中的可视化属性（例如“bgcolor”属性）。其中后者将经过转化以匹配 CSS 样式属性。
（4）、渐进式处理
3、布局
（1）、Dirty位系统
（2）、全局布局和增量布局
（3）、异步布局和同步布局
（4）、优化
（5）、布局处理
（6）、宽度计算
（7）、换行
4、绘制
（1）、全局绘制和增量绘制
（2）、绘制顺序
（3）、Firefox显示列表
（4）、WebKit矩形存储
（八）、浏览器发送请求获取嵌入在HTML中的资源（如图片、音频、视频、CSS、JS等等）
其实这个步骤可以并列在步骤8中，在浏览器显示HTML时，它会注意到需要获取其他地址内容的标签。这时，浏览器会发送一个获取请求来重新获得这些文件。
