面试内容的淘汰就好像现在的前端求职者，原地踏步的后果基本只有淘汰两个字，与时俱进又要学习很多的新东西，这个技术岗不干也罢！！！
面试中大多数人反馈都在说，场景题+笔试，是现在前端面试的常态化，场景题还好，整理了一些，感觉比刷八股好太多了，就烦手写，举个例子
面试官笑眯眯的进来，反手让你手撕一下hard，别说面试凉了，天简直都塌了，今天也整理了一些手撕，算是给大家一波分享，金九银十前端竞争季，努力吧！！
场景题：
1.如何判断用户设备
2.将多次提交压缩成一次提交
3.介绍下navigator.sendBeacon方法
4.混动跟随导航（电梯导航）该如何实现
5退出浏览器之前，发送积压的埋点数据请求，该如何做？
6.如何统计页面的long task（长任务）[热度：140】
7.PerfoemanceObserver如何测量页面性能
移动端如何实现下拉滚动加载（顶部加载）
9.判断页签是否为活跃状态
10.在网络带宽一定的情况下，切片上传感觉和整体上传消费的时间应该是差不多的这种说法正确吗？
11.大文件切片上传的时候，确定切片数量的时候，有那些考量因素
12.页面关闭时执行方法，该如何做
13.如何统计用户pv访问的发起请求数量
14.长文本溢出，展开/收起如何实现
15.如何实现鼠标拖拽
16.统计全站每一个静态资源加载耗时，该如何做
17.防止前端页面重复请求
18.ResizeObserver作用是什么
19.要实时统计用户浏览器窗口大小，该如何做
20.当项目报错，你想定位是哪个commit引l入的错误的时，该怎么做
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.应用如何做应用灰度发布【热度：247】
46.[微前端]为何通常在微前端应用隔离，不选择iframe方案[热度：280】
47.[微前端]Qiankun是如何做Js隔离的[热度：228】
48.[微前端]微前端架构一般是如何做JavaScript隔离
49.[React]循环渲染中为什么推荐不用index做 key[热度：320】
50.[React]如何避免使用context的时候，引起整个挂载节点树的重新渲染[热度：420】
51.前端如何实现截图？
52.当QPS达到峰值时，该如何处理？
53js超过 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中前缀为 data-开头的元素厘性是什么？
74.移动端如何实现上拉加载，下拉刷新？[字节一面】
75.如何判断dom元素是否在可视区域【字节一面】
76.前端如何用canvas来做电影院选票功能【美团一面】
77.如何通过设置失效时间清除本地存储的数据？【腾讯二面】
78.如果不使用脚手架，如果用webpack构建一个自己的react应用
79.用nodejs实现一个命令行工具，统计输入目录下面指定代码的行数
80.package,json里面 sideEffects厘性的作用是啥【必会]
81.script标签上有那些厘性，分别作用是啥？【必会】
82.为什么SPA应用都会提供一个hash路由，好处是什么？
83.[React]如何进行路由变化监听[字节一面】
84.单点登录是是什么，具体流程是什么【腾讯一面】
85.web网页如何禁止别人移除水印【百度一面】
86.用户访问页面白屏了，原因是啥，如何排查？
87.[代码实现]JS中如何实现大对象深度对比
88.如何理解数据驱动视图，有哪些核心要素？【腾讯二面】
89.vue-cdli都做了哪些事儿，有哪些功能？
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里面的T是什么？【京东一面]
103.用s写一个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.0Auth2.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.在你的项目中，使用过哪些webpackloader,说一下他们的作用
152.[React】如何避免不必要的染？【美团一面】
153.全局样式命名冲突和样式盖问题怎么解决？
154.[React】如何实现专场动画？
155. [React】从React层面上，能做的性能优化有哪些？
156.[VUE】中为何不要把v-f 和v-for同时用在同一个元素上，原理是什么?
157.将静态资源缓存在本地的方式有哪些？
158.SPA首屏加载速度慢的怎么解决
159.axios是如何区分是nodejs环境还是浏览器环境的?
160.如何拦截web应用的请求
161.前端有哪些跨页面通信方式？
162.H5下拉刷新如何实现？
163.如何修改第三方npm包？
以上 是一些场景题的整理，答案就不一一写了，太多了
编程手写题
1.使用Promise实现红绿灯交替重复亮
2.bind、call、apply有什么区别？如何实现一个bind?
3.利用字符重复出现的次数，编写一种方法，实现基本的字符串压缩功...
4.说说new操作符具体干了什么？
5.如何实现上拉加载，下拉刷新？
6.大文件怎么实现断点续传？
端面试指南
7.什么是防抖和节流，以及如何编码实现？
8.说说ajax的原理，以及如何实现？
9.深拷贝浅拷贝有什么区别？怎么实现深拷贝？
10.用js实现二叉树的定义和基本操作
11.如何实现一个轮播图组件？
12.写出一个函数trans，将数字转换成汉语的输出，输入为不超过1000...
13.将下面的数组转成树状结构
14.编写一个vue组件，组件内部使用插槽接收外部内容，v-model双向..
15.实现lodash的set和get方法
16.去除字符串中出现次数最少的字符，不改变原字符串的顺序。
17.实现一个批量请求函数，要求能够限制并发量
18.树转数组
19.数组转树
20.删除链表的一个节点
21.请实现一个函数，要求能在页面请求很多时，尽可能快地按照顺序...
22.实现一个请求函数：fetchWithRetry，要求会最多自动重试3次，任...
23.链表中，环的入口节点
24.多叉树指定层节点的个数
25.请手写”快速排序”
26.使用js实现有序数组原地去重
27.计算出下面数组中的平均时间
28.实现compose函数，类似于koa的中间件洋葱模型
29.请按以下要求实现方法fn：遇到退格字符就删除前面的字符，遇到...
30.Promise 的 finally 怎么实现的?
31.实现一个函数，可以间隔输出
32.不定长二维数组的全排列
33.两个字符串对比，得出结论都做了什么操作，比如插入或者删除
34.实现一个方法，从某个数值数组中，获取最小正数（非零非负数）.
35.实现一个等待函数，支持让async函数在执行时暂停一段时间，函...
36.使用正则表达式实现以下需求：筛选出数组中只包含大小写字母的..
37.请补充 objToArray函数
38.实现一个将多维数组展示的方法
39.使用TS实现一个判断传入参数是否是数组类型的方法
40.给某个资源的链接，如 404 Not Found...
41.根据运算优先级添加括号
42.请对以下数组，根据born的值降序排列
43.编程实现温度转换，已知温度转换的关系式是：华氏度=32+摄氏...
44.版本号排序
45.实现以下转换，合并连续的数字
46.使用css实现一个无限循环动画
47.实现一个数字转中文的方法
48.用es5如何实现let 和const？
49.写一个返回数据类型的函数，要求自定义的类实例化的对象返回定...
50.手写一个 jsonp
大概就这么多了
总结
场景题和手撕对一些经验不多的人不太友好，建议多耍一些面经，有备无患，与其赌会不会问出来，不如主动给面试官一个惊喜，反正对面试来说无非就是一个表演学！！！github：https://github.com/encode-studio-fe/natural_traffic/wiki/scan_material5，，，好了今天的内容就到了这里，如果觉得不错可以帮我点点，让更多的人看到，帮助他们稍微减少一些焦虑，拜托求职的烦恼！！
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
