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

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

查询缓存

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

DNS服务器

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

TCP三次握手

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

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

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

HTTP协议包

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

浏览器处理HTML文档

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

渲染树
之后根据外部样式内部样式内联样式构建一个 CSS 对象模型树 CSSOM 树构建完成后和 DOM 树合并为渲染树在排除非视觉节点比如 scriptmeta 标签和排除 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全场面试官

写在最后

✨ $改变能改变的接受不能改变的$

👍 $点赞你的认可是我创作的动力$

⭐️ $收藏你的青睐是我努力的方向$

✏️ $评论你的意见是我进步的财富$

本期图书推荐
数学知识点经过系统梳理能让读者快速入门并掌握实际应用。全书分为两部分第一部分从机器学习数学基础的几大体系入手系统讲解机器学习的相关数学知识同时穿插了19个基于Python编程的“小试牛刀”实例以及20个“专家点拨”的知识第二部分安排了8个大型的基于Python编程的机器学习应用案例包括数学建模和工业应用方面的典型案例。

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