输入url后发生了什么

输入url后发生了什么

这个问题的核心是在问从输入URL到页面渲染经历了哪些过程。

从耗时过程来看，可以分为DNS解析、TCP连接、HTTP请求与响应、客户端浏览器解析渲染、连接结束。其中浏览器解析渲染包含HTML词法、语法的解析、CSS解析、DOM树生成、渲染树建立、屏幕绘制。

下面针对几个较为重要的过程做下介绍。

DNS解析

当我们在浏览器中输入如www.taobao.com的时候，DNS解析充当了一个翻译的角色，把网址「翻译」成了IP地址。DNS解析的过程就是域名到IP地址的转换的过程。

域名解析也叫域名指向、服务器设置、域名配置以及反向IP登记等等。说得简单点就是将好记的域名解析成IP，服务由DNS服务器完成，把域名解析到一个IP地址，然后在此IP地址的主机上将一个子目录与域名绑定。

TCP连接

TCP连接的重要目的，是为了保证消息的有序和不丢包，为了建立可靠的数据传输，TCP通信双方相互告知初始化序列号，并确定对方已经收到ISN的，整个链接的过程就是我们俗称的三次握手。

HTTP请求与响应

HTTP请求它主要发生在客户端，发送HTTP请求的过程就是构建HTTP请求报文并通过TCP协议发送到服务器指定端口的过程。

还是用 https://www.taobao.com 举例子。

当在地址栏输入后，浏览器会分析这个url，并设置好请求报文发出。请求报文中包括请求行(包括请求的方法，路径和协议版本)、请求头(包含了请求的一些附加的信息，一般是以键值的形式成对存在)、空行(协议中规定请求头和请求主体间必须用一个空行隔开)、请求主体(对于post请求，所需要的参数都不会放在url中，这时候就需要一个载体了，这个载体就是请求主体)。服务端收到这个请求后，会根据url匹配到的路径做相应的处理，最后返回浏览器需要的页面资源。处理后，浏览器会收到一个响应报文，而所需要的资源就就在报文主体上。与请求报文相同，响应报文也有与之对应的起始行(响应报文的起始行同样包含了协议版本，与请求的起始行不同的是其包含的还有状态码和状态码的原因短语)、响应头(对应请求报文中的请求头，格式一致，但是各自有不同的首部)、空行、报文主体(请求所需要的资源)，不同的地方在于包含的东西不一样。

HTML词法、语法解析

对我们来说HTML其实是一坨字符串，而实际上我们要面对的是"字符流"。为了把字符流解析成正确的可被浏览器识别的结构，我们需要做的事情分为两步：

词法分析：把字符流初步解析成我们可理解的"词"，学名叫token。

语法分析：把开始结束标签配对、属性赋值好、父子关系连接好、构成dom树。

html结构其实不算太复杂，我们平时见到的大部分都只是标签、属性、注释、CDATA节点。

屏幕绘制

DOM树的生成和渲染树建立比较好理解这个就不做展开。完成了这「两棵树」的构造后，就进入屏幕绘制阶段。

在绘制的过程中，会遍历渲染树，调用由浏览器的UI组件的paint()方法在屏幕上显示对应的内容，并根据渲染树布局，计算CSS样式(即每个节点在页面中的大小和位置等几何信息)。

HTML默认是从上到下流式布局的，CSS和JS的加入会打破这种布局，改变DOM的外观样式以及大小和位置。这就引出两个非常重要的概念：replaint重绘和reflow重排。

replaint重绘，屏幕的一部分重新绘制，不影响整体布局，比如某个CSS的背景色变了，但元素的几何尺寸和位置不变。eflow重排： 意味着元件的几何尺寸变了，我们需要重新验证并计算渲染树。是渲染树的一部分或全部发生了变化。无论是重绘还是重排，对浏览器而言都是一种「消耗」，所以我们应该尽量减少这两种状态的触发。