一年半经验的前端面经总结

下面的面经部分被我分为了八个方面：（下面题目的???代表面试频率出现过多次）

• JavaScript 基础

• Css 以及优化

• vue 或 react 框架相关

• 前端打包等工程化

• 浏览器及常见安全问题相关

• 跨平台技术

• 网络相关

• 少量算法

其中并没有 Html 相关的东西，一方面确实是相关的题目少，另外不会有太难的问题，平时开发时常见的情况基本可以解决。

并且因为是从自己的简历来发问，所以有些也很常见的 nodejs、serverless、GraphQL 等等都不在我的面试题里，但很有可能出现在你的题目里，相关题目可以自行补课！

原生 JS 代码

1. JavaScript 实现对上传图片的压缩？

答：读取用户上传的 File 对象，读写到画布（canvas）上，利用 Canvas 的 API 进行压缩，完成压缩之后再转成 File（Blob） 对象，上传到远程图片服务器；不过有时候我们也需要将一个 base64 字符串压缩之后再变为 base64 字符串传入到远程数据库或者再转成 File（Blob） 对象。

思路就是 File + Canvas 的 drawImage

可以看看张鑫旭大佬的文章 HTML5 file API加canvas实现图片前端JS压缩并上传

1. 谈一谈 JavaScript 的异步？???

答：setTimeout、MutationObserver、postMessage、Promise、async、await、generator

从 MutationObserver、postMessage 会牵扯到 vue 的 $nextTick

从 generator 会聊到 co.js 实现，代码不长，意思也好理解，但让我写还真没写出来，建议兄弟们好好看一遍！

从 Promise 和 setTimeout 会聊到下面要说的事件循环

1. 浏览器和 nodejs 事件循环？???

答：执行栈，promise 是 microTask，setTimeout 是 task

其中很多的阶段，可以从这里看到完整的模型介绍：html.spec.whatwg.org/multipage/w…

需要说出来的点：首先 setTimeout 并没有特殊，也是一个 task。另外每次的执行过 task 和 大量的 microtask（不一定在一次循环全执行完）后，会进行 renderUi 阶段，虽然不是每次事件循环都进行 renderUi ，但每次间隔，也就是传说中 60hz 的一帧 16ms。

nodejs 事件循环略有不同…多了 process.nextTick 等

1. 手写 Promise 或者 Promise 的静态方法

答：手写 Promise 尽量写出来 Promise 的状态，静态方法以及 .then，.catch。当然更细节的还原可以看 Promise A+ 规范。

静态方法指 Promise.allSettled Promise.all Promise.race 等等。

1. 手写节流与防抖 ???

答：老生常谈，原理很简单，主要还是看会不会封装函数，以及封装的高级与否，考虑的情况是否全面。

1. 手写 bind 函数

答：同上。

1. service worker 使用

答：缓存，渐进式应用，拦截处理

聊到 worker 可能还会聊到 web worker， shared worder 等等，如果有自信，或者工作对这方面有深入理解，可以秀一下。能体现出自己的优势…

1. 严格模式

答：this 的 undefined，禁止 with，arguments 不允许更改，给只读对象赋值抛异常，变量需要先声明，call，apply 第一个参数不会被转换…

能答出来一些就行。

1. 原型链以及继承

答：很常问，但随便找个赞数高的讲解，看一遍就懂了，记住常考点即可。

1. 正则表达式匹配规则？

答：这个真没办法，只能是对正则表达式的规则进行系统学习，当然常考的可能是 邮箱，url 匹配。

css 以及优化

1. flex 布局 ???

答：阮一峰老师的 flex 文章，清晰易懂。

常用的 api 和两列、三列布局等等，对于我来说稍微有点难度。之前项目对兼容性高，基本没怎么用过 flex 布局。没用过的建议用一用，几个小时就会常见布局了。

1. 优化长列表滚动效果

没答上来，说了几个 js 的方案没答对点上。

面试官答曰：transition 优化动画效果，分层渲染

后面分析了一下，可以用 transform 进行强制分层，第二种可以用 content-visibility 将看不见的元素不渲染，设置值为 auto 即可。第三个是对于某些动画效果，可以用 will-change 作用在父元素上进行 gpu 加速，使用后删掉。

1. 响应式布局 ???

答：可能会涉及 css 函数，rem/em 区别，媒体查询…

1. 什么是 BFC？

答：块级格式化上下文，我布局总用！

问：什么会形成 BFC？它的作用是什么？

答：

• body 根元素

• 浮动元素：float 除 none 以外的值

• 绝对定位元素：position (absolute、fixed)

• display 为 inline-block、table-cells、flex

• overflow 除了 visible 以外的值 (hidden、auto、scroll)

作用嘛，为了布局???（千万别这么答哈，具体可以看下面文章）

推荐一篇 BFC 文章

vue 或 react 框架相关

1. vue 响应式原理以及双向绑定实现代码 ? ???

2. vue3 响应式原理，有什么不同？

3. vue 的 diff 算法思路，怎么对比节点？

4. vue 的 compile 实现？???

5. vue 如何自定义指令？具体的 api 写法？

6. vue3 对于 vue2 在性能上的优化（从 compile 和 runtime 两方面）？

7. react 有什么不同？了解 hooks 吗？

答：（虽然我不会，但我可以说点别的，比如 vue3 也有 hooks，它的使用和一些优点？）

1. 用过 TypeScript 吗？有什么优点，为什么用？具体的场景，使用 TypeScript 进行类型定义。

答：vue 项目多， ts 用的少，也用过，写前端监控 sdk 时，对接口进行类型校验，它像一个文档，每一个接口都有定义，后面再翻看瞬间理解意思。（强类型好处还有很多，但是个人觉得写起来超级麻烦，当然有人很喜欢很爽。）

1. vue 的 keep-alive 使用场景，以及原理？???

前端打包等工程化

1. webpack 和 rollup 使用？

2. tree-shaking 原理？???

3. webpack loader 和 plugin 怎么写？

4. 你对 vite 熟悉，和 webpack 区别？

5. 给 vite 做的贡献和在实际项目的使用？

• vite-electron-quick Git 地址

• 代码被 merge 的 pr 历史

1. 如何统一对错误进行捕获的？vue 的异步错误如何捕获？

• 自己写的 JS 错误捕获 SDK Git 地址

顺便求个 git 小???

浏览器及常见安全问题相关

1. 浏览器页面加载过程，越详细越好 ???

2. 浏览器缓存 ???

3. 跨域问题及处理 ???

4. v8 快数组慢数组，hidden class 或者其他模块？

5. xss 和 csrc 的意思？如何防范？???

答：美团的两篇文章摆出来，面试官直接问下一题！

数据结构与算法

这一块在笔试、面试的代码题中考核较多，其中常考的数据结构主要有：数组、链表、队列、栈、Set、Map、哈希表等，不同数据结构有不同的方法以及储存原理，这些算是技术岗的必备知识。算法部分主要分为两大块，排序算法与一些其他算法题。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

排序算法根据考频高低主要有：快速排序、归并排序、堆排序、冒泡排序、插入排序、选择排序、希尔排序、桶排序、基数排序、Timsort这十种，这类考核点要么是算法的时间、空间复杂度、稳定度，要么是直接手写代码，故在理解算法原理的同时，对JS语言版的排序算法代码也要加强记忆。

• 二叉树层序遍历
• B 树的特性，B 树和 B+树的区别
• 尾递归
• 如何写一个大数阶乘？递归的方法会出现什么问题？
• 把多维数组变成一维数组的方法
• 知道的排序算法 说一下冒泡快排的原理
• Heap 排序方法的原理？复杂度？
• 几种常见的排序算法，手写
• 数组的去重，尽可能写出多个方法
• 如果有一个大的数组，都是整型，怎么找出最大的前 10 个数
• 知道数据结构里面的常见的数据结构
• 找出数组中第 k 大的数组出现多少次，比如数组【1，2， 4，4，3，5】第二大的数字是 4，出现两次，所以返回 2
• 合并两个有序数组
• 给一个数，去一个已经排好序的数组中寻找这个数的位 置（通过快速查找，二分查找）

t这十种，这类考核点要么是算法的时间、空间复杂度、稳定度，要么是直接手写代码，故在理解算法原理的同时，对JS语言版的排序算法代码也要加强记忆。

• 二叉树层序遍历
• B 树的特性，B 树和 B+树的区别
• 尾递归
• 如何写一个大数阶乘？递归的方法会出现什么问题？
• 把多维数组变成一维数组的方法
• 知道的排序算法 说一下冒泡快排的原理
• Heap 排序方法的原理？复杂度？
• 几种常见的排序算法，手写
• 数组的去重，尽可能写出多个方法
• 如果有一个大的数组，都是整型，怎么找出最大的前 10 个数
• 知道数据结构里面的常见的数据结构
• 找出数组中第 k 大的数组出现多少次，比如数组【1，2， 4，4，3，5】第二大的数字是 4，出现两次，所以返回 2
• 合并两个有序数组
• 给一个数，去一个已经排好序的数组中寻找这个数的位 置（通过快速查找，二分查找）

[外链图片转存中…(img-BaBPSP4O-1714515737124)]