2020年之前你随便刷点东西都可以过面试，拿高薪，24年，你抢破脑袋，八股刷到人麻也不一定找到工作，25年，八股大幅度淘汰，现在问八股又多又体验不出什么东西，都在问场景题+项目了。
如果还有今年离职或者要跳的前端人，记住，一定要刷场景题，身边一圈人在前端面试中都被场景题坑了，不准备就去面试真的浪费时间！！！
所以今天整理一下4-7月面过的中大厂，一共163道场景题，还没有准备的可以直接拿上刷！DDDDD点击不要米，！！
正文
- 如何判断用户设备
- 将多次提交压缩成一次提交
- 介绍下navigator.sendBeacon方法
- 混动跟随导航（电梯导航)该如何实现
- 退出浏览器之前，发送积压的埋点数据请求，该如何做？
- 如何统计页面的long task（长任务）【热度：140]
- PerfoemanceObserver如何测量页面性能
- 移动端如何实现下拉滚动加载（顶部载）
- 判断页签是否为活跃状态
- 在网络带宽一定的情况下，切片上传感觉和整体上传消费的时间应该是差不多的这种说法正确吗？
- 大文件切片上传的时候，确定切片数量的时候，有那些考量因素
- 页面关闭时执行方法，该如何做
- 如何统计用户pv访问的发起请求数量
- 长文本溢出，展开/收起如何实现
- 如何实现鼠标拖拽
- 统计全站每一个静态资源加载耗时，该如何做
- 防止前端页面重复请求
- ResizeObserver作用是什么
- 要实时统计用户浏览器窗口大小，该如何做
- 当项目报错，你想定位是哪个commit引l入的错误的时，该怎么做
- 如何移除一个指定的commit
- 如何还原用户操作流程
- 可有办法将请求的调用源码地址包括代码行数也上报上去？
- 请求失败会弹出一个toast,如何保证批量请求失败，只弹出一个toast【热度：420)
- 如何减少项目里面if-else[热度:310】
- babel-runtime作用是啥[热度：200】
- 如何实现预览PDF文件
- 如何在划词选择的文本上添加右键菜单(划词：标滑动选择一组字符，对组字符进行操作）【热度：100】
- 富文本里面，是如何做到划词的(鼠标滑动选择一组字符，对组字符进行操作？【热度：100】
- 如何做好前端监控方案[热度：672】
- 如何标准化处理线上用户反馈的问题【热度：631]】
- px 如何转为rem[热度：545]
- 浏览器有同源策略，但是为何cdn请求资源的时候不会有跨域限制【热度：579】
- cookie可以实现不同域共享吗[热度：533】
- axios是否可以取消请求[热度：532】
- 前端如何实现折叠面板效果？
- dom里面，如何判定a元素是否是b元素的子元素[热度：400]
- 判断一个对象是否为空，包含了其原型链上是否有自定义数据或者方法。该如何判定？
- is如何判空？[空】包含了：空数组、空对象、空字符串、0、undefined、null、空map、空set,都属于为空的数据[热度:640】
- css实现翻牌效果[热度：116]
- flex:1代表什么[热度：400】
- 一般是怎么做代码重构的
- 如何清理源码里面没有被应用的代码，主要是JS、TS.CSS代码[热度：329】
- 前端应用如何做国际化？【热度：199】
- 应用如何做应用灰度发布【热度：247】
- [微前端]为何通常在微前端应用隔离，不选择iframe方案【热度：280】
- [微前端]Qiankun是如何做JS隔离的[热度：228]
- [微前端]微前端架构一般是如何做JavaScript隔离
- [React]循环渲染中为什么推荐不用index做key[热度：320】
- [React]如何避免使用context的时候，引起整个挂载节点树的重新渲染[热度：420】
- 前端如何实现截图？
- 当QPS达到峰值时,该如何处理？
- js 超过 Number最大值的数怎么处理？
- 使用同一个链接，如何实现PC打开是web应用、手机打开是-个H5应用？【腾讯二面】
- 如何保证用户的使用体验【字节一面】
- 如何解决页面请求接口大规模并发问题【必会】
- 设计一套全站请求耗时统计工具
- 大文件上传了解多少[百度一面】
- H5如何解决移动端适配问题【美团一面】
- 站点一键换肤的实现方式有哪些？[美团一面】
- 如何实现网页加载进度条？【百度一面】
- 常见图片懒加载方式有哪些？【京东一面】
- cookie构成部分有哪些[百度一面】
- 扫码登录实现方式[腾讯一面]
- DNS协议了解多少[字节一面】
- 函数式编程了解多少？[京东一面】
- 前端水印了解多少？【腾讯一面】
- 什么是领域模型【必会】
- 一直在window上面挂东西是否有什么风险【百度一面】
- 深度SEO优化的方式有哪些，从技术层面来说
- 小程序为什么会有两个线程【腾讯一面】
- web应用中如何对静态资源加载失败的场景做降级处理
- html中前缀为data-开头的元素厘性是什么？
- 移动端如何实现上拉加载，下拉刷新？【字节一面】
- 如何判断dom元素是否在可视区域[字节一面】
- 前端如何用canvas来做电影院选票功能[美团一面】
- 如何通过设置失效时间清除本地存储的数据？【腾讯二面】
- 如果不使用脚手架，如果用webpack构建一个自己的react应用
- 用nodejs实现一个命令行工具，统计输入目录下面指定代码的行数
- package,json里面sideEffects厘性的作用是啥【必会]
- script标签上有那些厘性，分别作用是啥？【必会】
- 为什么SPA应用都会提供一个hash路由，好处是什么？
- [React]如何进行路由变化监听[字节一面】
- 单点登录是是什么，具体流程是什么【腾讯一面】
- web网页如何禁止别人移除水印【百度一面】
- 用户访问页面白屏了，原因是啥，如何排查？
- [代码实现]Js中如何实现大对象深度对比
- 如何理解数据驱动视图，有哪些核心要素？【腾讯二面】
- vue-cli都做了哪些事儿，有哪些功能?
- JS执行100万个任务，如何保证浏览器不卡顿？【百度一面】
- JS放在head里和放在 body里有什么区别？
- Eslint代码检查的过程是啥？【必会】
- 虚拟混动加载原理是什么，用Js代码简单实现一个虚拟滚动加加载
- [React]react-router和原生路由区别
- html的行内元素和块级元素的区别【京东一面】
- 介绍-下 requestIldleCallback api
- documentFragment api是什么，有哪些使用场景？[必会]
- git pull和 git fetch有啥区别?
- 前端如何做页面主题色切换【腾讯一面】
- 前端视角-如何保证系统稳定性[字节一面]
- 如何统计长任务时间、长任务执行次数【腾讯二面】
- V8里面的T是什么？[京东一面]
- 用Js写一个cookies解析函数，输出结果为一个对象
- vue中Scoped Styles是如何实现样式隔离的，原理是啥
- 样式阿商方式有哪些[字节一面】
- 在JS中，如何解决递归导致栈溢出问题？
- 站点如何防止爬虫？【百度一面】
- ts项目中，如何使用node modules里面定义的全局类型包到自己项目src下面使用？[百度二面】
- 不同标签页或窗口间的【主动推送消息机制】的方式有哪些？（不借助服务端）
- [React】在react项目开发过程中，是否可以不用react router使用浏览器原生history路由来组织页面路由？
- 在表单校验场景中，如何实现页面视口滚动到报错的位置
- 如何一次性渲染十万条数据还能保证页面不卡顿【百度二面】
- [webpack】打包时hash码是如何生成的【必会】
- 如何从0到1搭建前端基建【京东一面】
- 你在开发过程中，使用过哪些TS的特性或者能力？【美团一面】
- JS的加载会阻塞浏览器渲染吗？【百度一面】
- 浏览器对队头阻寒有什么优化？【百度一面）
- Webpack项目中通过script标签引I入资源，在项目中如何处理？
- 应用上线后，怎么通知用户刷新当前页面？【腾讯一面】
- Eslint 代码检查的过程是啥？
- HTTP是一个无状态的协议，那么Web应用要怎么保持用户的登录态呢？
- 如何检测网页空闲状态（一定时间内无操作【百度二面】
- 为什么Vite速度比Webpack快?
- 列表分页，快速翻页下的竟态问题【百度二面】
- JS执行100万个任务，如何保证浏览器不卡顿？
- git 仓库迁移应该怎么操作
- 如何禁止别人调试自己的前端页面代码？【字节二面】
- web系统里面，如何对图片进行优化？【必会】
- OAuth2.0是什么登录方式
- 单点登录是如何实现的？
- 常见的登录鉴权方式有哪些？
- 需要在跨域请求中携带另外一个域名下的Cookie该如何操作？
- vite和webpack在热更新上有啥区别？
- 封装一个请求超时，发起重试的代码
- 前端如何设置请求超时时间timeout【必会】
- nodejs 如何充分利用多核CPU?[字节二面】
- 后端一次性返回树形结构数据，数据量非常大,前端该如何处理？
- 你认为组件封装的一些基本准则是什么？
- 页面加载速度提升(性能优化)应该从哪些反向来思考？
- 前端日志埋点 SDK设计思路
- token进行身份验证了解多少？[腾讯一面】
- 在前端应用如何进行权限设计？【字节二面】
- 【低代码】代码平台一般泊染是如何设计的？
- 【低代码】代码平台一般底层协议是怎么设计的
- [Webpack】有哪些优化项目的手段?
- IndexedDB存储空间大小是如何约束的？
- 浏览器的存储有哪些[腾讯一面】
- [Webpack】如何打包运行时chunk，且在项自工程中如何去加载这个运行时chunk？
- 为何现在市面上做表格泊染可视化技术的，大多数都是canvas，而很少用svg的？
- 在你的项目中，使用过哪些webpack plugin,说一下他们的作用
- 在你的项目中，使用过哪些webpackloader,说一下他们的作用
- [React】如何避免不必要的染？【美团一面】
- 全局样式命名冲突和样式盖问题怎么解决？
- [React]如何实现专场动画?
- [React】从React层面上，能做的性能优化有哪些？
- [VUE】中为何不要把v-f 和v-for同时用在同一个元素上，原理是什么?
- 将静态资源缓存在本地的方式有哪些？
- SPA首屏加载速度慢的怎么解:决
- axios是如何区分是nodejs环境还是浏览器环境的?
- 如何拦截 web应用的请求
- 前端有哪些跨页面通信方式?
- H5下拉刷新如何实现？
- 如何修改第三方npm包？
总结
其中涵盖部分大厂和中厂的面试内容，没有做很好的分类，如果最近有面试的话可以参考下，以上内容都有对应答案 可以DDDDDDD点击不要米，，，最后祝大家在2025年的下旬都可以找到心仪的工作。
