Interview Point (Common Used)

1、XSS和CSRF定义、区别、防范
XSS（Cross Site Scripting）：跨域脚本攻击。
在网页上注入脚本语言，如注入JS代码一旦执行，那可就不受控制了。因为它跟网页原有的JS有同样的权限，例如可以获取server端数据、可以获取cookie等。XSS的危害想当大，如果页面可以随意执行别人不安全的JS代码，轻则会让页面错乱、功能缺失，重则会造成用户的信息泄露。
XSS的攻击方式
1、反射型
发出请求时，XSS代码出现在url中，作为输入提交到服务器端，服务器端解析后响应，XSS代码随响应内容一起传回给浏览器，最后浏览器解析执行XSS代码。这个过程像一次反射，所以叫反射型XSS。
2、存储型存
储型XSS和反射型XSS的差别在于，提交的代码会存储在服务器端（数据库、内存、文件系统等），下次请求时目标页面时不用再提交XSS代码。

CSRF（Cross-site request forgery）：跨站请求伪造。
攻击者盗用了你的身份，以你的名义发送恶意请求，对服务器来说这个请求是完全合法的，但是却完成了攻击者所期望的一个操作。通常来说CSRF是由XSS实现的，但它与XSS非常不同，XSS利用站点内的信任用户，而CSRF则是伪装成受信任用户的请求来访问操作受信任的网站。

XSS如何预防：
最根本最有效的方法就是对用户输入的内容进行验证和替换，这样的话即便用户恶意输入一些指令，也会被替换为其他不可执行的字符。
除此之外，还可以通过对cookie进行较强的控制，比如对敏感的cookit增加http-only限制，让JS获取不到cookie内容。

CSRF如何防御：
方法一、Token 验证：（用的最多）
（1）服务器发送给客户端一个token；
（2）客户端提交的表单中带着这个token。
（3）如果这个 token 不合法，那么服务器拒绝这个请求。

CSRF 和 XSS 的区别
区别一：
CSRF：需要用户先登录网站A，获取 cookie。XSS：不需要登录。
区别二：（原理的区别）
CSRF：是利用网站A本身的漏洞，去请求网站A的api。XSS：是向网站 A 注入 JS代码，然后执行 JS 里的代码，篡改网站A的内容。

2、HTTP状态码、HTTP缓存、HTTP实体压缩
HTTP常见状态码区别：
301 : 301 代表永久性转移(Permanently Moved)
302 : 302 代表暂时性转移(Temporarily Moved )
浏览器看到这个状态码后，从响应头部取location字段后跳转。
不同在于，301表示旧地址A的资源已经被永久地移除了（这个资源不可访问了），搜索引擎在抓取新内容的同时也将旧的网址交换为重定向之后的网址。302表示旧地址A的资源还在（仍然可以访问），这个重定向只是临时地从旧地址A跳转到地址B，搜索引擎会抓取新的内容而保存旧的网址。
304: 304 (Not Modified) 客户端有缓冲的文档并发出了一个条件性的请求（一般是提供If-Modified-Since头表示客户只想比指定日期更新的文档）。服务器告诉客户，原来缓冲的文档还可以继续使用。
401: 401 未授权(Unauthorized）请求需要认证。客户端请求头部未携带Authentication进行认证。
403: 403(Forbidden)请求的对应资源访问。服务器理解客户的请求，但拒绝处理它。
500 Internal Server Error  表示服务器执行请求的时候出错了
503 Service Unavailable  表示服务器超负载或正停机维护，无法处理请求，这只是暂时状态。
504（Gateway timeout 网关超时）: 服务器作为网关或代理，但是没有及时从上游服务器收到请求。

请求方法区别：
当被问Get与Post的区别，你轻轻松松的给出了一个“标准答案”：

• GET在浏览器回退时是无害的，而POST会再次提交请求。
• GET产生的URL地址可以被Bookmark，而POST不可以。
• GET请求会被浏览器主动cache，而POST不会，除非手动设置。
• GET请求只能进行url编码，而POST支持多种编码方式。
• GET请求参数会被完整保留在浏览器历史记录里，而POST中的参数不会被保留。
• GET请求在URL中传送的参数是有长度限制的，而POST么有。
• 对参数的数据类型，GET只接受ASCII字符，而POST没有限制。
• GET比POST更不安全，因为参数直接暴露在URL上，所以不能用来传递敏感信息。
• GET参数通过URL传递，POST放在Request body中。

本质上，GET和POST的底层也是TCP/IP，也就是说，GET/POST都是TCP链接。GET和POST能做的事情是一样一样的。你要给GET加上request body，给POST带上url参数，技术上是完全行的通的。

HTTP缓存：
前端缓存可分为两大类：http缓存和浏览器缓存。

常见的http缓存只能缓存get请求响应的资源，对于其他类型的响应则无能为力，所以后续说的请求缓存都是指GET请求。
HTTP缓存有多种规则，根据是否需要重新向服务器发起请求来分类，将其分为两大类：强制缓存和协商缓存/对比缓存。

强制缓存：即Cache-Control的max-age没有过期或者Expires的日期时间没有过期，那么就会直接使用浏览器的缓存数据。
Cache-Control是最重要的规则，常见取值包含：
访问设置：
private（默认）：代表只有发起请求的浏览器才可以进行缓存。
public：代表http请求返回所经过的任何路径当中都可以对返回内容进行缓存操作。
缓存设置：
max-age=xxx秒：最大缓存时间
no-cache：可以在本地进行缓存，但使用时必须走协商缓存
no-store：本地和代理服务器都不允许缓存，每次都要重新请求，拿到内容
no-transform：主要是用在proxy服务器，不允许进行格式转换。

强制缓存优先级： max-age (HTTP 1.1) > Expires (HTTP 1.0）
此外，Pragma指令(HTTP 1.0)，常用值no-cache，含义和Cache-Control:no-cache相同，优先级最高，现在默认浏览器均默认使用HTTP1.1，所以它的作用基本忽略。
注意：
在chrome浏览器中强制缓存返回的200状态会有两种情况：
1、from memory cache
(从内存中获取/一般缓存更新频率较高的js、图片、字体等资源)
2、from disk cache
(从磁盘中获取/一般缓存更新频率较低的js、css等资源)
这两种情况是chrome自身的一种缓存策略，这也是为什么chrome浏览器响应的快的原因。其他浏览返回的是已缓存状态，没有标识是从哪获取的缓存。

对比缓存：当第一次请求时服务器返回的响应头中没有Cache-Control和Expires或者Cache-Control和Expires过期还或者-Control的属性设置为no-cache时(即不走强缓存)，那么浏览器第二次请求时就会与服务器进行协商，与服务器端对比判断资源是否进行了修改更新。没有更新就会返回304状态码，告诉浏览器可以使用缓存中的数据。有更新就会返回200状态码，服务器就会返回更新后的资源并且将缓存信息一起返回。 跟协商缓存相关的HTTP头属性有（ETag/If-Not-Match 、Last-Modified/If-Modified-Since），请求头和响应头需要成对出现。

总结：
1、对于强制缓存，服务器通知浏览器一个缓存时间，在缓存时间内，下次请求，直接用缓存，不在时间内，执行协商缓存策略。
2、对于协商缓存，将缓存信息中的Etag和Last-Modified通过请求发送给服务器，由服务器校验，返回304状态码时，浏览器直接使用缓存。

浏览器缓存：
最常用到的浏览器缓存有：cookie、sessionStorage、localStorage这三者的主要特征如下

HTTP压缩：
Content-Encoding 是一个实体消息首部，用于对特定媒体类型的数据进行压缩。当这个首部出现的时候，它的值表示消息主体进行了何种方式的内容编码转换。这个消息首部用来告知客户端应该怎样解码才能获取在 Content-Type 中标示的媒体类型内容。

Content-Encoding取值：
gzip　　表明实体采用GNU zip编码
compress 表明实体采用Unix的文件压缩程序
deflate　　表明实体是用zlib的格式压缩的
identity　　表明没有对实体进行编码。当响应头没有Content-Encoding时，就默认为这种情况
br   表明采用 Brotli 算法的编码方式
gzip, compress, 以及deflate编码都是无损压缩算法，用于减少传输报文的大小，不会导致信息损失。 其中gzip通常效率最高， 使用最为广泛。

客户端可以事先声明一系列的可以支持压缩模式，与请求一齐发送。 Accept-Encoding 这个首部就是用来进行这种内容编码形式协商的。

举例：
Request Header:
accept-encoding: gzip, deflate, br

Response Header:
content-encoding: gzip
content-type: application/x-javascript

3、HTTPS、HTTP2：
对称加密：加密和解密时使用同一个秘钥。（常见有DES,AES, 特点：计算量少，效率高，但秘钥容易暴露，安全性低)
非对称加密：两个来进行相互加密和解密，公开公钥，保留私钥。（常见有RSA,DSA, 特点：安全但速度较慢)
为什么HTTPS是安全的？
HTTPS对传输的数据进行加密。客户端发起 HTTPS 请求，服务端返回CA（权威机构）颁发的SSL证书，客户端对证书进行验证，验证通过后本地生成对称加密算法随机数，通过证书中的公钥对随机数进行加密传输到服务端，服务端接收后通过私钥解密得到随机数，之后的数据交互通过对称加密算法进行加解密。

HTTPS的整体过程分为证书验证和数据传输阶段，具体的交互过程如下：

为什么需要CA权威机构颁发证书？
HTTP 协议被认为不安全是因为传输过程容易被监听者勾线监听、伪造服务器，而 HTTPS 协议主要解决的便是网络传输的安全性问题。若不存在认证机构，任何人都可以制作证书，这带来的安全风险便是经典的“中间人攻击”问题。证书可以防止”中间人“攻击，同时可以为网站提供身份证明。
浏览器是如何确保 CA 证书的合法性？
证书信息包含颁发机构、公司、公钥、指纹、有效期、域名等，浏览器本地验证域名，合法性，颁发机构等信息，然后与CA服务器校验是否被篡改，证书验证是采用非对称加密实现。其实这就是非加密对称中公私钥的用处，虽然中间人可以得到证书，但私钥是无法获取的，中间人即使拿到证书也无法伪装成合法服务端，因为无法对客户端传入的加密数据进行解密。从而避免了“中间人攻击”问题。
本地随机数被窃取怎么办？
其实 HTTPS 并不包含对随机数的安全保证，HTTPS 保证的只是传输过程安全，而随机数存储于本地，本地的安全属于另一安全范畴，应对的措施有安装杀毒软件、反木马、浏览器升级修复漏洞等。
抓包工具如何对使用 HTTPS数据进行抓包？
HTTPS 只防止用户在不知情的情况下通信被监听，如果用户主动授信，是可以构建“中间人”网络，代理软件可以对传输内容进行解密。通常 HTTPS 抓包工具的使用方法是会生成一个证书，用户需要手动把证书安装到客户端中，然后终端发起的所有请求通过该证书完成与抓包工具的交互，然后抓包工具再转发请求到服务器，最后把服务器返回的结果在控制台输出后再返回给终端，从而完成整个请求的闭环。

HTTP 与 HTTPS 区别：

• HTTP 明文传输，数据都是未加密的，安全性较差，HTTPS（SSL+HTTP） 数据传输过程是加密的，安全性较好。
• 使用 HTTPS 协议需要到 CA（Certificate Authority，数字证书认证机构） 申请证书，一般免费证书较少，因而需要一定费用。证书颁发机构如：Symantec、Comodo、GoDaddy 和 GlobalSign 等。
• HTTP 页面响应速度比 HTTPS 快，主要是因为 HTTP 使用 TCP 三次握手建立连接，客户端和服务器需要交换 3 个包，而 HTTPS除了 TCP 的三个包，还要加上 ssl 握手需要的 9 个包，所以一共是 12 个包。
• http 和 https 使用的是完全不同的连接方式，用的端口也不一样，前者是 80，后者是 443。
• HTTPS 其实就是建构在 SSL/TLS 之上的 HTTP 协议，所以，要比较 HTTPS 比 HTTP 要更耗费服务器资源。

restful API设计：

4、JavaScript防抖与节流
防抖：对于短时间内连续触发的事件（如鼠标移动事件、下拉滚动事件），当事件某个时间期限稳定不触发时执行函数。
节流：

5、JavaScript事件线程机制和异步执行
事件触发线程：当一个事件被触发时该线程会把事件添加到待处理队列的队尾，等待JS引擎的处理。这些事件可来自JavaScript引擎当前执行的代码块如setTimeOut、也可来自浏览器内核的其他线程如鼠标点击、AJAX异步请求等，但由于JS的单线程关系所有这些事件都得排队等待JS引擎处理。

6、setTimeout和setInterval存在的问题、替代方案

7、移动端300ms点击延迟和点击穿透问题
双击缩放(double tap to zoom)，这也是会有上述 300 毫秒延迟的主要原因。

8、ES6继承及语法，模块化