前端面试——1.前端基础

最新推荐文章于 2023-07-07 11:04:14 发布

Herstory.Liz

最新推荐文章于 2023-07-07 11:04:14 发布

阅读量404

点赞数

文章标签：前端面试 ssl

本文链接：https://blog.csdn.net/zhupidaheng/article/details/126772798

版权

前端基础

1. HTTP和HTTPS

（1）HTTP和HTTPS的基本概念

HTTP：超文本传输协议，是应用层协议，是客户端和服务器请求与应答的标准，用于从WWW服务器传输超文本到本地浏览器的传输协议。

HTTPS：是以安全为目标的HTTP通道，简单地说就是HTTP的安全版，即HTTP下加入SSL（安全套接层，HTTPS的SSL加密实在传输层实现的），HTTPS的安全基础是SSL。HTTPS协议的作用是建立一个信息安全通道，来确保数据传输的安全性和网站的真实性。

（2）HTTP和HTTPS的区别

HTTP传输的数据都是明文的，通过SSL层，采用公开密钥的方式对HTTP传输的数据进行加密。HTTPS协议就是HTTP和SSL协议共同构建的，可以进行加密传输和身份验证的网络协议，比HTTP协议更安全。

HTTPS需要ca证书，费用较高。HTTP的连接方式是无状态的，而HTTPS具有身份验证。HTTP的端口号默认是80，HTTPS默认端口号443

（3）HTTPS工作原理

客户使用 HTTPS url 访问服务器，则要求 web 服务器建立 ssl 链接。

web 服务器接收到客户端的请求之后，会将网站的证书（证书中包含了公钥），传输给客户端。

客户端和 web 服务器端开始协商 SSL 链接的安全等级，也就是加密等级。

客户端浏览器通过双方协商一致的安全等级，建立会话密钥key，然后通过网站的公钥来加密会话密钥，并传送给服务器。

web 服务器通过自己的私钥解密出会话密钥key。

web 服务器通过会话密钥加密与客户端之间的通信

（4）HTTPS的优缺点

优点：使用HTTPS可以认证客户机与服务器，确保数据发送到正确的客户机与服务器。HTTPS协议由HTTP+SSL协议构建，采用公开密钥的方式，可对传输数据进行加密，能进行身份验证，对比HTTP更加安全，可防止数据在传输过程中被剽窃，确保数据的完整性。

缺点：在客户端与服务器建立连接阶段耗费时间长，使得页面加载时间长。https缓存不如http，会增加额外的数据开销。SSL证书费用相对较高。SSL证书需要绑定IP地址，使得不能一个IP对应对各域名

2. TCP建立连接（三次握手）

第一次握手：客户端向服务器发起建立连接的请求，客户端发送带有 SYN 标志的连接请求数据包给服务端
第二次握手：服务器告诉客户端，我同意你的连接请求，同时我也向你发起建立连接的请求，服务端发送带有 SYN+ACK 标志的连接请求和应答数据包给客户端
第三次握手：浏览器也告诉服务器，我同意建立连接，客户端发送带有 ACK 标志的应答数据包给服务端(可以携带数据了)

TCP3次握手原理

为什么要三次握手？

三次握手时，客户端收到后可以根据自身的上下文，判断这是一个历史连接（序列号过期或超时），那么客户端就会发送 RST 报文给服务端，中止这一次连接。即可以通过SYN和ACK的序号来判断连接类型，从而防止历史连接
如果没有第三次握手，服务器不清楚客户端是否收到了自己发送的建立连接的 ACK 确认信号，所以每收到一个 SYN 就只能先主动建立一个连接，如果客户端的 SYN 阻塞了，重复发送多次 SYN 报文，那么服务器在收到请求后就会建立多个冗余的无效链接，造成不必要的资源浪费。

3. TCP断开连接（四次挥手）

第一次挥手：客户端打算关闭连接，向服务器发送 FIN 报文，之后客户端进入 FIN_WAIT_1 状态。

第二次挥手：服务端收到该 FIN 报文后，就向客户端发送 ACK 应答报文，接着服务端进入 CLOSED_WAIT 状态。

第三次挥手：客户端收到服务端的 ACK 应答报文后，之后进入 FIN_WAIT_2 状态。等待服务端处理完数据后，也向客户端发送 FIN 报文，之后服务端进入 LAST_ACK 状态。此时客户端不能向服务器发送新的消息，但服务器仍可以向客户端发送消息。

第四次挥手：客户端收到服务端的 FIN 报文后，回一个 ACK 应答报文，之后进入 TIME_WAIT 状态。服务器收到了 ACK 应答报文后，就进入了 CLOSED 状态，至此服务端已经完成连接的关闭。客户端在经过 2MSL 一段时间后，自动进入 CLOSED 状态，至此客户端也完成连接的关闭。

TCP4次挥手原理
为什么要四次挥手？

关闭连接时，客户端发送FIN报文，表示其不再发送数据，但还可以接收数据。
服务端收到FIN报文，先回一个ACK应答报文，服务端可能还要数据需要处理和发送，等到其不再发送数据时，才发送FIN报文给客户端表示同意关闭连接。

为什么 TIME_WAIT 等待的时间是 2MSL？

MSL是报文最大生存时间，网络中可能存在发送方的数据包，当这些发送方的数据包被接收方处理后又会向对方发送响应，所以一来一回需要等待 2 倍的时间。

4. TCP与UDP的区别

TCP是面向连接，UDP是面向无连接，即发送数据前不需要建立连接
TCP提供的是可靠服务，即TCP建立连接传输数据，无差错、不丢失。UDP是尽最大努力交付，不保证可靠交付
TCP是面向字节流，UDP是面向报文。网络出现拥塞不会导致UDP发送速率降低，因此适合视频会议等
TCP只能1对1，UDP可以1对多
TCP 的首部较大为 20 字节，而 UDP 只有 8 字节

5. WebSocket 的实现和应用

（1）什么是WebSocket?

WebSocket是HTML5下一种新的协议（websocket协议本质上是一个基于tcp的协议）
它实现了浏览器与服务器全双工通信，能更好的节省服务器资源和带宽并达到实时通讯的目的
Websocket是一个持久化的协议
websocket是一种全新的协议，不属于http无状态协议，协议名为"ws"

（2）WebSocket与HTTP的关系

WebSocket与HTTP都是基于tcp的，都是可靠性传输协议，都是应用层协议。
WebSocket是双向通信协议，HTTP是单向的
WebSocket是需要浏览器和服务器握手进行建立连接的，而http是浏览器发起向服务器的连接，服务器预先并不知道这个连接
WebSocket在建立握手时，数据是通过HTTP传输的，再Header部份添加两个属性（Upgrade : webSocket; Connection : Upgrade）来标识是webSocket。但是建立之后，在真正传输时候是不需要HTTP协议的

（3）WebSocket特点

在 Http 中一个 Request 只能对应有一个 Response，而且这个 Response 是被动的，不能主动发起
是真正的全双工方式，建立连接后客户端与服务器端是完全平等的，可以互相主动请求。
HTTP长连接中，每次数据交换除了真正的数据部分外，服务器和客户端还要大量交换HTTP header，信息交换效率很低。Websocket协议通过第一个request建立了TCP连接之后，之后交换的数据都不需要发送 HTTP header就能交换数据

WebSocket工作原理

6. web Quality（无障碍）

能够被残障人士使用的网站才能称得上一个易用的（易访问的）网站。使用 alt 属性，那么浏览器在图片不显示的情况下至少可以显示或读出有关图像的描述。

7. BOM属性对象方法

BOM是浏览器对象模型，包含了navigator、location、document、history、screen5个对象
BOM

location对象下的方法包含了URL地址的各个组成部分
- location.href方法可以获取完整的URL地址，对其赋值时可实现页面跳转
- location.search方法获取地址中携带的参数，？后面的部份
- location.hash方法获取地址中的哈希值，#后面的部份
- location.reload方法用来刷新当前页面
navigator对象用以记录浏览器相关自身信息
- navigator.userAgent方法获取浏览器版本和平台等信息
history对象与浏览器地址看操作相对应
- history.go( )– 前进或后退指定的页面数 history.go(num);
- history.back( ) – 后退一页
- history.forward( )– 前进一页

8. HTML5 drag api

dragstart：事件主体是被拖放元素，在开始拖放被拖放元素时触发，。

darg：事件主体是被拖放元素，在正在拖放被拖放元素时触发。

dragenter：事件主体是目标元素，在被拖放元素进入某元素时触发。

dragover：事件主体是目标元素，在被拖放在某元素内移动时触发。

dragleave：事件主体是目标元素，在被拖放元素移出目标元素是触发。

drop：事件主体是目标元素，在目标元素完全接受被拖放元素时触发。

dragend：事件主体是被拖放元素，在整个拖放操作结束时触发

9. HTTP2.0

HTTP/2是HTTP协议自1999年HTTP1.1发布后的首个更新，主要基于SPDY协议。通过二进制分帧、首部压缩、多路复用、请求优先级和服务器推送技术，缩短网页的加载时间并提高安全性。SPDY并不是一种用于替代HTTP的协议，而是对HTTP协议的增强。

二进制分帧：在应用层（HTTP2.0）和传输层（TCP or UDP）之间增加一个二进制分帧层。在二进制分帧层上，HTTP2.0会将所有传输的信息分为更小的消息和帧，并采用二进制格式编码。

多路复用：在HTTP1.x中浏览器限制了同一个域名下的请求数量，当页面需要请求很多资源的时候，队头阻塞会导致在达到最大请求时，资源需要等待其他资源请求完成后才能继续发送。HTTP2.0中,基于二进制分帧层，HTTP2.0可以在共享TCP连接的基础上同时发送请求和响应，解决了队头阻塞的问题。

请求优先级：把HTTP消息分为很多独立帧之后，就可以通过优化这些帧的交错和传输顺序进一步优化性能。

服务器推送：服务器可以对一个客户端请求发送多个响应。服务器向客户端推送资源无需客户端明确的请求。

10. 400 和 401、403 状态码

400：请求无效

原因：前端提交的数据类型与后端实体不一致
401 状态码：当前请求需要用户验证
403 状态码：服务器已经得到请求，但是拒绝执行

11. fetch 发送 2 次请求的原因

fetch 发送 post 请求的时候，总是发送 2 次，第一次状态码是 204，第二次才成功

原因：用 fetch 的 post 请求的时候，导致 fetch 第一次发送了一个 Options 请求，询问服务器是否支持修改的请求头，如果服务器支持，则在第二次中发送真正的请求

##12.Cookie、sessionStorage、localStorage 的区别

共同点：都是保存在浏览器端的、且同源的

Cookie：cookie 数据始终在同源的 http 请求中携带，即 cookie 在浏览器和服务器间来回传递，当客户端发起请求时会自动将当前域名下未过期的cookie全部发送给服务器。而 sessionStorage 和 localStorage 不会自动把数据发给服务器，仅在本地保存。cookie 数据还有路径（path）的概念，可以限制 cookie 只属于某个路径下, 存储的大小很小只有 4K 左右。（key：cookie可以在浏览器和服务器端来回传递，存储容量小，只有大约 4K 左右）

作用时间不同：sessionStorage仅在当前浏览器窗口关闭前有效，自然也就不可能持久保存；localStorage 始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie 只在设置的 cookie 过期时间之前一直有效，即使窗口或浏览器关闭。（key：session为会话层面持久，当窗口关闭时清空sessionStorage中的数据，而localStorage为持久存在。cookie在有效时间内持久存在）

作用域不同：sessionStorage不能在不同的窗口中共享，即使是同一个页面，locastorage在所有的同源窗口中都是共享的，cookie也是在所有同源窗口中共享的。

补充：cookie最主要的作用是用户身份验证。通过session机制，用户登录后，将登录信息传递到服务器，服务器根据用户信息，生成cookie信息传递回浏览器，保存到浏览器的cookie中。当下次登录时，发起请求时，自动将cookie保存的信息传递给服务器，服务器根据cookie解析出用户信息，从而实现用户身份验证。

但由于cookie默认不支持跨域，因此通过session方式实现身份验证有一定的局限性，后改进方法使用 jwt 方式实现跨域身份验证

13. 说一下 web worker

（1）简述Web Worker

Web Worker 的作用，就是为 JavaScript 创造多线程环境，允许主线程创建 Worker 线程，将一些任务分配给后者运行。在主线程运行的同时，Worker 线程在后台运行，两者互不干扰。等到 Worker 线程完成计算任务，再把结果返回给主线程。这样的好处是，一些计算密集型或高延迟的任务，被 Worker 线程负担了，主线程（通常负责 UI 交互）就会很流畅，不会被阻塞或拖慢。

（2）调用worker的限制：

同源限制
worker线程执行的脚本文件必须和主线程的脚本文件同源
文件限制
为了安全，worker线程无法读取本地文件，它所加载的脚本必须来自网络，且需要与主线程的脚本同源
DOM操作限制
worker线程在与主线程的window不同的另一个全局上下文中运行，其中无法读取主线程所在网页的DOM对象，也不能获取 document、window等对象，但是可以获取navigator、location(只读)、XMLHttpRequest、setTimeout族等浏览器API。
通信限制
worker线程与主线程不在同一个上下文，不能直接通信，需要通过postMessage方法来通信。
脚本限制
worker线程不能执行alert、confirm，但可以使用 XMLHttpRequest 对象发出ajax请求。

（3）创建Web Worker的过程

检测浏览器对于 web worker 的支持性 if (window.Worker)若为false说明浏览器不支持worker

创建 web worker 文件（js，回传函数等）,onmessage方法作为接收主线程传递进来的参数的回调函数

onmessage = function(e) {
  console.log('Worker: Message received from main script');
  const result = e.data[0] * e.data[1];
  if (isNaN(result)) {
    postMessage('Please write two numbers');
  } else {
    const workerResult = 'Result: ' + result;
    console.log('Worker: Posting message back to main script');
    postMessage(workerResult);
  }
}

在主线程中创建worker对象，并通过postMessage方法向worker传递信息

window.w = new Worker('workerThread1.js')
window.w.postMessage('Work done!');

worker线程处理完任务后，需要销毁

14. 对 HTML 语义化标签的理解

HTML5 语义化标签是指正确的标签包含了正确的内容，结构良好，便于阅读，比如 nav 表示导航条，类似的还有 article、header、footer 等等标签

15. iframe 是什么？有什么缺点？

iframe 元素会创建包含另一个文档的内联框架，即网页之中包含另一个网页

缺点：

会阻塞主页面的 onload 事件
搜索引擎无法解读这种页面，不利于 SEO
iframe 和主页面共享连接池，而浏览器对相同区域有限制所以会影响性能

16. Doctype 作用?

Doctype 声明于文档最前面，告诉浏览器以何种方式来渲染页面，这里有两种模式，严格模式和混杂模式。

严格模式是浏览器根据w3c标准去解析页面，是一种要求严格的DTD，不允许使用任何表现层的语法；在混杂模式中，页面以宽松的向后兼容的方式展示。模拟老式浏览器的行为以防止站点无法工作。

例子：在Standards（严格）模式下，给span等行内元素设置wdith和height都不会生效，而在quirks模式下，则会生效。

17. Cookie 如何防范 XSS 攻击

XSS（跨站脚本攻击）是指攻击者在返回的 HTML 中嵌入 javascript 脚本，为了减轻这些攻击，需要在 HTTP 头部配上，set-cookie：

httponly-这个属性可以防止 XSS,它会禁止 javascript 脚本来访问 cookie。

secure - 这个属性告诉浏览器仅在请求为 https 的时候发送 cookie。

18. Cookie 和 session 的区别

HTTP 是一个无状态协议，因此 Cookie 的最大的作用就是存储 sessionId 用来唯一标识用户。

当用户登录页面时，客户端将用户信息发送到服务器，服务器生成对应的sessionId存储在cookie返回给客户端，当下一次用户登录时，其请求中就会携带当前域名下所有未过期的cookie给服务器，服务器解析cookie中的session内容获取用户状态

19. 概括 RESTFUL

RESTful是一种web服务架构风格，用通过URL 定位资源，通过HTTP四个动词，GET、POST、PUT、DELETE，对服务器端资源进行操作

20. viewport 和移动端布局

因为生产的手机电脑像素都不相同，因此我们平时用的宽高20px，这里的px是css像素是开发者提供的一个抽象单位，而不是真实的物理像素。
布局视口（layout viewport）是厂家生产时就设定好的，pc端一般是980px，在不设置网页viewport的情况下，pc端默认一布局视口为基准
理想视口（ideal viewport）理想视口就是给定设备物理像素的情况下，最佳的布局视口。需要在头部meta标签部分添加一个标签，使得移动端在理想视口下布局

<meta id="viewport" name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1; user-scalable=no;">
媒体查询：使用媒体查询能够设置差异化的CSS样式，媒体查询能够检测视口的宽，从而编写差异化的css样式。下列代码表示，匹配视口，当视口宽度为320px时，html的字体大小为16px。从而实现不同的视口宽度匹配不同的样式，实现pc端与移动端的布局
```
@media（width : 320px）{
    html{
    font-size : 16px;
    }
}
```
百分比布局，又称流式布局，将宽度定为百分数，将高度固定，使得网页宽度可以自适应浏览器。但百分比布局只对宽进行了自适应适配器，而高度没有适应，因此现在不作为主流方式。
rem单位都是相对于根元素html的font-size来决定大小的,根元素的font-size相当于提供了一个基准，当页面的size发生变化时，只需要改变font-size的值，那么以rem为固定单位的元素的大小也会发生响应的变化。一般将HTML标签的字体大小设置为视口的1/10，则375px的视口，字号为37.5px。
因此Rem结合媒体查询，在不同视口宽度的页面中，修改根字体大小，Rem就会自动变化，实现自适应布局
vw/vh自适应布局，css3中引入了一个新的单位vw/vh，与视图窗口有关，vw表示相对于视图窗口的宽度，vh表示相对于视图窗口高度。1vw=1/100视口宽度，1vh=1/100视口高度。因此得到一条公式：vw尺寸 = 像素尺寸px / （1/100视口宽度）

21. addEventListener 参数

addEventListener(event, function, useCapture)

其中，event 指定事件名；function 指定要事件触发时执行的函数；useCapture 指定事件是否在捕获或冒泡阶段执行

22. cookie session 区别

cookie 数据存放在客户的浏览器上，session 数据放在服务器上。
cookie 不是很安全，别人可以分析存放在本地的 cookie并进行 cookie欺骗考虑到安全应当使用 session
session 会在一定时间内保存在服务器上。当访问增多，会比较占用你服务器的性能考虑到减轻服务器性能方面，应当使用 cookie。
单个 cookie 保存的数据不能超过 4K，很多浏览器都限制一个站点最多保存 20 个 cookie

23. http 返回的状态码

分类	分类描述
1**	服务器收到客户的请求，需要客户机继续发送请求完成整个请求过程
2**	成功，操作被成功接收并处理
3**	重定向，需要进一步的操作以完成请求
4**	客户端错误，请求包含语法错误或无法完成请求
5**	服务器错误，服务器在处理请求的过程中发生了错误

100 Continue 初始的请求已经接受，客户应当继续发送请求的其余部分
200 OK 请求成功。一般用于GET与POST请求（请求成功，服务器响应返回报文）
201 Created 创建成功。成功请求并创建新资源
202 Accepted 已接受。已经接受请求，但未处理完成
204 No Content 指服务器成功处理了请求，但没返回任何内容
206 Partial Content 部分内容。服务器成功处理了部分 GET 请求
301 Moved Permanently 客户请求的文档在其他地方，新的URL在Location头中给出，浏览器应该自动地访问新的URL。
**302 Found ** 临时性重定向，该状态码表示请求的资源已经被分配了新的 URL，希望用户本次使用新的 URL 登录。
400 Bad Request 客户端请求的语法错误，服务器无法理解
401 Unauthorized 该状态码标识发送的请求需要有通过的 Http 认证。
403 Forbidden 服务器理解请求客户端的请求，但是拒绝执行此请求
404 Not Found 请求失败，请求所希望得到的资源未被在服务器上发现。
500 Internal Server Error 服务器内部错误，无法完成请求
502 Bad Gateway 作为网关或者代理工作的服务器尝试执行请求时，从远程服务器接收到了一个无效的响应
**504 Gateway Time-out **充当网关或代理的服务器，未及时从远端服务器获取请求（接口响应超时）
505 HTTP Version Not Supported 服务器不支持请求中所指明的HTTP版本

24. http 常用请求头

字段名	说明	示例
Accept	能够接受的回应内容类型（Content-Types）	Accept: text/plain
Accept-Charset	能够接受的字符集	Accept-Charset: utf-8
Accept-Encoding	能够接受的编码方式列表	Accept-Encoding: gzip, deflate
Accept-Language	能够接受的回应内容的自然语言列表	Accept-Language: en-US
Authorization	用于超文本传输协议的认证的认证信息	Authorization: Basic QWxhZGRpbjpvcGVuIHNlc2FtZQ==
Cache-Control	用来指定在这次的请求/响应链中的所有缓存机制都必须遵守的指令	Cache-Control: no-cache
Connection	该浏览器想要优先使用的连接类型	Connection: keep-alive Connection: Upgrade
Cookie	服务器通过 Set- Cookie （下文详述）发送的一个超文本传输协议Cookie	Cookie: $Version=1; Skin=new;
Content-Length	以八位字节数组（8位的字节）表示的请求体的长度	Content-Length: 348
Content-Type	请求体的多媒体类型	Content-Type: application/x-www-form-urlencoded
Date	发送该消息的日期和时间	Date: Tue, 15 Nov 1994 08:12:31 GMT
Expect	表明客户端要求服务器做出特定的行为	Expect: 100-continue
Host	服务器的域名(用于虚拟主机 )，以及服务器所监听的传输控制协议端口号	Host: en.wikipedia.org:80 Host: en.wikipedia.org
If-Match	仅当客户端提供的实体与服务器上对应的实体相匹配时，才进行对应的操作。主要作用时，用作像 PUT 这样的方法中，仅当从用户上次更新某个资源以来，该资源未被修改的情况下，才更新该资源	If-Match: “737060cd8c284d8af7ad3082f209582d”
If-Modified-Since	****允许在对应的内容未被修改的情况下返回304未修改	If-Modified-Since: Sat, 29 Oct 1994 19:43:31 GMT
If-None-Match	允许在对应的内容未被修改的情况下返回304未修改	If-None-Match: “737060cd8c284d8af7ad3082f209582d”
If-Range	如果该实体未被修改过，则向我发送我所缺少的那一个或多个部分；否则，发送整个新的实体	If-Range: “737060cd8c284d8af7ad3082f209582d”
Range	仅请求某个实体的一部分	Range: bytes=500-999
User-Agent	浏览器的浏览器身份标识字符串	User-Agent: Mozilla/5.0 (X11; Linux x86_64; rv:12.0) Gecko/20100101 Firefox/21.0
Origin	发起一个针对跨来源资源共享的请求	Origin: http://www.example-social-network.com

25. 浏览器缓存

浏览器缓存分为两种：强缓存和协商缓存。为了节约资源,并且可以加速浏览网站的速度,当用户第一次进行访问网页的时候,浏览器在用户磁盘上对请求的文档进行保存,当用户第二次访问的时候，就会从本地直接显示，从而提高了访问页面的速度。

强缓存：服务器通过设置响应消息中header的Expires和cache-control字段告诉浏览器缓存的有效期。这种方法会有一个固定时间，所带来的问题是如果服务器数据进行了更新，但是还没有到强缓存的过期时间，则数据无法更新。如果 cache-control 与 expires 同时存在的话，cache-control 的优先级高于 expires。

协商缓存：协商缓存就是通过服务器来判断缓存是否可用。协商缓存相关字段有 Last-Modified/If-Modified-Since，Etag/If-None-Match 。

	获取资源形式	状态码	发送请求到服务器
强缓存	从缓存获取	200（from cache）	否，直接从缓存中获取
协商缓存	从缓存获取	304（not modified）	是，通过服务器返回的状态码来告知是否可以从缓存中获取

缓存过程：

浏览器第一次加载资源，服务器返回200，浏览器将资源文件从服务器上请求下载下来，并把response header及该请求的返回时间一并缓存；
下一次加载资源时，先比较当前时间和上一次返回200时的时间差，如果没有超过cache-control设置的max-age，则没有过期，命中强缓存，不发请求直接从本地缓存读取该文件（如果浏览器不支持HTTP1.1，则用expires判断是否过期）；如果时间过期，则向服务器发送header带有If-None-Match和If-Modified-Since的请求
服务器收到请求后，优先根据Etag的值判断被请求的文件有没有做修改，Etag值一致则没有修改，命中协商缓存，返回304；如果不一致则有改动，直接返回新的资源文件带上新的Etag值并返回200；；
如果服务器收到的请求没有Etag值，则将If-Modified-Since和被请求文件的最后修改时间做比对，一致则命中协商缓存，返回304；不一致则返回新的last-modified和文件并返回200；

第一次请求：
请求缓存：第一次请求

第二次请求：
请求缓存：第二次请求

26. 状态码304

304：如果客户端发送了一个带条件的 GET 请求且该请求已被允许，而文档的内容（自上次访问以来或者根据请求的条件）并没有改变，则服务器应当返回这个 304 状态码。

27. 前端优化

降低请求量：合并资源，减少 HTTP 请求数，minify / gzip 压缩，webP，lazyLoad。
加快请求速度：预解析 DNS，减少域名数，并行加载，CDN 分发。
缓存：HTTP 协议缓存请求，离线缓存 manifest，离线数据缓存 localStorage。
渲染：JS/CSS 优化，加载顺序，服务端渲染，pip

28. GET 和 POST 的区别

get 参数通过 url 传递，post 放在 request body 中。
get 请求在 url 中传递的参数是有长度限制的，而 post 没有。
get 比 post 更不安全，因为参数直接暴露在 url 中，所以不能用来传递敏感信息。
get 请求只能进行 url 编码，而 post 支持多种编码方式
get 请求参数会被完整保留在浏览历史记录里，而 post 中的参数不会被保留。
get产生一个 TCP 数据包；post产生两个 TCP 数据包。

29. 状态码301 和 302 的区别

301：被请求的资源永久移动到新的位置，搜索引擎在抓取新内容的同时也将旧的网址替换成重定向之后的网址。

302：页面暂时性转移，表示资源或页面暂时转移到另一个位置 ,搜索引擎会抓取新的内容而保存旧的网址并认为新的网址只是暂时的。

字面上的区别就是 301 是永久重定向，而 302 是临时重定向。

301 比较常用的场景是使用域名跳转。302 用来做临时跳转比如未登陆的用户访问用户中心重定向到登录页面

30. HTTP 支持的方法

GET, POST, HEAD, OPTIONS, PUT, DELETE, TRACE, CONNECT

31. 如何通过纯css画一个三角形

.triangle{
        width: 0px;
        height: 0px;
        border-top: 100px solid red;
        border-right: 100px solid transparent;
        border-bottom: 100px solid transparent;
        border-left: 100px solid transparent;
}

一个盒子没有内容，上边框宽100px且有色，右、左、下边框宽同样100px，但通过transparent设置为透明，使得边框重合形成三角形。注意盒子宽高一定要设为0，否则无效

32. 状态码 304 和 200

200：请求已成功，请求所希望的响应头或数据体将随此响应返回。

304：请求被允许，且而文档的内容（自上次访问以来或者根据请求的条件）并没有改变，则服务器应当返回这个状态码。可以从缓存中读取网站信息。

33. HTML5 新增的元素

先 html5 为了更好的实践 web 语义化，增加了 header，footer，nav,aside,section 等语义化标签。
在表单方面，为了增强表单，为 input 增加了 color，emial,data ,range 等类型。
在存储方面，提供了 sessionStorage，localStorage,和离线存储，通过这些存储方式方便数据在客户端的存储和获取。
在多媒体方面规定了音频和视频元素 audio 和 vedio
另外还有地理定位，canvas 画布，拖放，多线程编程的 web worker 和 websocket 协议

34. 在地址栏里输入一个 URL,到这个页面呈现出来，中间会发生什么？

输入url后，首先找到这个域名的服务器ip，为了寻找这个ip，浏览器首先会寻找缓存，查看缓存中是否有记录。
缓存的查找步骤为：浏览器缓存->系统缓存->路由缓存。
缓存中没有则查找系统的hosts文件中是否有记录。
若系统的hosts文件中没有，则查询DNS服务器，通过域名解析获得服务器的ip地址。
拿到ip地址后，浏览器根据相应的ip地址和端口号，构造一个http请求，这个请求报文会包含这次请求的信息，主要是请求方法，请求说明和请求附带的数据。
将这个http请求封装在一个tcp包中，这个tcp包会依次经过传输层、网络层、数据链路层、物理层到达服务器。
服务器解析这个请求做出响应，返回相应的html给浏览器。
因为html是一个树形结构，浏览器根据该html构建DOM树。
在DOM树构建过程中，如果遇到JS脚本或外部JS链接，则会停止构建DOM树执行和下载相应的代码，这会造成阻塞，影响网页渲染效率。这就是为什么建议js代码放到html最后的原因
最后，根据外部样式，内部样式，内联样式构建一个CSS对象模型树CSSOM树，最后再与DOM树合并成渲染树。这里主要做的是排除非视觉节点，即script、meta和排除display为none的节点，之后再进行布局确定各个元素的尺寸和位置，随后渲染页面。
在html文件中会包含图片、视频、音频等资源，在解析DOM过程中会自行并行下载。
所以的请求需要关注缓存，缓存一般通过Cache-Control、Last-Modify、Expires等首部字段控制，Cache-Control 和 Expires 的区别在于 Cache-Control 使用相对时间，Expires 使用的是基于服务器端的绝对时间，因为存在时差问题，一般采用 Cache-Control。Cache-Control的优先级高于Expires。
在请求这些设置了缓存的数据时，会先查看是否会过期，如果没过期则直接使用缓存中资源。如果过期了，则向数据库发起请求。服务器校验文件是否修改，通过返回值告诉浏览器检验结果，若返回304则说明文件没有修改，可直接使用本地缓存中的资源，若返回值为200，则说明资源有修改，返回了新的资源

35. 常见的 HTTP 的头部

可以将 http 首部分为通用首部，请求首部，响应首部，实体首部

通用首部表示一些通用信息，比如 date 表示报文创建时间

请求首部就是请求报文中独有的，如 cookie，和缓存相关的如 if-Modified-Since

响应首部就是响应报文中独有的，如 set-cookie，和重定向相关的 location

实体首部用来描述实体部分，如 allow 用来描述可执行的请求方法，content-type 描述主题类型，content-Encoding 描述主体的编码方式

36. http2.0 的特性

1、内容安全，应为 http2.0 是基于 https 的，天然具有安全特性，通过 http2.0 的特性可以避免单纯使用 https 的性能下降

2、二进制分帧，http1.X 的解析是基于文本的，http2.0 将所有的传输信息分割为更小的消息和帧，并对他们采用二进制格式编码，基于二进制可以让协议有更多的扩展性，比如引入了帧来传输数据和指令

3、多路复用，这个功能相当于是长连接的增强，每个 request 请求可以随机的混杂在一起，接收方可以根据 request 的 id 将 request 再归属到各自不同的服务端请求里面，另外多路复用中也支持了流的优先级，允许客户端告诉服务器那些内容是更优先级的资源，可以优先传输

37. cache-control 的值有哪些

cache-control 是一个通用首部字段被用于 HTTP 请求和响应中，通过指定指令来实现缓存机制，这个缓存指令是单向的，常见的取值有 private、no-cache、max-age、 must-revalidate 等，默认为 private。

Cache-directive	说明
public	所有内容都将被缓存(客户端和代理服务器都可缓存)
private	内容只缓存到私有缓存中(仅客户端可以缓存，代理服务器不可缓存)
no-cache	必须先与服务器确认返回的响应是否被更改，然后才能使用该响应来满足后续对同一个网址的请求。因此，如果存在合适的验证令牌 (ETag)，no-cache 会发起往返通信来验证缓存的响应，如果资源未被更改，可以避免下载。
no-store	所有内容都不会被缓存到缓存或 Internet 临时文件中
must-revalidation/proxy-revalidation	如果缓存的内容失效，请求必须发送到服务器/代理以进行重新验证
max-age=xxx (xxx is numeric)	缓存的内容将在 xxx 秒后失效, 这个选项只在HTTP 1.1可用, 并如果和Last-Modified一起使用时, 优先级较高

38. 浏览器在生成页面的时候，会生成哪两颗树

构造两棵树，DOM 树和 CSSOM 规则树

当浏览器接收到服务器相应来的 HTML 文档后，会遍历文档节点，生成 DOM 树，

CSSOM 规则树由浏览器解析内部样式、外部样式、内联样式的CSS

39. csrf 和 xss 的网络攻击及防范

CSRF：跨站请求伪造，可以理解为攻击者盗用了用户的身份，以用户的名义发送了恶意请求，比如这个制造攻击的网站使用一张图片，但是这种图片的链接却是可以修改数据库的，这时候攻击者就可以以用户的名义操作这个数据库，防御方式的话：使用验证码，检查 https 头部的 refer（表示请求当前资源的客户端来源），使用 token 。总之就是身份验证。

XSS：跨站脚本攻击，是说攻击者通过注入恶意的脚本，在用户浏览网页的时候进行攻击，比如获取 cookie，或者其他用户身份信息，防御的话为 cookie 设置 httpOnly 属性（防止js代码读取cookie），对用户的输入进行检查，进行特殊字符过滤