一、 输入URL,回车

  • 敲击某个键时,键盘内的处理器会先对键矩阵进行分析,然后将数据发送到计算机
  • 计算机接收到来自键盘的信号,由键盘控制器(一种集成电路)进行处理,发送给操作系统
  • 操作系统会分析,这些数据是否为系统命令,若不是,则将数据传给应用程序。
  • 应用程序会分析这些数据是否为命令,如果不是命令,则会将数据作为内容接受,否则忽略

二、浏览器解析URL

  1. 浏览器会对URL进行检查,是否合法,如果不合法会将输入内容传给默认的搜索引擎
  2. 针对当前URL检查是否存在本地缓存,如果有缓存就直接跳过请求阶段,从缓存中去取资源
  1. 浏览器再得到URL后,调用Socket,使用TCP协议,HTTP请求会被封装,加入本地端口,目标端口等信息
  2. IP地址是在IP协议中被封装的。但光有IP地址是不够的,因为设备是可以移动的,IP地址并不与设备绑定。所以还有一个MAC要被封装,每个网卡的MAC地址都是固定且唯一的

三、DNS解析

  1. DNS实际上是一个域名与IP对应的数据库,DNS解析主要是为了获取到域名对应的IP,用于下一步的连接建立

DNS的解析会按照以下顺序尝试获取IP,任意一步找到直接返回IP:

  1. 1. 查询浏览器缓存,浏览器会对最近访问的地址的DNS进行缓存,例如chrome对每个域名会默认缓存60s
  2. 2. 检查系统缓存,也就是hosts文件中配置的域名与IP的对应关系
  3. 3. 获取路由器的DNS缓存
  4. 4. 查询ISP服务商DNS缓存,即本地服务器缓存
  5. 5. 最后手段:递归查询,以 根域名服务器 --> 顶级域名服务器 --> 极限域名服务器 的顺序搜索对应域名的IP

通过Socket API发送数据,可以选择TCP或UDP协议

  1. 1. Socket(套接字)是计算机之间进行通信的一种约定或一种方式
  2. 2. 在应用层和传输层之间的一个抽象层
  3. 3. 它把TCP/IP层复杂的操作抽象为几个简单的接口
  4. 4. 供应用层调用已实现进程在网络中通信

三、建立连接;

根据上一步获取到的IP地址定位到目标主机,开始于其建立TCP连接,也就是三次握手建立连接:

  1. 第1次握手:客户端向服务器端发送请求(SYN=1)等待服务器确认;
  2. 第2次握手:服务器收到请求并确认,回复一个指令(SYN=1,ACK=1);
  3. 第3次握手:客户端收到服务器的回复指令并返回确认(ACK=1)。

四、服务器如何处理数据并返回数据

用上一步建立的连接发送http request请求命令和请求头信息

服务器收到信息都会返回应答头信息

五、关闭TCP连接,

  • http1.1已经支持keep-alive
  • 根据Connection请求头,如果是keep-alive服务器就保持住tcp连接
  • response传输完后主动关闭tcp连接。
  • 当然现在浏览器都是http1.1都默认是keep-alive的,在浏览器tab关闭时,tcp连接关闭。

六、检查状态码

如果response的状态码出现3XX(跳转),未授权(401),错误(4XX和5XX)会有不同的处理。

七、准备呈现

如果response status 为304(内容未更改)浏览器则会从本来缓存加载内容进行呈现

八、 浏览器如何处理服务器的响应

通过MIME类型,浏览器知道要用页面渲染引擎来处理HTML文件,整个渲染过程都由浏览器来处理,主要分为以下步骤:

  1. 解析资源文件(html)的源代码,构建出一个DOM树
  2. 解析CSS,形成css对象模型CSSOM,其中非法的css会直接被忽略掉
  3. 利用DOM和CSSOM构建一个渲染树
  4. 根据渲染树直接把页面绘制到浏览器窗口中

根据网络模型来的过程

应用层

HTTP、DNS

传输层

TCP/UDP

三网络层

IP

链路层

输入URL展示过程的更多相关文章

  1. 一次完整的HTTP事务的过程、从输入URL到网页展示,浏览器都经历了什么?

    详细介绍:老生常谈-从输入url到页面展示到底发生了什么 (1)一次完整的HTTP事务的过程 基本流程: a. 域名解析 b. 发起TCP的3次握手 c. 建立TCP连接后发起http请求 d. 服务 ...

  2. 浏览器从输入url 到页面展示完成响应过程

    用户从输入 url 到浏览器响应,呈现给用户的具体过程 1.用户在输入栏输入地址 (1) 如果有 beforeunload 事件会先执行判断继续还是跳出操作 (2) 浏览器进程识别是 地址还是关键字检 ...

  3. 从输入 URL 到浏览器接收的过程中发生了什么事情

    从输入 URL 到浏览器接收的过程中发生了什么事情? 原文:http://www.codeceo.com/article/url-cpu-broswer.html 从触屏到 CPU  首先是「输入 U ...

  4. 【原】老生常谈-从输入url到页面展示到底发生了什么

    刚开始写这篇文章还是挺纠结的,因为网上搜索“从输入url到页面展示到底发生了什么”,你可以搜到一大堆的资料.而且面试这道题基本是必考题,二月份面试的时候,虽然知道这个过程发生了什么,不过当面试官一步步 ...

  5. 【转】老生常谈-从输入url到页面展示到底发生了什么

    今天看到了一篇很详细地解释了从输入url到页面展示过程的文章,好文章不能错过,所以转到自己这里来了. 原文地址:老生常谈-从输入url到页面展示到底发生了什么 以下为原文: 刚开始写这篇文章还是挺纠结 ...

  6. 在浏览器中输入url地址 -> 显示主页的过程

    -来自<图解HTTP> 最近在进行前端面试方面的一些准备,看了网上许多相关的文章,发现有一个问题始终绕不开: 在浏览器中输入URL到整个页面显示在用户面前时这个过程中到底发生了什么.仔细思 ...

  7. (转)老生常谈-从输入url到页面展示到底发生了什么

    刚开始写这篇文章还是挺纠结的,因为网上搜索"从输入url到页面展示到底发生了什么",你可以搜到一大堆的资料.而且面试这道题基本是必考题,二月份面试的时候,虽然知道这个过程发生了什么 ...

  8. [转]从输入url到页面加载完成的过程中都发生了什么事情

    第一个问题:从输入 URL 到浏览器接收的过程中发生了什么事情? 从触屏到 CPU 首先是「输入 URL」,大部分人的第一反应会是键盘,不过为了与时俱进,这里将介绍触摸屏设备的交互. 触摸屏一种传感器 ...

  9. 从输入URL到页面加载完成的过程中都发生了什么事情?

    为了便于理解,我将整个过程分为了六个问题来展开. 第一个问题:从输入 URL 到浏览器接收的过程中发生了什么事情? 从触屏到 CPU 首先是「输入 URL」,大部分人的第一反应会是键盘,不过为了与时俱 ...

随机推荐

  1. inline hook原理和实现

    inline hook是通过修改函数执行指令来达到挂钩的.比如A要调用B,但人为地修改执行流程导致A调用了C,C在完成了自己的功能后,返回B再执行. 修改这段指令前首先要获取修改权限 由于要修改的代码 ...

  2. Linux环境下安装中山大学东校区iNode客户端

    在中山大学登录校园网有两种方式,一种是连接WiFi,另一种是连接网线.这两种上网方式都需要用到NetID,但是连接网线的话还需要使用到iNode客户端(指东校区). Windows下iNode客户端的 ...

  3. Spark面试题(四)

    1.Spark中的HashShufle的有哪些不足? 1)shuffle产生海量的小文件在磁盘上,此时会产生大量耗时的.低效的IO操作: 2)容易导致内存不够用,由于内存需要保存海量的文件操作句柄和临 ...

  4. Redis源码分析(skiplist)

    源码版本: redis-4.0.1 源码位置: server.h :zskiplistNode和zskiplist的数据结构定义. t_zset.c: 以zsl开头的函数是SkipList相关的操作函 ...

  5. fork()和vfork()的区别,signal函数用法,exec()系列函数的用法小结

    一:fork()和vfork()的区别:    fork()函数可以创建子进程,有两个返回值,即调用一次返回两个值,一个是父进程调用fork()后的返回值,该返回值是刚刚创建的子进程的ID;另一个是子 ...

  6. 【Python+postman接口自动化测试】(2)什么是接口?

    接口的概念 接口又称API(Application Programming Interface,应用程序编程接口),是一些预先定义的函数,目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的 ...

  7. PTA 是否二叉搜索树 (25分)

    PTA 是否二叉搜索树 (25分) 本题要求实现函数,判断给定二叉树是否二叉搜索树. 函数接口定义: bool IsBST ( BinTree T ); 其中BinTree结构定义如下: typede ...

  8. 基于hadoop_yarn的资源隔离配置

    目录 yarn的基本概念 scheduler 集群整体的资源定义 fair scheduler简介 配置demo 队列的资源限制 基于具体资源限制 基于权重资源限制 队列运行状态限制 基于用户和分组限 ...

  9. 华为开发者大会主题演讲:3D建模服务让内容高效生产

    内容来源:华为开发者大会2021 HMS Core 6 Graphics技术论坛,主题演讲<3D建模服务使能3D内容高效生产>. 演讲嘉宾:华为消费者云服务 AI算法专家 3D建模服务(3 ...

  10. ES6基础知识(Generator 函数)

    1.next().throw().return() 的共同点 next().throw().return()这三个方法本质上是同一件事,可以放在一起理解.它们的作用都是让 Generator 函数恢复 ...