在浏览器中输入URL之后,浏览器会经历以下5个步骤:

1.解析URL

2.DNS域名解析

3.浏览器与网站建立TCP链接(三次握手)

4.请求和传输数据

5.浏览器渲染页面

一、解析URL

什么是url:

URL(Universal Resource Locator) 同一资源定位符,俗称网页地址或者网址,用来表示某个网页资源的地址

URL主要由一下几个部分组成:
1、传输协议

2、服务器

3、域名

4、端口

5、虚拟目录

6、文件名

7、参数

8、锚

也就是说通常的url是这样的

连起来就是这样的 http://www.baidu.com:8021/pages/index.html?id=3&page=1#/name

我们见到的网站都是部署到线上的,一般不会显示端口号,‘?’到‘#’之间显示的是参数,多个参数用&隔开,‘#后面显示的是锚’。

当在浏览器中输入URL后,浏览器首先对拿到的URL进行识别,抽取出域名字段

二、DNS域名解析

DNS域名解析实际上是域名和IP对应的一个数据库

IP地址我们一般都难以记住,但是机器之间可以相互识别IP地址,于是人们发明了域名,让域名与IP地址之间一一对应,而他们之间的解析工作就称为域名解析,域名解析需要由专门的域名解析服务器来完成,这个过程是自动进行的。

在浏览器中可以输入IP地址来浏览网站,也可以输入域名来浏览网站,虽然得到的内容是一样的,但是调用的过程不是一样的,输入IP地址是直接从主机上调用地址,而输入域名是通过域名解析器指向对应的IP地址,再从主机调用内容。

在进行DNS域名解析时会经历以下几个步骤

查询浏览器缓存(浏览器会缓存之前拿到的DNS 2-30分钟时间)如果没有找到

检查系统缓存 检查hosts文件这个文件保存了以前反问过的网站的域名和IP数据,它就像是一个本地的数据库,如果找到就可以直接获取目标地址的IP地址,没有找的话就要

检查路由器缓存 路由器由自己的DNS缓存,可能就包括了这在查询的内容,如果没有的话就要

查询IPS DNS缓存 IPS服务商DNS缓存(本地服务器缓存)在这里可能有相关的内容,如果还是没有就要

递归查询 从根域名服务器到顶级域名服务器再到权限域名服务器依次搜索域名对应的IP

HTTP访问服务器

通过以上的查找就可以获得域名对应的IP了,接下来就是向该IP地址定位的HPP服务器发起TCP链接了

三、浏览器与网站进行TCP连接(三次握手)

第一次握手:客户端向服务器发送请求(SYN = 1)等待服务器确认;

第二次握手:服务器收到请求并确认,回复一个指令(SYN = 1, ACK = 1);

第三次握手:客户端收到服务器的回复指令并返回确认(ACK = 1)。

通过这三次握手就建立了客户端和服务器之间的连接,现在就可以发送请求和传输数据了

四、请求和传输数据

比如通过get请求访问"http://www.cnblogs.com/",通过浏览器的networ可以看见:

请求的网址('url'): https://www.cnblogs.com/

请求方式: GET

远程地址: 42.121.252.58:443

状态码: 200 OK

请求头 .......

响应头 .......

请求头中包含了一个cookie信息,Cookie如果是首次访问时,会提示服务器建立用户缓存信息,如果有cookie,可以利用cookies对应的键值,找到相应的缓存,缓存里面存放着用户名,密码,和一些用户设置.

通过这种GET请求,和服务器的响应,可以将服务器上得目标文件传输到浏览器进行渲染.

五、浏览器渲染页面

客户端拿到服务器端传输回来的文件,找到HTML和MIME文件,通过MIME文件,浏览器知道要用页面渲染引擎来处理HTML文件.

1.浏览器会解析html远吗,然后创建一个DOM树.

在DOM树种,每一个HTML标签都有一个节点,并且每一个文本也有一个对应的文本节点.

2.浏览器解析CSS代码,计算出最终的样式数据,形成css对象模型CSSOM

首先会忽略不合理的css代码,之后会按照浏览器默认设置 --> 用户设置 --> 外链样式 --> 内联样式 --> HTML中的style样式顺序进行渲染.

3.利用DOM和CSSDOM构建一个渲染树(rendering tree)

渲染树和DOM树有点类似,单还是有所区别

DOM树完全和HTML标签一一对应,但是渲染树会忽略掉不需要喧嚷的元素,比如head,display:none的元素,而且一大段文本中的每一行在渲染树中都对应一个节点,渲染树中每一个节点都存储着对应的css属性

4.浏览器根据渲染树直接把页面绘制到屏幕上

相关连接

https://www.zhihu.com/question/34873227

http://blog.csdn.net/qq991029781/article/details/50938475

http://blog.csdn.net/lihongxun945/article/details/37830667

http://www.myexception.cn/go/1860953.html

http://www.nowcoder.com/discuss/3853?pos=264&type=1&order=0

http://www.cnblogs.com/xiaohuochai/p/4750444.html

http://baike.so.com/doc/1578352-1668460.html

http://www.cnblogs.com/simonbaker/p/4253832.html

原文

http://www.cnblogs.com/tisikcci/p/5866753.html

在浏览器中输入url回车之后会发生什么的更多相关文章

  1. 在浏览器中输入URL并回车后都发生了什么?

    1.解析URL ________________________________________________________________________ 关于URL: URL(Universa ...

  2. 浏览器中输入URL发生了什么

    浏览器中输入URL会发生什么呢?这是我们经常会问到的一个问题. 我们知道的都是会发送http请求,服务端会处理请求给我们响应的结果,浏览器会渲染html 页面 但其实会遗漏掉一些比较重要的东西.下面的 ...

  3. 【ASP.NET Core】EF Core - “影子属性” 深入浅出经典面试题:从浏览器中输入URL到页面加载发生了什么 - Part 1

    [ASP.NET Core]EF Core - “影子属性”   有朋友说老周近来博客更新较慢,确实有些慢,因为有些 bug 要研究,另外就是老周把部分内容转到直播上面,所以写博客的内容减少了一点. ...

  4. 在浏览器中输入URL按下回车键后发生了什么

    在浏览器中输入URL按下回车键后发生了什么 [1]解析URL[2]DNS查询,解析域名,将域名解析为IP地址[3]ARP广播,根据IP地址来解析MAC地址[4]分别从应用层到传输层.网络层和数据链路层 ...

  5. 深入浅出经典面试题:从浏览器中输入URL到页面加载发生了什么 - Part 3

    备注: 因为文章太长,所以将它分为三部分,本文是第三部分. 第一部分:深入浅出经典面试题:从浏览器中输入URL到页面加载发生了什么 - Part 1 第二部分:深入浅出经典面试题:从浏览器中输入URL ...

  6. 从浏览器中输入URL到页面加载的发生了什么-转载

    转:https://www.cnblogs.com/confach/p/10050013.html 背景 “从浏览器中输入URL到页面加载的发生了什么“,这是一道经典的面试题,涉及到的知识面非常多,但 ...

  7. 在浏览器中输入url地址 -> 显示主页的过程

    -来自<图解HTTP> 最近在进行前端面试方面的一些准备,看了网上许多相关的文章,发现有一个问题始终绕不开: 在浏览器中输入URL到整个页面显示在用户面前时这个过程中到底发生了什么.仔细思 ...

  8. 【转】浏览器中输入url后发生了什么

    原文地址:http://www.jianshu.com/p/c1dfc6caa520 在学习前端的过程中经常看到这样一个问题:当你在浏览器中输入url后发生了什么?下面是个人学习过程中的总结,供个人复 ...

  9. 在浏览器中输入URL后,执行的全部过程。会用到哪些协议?(一次完整的HTTP请求过程)

    在浏览器中输入URL后,执行的全部过程.会用到哪些协议?(一次完整的HTTP请求过程) 整个流程如下: 域名解析 为了将消息从你的PC上传到服务器上,需要用到IP协议.ARP协议和OSPF协议. 发起 ...

随机推荐

  1. log4net在release模式下无法生成文件或不写入日志

    在Debug模式一切正常,但是在release模式下log4net不工作,查了很多资料,终于解决.具体做如下检查修改. 1.检查log4net写入日志文件路径是否正确: 2.检查对应日志文件路径是否有 ...

  2. git中工作区,缓存区,本地库,远程库的简要区别

    git中工作区,缓存区,本地库,远程库的简要区别 实际上前三个名词对应到实体,都是你从远程仓库克隆下来的那个项目目录!只不过工作区就是你实际看到的目录和目录里的内容,当你修改/添加/删除了从远程仓库c ...

  3. 2019-03-28-day021-抽象类与接口类

    今日内容 type和class 继承 抽象类 接口类 多态 java 鸭子类型 pickle模块 collections.namedtuple type和class ##type ##class pr ...

  4. jQuery中extend()实现原理

    jQuery.extend使用的几种方式 1.jQuery.extend(源对象) jQuery源代码: if(length == i){ target = this; --i; } 示例1: var ...

  5. Bug02_MyBatis_org.apache.ibatis.binding.BindingException: Invalid bound statement (not found)

    我出现问题的原因是: 映射xml文件名写错了. 查资料,可以有以下解决办法 按以下步骤一一执行: 1:检查xml文件所在的package名称是否和interface对应的package名称一一对应 2 ...

  6. 2.5 SeleniumBuilder辅助定位元素

    前言对于用火狐浏览器的小伙伴们,你还在为定位元素而烦恼嘛?上古神器Selenium Builder来啦,哪里不会点哪里,妈妈再也不用担心我的定位元素问题啦!(但是也不是万能,基本上都能覆盖到) 2.5 ...

  7. RAC环境修改参数生效测试

    本篇文档--目的:实验测试在RAC环境下,修改数据库参数与单实例相比,需要注意的地方 --举例说明,在实际生产环境下,以下参数很可能会需要修改 --在安装数据库完成后,很可能没有标准化,初始化文档,没 ...

  8. OTG作为大容量设备

    /********************************************************************************* * OTG作为大容量设备 * 说明 ...

  9. Unity 3D还原Scene场景、市面多数游戏视角高度自定义、第三人称视角分离功能:平移、拖动、看向中心等

    Unity视角的高度自定义 本文提供全流程,中文翻译. Chinar 坚持将简单的生活方式,带给世人!(拥有更好的阅读体验 -- 高分辨率用户请根据需求调整网页缩放比例) Chinar -- 心分享. ...

  10. Electron 快速入门

    https://www.w3cschool.cn/electronmanual/p9al1qkx.html