一月求职市场还没完全热起来，但我已经先冲了——前后密集面了8家前端。身边同事还在琢磨要不要跳槽、简历怎么改得更漂亮，我揣着自己做过的项目经验，直接上了战场。从初创公司的一轮技术面，到大厂那种三轮连闯，问的问题五花八门，好多真题现在想起来还印象深刻：比如“flex布局怎么实现三栏等高，兼容性要考虑到IE11”“Vue的响应式原理具体是怎么实现的，有没有做过相关的手写实现”，还有实际工作里的坑，像“项目里遇到过哪些性能优化问题，具体怎么解决的，有没有量化过优化效果”。
本来就是想趁这个时候练练兵，没想到面完一圈下来，突然就摸清了自己的底——原来不知不觉间，这些前端相关的问题我都能接住。这8场面试哪儿是考试啊，更像是照镜子，把我这些年在前端上攒的底气都照出来了，之前还模模糊糊觉得自己还行，现在是真真切切感受到：我好像是有点强。对了，这些面试遇到的真题我都整理下来了，大家码住👇
https://github.com/encode-studio-fe-coder/natural_traffic/wiki/scan_material
- 1.请求失败会弹出一个 toast,如何保证批量请求失败，只弹出一个 toast
- 2.如何减少项目里面 if-else
- 3.babel-runtime 作用是啥
- 4.如何实现预览 PDF 文件
- 5.如何在划词选择的文本上添加右键菜单(划词:鼠标滑动选 择一组字符，对组字符进行操作)
- 6.富文本里面，是如何做到划词的(鼠标滑动选择一组字 符，对组字符进行操作)?
- 7.如何做好前端监控方案
- 8.如何标准化处理线上用户反馈的问题
- 9.px 如何转为 rem
- 10.浏览器有同源策略，但是为何 cdn 请求资源的时候不会有跨域限制
- 11.cookie 可以实现不同域共享吗
- 12.axios 是否可以取消请求
- 13.前端如何实现折善面板效果?
- 14.dom 里面，如何判定a元素是否是b元素的子元
- 15.判断一个对象是否为空，包含了其原型链上是否有自定义数据或者方法。该如何判定?
- 16.js如何判空?「空」包含了:空数组、空对象、空字符 串、0、undefined、nul、空 map、空set,都属于为空
- 数据
- 17.css 实现翻牌效果
- 18.flex:1代表什么
- 19.一般是怎么做代码重构的
- 20.如何清理源码里面没有被应用的代码，主要是JS、TS、 CSS 代码
- 21.前端应用 如何做国际化?
- 22.应用如何做应用灰度发布
- 23.[微前端] 为何通常在 微前端 应用隔离不选择 iframe 万案
- 24.[微前端] Qiankun 是如何做 JS 隔离的
- 25.「微前端]微前端架构一般是如何做 JavaScript隔离
- 26.[React]循环渲染中 为什么推荐不用 index 做 key
- 27.[React]如何避免使用 context 的时候，引起整个挂载节 点树的重新渲染!
- 28.前端如何实现截图?
- 29.当QPS达到峰值时,该如何处理?
- 30.js 超过 Number 最大值的数怎么处理?
- 31.使用同一个链接，如何实现 PC 打开是 web 应用、手机打 开是一个 H5 应用?
- 32.如何保证用户的使用体验
- 33.如何解决页面请求接口大规模并发问题
- 34.设计一套全站请求耗时统计工具
- 35.大文件上传了解多少
- 36.H5 如何解决移动端适配问题
- 37.站点一键换肤的实现方式有哪些?
- 38.如何实现网页加载进度条?
- 39.常见图片懒加载方式有哪些?
- 40.cookie 构成部分有哪些
- 41.扫码登录实现方式
- 42.DNS 协议了解多少
- 43.函数式编程了解多少?
- 44.前端水印了解多少?
- 45.什么是领域模型
- 46.一直在 window 上面挂东西是否有什么风险
- 47.深度 SEO优化的方式有哪些，从技术层面来说
- 48.小程序为什么会有两个线程
- 49.web 应用中如何对静态资源加载失败的场景做降级处理
- 50.html中前缀为>
JavaScript
- 不会冒泡的事件有哪些？
- mouseEnter 和mouseOver 有什么区别?
- MessageChannel是什么，有什么使用场景?
- async、 await 实现原理
- Proxy能够监听到对象中的对象的引用吗？
- 如何让 var [a, b] = {a: 1, b: 2} 解构赋值成功?
- 下面代码会输出什么？
- 描述下列代码的执行结果
- 什么是作用域链？
- bind、call、apply有什么区别?如何实现一个bind?
- common.js和es6中模块引l入的区别?
- 说说vue3 中的响应式设计原理
- script标签放在header里和放在body底部里有什么区别？
- 下面代码中，点击”+3”按钮后，age的值是什么？
- Vue中，created和mounted两个钩子之间调用时间差值受什么影响？
- vue中，推荐在哪个生命周期发起请求?
- 不会冒泡的事件有哪些？
- mouseEnter 和mouseOver 有什么区别?
- 为什么Node在使用es module时必须加上文件扩展名?
- package.json文件中的 devDependencies和dependendes对象有什么区别?
- React Portals 有什么用?
- react 和 react-dom是什么关系?
- MessageChannel是什么，有什么使用场景？
- React 中为什么不直接使用requestIdleCallback?
- 为什么react需要 fiber 架构，而Vue 却不需要？
CSS
- css 中的 animation、transition,transform有什么区别?
- 怎么做移动端的样式适配？
- 相邻的两个inline-block节点为什么会出现间隔，该何解决？
- grid网格布局是什么？
- CSS3新增了哪些特性？
- 怎么使用cSS3实现动画？
- 怎么理解回流跟重绘？什么场景下会触发？
- 什么是响应式设计？响应式设计的基本原理是什么？如何进行实现？
- 如果使用CSs提高页面性能？
- 如何实现单行/多行文本溢出的首略样式？
- 如何使用css完成视差滚动效果?
- 怎么使用CSS 如何画一个三角形
- 说说对CSS 工程化的理解
- 怎么触发BFC，BFC有什么应用场景？
- 单行文本怎么实现两端对齐？
- 说说你对 CSS 模块化的理解
- CSS 模块化的实现方式
- 怎么让Chrome支持小于12px 的文字?
- 怎么让Chrome支持小于12px的文字?
- flexbox(弹性盒布局模型)是什么，适用什么场景？
- 如何实现两栏布局，右侧自适应？三栏布局中间自适应呢？
- 设备像素、css像素、设备独立像素、dpr、ppi 之间有什么区别?
HTML
- 什么是DOM和 BOM?
- 简单描述从输入网址到页面显示的过程
- 一台设备的dpr，是否是可变的？
- 前端效如何选择图片的格式？
- 前端跨页面通信，你道哪些方法？
- 说说你对Dom树的理解
- 行内元素有哪些？块级元素有哪些？空(void)元素有那些？
- htm和css中的图片戏与渲染规则是什么样的？
- title与h1的区别、b与strong的区别、与em的区别?
- script标签为什么建议放在 body标签的底部(defer、async)
- 说说你对 SSG 的理解
- 什么是HTML5,以及和HTML的区别是什么?
- 什么是渐进增虽和优雅降级？
- Node 和Element 是什么关系?
- 导致页面加载白屏时间长的原因有哪些，怎么进行优化？
- 如何控制input输入框的输入字数？
- 渐进式jpg有了解过吗？
- 假设我要上传图片，怎么在选择图片后，通过浏览器预览待上传的图片？
React
- 下面代码中，点击”+3”按钮后，age的值是什么？
- React Portals 有什么用?
- react和react-dom是什么关系?
- React 中为什么不直接使用 requestIdleCallback?
- 为什么react 需要 fiber 架构，而Vue 却不需要?
- 子组件是一个Portal，发生点击事件能冒泡到父组件吗？
- React 为什么要废弃componentWillMount、componentWillReceiveProps、componentWillUpdate这三个生命周期钩子？它们有哪些问题呢?React又是如何解决的呢？
- 说说React render方法的原理?在什么时候会被触发?
- 说说React事件和原生事件的执行顺序
- 说说对受控组件和非受控组件的理解，以及应用场景？
- 你在React项目中是如何使用Redux的？项目结构是如何划分的?
- 说说对Redux中间件的理解？常用的中间件有哪些？实现原理？
- 说说你对Redux的理解？其工作原理？
- 说说你对immutable的理解？如何应用在react项目中?
- 说说React Jsx转换成真实DOM过程?
- 说说你在Reac项目是如何捕获错误的?
- 说说React服务端宣染怎么做？原理是什么？
- ReactFiber是如何实现更新过程可控?
- Fiber 为什么是React 性能的一个飞跃？
- setState是同步，还是异步的?
Vue
- Vue 有了数据响应式，为何还要diff？
- vue3为什么不需要时间分片?
- vue3为什么要引入Composition API？
- 谈谈 Vue 事件机制,并手写on、on、on、off、emit、emit、 emit、once
- computed计算值为什么还可以依赖另外一个computed计算值?
- 说一下vm.$set 原理
- 怎么在Vue 中定义全局方法?
- Vue中父组件怎么监听到子组件的生命周期？
- vue组件里写的原生addEventListeners监听事件，要手动去销毁吗？为什么?
- 说说vue3中的响应式设计原理
- Vue中，created和mounted两个钩子之间调用时间差值受什么影响？
- vue中，推荐在哪个生命周期发起请求？
- 为什么react 需要 fiber 架构,而 Vue 却不需要?
- SPA(单页应用)首屏加戏速度慢怎么解决?
- 说下Vite的原理
- Vue2.0为什么不能检查数组的变化，该怎么解决？
- 说说Vue 页面渲染流程
- vue中computedfDwatch区别
- vuex中的辅助函数怎么使用？
- 如果使用Vue3.0实现一个Modal，你会怎么进行设计?
- Vue 3.0中Treeshaking特性是什么，并举例进行说明?
- Vue3.0所采用的Composition Api与Vue2.x使用的Options Api有什么不同?
- Vue3.0性能提升主要是通过哪几方面体现的？
- Vue3.0的设计目标是什么？做了哪些优化?
- 你是怎么处理vue项目中的错误的？
算法
- 最大的钻石
- 举例说明你对尾递归的理解，以及有哪些应用场景
- 去除字符串中出现次数最少的字符，不改变原字符串的顺序。
- 请手写”快速排序”
- 洗牌算法
- 什么是尾调用优化和尾递归？
- 合并K个升序链表
- 什么是时间复杂度？
- 请手写“基数排序”
TypeScript
- 说说对 TypeScript 中命名空间与模块的理解?区别?
- 说说你对 typescript 的理解?与javascript 的区别?
- Typescript中泛型是什么?
- TypeScript中有哪些声明变量的方式？
- 什么是Typescript的方法重载？
- 请实现下面的 sleep 方法
- typescript 中的 is 关键字有什么用?
- TypeScrip支持的访问修饰符有哪些?
- 请实现下面的 myMap 方法
- 请实现下面的 treePath方法
- 请实现下面的 product 方法
- 请实现下面的 myAll 方法
- 请实现下面的 sum 方法
- 请实现下面的 mergeArray 方法
- 实现下面的 firstSingleChar 方法
- 实现下面的 reverseWord 方法
- 如何定义一个数组，它的元紊可能是字符串类型，也可能是数值类型？
- 请补充 objToArray数
注：篇幅所限本文就只贴一下题目了，文中的前端场景面试题汇总PDF已经打包完毕，希望对大家有帮助：
https://github.com/encode-studio-fe-coder/natural_traffic/wiki/scan_material
一月这8场前端面试跑完，心里最后一点没底的顾虑彻底没了。面试的时候不管是基础知识点，还是复杂的业务问题拆解开分析，跟面试官聊技术的时候也能跟上节奏，甚至像“跨端项目里，小程序和H5之间的通信有哪些方案，各有什么优缺点”这种难点真题，我给的解决方案面试官还挺认可。
这一圈面下来我算是看明白了：平时扎实学的技术、做项目攒的经验，还有总忍不住研究新东西的习惯，早就帮我把竞争力搭起来了。这8家公司问的基本覆盖了前端核心的东西，我都能从容应对，这份“强”真不是我自吹，是实打实面出来的底气。除了真题，我还把常考知识点的答题思路也梳理好了，搭配真题一起看效率更高，想要的随时说。接下来不管是挑个合心意的offer，还是继续在前端这条路上深耕，我都更有谱了——只要保持这个节奏往下走，我的竞争力只会越来越足。
