堪称2024最强的前端面试场景题，让419人成功拿到offer

【题目非原创】原文链接：https://blog.csdn.net/weixin_44714345/article/details/139807267

1.前端如何实现截图?

首先html2canvas转为图片，然后使用可移动框截取图片，如果添加标记框或者马赛克之类可以使用canvas API进行绘制。

2.当QPS达到峰值时,该如何处理?

前端如何降低QPS。错峰：当QPS较高时，后端可以与前端协商，令客户端随机延迟请求。限流：客户端可以限制用户短时间内请求次数，来消除频繁或不必要的请求。削峰：设置两次请求的最小有效时间间隔，将瘦高的山峰变成矮胖的山峰，可以减轻服务器压力。

3.js 超过 Number 最大值的数怎么处理?

可以使用BigInt类或在数值后面加n或N把数值变成BigInt类型，或者使用第三方库bignumber.js等。

4.使⽤同⼀个链接，如何实现 PC 打开是 web 应⽤、⼿机打开是⼀个 H5 应⽤？

获取请求头中的User-Agent属性的值来判断来自PC还是移动设备，在nginx中可以这样配置：

server {
  listen 80;
    server_name www.xxxx.com;

    location / {
        root  /usr/share/nginx/html/xxxx/pc;
        if ($http_user_agent ~* '(Android|webOS|iPhone|iPod|BlackBerry)') {
            root /usr/share/nginx/html/xxxx/mobile;
        }
        index index.html;
    }
}

5.如何保证⽤⼾的使⽤体验

优化页面设计: 想表达的内容需要简介明了，统一风格

提高页面加载速度：优化网络加载速度，优化程序加载速度

提供流畅的交互体验：使用合适的动画来避免突兀的交互，减少过多不必要的渲染来减少页面卡顿。

6.如何解决⻚⾯请求接⼝⼤规模并发问题用Promise.race和Promise.all将大规模并发改为小规模并发

7.设计⼀套全站请求耗时统计⼯具使用performance API来检测资源和接口的调用情况，使用PerformanceObserver观察

8.⼤⽂件上传了解多少大于某个大小的文件启用分片上传，将文件使用Blob.slice分割为多块，使用小规模并发将其上传到服务器，上传期间将分片发给web worker让其计算文件的HASH值，服务器接收的时候，将分片合并为文件，并计算HASH与客户端穿过来的HASH进行比对，以此来验证文件是否上传成功

9.H5 如何解决移动端适配问题

方案一：设计两套代码，通过nginx或者js重定向到指定代码路径
方案二：使用媒体查询+响应式设计来适配

10.站点⼀键换肤的实现⽅式有哪些？

css变量，通过切换属性来切换不同的css变量
类名切换，代码冗余
动态加载css代码，加载延迟
css预处理，代码冗余
如何实现⽹⻚加载进度条？ performance监听页面资源加载情况，计算加载进度提供给process组件。
常⻅图⽚懒加载⽅式有哪些？原生H5，lazy属性。 Intersection Observer API 滚动事件监听 + 位置计算 getBoundingClientRect
cookie 构成部分有哪些

属性	作用	示例/规则
Domain	指定哪些域名可访问 Cookie（默认为当前域名）	domain=.example.com（允许所有子域名）
Path	限制 Cookie 的有效 URL 路径（默认为当前路径）	path=/news（仅 /news 路径下生效）
Expires	设置绝对过期时间（GMT 格式）expires=Thu, 18 Dec 2025 12:00:00 GMT	Max-Age设置相对过期时间（秒），优先级高于 Expiresmax-age=3600（1 小时后失效）Secure仅允许通过 HTTPS 协议传输Secure（无值，存在即生效）HttpOnly禁止 JavaScript 访问 Cookie，防御 XSS 攻击HttpOnly（无值，存在即生效）SameSite控制跨站请求时是否发送 Cookie：Strict（完全禁止）Lax（宽松允许 GET 导航）None（允许跨站，需配合 Secure）SameSite=Lax（默认策略）

扫码登录实现⽅式

pc端生成限时二维码，并携带qrid参数，并更新qrid状态为scaned 移动端扫描二维码，将qrid和当前登录的账号绑定，点击授权按钮后将qrid和登录的账号id一起发送给服务端，服务端验证一下就给pc端发送登录成功的token和用户信息。

DNS 协议了解多少
函数式编程了解多少？
前端⽔印了解多少？
什么是领域模型
⼀直在 window 上⾯挂东西是否有什么⻛险
深度 SEO 优化的⽅式有哪些，从技术层⾯来说
《前端面试场景题》PDF里都有，获取的方法在文末了哦！
⼩程序为什么会有两个线程防止js阻塞ui渲染，js沙箱环境，不需要web一些危险api。
web 应⽤中如何对静态资源加载失败的场景做降级处理
Service Worker 是一种特殊的Worker，它可以拦截网络请求，缓存资源，甚至在离线状态下提供内容。
使用备用资源 ps: 测试验证：使用DevTools模拟Offline模式或限速环境，验证降级效果。
html 中前缀为 data- 开头的元素属性是什么？自定义数据属性
移动端如何实现上拉加载，下拉刷新？
如何判断dom元素是否在可视区域
前端如何⽤ canvas 来做电影院选票功能
如何通过设置失效时间清除本地存储的数据？
如果不使⽤脚⼿架，如果⽤ webpack 构建⼀个⾃⼰的 react 应⽤
⽤ nodejs 实现⼀个命令⾏⼯具，统计输⼊⽬录下⾯指定代码的⾏数

30.package.json ⾥⾯ sideEffects 属性的作⽤是啥

script 标签上有那些属性，分别作⽤是啥？
为什么 SPA 应⽤都会提供⼀个 hash 路由，好处是什么？

33.[React] 如何进⾏路由变化监听

单点登录是是什么，具体流程是什么
web ⽹⻚如何禁⽌别⼈移除⽔印
⽤⼾访问⻚⾯⽩屏了，原因是啥，如何排查？
[代码实现] JS 中如何实现⼤对象深度对⽐
如何理解数据驱动视图，有哪些核⼼要素？
vue-cli 都做了哪些事⼉，有哪些功能？
JS 执⾏ 100 万个任务，如何保证浏览器不卡顿？
JS 放在 head ⾥和放在 body ⾥有什么区别？
Eslint 代码检查的过程是啥？
虚拟混动加载原理是什么，⽤ JS 代码简单实现⼀个虚拟滚动加加载。
[React] react-router 和原⽣路由区别
html的⾏内元素和块级元素的区别
介绍⼀下 requestIdleCallback api
documentFragment api 是什么，有哪些使⽤场景？
git pull 和 git fetch 有啥区别？
前端如何做⻚⾯主题⾊切换
前端视⻆ - 如何保证系统稳定性
如何统计⻓任务时间、⻓任务执⾏次数
V8 ⾥⾯的 JIT 是什么？
⽤ JS 写⼀个 cookies 解析函数，输出结果为⼀个对象
vue 中 Scoped Styles 是如何实现样式隔离的，原理是
样式隔离⽅式有哪些
在 JS 中，如何解决递归导致栈溢出问题？
站点如何防⽌爬⾍？
ts 项⽬中，如何使⽤ node_modules ⾥⾯定义的全局类型
不同标签⻚或窗⼝间的【主动推送消息机制】的⽅式有哪些？包到⾃⼰项⽬ src 下⾯使⽤？（不借助服务端）
在 react 项⽬开发过程中，是否可以不⽤ react-router，使⽤浏览器原⽣ history 路由来组织⻚⾯路由？
在表单校验场景中，如何实现⻚⾯视⼝滚动到报错的位置
如何⼀次性渲染⼗万条数据还能保证⻚⾯不卡顿
[webpack] 打包时 hash 码是如何⽣成的
如何从 0 到 1 搭建前端基建
你在开发过程中，使⽤过哪些 TS 的特性或者能⼒？
JS 的加载会阻塞浏览器渲染吗？
浏览器对队头阻塞有什么优化？
Webpack 项⽬中通过 script 标签引⼊资源，在项⽬中如何处理?
应⽤上线后，怎么通知⽤⼾刷新当前⻚⾯？
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, 说⼀下他们的作⽤
在你的项⽬中，使⽤过哪些 webpack loader, 说⼀下他们的作⽤
[React] 如何避免不必要的渲染?
全局样式命名冲突和样式覆盖问题怎么解决？
[React] 如何实现专场动画？
[React] 从 React 层⾯上，能做的性能优化有哪些？
[Vue] 中为何不要把 v-if 和 v-for 同时⽤在同⼀个元素上，原理是什么？
将静态资源缓存在本地的⽅式有哪些？
SPA⾸屏加载速度慢的怎么解决
axios 是如何区分是 nodejs 环境还是浏览器环境的？
如何拦截 web 应⽤的请求
前端有哪些跨⻚⾯通信⽅式？ ————————————————

原文链接：https://blog.csdn.net/weixin_44714345/article/details/139807267

堪称2024最强的前端面试场景题，让419人成功拿到offer

评论一下