前端常问——计算机知识

文学少女圆
174 阅读18分钟

1. 计算机网络分层

为了增强计算机网络系统的灵活性，便于开发和维护，建立了一种层次结构模型，各层只管自己的事，通过拿到别的层的服务和数据来完成自己的任务，暴露出自己的接口给其他层或者应用程序使用。

1. 五层：物理层，链路层，网络层，传输层 和应用层

  • 物理层

   物理层说白了就是那些连线，光纤、双绞线之类的。

  • 链接层

   它也是计算机网络的低层，他的作用就是将从物理层接收的帧解析出数据交给网络层，以及，将网络层交下来的数据封装成帧交给物理层。（ps：数据在物理层一般叫帧，在网络层叫IP数据报或者包）。像适配器、转发器、集线器、网桥、交换机都被归在链接层。

  • 网络层

    网络层的作用是向上层提供简单灵活的、无连接的、尽最大努力交付的包服务，它不提供服务质量的承诺，它是为主机间提供逻辑通信。这里涉及到地址解析，路由等内容。常见的路由器可以归为网络层。

  • 传输层

   传输层是为应用进程之间提供端到端的逻辑通信。传说中的TCP三次握手、四次挥手**就发生在这里。这里需要重点关注。

传输层协议：

　　（1）TCP协议（传输控制协议）

　　（2）UDP（用户数据报协议）

  • 应用层

    域名解析、HTTP\ HTTPS、电子邮件等等都是应用层的范畴。应用层的协议比较多，我们重点关注HTTP 协议。

2. 传输层协议TCP、UDP的区别：

  • 　 TCP协议（面向连接的传输协议）：是一种面向连接的、可靠的、点对点、基于字节流的全双工的传输层通信协议，

  • 　UDP（用户数据报协议）：参考模型中一种无连接的传输层协议，提供面向事务的简单、不可靠的信息传送服务。

两者的区别：

（1）TCP面向连接（如打电话要先拨号建立连接）；UDP是无连接的，即发送数据之前不需要建立连接。

（2）TCP保证数据正确性，UDP可能丢包。

（3）TCP保证数据顺序，UDP不保证。

（4）每一条TCP连接只能是点到点的；UDP支持一对一，一对多，多对一和多对多的交互通信。

（5）流模式（TCP）与数据报模式(UDP)。 TCP面向字节流，实际上是TCP把数据看成一连串无结构的字节流; UDP是面向报文的，UDP没有拥塞控制，因此网络出现拥塞不会使源主机的发送速率降低对实时应用很有用，如IP电话，实时视频会议等）。

（6）TCP的逻辑通信信道是全双工的可靠信道，UDP则是不可靠信道。

3 传输层TCP三次握手、四次挥手

截屏2021-08-16 13.58.50.png

  • 首先Client端发送连接请求报文

  • Server端接受连接后回复ACK报文，并为这次连接分配资源。

  • Client端接收到ACK报文后也向Server段发生ACK报文，并分配资源，这样TCP连接就建立了。

截屏2021-08-16 14.00.13.png

  • 假设Client端发起中断连接请求，也就是发送FIN报文。

  • Server端接到FIN报文后，但是此时如果还有数据没有发送完成，则不必急着关闭Socket，可以继续发送数据。所以Server端先发送ACK，“告诉Client端，你的请求我收到了，但是我还没准备好，请继续你等我的消息”。

  • 这个时候Client端就进入FIN_WAIT状态，继续等待Server端的FIN报文。

  • 当Server端确定数据已发送完成，则向Client端发送FIN报文，告诉Client端，"好了，我这边数据发完了，准备好关闭连接了”。

  • Client端收到FIN报文后，就知道可以关闭连接了，所以发送ACK后进入TIME_WAIT状态。

  • Server端收到ACK后，就知道可以断开连接了”。

  • Client端等待了2MSL后依然没有收到回复，则证明Server端已正常关闭，那好，我Client端也可以关闭连接了。Ok，TCP连接就这样关闭了！ (2MSL即两倍的MSL,TCP的TIME_WAIT状态)

4 HTTP和HTTPS协议

  • HTTP和HTTPS区别：

传输信息安全性不同、连接方式不同、端口不同、证书申请方式不同

-1、http协议：是超文本传输协议，信息是明文传输。https协议：是具有安全性的ssl加密传输协议。

  • 2、http的连接很简单，是无状态的。https协议是由SSL＋HTTP协议构建的可进行加密传输、身份认证的网络协议。

  • 3、 HTTPS标准端口443，HTTP标准端口80;

-4、https：需要到ca申请证书，一般免费证书很少，需要交费。http：免费申请。

  • HTTP 1.x ，2.0 Http1.x缺陷：线程阻塞，在同一时间，同一域名的请求有一定数量限制，超过限制数目的请求会被阻塞

HTTP/2.0

特点：

采用二进制格式而非文本格式；

完全多路复用，而非有序并阻塞的、只需一个连接即可实现并行；

使用报头压缩，降低开销

服务器推送

  • HTTP缓存

截屏2021-08-16 15.25.53.png

当客户端向服务器请求资源时，会先抵达浏览器缓存，如果浏览器有“要请求资源”的副本，就可以直接从浏览器缓存中提取而不是从原始服务器中提取这个资源。

常见的http缓存只能缓存get请求响应的资源。

截屏2021-08-16 15.41.13.png

截屏2021-08-16 15.41.37.png

1、对于强制缓存，服务器通知浏览器一个缓存时间，在缓存时间内，下次请求，直接用缓存，不在时间内，执行协商缓存策略。 2、对于协商缓存，将缓存信息中的Etag和Last-Modified通过请求发送给服务器，由服务器校验，返回304状态码时，浏览器直接使用缓存。

2 输入URL到页面显示的过程

URL： 截屏2021-08-16 14.58.56.png

总体来说分为以下几个过程:

  • DNS 解析:将域名(网站)解析成 IP , 返回相对应的IP地址

  • TCP 连接：TCP 三次握手

  • 发送 HTTP 请求

  • 服务器处理请求并返回 HTTP 报文

  • 浏览器解析渲染页面

  • 断开连接：TCP 四次挥手

1. DNS 解析:将域名(网站)解析成 IP 地址

1.域名解析：DNS 协议提供通过域名查找 IP 地址，或逆向从 IP 地址反查域名的服务。DNS 是一个网络服务器，我们的域名解析简单来说就是在 DNS 上记录一条信息记录。

2.通过域名查找IP地址的过程：

  • 浏览器缓存
  • 操作系统缓存
  • 路由缓存
  • 互联网服务提供商(ISP)的 DNS 服务器， 有专门的 DNS 服务器应对 DNS 查询请求。
  • 根服务器

下面就以 www.baidu,com 这个网址来分析一下 dns 的解析过程。

[ 浏览器DNS缓存->系统DNS缓存->路由器DNS缓存->网络运营商DNS缓存 ->->递归搜索（blog.baidu.com）：.com域名下查找DNS解析->.baidu域名下查找DNS解析->blog域名下查找DNS解析->出错了]

当浏览器拿到输入的 www.baidu.com 后，首先会去浏览器的 DNS 缓存 中去查询是否有对应记录，如果查询到记录就可以直接返回 ip 地址，完成解析。

如果浏览器没有缓存，那就再去查询操作系统的缓存，同样的，如果查询到记录就可以直接返回 ip 地址，完成解析。

如果操作系统也没有缓存，那就再去查看本地 host 文件，Windows 下 host 文件一般位于 "C:\Windows\System32\drivers\etc"。

如果本地 host 文件也没有相应记录，那就需要求助于本地 dns 服务器了，所以应该要知道本地 dns 的 ip 地址。

[本地 dns 服务器 ip 地址一般是由本地网络服务商如移动、电信提供，一般是通过 DHCP 自动分配，当然你也可以自己手动配置。 目前用的比较多的是谷歌提供的公用 dns 8.8.8.8 和国内的公用 dns 114.114.114.114 。]

如下图：找到本地 dns 后，它也会先去查询一遍它自己的本地 dns缓存，如果有记录就返回，如果没有记录，它将开始要去根域名服务器查询了。

注意由于根域名服务器 ip 地址一般都是固定的，所以本地 dns 服务器一般都内置了根域名服务器 ip 地址。

目前全球一共有 13 组根域名服务器（这里并不是指 13 台服务器，是指 13 个 ip 地址，按字母 a-m 编号），为了能更高效完成全球所有域名的解析请求，根域名服务器本身并不会直接去解析域名，而是会把不同的解析请求分配给下面的其他服务器去完成，

注意，NDS域名服务器一般分三种，分别是根域名服务器 (.)、顶级域名服务器 (.com)、权威域名服务器 (baidu.com) 

当根域名接收到本地 dns 的解析请求后，发现是后缀是 .com，于是就把负责 .com 的顶级域名服务器 ip 地址返给本地 dns。

本地 dns 拿着返回的 ip 地址再去找到对应的顶级域名服务器，顶级域名又把负责该域名的权威服务器 ip 返回去。

本地 dns 又拿着 ip 去找对应的权威服务器，权威服务器最终把对应的主机 ip 返回给本地 dns，至此就完成了域名解析的全过程。

截屏2021-08-16 14.53.16.png

下面用一张图来展示上面迭代查询的过程。

2. TCP 连接：TCP 三次握手

1.目的：同步客户端和服务端的序列号和确认号，并交换TCP窗口大小信息。防止已失效的连接请求报文段突然又传送到了服务端，因而产生错误。

3. 发送 HTTP 请求

截屏2021-08-16 15.02.17.png

请求报文 包括：请求行、请求头、请求体 。

  • 请求方法包含 8 种：GET、POST、PUT、DELETE、PATCH、HEAD、OPTIONS、TRACE。

  • 请求头包含请求的附加信息，由关键字/值对组成，每行一对，关键字和值用英文冒号“:”分隔。

  • 请求体，可以承载多个请求参数的数据，包含回车符、换行符和请求数据，并不是所有请求都具有请求数据。例：name=tom&password=1234&realName=tomson（name、password、realName 三个请求参数）

4.服务器处理请求并返回 HTTP 报文

- 状态码规则：

1xx：指示信息--表示请求已接收，继续处理。
2xx：成功--表示请求已被成功接收、理解、接受。
3xx：重定向--要完成请求必须进行更进一步的操作。
4xx：客户端错误--请求有语法错误或请求无法实现。
5xx：服务器端错误--服务器未能实现合法的请求。

5.浏览器解析渲染页面

  1. 根据 HTML 解析出 DOM 树
  2. 根据 CSS 解析生成 CSS 规则树
  3. 结合 DOM 树和 CSS 规则树，生成渲染树
  4. 根据渲染树计算每一个节点的信息
  5. 根据计算好的信息绘制页面
  • 重绘 和 回流（重排）： 重绘：某个元素的背景颜色，文字颜色等，不影响元素周围或内部布局的属性，将只会引起浏览器的重绘。 回流（重排）：某个元素的尺寸发生了变化，则需重新计算渲染树，重新渲染。

6.断开连接：TCP 四次挥手

数据传送完，需断开tcp连接，此时发起tcp四次挥手。

2.5 Get 、Post区别

最直观的区别就是GET把参数包含在URL中，POST通过request body传递参数。

GET和POST是什么? HTTP协议中的两种发送请求的方法。 HTTP是基于TCP/IP的关于数据如何在万维网中如何通信的协议。

HTTP的底层是TCP/IP。所以GET和POST的底层也是TCP/IP。

HTTP有好几个方法类别，有GET, POST, PUT, DELETE等等，HTTP规定，当执行GET请求的时候，设置method为GET，而且要求把传送的数据放在url中。如果是POST请求，设置method为POST，并把数据放在请求体里。 所以，HTTP对GET和POST参数的传送渠道(url还是requrest body)有要求。

其中 GET请求在URL中传送的参数是有长度限制的，而POST没有。

(大多数)浏览器通常都会限制url长度在2K个字节，而(大多数)服务器最多处理64K大小的url。超过的部分，恕不处理。

如果你用GET服务，在request body偷偷藏了数据，不同服务器的处理方式也是不同的，有些服务器会帮你卸货，读出数据，有些服务器直接忽略，

对参数的数据类型，GET只接受ASCII字符，而POST没有限制。

GET比POST更不安全，因为参数直接暴露在URL上，所以不能用来传递敏感信息。

GET请求参数会被完整保留在浏览器历史记录里，而POST中的参数不会被保留。

3 进程和线程的关系

1 计算机的核心是CPU，它承担了所有的计算任务。它就像一座工厂，时刻在运行。

2 假定工厂的电力有限，一次只能供给一个车间使用。也就是说，一个车间开工的时候，其他车间都必须停工。背后的含义就是，单个CPU一次只能运行一个任务（进程）。

3 进程就好比工厂的车间，它代表CPU所能处理的单个任务。任一时刻，CPU总是运行一个进程，其他进程处于非运行状态。

4 一个车间里，可以有很多工人。他们协同完成一个任务。

5 线程就好比车间里的工人。一个进程可以包括多个线程。

6 车间的空间是工人们共享的，比如许多房间是每个工人都可以进出的。这 象征一个进程的内存空间是线程共享的。

7 可是，每间房间的大小不同，有些房间最多只能容纳一个人。这代表一个线程使用某些共享内存时，其他线程必须等它结束，才能使用这一块内存。

8 一个防止他人进入的简单方法，就是门口加一把锁。先到的人锁上门，后到的人看到上锁，就在门口排队，等锁打开再进去。这就叫"互斥锁"，防止多个线程同时读写某一块内存区域。

9 还有些房间，可以同时容纳n个人，比如厨房。也就是说，如果人数大于n，多出来的人只能在外面等着。这好比某些内存区域，只能供给固定数目的线程使用。

10 这时的解决方法，就是在门口挂n把钥匙。进去的人就取一把钥匙，出来时再把钥匙挂回原处。后到的人发现钥匙架空了，就知道必须在门口排队等着了。这种做法叫做"信号量"，用来保证多个线程不会互相冲突。

11操作系统的设计，因此可以归结为三点：

（1）以多进程形式，允许多个任务同时运行；

（2）以多线程形式，允许单个任务分成不同的部分运行；

（3）提供协调机制，一方面防止进程之间和线程之间产生冲突，另一方面允许进程之间和线程之间共享资源。

4 cookie 与session 的区别

    1. cookie是什么

(1) cookie是以小的文本文件形式（即纯文本），完全存在于客户端；cookie保存了登录的凭证，有了它，只需要在下次请求时带着cookie发送，就不必再重新输入用户名、密码等重新登录了。

(2) 是设计用来在服务端和客户端进行信息传递的；

第一次请求时：

截屏2021-08-17 10.18.38.png

下一次请求时：

截屏2021-08-17 10.18.47.png

浏览器会把cookie放到请求头一起提交给服务器，cookie携带了会话ID信息。服务器会根据cookie辨认用户：由于cookie带了会话的ID信息，可以通过cookie找到对应会话，通过判断会话来判断用户状态。

  • 2 Session（会话）是什么

session 也是让服务器要知道当前发请求给自己的是谁。 为了做这种区分，服务器就要给每个客户端分配不同的“身份标识”。

至于客户端怎么保存这个“身份标识”，可以有很多种方式，对于浏览器客户端，大家都默认采用 cookie 的方式。

服务器使用session把用户的信息临时保存在了服务器上，用户离开网站后session会被销毁。这种用户信息存储方式相对cookie来说更安全。

  • 3.cookie 与 session区别 cookie是存在客户端浏览器上，session会话存在服务器上。

会话对象用来存储特定用户会话所需的属性及配置信息。当用户请求来自应用程序的web页时，如果该用户还没有会话，则服务器将自动创建一个会话对象。当session过期或被放弃后，服务器将终止该会话。

cookie和session需要配合，当cookie失效、session过期时，就需要重新登录了。

5 Cookie、sessionStorage和localStorage 区别

    1. cookie是什么

(1) cookie是以小的(最大4k）文本文件形式（即纯文本），完全存在于客户端；cookie保存了登录的凭证，有了它，只需要在下次请求时带着cookie发送，就不必再重新输入用户名、密码等重新登录了。

(2) 是设计用来在服务端和客户端进行信息传递的；

  • 2.sessionStorage和localStorage是什么：

在较高版本的浏览器中，JavaScript提供了两种存储方式：sessionStorage和globalStorage。在H5中，用localStorage取代了globalStorage。

sessionStorage用于本地存储一个会话中的数据，这些数据只有在同一个会话中的页面才能访问，并且当会话结束后，数据也随之销毁。所以sessionStorage仅仅是会话级别的存储，是不持久的本地存储。

localStorage是持久化的本地存储，除非是通过js删除，或者清除浏览器缓存，否则数据是永远不会过期的。

共同点：

都是保存在浏览器端，且同源的。

  • 3.Cookie、sessionStorage和localStorage 区别 截屏2021-04-13 20.58.32.png

1.cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。

2.cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下。

3.存储大小不同，cookie数据不能超过4k；sessionStorage和localStorage ,一般为5M左右。

4.数据有效期不同，sessionStorage仅在当前浏览器窗口关闭前有效，；localStorage始终有效（除非清除），窗口或浏览器关闭也一直保存，因此用作持久数据；cookie只在设置的cookie过期之前一直有效，即使窗口或浏览器关闭。

5.作用域不同，sessionStorage不在不同的浏览器窗口中共享；localStorage和cookie 在所有同源窗口中都是共享的；

6 跨域

1. 同源策略

同源策略(Same-Origin Policy)是浏览器的一种安全策略。

同源: 协议、域名、端口号 必须完全相同。 

如：

同协议：如都是http或者https

同域名：如都是baidu.com/a 和baidu.com/b

同端口：如都是80端口

违背同源策略就是跨域。

【简言之，浏览器发出的请求url，与其所在页面的url不一样。此时，同源机制会让浏览器拒收 服务器响应回来的数据。】

2. 如何解决跨域 

- JSONP

在网页有一些标签天生具有跨域能力，比如:img link iframe script。

JSONP 就是利用 script 标签的跨域能力来发送请求的。

  • JSONP 的使用

  

1.动态的创建一个 script 标签


var script = document.createElement("script");

2.设置 script 的 src，设置回调函数

script.src = "http://localhost:3000/testAJAX?callback=abc"; function abc(data) {

alert(data.name); };

3.将 script 添加到 body 中

document.body.appendChild(script);

4.服务器中路由的处理

router.get("/testAJAX" , function (req , res) {

console.log("收到请求");

var callback = req.query.callback; var obj = {name:"孙悟空",

age:18 }

res.send(callback+"("+JSON.stringify(obj)+")"); });

jsonp缺点：只能实现get一种请求。JSONP是野路子，不如下面的CORS正统。

- CORS

CORS 全称是 跨域资源共享（Cross-Origin Resource Sharing），是官方的跨域解决方

案，

CORS 是通过设置一个响应头来告诉浏览器，该请求允许跨域，主要是服务器端的设置:

router.get("/testAJAX" , function (req , res) {

//通过 res 来设置响应头，来允许跨域请求

 //res.set("Access-Control-Allow-Origin", "http://127.0.0.1:3000"); 

res.set("Access-Control-Allow-Origin","*");

res.send("testAJAX 返回的响应");

});

浏览器收到该响应 以后就会对响应放行。

1 当使用 XMLHttpRequest 发送请求时，浏览器发现该请求不符合同源策略，会给该请求加一个响应头：Origin；（浏览器无需做设置 只需发送ajax）

2 后台服务器收到请求后，会进行一系列处理，如果确定接受请求，则在返回结果中加入一个响应头：Access-Control-Allow-Origin （换言之，服务器允许的域url，会加入此响应头，相当于一个凭证）;

3 浏览器判断该相应头中是否包含 Origin 的值，如果有，则浏览器会处理响应，我们就可以拿到响应数据。

avatar
文章
阅读
粉丝