url地址输入到页面的经过

已于 2022-10-06 16:26:31 修改
阅读量334 收藏
点赞数
分类专栏： 前端 文章标签： 前端
于 2022-10-06 16:24:10 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hl971115/article/details/127184482
版权

简单理解如下
1.域名解析
2. 缓存检查(强缓存跟协商缓存)
强缓存在这里插入图片描述
协商缓存
在这里插入图片描述

  1. DNS 解析（解析有两种,递归查询跟迭代查询）
    先走递归 看本地
    3.1递归查询 在这里插入图片描述
    没有再去服务器上面去看
    3.2 迭代查询
    在这里插入图片描述
    4.三次握手 (这个是建立好TCP通道了,就开始传输数据了)
    客户端: 在嘛?
    浏览器: 在的
    客户端: 那你给我发送数据吧在这里插入图片描述5.数据传输 （数据传输完成就要断开连接了）
    6.四次挥手
    客户端: 在嘛, 我要关闭TCP通道传输了?
    浏览器: 好的
    浏览器: 我要把准备好的数据发给你
    客户端: 那你给我发送数据吧在这里插入图片描述

7.页面DOM树渲染

在这里插入图片描述
性能优化
在这里插入图片描述

具体的可以看这个视频,讲的挺好的 连接

快乐的蜜蜂
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
概述一个页面从输入URL到页面加载完的过程
11-29
过程概述 浏览器查找域名对应的 IP 地址； 浏览器根据 IP 地址与服务器建立 ... 域名（ DN ）：IP 地址由四个数字组成，中间用点号连接，在使用过程中难记忆且易输入错误，所以用我们熟悉的字母和数字组合来代替
09-输入url到页面展示.md
最新发布
03-31
现代前端工程师已经不单单是开发页面了，你可能需要去开发移动端、服务端。或者和他们有亲密的合作，你需要了解他们的运作流程。 企业想要招聘到一些全能型的工程师，能在工作中串通上下流程，而不是只做开发。 ##...
前端防止url输入地址直接访问页面
qq_15058285的博客
08-16 4663
首先，解决这个问题要搞明白此url是从程序内部跳转还是直接在地址栏输入的，如果是程序内部跳转，那就好办啦。方法如下： 判断用户是否登录状态，是否携带token 使用router.beforeEach注册一个全局前置守卫，判断用户是否登录。 router.beforeEach((to, from, next) => { if (to.path === '/login') { ...
地址栏输入URL到显示页面的过程
qq_44918331的博客
03-07 3467
前言 从地址栏输入URL到显示页面都发生了什么？这是一道面试经常会考的面试题。那么下面我们就来探讨一下从你输入URL后到响应，都经历了哪些过程。 1、DNS解析 我们在用户PC中使用网页浏览器来访问外部服务器的内容，在网页浏览器的地址栏中输入外部服务器的域名。比如我们输入www.porttest.com，用户PC中的DNS客户端进程会发送一个DNS查询请求报文，其内容为域名www.porttest.com 所对应的IP地址是什么？ DNS 的查询请求报文需要使用运输层的UDP协议封装成UDP用户数据报，其首
从输入URL到页面展示的详细过程
王龙楷
03-30 5万+
其实从输入URL到页面展示在我们眼前所经历的过程其实还是非常复杂的，牵扯到的知识点也是非常的庞杂。其中很多知识都会有专门的学科去研究，所以这里只是简单地概括一下大致流程：1、输入网址2、DNS解析3、建立tcp连接4、客户端发送HTPP请求5、服务器处理请求　6、服务器响应请求7、浏览器展示HTML8、浏览器发送请求获取其他在HTML中的资源。下面是转载自https://www.cnblogs.c...
输入URL到页面展示发生了什么
weixin_45709829的博客
03-25 3297
详解输入URL到浏览器页面展示过程都发生了什么 一、简单的过程总体概览 ①DNS域名解析 ②建立TCP连接 ③发送HTTP请求 ④服务器处理并返回HTTP报文 ⑤浏览器解析渲染页面 ⑥关闭TCP连接 二、详细过程解析 1、DNS域名解析 ​ 在浏览器输入熟悉的网址 比如www.baidu.com，这个叫做网址，并不是百度真实的地址，互联网中每一台机器都有唯一标识的ip地址。网址和ip地址的转换，就是DNS解析。 ​ 网址简单容易记住，但是ip地址很复杂，所以需要一个地址簿记录哪个ip对应哪一个网址，这个地址
浏览器输入url到页面展示出来的全过程
cute_ming的博客
04-23 2万+
基本流程： 1、用户在浏览器中输入url地址 2、浏览器解析域名得到服务器ip地址 浏览器会首先从缓存中找是否存在域名，如果存在就直接取出对应的ip地址，如果没有就开启一个DNS域名解析器。DNS域名解析器会首先访问顶级域名服务器，将对应的ip发给客户端；然后访问根域名解析器，将对应的ip发给客户端；最后访问本地域名服务器，得到最终的ip地址。 3、TCP三次握手建立客户端和服务器的连接 因为HTTP是基于TCP的可靠传输，所以在发送http数据报之前，需要先进行TCP的三次握手建立连接。三次握手
浏览器输入URL后发生了什么？
热门推荐
了解➔熟悉➔掌握➔精通
02-12 7万+
分享一个大牛的人工智能教程。零基础！通俗易懂！风趣幽默！希望你也加入到人工智能的队伍中来！请点击http://www.captainbed.net Definition Without violating encapsulation, capture and externalize an object's internal state so that the object can be re...
从输入URL到页面展示发生了什么？
澄白易的博客
06-19 2220
从输入url按下回车后，我们进入了第一步就是 DNS 解析过程，首先需要找到这个 url 域名的服务器 ip,为了寻找这个 ip，浏览器首先会寻找缓存，查看缓存中是否有记录缓存的查找记录为：浏览器缓存 -> 系统缓存 -> 路由器缓存，缓存中没有则查找系统的 hosts 文件中是否有记录。如果没有缓存则查询 DNS 服务器，得到服务器的 ip 地址后，浏览器根据这个 ip 以及相应的端口号发送连接请求；如果DNS服务器中没有解析成功，他会向上一步获得的顶级DNS服务器发送解析请求。这个连接请求到达服务器端后
浏览器输入url到页面渲染完成经历了哪些步骤
前端学习笔记
03-01 2024
确认字符 (Acknowledge character），在数据通信中，接收站发给发送站的一种传输类控制字符，表示发来的数据已确认接收无误。传输控制协议（Transmission Control Protocol），是一种面向连接的、可靠的、基于字节流的传输层通信协议。的时候就已经开始了，并不是等到接收完成后才开始，解析的过程是自上而下，先解析当前节点的所有子节点，再解析兄弟节点及其子节点。SYN=1, ACK=1, seq=y, ack=x+1（确认字符为1，序列号为x+1，此处seq为。
从输入URL到页面展示这中间发生了什么
好好学习天天向上
06-17 2378
仅仅打开了1个页面，为什么有4个进程？ 因为打开1个页面至少需要1个网络进程、1个浏览器进程、1个GPU进程以及1个渲染进程，共4个进程是一个程序运行的实例，操作系统会为进程创建独立的内存，用来存放运行所需要的代码和数据 线程是进程的组成部分，每个进程可以有多个线程其中至少一个主线程，这些线程由所属的进程进行启动和管理。进程和线程之间关系的特点:浏览器接收到输入的URL后，先对URL解析，把我们请求需要的协议、域名、端口、路径这些信息解析提取出来。 URL结构:，判断用户输入的是 还是？网络进程会查找本地
从浏览器地址栏输入URL到展示页面经历了什么？
程序媛的梦工厂
04-01 5277
本文主要写url到页面的具体过程，中间可能会涉及到缓存机制。 过程 首先，当输入url，浏览器会先从本地硬盘的host文件，找域名对应的IP，如果有的话直接就会使用host文件中的IP， 如果没有的话，就会继续向上寻找。找到本地DNS服务器一般由网络接入服务器商提供（中国电信，中国移动）。 本地DNS服务器查询它的缓存记录，有记录直接返回， 没有记录会采取递归的方式，向根服务器进行查询，根服务器...
利用jquery正则表达式在页面验证url网址输入是否正确
12-04
本文介绍的是使用jQuery正则表达式在前台页面验证url网址输入是否正确，代码如下： <!DOCTYPE html> <html> <head> [removed][removed] [removed] /** * 前台页面验证url网址输入是否正确 */ ...
2.输入url到页面呈现.rar
06-28
2.输入url到页面呈现.rar
failed to load response data出现的问题
小蜜蜂的博客
11-19 5万+
分片上传的时候,状态码请求是200的状态 但是 出现了,failed to load response data,没有response的返回 原因是,我分片的 每片大小太大了,分成了10M,所以出现了这个问题, const chunkSize = 1024 * 1024 * 10; 当我换成5M 上传 就可以 获取到了, const chunkSize = 1024 * 1024 * 5; ...
ts中简单的用法和存储器 get set 的用法
小蜜蜂的博客
09-29 1万+
一. class 种使用static的方法 // 定义Point的类型 interface Point { x: number, y: number } class Grid { //定义一个静态的对象类型 static init = { x: 0, y: 0 }; //我们在定义一个方法 area(point: Point) { // sta...
getBoundingClientRect()的用法
小蜜蜂的博客
11-06 5401
getBoundingClientRect() 平时可能没注意到 这个方法, Element.getBoundingClientRect() 方法返回元素的大小及其相对于视口的位置。 // 这个样子来获取鼠标点击位置的值,太麻烦了 // x=(e.pageX-canvasRect.offsetLeft+canvasRect.parentElement.scrollLeft) ; // y=(e.pageY-canvasRect.offsetTop+canvasRect.parentElement.scr
Angular中 # 的使用方法
小蜜蜂的博客
11-20 4449
一.首先我们在 html中写一个input 然后把定义的名字 传入方法中,然后 就可以在方法里面,获取到input的事件了 <input type="text" #aaa /> <button (click)="setName(aaa)">我要改名</button> setName(aaa: HTMLInputElement) { //做一些操作...
vue-cli 3.0中使用拦截器
小蜜蜂的博客
06-16 4162
首先 我们要创建cli3.0以上的项目 要查看一下node 版本 和 vue版本 然后 vue add @vue/cli 创建一个cli3.0的项目, 好了废话不多说了,直接开始吧 然后再项目的root位置创建一个vue.config.js 这个文件会在打包时跟webpack去合并 在里面我们来写一下 mock 后台的数据请求API // 安装方法 npm i body-parser --sa...
浏览器输入url到页面展示
07-10
1. 用户在浏览器地址栏中输入URL。 2. 浏览器将URL发送给DNS服务器，以获取域名的IP地址。 3. DNS服务器返回IP地址给浏览器。 4. 浏览器使用HTTP协议向服务器发送请求。 5. 服务器接收请求并返回响应。 6. 浏览器...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值