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

• 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 的意思？如何防范？???

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

• xss 防范

• csrf 防范

跨平台技术

1. electron 使用，如何实现小托盘功能？

2. flutter 的 widget stateFullWidget stateLessWidget 区别？

3. js Bridge 的原理 ？???

4. flutter 的渲染引擎？

网络相关

1. dns 相关，dns 服务器是什么，如何查询 dns 的？???

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。**

[外链图片转存中…(img-BKw84CTs-1715063104593)]

[外链图片转存中…(img-WQMwOZYz-1715063104593)]

[外链图片转存中…(img-2xMIn4Y2-1715063104594)]

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！