关于面试:前端面试宝典http核心知识篇

想零碎学习前端面试题，强烈推荐浏览在线电子书（反对手机版，不断更新）。

本书特点：零碎全面（涵盖前端核心技术点），简洁，针对性强（针对面试场景设计）。

欢送在 github 上留言反馈

OSI 七层模型：

TCP/IP 四层模型：

参考资料：

网络原理（一）——协定分层

相同点：三个都是用于批改申请

不同点：

put 与 post 区别

put：等幂性，间断调用一次 / 屡次成果雷同，无副作用; 应用场景：批改用户名接口, 提交屡次，后果也是一样的;
post：是非幂等性的，创立博客接口，屡次提交创立多个

put 与 patch 区别

put：间接资源笼罩型的应用 put, 比方分销模块化接口；
patch: 对已知文件进行部分更新，比方批改用户名；

HTTP 协定: 超文本传输协定，规定了浏览器和万维网服务器相互通信的规定。应用：浏览网页，网页下载
FTP 协定：文件传输协定。应用：FTP 服务端上传软件
SMTP 协定：简略邮件传输协定，在其之上指定了一条音讯的一个或多个接收者，而后音讯文本会被传输。应用：foxmail
NFS 协定：网络文件系统，文件共享的协定。用户和程序能够像拜访本地文件一样拜访远端系统文件。应用：Linux 搭建网盘
UDP 协定：用户数据报协定，反对多方数据传输应用：DNS，QQ
TCP/IP 协定：传输控制协议，每一条 TCP 只能点对点传输应用：http 底层技术，QQ（（UDP 协定为主，TCP 协定为辅助），websocket
Telnet 协定：远程登陆，应用明文传输数据，有一些平安问题，缓缓被淘汰。连贯客户端举荐应用 SSH 协定

参考资料：几种常见的网络协议

UDP 协定：无连贯，尽最大可能交传，没有拥塞管制、面向报文，反对一对一，一对多，多对多交互通信。

TCP 协定：面向连贯，提供牢靠交付，有流量管制，拥塞管制，提供全工管制，面向节节流，每一条 TCP 连贯只能点对点的（一对一）

参考资料：一文搞定 UDP 和 TCP 高频面试题！

(1)创立 XMLHttpRequest 对象, 也就是创立一个异步调用对象.

(2)创立一个新的 HTTP 申请, 并指定该 HTTP 申请的办法、URL 及验证信息.

(3)设置响应 HTTP 申请状态变动的函数.

(4)发送 HTTP 申请.

(5)获取异步调用返回的数据.

(6)应用 JavaScript 和 DOM 实现部分刷新.

定义：通过域名解析找到服务器主机 IP 地址，不便通信

查找该域名对应的 IP 地址、重定向（301）、收回第二个 GET 申请

1) 查找流程：

浏览器查找 DNS 缓存
本机（零碎级别）查找 DNS 缓存
dns 服务器
- - 主动获取 DNS 服务器地址（局域网 id）
  - 路由器（做 dns 转发，也会有缓存）
  - 运营商 ISP 调配的（间接连贯），局部运营商会通过 dns 劫持做广告植入
- 指定 DNS 服务器地址（首选，备选）– 长处：解析快 / 无污染 / 防劫持
- - google dns
  - ali/baidu/open/114 DNS
host 定义的配置文件
本地域名 DNS 服务器（）–> 根域名服务器 –> COM 顶级域名服务器 –>x.com 域名器

参考资料：在 Windows 中，抉择 TCP/IPv4 协定设置中的“主动获取 DNS 服务器地址”，计算机到底做了什么？

上面以 HTTP 协定为例：

在浏览器输出 URL
浏览器 查看缓存
- 未缓存：发动新申请
- 已缓存：
  - 陈腐：间接提供给客户端
  - 不陈腐（过期）：否则与服务器进行验证
- 判断陈腐（是否过期）的 http 字段 Expires 和
- - Expires (HTTP1.0) : 值为一个 相对工夫 示意缓存陈腐日期
  - Cache-Control (HTTP1.1)：max-age=, 值为 以秒为单位 的最大陈腐工夫
浏览器 解析 URL（获取协定 / 主机 / 端口 /path）
浏览器 组装一个 HTTP（GET）申请报文
浏览器 获取主机 IP地址
1. 浏览器缓存
2. 本机缓存（操作系统级别）
3. hosts 文件
4. 路由器缓存
5. ISP DNS 缓存
6. DNS 递归查问（可能存在负载平衡导致每次 IP 不一样）
关上一个 socket 与指标 IP 地址，端口建设 TCP 链接
- 过程
  1. 客户端发送一个 TCP 的 SYN=1,Seq=X 的包到服务器端口（你能听到我谈话吗）
  
  2. 服务器发回：SYN=1，ACK=X+1，Seq=Y 的响应包（听到了，你能听到我谈话吗）
  
  3. 客户端发送：ACK=Y+1，Seq=Z（听的到）
- 参数解析
  - Seq（sequencer）：序列号，不传递实现内容
  - SYN（synchronous）：建设联机
  - ACK（acknowledgement）: 确认
TCP 链接建设后 发送 HTTP 请示
服务器承受申请并解析，将申请转发到服务程序，如虚拟主机应用 HTTP Host 头部判断申请的服务程序
1. 服务器（nginx,apache…）承受申请并解析
2. 服务程序（真正的服务器，自建 / 阿里云服务器）
服务器查看 HTTP 申请头是否蕴含 缓存验证 信息，如缓存陈腐，返回 304 状态码
处理程序（后端代码）读取残缺请示并 筹备 HTTP 响应（可能须要查询数据库操作）
服务器将响应报文通过 TCP 连贯发送回浏览器
浏览器接管 HTTP 响应，而后依据状况抉择敞开 TCP 连贯或者保留重用，敞开 TCP 连贯的四次挥手
浏览器查看响应状态码：是否为 1 /3/4/5XX，这些状况与 2XX 不同
判断资源是否缓存，进行缓存
对响应进行解码（eg: gzip）
依据资源类型决定如何解决（假如资源为 html）
html 文档解析（dom,cssom,js 解析）过程
显示页面

浏览器这边做的工作大抵分为以下几步：

加载：依据申请的 URL 进行域名解析，向服务器发动申请，接管文件（HTML、JS、CSS、图象等）。
解析：对加载到的资源（HTML、JS、CSS 等）进行语法解析，倡议相应的外部数据结构（比方 HTML 的 DOM 树，JS 的（对象）属性表，CSS 的款式规定等等）

参考资料：

从浏览器地址栏输出 url 到显示页面的步骤(以 HTTP 为例)

前端经典面试题: 从输出 URL 到页面加载产生了什么？

从输出 URL 到页面加载的过程？如何由一道题欠缺本人的前端常识体系！

区别：

【数据传输方式不同】get 参数是在 url（长处：可缓存，对搜索引擎敌对（删除类的接口不要应用 get），url 不便保留 / 分享），post 是放在 request body 外面（post 相对来说平安一些，参数不裸露在 url 上）；
【申请长度】get 参数长度有限度，参数没有裸露在 url 下面
【数据类型不同】get 只容许 ASCII 字符，而 POST 无限度
【个性不同】GET 是平安（指只读个性，应用这个办法不会引起服务器状态变动）且幂等（指同一个申请办法执行屡次和仅执行一次成果完全相同），而 POST 是非平安非幂等

相同点：

底层都是 TCP/IP，Get 产生一个 TCP 包，post 产生两个

服务端要反对 cors 能力失去数据

CORS
cors 是 ”Cross-Origin Resource Sharing” 的简称，是实现跨域的一种形式，绝对于其余跨域形式，比拟灵便，而且不限度发申请应用的 method，以下从几种状况剖析 cors 应用。


//get 办法
// 前端代码
fetch('http://localhost:6888/test_get',{
    method: 'GET',
    mode: 'cors',
}).then(res => {return res.json();
}).then(json => {console.log('获取的后果', json.data);
    return json;
}).catch(err => {console.log('申请谬误', err);
})

后端代码

c.Header("Access-Control-Allow-Origin", "*")
c.Header("Access-Control-Allow-Methods", "GET, POST")

参考资料：

fetch 跨域申请

【自上而下】进行加载，并在加载过程中进行解析渲染；
解析过程

html 解析成一个 dom 树，dom 树的构建过程是一个 深度遍历 过程；以后节点所有子节点渲染后才会去构建以后节点的下一个子节点；
css 解析成 css rule tree;
依据 dom 树和 CSSOM(css 对象模型)来结构 rendering tree;

从浏览器缓存中查问（个别是 2 -30 分钟）
从操作系统缓存中查问
从路由器中查问 DNS 缓存
ISP 中查问 DNS 缓存；
域名服务器迭代查问，依据返回的地址逐级向上查问。www.google.com-> 本地 dns 服务器查问的后果 101.1.1.1->101.2.2.2-> 查问的后果返回到本地 dns 服务器 -> 发送给客户端

阐明：客户端到本地服务器属于递归查问，DNS 服务器属于迭代查问

这个和跨域有关系，第一次预申请，不携带数据，判断服务器是否跨域；在预检申请的返回中，服务器端也告诉客户端，是否需带身份凭证（cookies,http 认证相干数据）第二次携带实在的数据，发送申请；

运行 web 利用，提供网上信息浏览服务

Apache：世界上用的最多的 web 服务器，开源，反对跨平台利用（unix,windows,Linux），属于重量级产品，内存耗费大，速度、性能上不通信其余轻量级 web 服务器
Nginx：高性能 HTTP 和反向代理服务器
Apache：开源、支行 servlet 和 JSP web 应用软件，基于 Java 的 web 应用软件容器
Microsoft IIS: 只能运行在 windows 平台上

一、HTTP1.0 申请办法：

get：申请服务器发送某些资源
post：发送数据给服务器
head：申请资源的头部信息，并且这些头部收不到 http get 办法申请时返回的统一

二、HTTP1.1 新增申请办法：

options：用于获取目标资源所反对的通信选项
put：新增资源，是幂等性的（）
delete：删除指定的资源
trace：回显服务器收到的申请，次要用于测试或诊断
connect：预留给可能将连贯改为管道形式的代理服务器
patch: 对资源利用局部批改

1）二进制分帧

HTTP/ 2 中，同域名下所有通信都在单个连贯上实现，该连贯能够承载任意数据的双向数据流。

2）多路复用

同域名下所有通信都在单个连贯上实现
单个连贯能够承载任意数量的双向数据流

3）Header 压缩

对 TCP 协定进行革新

google 基于 UDP 协定开发了 QUIC 协定，并且应用在 HTTP/ 3 上

长处：

0-RTT：缓存以后会话的上下文，重连时只有传递给服务器端验证通过就能够了
多路复用：尽管 HTTP/ 2 曾经反对，然而 TCP 协定究竟没有这个性能，然而 QUIC 原生反对，并且传输的单个数据流能够保障有序交付且不会影响其余数据流，解决了 TCP 之前的问题
向前纠错机制：多发数据，防止重传，只能应用在失落一个包的状况下，多个包失落还得依附重传的形式

参考资料：https://blog.fundebug.com/201…

https 减少了数据加密，比 http 更平安
https 默认应用 443 端口，http 是 80 端口
https 绝对比 http 慢一些，因为为加 / 解密这个过程
https 须要向 CA 机构申请证书；

https=http+SSL/TSL(加密层)

加密的分类：

对称加密：通信单方都应用同一个秘钥进行解密，

长处：简略

毛病：无奈解决首次把秘钥发给对方的问题，容易被黑客拦挡秘钥

eg: 间谍暗号

非对称加密：

长处：安全性高

毛病：过程繁琐，慢

https 采纳的解决办法：联合两种加密形式（两端都能够开锁的保险柜，任一方有钥匙都能够）

将 对称加密的密钥 应用 非对称加密的公钥 进行加密，而后发送进来
接管方应用私钥进行解密失去对称加密的密钥
而后单方能够应用 对称加密 来进行沟通

https 次要分为三个阶段

验证证书，生成秘钥阶段
应用公钥，加密数据阶段
应用私钥，解密数据阶段

参考：

https://cloud.tencent.com/dev…

https 是如何保障平安的？

辞别互联网“裸奔”，秒懂 https 和非对称加密！

三次握手：是指在建设一个 TCP 连贯时，需客户端和服务器总共发送 3 个数据包；

参考：https://cloud.tencent.com/dev…

http 申请报文次要由三局部组成，

报文行 / 申请行：
- -【协定】定义申请协定 post/get
- 【地址】申请 url
- 【版本】http 协定及版本
报文头：缓存管制，cookies 设置，accept 通知服务端接管什么类型参数，referer 发送申请的地址起源；
报文体：
- -【参数】申请的参数

http/ 2 协定中，connection 和 keep-alive 是被疏忽的，在其中采纳其余机制来进行治理

能够应用 postman 抓包工具进行原始数据抓取

特地阐明：加 * 阐明是必选字段

一、申请头：

user-agent (*) : 客户端程序信息 // 可判断什么浏览器，什么 webview 容器
referer(*): 申请信息的起源 // 能够用来拦挡非法 cdn 资源援用，和跨站申请伪造攻打
accept: 客户端能解决的文件类型
- */* 代表所有
- text/html //html
- image/webp,image/apng // 图片
accept-encoding : 客户端可能承受的内容编码方式（某种压缩算法）
- gzip
- br
- compress
- deflate
- *
accept-language: 客户端可能解析的语言
- de
- de-CH
- en-US,en;q=0.5
dnt：不要追踪 //do not track 隐衷爱护，不要给我推个性化广告，小人协定不肯定失效
connection: 连贯治理、逐条首部, 不与 http2 一起应用
- keep-alive 可从新连贯，缩小资源耗费，缩短响应工夫，个别会设置服务端超时工夫，同时会设置最大申请数，越过也会主动敞开，要服务端反对才行; 容许申请和应答的 http 管线化，升高拥塞管制（TCP 连贯缩小了），报告谬误无需敞开 TCP 连贯
- close // 默认值
sec-fetch-* // 网络申请的元数据形容，服务端准确判断申请的合法性，2019 年公布的草案，目前浏览器兼容性不高
- Sec-Fetch-Dest: image
  Sec-Fetch-Mode: no-cors
  Sec-Fetch-Site: same-origin
- If-Modified-Since 服务器发过来的最初批改工夫，缓存工夫判断应用，如果工夫统一，http 状态码 304（不返回文件），客户端间接显示本地缓存文件；如不统一，就返回 http 状态码 200 和新的文件内容，客户端接到之后，抛弃旧文件，缓存新文件
cache-control: 管制缓存
- no-cache // 无缓存，浏览器开启 disable cache 会同现

二、响应头：

server(*) : 响应的服务器 //nginx，apache
accept-ranges(*) // 标识服务器本身反对的申请单位 //bytes, none
Access-Control-Allow-Origin：cors 跨域申请头 // * 容许所有域名跨域申请
content-length(*): 资源大小
content-type(*): 资源类型
status: 响应状态 //304 强缓存
cache-control:: 缓存管制
- max-age=691200 // 缓存工夫，前面的数据是秒
date（*）: 资源最新获取工夫 // 不应用缓存的状况下，每次刷新会变
expires：到期工夫
last-modified：资源上次批改的工夫
age : 示意对象在缓存代理服务器中存贮的时长，单位秒
eTag: Etags 相似于指纹，比拟 etags 可疾速确认资源是否扭转，可能被某些服务器跟踪
x-request-id: 由客户端随机生成，帮忙排查问题应用

参考资料：

Sec-Fetch-* 申请头，理解下?

HTTP Headers

响应行：协定版本、状态码或状态码的起因短语组件：eg : HTTP/1.1 200 OK
响应头：响应部首组成
响应体：服务器响应的数据

申请头部信息（request header）

接管的格局，起源，语言编码，浏览器信息，是不应用缓存，超时时长和最大申请数, cookies（keep-alive:timeout=5,max=1000）
http/ 2 协定中，connection 和 keep-alive 是被疏忽的，在其中采纳其余机制来进行治理

2. 响应头部信息（response headers）

内容压缩格局 / 长度 / 类型：gzip/1000/text、html/ 日期 / 服务器 /

1** 信息类：示意接管到申请并且持续解决；
2** 响应胜利：动作被胜利接管、了解、承受
3** 重定向：为了实现指定的动作，必须接管进一步解决
4** 申请蕴含谬误语法或不能正确执行；
5** 服务器谬误：服务器不能正确执行一个正确的申请

1）强缓存（状态码 304）

间接从本地读取，不会发动申请到服务器；

2）协商缓存（状态码 200）

从服务器端缓存中读取，会发动申请到服务器

在服务器端（nginx,Apache…，大部分 web 服务器默认开启会协商缓存）设置 Expire 字段，浏览器会读取，再进行缓存管制

// 一般服务器的配置
Expires: Thu, 15 Apr 2020 20:00:00 GMT

//Apache 服务器的配置
ExpiresDefault "access plus 10 years"

通过返回的 header

Cache-Control: 是否缓存，及缓存工夫，优先级高于 expires，示意绝对工夫
- Cache-Control:no-cache // 先缓存本地，然而在命中缓存之后必须与服务器验证缓存的新鲜度能力应用
- Cache-Control: max-age=315360000 // 缓存工夫设置，单位 s
- Cache-Control: no-store 不会产生任何缓存
- Cache-Control: public 能够被所有用户缓存，包含终端 /cdn 等两头代理服务器
- Cache-Control: private 只能被终端浏览器缓存，不容许中继缓存服务器进行缓存
Expires: 过期工夫，相对工夫，由服务器返回，expires 受限于本地工夫，如果批改了本地工夫，可能造成缓存生效
Etag（判断返回字段：If-none-match）: 给定 URL 资源更改，会生成新的 ETag, 相似指纹, 通过比拟 etag 能疾速确认此资源是否变动
Last-modified (判断返回字段：If-modified-since): 最初更新工夫，协商缓存会应用

// 对页面应用协商缓存，对于动态资源 图片 /css/js/ 字体 应用强缓存的配置
// 应用 Cache-Control 中的 max-age 字段配置

server {
  listen       8081;
  server_name  xxx.abc.com;
  location / {
    proxy_pass http://localhost:7878;
    add_header  Cache-Control  max-age=no-cache;
  }
  location ~* \.(css|js|png|jpg|jpeg|gif|gz|svg|mp4|ogg|ogv|webm|htc|xml|woff)$ {
    access_log off;
    add_header Cache-Control "public,max-age=30*24*3600";
    proxy_pass http://localhost:7878;
  }
  error_page   500 502 503 504  /50x.html;
  location = /50x.html {root   html;}
}

// 应用 expires 字段设置强缓存

server {
    listen       80;
    server_name  tirion.me www.tirion.me;

    # note that these lines are originally from the "location /" block
    root   /home/www/wordpress;
    index index.php index.html index.htm;

    location / {try_files $uri $uri/ =404;}
    error_page 404 /404.html;
    error_page 500 502 503 504 /50x.html;
    location = /50x.html {root /usr/share/nginx/html;}

    location ~ \.php$ {
        try_files $uri =404;
        fastcgi_pass unix:/var/run/php-fpm/php-fpm.sock;
        fastcgi_index index.php;
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
        include fastcgi_params;
    }
    # 配置 HTTP 强缓存动态文件，通过 Response Header 头返回
    location ~ .*\.(gif|jpg|jpeg|png|bmp|swf|js|css)$ {expires 3d;}
}

参考资料：

什么时候会触发强缓存或者协商缓存？

NGINX 配置 HTTP 强缓存

nginx 缓存配置及开启 gzip 压缩

【是否存在缓存？】Cache-Control 字段判断
【缓存是否过期？】Cache-Control、Expires 字段
【文件指纹是否雷同？】判断 ETag 指纹是否统一，向服务器申请 If-none-match，服务器返回 200 or 304
【更新工夫是否雷同？】判断 Last-modified，向服务器申请 if-modified-since , 服务器返回 200 or 304

服务器返回 304 读取本地，200 申请响应协商缓存

参考资料：

缓存（二）——浏览器缓存机制：强缓存、协商缓存

关于面试:前端面试宝典http核心知识篇

前言：

网络申请，协定

介绍下网络协议分层？

put,patch,post 区别？

常见的网络协议有哪些？

UDP 与 TCP 的区别？

ajax 过程？

DNS 解析过程，及优化计划？

一个页面从输出 URL 到页面加载显示实现，这个过程中都产生了什么？

get 和 post 有什么区别？

fetch 如何解决跨域？

浏览器加载解析渲染过程？

dns 查问层级？

为什么 axios 会发两次？

常见的 web 服务器有哪些？

http&https

HTTP 有哪些办法？

http2 的长处？

http3 的长处？

http 与 https 有什么区别？

https 加密过程？

http 三次握手四次挥手?

http 申请报文解剖？

HTTP 头部字段（申请头 / 响应头）有哪些？

http 响应报文？

响应头部的信息？

http 状态码有哪些，别离代表什么意思？

浏览器缓存

浏览器缓存分类？

如何开启浏览器强 / 协商缓存？

强 / 协商缓存判断流程？