知识梳理——计算机基础

浏览器工作原理与实践

1. Cookie如何防范XSS攻击

XSS（跨站脚本攻击）是指攻击者在返回的HTML中嵌入javascript脚本，为了减轻这些攻击，需要在HTTP头部配上，set-cookie：httponly-这个属性可以防止XSS,它会禁止javascript脚本来访问cookie。

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

结果应该是这样的：Set-Cookie=…

CSRF攻击

CSRF（跨站请求伪造）是指黑客引诱用户打开黑客的网站，在黑客的网站中，利用用户的登录状态发起的跨站请求。为避免遭受CSRF攻击：

1. 充分利用好Cookie的SameSite属性（strict、lax、none）
2. 在服务端验证请求来源的站点（通过 Referrer 告诉服务器HTTP请求的来源）
3. CSRF Token

2.关于缓存的介绍

1.什么是缓存？
缓存是一种保存资源副本并在下次请求时直接使用该副本的技术。

2.为什么需要缓存？
如果没有缓存的话，每一次网络请求都要加载大量的图片和资源，这会使页面的加载变慢许多。那缓存的目的其实就是为了尽量减少网络请求的体积和数量，让页面加载的更快。

3.哪些资源可以被缓存？——静态资源（js、css、img）

• 网站的 html 是不能被缓存的。因为网站在使用过程中 html 随时有可能被更新，随时有可能被替换模板。
• 网页的业务数据也是不能被缓存的。比如留言板和评论区，用户随时都可以在底下评论，那数据库的内容就会被频繁被更新。

http缓存策略（强缓存+协商缓存）

缓存分为两种：强缓存和协商缓存，根据响应的Response Headers内容来决定。

强缓存：就是直接从本地缓存中读取文件，浏览器不需要向服务器发送请求。

• Cache-Control：控制强制缓存的时间，当值设为max-age=300时，则代表在这个请求正确返回时间（浏览器也会记录下来）的5分钟内再次加载资源，就会命中强缓存。cache-control 的优先级高于 expires
• Expires：过期时间，如果设置了时间，则浏览器会在设置的时间内直接读取缓存，不再请求

协商缓存：它是一种服务端的缓存策略，即通过服务端来判断客户端的资源，是否和服务端资源一样，如果一致则返回 304 ，反之返回 200 和最新的资源。

• Last-Modifed/If-Modified-Since：服务器会匹配浏览器发过来的 If-Modified-Since 是否和自己最后一次修改的 Last-Modified 的值相等。如果相等，则返回 304 ，表示资源未被修改；如果不相等，则返回200，并返回资源和新的 Last-Modified 的值
• Etag/If-None-Match：服务器会匹配浏览器发过来的 If-None-Match 是否和自己最后一次修改的 Etag 的值相等。如果相等，则返回 304 ，表示资源未被修改；如果不相等，则返回 200 ，并返回资源和新的 Etag 的值。

你知道304吗？图解强缓存和协商缓存
http面试必会的：强制缓存和协商缓存
HTTP强缓存和协商缓存（弱缓存）

3.前端优化

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

4.cookie和session的区别

Cookie和session都可用来存储用户信息，cookie存放于客户端，session存放于服务器端，因为cookie存放于客户端有可能被窃取，所以cookie一般用来存放不敏感的信息，比如用户设置的网站主题，敏感的信息用session存储，比如用户的登陆信息，session可以存放于文件，数据库，内存中都可以，cookie可以服务器端响应的时候设置，也可以客户端通过JS设置cookie会在请求时在http首部发送给客户端，cookie一般在客户端有大小限制，一般为4K。

javaScript本地缓存的方法：cookie，localStorage，sessionStorage的区别

1、生命周期：
Cookie：可设置失效时间，否则默认为关闭浏览器后失效。

• 不设置过期时间，则表示这个cookie生命周期为浏览器会话期间，只要关闭浏览器窗口，cookie就消失了。
• 设置了过期时间，浏览器就会把cookie保存到硬盘上，关闭后再次打开浏览器，这些cookie依然有效直到超过设定的过期时间。

localStorage：除非被手动清除，否则永久保存（浏览器关闭后数据不丢失）
sessionStorage：仅在当前网页会话下有效，关闭页面或浏览器后就会被清除

2、存储大小：
Cookie：数据大小不能超过4k
localStorage和sessionStorage：可以保存5M的信息

3、数据与服务器之间的交互方式：
cookie：cookie的数据会自动的传递到服务器，服务器端也可以写cookie到客户端
sessionStorage和localStorage：仅在客户端即浏览器中保存，不参与和服务器的通信

4、易用性：
Cookie：需要程序员自己封装，原生的cookie接口不友好
其他两个：即可采用原生接口，亦可再次封装

5、应用场景：
从安全性来说，因为每次http请求都回携带cookie信息，这样子浪费了带宽，所以cookie应该尽可能的少用，此外cookie还需要指定作用域，不可以跨域调用，限制很多，但是用户识别用户登陆来说，cookie还是比storage好用，其他情况下可以用storage，localstorage可以用来在页面传递参数，sessionstorage可以用来保存一些临时的数据，防止用户刷新页面后丢失了一些参数。

5.TCP建立连接的三次握手过程

客户端和服务端都需要知道各自可收发，所以需要三次握手

第一次握手：起初两端都处于CLOSED关闭状态，Client将标志位SYN置为1，随机产生一个值seq=x，并将该数据包发送给Server，Client进入SYN-SENT状态，等待Server确认；
第二次握手：Server收到数据包后由标志位SYN=1得知Client请求建立连接，Server将标志位SYN和ACK都置为1，ack=x+1，随机产生一个值seq=y，并将该数据包发送给Client以确认连接请求，Server进入SYN-RCVD状态，此时操作系统为该TCP连接分配TCP缓存和变量；

第三次握手：Client收到确认后，检查ack是否为x+1，ACK是否为1，如果正确则将标志位ACK置为1，ack=y+1，并且此时操作系统为该TCP连接分配TCP缓存和变量，并将该数据包发送给Server，Server检查ack是否为y+1，ACK是否为1，如果正确则连接建立成功，Client和Server进入ESTABLISHED状态，完成三次握手，随后Client和Server就可以开始传输数据。

6.cdn原理

CDN的全称是Content Delivery Network，即内容分发网络。CDN的基本原理是广泛采用各种缓存服务器，将这些缓存服务器分布到用户访问相对集中的地区或网络中，在用户访问网站时，利用全局负载技术将用户的访问指向距离最近的工作正常的缓存服务器上，由缓存服务器直接响

7. TCP/IP的网络模型

TCP/IP模型是一系列网络协议的总称，这些协议的目的是使得计算机之间可以进行信息交换，
TCP/IP模型四层架构从下到上分别是链路层，网络层，传输层，应用层

链路层的作用是负责建立电路连接，是整个网络的物理基础，典型的协议包括以太网，ADSL等，

网络层负责分配地址和传送二进制数据，主要协议是IP协议，

传输层负责传送文本数据，主要协议是TCP

应用层负责传送各种最终形态的数据，是直接与用户信息打交道的层，主要协议是http，ftp等

8. TCP和UDP的区别，为什么三次握手四次挥手

TCP和UDP之间的区别 OSI 和TCP/IP 模型在传输层定义两种传输协议：TCP（或传输控制协议）和UDP（或用户数据报协议）。 UDP 与TCP 的主要区别在于UDP 不一定提供可靠的数据传输。 事实上，该协议不能保证数据准确无误地到达目的地。

为什么TCP要进行四次挥手呢？

因为是双方彼此都建立了连接，因此双方都要释放自己的连接，A向B发出一个释放连接请求，他要释放链接表明不再向B发送数据了，此时B收到了A发送的释放链接请求之后，给A发送一个确认，A不能再向B发送数据了，它处于FIN-WAIT-2的状态，但是此时B还可以向A进行数据的传送。此时B向A 发送一个断开连接的请求，A收到之后给B发送一个确认。此时B关闭连接。A也关闭连接。

为什么要有TIME-WAIT这个状态呢，这是因为有可能最后一次确认丢失，如果B此时继续向A发送一个我要断开连接的请求等待A发送确认，但此时A已经关闭连接了，那么B永远也关不掉了，所以我们要有TIME-WAIT这个状态。

当然TCP也并不是100%可靠的。

9. 操作系统进程和线程的区别

进程，是并发执行的程序在执行过程中分配和管理资源的基本单位，是一个动态概念，竞争计算机系统资源的基本单位。

线程，是进程的一部分，一个没有线程的进程可以被看作是单线程的。线程有时又被称为轻权进程或轻量级进程，也是 CPU 调度的一个基本单位。

10.web worker

在HTML页面中，如果在执行脚本时，页面的状态是不可相应的，直到脚本执行完成后，页面才变成可相应。web worker是运行在后台的js，独立于其他脚本，不会影响页面你的性能。并且通过postMessage将结果回传到主线程。这样在进行复杂操作的时候，就不会阻塞主线程了。

如何创建web worker：

1. 检测浏览器对于web worker的支持性
2. 创建web worker文件（js，回传函数等）
3. 创建web worker对象

11.http和https的区别

http：用于从服务器传输超文本到本地浏览器的传输协议，可以使浏览器更加高效，使网络传输减少（明文传输）

https：http + SSL（对传输的数据进行加密，更安全）

1. 需要到ca申请证书，一般免费证书较少，所以费用较高
2. 握手阶段比较费时，对网站的进度有影响，影响用户体验
3. 流量成本高