当用户在浏览器地址栏输入一串URL到页面整个显示在用户面前时，这个过程中发生了什么呢？大致可以分为以下几步：
- 输入URL地址
- 浏览器查找域名的IP地址
- 浏览器向服务器发送一个HTTP请求
- 服务器定向响应
- 服务器跟踪定向地址
- 服务器处理请求
- 服务器返回一个HTTP响应
- 浏览器显示HTML并发送请求获取嵌入在HTML中的资源（CSS，JS等）
输入URL地址
当我们开始在浏览器中输入网址的时候，浏览器其实就已经在智能的匹配可能得 url 了，他会从历史记录，书签等地方，找到已经输入的字符串可能对应的 url地址。
域名解析，获取IP
当输入URL之后，浏览器会这个域名，转换为IP。
- 浏览器会首先查看本地hosts文件，看看其中是否有对应的IP，如果有就直接使用hosts文件中的IP地址
- 如果在本地hosts文件中没有找到对应的IP地址，浏览器会发送一个DNS请求到本地DNS服务器（本地DNS服务器一般就是个人网络接入服务商提供，比如中国移动，中国电信）
- 查询你输入的网址的DNS请求到达本地DNS服务器之后，本地DNS服务器会首先查询它的缓存记录，如果缓存中有此条记录，就可以直接返回结果，此过程是递归的方式进行查询。如果没有，本地DNS服务器还要向DNS根服务器进行查询。
- 根DNS服务器没有记录具体的域名和IP地址的对应关系，而是告诉本地DNS服务器，你可以到域服务器上去继续查询，并给出域服务器的地址。
- 本地DNS服务器继续向域服务器发出请求，在这个例子中，请求的对象是.com域服务器。.com域服务器收到请求之后，也不会直接返回域名和IP地址的对应关系，而是告诉本地DNS服务器，你的域名的解析服务器的地址。
6.最后，本地DNS服务器向域名的解析服务器发出请求，这时就能收到一个域名和IP地址对应关系，本地DNS服务器不仅要把IP地址返回给用户电脑，还要把这个对应关系保存在缓存中，以备下次别的用户查询时，可以直接返回结果，加快网络访问。
浏览器向 web 服务器发送一个 HTTP 请求
拿到域名对应的IP地址之后，浏览器会以一个随机端口（1024。这个连接请求到达服务器端后（这中间通过各种路由设备，局域网内除外），进入到网卡，然后是进入到内核的TCP/IP协议栈（用于识别该连接请求，解封包，一层一层的剥开）最终到达WEB程序，最终建立了TCP/IP的连接。
服务器定向响应
服务器给浏览器响应一个301永久重定向响应，这样浏览器就会访问“http://www.google.com/” 而非“http://google.com/”。
为什么服务器一定要重定向而不是直接发送用户想看的网页内容呢？其中一个原因跟搜索引擎排名有关。如果一个页面有两个地址，就像http://www.yy.com/和http://yy.com/，搜索引擎会认为它们是两个网站，结果造成每个搜索链接都减少从而降低排名。而搜索引擎知道301永久重定向是什么意思，这样就会把访问带www的和不带www的地址归到同一个网站排名下。还有就是用不同的地址会造成缓存友好性变差，当一个页面有好几个名字时，它可能会在缓存里出现好几次。
浏览器跟踪定向地址
现在浏览器知道了 "http://www.google.com/"才是要访问的正确地址，所以它会发送另一个http请求。
服务器处理请求
经过之前的步骤，我们将http请求发送到服务器这里，服务器后端从在固定的端口接收到TCP报文开始，它会对TCP连接进行处理，对HTTP协议进行解析，并按照报文格式进一步封装成HTTP Request对象，供上层使用。
服务器返回一个 HTTP 响应
经过之前的步骤，服务器收到了我们的请求，也处理我们的请求，到这一步，它会把它的处理结果返回，也就是返回一个HTPP响应。
浏览器显示HTML
在浏览器没有完整接受全部HTML文档时，它就已经开始显示这个页面了。不同浏览器可能解析的过程不太一样，这里我只介绍webkit的渲染过程，下面对应的就是WebKit渲染的过程，这个过程包括：
解析html以构建dom树 -> 构建render树 -> 布局render树 -> 绘制render树
浏览器在解析html文件时，会”自上而下“加载，并在加载过程中进行解析渲染。在解析过程中，如果遇到请求外部资源时，如图片、外链的CSS、iconfont等，请求过程是异步的，并不会影响html文档进行加载。
解析过程中，浏览器首先会解析HTML文件构建DOM树，然后解析CSS文件构建渲染树，等到渲染树构建完成后，浏览器开始布局渲染树并将其绘制到屏幕上。这个过程比较复杂，涉及到两个概念: reflow(回流)和repain(重绘)。
DOM节点中的各个元素都是以盒模型的形式存在，这些都需要浏览器去计算其位置和大小等，这个过程称为relow;当盒模型的位置,大小以及其他属性，如颜色,字体,等确定下来之后，浏览器便开始绘制内容，这个过程称为repain。
页面在首次加载时必然会经历reflow和repain。reflow和repain过程是非常消耗性能的，尤其是在移动设备上，它会破坏用户体验，有时会造成页面卡顿。所以我们应该尽可能少的减少reflow和repain。
浏览器发送请求获取嵌入在 HTML 中的资源
在浏览器显示HTML时，它会注意到需要获取其他地址内容的标签。这时，浏览器会发送一个获取请求来重新获得这些文件。
以上就是输入URL之后到页面展现的过程，本人初学文中借鉴了不少网上前辈的资料，在此记录方便学习查看。
网友评论