（十七）JS篇—

1、说说undefind和null的区别，并举例说明如何让一个对象的属性变为null。

在javascript中undefnd 和null都表示空值。undefind指变量已经声明未赋值，或者变量定义的值就是undefind。例如，let a; console.log(a); // 输出：undefined。null 是指给显式的赋值为null。
例如，let b = null; console.log(b); // 输出：null。如果我们想让一个对象的属性变为null，可以直接为该属性赋值null。例如，我们有一个对象let obj = {name: ‘Alice’};，如果我们想让name属性变为null，可以这样操作：obj.name = null;，然后console.log(obj); // 输出：{name: null}。

2、V8垃圾回收机制

V8是一个开源的JavaScript引擎，它被用于Chrome浏览器和Node.js等平台。V8的垃圾回收机制是V8对内存管理的实现。
v8的垃圾回收机制采用了分代垃圾回收策略，将内存分为新生代和老生代两部分。新生代，内存用于存储生命周期短的对象，采用Scavenge算法就是垃圾回收。老生代内存用于存储生命周期长的对象，采用 Mark Sweep和Mark-Compact算法进行垃圾回收。
在V8中，垃圾回收器周期性地检查内存中不再使用的对象，并将其回收以释放内存空间。由于V8采用了分代垃圾回收策略，所以在回收新生代内存时，只需要扫描新生代内存中少量存货对象即可，因此垃圾回收速度较快。而在回收老生代内存时，粗腰扫描的存货对象较多，因此回收速度较快。
总的来说，V8的垃圾回收机制通过采用分代垃圾回收策略，提高了内存回收效率，减少了内存碎片的存在，从而提高了JavaScript应用的性能和稳定性。

3、cookie、sessionStorage、localStorage区别

共同点：都是保存在浏览器端、且同源。
区别：
（1）存储大小限制：cookie数据不能超过4k，因为http请求都会携带cookie、所以cookie只适合保存很小的数据，如会话标识。sessionStorage和localStorage也有存储限制，但比cookie大。可以达到5M或更多。
（2）数据有效期不同：sessionStorage在浏览器窗口关闭之前有效；localStorage始终有效，保存在本地，；cookie只有在cookie设置的有效期内有效，即使窗口关闭或者浏览器关闭。
（3）作用域不同：sessionStorage不能在不同的浏览器窗口中共享，即使是同一个页面。而localStorage在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的，web Storage支持事件通知机制，可以将数据更新的通知给监听者。web Storage 的 api 接口使用更方便。
（4）cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务期间来回传递，饿sessionStorage和localStorage不会自动把数据发送给服务器，仅在本地保存。cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下。

4、JS 异步解决方案的发展历程以及优缺点

回调函数 :
优点：解决了同步执行时间长问题
缺点：容易形成回调地域，不能用try catch捕获错误，不能使用return ；
Promise
优点：解决了回调地域问题
缺点：无法取消Promise，错误需要通过回调函数捕获。
Generator(生成器)：
特点：可以控制函数的执行
迭代器（Iterator）、生成器（Generator）了解
Async/Await
优点：代码简单，不用写一大堆then,处理了回调地域。
缺点：await将异步代码改造成同步代码，如果多个异步操作没有依赖性，使用await反而会降低性能。

5、简述浏览器的缓存读取规则

浏览器的缓存可以优化性能，比如不发起请求直接使用缓存，或者发起了请求但是后端的存储内容与前段一致，则从缓存中读取，从而减少响应数据。

缓存位置：

Service Worker

Service Worker是运行在浏览器背后的独立线程，可以用来实现缓存功能。它脱离于浏览器窗体，因此无法直接访问DOM元素。所以这一个独立的线程能够在不干扰主线程的情况下来提升性能。使用Service Worker，传输协议必须为HTTPS。Service Worker是PWA的核心技术。它与浏览器的其他内建缓存机制不同，它可以让我们自由缓存那些文件，如何匹配缓存、如何读取缓存，并且缓存是可持续性的。

Memory Cache

Memory cache 是指内存中的缓存，主要包含的是当前页面中已经抓取的资源，例如页面上已经下载的样式、脚本、图片等。读取内存中的数据很高效，但是缓存持续性很短，会随着进程的释放而释放。一旦我们关闭页签，缓存就会被释放。

Disk Cache

Disk Cache 也就是存储在硬盘中的缓存，读取速度慢，但是存储容量大，时效长。他会根据HTTP Header中的字段判断哪些资源需要缓存，哪些资源可以不请求直接使用，那些资源已经过期需要重新请求。并且即使在跨站点的情况下，相同资质的资源一旦被硬盘缓存下来就不会再次去请求数据。在所有浏览器缓存中，Disk Cache 覆盖面基本上是最大的。绝大部分的缓存都来自 Disk Cache。

Push Cache

Push Cache（推送缓存）是HTTP/2中的内容，当以上三种缓存都没有被命中时，他才会被是用。它只会在会话（Session）中存在，一旦会话结束就会被释放，并且缓存时间也很短暂。（大约五分钟）

缓存过程分析：

浏览器与旖通信的方式为应答模式，即：浏览器发起HTTP请求——服务器响应该请求。浏览器第一次向服务器发起请求拿到结果后，将请求结果和缓存标识存入浏览器缓存。浏览器对于缓存的处理是根据第一次请求资源返回的响应头来确定的。
（1）浏览器每次发起请求，都会先在浏览器缓存中查找该请求结果，以及缓存标识。
（2）浏览器每次拿到返回的结果都会将该结果和缓存标识存入浏览器缓存中。

6、JS有哪几种内存泄漏情况

过度的闭包。
未被清空的定时器。
未被销毁的事件监听。
未声明直接赋值的变量。
一些引用的DOM元素没有清除。

7、instanceof 的实现原理

while(x._proto){if(x._proto_ === y.prototype){return true}
x.__proto__ = x.__proto__.__proto__;
}
if (x.__proto__ === null) {return false;
}

8、什么是CSP

CSP（Content-Security-Policy）是指内容安全策略。是一种网络安全机制，主要是为了保护网站不受跨站脚本攻击（XSS）等恶意代码的影响。它通过限制网页可以加载和执行的内容来防止恶意脚本的注入。本质是建立一个白名单，告诉浏览器哪些外部资源可以加加载和执行。我们只需要配置规则，如何拦截由浏览器自己实现。
开启CSP有两种方式：
①设置HTTP首部的Content-Security-Policy。
②设置meta标签的方式：

9、什么是CSRF攻击，如何防范CSRF攻击？

CSRF（Cross-site request forgery，跨站请求伪造），通常缩写为CSRF或者XSRF。与跨站脚本（XSS）的区别是，XSS是利用站点内的信任用户，而CSRF是通过伪装成受信任用户请求受信任网站。攻击者诱导用户进入一个第三方网站，然后该网站向被攻击网站发送跨站请求。如果用户在被攻击网站中保存了登录状态，那么攻击者就可以利用这个登录状态（cookie），绕过后台的验证，毛重用户向服务器执行一些操作。
攻击者只有预测出URL的所有参数与参数值，才能成功地构造一个伪造的请求;反之，攻击者将无法攻击成功。
CSRF攻击的本质是利用了在同源请求中携带cookie并发送给服务器的特点，以此来实现用户的冒充。

防御方法：

验证码
在请求中添加token验证
Referer Check（Referer Check也可以被用于检查请求是否来自合法的“源”（Referer值是否是指定页面，或者网站的域），如果都不是，那么就极可能是CSRF攻击。但是因为服务器并不是什么时候都能取到Referer，所以也无法作为CSRF防御的主要手段。）
设置cookie时设置Samesite
（ SameSite 属性用于限制跨站 Cookie，从而减少跨站攻击，如 CSRF（跨站请求伪造）。在设置 Cookie 时，可以通过设置 Set-Cookie 响应头的 SameSite 选项来控制 Cookie 的行为。SameSite 可以设置为以下三个值之一：
①、Strict： Strict最为严格，完全禁止第三方 Cookie，跨站点时，任何情况下都不会发送 Cookie。换言之，只有当前网页的 URL 与请求目标一致，才会带上 Cookie。
Set-Cookie: CookieName=CookieValue; SameSite=Strict;
这个规则过于严格，可能造成非常不好的用户体验。比如，当前网页有一个 GitHub 链接，用户点击跳转就不会带有 GitHub 的 Cookie，跳转过去总是未登陆状态。
②、Lax： Lax规则稍稍放宽，大多数情况也是不发送第三方 Cookie，但是导航到目标网址的 Get 请求除外。
Set-Cookie: CookieName=CookieValue; SameSite=Lax;
设置了Strict或Lax以后，基本就杜绝了 CSRF 攻击。当然，前提是用户浏览器支持 SameSite 属性。
③、None： Chrome 计划将Lax变为默认设置。这时，网站可以选择显式关闭SameSite属性，将其设为None。不过，前提是必须同时设置Secure属性（Cookie 只能通过 HTTPS 协议发送），否则无效。
下面的设置无效。
Set-Cookie: widget_session=abc123; SameSite=None
下面的设置有效。
Set-Cookie: widget_session=abc123; SameSite=None; Secure
参考链接：https://blog.csdn.net/weixin_55802150/article/details/132082743、https://blog.csdn.net/dzqxwzoe/article/details/131796613、https://www.wangan.com/wenda/3482