前端求职面经02（5月面经总结）

前端求职面经02（5月面经总结）

2024-12-26 06:42

这个笔记主要记录了最近的一些面经和自己搜集的答案用于复习

前端求职面经02（5月面经总结）

作者：毕不了业快g了
链接：https://www.nowcoder.com/?type=818_1

1.diff算法的实现，怎么实现O（n）复杂度的

（1）diff算法的作用是用来计算出 Virtual DOM 中被改变的部分，然后根据算法算出dom的结果进行原生DOM操作，而不用重新渲染整个页面。（性能优化）

（2）在页面进行渲染后，会生成一个虚拟DOM保存在内存中，节点发生变化时又生成新的虚拟DOM。传统的Diff算法是通过遍历循环对比新的虚拟DOM与之前保存的旧的虚拟DOM之间的变化（两层嵌套时间复杂度为O（n^2）），如果每个节点都有变化则需要更新的操作，所以传统的Diff算法的时间复杂度是O(n ^3)。如果DOM的节点非常多，显然这个代价也是非常高的。
（3）react中降低了diff的时间复杂度，

只做同层比较，如果父节点不同，就直接对该节点进行更改，而不对其子节点进行比较；
通过key对DOM节点进行唯一的绑定。

2.父子都relative定位，子top20px结果是什么

（1）与css中的position属性有关，分为以下三种情况：

包含关系1：父级absolute，子级relative：父级相对浏览器的定位，子级相对父级定位；当父级标签中包含文字，子级会发生调整
包含关系2：父级relative，子级absolute：父级相对浏览器的定位，子级相对父级定位
并列关系：兄弟标签都是relative：子级相对位置根据最近一个兄弟参考

ps:父级位置改变时，子级位置以父级位置变化前的位置为参考

3.如何用Promise实现请求失败后继续请求

主要是使用Promise.retry代码实现

链接：实现 Promise.retry，成功后 resolve 结果，失败后重试，尝试超过一定次数才真正的 reject - 掘金 (juejin.cn)

4.如何实现一键切换主题

（1）CSS变量+类名切换：VUE3官方文档使用的解决方案（比较推荐）

实现思路：首先定义几个我们需要的全局样式变量，之后定义几个集合属性（不同的主题样式），然后将其放在html根元素标签里，再动过js动态的切换这个集合属性就可以实现主题的切换，具体看以下代码；

优点：不会因为网络问题导致样式切换延迟；在需要切换主题的地方利用 var绑定变量即可，不存在优先级问题；新增或修改主题方便灵活，仅需新增或修改 CSS 变量即可，在 var（）绑定样式变量的地方就会自动更换；

缺点：首屏加载时会牺牲一些时间加载样式资源；

（2）v-bind：在vue3中基于响应式对css变量进行动态改变

优点：不用考虑网络问题；在需要切换主题的地方利用 v-bind 绑定变量即可，不存在优先级问题；新增或修改主题方便灵活，仅需新增或修改JS 变量即可，在v-bind0绑定样式变量的地方就会自动更换；

缺点：也是首屏加载时会牺牲一些时间加载样式资源；这种方式只要是在组件上绑定了动态样式的地方都会有对应的编译成哈希化的 CSS 变量，而不像 CSS变量一样统一地在:root 上设置；

5.echarts怎么实现随着父组件变化而变化，如果父组件里有多个echarts的话，它们应该怎么实现

通过Echarts的resize()方法解决。

学习链接：Echarts实现图随窗口或父组件的大小变化缩放-腾讯云开发者社区-腾讯云 (tencent.com)

6.node是怎么避免io阻塞的

node 的特性是单线程、非阻塞时 I/O 。node 最大的优势就是性能强，同样的服务器性能使用 node 可以比传统的服务器语言多容纳一百倍的用户（对于不同的任务有不同的差别， I/O 操作越多，node优势越明显（传统的服务器语言大多是多线程、阻塞式 I/O）

避免方法：回调函数+异步+监听

7.node是怎么处理stdt缓存（这个没了解过，可能写错了）的

（没搜到）学习了一下Node处理强制缓存、协商缓存、内存缓存的办法

链接：Node.js中的缓存策略和缓存技巧_node.js 协议缓存-CSDN博客

8.vue3为什么要引入setup

setup是vue3新增的生命周期函数，setup的加入就是为了让vue3使用组合式API（Composition API）。使用组合式API更符合大型项目的开发，通过setup可以将该部分抽离成函数,让其他开发者就不用关心该部分逻辑。（我的理解是便于封装？还有组合式API）

setup位于beforeCreated之前,用于代替created 和beforeCreated。由于setup函数执行的时候项目还没有进行初始化，所以不能访问data或methods中的数据，console.log(this)显示为undefind。

9.css怎么实现偏移

10.css怎么实现旋转

使用CSS中的属性：

作者：小嘻米
链接：https://www.nowcoder.com/?type=818_1

阿西我真的是菜鸡，三数之和都没写出来
面试官水平很高，感觉看问题的角度完全不一样，问的很有水平，好难啊，我感觉我听不懂在说啥

1.自我介绍

2.为什么想选择前端这个方向呢？

3.怎么自学前端？

4.学习路线是怎么样的？

5.webpack解决什么问题？

是一个用于现代应用程序的静态模块打包工具

需要通过模块化的方式来开发
使用一些高级的特性来加快我们的开发效率或者安全性，比如通过ES6+、TypeScript开发脚本逻辑，通过sass、less等方式来编写css样式代码
监听文件的变化来并且反映到浏览器上，提高开发的效率
JavaScript 代码需要模块化，HTML 和 CSS 这些资源文件也会面临需要被模块化的问题
开发完成后我们还需要将代码进行压缩、合并以及其他相关的优化

6. 为什么合并文件（合并http请求）之后的性能会变好？

（1）HTTP请求的主要过程：DNS解析（T1）-> 建立TCP连接（T2）-> 发送请求（T3）-> 等待服务器返回首字节（TTFB）（T4）-> 接收数据（T5）

（2）当多个请求时，请求中的DNS解析、建立TCP连接等步骤都会重复执行多遍。那么如果合并N个HTTP请求为1个，理论上则可以节省(N-1)*(T1+T2+T3+T4)的时间。当然实际场景并没有这么理想，比如浏览器会缓存DNS信息，因此不是每次请求都需要DNS解析；

（3）经过研究可以得出结论：当文件体积较小的时候，(网络延迟低的场景下)合并后的文件的加载耗时明显小于加载多个文件的总耗时；

当文件体积较大的时候，合并请求对于加载耗时没有明显的影响，且拆分资源可以提高缓存命中率。但是注意有特殊的场景，由于合并资源后可能导致网络往返次数的增加，当网络延迟很大时，是会增大耗时的（参考 TCP 拥塞控制）。

7.为什么http请求少些性能会变得更好？

8.http请求下层依赖什么协议？

学习链接：HTTP协议与 TCP协议的区别，作为web程序员必须要懂 - 知乎 (zhihu.com)

TCP/IP协议

9.http的tcp复用的情况下还有必要合并文件吗？

10.那webpack解决的问题是不是不存在了呢？（好绕好绕晕晕哒）

11.模块化必须要依赖webpack才能实现吗？

不是，但是借助工具会更高效方便。实现模块化的其他方法：复古技术RequireJS、别的构建工具Parcel、requirejs+typescript/JavaScript+gulp自己做

12.浏览器自身会不会去解决webpack的作用的问题？

13.为什么学完三件套之后去学webpack？

14.学完webpack之后学什么？

15.为什么使用虚拟dom会让性能变好？

（1）虚拟 DOM（Virtual DOM）原理：

当页面状态发生变化时，虚拟 DOM 会以 JavaScript 对象的形式进行更新，而不是直接操作真实的 DOM。

更新后的虚拟 DOM 会与旧的虚拟 DOM 进行比较，找出差异（Diffing），然后只针对差异部分来更新真实的 DOM。

使用合适的算法进行差异比较，可以最小化对真实 DOM 的操作次数，从而提高性能。

（2）用处：

性能优化：通过减少对真实 DOM 的操作次数，可以提高页面渲染的效率。相比直接操作真实 DOM，虚拟 DOM 可以批量处理 DOM 更新，减少浏览器的重排和重绘次数。

跨平台开发：虚拟 DOM 是基于 JavaScript 对象的抽象表示，因此可以在不同的平台上使用相同的代码逻辑进行开发，例如 Web、移动应用、桌面应用等。

组件化开发：虚拟 DOM 配合组件化开发可以提高代码的可维护性和复用性，使开发过程更加灵活和高效。

16.手撕dom树的高度

JavaScript中获取DOM元素宽度和高度的常用API - 掘金 (juejin.cn)

17.手撕dom树两节点最近公共祖先元素

只找到类似的力扣题：236. 二叉树的最近公共祖先 - 力扣（LeetCode）

18.手撕三数之和

15. 三数之和 - 力扣（LeetCode）

作者：小嘻米
链接：https://www.nowcoder.com/?type=818_1

1.浏览器缓存有哪些？

一文读懂浏览器缓存（超详细） - 掘金 (juejin.cn)

没看太明白，之后再补…

缓存有两种：私有缓存和共享缓存

具体学习：HTTP 缓存 - HTTP | MDN (mozilla.org)

2.http缓存和service worker缓存有什么区别？

（1）ServiceWorker 缓存（中的CacheAPI）

ServiceWorker 是一个运行在浏览器背后的脚本，它可以拦截网络请求、控制资源的缓存和提供离线服务（一旦我们将资源缓存在 Service Worker 中，即使用户在无网络的环境下，也能够访问这些资源。而 HTTP 缓存当设备处于离线状态，且缓存期已过时，就无法提供内容。）。与传统的 HTTP 缓存不同，ServiceWorker 可以提供更细粒度的控制，例如按需缓存、版本控制和增量更新等。（比 HTTP 缓存更加丰富和灵活的控制方式）

ServiceWorker 的主要特点：

拦截请求：ServiceWorker 可以拦截对特定资源的请求，并决定是否从缓存中提供响应，而不是从网络中获取。
离线服务：通过缓存关键资源，ServiceWorker 可以确保即使在网络不可用时，网站也能提供基本的功能。
请求和响应修改：ServiceWorker 可以修改请求和响应数据，以便更好地适应特定需求。（HTTP 缓存是由浏览器自动管理的，而 Service Worker 的 Cache API 是以显式方式由开发者自定义和管理，因此，对于缓存内容和策略的控制更加精准。）
长期存储：ServiceWorker 使用 IndexedDB 作为其存储后端，这意味着数据可以在用户的浏览器上长期存储，而不用担心过期时间。
还有一个优势，使用 Service Worker 的 Cache API 还有一个重大优势，那就是通过它，开发者可以构建出完全能够离线运行的 Progressive Web App（PWA）。这是 HTTP 缓存无法达到的，因为 HTTP 缓存无法处理 Service Worker 中的 fetch 以及 offline 事件。

（2）HTTP 缓存

HTTP 缓存是一种服务器和浏览器之间的协作机制，用于减少重复的网络请求和提高页面加载速度。当浏览器请求一个资源时，服务器可以发送一个响应头，指示该资源可以在本地缓存多长时间。在指定的时间内，如果浏览器再次请求该资源，它可以直接从本地缓存中获取，而无需再次从服务器下载。

HTTP 缓存的主要特点：

时间戳：服务器通过设置响应头的或属性来告诉浏览器资源最后修改的时间或版本。
缓存控制：浏览器根据服务器提供的指示（如头）来决定是否使用本地缓存的资源。
失效机制：如果服务器上的资源发生了变化，它可以通过设置一个较短的时间戳来告诉浏览器重新下载资源。
客户端策略：浏览器会根据其自身的缓存策略来决定是否使用本地缓存的资源。例如，当用户清除浏览器缓存时，所有缓存的资源都将被删除。

（3）相互作用

虽然 ServiceWorker 和 HTTP 缓存都是用于提高性能的技术，但它们在不同的场景下发挥不同的作用。HTTP 缓存通常用于优化静态资源的加载速度，例如 CSS、JavaScript 和图片文件。而 ServiceWorker 则提供了更高级的功能，如离线服务、推送通知和后台同步等。

在实际应用中，可以将两者结合使用以获得最佳效果。例如，可以使用 HTTP 缓存来快速加载关键的静态资源，同时使用 ServiceWorker 来缓存和管理动态内容或应用特定的逻辑。

3.service worker缓存有什么不太好的地方？

4.service worker更新不及时怎么处理？

5.http缓存时间？

6.不同浏览器的缓存有什么不一样？兼容性差异？

7.知识是自学的吗？对前端感兴趣是吗？

8.组件库怎么设计的？

9.v-model原理展开讲讲？

（1）在 Vue.js 中，v-model 指令是一种语法糖，它的作用是为表单元素绑定双向数据绑定。这意味着当用户输入表单元素时，它会更新 Vue 实例的数据，同时也会将 Vue 实例中的数据反映到表单元素上。

（2）原理：将表单元素的 value 属性绑定到一个计算属性上，并且在计算属性的 setter 中触发 input 事件来更新 Vue 实例中的数据。

① v-bind：v-bind用于绑定一个value属性。

② v-on:v-on用于给当前元素绑定input事件，当触发input事件时，可以通过事件对象参数$event.target.value获得输入的内容，并把这个内容赋值给id。

10.postcss作用是什么？

PostCSS 是一种 JavaScript 工具，可将你的 CSS 代码转换为抽象语法树 (AST)，然后提供 API（应用程序编程接口）用于使用 JavaScript 插件对其进行分析和修改。

具体链接：什么是 PostCSS？如何使用插件自动化 CSS 任务 - 掘金 (juejin.cn)

11.父元素子元素宽高不确定，实现水平居中布局？

方案一：flex弹性布局；

方案二：使用position定位

方案三：外边距结合定位

CSS垂直居中的几个方法（适用于不知道父级盒子宽高的情况下垂直居中） - 知乎 (zhihu.com)

12.虚拟滚动列表组件实现？

虚拟列表+分页 ——> 一个解决接口返回数据过多的长列表数据显示方案

13.笔试1：连续相同字符最长子串

3. 无重复字符的最长子串 - 力扣（LeetCode）

不太确定是不是这道题……

14.笔试2：手撕一个自定义Input组件，支持受控、非受控，需要符合Function Component规范。

15.笔试3：复杂对象扁平化

作者：月光草之尘
链接：https://www.nowcoder.com/?type=818_1

面试官人真的很好很温柔…

计网：

1.http1.0/1.1/2

2.https

3.对称加密非对称加密

4.七层模型

5.tcp/udp的区别和应用

6.三次握手具体到序号

7.输入url到屏幕出现

8.DOM树渲染树之类的相关知识

OS：

9.进程调度算法

10.死锁相关概念

数据库：

11.相关的知识

12.连接查询

js：

13.闭包（提了一嘴柯里化、偏函数）

14. 原型链

15. 防抖节流（结合项目问的）

数据结构与算法：
你了解哪些排序算法

16.说下快排

vue：

17. diff算法

18.v-for里面key的作用（结合diff算法优化问）

19.生命周期

20.父子组件的生命周期

拷打项目：
根据简历上的项目亮点问的
还有具体的一些设计思路

21.算法题：二叉树右视图

199. 二叉树的右视图 - 力扣（LeetCode）

作者：吃橙不吃陈
链接：https://www.nowcoder.com/?type=818_1

1.说一说es6的箭头函数和普通函数的区别

1、普通函数中的this总是指向调用它的那个对象，

箭头函数没有自己的this，他的this永远指向其定义环境，任何方法都改变不了其指向，如call（）、bind（）、apply（）。（正是因为它没有this，所以也就不能用作构造函数，也没有原型对象）

2、箭头函数不能当作构造函数，也就是说，不能使用new命令，否则会报错。

3、箭头函数不能使用yield命令，因此箭头函数不能用作genertor函数。

4、箭头函数没有原型属性。

5、箭头函数不能使用argumen对象，该对象在函数体内不存在。如果要用，可以用rest参数代替。

6、变量提升：由于js的内存机制，function的级别最高，而用箭头函数定义函数的时候，需要var(let、const）关键字，而var所定义的变量不能得到变量提升。故箭头函数一定要定义于调用之前。

2.Promise使用过吗，介绍一下各种方法

学习链接：Promise详解大全：介绍、九个方法使用和区别、返回值详解_new promise 返回什么-CSDN博客

3.消息队列，宏任务和微任务

是一门单线程、异步、非阻塞、解析类型脚本语言。

学习链接：一篇搞定（Js异步、事件循环与消息队列、微任务与宏任务） - 知乎 (zhihu.com)

4.盒子模型和怪异盒模型，如何设置怪异盒模型

模型顾名思义就是在css中的盒子，把HTML的元素封装成盒子用来设计和布局时使用，盒模型中又包含了以下几个元素： (1) 内容（）（2）填充（) 3.边框（）（4）边距（）

标准盒子模型=(内容)+(边框)+(内边距)
怪异盒子模型=(内容)(已经包含了和 )

（1）标准盒模型：height = content高度，width = content 宽度。

（2）怪异盒模型：height = content + padding + border高度，width = content + padding + border 宽度。

5.position的取值分别是什么，有什么用

（鼠鼠fixed和stiky说错了，将fixed说成粘性定位了，概念倒是没有什么问题）

osition属性有以下四个取值：

static:静态定位，是position属性的默认值，表示无论怎么设置top、bottom、right、left属性元素的位置（与外部位置）都不会发生改变。
relative：相对定位，表示用top、bottom、right、left属性可以设置元素相对与其相对于初始位置的相对位置。
absolute：绝对定位，表示用top、bottom、right、left属性可以设置元素相对于其父元素（除了设置了static的父元素以外）左上角的位置，如果父元素设置了static，子元素会继续追溯到祖辈元素一直到body。
fixed：绝对定位，相对于浏览器窗口进行定位，同样是使用top、bottom、right、left。

详细链接：Position属性四个取值用法和区别_position属性有哪4种取值?有何区别?-CSDN博客

6.flex布局有了解吗，是什么

Flex 布局语法教程 | 菜鸟教程 (runoob.com)

7.vue2和vue3的区别

上链接！vue3与vue2的区别（你不知道细节全在这）_vue2和vue3区别-CSDN博客

8. vue3在编译文件上的提升

9.使用computed计算一个数据，但是没有在模版中使用，会随着依赖的变化而变化吗

计算属性拥有的特征，你不去读取value的时候，它是不会去真正的求值的。

10.this指向，有什么实际运用场景吗

1、普通函数中，this指向其函数的直接调用者；

2、箭头函数中，this指向其定义环境，任何方法都改变不了其指向，如call（）、bind（）等；

3、构造函数中，如果不使用new,则this指向window，如果使用new创建了一个实例，则this指向该实例。

11.手写bind

12.双指针——类似于移动0

13.反问——做什么的？主要技术栈

有web端和小程序端，web端主要是少儿英语之类的，迭代一些老项目。小程序端会开发功能，主要技术栈是vue2

拖了两次完成了这篇（东拼西凑）的面经笔记