在浏览器输入网址,Enter之后发生的事情
简介:
1. 浏览器接收域名
2. 发送域名给DNS,中文名字是域名系统服务器,一般位于ISP(互联网服务提供商,比如我们熟知的联通、移动、电信等) 中。浏览器会首先发给离自己最近的DNS,DNS收到浏览器发来的域名,在自己的数据库和缓存中查找这个域名所对应的IP,如果没有他会询问其他的DNS,递归下去直到弄清楚IP。最后把结果返回给浏览器。
3. DNS返回域名所对应的IP地址
4. 浏览器向因特网中发出请求
5. 路由器依据IP地址,把包裹送达IP所对应的百度服务器
6.百度服务器看到包裹中的请求,把百度的搜索页面发送回浏览器,回来的时候也是依据你主机的IP地址才能将包裹正确送达。
详解:
- 在浏览器地址栏输入URL
- 浏览器查看缓存,如果请求资源在缓存中并且新鲜,跳转到转码步骤
- 如果资源未缓存,发起新请求
- 如果已缓存,检验是否足够新鲜,足够新鲜直接提供给客户端,否则与服务器进行验证。
- 检验新鲜通常有两个HTTP头进行控制
Expires和Cache-Control:- HTTP1.0提供Expires,值为一个绝对时间表示缓存新鲜日期
- HTTP1.1增加了Cache-Control: max-age=,值为以秒为单位的最大新鲜时间
- 浏览器解析URL获取协议,主机,端口,path
- 浏览器组装一个HTTP(GET)请求报文
- 浏览器获取主机ip地址,过程如下:
- 浏览器缓存
- 本机缓存
- hosts文件
- 路由器缓存
- ISP DNS缓存
- DNS递归查询(可能存在负载均衡导致每次IP不一样)
- 打开一个socket与目标IP地址,端口建立TCP链接,三次握手如下:
- 客户端发送一个TCP的SYN=1,Seq=X的包到服务器端口
- 服务器发回SYN=1, ACK=X+1, Seq=Y的响应包
- 客户端发送ACK=Y+1, Seq=Z
- TCP链接建立后发送HTTP请求
- 服务器接受请求并解析,将请求转发到服务程序,如虚拟主机使用HTTP Host头部判断请求的服务程序
- 服务器检查HTTP请求头是否包含缓存验证信息如果验证缓存新鲜,返回304等对应状态码
- 处理程序读取完整请求并准备HTTP响应,可能需要查询数据库等操作
- 服务器将响应报文通过TCP连接发送回浏览器
- 浏览器接收HTTP响应,然后根据情况选择关闭TCP连接或者保留重用,关闭TCP连接的四次握手如下:
- 主动方发送Fin=1, Ack=Z, Seq= X报文
- 被动方发送ACK=X+1, Seq=Z报文
- 被动方发送Fin=1, ACK=X, Seq=Y报文
- 主动方发送ACK=Y, Seq=X报文
- 浏览器检查响应状态吗:是否为1XX,3XX, 4XX, 5XX,这些情况处理与2XX不同
- 如果资源可缓存,进行缓存
- 对响应进行解码(例如gzip压缩)
- 根据资源类型决定如何处理(假设资源为HTML文档)
- 解析HTML文档,构件DOM树,下载资源,构造CSSOM树,执行js脚本,这些操作没有严格的先后顺序,以下分别解释
- 构建DOM树:
- Tokenizing:根据HTML规范将字符流解析为标记
- Lexing:词法分析将标记转换为对象并定义属性和规则
- DOM construction:根据HTML标记关系将对象组成DOM树
- 解析过程中遇到图片、样式表、js文件,启动下载
- 构建CSSOM树:
- Tokenizing:字符流转换为标记流
- Node:根据标记创建节点
- CSSOM:节点创建CSSOM树
- 根据DOM树和CSSOM树构建渲染树:
- 从DOM树的根节点遍历所有可见节点,不可见节点包括:1)
script,meta这样本身不可见的标签。2)被css隐藏的节点,如display: none - 对每一个可见节点,找到恰当的CSSOM规则并应用
- 发布可视节点的内容和计算样式
- 从DOM树的根节点遍历所有可见节点,不可见节点包括:1)
- js解析如下:
- 浏览器创建Document对象并解析HTML,将解析到的元素和文本节点添加到文档中,此时document.readystate为loading
- HTML解析器遇到没有async和defer的script时,将他们添加到文档中,然后执行行内或外部脚本。这些脚本会同步执行,并且在脚本下载和执行时解析器会暂停。这样就可以用document.write()把文本插入到输入流中。同步脚本经常简单定义函数和注册事件处理程序,他们可以遍历和操作script和他们之前的文档内容
- 当解析器遇到设置了async属性的script时,开始下载脚本并继续解析文档。脚本会在它下载完成后尽快执行,但是解析器不会停下来等它下载。异步脚本禁止使用document.write(),它们可以访问自己script和之前的文档元素
- 当文档完成解析,document.readState变成interactive
- 所有defer脚本会按照在文档出现的顺序执行,延迟脚本能访问完整文档树,禁止使用document.write()
- 浏览器在Document对象上触发DOMContentLoaded事件
- 此时文档完全解析完成,浏览器可能还在等待如图片等内容加载,等这些内容完成载入并且所有异步脚本完成载入和执行,document.readState变为complete,window触发load事件
- 显示页面(HTML解析过程中会逐步显示页面)
在浏览器输入网址,Enter之后发生的事情的更多相关文章
- 在浏览器输入网址,Enter之后发生了什么?
启动浏览器,在地址栏输入我们将要访问的网页,然后按一下回车,OK,成功进入! 在我们回车之后,发生了什么事情?为什么我们会访问到期待的网页,我们究竟访问了谁?如何访问到他的? 我简单的向大家介绍一下, ...
- 在浏览器输入网址到页面加载完毕中间到底发生了什么?(Browser-->Server)
最近在学习韩老师的php视频,中间有讲到发送请求到服务器返回内容,以前对这个理解并不深刻,虽然以前也知道一部分,这次听了之后收获良多:所以我就画了个流程图,从浏览器输入网址到服务器返回信息,浏览器渲染 ...
- [网络] 在浏览器输入URL回车之后发生了什么
目录 一 前言 二 URL解析 三 DNS域名解析 1 IP 地址 2 什么是域名解析 3 浏览器如何通过域名去查询 URL 对应的 IP 呢 4 小结 四 建立连接 1 TCP三次 ...
- Jupyter Notebook启动不会自动打开浏览器,每次都要自己打开浏览器输入网址
今天在使用jupyter 时,已启动服务,但每次都需要手动去浏览器 输入网址才可以, 最好找了好久才解决了. 去cmd 命令窗口执行jupyter notebook --generate-config ...
- HTTP-点开浏览器输入网址背后发生的那点事
前言 Internet最早来源于美国国防部ARPANet,1969年投入运行,到现在已有很长一段路了,各位想要了解发展史可以百度下,这里就不多说了. 现如今当我们想要获取一些资料,首先是打开某个浏览器 ...
- 浏览器输入URL后,发生了什么?(打开一个网页会使用哪些协议?)
简单说来分为6个过程 1.DNS解析 互联网每一个服务器都是以ip地址作为界限的,并不是我们平时输入的url地址,就比如www.ccc.com这一个网址,当输入进浏览器之后就会由DNS解析将它转化成一 ...
- 当浏览器输入url的时候发生了什么
当用户在浏览器地址栏里面输入一个url的时候.接下来会发生一系列的过程.首先是DNS解析, 将域名转换成对应的IP地址,之后浏览器与远程Web服务器通过TCP三次握手协商来建立一个TCP/IP连接.该 ...
- 在浏览器输入URL回车之后发生了什么?(超详细版)
前言 这个问题已经是老生常谈了,更是经常被作为面试的压轴题出现,网上也有很多文章,但最近闲的无聊,然后就自己做了一篇笔记,感觉比之前理解更透彻了. 这篇笔记是我这两天看了数十篇文章总结出来的,所以相对 ...
- 在浏览器输入URL回车后发生了什么?
本文由 简悦 SimpRead 转码, 原文地址 https://4ark.me/post/b6c7c0a2.html 这个问题已经是老生常谈了,更是经常被作为面试的压轴题出现,网上也有很多文章,但最 ...
随机推荐
- addeventlistener和attachevent
区别: 1.ie8及以下版本前者无效,只能使用后者: 2,关于第三个参数,如果是true则捕获状态触发,为false;则为冒泡状态触发 何为冒泡,何为捕获? 这就好比捕鱼,冒泡吗,鱼向上吐泡泡,所以当 ...
- 最短路径——floyd(多源最短路径)
#include <iostream> #include <cstdio> #include <cstdlib> #include <cstring> ...
- 第二十一次ScrumMeeting会议
第二十一次Scrum Meeting 时间:2017/12/11 地点:SPR咖啡馆 人员:王子铭 游心 解小锐 王辰昱 李金奇 杨森 陈鑫 赵晓宇 照片: 目前工作进展 名字 今日 明天的工作 蔡帜 ...
- Android 开发 之 JNI入门 - NDK从入门到精通
NDK项目源码地址 : -- 第一个JNI示例程序下载 : GitHub - https://github.com/han1202012/NDKHelloworld.git -- Java传递参数给C ...
- khan academy js
Documentation Quick Jump: Shapes, Complex Shapes, Colors, Text, Transforms, Environment, Mouse, Keyb ...
- 搭建github
http://www.cnblogs.com/liuxianan/p/build-blog-website-by-hexo-github.html
- ACM 第三天
A - Arpa’s hard exam and Mehrdad’s naive cheat CodeForces - 742A There exists an island called Arpa’ ...
- iOS- 移动端Socket UDP协议广播机制的实现
1.前言 什么是UDP协议广播机制? 举一个例, 例如在一群人群中,一个人要找张三,于是你向人群里大喊一声(广播):“谁是张三” 如果它是张三,它就会回应你,在网络中也是一样的. ...
- mysql三种备份方式
一.备份的目的 做灾难恢复:对损坏的数据进行恢复和还原需求改变:因需求改变而需要把数据还原到改变以前测试:测试新功能是否可用 二.备份需要考虑的问题 可以容忍丢失多长时间的数据:恢复数据要在多长时间内 ...
- js 控制
js 制动控制 代码 是 :setInterval(function(){$(".egg").click();},1000); 使用方法:调出浏览器放控制台(console),一般 ...