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

前言：

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

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

欢送在github上留言反馈

网络申请，协定

介绍下网络协议分层？

OSI七层模型：

TCP/IP 四层模型：

参考资料：

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

put,patch,post区别？

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

不同点：

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的区别？

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

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

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

ajax 过程？

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

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

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

(4)发送HTTP申请.

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

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

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

定义：通过域名解析找到服务器主机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服务器地址”，计算机到底做了什么？

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

上面以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和post有什么区别？

区别：

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

相同点：

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

fetch如何解决跨域？

服务端要反对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;

dns查问层级？

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

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

为什么axios会发两次？

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

常见的web服务器有哪些？

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

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

http&https

HTTP有哪些办法？

一、HTTP1.0申请办法：

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

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

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

http2的长处？

1）二进制分帧

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

2）多路复用

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

3）Header压缩

http3的长处？

对TCP协定进行革新
google基于UDP协定开发了QUIC协定，并且应用在HTTP/3上

长处：

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

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

http与https有什么区别？

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

https加密过程？

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

加密的分类：

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

长处：简略

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

eg: 间谍暗号

非对称加密：

长处：安全性高

毛病：过程繁琐，慢

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

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

https次要分为三个阶段

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

参考：

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

https是如何保障平安的？

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

http三次握手四次挥手?

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

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

http申请报文解剖？

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

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

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

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

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

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

一、申请头：

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

http响应报文？

响应行：协定版本、状态码或状态码的起因短语组件： 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/日期/服务器/

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

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申请响应协商缓存

参考资料：

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

前言：

网络申请，协定

介绍下网络协议分层？

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状态码有哪些，别离代表什么意思 ？

浏览器缓存

浏览器缓存分类？

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

强/协商缓存判断流程？

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

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