从浏览器输入网址到出现页面的过程？

1、DNS将域名解析ip地址

输入网址以后，浏览器会先去缓存中查找这个域名有没有对应的ip地址的关系，如果有的话，直接向ip地址发送请求，进行下一步。如果没有，再去找DNS服务器解析域名

 

2、建立TCP连接

拿到相应的ip地址以后，向该服务器发送请求。TCP三次握手就是一个问询的过程。客户端问询是否可以发送-服务器确认可以发送-客户端知道了可以发送。

例：

客户端：我可以做你男朋友吗？

服务器：可以哦

客户端：好的（在一起了牵手手了巴拉巴拉...）

 

3、发送HTTP请求

建立连接后，可以发送请求了。-http请求一般包含四个部分-请求头、空行、请求内容、请求行。

请求方法：post/delete/put/patch/get/head/trace/option

 

4、服务器处理请求

web服务器收到请求后知道了需要调度哪些资源来解析http请求的参数和信息，然后将请求的结果返回给客户端。

 

5、返回相应的结果

就是http的响应信息。http响应信息的结构分为状态码，响应内容。

 

状态码一般分为以下几种类型：

2-成功 200

3-重定向 304

4-客户端问题 404

5-服务器端问题 500

 

6、关闭TCP连接

四次挥手，问询关闭的过程。

例：

客户端：我想分手。

服务器端：我思考下我分不分...分吧

客户端：那我们分手吧。

服务器端：好的，滚犊子吧。

 

7、浏览器解析html+css+js+以及一些媒体资源

解析生成html的dom树，解析css生成cssom规则树，然后合成-生成渲染树

 

8、布局

遍历渲染树生成布局，计算每个节点的大小和位置信息。绘制，显示。

 

 

7和8浏览器解析过程：

解析html-生成dom树

解析css-生成规则树

合成-生成渲染树

遍历渲染树开始布局-计算每个节点的大小和位置

绘制-显示

 

需要注意的是：

html渲染规则-先解析css，后js，js和css的解析都会阻碍dom的解析，

渲染树的生成是左右形势渲染的，先生成dom，然后根据dom查找相应的css进行渲染。

 

这里还需要提到两个词：重绘和重排。

重绘：部分改变，整体布局不变。repaint

重排：渲染树变了，需要重新计算渲染树。reflow

重绘不一定重排，重排一定重绘