No115.精选前端面试题,享受每天的挑战和学习

简介: No115.精选前端面试题,享受每天的挑战和学习

变量提升和函数提升的顺序

在JavaScript中,变量提升和函数提升是JavaScript引擎在代码执行之前进行的一种行为。变量提升是指在代码执行之前,JavaScript引擎会将变量的声明提升到作用域的顶部,而函数提升是指JavaScript引擎会将函数的声明提升到作用域的顶部。

在变量提升中,变量的声明会被提升,但是赋值操作不会被提升。这意味着在变量被赋值之前,它的值是undefined。例如:

console.log(x); // 输出 undefined
var x = 5;

在上面的例子中,变量x的声明被提升到作用域的顶部,但是赋值操作并没有被提升,所以在变量被赋值之前,它的值是undefined。

函数提升则是将整个函数的声明提升到作用域的顶部。这意味着可以在函数声明之前调用函数。例如:

foo(); // 输出 "Hello"
function foo() {
  console.log("Hello");
}

在上面的例子中,函数foo的声明被提升到作用域的顶部,所以可以在函数声明之前调用函数。

需要注意的是,变量提升和函数提升只适用于使用关键字var和function声明的变量和函数。使用let和const声明的变量不会被提升,而使用函数表达式声明的函数也不会被提升。

总结起来,变量提升和函数提升的顺序是:函数提升优先于变量提升,而在同一类声明中,按照它们在代码中出现的顺序进行提升。

Event Loop

事件循环(Event Loop)是JavaScript中处理异步操作的一种机制。它负责管理调度和执行异步任务,以确保它们按照正确的顺序执行。

事件循环的核心思想是基于一个事件队列(Event Queue)和一个执行栈(Execution Stack)

所有的异步任务都会被放入事件队列中,而同步任务则直接放入执行栈中。

当执行栈为空时,事件循环会从事件队列中取出一个任务,并将其放入执行栈中执行。这个过程会不断重复,形成一个循环,即事件循环。

事件循环的执行过程如下:

  1. 执行全局同步代码,将同步任务放入执行栈中执行。
  2. 当遇到异步任务时,将其放入事件队列中,并继续执行后续的同步任务。
  3. 当执行栈为空时,事件循环会从事件队列中取出一个任务,并将其放入执行栈中执行。
  4. 重复步骤2和步骤3,直到事件队列为空。

需要注意的是,事件循环是单线程的,意味着在同一时间只能执行一个任务。当一个任务正在执行时,其他任务需要等待。

常见的异步任务包括定时器(setTimeout、setInterval)、事件监听(addEventListener)和网络请求(Ajax、fetch等)。这些任务会被放入事件队列中,等待事件循环的执行。

通过事件循环,JavaScript能够处理异步任务,避免阻塞主线程,提高程序的响应性能。同时,事件循环也确保了异步任务按照正确的顺序执行,避免了竞争条件和数据不一致的问题。

封装 FetchAPI,要求超时报错的同时,取消执行的 promise(即不继续执行)

要封装Fetch API并实现超时报错并取消执行的功能,你可以使用Promise.race()AbortController来实现。下面是一个示例代码:

function fetchWithTimeout(url, options, timeout = 5000) {
  const controller = new AbortController();
  const { signal } = controller;
  const timeoutPromise = new Promise((_, reject) => {
    setTimeout(() => {
      controller.abort();
      reject(new Error('请求超时'));
    }, timeout);
  });
  const fetchPromise = fetch(url, { ...options, signal });
  return Promise.race([fetchPromise, timeoutPromise]);
}
// 使用示例
fetchWithTimeout('https://api.example.com/data', { method: 'GET' })
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

在上面的示例中,我们定义了一个名为fetchWithTimeout的函数,它接受三个参数:url表示要请求的URL,options表示请求的选项,timeout表示超时时间(默认为5000毫秒)。

在函数内部,我们创建了一个AbortController对象和一个signal对象,用于取消请求。然后,我们创建了一个timeoutPromise,它会在指定的超时时间后调用controller.abort()来取消请求,并抛出一个超时错误。

接下来,我们使用fetch函数发起请求,并传入signal作为请求的信号。最后,我们使用Promise.race()来同时等待fetchPromisetimeoutPromise,并返回最先完成的Promise。

这样,如果请求在超时时间内完成,那么fetchPromise会先完成,返回请求的结果。如果请求超时,那么timeoutPromise会先完成,抛出一个超时错误。

你可以根据需要调整超时时间和其他请求选项。同时,记得在使用fetchWithTimeout函数时,使用.catch()来捕获错误并处理取消执行的情况。

强缓存和协商缓存的区别

强缓存和协商缓存是用于在客户端和服务器之间进行缓存控制的两种机制。它们有以下区别:

强缓存:

  • 当客户端请求资源时,如果该资源的缓存标识符(如Cache-ControlExpires)满足条件,客户端将直接从本地缓存中获取资源,而不向服务器发送请求。
  • 强缓存的优点是可以减少服务器的负载,加快资源加载速度
  • 但缺点是如果资源在客户端缓存过期之前有更新,客户端无法得知,仍然使用旧版本。

协商缓存:

  • 当客户端请求资源时,如果该资源的缓存标识符满足条件,客户端会发送一个请求到服务器验证该资源是否仍然有效。
  • 服务器会根据资源的缓存标识符(如ETagLast-Modified)进行验证,判断资源是否已经改变。
  • 如果资源没有改变,服务器将返回一个304 Not Modified状态码,并告诉客户端继续使用本地缓存。
  • 如果资源已经改变,服务器将返回新的资源。

区别:

  • 强缓存是根据缓存标识符直接使用本地缓存,不向服务器发送请求,而协商缓存需要向服务器发送请求进行验证
  • 强缓存相对来说比较快,因为它减少了网络请求的次数,而协商缓存需要与服务器进行通信。
  • 强缓存的缺点是不能检测资源的更新情况,只能依赖资源的缓存过期时间来判断,可能导致使用过期的资源。
  • 协商缓存通过与服务器进行验证,可以获取到最新的资源,但会增加一次额外的网络请求。

在实际应用中,可以综合使用强缓存和协商缓存来控制资源的缓存,以达到更好的性能和用户体验。

token可以放在cookie里吗?

摘抄:不建议,因为安全问题。因为存在CSRF(跨站请求伪造)风险,攻击者可以冒用Cookie中的信息来发送恶意请求。

为了解决CSRF问题,可以设置同源检测(OriginReferer认证),也可以设置SamesiteStrict

可以将一个令牌(token)存储在一个cookie中。Cookie是浏览器保存在用户设备上的一小段文本信息,这些信息会在每次浏览器发送请求时通过HTTP头部自动发送到服务器。

将令牌存储在Cookie中具有一些优点:

  • 它对于客户端来说是透明的,无需手动添加头部信息。
  • Cookie存储在浏览器中,与用户会话相关联,因此在不同的页面和请求中都可以使用。
  • Cookie具有过期时间的设置,可以控制令牌的有效期。

然而,需要注意的是,将令牌存储在Cookie中也存在一些安全风险:

  • 客户端可能对Cookie进行修改、删除或伪造,从而引发安全漏洞
  • 由于Cookie存储在用户设备上,可能会被其他恶意脚本或跨站脚本攻击获取到。

因此,在使用Cookie存储令牌时,需要采取一些安全措施,如使用HTTPS协议进行通信,设置HttpOnlySecure标记来限制脚本访问,以及定期更新和验证令牌等。

相关文章
|
5天前
|
存储 前端开发 JavaScript
前端面试题23-34
通过对 Promise 和 ECMAScript6 的深入理解,可以更好地应对现代 JavaScript 开发中的复杂异步操作和新特性,提升代码质量和开发效率。
10 2
|
20天前
|
前端开发 JavaScript Java
2024高频前端面试题合集(一)
JavaScript Bridge 是一种在 JavaScript 和其他语言(如 Java、Objective-C 等)间建立通信的技术,常用于混合应用开发,允许调用原生功能、获取数据、事件通知及优化性能。SSR(服务器端渲染)的单机 QPS 取决于服务器性能、应用复杂度、网络条件等因素。Egg.js 是基于 Node.js 的企业级框架,通过目录结构约定、启动流程、插件机制和核心组件来初始化应用。前端错误捕获可通过 try-catch、window.onerror、Promise.catch 和 unhandledrejection 事件等方式实现。
|
23天前
|
缓存 JavaScript 前端开发
2024 前端高频面试题之 Vue 篇
2024 前端高频面试题之 Vue 篇
40 8
|
5天前
|
前端开发 JavaScript 虚拟化
前端面试题12-22
ES6(ECMAScript 2015)是 JavaScript 的重要版本,引入了许多新特性和语法,提升了语言的功能和可用性。ES6 的主要特性包括箭头函数、类、模板字符串、解构赋值、默认参数、Promise、模块化、Generator 函数、async 函数、Proxy 和 Reflect 等。这些特性不仅简化了代码的编写和维护,还为开发者提供了更多的编程范式和工具。了解和掌握 ES6 的特性是现代 JavaScript 开发的必备技能。
6 1
|
5天前
|
JSON 前端开发 JavaScript
前端面试题01-11
Map是ES6引入的一种新的键值对集合数据结构,类似于对象,但键的范围不限于字符串,还可以是任何类型的值。Map保持键值对的插入顺序,提供更灵活的键值对操作方法,如`set()`、`get()`、`delete()`、`has()`等。
5 1
|
12天前
|
前端开发 Java C#
GitHub突破5k Star!这件事情我坚持了3年,努力打造C#/.NET/.NET Core全面的学习、工作、面试指南知识库
GitHub突破5k Star!这件事情我坚持了3年,努力打造C#/.NET/.NET Core全面的学习、工作、面试指南知识库
|
13天前
|
前端开发
前端基础学习(一)HTML入门
前端基础学习(一)HTML入门
9 0
前端基础学习(一)HTML入门
|
23天前
|
JavaScript 前端开发
前端面试02(JS)
本文是前端面试系列的第二篇,主要涵盖了JavaScript的基础知识,包括JS的组成(ECMAScript、DOM、BOM)、内置对象(如String、Array、Math、Date等)、数组操作方法、数据类型检测方法(typeof、instanceof、constructor、Object.prototype.toString.call)、闭包的概念及其特点、前端内存泄漏的原因和类型、事件委托的优势、基本数据类型与引用数据类型的差异、原型链的工作原理以及JS实现继承的多种方式(原型链、构造函数、组合继承等)。文章结尾鼓励读者点赞和支持作者。
12 1
|
23天前
|
前端开发 Java
前端面试题01(css)
前端面试题01聚焦CSS,涵盖选择器优先级、隐藏元素方法、px与rem差异、重绘与重排解释、元素居中技巧及可继承属性。还探讨了CSS预处理器SASS和LESS的特性。文章提供实例代码展示居中布局的多种实现方式。鼓励读者点赞和支持。
15 0
|
27天前
|
存储 缓存 前端开发
学习和理解前端缓存
前端缓存通过存储重复资源提升网页加载速度,减少服务器压力,优化用户体验。它涉及静态资源(如图片、CSS、JS)的HTTP缓存,动态数据(使用`localStorage`、`IndexedDB`)缓存,用户登录态、页面状态管理,以及预加载缓存。实现方式包括HTTP缓存(强缓存、协商缓存),浏览器存储(localStorage、sessionStorage、IndexedDB),Service Worker和Cache API。在项目中,应根据资源特性和需求选择合适的缓存策略。