前端核心面试题：网络

搬砖的乔布梭
373 阅读5分钟

请说出10个请求头

  • Accept = 客户端想要接收的响应体格式
  • Accept-Encoding = 客户端想要的响应内容压缩方式
  • Content-Type = 请求体数据格式
  • Content-Length = 请求体字节长度
  • Cookie = 客户端cookie信息
  • User-Agent = 客户端浏览器信息
  • Host = 服务器地址
  • Origin = 客户端地址
  • Connection=keep-alive 保持长连接（直到页面资源加载完毕）
  • If-None-Match=上次响应的Etag 携带上次数据的数据指纹（作为协缓特征）
  • If-Modified-Since=上次响应的Last-Modified 携带上次数据的尾更时间（作为协缓特征）

请说出10个响应头

  • Content-Type = 响应体数据格式
  • Content-Encoding = 响应体压缩编码
  • Content-Length = 响应体字节长度
  • Set-Cookie = 服务端想给客户端写入的cookie
  • Server = 服务端信息
  • Date = 服务响应时间
  • Access-Control-Allow-Origin = 允许哪些客户端跨域来访问我
  • Cache-Control=maxAge(秒数) = 数据强缓时长
  • Etag = 数据指纹
  • Last-Modified = 数据的尾更时间

URL回车后发生什么？

  • URL解析: 协议段 + 域名/IP段 + 端口段（HTTP协议默认端口80/HTTPS协议默认端口443）+ 路径段 + 查询参数段 + 哈希段；浏览器执行URL解析；
  • DNS查询：域名映射为IP+端口；IP=宇宙中的唯一主机（host）；端口=该主机上的唯一进程（应用程序）；
  • TCP连接：宗旨稳定连接+可靠传输；三次握手实现稳定连接；四次挥手实现可靠传输；稳定连接=服客双方确保彼此能发能收；可靠传输=服客双方确保对方数据发送完毕才能断开连接；三次挥手图形=客户端出发的N字形；四次挥手=客户端出发的V字形+服务端出发的V字形；
  • HTTP请求发送：请求报文的构成=请求行+请求头+空行+请求体；
  • HTTP响应返回：响应报文的构成=状态行+响应头+响应体；
  • TCP连接断开：要经历四次挥手；
  • 浏览器渲染页面：要会画渲染示意图；

简述TCP原理

  • 宗旨稳定连接+可靠传输；
  • 三次握手实现稳定连接；
  • 四次挥手实现可靠传输；
  • 稳定连接=服客双方确保彼此能发能收；
  • 可靠传输=服客双方确保对方数据发送完毕才能断开连接；
  • 三次挥手图形=客户端出发的N字形；
  • 四次挥手=客户端出发的V字形+服务端出发的V字形；
  • PS：一蹴而就原则：三次握手和四次挥手都必须一次性完成，否则作废重来；
  • PS：UDP=没有握手加挥手=连接+收发+断开=注重性能；
  • PS：TCP/UDP工作在OSI七层网络模型的传输层；
  • PS：OSI七层网络模型=物数网(IP)传(TCP/UDP)会表应(HTTP/FTP/SMTP)

GET请求与POST请求异同

  • 数据携带方式：GET只能是查询参数；POST/PUT/PATCH还可以请求体携带数据；
  • 数据量：查询参数K级别；请求体携带数据量理论上无限；
  • 安全性：查询参数（完全暴露）不能携带敏感数据；请求体中的数据相对安全；
  • 安全性：HTTPS协议接近绝对安全；HTTPS协议的通信数据全部使用加密；
  • PS: HTTPS协议使用非对称加密; 服务器持有公钥（网站证书），客户端给服务器发送的数据使用该公钥加密；服务端用自己配对的私钥解密；

HTTP常见的状态码有哪些？

  • 100+=请求继续；
  • 200+=请求成功；200=请求成功
  • 300+=重定向；301=永久重定向；302=临时重定向；304=资源未更改（滚回去用缓存）；
  • 400=客户端错误；401=未授权；403=禁止访问；404=路径未找到（域名存在但路径不存在）；
  • 500=服务端错误；500=服务端错误；
  • 追问1：具体解释一下304的含义；
  • 追问2：具体解释一下404；
  • 追问3: 301与302具体有何区别；
  • 追问4：你平时是如何调试网络通信错误的；

JWT鉴权原理

  • 单点登录：单点登录，多点开花；A服务器上登录并发放token + B服务器上可以校验 + AB服务器须持有相同的秘钥；
  • 载荷加密：token构成=头+载荷+签名;签名由【头+载荷+秘钥】三合一计算而来；截获并篡改token中的任意片段都会导致token校验失败；
  • VS cookie：cookie无法实现单点登录; cookie要自行加密；cookie是渣渣;

Ajax如何实现跨域

  • 服务端支持跨域：配置响应头Access-Control-Allow-Origin=允许跨域而来的前端地址
  • JSONP：用script/src得到得到服务端响应的callback(jsonData)<=>在前端执行
  • 使用代理：在具有代理功能的服务器上（Nginx）配置代理，访问代理地址=访问目标地址
location /a {
    proxy_pass 需要跨域访问的b地址
}

@Websocket与HTTP有啥区别

概述

  • Websocket基于TCP协议，工作在传输层，长连接双工通信；
  • HTTP是应用层协议，单向短链接，请求-响应-断开；
  • Websocket已为大多数浏览器所支持，场景如：客服、秒杀、实盘、直播...

案例

服务端

var app = require('express')();
var server = require('http').Server(app);
var WebSocket = require('ws');

// 服务端监socket监听在8080 等待客户端连接
var wss = new WebSocket.Server({ port: 8080 });

// 准备客户端存储对象
const clients = {}

/* 有客户端请求接入 入参ws即为接入的客户端socket对象 */
wss.on('connection', function connection(ws) {
    console.log('server: receive connection from client');

    // 将该客户端存下来 时间戳:socket
    clients[Date.now()] = ws
    console.log("clients",Object.keys(clients));
    
    // 接收到该客户端发来的消息
    ws.on('message', function incoming(message) {
        console.log('message',message);
        ws.send('got it:'+message);

        // 转发给它想要发送的其它客户端
        const [to,msg] = message.toString().split(":")
        clients[to*1].send(message.toString())
    });

    // 该客户端主动断开连接
    ws.on("close",function(code,reason){
        console.log("客户端已断开连接");
    })

    // 与该客户端的连接发送错误
    ws.on("error",function(err){
        //处理错误
    })

    // 立刻给刚刚接入的客户端发送消息
    ws.send('welcome!');
});

/* 在http的3000端口返回页面给客户端 */
app.get('/', function (req, res) {
  res.sendfile(__dirname + '/index.html');
});
app.listen(3000);

客户端

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text" placeholder="please enter..." id="ipMsg">
    <button id="btn">发送消息</button>
    <button id="btnClose">断开连接</button>

    <script>
        // 发起远程连接请求websocket长连接
        var ws = new WebSocket('ws://localhost:8080');

        // 连接成功时打印一下
        ws.onopen = function () {
          console.log('ws onopen');
        //   ws.send('from client: hello');
        };

        // 收到服务端的消息时打印一下
        ws.onmessage = function (e) {
          console.log('ws onmessage');
          console.log('from server: ' + e.data);
        };

        // 点击按钮给服务端发送消息
        btn.onclick = function(e){
            ws.send(ipMsg.value);
        }

        // 点击按钮断开与服务端的连接
        btnClose.onclick = function(e){
            ws.close()
            console.log("连接已断开");
        }
        
      </script>
</body>
</html>
avatar
文章
阅读
粉丝