在浏览器输入URL到页面展示发生了什么?

输入URL后

  • 查询缓存
  • DNS服务器
  • TCP三次握手
  • HTTP协议包
  • 浏览器处理HTML文档
  • TCP 和 UDP 的区别
  • 写在最后

很多前端伙伴问题有没有体系的面试题?
今天为大家推荐一款刷题神奇哦 点击链接访问牛客网
各大互联网大厂面试真题。从基础到入阶乃至原理刨析类面试题 应有尽有,赶快来装备自己吧!助你面试稳操胜券,solo全场面试官

查询缓存

其实从填写上url按下回车后,我们就进入了第一步就是 DNS 解析过程,首先需要找到这个 url 域名的服务器 ip,为了寻找这个 ip,浏览器首先会寻找缓存,查看缓存中是否有记录缓存的查找记录为:浏览器缓存=》系统缓存=》路由 器缓存缓存中没有则查找系统的 hosts 文件中是否有记录,

DNS服务器

如果没有缓存则查询 DNS 服务器,得到服务器的 ip 地址后,浏览器根据这个 ip 以及相应的端口号发送连接请求;当然如果DNS服务器中没有解析成功,他会向上一步获得的顶级DNS服务器发送解析请求。

在这里插入图片描述

TCP三次握手

客户端和服务端都需要直到各自可收发,因此需要三次握手。

在这里插入图片描述

从图片可以得到三次握手可以简化为:

1、浏览器发送连接请求;
2、服务器允许连接后并发送ACK报文给浏览器;
2、浏览器接受ACK后并向后端发送一个ACK,TCP连接建立成功

HTTP协议包

构造一个 http 请求,这个请求报文会包括这次请求的信息,主要是请求方法,请求说明和请求附带的数据,并将这个 http 请求封装在一个 tcp 包中;这个 tcp 包也就是会依次经过传输层,网络层, 数据链路层,物理层到达服务器,服务器解析这个请求来作出响应;返回相应的 html 给浏览器;

浏览器处理HTML文档

因为 html 是一个树形结构,浏览器根据这个 html 来构建 DOM 树,在 dom 树的构建过程中如果遇到 JS 脚本和外部 JS 连接,则会停止构建 DOM 树来执行和下载相应的代码,这会造成阻塞,这就是为什么推荐 JS 代码应该放在 html 代码的后面

在这里插入图片描述

渲染树
之后根据外部样式,内部样式,内联样式构建一个 CSS 对象模型树 CSSOM 树,构建完成后和 DOM 树合并为渲染树,在排除非视觉节点,比如 script,meta 标签和排除 display 为 none 的节点,之后进行布局,布局主要是确定各个元素的位置和尺寸,之后是渲染页面,因为 html 文件中会含有图片,视频,音频等资源,在解析 DOM 的过 程中,遇到这些都会进行并行下载,浏览器对每个域的并行下载数量有一定的限制,一 般是 4-6 个,当然在这些所有的请求中我们还需要关注的就是缓存,缓存一般通过 Cache-Control、Last-Modify、Expires 等首部字段控制。

Cache-Control 和 Expires 的区别
在于 Cache-Control 使用相对时间,Expires 使用的是基于服务器 端的绝对时间,因为存 在时差问题,一般采用 Cache-Control,在请求这些有设置了缓存的数据时,会先 查看 是否过期,如果没有过期则直接使用本地缓存,过期则请求并在服务器校验文件是否修 改,如果上一次 响应设置了 ETag 值会在这次请求的时候作为 If-None-Match 的值交给 服务器校验,如果一致,继续校验 Last-Modified,没有设置 ETag 则直接验证 Last-Modified,再决定是否返回 304

到这里就结束了么?其实按照标题所说的到渲染页面我们确实到此就说明完了,但是严格意义上其实我们后面还会有TCP的四次挥手断开连接,这个我们就放到后面单独出一篇为大家介绍吧!

TCP 和 UDP 的区别

1、TCP 是面向连接的,udp 是无连接的即发送数据前不需要先建立链接。
2、TCP 提供可靠的服务。也就是说,通过 TCP 连接传送的数据,无差错,不丢失, 不重复,且按序到达;UDP 尽最大努力交付,即不保证可靠交付。 并且因为 tcp 可靠, 面向连接,不会丢失数据因此适合大数据量的交换。
3、TCP 是面向字节流,UDP 面向报文,并且网络出现拥塞不会使得发送速率降低(因 此会出现丢包,对实时的应用比如 IP 电话和视频会议等)。
4、TCP 只能是 1 对 1 的,UDP 支持 1 对 1,1 对多。
5、TCP 的首部较大为 20 字节,而 UDP 只有 8 字节。
6、TCP 是面向连接的可靠性传输,而 UDP 是不可靠的。

很多前端伙伴问题有没有体系的面试题?
今天为大家推荐一款刷题神奇哦 点击链接访问牛客网
各大互联网大厂面试真题。从基础到入阶乃至原理刨析类面试题 应有尽有,赶快来装备自己吧!助你面试稳操胜券,solo全场面试官

写在最后

改变能改变的,接受不能改变的!\textcolor{pink}{ 改变能改变的,接受不能改变的!}

👍 点赞,你的认可是我创作的动力!\textcolor{green}{点赞,你的认可是我创作的动力!}

⭐️ 收藏,你的青睐是我努力的方向!\textcolor{green}{收藏,你的青睐是我努力的方向!}

✏️ 评论,你的意见是我进步的财富!\textcolor{green}{评论,你的意见是我进步的财富!}

本期图书推荐
数学知识点经过系统梳理,能让读者快速入门并掌握实际应用。全书分为两部分,第一部分从机器学习数学基础的几大体系入手,系统讲解机器学习的相关数学知识,同时穿插了19个基于Python编程的“小试牛刀”实例,以及20个“专家点拨”的知识;第二部分安排了8个大型的基于Python编程的机器学习应用案例,包括数学建模和工业应用方面的典型案例。
在这里插入图片描述
本书是一本系统介绍机器学习所涉及的数学知识和相关Python编程的实例工具书,同时还介绍了非常经典的综合案例,除了编写机器学习的代码,还编写了深度学习的代码。本书一共分为两部分。
第一部分为数学基础知识部分,包含 8个章节,介绍了微积分、线性代数、概率统计、信息论、模糊数学、随机过程、凸优化和图论的系统知识体系及几个数学知识点对应的Python编程实例。通过这些实例,读者能够了解Scikit-learn、Scikit-fuzzy、Theano、SymPy、NetworkX和CVXPY中相应的库函数的应用。
第二部分为案例部分,包含4个章节,介绍了微积分、线性代数和概率统计问题的建模方法、求解流程和编程实现,以及工业生产领域的Python实战,包含了机器学习算法和深度学习PyTorch框架的应用。
在学习本书内容前,建议读者先掌握基本的Python编程知识和数学基础,然后将本书通读一遍,了解本书的大概内容,最后再跟着实例进行操作。
本书既注重数学理论,又偏重编程实践,实用性强,适用于对编程有一定基础,对系统的数学知识非常渴望,想从事人工智能、大数据等方向研究的读者。同时也适合作为广大职业院校相关专业的教材或参考用书。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/248460.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

iOS 高级去水印,涂鸦去水印

目前在研究一下图像的处理,看了一下相关的软件,比如:《去水印大师》,究竟去水印是怎么处理的呢?看图分析。 一共是三个功能:快速去水印、高级去水印、涂鸦去水印 快速去水印:暂时没找到好的处理…

Failed to execute goal maven-gpg-plugin 1.5 Sign

问题描述&#xff1a; 解决办法&#xff1a;跳过maven-gpg-plugin <build> <pluginManagement><plugins><plugin><groupId>org.apache.maven.plugins</groupId><artifactId>maven-gpg-plugin</artifactId><configuration&g…

一文搞懂this指向

前言 那你说一下 js 中的 this 指向吧&#xff01;这句话已经成为面试官口中的高频面试题&#xff0c;作为前端开发的我们&#xff0c;你真的搞懂了 this 指向了吗&#xff1f;快来跟我一起来查漏补缺吧&#xff01;通过几个小案例让大家更能直白的理解 this 指向。 很多前端伙…

难怪大家丢掉了postman而选择 Apifox

前言 当下采用前后端分离模式开发Web应用已经成为气候&#xff0c;在开发阶段有一个不成文的规定则是 项目开发后端先行 但是作为前端开发工程师的我们&#xff0c;难道在搭建完页面后只能等待后端的接口么&#xff1f;这样的话我们则完全被后端开发限制住了。在前面跟大家介绍…

mvc 模式和mtc 模式的区别

首先说说Web服务器开发领域里著名的MVC模式&#xff0c;所谓MVC就是把Web应用分为模型(M)&#xff0c;控制器(C)和视图(V)三层&#xff0c;他们之间以一种插件式的、松耦合的方式连接在一起&#xff0c;模型负责业务对象与数据库的映射(ORM)&#xff0c;视图负责与用户的交互(页…

HP LaserJet MFP M227_M231双面打印

双面打印设置 转载于:https://www.cnblogs.com/xiexiaokui/p/9261577.html

万木成林,我种了“Vue技能树”

初衷 作为Vue技能树的构建者&#xff0c;一直拖延到现在才来写这篇文章&#xff0c;主要还是心里没有底&#xff0c;前面殊不知这颗“树”是否促进了大家学习的热情&#xff0c;也不知它给大家带来了多少收获。说到我们的Vue技能树&#xff0c;我作为尤大大的忠实粉丝自就业后…

poj 3525

多边形内最大半径圆。 哇没有枉费了我自闭了这么些天&#xff0c;大概五天前我看到这种题可能毫无思路抓耳挠腮举手投降什么的&#xff0c;现在已经能1A了哇。 还是先玩一会计算几何&#xff0c;刷个几百道 嗯这个半平面交二分就阔以解决。虽然队友说他施展三分套三分***** 想象…

尤雨溪对 2022 Web前端生态趋势是这样看的

文章目录前言开发范式&底层框架方面趋势基于依赖追踪范式基于依赖追踪范式—共同点基于编译的响应式系统统一模型的优势和代价基于编译的运行是优化Vue Vapor Mode&#xff08;input&#xff09;工具链原生语言在前端工具链中的使用工具链的抽象层次基于 Vite 的上层框架上…

bzoj4919 [Lydsy1706月赛]大根堆

Description 给定一棵n个节点的有根树&#xff0c;编号依次为1到n&#xff0c;其中1号点为根节点。每个点有一个权值v_i。你需要将这棵树转化成一个大根堆。确切地说&#xff0c;你需要选择尽可能多的节点&#xff0c;满足大根堆的性质&#xff1a;对于任意两个点i,j&#xff0…

众多mock工具,这一次我选对了

文章目录写在前面Mock介绍Mock能解决什么问题?传统Mock解决方案Postman接口测试工具Mock js第三方库Eolink解决方案全局Mock高级Mock返回结果Mock智能内置Mock智能自定义Mock约束条件MockEolink的Mock解决方案的优势:写在最后写在前面 交战之前&#xff0c;战士必先利其兵器&…

高并发的理解和使用场景-----特意区别和多线程的关系

一&#xff0c;高并发的理解 1.概念&#xff1a;就是短时间内遇到大量操作请求&#xff0c;导致站点服务器/db服务器资源被占满甚至严重时直接导致宕 2.影响&#xff1a;没有做高并发预处理的系统会给用户很差的体验感&#xff1b; 3.系统好坏的衡量&#xff1a;衡量一个系统的…

async 和 await 原来这么简单

前言 前端同学们可能都知道 async 和 await 的使用&#xff0c;当被面试官问到 async 和 await 的是什么&#xff1f;或者说一说你对 async、await 的理解&#xff1f;如果我们还是仅仅去阐述我是如何使用的就显得格外的苍白无力。今天博主就来带大家进一步认识我们的 async 和…

我为何在 CSDN 乐在其中

文章目录写在前面成为博主究竟能得到什么&#xff1f;内在提升耀眼名片丰富眼界提升知名度博客》变现写在最后写在前面 各位伙伴大家好&#xff0c;我是几何心凉&#xff0c;一位不是很大的也不是很小的博主&#xff0c;今天想要跟大家去聊一些比较实在的内容&#xff1b;大家能…

10分钟设置免费远程桌面

文章目录前言远程桌面设置教程启动Amazon Lightsail实例配置远程桌面启动远程桌面使用远程桌面前言 “你见过洛杉矶凌晨4点的样子吗&#xff1f;” 没有也没关系&#xff0c;你可以轻松配置一台位于洛杉矶的免费远程桌面。 利用Amazon全球可用区&#xff0c;甚至可以在世界各…

BZOJ2690: 字符串游戏(平衡树动态维护Dfs序)

Description 给定N个仅有a~z组成的字符串ai,每个字符串都有一个权值vi,有M次操作&#xff0c;操作分三种&#xff1a;Cv x v:把第x个字符串的权值修改为vCs x a:把第x个字符串修改成aQ:求出当前的最大权字符串集合&#xff0c;使得这个集合中的字符串经过重新排列后满足除最后一…

【第一趴】初探uni-app(uni-app发行者、uni-app推出背景、为什么选择uni-app)

文章目录写在前面DCloud当下跨平台开发存在的问题为什么选择uni-app写在最后写在前面 聚沙成塔——每天进步一点点&#xff0c;大家好我是几何心凉&#xff0c;不难发现越来越多的前端招聘JD中都加入了uni-app 这一项&#xff0c;它也已经成为前端开发者不可或缺的一项技能了&…

Rocket - tilelink - Atomics

https://mp.weixin.qq.com/s/TSwKL_qm-b-0e8x7r--hhg 简单介绍Atomics中数学运算、逻辑运算的实现。​​1. ioAtomics是一个硬件模块&#xff0c;他继承自Modules&#xff1a;​​IO端口定义如下&#xff1a;​​其中&#xff1a;a. write: 是否写操作&#xff1b;b. a&#xf…

“勤学会”火爆来袭

文章目录勤学会是什么&#xff1f;勤学会存在的意义是什么强大的助学团勤学会如何帮助大家学习参与勤学会能得什么奖品专属C计划加入勤学会勤学会是什么&#xff1f; 他来了他来了&#xff0c;其实两个月前勤学会的概念产品就已经出现了&#xff0c;只不过因为了 1024 大型活动…

LeetCode -- 204. Count Primes

题目标签 HashTab&#xff08;哈希表&#xff09; 题意及思路 题意&#xff1a;略 思路&#xff1a;有关素数的题目我所知道有两种做法。一种是最基本的isPrime算法&#xff0c;关键点在循环判断时&#xff0c;上限为Math.sqrt(n) &#xff08;求n是否为素数&#xff09;。另外…