面试 - 地址栏输入url回车后, 发生了什么?

最新推荐文章于 2022-01-24 17:10:55 发布
最新推荐文章于 2022-01-24 17:10:55 发布
阅读量199 收藏 1
点赞数
分类专栏： JavaScript web-面试 文章标签： 网络 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46873254/article/details/119388573
版权

面试 - 地址栏输入url回车后, 发生了什么?目录

答案大致如下：

  1. 用户输入URL地址
  2. 浏览器解析URL解析出域名
  3. 浏览器将域名转换成服务器ip地址（浏览器先查找本地DNS缓存列表 没有的话 再向浏览器默认的DNS服务器发送查询请求 同时缓存）
  4. 浏览器将端口号从URL中解析出来
  5. 浏览器建立一条与目标Web服务器的TCP连接（三次握手另见文章 -> 面试-三次握手和四次挥手）
  6. 浏览器向服务器发送一条HTTP请求报文
  7. 服务器向浏览器返回一条HTTP响应报文
  8. 断开连接（四次挥手另见文章 -> 面试-三次握手和四次挥手)
  9. 关闭连接后, 浏览器解析文档, 渲染页面(重排、重绘)
  10. 如果文档中有资源 重复6 7 8 9 动作 直至资源全部加载完毕

在这里插入图片描述

SpringSir
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
在浏览器中输入 URL 并回车后都发生了什么？
07-31
在浏览器中输入 URL 并回车后都发生了什么？
输入URL按下回车后究竟发生了什么
10-23
作为一名软件开发或是网络技术人员，你应该对Web应用程序的运行原理和协议交换，以及涉及到的技术：如浏览器、HTTP、HTML、Web服务器和请求处理程序...在这篇文章中，我们将深入探讨你访问某个URL时发生的一系列事情。
在浏览器输入URL回车之后发生了什么？（超详细版）
01-07
这个问题已经是老生常谈了，更是经常被作为面试的压轴题出现，网上也有很多文章，但最近闲的无聊，然后就自己做了一篇笔记，感觉比之前理解更透彻了。 这篇笔记是我这两天看了数十篇文章总结出来的，所以相对全面...
在浏览器输入URL回车之后发生了什么.pdf
最新发布
07-03
。。。
当你在浏览器地址栏输入一个URL后回车，将会发生的事情？
06-05
作为一个软件开发者，你一定会对网络应用如何工作有一个完整的层次化的认知，同样这里也包括这些应用所用到的技术：像浏览器，HTTP，HTML，网络服务器，需求处理等等。
vue2.0动态代理详讲
weixin_46873254的博客
12-16 1129
2.配置示例 devServer: { proxy: { // 只要请求的路径中有 /pdf 就会走这个代理 '/pdf': { // 请求的路径会变成以下路径 target: 'http://61.186.254.137:20001', // 是否开启跨域(如果接口跨域，需要进行这个参数配置) chang
Vue2.x和Vue3.x-路由钩子详讲及对比
weixin_46873254的博客
09-14 996
Vue2.x和Vue3.x-路由钩子详讲及对比vue2.x前置概念:路由钩子分类路由和组件的概念(方便理解钩子函数)全局路由钩子路由配置守卫钩子组件内的守卫钩子路由钩子执行顺序vue3.x对比变化图区别补充: vue2.x 前置概念: 路由钩子分类 一共分3类, 7个钩子 路由和组件的概念(方便理解钩子函数) 路由和组件是2个概念, 可以粗犷的认为: 路由是浏览器网址 组件是显示在网页上的不同内容 全局路由钩子 router.beforeEach(to, from, next){ } 前
TypeScript中any、unknown、void、never类型讲解
weixin_46873254的博客
01-24 935
TypeScript中any、unknown、void、never类型讲解1. any2. unknown3. void4. never 1. any any: 表示任意类型都可以，开发中应尽量避免使用 let app:any = document.getElementById('box') 2. unknown unknown： 一般来说，这个类型并不是开发者手写的，是网络传来的，需要配和断言使用（在使用的时候需要明确这个变量的类型，可以多次指定类型） type A = {name:string} t
面试-vue自定义组件及2种调用方式
weixin_46873254的博客
09-09 774
引入: 由于项目需求, 部分相同的代码我们会封装成组件, 在需要使用的地方导入, 并以标签的形式书写在中, 但是在"vant"组件库中, "Dialog 弹出框"组件有2中使用方式 通常我们自定义组件, 一般也是通过方式二的形式使用, 今天介绍方式一如何使用 编码实现 以插件的形式使用组件 // 将要显示的组件导入 import mymodel from '../components/mymodel.vue' export default { install: function (Vue) {
vue刷新页面的两种方法(provide / inject的应用)
weixin_46873254的博客
09-13 635
方法1：直接调用函数 将整个页面重载, 以下两种都可以 window.location.reload() this.$router.go(0) 方法2：采用provide / inject(静刷新) 在高阶函数中声明一个reload刷新函数 <template> <div id="app" v-if="show"></div> </template> <script> export default { // 控制显示/隐藏, 实现
面试-MVC和MVVM区别-Vue为什么没有完全遵守MVVM?
weixin_46873254的博客
09-09 607
面试-MVC和MVVM区别-Vue为什么没有完全遵守MVVM?MVC和MVVM区别前述MVC概述优缺点MVVM概述MVVM实现者 --- VueVue为什么没有完全遵守MVVM? MVC和MVVM区别 前述 首先, 这两种都只是一种思想, 一种设计模式 很多编程语言根据这种思想设计出了很多框架, 例如Java中的SpringMVC, 前端中的Vue、React、Angular等 MVC 概述 数据要渲染到视图上   定义一个模板引擎   得到数据   再将数据渲染到模板引擎中 视图操作控制器   
数组中出现次数最多的数和出现的次数
weixin_46873254的博客
01-20 601
数组中出现次数最多的数和出现的次数 let arr = [44, 44, 44, 11, 22, 33, 22, 11, 22, 33, 44] // 找出每个元素出现的次数 let newObj = arr.reduce((accumulatorObj, value) => { accumulatorObj[value] ? accumulatorObj[value] = ++accumulatorObj[value] : accumulatorObj[value] = 1 retu
undefined与null的区别
weixin_46873254的博客
09-08 457
null 表示"没有对象"，即该处不应该有值。 典型用法是： 作为函数的参数，表示该函数的参数不是对象; 作为对象原型链的终点。 undefined 表示"缺少值"，就是此处应该有一个值，但是还没有定义。 典型用法是： 变量被声明了，但没有赋值时，就等于undefined; 调用函数时，应该提供的参数没有提供，该参数等于undefined; 对象没有赋值的属性，该属性的值为undefined; 函数没有返回值时，默认返回undefined。 ...
JS之预解析和变量提升
weixin_46873254的博客
08-07 291
什么是预解析? 概念: JS代码在在代码从上往下执行前，浏览器会先把所有变量声明解析一遍, 这个阶段叫预解析。 详讲 寻找作用域中的var 和function声明（匿名函数没有function声明，所以不会提升），然后对其进行事先声明, 并把赋值操作留在原地，再从上到下执行代码。这就是一个预解析的过程。 变量和函数预解析的区别 ​ 在预解析时，会把所有用 var 声明的变量, 和 function 声明的函数，提升到所在的作用域最顶端 var声明的变量, 在预解析的时, 只是提
前端-笔试-面试-题目
weixin_46873254的博客
09-10 237
for in和for of和Object.keys()区别 for in, 除了遍历自身的可枚举属性, 还会遍历原型链上所有可枚举的属性, 性能差一些; 开发不推荐使用; 支持遍历数组，类数组对象（DOM NodeList），字符串，Map 对象，Set 对象；不支持遍历普通对象； Object.keys() 遍历对象自身可枚举属性, Symbol 属性不会遍历到, 以数组形式返回 箭头函数和普通函数区别 定位position有几种? 盒模型有几种, 区别是什么, 怎么切换? 设置元素浮动后, 该元素
js中slice、split、splice、的比较
weixin_46873254的博客
09-07 223
js中slice、split、splice、的比较首先对单词释义slice注意split注意splice 首先对单词释义 slice: 强调的是用刀片将某个物体切割成某种特定的形状，因此常常用于食物、工业行业相关的切割。 split: 强调的是使用力量将一个物体切成两块或多块。强调的是原本一体的东西​被分割成了多块。 splice: 连接的意思 * 及物动词绞接; 捻接（两段绳子）; 胶接; 粘接（胶片、磁带等）; * 名词：胶接处，粘接处，铰接处 slice 语法: arr.slice(
JS三座大山-同步异步-作用域、闭包-原型、原型链
weixin_46873254的博客
08-07 218
JS三座大山 同步异步 前端中只有两个操作是异步的: 定时器异步执行; ajax异步请求 编译器解析+执行代码原理: 编译器从上往下逐一解析代码 判断代码是同步还是异步 同步：立即执行 异步：不执行。放入事件队列池 等所有同步执行完毕开始执行异步 同步异步区别 api : 异步有回调，同步没有回调 性能 ： 异步性能好（不阻塞线程） 同步会阻塞线程 顺序 ： 同步有序执行，异步无序执行 另: 回调函数：如果一个函数的参数是一个函数，那么这个参数函数叫做回调函数 作用域、闭包
面试-event loop（事件循环、事件轮询）机制-微任务与宏任务
weixin_46873254的博客
09-12 196
前置知识 JS是单线程的语言; 微任务: promise.then()方法 宏任务: 定时器, 网络请求, 渲染页面 注意: new Promise()的时候, 是同步代码 画图释义
面试-回调函数、promise、async--await区别
weixin_46873254的博客
09-08 179
回调函数容易引起代码的层层嵌套—>“回调地域”, promise就是解决回调地域、优化编码的, 但是并没有从根本上解决代码嵌套问题, async-await 函数则是在这个基础上做的进一步优化, 是es6的新特性, 一个语法糖, 它会返回promise中then方法的执行结果, 失败的结果用try-catch代码块这个你知道的 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值