上周面试了一个小伙子，简历上写“精通性能优化”，项目经验里一堆大厂外包经历。
我问了一个很常见的题：“图片懒加载有哪几种实现方式？”
他眼睛一亮，张嘴就来：Intersection Observer
，性能好，推荐用这个。
我点点头，继续问：“那如果要兼容IE呢？”
他说：那就getBoundingClientRect + scroll监听，加个节流。
我笑了笑，又问：
“如果页面上有一万张图，你用scroll监听，用户快速滚动，你怎么保证不卡顿、不闪白屏？”
“loading='lazy' 和 Intersection Observer 同时用，谁的优先级更高？会不会冲突？”
“首屏的图片你也会懒加载吗？会不会反而拖慢首屏渲染？”
他愣住了，说：我……我没想过这么深。
我心想：兄弟，你干了四年，简历写的“精通”，却连这个问题的三层认知都没摸全。
但说实话，我不怪他。
因为我现在越来越觉得——面试就是个表演。
你背八股文，我出八股题，大家心照不宣。
真正干活的时候，有几个场景会让你从零手写懒加载？不都是npm i 一个库完事？
但为什么我还要问？
因为面试的本质不是考你会不会用API，而是看你有没有工程思维，遇到复杂场景会不会拆解、会不会权衡。
以下展示场景题： https://github.com/encode-studio-fe-coder/natural_traffic/wiki/scan_material3
- 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
