javascript面试题

最新推荐文章于 2024-10-15 15:36:41 发布
最新推荐文章于 2024-10-15 15:36:41 发布
阅读量686 收藏 19
点赞数 12
分类专栏： 前端面试题 文章标签： javascript 前端 面试
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_50361560/article/details/138288658
版权

javascript面试题

1.promise的内部原理是什么？它的优缺点是什么？

Promise的内部原理可以简要概括为以下几点：

  1. Promise本身是一个状态机，具有三种状态：pending（等待中）、fulfilled（已成功）和rejected（已失败）。一个Promise对象在初始化时的状态是pending。
  2. 当Promise对象被创建时，会接收一个函数作为参数，这个函数被称为“executor”函数。executor函数有两个参数：resolve和reject，它们都是函数类型。当Promise对象被创建时，executor函数会立即执行。
  3. Promise对象原型上有一个then方法，该方法会返回一个新的Promise对象。then方法中的回调函数会在Promise状态被扭转为fulfilled或rejected时被调用。如果回调函数返回了一个结果，那么这个结果会作为新Promise的resolve结果。

至于Promise的优缺点，主要包括以下几点：

优点：

  1. 提高异步操作的可读性：Promise通过链式调用的方式，将异步操作的多个步骤清晰地组织起来，使得代码的可读性更高。
  2. 避免回调地狱：使用Promise可以将多个异步操作按照顺序依次执行，避免嵌套调用的问题，使代码结构更清晰。
  3. 更好的错误处理：Promise提供了更好的错误处理机制，可以捕获异步操作中的错误并进行处理。
  4. 支持并发操作：Promise可以支持并发操作，对于提高程序的性能和效率非常有帮助。

缺点：

  1. 学习成本较高：Promise的概念相对于传统的回调函数来说较为复杂，需要理解其用法和原理才能正确使用。
  2. 兼容性问题：Promise是ES6引入的特性，不同浏览器对ES6的支持程度不一，可能存在兼容性问题。
  3. 无法取消Promise：一旦Promise开始执行，就无法中途取消，这可能会在某些情况下造成不必要的资源浪费。
  4. 无法处理同步操作：Promise主要用于处理异步操作，对于同步操作可能并不适用。

总的来说，Promise是一种强大的异步编程工具，具有很多优点，但也存在一些需要注意的缺点。在使用Promise时，需要权衡其优缺点，并根据实际需求进行选择和使用。

下述代码使用JavaScript的fetch API来模拟这个异步操作，它返回一个Promise对象。我们将在这个Promise上调用.then()方法来处理成功的情况，以及.catch()方法来处理错误。

// 假设 fetch 是一个返回 Promise 的异步函数
function fetchData() {
  return new Promise((resolve, reject) => {
    // 假设这是一个模拟的异步操作，比如网络请求
    setTimeout(() => {
      // 模拟请求成功，返回数据
      const data = {
        message: 'Hello, Promise!'
      };
      resolve(data); // 将数据传递给then方法中的回调函数
    }, 1000);
  });
}

// 使用fetchData函数，并在其返回的Promise上调用.then()和.catch()
fetchData()
  .then(data => {
    // 这个函数将在Promise成功解决（即数据请求成功）时调用
    console.log('请求成功，获取到的数据是:', data);
    // 这里可以继续链式调用另一个then方法或者返回另一个Promise
    // 例如：return anotherAsyncOperation(data);
  })
  .catch(error => {
    // 这个函数将在Promise被拒绝（即发生错误）时调用
    console.error('请求失败，发生的错误是:', error);
  });

// 注意：fetchData函数中的setTimeout仅用于模拟异步操作，
// 在实际开发中，你可能会使用真实的异步API，如XMLHttpRequest、fetch API、axios等。

在这个例子中，fetchData函数返回一个Promise。使用setTimeout来模拟一个异步操作，并在1秒后通过resolve方法将结果传递给.then()中的回调函数。如果异步操作失败，我们会调用reject方法，并将错误传递给.catch()中的回调函数。

在实际应用中，fetchData可能会是一个执行网络请求的函数，它使用诸如fetch或axios之类的库来发送HTTP请求，并在请求成功时解析响应数据，或者在请求失败时处理错误。

Promise的链式调用使得异步操作能够按照顺序执行，并且每个步骤都可以依赖于前一个步骤的结果。同时，使用.catch()可以集中处理整个链中的错误，提高了代码的健壮性。

2.promise和async await的区别是什么？

以下是Promise和Async/Await之间的主要区别：

  1. 语法风格：

    • Promise使用链式调用的方法（如then、catch）来处理异步操作的结果和错误。
    • Async/Await则使用更接近同步代码的形式，通过await关键字等待异步操作的结果，使用try-catch语句处理错误，使得代码更易于阅读和理解。

  2. 错误处理方式：

    • Promise的错误处理需要通过链式调用的catch()方法来实现。
    • Async/Await则可以使用try-catch语句来捕获和处理错误，这种方式更类似于同步代码的错误处理机制。

  3. 返回值与状态：

    • Promise在异步操作完成后始终返回一个Promise实例，这个实例具有pending（等待状态）、fulfilled（成功状态）或rejected（失败状态），并且无法改变其状态。
    • Async/Await则可以将异步操作的结果直接赋值给变量，或者通过reject抛出一个异常。此外，它还可以将结果包装成Promise实例，提供了更灵活的应用场景。

  4. 适用场景：

    • Promise适用于需要处理一连串异步请求的场景，尤其是在需要保持链式调用的情况下。
    • Async/Await更适合处理串行的异步请求，特别是当异步请求之间的依赖关系复杂或需要严格控制执行顺序时。它使得异步代码看起来更像同步代码，逻辑更清晰。

  5. 错误堆栈追踪：

    • 使用Promise时，如果发生错误，堆栈追踪可能会包含Promise内部的异步操作，使得定位错误变得困难。
    • 相比之下，使用Async/Await时，错误堆栈追踪会直接显示在出错的地方，更方便开发者进行调试和定位错误。

总结来说，Promise和Async/Await在语法风格、错误处理方式、返回值与状态、适用场景以及错误堆栈追踪等方面都存在明显的区别。选择使用哪一种主要取决于具体的开发需求和场景。

3.浏览器的存储方式有哪些？

浏览器的存储方式主要有以下几种：

  1. Cookies：Cookies是一种小型的文本文件，存储在客户端的浏览器中。它们主要用于存储用户的身份认证、会话状态等信息。每个域名的Cookies容量限制大约为4KB。在设计之初，Cookies并不是为了数据存储，而是用于与服务端进行通信。它们以键值对的形式保存数据，并由服务器发送到浏览器，浏览器会在之后的请求中自动携带这些Cookies发送给服务器。

  2. Web Storage：Web Storage是HTML5引入的一种新的存储方式，主要包括Local Storage和Session Storage两种类型。

    • Local Storage：提供了一个在浏览器中存储数据的简单键值对存储机制，可以存储较大量的数据。这些数据保存在浏览器本地且不会过期，除非手动删除或清除缓存。它适用于存储用户个性化数据、本地数据缓存等不需要经常变动的数据。
    • Session Storage：与Local Storage类似，但存储的数据仅在当前会话（tab/window）中有效。当会话结束或关闭浏览器后，数据会被清除。

  3. IndexedDB：IndexedDB是一种浏览器本地数据库，可以在客户端浏览器中存储大量的结构化数据，支持事务操作、索引查询等功能。其大小通常限制为几百MB到几GB。

  4. Cache Storage：Cache Storage主要用于缓存网络请求的资源，以提高网页加载速度。它通常与Service Workers结合使用，实现资源的离线缓存和版本控制。

4.token存在sessionstorage还是loaclstorage？

选择将令牌（token）存储在sessionStorage还是localStorage取决于你的应用程序的需求和安全考虑。

  1. sessionStorage：
    • 数据存储在sessionStorage中时，数据只在当前会话期间有效。当用户关闭浏览器标签或窗口时，sessionStorage中的数据将被清除。
    • 如果你的应用程序只需要在用户当前会话期间保留令牌，并且在用户关闭浏览器后不再需要该令牌，那么将令牌存储在sessionStorage中是一个不错的选择。
  2. localStorage：
    • 数据存储在localStorage中时，数据会一直存在，直到用户或应用程序显式删除它们。
    • 如果你的应用程序需要在用户下次访问时保留令牌，即使用户关闭了浏览器，那么将令牌存储在localStorage中可能更合适。
    • 但需要注意的是，由于localStorage中的数据持久存在，因此在安全性方面存在一些风险，特别是对于敏感数据如令牌来说。如果不正确使用，可能会导致安全漏洞，如XSS（跨站脚本攻击）。

5.token的登录流程。

  1. 用户请求登录： 用户在应用程序的登录界面输入用户名和密码，并点击登录按钮。
  2. 验证用户身份： 应用程序后端接收到用户的登录请求后，会对用户提供的用户名和密码进行验证。验证可以是基于数据库的认证，或者使用其他认证机制（如OAuth）进行验证。
  3. 生成令牌（Token）： 如果用户提供的凭据（用户名和密码）验证通过，后端会生成一个令牌（Token）。这个令牌通常是一个加密的字符串，用于表示用户的身份和权限。令牌可能包含有关用户的信息，如用户ID、角色、过期时间等。
  4. 返回令牌给客户端： 后端将生成的令牌作为响应返回给客户端。通常，令牌会在HTTP响应的头部（例如Authorization头）中返回给客户端。
  5. 客户端存储令牌： 客户端（通常是前端应用程序）接收到令牌后，会将其存储在本地存储（如localStorage或sessionStorage）中，以便在后续的请求中使用。
  6. 使用令牌进行后续请求： 在用户登录后，客户端会将令牌包含在每个后续请求的头部中，以便向后端验证用户的身份和权限。通常，令牌会通过Authorization头或者自定义头部发送给后端。
  7. 后端验证令牌： 每次接收到带有令牌的请求时，后端会对令牌进行验证。这通常涉及到解密令牌、检查令牌的有效性和过期时间等。如果令牌验证成功，则允许用户访问请求的资源；否则，返回相应的错误或重定向用户到登录页面。
  8. 定期更新令牌（可选）： 为了增强安全性和防止令牌被盗用，可以考虑定期更新令牌。这通常涉及到在一定时间间隔后，向后端发送令牌刷新请求，后端验证令牌并生成一个新的令牌返回给客户端。

6.页面渲染的过程是怎样的？

  1. 解析语法，生成 AST（抽象语法树）：当 Vue 组件的模板被加载时，Vue 会首先解析模板中的 HTML 和 Vue 指令，生成一个抽象语法树（AST）。这个 AST 是 Vue 后续渲染过程的基础。
  2. 根据 AST 结果，完成 data 数据初始化：在生成 AST 之后，Vue 会根据 AST 的结果来初始化组件的 data 数据。这些数据将作为组件的响应式数据，当它们发生变化时，会触发视图的重新渲染。
  3. 根据 AST 结果和 DATA 数据绑定情况，生成虚拟 DOM：接下来，Vue 会根据 AST 和当前的数据状态，生成一个虚拟 DOM（Virtual DOM）。虚拟 DOM 是一个轻量级的 JavaScript 对象，它描述了页面应该呈现的样子。
  4. Diff 算法比较新旧虚拟 DOM：在每次数据变化时，Vue 都会生成一个新的虚拟 DOM，并使用 Diff 算法比较新旧两个虚拟 DOM 之间的差异。这个算法能够高效地找出差异，并最小化实际的 DOM 操作，从而提高渲染性能。
  5. 将差异应用到实际 DOM：根据 Diff 算法的结果，Vue 会计算出需要进行的 DOM 操作（如添加、删除或修改节点），并将这些操作应用到实际的 DOM 上，从而更新页面的显示。
  6. 组件挂载与更新：在初始渲染完成后，Vue 会将组件挂载到页面上。当组件的响应式数据发生变化时，Vue 会触发组件的更新过程，重复上述步骤来更新视图。

7.DOM树和渲染树有什么区别？

DOM树和渲染树的主要区别体现在以下几个方面：

  1. 生成方式和结构：

    • DOM树：由浏览器解析HTML文档生成，反映了文档的逻辑结构和层次关系。它包含了HTML文档中的所有元素节点、文本节点、注释节点等，是一个包含所有元素的层次结构树。
    • 渲染树：由浏览器的渲染引擎根据DOM树和CSS样式生成，用于渲染页面的树形结构。它只包含需要显示的元素节点，不包含那些不需要显示的元素节点，如head、script等。

  2. 节点内容和功能：

    • DOM树：每个节点都是一个对象，具有对应的方法和属性，可以通过JavaScript来操作和修改。节点之间通过父子关系连接，可以方便地访问和操作HTML或XML文档中的内容。
    • 渲染树：节点是根据DOM树和CSS样式计算得到的，与显示和布局有关。每个节点都包含了它的样式信息和几何信息，用于确定元素在页面上的精确位置和绘制方式。

  3. 用途：

    • DOM树：提供了一种结构化的表示方式，方便开发者对网页中的元素进行访问和操作，是Web开发中重要的概念之一。通过DOM树，可以追踪和访问文档中的各个元素、属性和文本，以及修改文档的内容、结构和样式。
    • 渲染树：用于确定如何在屏幕上绘制和布局网页。它是浏览器用来渲染页面的最终树形结构，包含了用于绘制和布局页面的所有必要信息。

综上所述，DOM树和渲染树在生成方式、节点内容、功能以及用途等方面存在明显的区别。DOM树主要关注文档的结构和可操作性，而渲染树则专注于页面的渲染和布局。

8.了解过JWT吗？

  1. JWT简介：

    • JWT，全称JSON Web Token，是一个开放标准（RFC 7519），用于作为JSON对象在各方之间安全地传输信息。

  2. JWT的结构：

    • JWT由三部分组成：头部（Header）、负载（Payload）和签名（Signature）。这三部分之间用.分隔。

  3. JWT的应用场景：

    • 用户认证与授权：用户登录成功后，服务器生成JWT并返回给客户端。客户端在后续请求中携带JWT，服务器验证其有效性以确定用户身份和权限。
    • 单点登录（SSO）：在分布式系统中，用户只需登录一次即可获取JWT，用于访问其他系统，实现单点登录。
    • 安全信息传输：JWT可用于传输敏感信息，如用户个人信息、支付信息等，通过签名验证确保信息完整性和安全性。

  4. JWT的优点：

    • 紧凑性：JWT以紧凑的方式表示信息，易于传输和存储。
    • 自包含性：JWT包含必要的信息，无需查询数据库或其他数据源即可验证用户身份。
    • 跨平台性：JWT是跨语言、跨平台的，可以与多种后端技术栈和前端框架配合使用。

  5. JWT的安全性考虑：

    • 选择安全的签名算法：使用如RS256或ES256等强算法，避免使用HS256（除非配合HTTPS）。
    • 保护密钥的安全：密钥用于签名JWT，必须妥善保管，防止泄露。
    • 设置合理的有效期：JWT应设置合理的有效期，避免使用过期的令牌。
    • 刷新令牌（Refresh Token）：考虑使用访问令牌（Access Token）和刷新令牌（Refresh Token）的分离，以提高安全性。

  6. JWT与Session的区别：

    • 存储位置：Session信息存储在服务器上，JWT信息存储在客户端。
    • 扩展性：JWT更易于在分布式系统中使用，因为信息包含在令牌中，无需共享Session数据。
    • 无状态性：JWT是无状态的，服务器不需要存储Session信息，减轻服务器负担。

9.npm的底层环境是什么？

npm的底层机制包括安装机制、依赖解析、模块扁平化等。当执行npm install命令时，npm会首先检查并获取npm配置，然后检查项目中是否有package-lock.json文件。如果有，并且与package.json中声明的依赖一致，npm就会直接使用package-lock.json中的信息从缓存或网络资源中加载依赖。否则，npm会根据package.json递归构建依赖树，并按照构建好的依赖树下载完整的依赖资源。在下载过程中，npm会检查是否存在相关资源缓存，如果存在就会解压到node_modules中，否则就会从npm远程仓库下载包并检验其完整性，随后添加到缓存并解压到node_modules中生成package-lock.json。npm的底层环境主要依赖于Node.js和其事件驱动、非阻塞式I/O的模型，以及npm自身强大的包管理和分发能力。这使得npm能够成为JavaScript开发领域中不可或缺的工具之一。

10.HTTP协议规定的协议头和请求头有什么？

HTTP协议规定的协议头和请求头主要包括以下内容：

协议头：

HTTP协议头主要分为通用头、请求头、响应头和实体头四个部分。每个头域都由一个域名、冒号(:)和域值三部分组成。

  1. 通用头：这些头域是客户端和服务器都可以使用的，提供了一些非常有用的通用功能。例如，Cache-Control和Pragma用于缓存控制，Connection、Date、Transfer-Encoding、Update和Via则提供了有关连接和传输的信息。
  2. 请求头：这些头域是请求报文特有的，为服务器提供了一些额外信息。例如，Accept头部告诉服务器客户端希望接收什么类型的数据；Host头部指定了请求的目标域名；而Accept-Encoding则告诉服务器客户端支持的压缩方法。
  3. 响应头：这些头域主要用于服务器向客户端提供信息，例如Server头部描述了与哪种类型的服务器进行交互。
  4. 实体头：这些头域用于描述实体主体部分，例如Content-Type头部说明了实体主体部分的数据类型。

请求头：

请求头主要用于描述客户端向服务器发送的请求。在HTTP请求中，请求行用于说明请求类型、要访问的资源以及使用的HTTP版本。紧接着是请求头部分，它提供了服务器处理请求所需的附加信息。

常见的请求头包括：

  • Accept：指定客户端能够处理的媒体类型及相对优先级。
  • Accept-Encoding：指定客户端支持的压缩编码。
  • Accept-Language：指定客户端期望返回的语言类型。
  • Content-Type：当客户端向服务器发送数据时，该头部告诉服务器发送的数据类型。
  • Host：指定请求的目标服务器。

11.说一下浏览器的缓存策略。

浏览器的缓存策略是指浏览器如何缓存网络资源（如HTML文件、CSS文件、JavaScript文件、图像等），以提高网页加载速度和用户体验。浏览器的缓存策略通常包括以下几种：

  1. 强缓存：
    • 强缓存是指浏览器在请求资源时，直接从本地缓存中获取资源，而不发送请求到服务器。
    • 浏览器会在HTTP响应头中使用Cache-Control和Expires字段来控制强缓存。Cache-Control字段可以指定资源的缓存策略，如max-age表示资源在本地缓存中的有效时间；Expires字段则是资源的过期时间，表示资源在本地缓存中的有效期限。
    • 当浏览器再次请求相同资源时，会根据Cache-Control和Expires字段判断资源是否仍然有效。如果资源仍然有效，则直接从缓存中获取；否则，发送请求到服务器验证是否需要重新获取资源。
  2. 协商缓存：
    • 协商缓存是指浏览器在强缓存失效后，向服务器发送请求，由服务器来决定是否需要重新获取资源。
    • 浏览器会在请求头中添加If-Modified-Since字段或者If-None-Match字段，分别表示上次请求资源的最后修改时间和资源的唯一标识符（如ETag）。
    • 服务器收到请求后，会根据这些字段判断资源是否发生了变化。如果资源未发生变化，则返回状态码304（Not Modified），告诉浏览器可以使用本地缓存；如果资源发生了变化，则返回新的资源内容。
  3. 缓存位置：
    • 浏览器的缓存位置通常分为内存缓存和磁盘缓存两种。内存缓存用于存储相对较小且频繁访问的资源，读取速度快但容量有限；磁盘缓存用于存储较大的资源，容量较大但读取速度较慢。
    • 浏览器根据资源的大小、频繁访问程度等因素来决定将资源存储在内存缓存还是磁盘缓存中。

12.说一下什么是“同源策略”？

“同源策略”（Same-Origin Policy）是一种浏览器安全策略，用于限制一个网页文档或脚本如何能与来自不同源的资源进行交互。"同源"指的是协议（protocol）、域名（domain）和端口号（port）都相同的两个URL。同源策略旨在保护用户隐私和安全，防止恶意网站通过JavaScript等手段窃取用户数据或者发起恶意攻击。

具体来说，同源策略限制了以下几种跨域操作：

  1. Cookie、LocalStorage 和 IndexedDB 等存储性内容： 浏览器在发送请求时会自动附带相应域名下的Cookie信息，但是跨域请求不会携带对应的Cookie信息，因此无法访问其他域名下的存储性内容。
  2. DOM 操作： 无法获取其他域名下的DOM对象，也无法修改其属性。
  3. AJAX 请求： 浏览器禁止跨域的AJAX请求，即使用XMLHttpRequest对象无法向其他域名发起请求。
  4. Frame 和 iframe 间的交互： 默认情况下，页面中的frame或者iframe只能访问和嵌入来自同一源的内容，不能直接访问其他域名下的内容。
  5. 窗口和窗体间的交互： 通过JavaScript打开的窗口只能与打开它的窗口同源。
  6. 脚本执行： 无法执行其他域名下的JavaScript代码。

13.防抖和节流是什么？

防抖（Debouncing）和节流（Throttling）都是用于限制事件处理函数执行频率的技术，可以在处理频繁触发的事件时提高性能和用户体验。

  1. 防抖（Debouncing）：

    • 防抖是指在事件触发后，等待一定的时间间隔后再执行事件处理函数，如果在这个时间间隔内事件再次触发，则重新计时。
    • 防抖适用于处理频繁触发的事件，如窗口调整大小、搜索框输入等，可以减少事件处理函数的执行次数，提高性能并避免不必要的资源浪费。
    • 典型的防抖实现方式是使用setTimeout来延迟执行事件处理函数，并在每次触发事件时清除上一次的延迟任务，重新设置新的延迟任务。

  2. 节流（Throttling）：

    • 节流是指在一定的时间间隔内只执行一次事件处理函数，无论事件触发的频率有多高，在每个时间间隔内只会执行一次。
    • 节流适用于需要控制事件处理函数执行频率的情况，如滚动事件、鼠标移动事件等，可以平滑地限制事件处理函数的执行频率，防止过度触发。
    • 典型的节流实现方式是使用定时器，在每次事件触发时判断当前是否处于“冷却”状态，如果处于“冷却”状态则执行事件处理函数并重置定时器，否则忽略该事件。
    // 防抖函数
function debounce(func, delay) {
  let timerId; // 声明一个变量用于存储定时器ID
  
  return function(...args) { // 返回一个函数
    const context = this; // 保存函数执行上下文
    
    clearTimeout(timerId); // 在每次函数被调用时清除之前的定时器
    
    timerId = setTimeout(() => { // 设置新的定时器
      func.apply(context, args); // 在延迟结束后执行传入的函数
    }, delay);
  };
}

// 节流函数
function throttle(func, delay) {
  let lastExecutionTime = 0; // 上次执行函数的时间

  return function(...args) { // 返回一个函数
    const context = this; // 保存函数执行上下文
    const currentTime = Date.now(); // 当前时间

    if (currentTime - lastExecutionTime >= delay) { // 检查是否到达执行函数的时间间隔
      func.apply(context, args); // 执行传入的函数
      lastExecutionTime = currentTime; // 更新上次执行函数的时间
    }
  };
}

// 使用示例
const debouncedFunc = debounce(() => {
  console.log('Debounced function executed.');
}, 200);

const throttledFunc = throttle(() => {
  console.log('Throttled function executed.');
}, 200);

// 调用防抖函数
debouncedFunc();

// 调用节流函数
throttledFunc();

14.解释一下什么是json？

JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，它基于JavaScript语言的对象表示法，但与之不同的是，JSON是一种独立于编程语言的数据格式，可以被多种编程语言解析和生成。JSON通常用于网络应用程序之间的数据传输，例如在前后端之间进行数据交互，API的响应格式等。

15.当数据没有请求过来的时候，该怎么做？

  1. 显示加载状态： 在等待数据请求返回时，可以显示一个加载状态，告知用户数据正在加载中。可以使用加载动画、进度条或者简单的文字提示来表示加载状态，以提高用户体验。
  2. 占位符： 可以使用占位符（Placeholder）来占据数据应该显示的位置，以保持页面结构的稳定性。占位符可以是简单的文本、图标或者占位图片等，它们可以让用户知道数据将会出现的位置，并且提供一种视觉上的反馈。
  3. 默认值： 如果数据加载失败或者尚未返回时，可以使用默认值来填充数据显示区域。这些默认值可以是预设的文本、图标或者其他适当的内容，以确保用户始终能够看到某种形式的数据。
  4. 优雅降级： 在某些情况下，如果数据无法加载或者请求失败，可以考虑提供一些备用方案或者降级的处理方式。例如，如果某个组件依赖于某项数据但数据加载失败，可以使用备用的数据源或者提供一种替代的用户体验。
  5. 错误处理： 如果数据请求失败，应该提供合适的错误处理机制，向用户显示错误信息，并且提供重新加载或者其他操作的选项。错误处理可以通过显示错误提示、日志记录或者向服务器报告问题来完成。

16.有没有做过无感登录？

我个人没有直接参与开发无感登录功能，但我对这个功能有所了解。无感登录通常是指用户在登录过一次后，在一定的有效期内，再次访问网站或应用时无需重新输入用户名和密码，而是直接进入已登录状态，享受无缝的用户体验。这种功能通常通过使用长期有效的令牌（token）或者持久化的会话（session）来实现。

  1. 安全性：无感登录功能需要保证用户的账号和数据安全，因此必须采取适当的安全措施，如使用HTTPS协议传输数据、采用加密算法保护用户凭证等。
  2. 用户体验：无感登录功能的目的是提供更好的用户体验，因此需要确保登录流程简洁、快速，并且避免过多的用户干预。
  3. 会话管理：需要合理管理用户的会话信息，包括令牌的生成和验证、有效期的管理、会话的持久化等。
  4. 权限控制：需要根据用户的身份和权限，对不同的资源和功能进行合适的访问控制，确保用户只能访问其具备权限的内容。
  5. 跨平台兼容性：无感登录功能应该在不同的平台和设备上都能正常工作，包括Web应用、移动应用和桌面应用等。

无感登录和单点登录的区别：

单点登录（SSO）是一种身份认证和授权技术，其主要目标是解决用户在访问多个应用系统时需要重复登录的问题。通过SSO，用户只需在一个应用系统中完成登录，就可以访问其他相互信任的应用系统，无需再次登录。这种机制大大提高了用户的工作效率，减少了登录和切换账号的复杂性，同时也增强了系统的安全性。此外，SSO还为开发人员提供了一个通用的身份验证框架，简化了应用系统的开发过程。

而无感登录则更注重于提升用户的登录体验，使用户在登录过程中几乎感觉不到任何障碍。这通常是通过一些先进的技术手段实现的，例如通过设备指纹、生物识别等方式进行自动识别和认证，或者通过与其他已登录的账号或服务进行关联，实现快速登录。无感登录的目标是让用户能够更方便、更快捷地登录系统，而无需进行繁琐的输入和验证操作。

总的来说，单点登录和无感登录在目标上都是为了提高用户的登录体验，但在实现方式和应用场景上有所不同。单点登录主要解决的是多个应用系统之间的登录问题，而无感登录则更注重于提升单个应用系统的登录体验。在实际应用中，可以根据具体的需求和场景选择合适的登录方式。

17.大文件上传是怎么做的？

大文件上传是指将大小较大的文件（通常超过几十兆或几百兆）通过网络上传至服务器的过程。由于大文件的体积较大，传统的上传方式可能会面临一些问题，如内存占用过高、网络不稳定导致断点续传困难等。因此，通常需要采用一些特殊的技术来进行大文件上传，常见的方法包括：

  1. 分片上传： 将大文件切分成多个较小的片段（chunk），然后分别上传每个片段。这样可以减少单个上传请求的大小，降低网络传输的风险。上传完所有片段后，服务器再将这些片段合并成完整的文件。
  2. 断点续传： 允许用户在上传中断后，能够从中断的地方继续上传文件，而不是从头开始。通过记录上传过程中已经成功上传的片段，以及未上传的片段，可以实现断点续传功能。前端通过发送请求获取上传进度，然后从断点处继续上传未上传的部分。
  3. 流式上传： 使用流式上传（Streaming Upload）技术，不需要将整个文件加载到内存中，而是逐块读取文件并上传。这样可以降低内存占用，并且支持上传大文件。
  4. 并发上传： 使用多个并发上传线程或者WebSocket等技术，同时上传多个文件片段，以提高上传速度和效率。
  5. 服务器支持： 服务器端需要相应的支持，能够接收并处理分片上传的请求，并将上传的片段进行合并和存储，最终还原为完整的文件。
  6. 上传进度显示： 在前端页面显示上传进度，让用户能够清楚地看到上传的进度，提高用户体验。
前端第一深情
关注
专栏目录
Node.js介绍及环境搭建
qq_64230952的博客
04-30 1468
1.Node.js是什么 Node.js是一个基于Chrome V8引擎的[JavaScript运行环境]。 Node.js使用了一个事件驱动、非阻塞式I/O 的模型。 Node.js是一个让JavaScript运行在服务端的开发平台，它让JavaScript成为与PHP、Python、Perl、Ruby等服务端语言平起平坐的脚本语言 2. npm是什么 npm其实是Node.js的包管理工具（package manager）。 为啥我们需要一个包管理工具呢？因为我们在...
webpack,npm,git,Echarts,Uni-APP常见问题
2301_76917110的博客
03-09 511
webpack,npm,git,Echarts,Uni-APP常见问题
JavaScript最新面试题合集（2023年）
subsistent的博客
01-16 1万+
闭包：就是能够读取外层函数内部变量的函数。闭包需要满足三个条件：访问所在作用域；函数嵌套；在所在作用域外被调用。优点： 可以重复使用变量，并且不会造成变量污染。缺点： 会引起内存泄漏使用闭包的注意点：由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。闭包会在父函数外部，改变父函数内部变量的值。所以，如果你把父函数当作对象。
JavaScript烧脑面试题：（第十一天 练习）
最新发布
qq_41476756的博客
10-15 255
【代码】JavaScript烧脑面试题：（第十一天 练习）
2023年常见的20道JavaScript面试题及其答案解析，你知道多少
qq_28245087的博客
05-04 2759
本文整理了20道常见的JavaScript面试题目，并针对每个问题提供了详细的答案解析。这些问题涵盖了类型判断、数组操作、继承、异步操作处理、闭包、事件委托、变量提升、模块化、错误处理等多个方面的知识点，有助于开发者在面试或者复习JavaScript基础知识时作为参考。
分享 30 个基础的 JavaScript 面试题
前端达人
03-14 1443
编辑整理 | 杨小爱作为一名新人，你面临的最艰巨的任务之一就是为自己的第一份工作而参加的技术面试。在前端领域里， JavaScript的世界里可以考问的技术点太多了，为了帮助你在下一次面试中取得好成绩并找到理想的工作，我整理了一份最常见的 JavaScript 面试题清单表。这些面试题涵盖了广泛的主题，包括基本的 JavaScript 语法、面向对象的编程概念、数据结构以及常见的库和框架。通过熟...
Node.js介绍和环境配置（含NVM、NPM、NVM的安装）
zhanglongfei1016的专栏
02-21 1068
Node.js的介绍 什么是 Node.js（官方解释） Node.js 是一个基于Chrome V8引擎的 JavaScript 代码运行环境。 Node.js使用了一个事件驱动、非阻塞式I/O的模型（ Node.js的特性），使其轻量级又高效。 Node.js 的包管理器 npm 是全球最大的开源库生态系统。 如上图所示： Node 内部采用 Google Chrome 的 V8 引擎，作为 JavaScript 语言解释器； 通过自行开发的 libuv 库，调用操作系统资..
前端面试 -- JavaScript
weixin_58470558的博客
06-17 1182
一些前端面试时关于JavaScript面试题
javaScript面试题
12-07
JavaScript 是一种广泛应用于网页和网络应用的脚本...以上内容涵盖了JavaScript面试中常见的知识点，这些基础和进阶知识是每个前端开发者都需要掌握的。理解并熟练运用它们，对于解决实际问题和提升开发效率至关重要。
JavaScript面试题大全(推荐)
10-21
JavaScript面试题大全主要涵盖了几个方面：基础语法、面向对象特性、DOM操作、...通过以上知识点，可以看出JavaScript面试题大全涵盖的范围相当广泛，旨在评估应聘者对JavaScript这门语言的全面理解和实际应用能力。
2023最新八股文前端面试题
taotaobaobei的博客
12-08 3273
css、js、h5c3、Vue、echarts、uniapp、webpack、git、hr
JavaScript基础经典面试试题（附答案）
web_jisu的博客
08-28 5774
D: console.log(parseInt('12px')) 在控制台打印 12px//直接截掉后面不是数字。25. 需要在 html 页面上引用脚本文件myJs.js，下列语句中，正确的是（D）A: 可以用 new Array(1, 2, 3, 4) 这种方式创建数组。2. parseInt("6*7", 10) 的 结果是（ C ）C： console.log( 1+ "1") 在控制台打印 2。B: 数组的创建方式还可以是 [1, 2, 3, 4, 5]......
2023年最新JavaScript 基础面试题（62题&附答案）
热门推荐
m0_71479134的博客
07-25 1万+
说几条写 JavaScript 的基本规范?
Nodejs———需要的基本环境（服务自启动（nodemon）、npm、nvm、nrm）
花落微凉梦清幽的博客
12-17 743
一、nodejs基本介绍 nodejs是一个基于 Chrome V8 引擎的 JavaScript 运行环境，nodejs的API包括全局、内置模块、第三方模块等三部分。其中我们常见的用npm安装发布的依赖就是第三方模块，当然你也可以自己开发一个第三方模块。nodejs的核心包括内置的V8引擎和libuv开发包，V8引擎我们都熟悉浏览器上的引擎，运行js代码，libuv开发包主要内置了异步IO、事件驱动等核心模块。还有一个就是node底层，任何一个程序需要在系统中运行，都需要有一个兼容系统的底层代码，比如
JavaScript面试题看这一篇就够了，简单全面一发入魂（持续更新 step2）
学Java，找哪吒
04-25 7022
1、如何解决循环中动态添加div，造成的死循环问题？ 表达式①： let divs = document.getElementsByTagName("div"); for(let i = 0;i<divs.length;++i){ let div = document.createElement("div"); document.body.appendChild(div); } 表达式②： let divs = document.getElementsByTagName("div"); for(
JavaScript面试题
qq_46199553的博客
04-12 889
1.Javascript原型链 prototype：原型对象，每个函数都有一个 prototype 属性，再通过 new 命令实例对象时，该属性会成为该实例的原型对象。 constructor：构造函数。指向原型对象的 constructor proto：实例对象的原型 点击跳转 2.什么是window对象? 什么是document对象? window对象代表浏览器中打开的一个窗口。document对象代表整个html文档。实际上，document对象是window对象的一个属性。 3.document.o
Javascript最全面试题
qq_60976312的博客
10-26 993
javascript面试题最全
2023前端面试题-Javascript篇
m0_64526913的博客
09-27 185
主线程先执行同步任务，然后才去执行任务队列里的任务，如果在执行宏任务之前有微任务，那么要先执行微任务，全部执行完之后等待主线程的调用，调用完之后再去任务队列里查看是否有异步任务，这样一个循环往复的过程就是事件循环。基于XML语法格式的图像格式，可缩放矢量图，其他图像是基于像素的，SVG是属于对图像形状的描述，本质是文本文件，体积小，并且不管放大多少倍都不会失真。一个实例对象在调用属性和方法的时候，会以此从实例本身，构造函数原型，原型的原型上去查找，查找的过程像是一个链条，所以叫原型链。
Javascript面试题
09-09
JavaScript面试题包括但不限于以下几个方面的知识： 1. JavaScript的基本数据类型有哪些？答：JavaScript的基本数据类型包括字符串（String）、数字（Number）、布尔（Boolean）、空值（Null）、未定义（Undefined）...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端第一深情

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值