（十七）JS篇——小题

十一ge哆啦A梦

已于 2024-04-28 17:06:15 修改

阅读量633

点赞数 19

分类专栏：面试题文章标签： javascript 开发语言 ecmascript

于 2024-04-25 11:03:34 首次发布

本文链接：https://blog.csdn.net/qq_43498878/article/details/138109445

版权

面试题专栏收录该内容

17 篇文章 0 订阅

订阅专栏

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

10、对函数式编程的理解

函数式编程是一种编程范式，将计算机程序视为数学函数的求值。在函数式编程中，程序的基恩构建块是函数，这些函数可以接受一个说着多个输入（参数），并产生一个输出（返回值）。

在函数式编程和面向对象的编程思想，两者的区别：

面向对象的世界里我们是把事物抽象成类和对象,然后通过封装、继承和多态来演示他们之间的关系。
函数式的世界里把世界抽象成事物和事物之间的关系，用这种方式实现世界的模型。
链接：https://www.jianshu.com/p/ac35cce3d12b

函数式编程的主要特点和优势：

不可变性：在函数式编程中，数据通常是不可变的。这意味着一旦一个比昂两被赋值，它就不能被重新赋值。这种特性，有助于减少程序中的错误，因为它减少了状态改变的可能性。
高阶函数：高级函数是接受一个或多个函数作为参数，或返回一个函数的函数。这使得函数可以像其他数据类型一样被传递和使用，大大提高了编程的灵活性和抽象能力。
避免副作用：函数式编程强调避免副作用，即函数应该只通过其返回值来传达结果，而不应该改变程序的状态或影响其他部分。这有助于使代码更易于理解和测试。
并行性和并发性：由于函数式编程中的数据不可变性和无副作用，这使得它非常适合并行合并发编程。因为没有共享状态需要同步，所以函数可以安全地在多个线程或处理器上同时执行。
代码简洁性：函数式编程通常导致更简洁、更优雅的代码。由于函数是主要的构建模块，而且他们通常是短小和专一的，这使得代码更易于阅读和理解。

函数式编程具有以下特性：闭包和高阶函数，惰性运算、递归、函数是“第一等公民”、只用表达式。
在许多情况下函数式编程可以提高代码质量、可读性和可维护性。

链接：https://blog.csdn.net/m0_74359467/article/details/136173229

11、什么是尾调用，使用尾调用的好处有什么？

（1）解释：尾调用就是在函数执行的最后一步调用另一个函数。
如：

function f(x) {
	return g(x)
}

function b(num) {
  return c(num + 2)
}

以下两种情况不属于尾调用：

function f(x){
	let y = g(x)
	return y
}
function f(x){
	return g(x) + 1
}

（2）为什么说尾调用的性能要比没有使用尾调用的性能好呢？
代码执行是基于执行栈的，所以当在一个函数里调用另一个函数时，会保留当前的执行上下文，然后再新建另一个执行上下文加入栈中，这样会比较占用内存。
而使用尾调用的话，因为已经是函数的最后一步，执行尾调用函数时，就可以不用保留当前的执行上下文，从而节省了内存，这就是尾调用优化。但是ES6的尾调用优化只在严格模式下生效。正常模式是无效的。
如果尾调用自身，则就称为尾递归。尾递归是一种特殊的尾调用形式，可以避免递归算法中的递归问题，提高算法的效率。
（3）尾调用的好处：

节省内存：使用尾调用可以避免保留当前函数的执行上下文，从而节省内存。因为尾调用是函数的最后一步操作，没有必要保留执行上下文，这样就可以释放内存空间，减少内存占用。
提高代码效率：由于尾调用不需要保留当前函数的执行上下文，因此可以避免不必要的操作，从而提高代码的执行效率。
避免递归算法中的递归问题：在一些递归算法中，如果递归调用自身的过程中出现尾调用优化，可以避免递归问题的发生，从而提高算法的效率。

链接：https://blog.csdn.net/yiyueqinghui/article/details/128819801

12、简述一下PWA

PWA（Progressive Web App）渐进式网页应用，目的是提升Web App 性能，改善Web App 用户体验。渐进式Web 应用（PWA）是使用托管在Web 服务器上并在Web浏览器引擎中运行的HTML、CSS、JavaScript代码生成的。它们可以直接在Web浏览器（如网站）中使用，也可以从应用商店安装到设备上，也可以使用支持浏览器的应用安装功能。

特点：

可安装：可以像原生APP在主屏幕上有图标。
离线应用：可以离线使用，背后用的技术是Service Worker。
Service Worker：实际上是一段脚本，在后台运行。作为一个独立的线程，运行环境和普通脚本不同，所以不能直接参与Web 交互行为，属于一种客户端代理。
Service Worker 可以创建有效的离线体验，拦截网络请求，并根据网络是否可用判断是否使用缓存数据或者更新缓存数据。
消息推送。

拓展：Service Worker：

Service Worker主要用来做持久离线缓存。service worker是浏览器的一个高级特性，本质是web worker，是独立于网页的运行脚本。浏览器中执行JavaScript文件是运行在一个单一的线程上，称之为主线程。而Service Worker是一种独立于浏览器主线程的工作线程，与浏览器的主线程是完全隔离的，并且有这自己独立的执行上下文。

13、介绍下 CacheStorage

Cache Storage 是浏览器中的一种 API，它用于缓存网络资源，使得网页在离线状态下也能够访问已缓存的资源，提高网页加载速度和离线访问体验。Cache Storage API 属于 Service Worker 的一部分，因此在使用 Cache Storage 前，需要先注册一个 Service Worker。

Cache Storage 的主要特点和用途：

缓存网络资源：可以经常访问的网络资源缓存到Cache Storage中，以提高网页就艾滋啊速度，减少网络请求。
离线访问：当用户处于离线状态时，可以使用Cache Storage 中缓存资源来加载网页内容，提供更好的离线访问体验。
优先级控制：可以通过设置缓存的优先级，确保重要资源有限缓存，而不会占用过多的存储空间。

链接：https://www.nowcoder.com/discuss/516278915950735360

14、简述懒加载

懒加载主要分为按需加载、异步加载、动态加载、延迟加载。详细介绍。

图片懒加载也叫延迟加载，指的是在长网页中延迟加载图像，是一种很好优网页性能的方式。
懒加载的优点：

提升用户体验，加快首屏渲染速度。
减少无效资源的加载。
防止并发加载的过多的资源造成js加载的阻塞。

图片懒加载的原理：
先将图片上的src属性设置为空字符串，把图片的真实路径设置在 data-original 属性中，当页面滚动的时候需要去监听scroll事件，在scroll事件回调中，判断我们的懒加载的图片是否进入了可视区域，如果图片在可视区域内将图片的src属性设置为data-original的值，就可以实现图片的延迟加载。

15、webpack中loader和plugin的区别是什么？

Loader：直译为“加载器”，由于webpack本身只能带包commonjs规范的文件（js/json），所以针对css，图片等格式的文件没法打包，就需要引入第三方模块进行打包。Loader的作用就是让webpack拥有了加载和解析非JavaScript文件的能力。
如 css-loader 和 style-loader 模块，是为了打包css的。
如 babel-loader 和 babel-core 模块，是为了把es6的代码转成 es5。
如 url-loader 和 file-loader，是为了把图片进行打包。
“plugin”：直译为“插件”。Plugin可以扩展webpack的功能，让webpack具有更多的灵活性。从打包优化到压缩，到重新定义环境变量，webpack提供了很多开箱即用的插件。CommonChunkPlugin主要用于提取第三方库和公共模块，避免首屏加兹安的bundle文件，或者按需加载的bundle文件体积过大，导致加载时间过长。
注：CommonsChunkPlugin于4.0及以后被移除，使用SplitChunksPlugin替代
如 html-webpack-plugin 用于html文件的拷贝，打包，还给html中自动增加了引入打包后的js文件的代码，还能指明把js文件引入到html文件的底部等，参考 webpack打包

从运行时机的角度区分：

loader运行在打包文件之前，loader为在模块加载时的预处理文件
plugins在整个编译周期都起作用

链接：https://blog.csdn.net/jiang7701037/article/details/98887179

JavaScript面试题看这一篇就够了，简单全面一发入魂
 https://blog.csdn.net/weixin_52003205/article/details/131732436

十一ge哆啦A梦

关注

19
点赞
踩
24

收藏

觉得还不错? 一键收藏
2
评论
（十七）JS篇——小题

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

扫一扫