前端面试题详解整理29|Cookier文件上传是怎么做，webpack怎么配置的，怎么实现的异步组件，input框弹出来的的操作js能做到不，

金色的雨570
115 阅读14分钟

字节 商业产品与技术 前端实习（g）

非常好的面试体验，面试官是北京人很能说，和上午美团面试官高下立判

1、面试官介绍职位
2、自我介绍
3、项目拷打，直到我说没有考虑过这方面需求才停
4、你的项目里文件上传是怎么做的（input type=file）

在项目中实现文件上传通常涉及以下几个步骤：

  1. 创建文件上传表单：

    使用HTML的 <input type="file"> 元素创建文件上传表单。这个元素允许用户选择本地文件进行上传。

    <form action="/upload" method="post" enctype="multipart/form-data">
  <input type="file" name="file">
  <button type="submit">Upload</button>
</form>

  2. 后端服务端点： 创建一个后端服务端点来处理文件上传请求。这个端点会接收来自表单的文件，并将其保存到服务器上的指定位置。

  3. 处理文件上传： 在后端代码中，通过解析请求体来处理上传的文件。具体的处理方式取决于后端框架或库的使用。

    • Node.js 中可以使用 Express 框架和 multer 中间件来处理文件上传。
    • Python 中可以使用 Flask 框架和 Flask-Uploads 插件来处理文件上传。
    • Java 中可以使用 Spring 框架的 MultipartFile 类来处理文件上传。

  4. 处理上传成功或失败： 在后端代码中，处理文件上传成功或失败的情况，并返回相应的响应给客户端。

  5. 显示上传进度（可选）： 如果需要在前端显示文件上传的进度，可以使用一些 JavaScript 库，如 axios 和 axios-progress-bar-plugin。

    import axios from 'axios';
import 'axios-progress-bar-plugin';

axios.post('/upload', formData, {
  onUploadProgress: progressEvent => {
    const percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);
    console.log(percentCompleted);
  }
});

  6. 处理上传结果： 在前端代码中，根据后端返回的响应结果处理文件上传的结果。可以根据需要显示成功或失败的消息，并执行相应的操作。

以上是通常的文件上传流程。具体实现可能会根据项目的需求和技术栈而有所不同。

5、input框弹出来的的操作js能做到不（不能，用了os的shell指令）

在浏览器环境下，JavaScript通常无法直接访问操作系统的底层功能或执行shell指令。因此，通过JavaScript来执行操作系统的shell指令是不安全的，也是不被允许的。浏览器的安全策略限制了JavaScript的权限，目的是保护用户的隐私和安全。

一些浏览器提供了特定的API，允许JavaScript与操作系统进行交互，但这些API通常被设计成具有限制性，只能执行受限的操作，如访问文件系统或执行一些系统级任务。即使有这些API，也需要用户明确的许可或用户交互来触发操作。

因此，通过浏览器的JavaScript执行操作系统的shell指令是不可行的。如果您需要执行操作系统级别的操作，应该通过后端服务器来实现，而不是直接通过浏览器端的JavaScript。

6、项目里怎么做的按需加载

7、webpack怎么配置的，怎么实现的异步组件

Webpack的配置通常包括以下几个方面：

  1. 入口（Entry）： 指定Webpack应该从哪个文件开始构建依赖关系图。可以是单个文件或多个文件。

  2. 输出（Output）： 指定Webpack打包后的文件输出位置和文件名等信息。

  3. 加载器（Loaders）： 用于处理非JavaScript文件，例如将SCSS转换为CSS、将TypeScript转换为JavaScript等。加载器允许Webpack处理各种类型的文件。

  4. 插件（Plugins）： 用于执行更广泛范围的任务，例如代码压缩、文件拷贝、环境变量注入等。插件可以对构建过程进行优化和定制。

  5. 模式（Mode）： 指定Webpack的构建模式，可以是development、production或none，每种模式下Webpack会有不同的优化行为。

  6. 解析（Resolve）： 配置Webpack如何解析模块的路径和扩展名，以及解析模块时应该搜索的目录。

异步组件的实现通常使用Webpack的动态import语法，具体步骤如下：

  1. 在Vue组件中，使用import()语法按需导入需要异步加载的组件。
const AsyncComponent = () => import('./AsyncComponent.vue');
  1. 在路由配置中，将需要异步加载的组件使用Webpack的动态import语法加载。
import Vue from 'vue';
import Router from 'vue-router';

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/async',
      component: () => import('./views/Async.vue') // 异步加载组件
    }
  ]
});
  1. 确保Webpack配置中启用了代码分割和动态导入支持。通常，Webpack默认会启用这些功能，但在一些自定义配置中可能需要手动配置。
// webpack.config.js

module.exports = {
  // 其他配置...
  optimization: {
    splitChunks: {
      chunks: 'all'
    }
  }
};

这样配置后，Webpack会将异步加载的组件单独打包成一个文件，并在需要时动态加载。

8、为什么要用localstorage，讲下cookie、localstorage和sessionstorage
9、用户能操作localstorage吗，怎么删除localstorage

8. 为什么要使用LocalStorage，讲解Cookie、LocalStorage和SessionStorage

Cookie：

  • Cookie 是一种在客户端存储数据的方式，它的主要作用是跟踪用户状态，记录用户的登录信息、购物车内容等。
  • Cookie 的大小限制较小，通常只能存储几KB的数据，而且每次 HTTP 请求都会携带 Cookie，可能会影响性能。

LocalStorage：

  • LocalStorage 是 HTML5 提供的一种在客户端存储数据的机制，与 Cookie 不同，它的容量通常为 5MB，远远大于 Cookie。
  • LocalStorage 的数据保存在浏览器中，不会随着 HTTP 请求自动发送到服务器，因此适合用于本地数据存储，比如用户偏好设置、缓存数据等。
  • LocalStorage 的数据可以被永久保存，除非用户主动删除，关闭浏览器也不会丢失。

SessionStorage：

  • SessionStorage 与 LocalStorage 类似，也是 HTML5 提供的一种在客户端存储数据的机制，但它的生命周期与当前会话期间相关。
  • SessionStorage 的数据在当前会话期间有效，关闭浏览器标签页或窗口后会被清除，适合存储一些临时性的数据。

9. 用户能操作LocalStorage吗？怎么删除LocalStorage？

操作LocalStorage：

  • 用户在浏览器中可以通过JavaScript来操作LocalStorage，包括读取、设置、修改和删除LocalStorage中的数据。
  • 通过 localStorage.setItem(key, value) 方法可以将数据存储到LocalStorage中，通过 localStorage.getItem(key) 方法可以获取LocalStorage中的数据，通过 localStorage.removeItem(key) 方法可以删除LocalStorage中指定键的数据。

删除LocalStorage：

  • 用户可以通过调用 localStorage.removeItem(key) 方法来删除LocalStorage中指定键的数据。
  • 如果要清空所有LocalStorage中的数据，可以调用 localStorage.clear() 方法。

例如：

// 将数据存储到LocalStorage中
localStorage.setItem('username', 'John');

// 从LocalStorage中获取数据
let username = localStorage.getItem('username');
console.log(username); // 输出：John

// 删除LocalStorage中的数据
localStorage.removeItem('username');

// 清空所有LocalStorage中的数据
localStorage.clear();

以上是关于为什么要使用LocalStorage以及如何操作和删除LocalStorage的解释。希望对你有所帮助！如果有任何疑问，请随时提出。

9、重绘和重排讲讲

重绘（Repaint）和重排（Reflow）是Web开发中常见的两个概念，它们都涉及到浏览器对页面的重新渲染，但具体的操作对象和影响范围有所不同。

  1. 重绘（Repaint）：

    • 重绘指的是浏览器根据元素的样式更新来重新绘制元素的可视部分，但不影响元素的布局或大小。例如，当元素的背景颜色、文字颜色或边框样式等发生变化时，浏览器需要重新绘制元素的可视部分以反映这些变化，而不会改变元素的位置或大小。
    • 重绘的代价相对较小，因为它不涉及重新计算元素的布局或重新排列元素，只是简单地更新元素的视觉样式。但是，如果频繁地进行重绘操作，仍然会消耗一定的性能。

  2. 重排（Reflow）：

    • 重排指的是浏览器根据元素的尺寸、位置或结构等属性的变化，重新计算并更新整个页面的布局。例如，当添加、删除或更改元素的大小、位置或内容时，浏览器需要重新计算页面中其他相关元素的位置和大小，以确保它们能够正确地排列和显示。
    • 重排的代价较高，因为它涉及到对整个页面布局进行重新计算和重新渲染，可能导致页面的性能下降，尤其是在元素数量较多或布局复杂的情况下。

总的来说，重绘和重排都是浏览器在渲染页面时进行的操作，但重绘只涉及更新元素的视觉样式，而重排涉及重新计算和更新整个页面的布局。为了提高页面性能，应尽量减少重排和重绘的次数，尤其是在涉及大量元素或频繁变化的情况下。

10、怎么减少重排

在Web开发中，重排（reflow）指的是浏览器重新计算并更新页面上元素的位置和大小，这通常会导致性能下降。以下是一些减少重排的技巧：

  1. 使用CSS动画代替JavaScript动画：CSS动画比JavaScript动画更高效，因为它们可以由浏览器的GPU加速，并且不会触发重排。

  2. 避免频繁操作样式：在JavaScript中避免频繁更改元素的样式，最好一次性更改多个样式，或者使用CSS类来批量更改样式。

  3. 使用文档碎片进行DOM操作：当需要添加多个DOM元素时，可以使用文档碎片（DocumentFragment）进行操作，然后一次性将它们添加到文档中，以减少重排次数。

  4. 使用CSS的transform和opacity属性：transform和opacity属性不会触发重排，可以用来实现元素的位移、缩放和透明度动画。

  5. 避免table布局：table布局比其他布局方式更容易触发重排，尽量避免在页面中使用table布局。

  6. 使用flexbox或grid布局：flexbox和grid布局可以更灵活地布局元素，避免了一些传统布局方式（如float和position）可能导致的重排问题。

  7. 优化JavaScript代码：尽量避免在循环中频繁操作DOM或样式，考虑使用事件委托和节流/防抖等技术来优化JavaScript代码，减少对页面性能的影响。

  8. 使用requestAnimationFrame进行动画：使用requestAnimationFrame API来执行动画，它可以让浏览器在下次重排之前进行绘制，提高动画的流畅度。

通过遵循这些技巧，可以有效地减少页面重排次数，提高页面性能和用户体验。

11、代码题，事件循环看输出，根据这个题聊宏任务微任务

12、get和post了解吗

是的，我了解HTTP中的GET和POST方法。

  1. GET方法：GET方法用于从服务器获取资源，通常用于请求数据。当客户端发送GET请求时，请求的参数会附加在URL的末尾，因此可以在浏览器的地址栏中看到。GET请求是幂等的，也就是说，重复的GET请求不会产生不同的结果，并且不应该对服务器端产生任何影响。GET请求的主要限制在于URL长度，因此适合用于请求少量数据。

  2. POST方法：POST方法用于向服务器提交数据，通常用于向服务器发送数据。当客户端发送POST请求时，请求的参数会作为请求体的一部分发送给服务器，而不是附加在URL的末尾。POST请求不会将数据显示在浏览器的地址栏中，因此更适合用于发送敏感信息或大量数据。与GET请求不同，POST请求不是幂等的，重复的POST请求可能会对服务器端产生不同的结果，例如创建两个相同的资源。

总的来说，GET和POST方法都是HTTP协议中用于传输数据的常用方法，它们有各自的优缺点，应根据具体的需求选择适当的方法。

13、除了get和post还了解什么

除了GET和POST方法，还有其他HTTP方法，其中一些常见的包括：

  1. PUT方法：PUT方法用于向服务器上传更新资源，通常用于创建或更新资源。与POST方法不同，PUT方法通常用于指定资源的URI，并要求服务器使用请求体中提供的数据来创建或更新该资源。如果资源已经存在，则PUT方法会将其替换为请求体中提供的新数据。

  2. DELETE方法：DELETE方法用于从服务器删除资源。当客户端发送DELETE请求时，服务器将根据请求的URI删除相应的资源。DELETE方法通常用于删除指定的资源。

  3. HEAD方法：HEAD方法类似于GET方法，但服务器不会返回请求的资源主体，只会返回资源的响应头信息。HEAD方法通常用于检查资源的元数据，例如检查资源是否存在或上次修改时间等，而不需要获取资源的实际内容。

  4. PATCH方法：PATCH方法用于部分更新资源，通常用于对资源进行局部修改。与PUT方法不同，PATCH方法允许客户端发送仅包含要修改的部分资源的请求体，而不需要发送完整的资源。PATCH方法通常用于更新资源的部分属性。

  5. OPTIONS方法：OPTIONS方法用于获取目标资源支持的HTTP方法列表和其他元数据信息。当客户端发送OPTIONS请求时，服务器将返回目标资源支持的HTTP方法列表、允许的请求头等信息。

这些HTTP方法在Web开发中都有各自的用途和应用场景，根据具体的需求选择合适的方法非常重要。

14、状态码，12345都说

在HTTP状态码中，状态码由三位数字组成，例如401和403。12345不是HTTP状态码之一，因此无法提供其含义。如果您有其他问题或需要进一步解释，请随时告诉我。

15、401和403什么区别，403什么时候用到

在HTTP状态代码中，401和403有不同的含义：

  1. 401 Unauthorized (未授权): 当服务器需要身份验证并且客户端没有提供身份验证信息，或者提供的身份验证信息无效时，会返回401状态码。这意味着客户端需要提供有效的凭据，例如用户名和密码，以便访问资源。

  2. 403 Forbidden (禁止访问): 当客户端提供了有效的身份验证信息，但服务器拒绝授予访问权限时，会返回403状态码。这可能是由于服务器配置、权限设置或其他策略导致的。403状态码表示服务器理解请求，但拒绝执行它。

因此，主要区别在于401要求客户端提供有效的身份验证信息，而403表示服务器拒绝了客户端的请求。

403状态码通常在以下情况下使用：

  • 客户端提供了有效的身份验证信息，但不具有访问特定资源所需的权限。
  • 服务器拒绝了特定客户端或用户组的访问。
  • 资源被服务器配置为禁止访问，无论客户端提供什么样的身份验证信息都会被拒绝。

总之，401表示未授权，需要提供身份验证信息；而403表示拒绝访问，即使提供了有效的身份验证信息也无法访问资源。

反问：
问：对我面评 答：不能透露 但是我觉得面试官挺有意思的

作者：insomnia_111
链接：www.nowcoder.com/feed/main/d…
来源：牛客网

avatar
文章
阅读
粉丝