用户从地址栏输入url,按下enter键后,直到页面加载完成的这个过程都发生了什么?
流程大概描述一下:
用户将url输入后,服务器接受到请求,然后将这个请求进行处理,然后将处理后的结果返回给浏览器,浏览器将该结果以页面的形式呈现给用户。
详细描述:
1:用户将url(例如www.baidu.com)输入至地址栏并回车后,首先浏览器会开启一个线程来处理这个请求,对URL判断如果是http协议就按照web方式处理
2.然后浏览会先从搜索自身的DNS(Domain Name System,域名系统)缓存开始,一级一级往上搜索。意思是浏览器先在自身的DNS缓存(这涉及浏览器的缓存机制)中搜索是否有www.baidu.com这个域名;
如果浏览器未从自身的DNS缓存中搜索到(也有可能是因为缓存已经失效,即缓存的时间到期了。以chrome为例,你可以在地址栏输入:chrome://net-internals/#dns来查询自己曾经访问过的网站),那么浏览器会搜索操作系统(这里的操作系统代指的是你正在使用的计算机)自身的DNS缓存;
如果本地操作系统的DNS缓存还是没找到,那么浏览器便会尝试去读取本地的HOST文件,这个HOST文件可以根据以下路径找到,即C/Windows/System32/drivers/etc/hosts
如果在HOST文件中还是没有找到对应的配置项,那么便会从路由器(前提是你连接的是无线网络,如果是宽带连接,那么便会省略该步)缓存中搜索;
3.如果上述过程,在任一一个缓存中找到,那么便直接在屏幕中显示页面内容;如果都没找到的话,浏览器会发起一个DNS的一个系统调用,就是向本地主控DNS服务器(一般来说是你宽带运营商提供的服务器)发起一个域名解析请求;
宽带运营商服务器会查看本身缓存,查找对应的条目,看有没有过期或者有没有这个条目;如果依旧没查找到,运营商服务器会代替浏览器发起一个迭代DNS解析的请求。意思是运营商服务器会去找根域(就是运营商服务器的上级服务器)的DNS IP地址,如果根域服务器查不到www.baidu.com的IP地址,但能查到com域的顶级域的IP地址,那么它便会将com域的顶级域的IP地址返回给运营商服务器;
运营商服务器拿到后,会去询问com域的DNS服务器是否查的到www.baidu.com的IP地址,如果它查不到www.baidu.com的IP地址,但查的到baidu.com这个域的IP地址,那么它会将baidu.com域的IP地址返回给运营商服务器;
运营商服务器拿到后,会去询问baidu.com域的DNS服务器(这个服务器一般域名注册商提供的,如万维网等)能否查到www.baidu.com的IP地址。一般到这个域的时候,只要是经过网站注册备案的,都能在这里查到(如果还没查到,那么就要进行其他的处理了)。查到之后就把www.baidu.com的IP地址返回给运营商DNS服务器;
运营商DNS服务器拿到结果之后,会把这个结果返回给操作系统内核同时缓存(缓存的时间根据自己缓存时间长短来)起来,操作系统内核把结果返回给浏览器,浏览器最终就拿到了www.baidu.com对应的IP地址;
4.通过DNS服务器解析后获得了网址的IP地址后,浏览器向域名对应的IP地址服务器发起TCP连接,即发起HTTP“三次握手”(详细过程请参考:点击打开链接)。即这个tcp连接请求要经过层层的路由设备到达服务器端以后进入到网卡,然后进入到内核的TCP/IP协议栈,还有可能要经过防火墙的过滤,最终到达Web服务端,然后建立起TCP/IP的连接;
5.TCP/IP连接建立起来以后,浏览器就可以向服务器发送HTTP请求了;(例如GET请求一个根域里的一个域名地址,www.baidu.com)
6.服务器端接受到了这个请求后,根据路径参数,经过后端的一些处理之后,把处理后的结果返回给浏览器;(浏览器发送报头(请求报头),然后进入到web服务器上的 Web Server,如 Apache、Tomcat、Node.JS 等服务器,随后进入部署好的后端应用,如 PHP、Java、JavaScript、Python 等,找到对应的请求处理,最后处理结束回馈报头,将数据返回至浏览器。例如路径参数携带的是想搜索有关于TCP/IP的知识,服务器会把结果的HTML页面返回给浏览器)
7.浏览器拿到了完整的HTML页面代码或者其他的数据结果后,浏览器开始下载HTML文档,同时设置缓存并关闭TCP连接。浏览器在解析和渲染这个页面的时候,里面的js,CSS,图片等静态资源也是一个个HTTP请求,都需要经过上述的几个主要步骤;
8.浏览器根据拿到的资源对页面进行渲染,最终把一个完整的页面呈现给用户。(即浏览器对整个HTML结构进行解析,形成DOM树,同时对相应的CSS文件进行解析,形成CSS树,然后结合DOM树和CSS树形成一个绘制树。得到绘制树后,需要计算每个节点在页面中的位置,这个过程称为layout(布局)。layout的过程是在一个连续的二维平面上进行的,接下来,需要将这些结果栅格化,映射到屏幕的离散二维平面上,这一过程称为paint(着色)。现代浏览器为提升性能,将页面划分多个 layer,各自进行 paint 然后组合成一个页面(composite layers))
文稿来自:https://www.cnblogs.com/wangziyue/p/10419404.html
用户从地址栏输入url,按下enter键后,直到页面加载完成的这个过程都发生了什么?的更多相关文章
- 输入URL按下enter键后发生的事
输入URL按下enter键后浏览器和服务器各自发生的事. 浏览器 1.用户在浏览器中输入URL地址 2.浏览器解析用户输入的URL地址=>域名+端口 3.浏览器检查本地缓存中是否存在这个域名=& ...
- 一个页面从输入URL 到页面加载显示完成的过程中都发生了什么
前端面试/笔试必考问题,越详细越好 先简单得讲: 浏览器根据请求的URL交给DNS域名解析,找到真实IP,向服务器发起请求: 服务器交给后台处理完成后返回数据,浏览器接收文件(HTML.JS.CSS. ...
- 一个页面从输入url到页面加载显示完成,中间都经历了什么
第一种解释: 一般会经历以下几个过程: 1.首先,在浏览器地址栏中输入url 2.浏览器先查看浏览器缓存-系统缓存-路由器缓存,如果缓存中有,会直接在屏幕中显示页面内容.若没有,则跳到第三步操作. 3 ...
- 按下enter键后表单自动提交问题
在HTML的form表单里,按下enter键之后,默认情况下表单会自动提交. 在公司一个项目里,按下enter键自动提交表单的查询结果与按下搜索框的搜索结果页面显示不一样,按下搜索按钮之后是通过Aja ...
- jquery+html三级联动下拉框及详情页面加载时的select初始化问题
html写的三个下拉框,如下: <select name="ddlQYWZYJ" id="ddl_QYWZYJ" class="fieldsel ...
- 详解--从地址栏输入url到页面展现中间都发生了什么?
这是一个综合性很强的问题,个人理解包含以下七个基本点: 1.在浏览器地址栏输入url并按下回车. 2.浏览器检查当前url是否存在缓存和缓存是否过期. 3.域名解析(DNS解析url对应的ip). 4 ...
- 从输入url到页面加载完成发生了什么?——前端角度
这是一道经典的面试题,这道面试题不光前端面试会问到,后端面试也会被问到.这道题没有一个标准的答案,它涉及很多的知识点,面试官会通过这道题了解你对哪一方面的知识比较擅长,然后继续追问看看你的掌握程度.当 ...
- 从输入url到页面加载完成发生了什么详解
这是一道经典的面试题,这道题没有一个标准的答案,它涉及很多的知识点,面试官会通过这道题了解你对哪一方面的知识比较擅长,然后继续追问看看你的掌握程度.当然我写的这些也只是我的一些简单的理解,从前端的角度 ...
- 一个页面从输入URL到页面加载显示完成,这个过程都发生了什么?
对于网址栏的URL不同的操作方式有不同的加载资源.获取数据的方式,下面的详细过程针对"在地址栏输入URL,按enter(回车)键加载资源"此种操作方式做解析,其它的方式的过程大同小 ...
随机推荐
- 用webpack实现前端自动化构建
什么是自动化的前端构建流? 1. 自动补全css私有前缀,自动转化less\sass为css,自动转化es6\vue\jsx语法为js,自动打包小图片为base64以减少http请求,自动给js,cs ...
- Linux运维体系
- 【重构.改善既有代码的设计】14、总结&读后感
14.总结 首先,这是一本太老的书,很多观点已经被固化或者过时了.但核心观点没有问题,虽然大多数观点已经被认为是理所当然的事情了. 重构的定义 重构分几种: 1.狭义的代码重构 就是本书讲的, ...
- 阿里八八“好记”——UML设计
团队分工 叶文滔:软件整体框架部分 俞鋆:后端数据库部分 王国超:日程多日显示部分 黄梅玲:日程详细显示部分 张岳.刘晓.李嘉群:用户部分 UML设计 整体框架 用例图 类图 活动图 状态图 数据库部 ...
- PetaPoco轻量级ORM框架 - 对Database类的进行扩展,可以返回Table格式数据
一.有时我们需要将常用的功能添加到PetaPoco中的Database类中 实现方式有2种,以下以查询字段为例 1.通过扩展方式实现,此方式不改变被调用(Database)类名(只能增加方法) pub ...
- Google Chrome保存插件方法
1.拷贝下面地址到记事本 https://clients2.google.com/service/update2/crx?response=redirect&x=id%3D~~~~%26uc ...
- 本机未装Oracle数据库时Navicat for Oracle 报错:Cannot create oci environment 原因分析及解决方案
因为要更新数据库加个表,远程桌面又无法连接...所以就远程到另外一台电脑,然后用navicat通过内网修改目标数据库. 一直用着navicat操作数据库,所以很速度的弄好然后新建连接进入数据库. 然而 ...
- angularJs的工具方法3
一.angular.version 判断angular的版本 console.log(angular.version); 二.angular.equals 判断两 ...
- ZooKeeper学习之路 (七)ZooKeeper设计特点及典型应用场景
ZooKeeper 特点/设计目的 ZooKeeper 作为一个集群提供数据一致的协调服务,自然,最好的方式就是在整个集群中的 各服务节点进行数据的复制和同步. 数据复制的好处 1.容错:一个节点出错 ...
- 随手练——POJ - 2676 数独 (回溯法)
POJ - 2676 : http://poj.org/problem?id=2676: 解题思想 (大力出奇迹): 1. 依次在空格里面填上“1~9”,并检查这个数字是否合法(其所在的行.列,以及3 ...