去面几家前端大厂，你就会发现，以前纠结八股文
背没背全，思路可能偏了。
当你能流利说出 Vue
和
React 的各种 API，却卡在“React 的 useEffect 与 Vue 的 watch 在
依赖追踪机制上有什么根本不同”时，会突然醒悟——“会用”和“懂原理”之间，隔着很深的一道沟。面试官真正想听的，是你能否讲清楚虚拟 DOM Diff
的具体
算法步骤，或者从
事件循环的角度解释为什么 Vue 的
nextTick 可以拿到更新后的 DOM。
你反复演练的“项目介绍”，在面试官听来可能只是功能罗列。当你介绍完管理后台的各种页面，却被问到“如果这个基于
Webpack 的项目构建时间从 30 秒恶化到 3 分钟，你的排查思路是什么？”时，你会明白——他们关心的不是你“做过什么”，而是你“如何思考和解决未知问题”。他们期待你展现
工程化思维：为什么选
Vite 而不是 Webpack？首屏加载慢，是从代码拆分、资源压缩，还是服务端渲染入手？监控到线上脚本错误率飙升，你的排查链路是怎样的？
大厂那些“造火箭”的场景题，核心逻辑很简单：他们需要能系统性解决复杂问题的人，而不是只写页面的执行者。一道“设计前端可视化
大屏的
实时数据更新方案”，考的不是你会用哪个图表库，而是你如何平衡“实时性”、“性能开销”、“
浏览器兼容性”和“异常降级”。你的价值，体现在技术选型的权衡与落地细节中。
所以，真正有效的准备，不如把下面场景题再背一遍：
- 1.如何判断用户设备
- 2.将多次提交压缩成一次提交
- 3.介绍下navigator.sendBeacon方法
- 4.混动跟随导航（电梯导航）该如何实现
- 5退出浏览器之前，发送积压的埋点数据请求，该如何做？
- 6.如何统计页面的long task（长任务）【热度：140】
- 7.PerfoemanceObserver如何测量页面性能
- 8.移动端如何实现下拉滚动加载（顶部加载）
- 9.判断页签是否为活跃状态
- 10.在
网络带宽一定的情况下，切片上传感觉和整体上传消费的时间应该是差不多的这种说法正确吗？ - 11.大文件切片上传的时候，确定切片数量的时候，有那些考量因素
- 12.页面关闭时执行方法，该如何做
- 13.如何统计用户 pv 访问的发起请求数量
- 14.长文本溢出，展开/收起如何实现
- 15.如何实现鼠标拖拽
- 16.统计全站每一个静态资源加载耗时，该如何做
- 17.防止前端页面重复请求
- 18.
ResizeObserver作用是什么
- 19.要实时统计用户浏览器窗口大小，该如何做
- 20.当项目报错，你想定位是哪个commit引入的错误的时，该怎么做
- 21.如何移除一个指定的 commit
- 22.如何还原用户操作流程
- 23.可有办法将请求的调用源码地址包括代码行数也上报上去?
- 24.请求失败会弹出一个 toast,如何保证批量请求失败，只弹出一个 toast【热度: 420】
- 25.如何减少项目里面 if-else【热度:310】
- 26.
babel-runtime 作用是啥【热度: 200】 - 27.如何实现预览 PDF 文件
- 28.如何在划词选择的文本上添加右键菜单(划词:标滑动选择一组字符，对组字符进行操作)【热度:100】
- 29.富文本里面，是如何做到划词的(鼠标滑动选择一组字符，对组字符进行操作)?【热度:100】
- 30.如何做好前端监控方案【热度:672】
- 31.如何标准化处理线上用户反馈的问题【热度: 631】
- 32.px 如何转为 rem【热度: 545】
- 33.浏览器有
同源策略，但是为何 cdn 请求资源的时候不会有跨域限制【热度:579】 - 34.cookie 可以实现不同域共享吗【热度: 533】
- 35.axios 是否可以取消请求【热度: 532】
- 36.前端如何实现折叠面板效果?
- 37.dom 里面，如何判定a元素是否是b元素的子元素【热度: 400】
- 38.判断一个对象是否为空，包含了其
原型链上是否有自定义数据或者方法。 该如何判定? - 39.is如何判空?「空」包含了:空数组、空对象、空字符串、0、undefined、null、空 map、空 set,都属于为空的数据【热度:640】
- 40.css 实现翻牌效果【热度: 116】
- 41.flex:1代表什么【热度: 400】
- 42.一般是怎么做
代码重构的 - 43.如何清理源码里面没有被应用的代码，主要是 JS、TS.CSS 代码【热度:329】
- 44.前端应用 如何做国际化?【热度:199】
- 45.应用如何做应用灰度发布
【热度:240】 - 46.「微前端
]为何通常在 微前端 应用隔离
，不选择 iframe 方案【热度: 280】 - 47.[微前端]
Qiankun 是如何做 JS 隔离的【热度: 228】 - 48.[微前端]微前端架构一般是如何做 JavaScript隔离的？
- 49.[React]循环渲染中 为什么推荐不用 index 做 key【热度:320】
- 50.[React]如何避免使用 context 的时候，引起整个挂载
节点树的重新渲染【热度: 420】 - 51.前端如何实现截图?
- 52.当QPS达到峰值时,该如何处理?
- 53.js 超过 Number 最大值的数怎么处理?
- 54.使用同一个链接， 如何实现 PC 打开是 web 应用、手机打开是-个 H5 应用?【腾讯二面】
- 55.如何保证用户的使用体验【字节一面】
- 56.如何解决页面请求接口大规模并发问题 【必会】
- 57.设计一套全站请求耗时统计工具
- 58.大文件上传了解多少 【百度一面】
- 59.H5 如何解决移动端适配问题 【美团一面】
- 60.站点一键换肤的实现方式有哪些?【美团一面】
- 61.如何实现网页加载进度条?【百度一面】
- 62.常见图片懒加载方式有哪些?【京东一面】
- 63.cookie 构成部分有哪些【百度一面】
- 64.扫码登录实现方式 【腾讯一面]
- 65.DNS 协议了解多少【字节一面】
- 66.
函数式编程了解多少?【京东一面】 - 67.前端水印了解多少?【腾讯一面】
- 68.什么是
领域模型【必会】 - 69.一直在 window 上面挂东西是否有什么风险【百度一面】
- 70.深度 SEO 优化的方式有哪些，从技术层面来说
- 71.小程序为什么会有两个
线程 【腾讯一面】 - 72.web 应用中如何对静态资源加载失败的场景做降级处理
- 73.html 中前缀为>
- 81.script 标签上有那些厘性，分别作用是啥?【必会】
- 82.为什么
SPA 应用都会提供一个 hash 路由，好处是什么? - 83.[React]如何进行路由变化监听【字节一面】
- 84.
单点登录是是什么， 具体流程是什么【腾讯一面】 - 85.web 网页如何禁止别人移除水印【百度一面】
- 86.用户访问页面白屏了， 原因是啥， 如何排查?
- 87.[代码实现]JS 中如何实现大对象深度对比
- 88.如何理解数据驱动视图， 有哪些核心要素?【腾讯二面】
- 89.vue-cli
都做了哪些事儿，有哪些功能? - 90.JS 执行 100 万个任务， 如何保证浏览器不卡顿?【百度一面】
- 91.JS 放在 head 里和放在 body 里有什么区别?
- 92.Eslint
代码检查的过程是啥?【必会】 - 93.虚拟混动加载原理是什么， 用JS 代码简单实现一个虚拟 滚动加加载
- 94.[React]
react-router和原生路由区别 - 95.html的
行内元素和
块级元素的区别【京东一面】 - 96.介绍-下 requestldleCallback api
- 97.documentFragment api 是什么，有哪些使用场景?【必会】
- 98. git pull
和
git fetch 有啥区别? - 99.前端如何做 页面主题色切换【腾讯一面】
- 100.前端视角-如何保证系统稳定性【字节一面]
- 101.如何统计长任务时间、长任务执行次数【腾讯二面】
- 102.V8 里面的 JT 是什么?【京东一面]
- 103.用 JS 写一个 cookies
解析函数， 输出结果为一个对象 - 104.vue 中 Scoped Styles 是如何实现
样式隔离的， 原理是啥 - 105.样式阿商方式有哪些【字节一面】
- 106.在JS 中，如何解决递归导致栈溢出
问题? - 107.站点如何防止爬虫?【百度一面】
- 108.ts 项目中，如何使用 node modules 里面定义的全局类型包到自己项目 src 下面使用?【百度二面】
- 109.不同标签页或窗口间的 【主动推送消息机制】 的方式有哪些?(不借助
服务端) - 110.【React】在 react 项目开发
过程中，是否可以不用
react router使用浏览器原生 history 路由来组织页面路由? - 111.在表单校验场景中，如何实现页面视口滚动到报错的位置
- 112,如何一次性渲染十万条数据还能保证页面不卡顿【百度二面】
- 113.【webpack】打包时 hash 码是如何生成的【必会】
- 114.如何从 0 到1搭建前端基建【京东一面】
- 115.你在开发过程中， 使用过哪些 TS 的特性或者能力?【美团一面】
- 116.JS 的加载会阻塞浏览器渲染吗?【百度一面】
- 117.浏览器对队头阻骞有什么优化?【百度一面)】
- 118.Webpack 项目中通过 script 标签引入资源，在项目中如何处理?
- 119.应用上线后， 怎么通知用户刷新当前页面?【腾讯一面】
- 120.Eslint 代码检查的过程是啥?
- 121.HTTP是一个无状态的协议，那么Web应用要怎么保持用户的登录态呢?
- 122.如何检测网页空闲状态(一定时间内无操作)【百度二面】
- 123.为什么 Vite 速度比 Webpack 快?
- 124.列表分页， 快速翻页下的竟态问题【百度二面】
- 125.JS 执行 100 万个任务， 如何保证浏览器不卡顿?
- 126.git 仓库迁移应该怎么操作
- 127.如何禁止别人调试自己的前端页面代码?【字节二面】
- 128.web 系统里面， 如何对图片进行优化?【必会】
- 129.OAuth2.0 是什么登录方式
- 130.单点登录是如何实现的?
- 131.常见的
登录鉴权方式有哪些? - 132.需要在
跨域请求中携带另外一个域名下的 Cookie 该如何操作? - 133.
vite 和
webpack 在热更新
上有啥区别? - 134.封装一个请求超时， 发起重试的代码
- 135.前端如何设置请求超时时间 timeout【必会】
- 136.nodejs 如何充分利用多核 CPU?【字节二面】
- 137.后端一次性返回树形结构数据，数据量非常大,前端该如何处理?
- 138.你认为组件封装的一些基本准则是什么?
- 139.页面加载速度提升(
性能优化)应该从哪些反向来思考? - 140.前端日志埋点 SDK 设计思路
- 141.token 进行身份验证了解多少?【腾讯一面】
- 142.在前端应用如何进行权限设计?【字节二面】
- 143.【
低代码】代码平台一般洎染是如何设计的? - 144.【低代码】代码平台一般底层协议是怎么设计的
- 145.【Webpack】有哪些优化项目的手段?
- 146.IndexedDB 存储空间大小是如何约束的?
- 147.浏览器的存储有哪些【腾讯一面】
- 148.【Webpack】如何打包运行时 chunk，且在项自工程中如何去加载这个运行时 chunk ?
- 149.为何现在市面上做表格洎染可视化技术的，大多数都是canvas ，而很少用 svg 的?
- 150.在你的项目中， 使用过哪些 webpack plugin,说一下他们的作用
- 151.在你的项目中， 使用过哪些 webpack loader,说一下他们的作用
- 152.【React】如何避免不必要的染?【美团一面】
- 153.全局样式命名冲突和样式盖问题怎么解决?
- 154.【React】如何实现专场动画?
- 155.【React】从 React 层面上， 能做的性能优化有哪些?
- 156.【VUE】中为何不要把 v-if 和 v-for 同时用在同一个元素上，原理是什么?
- 157.将静态资源缓存在本地的方式有哪些?
- 158.SPA首屏加载速度慢的怎么解:决
- 159.axios 是如何区分是 nodejs 环境还是 浏览器环境的?
- 160.如何拦截 web 应用的请求
- 161.前端有哪些跨页面通信方式?
- 162.H5下拉刷新如何实现？
- 163.如何修改第三方npm包？
以上： https://github.com/encode-studio-fe-coder/natural_traffic/wiki/scan_material3
