输入url到渲染出页面的过程
输入地址
浏览器查找域名的 IP 地址
这一步包括 DNS 具体的查找过程,包括:浏览器缓存->系统缓存->路由器缓存...
浏览器向 web 服务器发送一个 HTTP 请求
服务器的永久重定向响应(从 http://example.com 到 http://www.example.com)
浏览器跟踪重定向地址
服务器处理请求
服务器返回一个 HTTP 响应
浏览器显示 HTML
浏览器发送请求获取嵌入在 HTML 中的资源(如图片、音频、视频、CSS、JS等等)
浏览器发送异步请求
1、我们开始在浏览器中输入网址的时候,浏览器其实就已经在智能的匹配可能得 url 了,他会从历史记录,书签等地方,找到已经输入的字符串可能对应的 url,然后给出智能提示。
2、在例如输入了 baidu 或者 qq 之类的域名后,我们可以按下 ctrl + enter ,来自动补全,生成 qq.com 或者 baidu.com 的网址,然后发起请求。请求一旦发起,浏览器首先要做的事情就是解析这个域名,一般来说,浏览器会首先查看本地硬盘的 hosts 文件,看看其中有没有和这个域名对应的规则,如果有的话就直接使用 hosts 文件里面的 ip 地址,说道这里,大家可能想到,这个地方就存在安全隐患了,如果有病毒把一些常用的域名,修改 hosts 文件,指向一些恶意的 ip,那么浏览器也会不加判断的去连接,是的,这正是很多病毒的惯用手法。如果在本地的 hosts 文件没有能够找到对应的 ip 地址,浏览器会向 dns 域名解析服务器发起域名解析请求,dns 的域名解析是递归的,(还有另外 dns 是迭代的),递归的 dns 首先会查看自己的 dns 缓存,如果缓存能够命中,那么就从缓存中把 ip 地址返回给浏览器,如果找不到对应的域名的 ip 地址,那么就向上转发请求,不管怎么说,这个递归查询的过程,对于浏览器来说是透明的,他只要坐等 ip地址送回来就可以了。
3、得到 ip 地址后,浏览器会开始构造一个 http 请求,一个典型的 http request header 一般需要包括请求的方法,例如 GET 或者 POST 等,不常用的还有 PUT 和 DELETE 方法,更加不常用的还有 HEAD 和 OPTION 以及 TRACE 方法,一般的浏览器只能发起 GET 或者 POST 请求,
应用层的 http 请求准备好后,
浏览器在传输层发起一条到达服务器的 tcp 连接,这个时候应该开始三次握手的过程,tcp 包被封装到网络层的 ip 包里面,ip 包再被封装到数据链路层的数据帧结构中,再通过物理层的比特流送出去,这些分层的意义在于分工合作,数据链路层通过 CSMA/CD 协议保证了相邻两台主机之间的数据报文传递,而网络层的 ip 数据包通过不同子网之间的路由器的路由算法和路由转发,保证了互联网上两台遥远主机之间的点对点的通讯,不过这种传输不可靠,于是可靠性就由传输层的 tcp 协议来保证,tcp 通过慢开始,乘法减小等手段来进行流量控制和拥塞避免,同时提供了两台遥远主机上进程到进程的通信,最终保证了 http 的请求头能够被远方的服务器上正在监听的 http 服务器进程收到,终于,数据包在跳与跳之间被拆了又封装,在子网与子网之间被转发了又转发,最后进入了服务器的操作系统的缓冲区,服务器的操作系统由此给正在被阻塞住的 accept 函数一个返回,将他唤醒。
4、http 服务器首先会查看重写规则,然后如果是文件真实存在,例如一些图片,或者 css js 等的静态文件,就会直接把这个文件返回
5、历经千辛万苦,我们请求的响应终于到达了客户端的浏览器,响应到达浏览器之后,浏览器首先判断状态码,如果是 200 开头的就好办,直接进入渲染流程,如果是 300 开头的就要去相应头里面找 location 域,根据这个 location 的指引,进行跳转,这里跳转需要开启一个跳转计数器,是为了避免两个或者多个页面之间形成的循环的跳转,当跳转次数过多之后,浏览器会报错,同时停止。如果是 400 开头或者 500 开头的状态码,浏览器也会给出一个错误页面。
当浏览得到一个正确的 200 响应之后,接下来面临的一个问题就是多国语言的编码解析了。
6、解决了字符集的问题,接下来就是构建 dom 树了,构建出来的 dom 本质上还是一棵抽象的逻辑树,构建 dom 树的过程中,如果遇到了由 script 标签包起来的 js 动态脚本代码,那么会把代码送到 js 引擎里面去跑,如果遇到了 style 标签包围起来的 css 代码,也会保存下来,用于稍后的渲染。如果遇到了 img 等引用外部文件的标签,那么浏览器会根据指定的 url 再次发起一个新的 http 请求,去把这个文件拉取回来,值得一提的是,对于同一个域名下的下载过程来说,浏览器一般允许的并发请求是有限的,通常控制在两个左右,所以如果有很多的图片的话,一般出于优化的目的,都会把这些图片使用一台静态文件的服务器来保存起来,负责响应,从而减少主服务器的压力。
7、dom 树构造好了之后,就是根据 dom 树和 css 样式表来构造 render 树了,这个才是真正的用于渲染到页面上的一个一个的矩形框的树,对于 render 树上每一个框,需要确定他的 x y 坐标,尺寸,边框,字体,形态,等等诸多方面的东西,render 树一旦构建完成,整个页面也就准备好了。
需要说明的是,下载页面,构建 dom 树,构建 render 树这三个步骤,实际上并不是严格的先后顺序的,为了加快速度,提高效率,让用户不要等那么久,现在一般都并行的往前推进的,现代的浏览器都是一边下载,下载到了一点数据就开始构建 dom 树,也一边开始构建 render 树,构建了一点就显示一点出来,这样用户看起来就不用等待那么久了。
输入url到渲染出页面的过程的更多相关文章
- 浏览器从输入URL到渲染出页面发生了什么
总体来说分为以下几个过程: 1. DNS解析 2. TCP连接 3. 发送HTTP请求 4. 服务器处理请求并返回HTTP报文 5. 浏览器解析渲染页面 6. 连接结束 参考资料:[https:// ...
- 浏览器从输入URL到渲染完页面的整个过程
从输入URL到渲染出整个页面的过程包括三个部分: 1.DNS解析URL的过程 2.浏览器发送请求与服务器交互的过程 3.浏览器对接收到的html页面渲染的过程 一.DNS解析URL的过程 DNS解析的 ...
- 从输入url到浏览器显示页面的过程
总体来说有两个大的方面: 一.网络通信连接部分.二.页面渲染展示部分. 细分详细过程: (网络通信) 1.输入url. 2.DNS解析域名. 3.拿到IP地址后,浏览器向服务器建立tcp连接. 4.浏 ...
- 输入URL到浏览器显示页面的过程,搜集各方面资料总结一下
面试中经常会被问到这个问题吧,唉,我最开始被问到的时候也就能大概说一些流程.被问得多了,自己就想去找找这个问题的全面回答,于是乎搜了很多资料和网上的文章,根据那些文章写一个总结. 写得不好,或者有意见 ...
- 在浏览器中输入URL后,执行的全部过程。会用到哪些协议?(一次完整的HTTP请求过程)
在浏览器中输入URL后,执行的全部过程.会用到哪些协议?(一次完整的HTTP请求过程) 整个流程如下: 域名解析 为了将消息从你的PC上传到服务器上,需要用到IP协议.ARP协议和OSPF协议. 发起 ...
- 一个页面从输入url到加载完成的过程都发生了什么,请详细说明
1.首先,在浏览器地址栏中输入url 2.浏览器先查看浏览器缓存-系统缓存-路由器缓存,如果缓存中有,会直接在屏幕中显示页面内容.若没有,则跳到第三步操作 3.在发送http请求前,需要域名解析(DN ...
- 从用户浏览器输入url到用户看到页面结果的过程,发生了什么事情?
1.域名解析 域名解析的过程: 1).查询浏览器自身DNS缓存 2).若上面没有查找到,则搜索操作系统自身的dns缓存 3).若上面没有找到,则尝试读取hosts文件 4).若上面没有找到,向本地配 ...
- 从输入URL到浏览器显示页面发生了哪些事情---个人理解
经典面试题:从输入URL到页面显示发生了哪些事情 以前一直都记不住,这次自己理解了一下 用自己的话总结了一次,不对的地方希望大佬给我指出来 1.主机通过DHCP协议获取客户端的IP地址.子网掩码和DN ...
- 输入URL地址到最终页面渲染完成,发生了什么事
1. 域名DNS解析 - 浏览器DNS缓存 - 系统DNS缓存 - 路由器DNS缓存 - 网络运营商DNS缓存 - 递归搜索...... 2. TCP连接: TCP三次握手 - 第一次握手,由浏览器发 ...
随机推荐
- c语言基础学习02
=============================================================================涉及到的知识点有:include有两种用法.{ ...
- c++(八皇后)
八皇后是一道很具典型性的题目.它的基本要求是这样的:在一个8*8的矩阵上面放置8个物体,一个矩阵点只允许放置一个物体,任意两个点不能在一行上,也不能在一列上,不能在一条左斜线上,当然也不能在一条右斜线 ...
- 怎么去掉织梦网站首页带的index.html/index.php
方法1. 1)在空间面板里面找到默认首页设置: 我们是需要去掉index.html,这时我们只需要把index.html这个把它移到最顶级去就行,然后点击确定,在打开网站刷新下,就基本可以解决了! 其 ...
- SDK是什么?什么是SDK
从 SDK导航 看到的 应该比较专业! SDK的英文全名是:software development kit,翻译成中文的意思就是"软件开发工具包" 通俗一点的理解,是指由第三方服 ...
- [SinGuLaRiTy] 复习模板-高精度模板
[SinGuLaRiTy-1042] Copyright (c) SinGuLaRiTy 2017. All Rights Reserved. 结构体封装 //高精度运算 注意%I64d与%lld # ...
- goDaddy SSL证书 Nginx配置全流程 (转)
好长时间没动过这玩意了,今天突然用到,忘的一干二净.在此做个笔记吧! 一.购买Godaddy SSL证书 1.打开Godaddy官网 http://www.godaddy.com/: 2.点击网站导航 ...
- 新手数据比赛中数据处理方法小结(python)
第一次参加,天池大数据竞赛(血糖预测),初赛排名1%.因为自己对python不熟悉,所以记录一下在比赛中用到的一些python方法的使用(比较基础细节,大佬绕道): 1.数据初探 data.info( ...
- winform webbrowser如何强制使用ie11内核?
webkit.net ,cefsharp,openwebkit.net等这些基于谷歌或者基于firfox内核的浏览器有个共同点,就是必须指定winform为x86的才能使用, 而且使用过程中也是各种坑 ...
- 批处理注册dll时候 遇到错误:模块已加载,但对***dll的调用失败
解决方法 在批处理的第一行加入:cd /d %~dp0 然后在批处理上右键选择使用管理员权限运行
- [JAVA] - 从 m 个元素中随机选中 n 个
之前业务中曾经遇到过从m个元素中选取 n 个的需求,当时只是跑循环根据长度进行随机选取,然后放入 Set 中去重,一直到收集到足够的个数. 这样做的缺点很明显,当剩下的元素个数越少的时候,选取的元素越 ...