一面

自我介绍

挑一个项目讲，介绍完大体是做什么的后，再挑一个【最有价值】的模块讲，后端写了哪些接口，分别做了些什么，前端实现了些什么功能，面试官提了些场景，然后问我能怎么优化项目

优化前端项目压缩和合并代码：通过对HTML、CSS、JS等文件进行压缩和合并，减小文件体积，从而加快文件加载速度。使用CDN：利用CDN技术可以将静态资源分布到全球的各个节点，加快网络资源下载速度。图片优化：优化图片大小、格式、质量等，可以减小图片文件大小，从而加快图片的加载速度。合理使用缓存：合理使用缓存可以减少请求的数量，提高网页的性能，可以使用浏览器缓存、服务器缓存等方式。减少HTTP请求：减少HTTP请求的数量可以大大提高网页性能，可以尽量减少图片数量、合并CSS和JS等文件，来减少HTTP请求。优化代码结构：通过优化代码结构、减少不必要的代码、避免多次触发重排等方式可以提高网页的性能。使用懒加载：懒加载可以优化网页加载速度，延迟资源的加载时间，只加载用户需要的部分内容。预加载页面：预加载可以在网页打开之前提前预加载一些页面资源，从而提高页面加载速度和用户体验。HTTPS+HTTP/2：使用HTTPS和HTTP/2可以加密数据、减少请求延迟，提高网页的性能。使用Web Worker：通过使用Web Worker，可以将一些耗时的JavaScript任务转移到后台处理，不会对页面渲染性能产生影响。

总之，优化前端项目的关键在于不断寻找提高性能的点，并结合具体项目和场景进行优化。

cookie和localStorage

cookie和localStorage都是客户端存储的方式，它们可以用于存储一些不敏感的用户数据。

Cookie是在服务器端创建的，最初被设计用于服务器端记录用户的会话状态。浏览器在访问Web页面时，会将cookie发送给服务器，以便服务器能够根据该cookie标识特定的用户会话。cookie通常具有过期时间，并且可以在浏览器和服务器端之间共享。有些网站可能会使用cookie跟踪用户的行为，从而强化用户个性化体验。localStorage是HTML5中引入的一种新型Javascript API，可以在浏览器端存储数据，并支持永久性存储。相比之下，cookie的大小通常限制在4KB左右，而localStorage可以存储更多的数据。localStorage存储的数据在浏览器关闭后依然存在，因此可以在下次访问同一页面时重新加载。localStorage的数据存储在浏览器的本地磁盘上，是相对安全的。

总的来说，cookie和localStorage都非常有用，可以帮助Web开发人员实现一些功能，但应该谨慎使用。在存储敏感信息时，可以考虑对数据进行加密，以保证用户数据的安全。

网络请求有哪些方法，post和get的区别

常见的网络请求方法有以下几种：

GET：从服务器请求一个指定的资源。这个方法应该只用于获取数据而不是其他操作。使用GET请求时，请求参数会被附加在请求URL的末尾，被称为查询字符串。POST：向服务器提交指定的数据。POST请求将数据包含在请求体中，并且不会直接暴露在URL上。PUT：请求服务器用请求的资源替换掉原来的资源。DELETE：请求服务器删除指定的资源。OPTIONS：请求服务器返回支持的HTTP请求方法。

POST和GET请求的区别如下：

GET请求用于获取资源，POST请求用于传输数据。GET请求的请求参数附加在URL的末尾，限制了参数的长度，更不安全；而POST请求的请求参数被包含在请求体中，长度更灵活，更安全。GET请求会被浏览器缓存下来，POST请求不会。GET请求的数据可以被收藏为书签，POST不行。GET请求在浏览器历史记录中留下记录，POST请求不会。

总的来说，GET请求更简单、更快速，常用于请求数据；POST请求更安全，常用于提交数据。

有哪些数据结构，挑一个结合实际开发场景进行阐述

常见的数据结构有：数组、链表、栈、队列、哈希表、二叉树、堆、图等等。

我选择以栈作为例子，来阐述它在实际开发场景中的运用。

栈是一种“后进先出”（LIFO）的线性数据结构，只允许在一端进行插入和删除操作。

在Web开发中，栈经常用来实现“撤销操作”和“前进操作”等功能。

比如，我们在一个富文本编辑器中按下了“撤销”按钮，要回到之前编辑的内容，这时就需要将之前的操作记录在一个栈中。

栈的顶部表示当前编辑状态，栈底表示初始状态。

通过栈来实现撤销操作和前进操作的好处在于，我们可以更轻松、更简单地实现这种功能，而且保证了编辑器的性能和稳定性。

在栈的应用中，我们可以使用数组、链表或其他数据结构来实现。

什么是跨域，哪些方法解决

跨域是指在一个域（网站）的页面中，通过ajax、img、script等方式向不同的域（网站）发送请求时，就会出现跨域请求（也称为“跨域资源共享”）的情况。这是由于浏览器的同源策略所致，同源策略要求一个域只能访问自身域名下的内容，不能访问其他域名下的内容。

解决跨域问题的方法有以下几种：

1.使用JSONP：JSONP是一种解决跨域问题的传统方法，它是通过

2.使用CORS：CORS（跨域资源共享）是现代浏览器支持的一种方式，通过在服务端设置Access-Control-Allow-Origin等header来实现允许跨域访问。

3.使用代理：使用代理的方式来解决跨域问题，即由服务器端来进行跨域请求，前端只需要调用同域名下的接口即可。

4.使用postMessage：HTML5中新增了postMessage API，通过它可以跨窗口通信，也就是多个窗口（甚至不同域名下的窗口）之间可以传递消息。

5.在服务器端设置反向代理：在服务器端设置反向代理，让前端的请求先经过代理服务器，再转发到真正的API服务上，从而实现跨域请求。

需要注意的是，在使用跨域访问时，需要了解跨域访问的安全性问题，防止信息泄露和攻击等问题。

koa-cors的原理

koa-cors是一个Koa框架的CORS中间件，用于设置Response头的CORS属性，允许使用者在不同的域名下访问自己的服务器端资源。该中间件的原理是通过设置Response Header头中 Access-Control-Allow-Origin ，Access-Control-Allow-Methods ，Access-Control-Allow-Headers 和 Access-Control-Allow-Credentials 等属性来允许跨域访问。

Access-Control-Allow-Origin 属性用于设置允许访问的域名列表，可以使用 “*” 表示允许所有域名访问；Access-Control-Allow-Methods 属性用于设置允许访问的HTTP请求方法列表，比如GET、POST、OPTIONS等；Access-Control-Allow-Headers 属性用于设置允许访问的HTTP请求头部信息；Access-Control-Allow-Credentials 属性用于设置是否允许发送Cookie等凭据信息。

当客户端在跨域访问服务端资源时，需要向服务端发送 OPTIONS 请求，该请求中包含了一些请求头和请求方法，服务端会根据这些信息来判断是否允许访问。如果服务端允许访问，那么会返回对应的Response Header头，可以通过浏览器的开发工具查看到这些响应头信息。通过koa-cors中间件，我们可以方便地设置这些响应头信息，从而实现跨域访问。

shoumebug面试，现场做了道算法题

反问环节，团队情况，所在的团队的情况，开发用的框架，面试反馈，告知二面会问些发散性思维的题目。

二面

自我介绍，挑个项目讲讲

v8引擎

V8引擎是 Google 开发的一款开源高性能 JavaScript 引擎，现在被广泛应用于谷歌Chrome浏览器、Node.js、MongoDB等系统中。V8 引擎使用 C++ 编写，其目标是在最小化启动时间、最快执行和内存使用方面提供卓越的性能。它主要针对 Web 应用优化设计，为实时响应 Web 页面而进行了优化。

V8 引擎有一个独特的编译和执行系统。它采用了即时编译（JIT）技术，可以在运行时动态编译 JavaScript 代码，并将其转化为本地机器代码执行。这是 V8 引擎非常快的原因之一。V8 引擎使用了许多性能优化技术，例如内存管理、垃圾回收、代码优化等技术，使得 JavaScript 代码可以以接近本地代码的速度运行。

在性能方面，V8 引擎采用了多种优化策略，例如 JIT 编译、内联缓存、隐藏类等技术。这些技术可以显著提高 JavaScript 应用程序的性能，从而提高 Web 应用程序的响应速度和用户体验。

V8 引擎也具有可扩展性，可以针对不同的应用程序进行集成和定制。它提供了一组丰富的 API，可以通过这些 API 扩展 JavaScript、优化和定制运行时环境。这些 api 包括添加自定义函数、调试接口和配置垃圾回收等等。

简而言之，V8 引擎是一款高性能、开源的 JavaScript 引擎，采用了先进的 JIT 编译技术、内存管理、垃圾回收等优化策略，在多种应用领域都有广泛的应用。

为什么要有事件循环

事件循环是现代JavaScript运行环境中非常重要的一个概念，它的存在是为了解决单线程执行 JavaScript 代码时可能会遇到的阻塞问题。

JavaScript 是一门单线程语言，指的是 JavaScript 脚本只能在一个线程中运行。

这也就意味着所有的 JavaScript 代码都是顺序执行的，一旦发生代码阻塞（比如执行一个长时间运行的操作），整个程序会被阻塞，造成用户体验不佳。

为了解决这个问题，JavaScript 运行环境引入了事件循环机制。事件循环可以简单地理解为在主线程上运行的一个 Event Loop 函数，它会循环监听执行队列中的事件，当发现有事件需要处理时，就处理事件并移除该事件。事件可以是用户点击、定时器过期、网络请求等等。

事件循环的存在，让 JavaScript 运行环境可以在同一个线程中异步地执行多个任务，从而提高程序的运行效率，并且避免在执行阻塞操作时让整个程序挂起。通过将任务加入执行队列，JavaScript 运行环境可以让主线程腾出时间去处理其他任务，从而实现了非阻塞式的 JavaScript 执行。

因此，可以说事件循环机制是现代 JavaScript 运行环境中非常重要的一环，它让 JavaScript 运行起来更加流畅、高效，使得开发者能够更加灵活地编写代码来处理多种场景。

vue的组件通信方法

Vue 的组件通信方式有以下几种：

父子组件通信：父组件可以通过 props 属性将数据传递给子组件，子组件通过监听 prop 可以获取到父组件的数据。子组件可以通过 $emit 触发事件，通知父组件进行相应的操作。子父组件通信：子组件可以通过 $emit 触发自定义事件，父组件通过监听该事件可以获取到子组件的数据。如果子组件包含多层嵌套，父组件可以通过 $children 获取到子组件实例，也可以通过 $refs 获取到子组件的 DOM 元素。非父子组件通信：可以通过一个空的 Vue 实例作为中央事件总线（eventBus）来实现非父子组件之间的通信。一般情况下，非父子组件之间的通信比较少用到，不过在某些特定的场景，比如深层次组件通信等，可能需要使用这种方式。Vuex 状态管理：Vuex 是 Vue 的官方状态管理工具，它可以将应用程序的所有组件的状态存放在中央仓库中进行管理。通过使用 Vuex，可以方便地实现任意组件间的数据共享和通信。$parent / $root：每个 Vue 组件都暴露了 $parent 和 $root 属性，分别表示组件的父组件和根组件。组件可以通过 $parent 和 $root 属性向上查找它们的祖先组件，并与这些组件进行通信。$attrs / $listeners：当子组件接收到的 prop 并没有在子组件中声明时，会自动把这些 prop 添加到子组件的根元素上。这导致了父组件给子组件传递的 prop 会随意散落在子组件的根元素和其他 HTML 片段上。可以通过 $attrs 和 $listeners 属性获取到这些还没被子组件使用的属性和事件。

总体来说，Vue 的组件通信方式非常灵活，开发者可以根据具体场景选择不同的通信方式，以满足需求。

组件通信方式

优点

缺点

父子组件通信

易于理解和使用；数据流动清晰；组件之间紧密关联。

父子组件耦合性较高；只适用于父子层级关系的组件通信。

子父组件通信

组件之间解耦；子组件触发事件后，可以通知多个父组件；多用于子组件将数据传递给父组件。

每个父组件都需要监听子组件的事件；事件名称需要统一，容易造成全局命名冲突。

非父子组件通信

可以在任意组件之间共享数据；解耦组件之间数据传递。

易于写出不良代码，对代码结构有要求；难以调试和追踪问题。

Vuex 状态管理

状态集中管理，高效方便地管理多个组件的状态；数据流动清晰，可追踪。

对于较小型应用程序，引入 Vuex 因逻辑复杂，而变得笨重。

$parent / $root

直接获取父组件或根组件，可以快速解决一些场景下的通信问题

组件之间的关系必须很明确，若结构调整则会失效

$attrs / $listeners

可以访问父组件传递过来的所有属性和监听器；支持动态绑定。

需要手动绑定自定义事件；如果属性和事件没有被使用会导致性能浪费。

这些组件通信方式各有优缺点，开发者应根据具体场景选择不同通信方式来解决问题。

http请求头和响应头里有哪些字段

以下是http请求头和响应头常见的字段及其用途：

标题

描述

User-Agent

标识请求的客户端类型，如浏览器、爬虫或作者工具。

Accept

指定客户端可接受哪些响应类型。

Authorization

指定请求的授权凭证。

Connection

控制是否在请求完成后保持连接。

Content-Type

描述请求或响应中包含的实体主体的MIME类型。

Cookie

携带在该请求域名下的cookie信息。

Host

指定请求的目标主机。

标题

描述

Server

服务器响应的名称和版本号。

Date

服务器响应的日期和时间戳。

Content-Type

指定响应实体的媒体MIME类型。

Content-Length

指定响应实体的字节数。

Cache-Control

控制响应内容在客户端缓存中的行为。

Set-Cookie

服务器为该响应设置cookie。

Expires

指定响应缓存可被浏览器缓存多久时间（秒）。

Location

如果响应是一个重定向，指定其目标URL。

这些只是一些常见的头信息，实际上http中可以使用的头信息还有很多。请求头和响应头的具体用法取决于开发者所设计的应用程序。

304状态码会发生什么

当客户端请求的资源在服务器上没有被修改时，服务器会返回304状态码，表示请求的资源未被修改，客户端可以使用缓存版本。

这通常被称为“无需更新”响应。

具体来说，当客户端发起带有缓存控制头的请求时（例如If-None-Match或If-Modified-Since），服务器将比较请求中的缓存标识与服务器上的资源的相关信息，并检查它是否已被修改。

如果资源没有被修改，并且客户端的缓存副本仍然有效，则服务器将发送一个不带实体的304响应，告诉客户端可以使用缓存版本，而不需要下载完整的资源。互联网上的每一次请求都需要占用一定的带宽和服务器资源，这样就可以减少服务器资源的使用。

需要注意的是，如果服务器上的资源已被修改，则服务器将发送新的资源和一个新的响应状态码（通常是200 OK）。

讲讲webpack

Webpack是一个前端静态模块打包器，它通过入口文件（entry）和依赖关系图（dependency graph），分析出代码中使用到的各种模块，最终生成一个或多个能够在浏览器中直接运行的静态资源文件。

Webpack可以将多个JavaScript等文件打包成一个或多个输出文件，还支持加载和打包CSS、Image以及各种文件格式，是现代化前端工程化中必不可少的工具之一。

Webpack的工作流程如下：

根据entry配置找到所有的模块依赖。解析每个模块的依赖。将以上所有依赖打包到一个或多个输出文件中。在整个打包过程中，Webpack使用各种不同的Loader来处理不同类型的模块，例如将ES6、TypeScript转换为ES5代码，将SCSS等样式文件转换为浏览器可以识别CSS文件。

Webpack的核心概念有以下几个：

入口（entry）：Webpack打包的入口文件，构建依赖关系图的起点。出口（output）：Webpack打包的输出文件路径和文件名。加载器（loader）：用于转换项目中的各种文件，例如将各种图片、样式文件及其他非JavaScript文件转换为JavaScript文件。插件（plugin）：用于扩展Webpack的功能，如提取公共代码、资源压缩、热更新等。

Webpack 不仅可以用于解决JavaScript的模块化问题，而且也支持处理其他非JavaScript的模块。对于大型的前端项目而言，Webpack被广泛应用于代码打包、模块管理、优化代码、提高开发效率和打包速度等方面。

以下是Webpack的常用配置及其用途的表格：

配置项

描述

entry

手动指定入口模块的路径。

output

构建生成的文件存储的位置及名字的配置。

mode

环境的模式，有development、production和none三种可选模式。

module

处理项目中的各个模块，包括使用Loader处理非JavaScript文件。

resolve

配置模块的解析方式，如自动解析的文件后缀、模块路径、别名等。

devServer

配置开发服务器，支持实时重新加载和热模块替换。

optimization

针对不同目标环境进行优化，如代码压缩、作用域提升等。

plugins

插件用于扩展Webpack的功能，如增强开发体验、支持打包后的资源输出等。

devtool

配置Source Map用于调试开发代码时出现的错误。

externals

将依赖的库从打包文件中剥离，使用CDN来提高性能。

performance

用于控制Webpack在打包后文件大小等方面表现的提示和限制信息。如打包文件过大时进行报错等。

以上配置项仅为常见的Webpack配置，实际使用中需要根据项目需求进行具体的配置。

算法和数据结构

算法和数据结构是计算机科学中最基本的两个概念。数据结构是一种用于存储和组织数据的方法，而算法则是一组解决问题的方法或过程。

具体来说，数据结构定义了一种数据范围和一组操作这些数据的函数或方法，包括但不限于数组、栈、队列、链表、二叉树、哈希表、图等。数据结构可以用于帮助我们更高效地存储、组织和访问数据，从而提高程序的效率和性能。

算法则是一组针对特定问题的步骤或方法，用于解决问题的思路和策略。算法可以用来解决各种问题，如排序、搜索、加密、图形处理和机器学习等领域。通常，一个好的算法应该具有正确性、效率、可读性、健壮性和易于维护等特点。

常见的算法和数据结构有：

排序算法：包括冒泡排序、选择排序、插入排序、快速排序、合并排序等。查找算法：包括线性查找、二分查找、哈希查找等。树结构：包括二叉树、红黑树、AVL树等。图结构：包括有向图、无向图、拓扑排序、最短路径等。队列和栈：包括先进先出队列和后进先出栈等。

在开发过程中，算法和数据结构可以用来设计更高效、更易于维护和扩展的程序。同时，了解和掌握算法和数据结构也是应对各种技术面试中不可或缺的能力。

工作规划

以下是一个前端开发工作规划的案例：

阶段一：基础技能学习与实践（3个月）

规划目标：掌握HTML、CSS以及JavaScript等基础技能，熟悉常用前端工具，通过实践掌握实际开发经验。目标指标：掌握HTML5和CSS3的语法、常用标签和常用样式技巧。掌握JavaScript基础、DOM操作、事件处理以及AJAX等技能。学习并使用常用前端工具，如Chrome Developer Tools、WebStorm、Git等。参与实战项目的实践经验，如搭建简单的静态网站、实现网页交互等。

阶段二：框架学习和应用（6个月）

规划目标：学习掌握常用的JavaScript框架和库，如Angular、Vue等，并进一步深入学习前端开发的最佳实践。目标指标：掌握MVVM框架的基本概念、语法和常用操作，如组件开发、数据绑定、视图切换等。熟悉常用前端框架和库的工作原理和用法，如jQuery、Bootstrap等。掌握前端开发的最佳实践，如响应式布局、模块化开发、代码规范等。实践应用框架和最佳实践，如使用Vue开发单页面应用、使用React实现组件化开发等。

阶段三：团队协作实践和技术深入研究（12个月）

规划目标：在实战项目中加深团队协作能力，解决实际开发中遇到的难题，深入研究前端领域的技术难点。目标指标：在团队中学习协作和合作的能力，提高项目管理和交流能力。针对项目中的难点问题，深入探索解决方案，如跨域问题的解决、前后端数据交互等。加深技术领域的研究，如前端性能优化、网络安全、移动端优化等。参与开源项目的贡献和维护，扩展个人影响和技术能力。

总的来说，前端工作规划需要注重基础技能的学习和深入实践、框架和库的应用和深入研究，以及团队协作能力的提升和技术领域的拓展。同时，随着前端技术的不断发展和新技术的出现，还需要不断学习和更新自己的知识储备和技能。

反问环节