前端必备客户端、服务端基础整理

剑来丶阿良
1,267 阅读4分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第4天，点击查看活动详情

笔者作为一个菜狗前端，对于网络方面的基础知识还是欠缺很多很多，特学习做此笔记。

🚀下面就从一道经典面试题开始，当用户在浏览器地址栏输入地址，到最后看到网页，中间都经历了什么？

客户端:可以向服务器发请求，并接收返回的内容，进行处理。

服务端:能够接收客户端请求，并且把相关资源信息返回给客户端的

步骤如下:

①.url解析，将url解析成ip地址

②.DNS服务器域名解析

③.和服务器建立TCP链接

④.把客户端资源，传递给服务器(发送http请求)

⑤.服务器得到并处理请求(HTTP响应内容)

⑥.客户端渲染服务器返回的内容

⑦.和服务器断开TCP链接

接下来我们逐步的对上面7个步骤做详细的说明。

1.URL地址解析:

🚀 首先来区分下URI/URL/URN

  • URL(Uniform Resource Locator):统一资源定位器，根据这个地址，能找到对应的资源

  • URN(Uniform Resource name): 统一资源名称，一般指国际上通用的一些名字(例如：国际统一发版的编号)

  • URI(Uniform Resource identifier):统一资源标识符，URL和URN是RUI的子集

🚀 下面来看下一个完整的URL各个部分的名称：

例：http://www.loverYss.cn:80/gotolove/index.html?lover=xyq&xb=n#yongqi

  • 协议(http://):就类似于快递，有很多种SF、YT、YD等等，都负责运输物品，协议也是一样的，能够把客户端和服务端通信的信息进行传输的工具，常用的传输协议如下:

    • http：超文本传输协议,除了传递文本，还可以传递媒体资源文件（图片，视频）或者流文件，以及XML格式数据

    • https:更加安全的http协议，一般涉及支付的，都要才用https协议，s是ssl加密传输

    • ftp:文件上传协议（一般用户把本地资源上传到服务器）

  • 域名(www.loverYss.cn)

    • 顶级域名 loverYss.cn

    • 一级域名 www.loverYss.cn

    • 二级域名 go.loverYss.cn

    • 三级域名 always.go.loverYss.cn

    • .com 国际域名

    • .cn 中文域名

    • .com.cn

  • 端口号(:80)

    • 用端口号来区分，同一台服务器上不同的项目

  • 请求资源路径(/gotolove/index.html)

  • 问号传参信息(?lover=xyq&xb=n)

  • HASH值(#yongqi)

    • 可以充当信息传输方式
    • 锚点定位
    • 基于HASH是线路有管控，不同的HASH值，展示不同的组件和模块

🚀 给服务器通往后，会有两个IP地址:

  • 内网ip：局域网内访问
  • 外网ip:外部用户可以基于外网IP访问到到服务器

🚀 问号传参（?form=wx&yss=you）

客户端想把信息传递给服务器，有很多种方式

  • url地址问号传参
  • 请求报文传输（请求头和请求主题）

也可以不同页面之间的信息交互，例如：从列表到详情

2.DNS服务器域名解析:

dns服务器就是域名解析服务器，在服务器上储存着域名<=>服务器外网ip的相关记录

我们发送请求的时候，所谓的dns解析，其实就是根据域名在dns服务器上，查找到对应服务器上的外网IP

2.1 dns优化:

DNS缓存：一般浏览器会在第一次解析后，默认建立缓存，时间很短，只有一分钟左右

减少DNS解析次数：一个网站中，我们需要发送请求的域名和服务器尽可能减少

DNS预获取（dns-prefetch）：在页面加载开始的时候，就把当前页面中需要访问其他域名的信息进行提前DNS解析，以后加载到具体内容部分可以不用解析了

🚀 示例如下：

		<meta http-equiv="x-dns-prefetch-control" content='on'></meta>
		<link rel="dns-prefetch" href="//static.360buyimg.com"/>
    <link rel="dns-prefetch" href="//misc.360buyimg.com"/>
    <link rel="dns-prefetch" href="//img10.360buyimg.com"/>
    <link rel="dns-prefetch" href="//img11.360buyimg.com"/>
    <link rel="dns-prefetch" href="//img12.360buyimg.com"/>
    <link rel="dns-prefetch" href="//img13.360buyimg.com"/>
    <link rel="dns-prefetch" href="//img14.360buyimg.com"/>
    <link rel="dns-prefetch" href="//img20.360buyimg.com"/>
    <link rel="dns-prefetch" href="//img30.360buyimg.com"/>
    <link rel="dns-prefetch" href="//d.3.cn"/>
    <link rel="dns-prefetch" href="//d.jd.com"/>

3.TCP三次握手和HTTP报文：

3.1 三次握手🤝:

  • 第一次握手:由浏览器发起，告诉服务器，我要发请求了
  • 第二次握手:由服务器发起，告诉浏览器我准备好了，你麻溜的发送吧
  • 第三次握手:由浏览器告诉服务器，我马上发送了的，准备接收吧

3.2 HTTP报文:

请求报文:所有经过传输协议，客户端 => 服务器的内容，都被称为请求报文

  • 起始行
  • 请求头
  • 请求主体

响应报文:所有经过传输协议，服务器 => 客户端的内容，都被称为响应报文

  • http状态码
  • 响应头
  • 响应主体

HTTP报文：请求报文 + 响应报文

谷歌浏览器F12的newWork可以看到所有客户端和服务端的交互信息在这里都可以看到

avatar
文章
阅读
粉丝