一次完整的浏览器请求过程

从输入网址到页面收到请求这期间发生了什么过程

1.域名解析

2.发起TCP三次握手

3.建立TCP连接后发起http请求

4.服务器响应http请求，浏览器得到html代码

5.浏览器解析HTML代码，并请求HTML代码中的资源（如js和css和img）

6.浏览器对页面进行渲染呈现给用户

1.首先对于域名解析

输入域名，然后首先在浏览器DNS缓存中，但是保存时间很短，大概一分钟，1000条缓存。然后如果在有限时间里面没有找到，向本机的DNS服务器缓存中，没有找到的话，向根服务器请求，但是根域名服务器无法判断ip和域名对应关系，但是他知道是哪个顶级域名，也就是.com这种的ip地址，你去找他，然后找到域服务器后，他就可以查找这个这个解析域名的ip地址，然后寻找解析服务器（运营商提供），最终发来ip和域名的对应关系。

2.发起TCP三次握手

拿到域名对应的IP地址之后，User-Agent（一般是指浏览器）会以一个随机端口（1024< 端口 < 65535）向服务器的WEB程序（常用的有httpd,nginx等）80端口发起TCP的连接请求。这个连接请求（原始的http请求经过TCP/IP4层模型的层层封包）到达服务器端后（这中间通过各种路由设备，局域网内除外），进入到网卡，然后是进入到内核的TCP/IP协议栈（用于识别该连接请求，解封包，一层一层的剥开），还有可能要经过Netfilter防火墙（属于内核的模块）的过滤，最终到达WEB程序，建立TCP/IP连接

为什么HTTP协议要基于TCP来实现？

TCP是一个端到端的可靠的面向连接的协议，所以HTTP基于传输层TCP协议不用担心数据的传输的各种问题。

3.建立TCP/IP连接，发http请求

http协议的特点

• HTTP是无连接：无连接的含义是限制每次连接只处理一个请求。服务器处理完客户的请求，并收到客户的应答后，即断开连接。采用这种方式可以节省传输时间。
• HTTP是媒体独立的：这意味着，只要客户端和服务器知道如何处理的数据内容，任何类型的数据都可以通过HTTP发送。客户端以及服务器指定使用适合的MIME-type内容类型。
• HTTP是无状态：HTTP协议是无状态协议。无状态是指协议对于事务处理没有记忆能力。缺少状态意味着如果后续处理需要前面的信息，则它必须重传，这样可能导致每次连接传送的数据量增大。另一方面，在服务器不需要先前信息时它的应答就较快。

http协议的格式

客户端发送一个HTTP请求到服务器的请求消息包括以下格式：请求行（request line）、请求头部（header）、空行和请求数据四个部分组成

4.服务器端响应http请求，浏览器得到html代码

服务器端经过处理后返回状态码，然后浏览器接收到传来的HTML文件，下载到浏览器。

5.浏览器解析HTML代码，并请求HTML代码中的资源（如js和css和img）

浏览器下载完成HTML代码会将它解析，解析中的css,js图片等资源会开启另外的线程进行下载。这里有个特殊的是遇到JS文件会停止下来，因为这样节约性能，不然吧、先渲染css,后期js可能会改动。同时执行的就会造成元素不受控制。HTML解析成DOM树，CSS解析成CSS DOM树，然后合成一个Render 树。然后浏览器进行位置计算

6.浏览器对页面进行渲染呈现给用户

布局计算完成后，通过位置坐标。浏览器就可以准确渲染。

渲染流程：

1、解析文档构建DOM树
浏览器的解析内容可以分为三个部分：

HTML/XHTML/SVG：解析这三种文件后，会生成DOM树（DOM Tree）
CSS：解析样式表，生成CSS规则树（CSS Rule Tree）
JavaScript：解析脚本，通过DOM API和CSSOM API操作DOM Tree和CSS Rule Tree，与用户进行交互。
以上三类文件的执行顺序会根据其在文档中的位置及其标签属性的不同而有异同，具体在后文进行讨论。

2、构建渲染树
解析文档完成后，浏览器引擎会将 CSS Rule Tree 附着到DOM Tree 上，并根据DOM Tree 和 CSS Rule Tree构造 Rendering Tree（渲染树）。此处需要注意：

Render Tree和DOM Tree的区别在于，类似Head或display：node之类的东西不会放在渲染树中；
将CSS Rule Tree匹配到DOM Tree需要解析CSS的选择器，为了提高该过程的性能，DOM树应该尽量小，CSS Selector应该尽量使用id和class，避免过度层叠。
3、布局与绘制渲染树
解析position, overflow, z-index等等属性，计算每一个渲染树节点的位置和大小，此过程被称为reflow。最后调用操作系统的Native GUI API完成绘制（repain）。注意：

渲染树的节点，在Gecko中称为frame，而在webkit中称为renderer；