本文摘自 https://yq.aliyun.com/articles/20667

浏览器向DNS服务器查找输入URL对应的IP地址。

DNS服务器返回网站的IP地址。

浏览器根据IP地址与目标web服务器在80端口上建立TCP连接

浏览器获取请求页面的html代码。

浏览器在显示窗口内渲染HTML。

窗口关闭时，浏览器终止与服务器的连接。

web前端性能：

即是web用户在访问一个页面时所要花费的时间总和。即一个完全意义上的用户响应时间，相对于服务器的响应时间而言还会包括更多的内容和影响因素。那么一个web页面的完整请求包括了哪些部分的时间总和就是web前段性能分析和优化所需要了解的基础知识，先了解一下用户从浏览器访问一个url后到页面完全展示所有内容的整个过程吧。

页面的请求过程：

1、浏览器的url请求

2、递归寻找DNS服务器

3、连接目标IP并建立TCP连接

4、向目标服务器发送http请求

5、web服务器接收请求后处理

6、web服务器返回相应的结果【无效、重定向、正确页面等】

7、浏览器接收返回的http内容

================================前端解析分割线===========================================

8、开始解析html文件，当然是自上而下，先是头部，后是body

9、当解析到头部css外部链接时，同步去下载，如果遇到外部js链接也是下载【不过js链接不建议放在头部，因为耽误页面第一展现时间】

10、接着解析body部分，边解析边开始生成对应的DOM树，同时等待css文件下载

11、一旦css文件下载完毕，那么就同步去用已经生成的DOM节点+CSS去生成渲染树

12、渲染树一旦有结构模型了，接着就会同步去计算渲染树节点的布局位置

13、一旦计算出来渲染的坐标后，又同步去开始渲染

14、10-13步进行过程中如果遇到图片则跳过去渲染下面内容，等待图片下载成功后会返回来在渲染原来图片的位置

15、同14步，如果渲染过程中出现js代码调整DOM树机构的情况，也会再次重新来过，从修改DOM那步开始

16、最终所有节点和资源都会渲染完成

=========================================分析结束分割线==============================================

17、渲染完成后开始page的onload事件

18、整个页面load完成

整个过程中会有很多的分别请求，所以TCP连接会很多，并且每一个用完都会自己关了，除非是keep-live类型的可以请求多次才关闭。