1.如何判断用户设备
- 浏览器API——
User-Agent 检测 优先CSS媒体查询，JS作为补充
2.将多次提交压缩成一次提交
简单场景：使用防抖函数延迟执行，确保连续操作只触发一次复杂场景：实现请求批量处理器，收集一段时间内的所有请求，合并发送到支持批量处理的API接口关键考虑：需要处理请求和响应的对应关系、错误处理、优先级控制，并设置合理的等待时间和批量大小结合使用：在实际项目中，通常会结合防抖（控制频率）、批量（减少请求数）和缓存（避免重复请求）来综合优化”
3.介绍下navigator.sendBeacon方法
4.混动跟随导航（电梯导航）该如何实现
5.退出浏览器之前，发送积压的埋点数据请求，该如何做？
6.如何统计页面的long task（长任务）
7.PerfoemanceObserver如何测量页面性能
8.移动端如何实现下拉滚动加载（顶部加载）
9.判断页签是否为活跃状态
10.在网络带宽一定的情况下，切片上传感觉和整体上传消费的时间应该是差不多的这种说法正确吗？
11.大文件切片上传的时候，确定切片数量的时候，有那些考量因素
12.页面关闭时执行方法，该如何做
13.如何统计用户 pv 访问的发起请求数量
14.长文本溢出，展开/收起如何实现
基础层：使用-webkit-line-clamp实现多行省略，max-height控制显示高度交互层：通过JS动态计算文本高度，决定是否显示展开按钮动画层：利用CSStransition实现平滑展开收起效果优化层：考虑按钮精确定位、防抖处理、虚拟滚动等优化手段
15.如何实现鼠标拖拽
事件处理：通过mousedown、mousemove、mouseup事件链实现，注意事件绑定在 document 上确保鼠标移出元素外也能继续拖拽坐标计算：计算鼠标移动的 delta 值，应用 transform 或 left/top 实现位置更新性能优化：使用transform利用 GPU 加速，requestAnimationFrame节流事件，减少重排重绘用户体验：添加拖拽状态样式，支持边界限制、网格对齐、拖拽排序等高级功能兼容性：同时支持鼠标和触摸事件，处理移动端特殊行为"
16.统计全站每一个静态资源加载耗时，该如何做
前端性能指标
First Paint（FP）——》从输入url到开始渲染，第一次渲染页面触发First Contentful Paint（FCP）——》第一次有内容的渲染，比如开始第一次渲染文字，图片等等DomContentLoaded（DCL）——》页面DOM内容加载完毕，html文档被解析加载完成触发Largest Contentful Paint（LCP）——》页面最大的内容渲染完成Load（L）——〉页面所有资源下载完成触发
优化建议
缓存策略：分析缓存命中率，优化缓存配置CDN优化：分析不同CDN节点的性能差异资源合并：分析是否可以通过合并减少请求数预加载：识别关键资源进行预加载懒加载：分析非首屏资源，实现懒加载
17.防止前端页面重复请求
交互层：通过按钮禁用和加载状态给用户明确反馈控制层：使用防抖节流控制请求频率，实现请求锁机制网络层：利用 AbortController 或拦截器取消重复请求缓存层：对 GET 请求合理缓存，减少重复调用架构层：封装统一的请求管理器，结合路由生命周期管理
18.ResizeObserver作用是什么
ResizeObserver 是一个现代浏览器 API，用于监听 DOM 元素的尺寸变化
典型应用场景包括：响应式组件、图表自适应、虚拟列表、动态布局等。使用时要注意及时清理观察者，避免内存泄漏。
19.要实时统计用户浏览器窗口大小，该如何做
20.当项目报错，你想定位是哪个commit引l入的错误的时，该怎么做
21.如何移除一个指定的 commit
22.如何还原用户操作流程
23.可有办法将请求的调用源码地址包括代码行数也上报上去?
24.请求失败会弹出一个 toast,如何保证批量请求失败，只弹出一个 toast
25.如何减少项目里面 if-else
26.babel-runtime 作用是啥
27.如何实现预览 PDF 文件
window.open
28.如何在划词选择的文本上添加右键菜单(划词:标滑动选择一组字符，对组字符进行操作)【热度:100】
29.富文本里面，是如何做到划词的(鼠标滑动选择一组字符，对组字符进行操作)?
30,如何做好前端监控方案
31.如何标准化处理线上用户反馈的问题
32.px 如何转为 rem
33.浏览器有同源策略，但是为何 cdn 请求资源的时候不会有跨域限制
34.cookie 可以实现不同域共享吗
35.axios 是否可以取消请求
如何创建和使用CancelToken
- 创建CancelToken:
使用axios.CancelToken.source()方法可以创建一个取消源（cancel source），它包含一个token用于之后的取消操作和一个cancel方法来实际取消请求。 - 发起请求时传递CancelToken:
在发起请求时，将CancelToken对象作为配置项传递。 - 取消请求
当需要取消请求时，调用之前创建的
cancel方法。
36.前端如何实现折叠面板效果?
37.dom 里面，如何判定a元素是否是b元素的子元素
38.判断一个对象是否为空，包含了其原型链上是否有自定义数据或者方法。 该如何判定?
39.js如何判空?「空」包含了:空数组、空对象、空字符串、0、undefined、null、空 map、空 set,都厘于为空的数据
40.css 实现翻牌效果
41.flex:1代表什么
42.一般是怎么做代码重构的
43.如何清理源码里面没有被应用的代码，主要是 JS、TS.CSS 代码
44.前端应用 如何做国际化?
45.应用如何做应用灰度发布
46.「微前端]为何通常在 微前端 应用隔离，不选择 iframe 方案
47.[微前端] Qiankun 是如何做 JS 隔离的
48.[微前端]微前端架构一般是如何做 JavaScript隔离
49.[React]循环渲染中 为什么推荐不用 index 做 key
50.[React]如何避免使用 context 的时候，引起整个挂载节点树的重新浪染
51.前端如何实现截图?
52.当QPS达到峰值时,该如何处理?
53.js 超过 Number 最大值的数怎么处理?
54.使用同一个链接， 如何实现 PC 打开是 web 应用、手机打开是-个 H5 应用?
55.如何保证用户的使用体验
56.如何解决页面请求接口大规模并发问题
57.设计一套全站请求耗时统计工具
58.大文件上传了解多少
大文件上传的核心是分片上传 + 断点续传 + 秒传检测。
实现流程：
- 前端将大文件切成多个小分片
- 计算文件hash用于秒传检测和完整性校验
- 并发上传分片（控制并发数避免服务器压力）
- 记录上传状态，支持暂停和断点续传
- 所有分片上传完成后，服务端合并验证
59.H5 如何解决移动端适配问题
60.站点一键换肤的实现方式有哪些?
CSS变量方案（现代方案）：通过修改根元素的CSS变量值，实现实时主题切换，性能好但需要现代浏览器支持。类名切换方案（经典方案）：为不同主题预定义CSS类，切换时修改根元素类名，兼容性好，适合大多数项目。多CSS文件方案（企业方案）：构建时生成多套CSS，运行时动态加载，适合复杂的主题系统。
61.如何实现网页加载进度条?
是伪进度条：视觉上模拟进度，快速到80%然后等待完成，实现简单但不够真实。是基于真实进度的：通过监听资源加载、标记关键节点或使用Performance API，能真实反映加载情况。是框架集成方案：在React/Vue等框架中，结合路由和组件加载状态显示进度。
62.常见图片懒加载方式有哪些?
63.cookie 构成部分有哪些
64.扫码登录实现方式
"扫码登录的核心是二维码承载临时令牌，手机App确认身份后完成登录。
具体实现：
网页端生成带token的二维码，轮询或WebSocket等待结果手机App扫码后向服务器确认身份服务器验证token，绑定用户，通知网页端网页端收到通知后完成登录
65.DNS 协议了解多少
66.函数式编程了解多少?
67.前端水印了解多少?
68.什么是领域模型
69.一直在 window 上面挂东西是否有什么风险
命名冲突风险：多个库或模块都往window上挂属性，容易发生覆盖。比如早期jQuery和Prototype.js的$冲突，或者广告SDK和业务代码的全局变量冲突。安全风险：敏感数据（如token、API密钥）暴露在全局，容易被XSS攻击窃取。全局变量也容易被恶意篡改。维护困难：代码耦合度高，难以追踪来源。全局状态管理混乱，调试困难。性能问题：全局变量查找慢，可能影响性能。还可能导致内存泄漏。
70.深度 SEO 优化的方式有哪些，从技术层面来说
71.小程序为什么会有两个线程
72.web 应用中如何对静态资源加载失败的场景做降级处理
73.html 中前缀为 data- 开头的元素厘性是什么?
HTML中 data-* 开头的属性是HTML5引入的自定义数据属性。
它的主要作用是在HTML元素上存储私有自定义数据，这些数据不会影响页面渲染，但可以通过JavaScript进行读写。
- CSS中也可以通过
attr()函数使用data属性 - 与
MutationObserver结合监控变化
74.移动端如何实现上拉加载，下拉刷新?
75.如何判断dom元素是否在可视区域
通过检测元素相对于浏览器视口的位置关系，来判断元素当前是否被用户看到。
简单场景：使用 getBoundingClientRect() 获取元素位置，与视口尺寸比较，可以判断完全可见或部分可见。
生产环境：推荐使用 IntersectionObserver API，它性能更好，支持阈值检测、容器内检测等高级功能，还能自动监听滚动和尺寸变化。
76.前端如何用 canvas 来做电影院选票功能
77.如何通过设置失效时间清除本地存储的数据?
78.如果不使用脚手架， 如果用 webpack 构建一个自己的 react应用
79.用 nodejs 实现一个命令行工具， 统计输入目录下面指定代码的行数
80.package,json 里面 sideEffects 厘性的作用是啥
81.script 标签上有那些厘性，分别作用是啥?
82.为什么 SPA 应用都会提供一个 hash 路由，好处是什么?
83.[React]如何进行路由变化监听
使用react-router-dom
对于Web应用，react-router-dom是最常用的库。你可以使用useLocation钩子或者useHistory钩子来监听路由变化。
84.单点登录是是什么， 具体流程是什么
单点登录（Single Sign-On, SSO） 是一种身份验证方案，允许用户使用一组凭证（用户名/密码）登录多个相互信任的应用系统，而无需在每个系统中单独登录。
85.web 网页如何禁止别人移除水印
86.用户访问页面白屏了，原因是啥，如何排查?
快速诊断：打开DevTools，先看Console有无红色错误，再看Network面板资源加载状态资源检查：确认JS/CSS等关键资源是否加载成功，检查HTTP状态码和CORS问题执行排查：如果有JS错误，分析堆栈跟踪，检查变量定义和异步操作渲染检查：确认DOM是否正常渲染，检查CSS加载和布局问题环境验证：检查浏览器兼容性、网络状态和第三方依赖
