在浏览器输入 URL 回车之后发生了什么(流程图,超详细版)
码农突围
共 6022字,需浏览 13分钟
· 2021-05-29
点击上方“码农突围”,马上关注 这里是码农充电第一站,回复“666”,获取一份专属大礼包 真爱,请设置“星标”或点个“在看
前言
大致流程
2、DNS 查询
3、TCP 连接
4、处理请求
5、接受响应
6、渲染页面
一、URL 解析
地址解析
HSTS
其他操作
检查缓存
二、DNS 查询
基本步骤
1、浏览器缓存
2、操作系统缓存
3、路由器缓存
4、ISP DNS 缓存
根域名服务器查询
需要注意的点
2、迭代方式,就是本地DNS服务器到根域名服务器查询的方式。
3、什么是 DNS 劫持
4、前端 dns-prefetch 优化
三、TCP 连接
1、应用层:发送 HTTP 请求
浏览器只能发送 GET、POST 方法,而打开网页使用的是 GET 方法
2、传输层:TCP 传输报文
关于 TCP/IP 三次握手,网上已经有很多段子和图片生动地描述了。 相关知识点:
3、网络层:IP协议查询Mac地址
注意:在 OSI 参考模型中 ARP 协议位于链路层,但在 TCP/IP 中,它位于网络层。
4、链路层:以太网协议
相关知识点:
四、服务器处理请求
大致流程
HTTPD
处理请求
2、验证虚拟主机是否接受此方法
3、验证该用户可以使用该方法(根据 IP 地址、身份信息等)
重定向
301
永久重定向响应,浏览器就会根据响应,重新发送 HTTP 请求(重新执行上面的过程)。关于更多:详见这篇文章
URL 重写
五、浏览器接受响应
六、渲染页面
浏览器内核
基本流程
1、HTML 解析
img
标签的 src
属性,并将这个请求加到请求队列中。<
, >
状态都会产生变化。注意:符号化和构建树是并行操作的,也就是说只要解析到一个开始标签,就会创建一个 DOM 节点。
DOM
对象并把这些符号插入到 DOM
对象中。
<html>
<head>
<title>Web page parsing</title>
</head>
<body>
<div>
<h1>Web page parsing</h1>
<p>This is an example Web page.</p>
</div>
</body>
</html>
DOMContentLoaded
事件来通知 DOM
解析完成。2、CSS 解析
div p{font-size:14px}
会先寻找所有的 p
标签然后判断它的父元素是否为 div
。3、 渲染树
注意:渲染树会忽略那些不需要渲染的节点,比如设置了 display:none
的节点。
auto
、百分比、px,比如把 rem
转化为 px
。specificity
的公式,这个公式会通过:2、是否内联样式
3、
!important
script
标签时,DOM 构建会被暂停,直至脚本完成执行,然后继续构建 DOM 树。2、JS 会阻塞后面的 DOM 解析
2、JS 放在 HTML 最底部,也就是
</body>
前4、布局与绘制
5、合并渲染层
6、 回流与重绘
html
标签开始递归往下,重新计算位置和大小。整编:微信公众号,搜云库技术团队,ID:souyunkudisplay:none
会触发回流,而visibility:hidden
只会触发重绘。
7、JavaScript 编译执行
1、词法分析
vara=2
,,分成 var
、 a
、 =
、 2
这样的词法单元。2、预编译
2、函数环境
3、eval
创建变量对象
参数、函数、变量
建立作用域链
确认当前执行环境是否能访问变量
确定 This 指向
3、执行
其中三个只是协助,只有 JS 引擎线程是真正执行的
setInterval
和 setTimeout
,用来计时,计时完毕后,则把定时器的处理函数推进事件队列中,等待 JS 引擎线程。Promise
, process.nextTick
。
console.log('1'); // 宏任务 同步
setTimeout(function() {
console.log('2'); // 宏任务 异步
})
newPromise(function(resolve) {
console.log('3'); // 宏任务 同步
resolve();
}).then(function() {
console.log('4') // 微任务
})
console.log('5') // 宏任务 同步
- END - 最近热文
• 拆解 1968年 的美国军用计算机,真的怀疑是 “ 穿越 ” 啊! • 再见!收费的XShell,我改用国产良心工具! • ERP已死,“中台”已凉,“低代码”称王! • “我辞退了一位学位学历造假的程序员”
评论
老爸嘲讽我了,写破代码一年就挣十几万,他在工地带50个工人,一个月光人头费就3万,让我滚回去跟他干!
点击上方 "大数据肌肉猿"关注, 星标一起成长点击下方链接,进入高质量学习交流群今日更新| 1052个转型案例分享-大数据交流群来自:网络,侵删有个网友的父亲是做工程的,天天就嘲笑他,说他天天写着破代码有啥用,一年就拿个十多万的死工资,然后告诉他自己在工地里面带了50个工人,一个月能抽三万
程序源代码
0
我发现这款浏览器真不错
“软件分享”只分享好玩有趣的黑科技软件很多人都知道我的电脑安装了10款浏览器,每一款浏览器都有自己的分工,国内外的浏览器基本都用过,今天我又发现了一款浏览器。下载用了一下午感觉还很符合国内用户使用,这款浏览器叫CentBrowser(百分浏览器)。可以说是谷歌浏览器增强版吧。Cent Browser
一锅汤软件
2
OpenUI:输入一段文字就能生成网!页!!
今天给大家介绍一个开源的 AI 网页生成工具:OpenUI!!!前言 在软件开发领域,用户界面(UI)的设计和构建确实是一个至关重要的环节。传统的 UI 开发需要设计师和开发人员紧密合作,通过反复的设计、修改和测试来达到理想的效果,这个过程往往耗时且成本较高。随着 AI 技术的发展,现在有越来越多的
前端技术江湖
0
美国司法部重判币安创始人CZ,他到底做错了什么?
注:4月24日,美国司法部表示币安创始人兼前首席执行官赵长鹏应在监狱服刑三年(36个月),根据给出的理由显示,美国司法部律师认为赵长鹏帮助币安违反联邦制裁和洗钱法,并称其必须付出更大的代价,所以应该提高刑期。就在审判前,CZ在写给负责此案件的法官理查德· A · 琼斯的一封信中,为自己的「错误决定」
区块链头条
3
面试官:在原生input上面使用v-model和组件上面使用有什么区别?
前言面试官:vue3的v-model都用过吧,来讲讲。粉丝:v-model其实就是一个语法糖,在编译时v-model会被编译成:modelValue属性和@update:modelValue事件。一般在子组件中定义一个名为modelValue的props来接收父组件v-model传递的值,然后当子组
高级前端进阶
0
周四002 瑞超:同样落寞的境遇——北雪平vs埃尔夫斯堡
上赛季最终排名联赛第9的北雪平本赛季伊始表现不佳,4轮战罢他们仅以1胜1平2负的战绩排在倒数第三,这支历史上曾夺得13次联赛冠军、6次杯赛冠军老牌劲旅,正如英格兰赛场上的一众百年俱乐部,在低谷中不断探索着出路。球队主教练安德烈亚斯·阿尔姆曾是AIK索尔纳及赫根队的主教练,他于今年年初刚刚拿起球队教鞭
产品与体验
0
【比特币减半后价格表现大揭秘】历史数据告诉你什么?
加密货币现状的十张图表Glassnode 和 Coinbase 发布了《加密货币市场指南》,这是一个季度系列,旨在提供对加密货币市场主要发展的详细分析。以下是报告中引起我们注意的10张图表:1.比特币主导地位从50%上升至52%通常由减半引发的山寨季会降低比特币的主导地位,使其更倾向于新的山寨币。这
区块链头条
0
面试官:电商库存扣减如何设计?如何防止超卖?
来源:my.oschina.net/xiaolyuh/blog/1615639👉 欢迎加入小哈的星球 ,你将获得: 专属的项目实战 / Java 学习路线 / 一对一提问 / 学习打卡 / 赠书福利全栈前后端分离博客项目 2.0 版本完结啦, 演示
小哈学Java
0