就一个问题问倒了一大片前端开发....

安安868
64 阅读10分钟

事情是这样的

本来公司临时决定招俩个前端开发，然后我做面试官，从这周一开始就一直在面试，不得不说，前端这行人是真的多，听HR抱怨，消息根本就回不过来，只能大概看俩眼，我听了也就笑了笑，然后轮到我了，一天全在面试，而且过程纯尴尬，真的是笑早了啊

周一先不提，可能周末玩的开心状态没过来，周二今天面了5.6个了，上来先自我介绍，这里都很正常，我也会考几道八股，但其实我不爱问那些老东西。

然后重头戏就来了，我问：

web 应用中如何对静态资源加载失败的场景做降级处理？

如何清理源码里面没有被应用的代码，主要是JS、TS、CSS 代码？

判断一个对象是否为空，包含了其原型链上是否有自定义数据或者方法。该如何判定?

浏览器有同源策略，但是为何 cdn 请求资源的时候不会有跨域限制

就这四个项目场景题问出去，愣是没有一个人回答，我算看出来，这不是没状态，这根本就是没准备啊！

我大厂里的朋友和我说，面试场景题肯定没错，是没错了，这伙前端根本不刷场景题啊，今年场景题在面试中都快占50%了，这消息落后的不是一点半点

而且就两类人居多，一种长时间在职，突然跳槽或者被裁要找工作的，一种是最近没有什么面试，闷着头就刷八股的。

只能劝一句，长点心吧，基本都不怎么问八股了，所以今天专门整理了一期项目场景题，给大家用来面试

正文

  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引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. Js如何判空？[空」包含了：空数组、空对象、空字符串、0、undefined、null、空map、空set,都属于为的数据[热度:640】
  40. css实现翻牌效果[热度：116]

1.如何判断用户设备

使用用户代理字符串(User-Agent)

用户代理字符串包含了浏览器类型、版本、操作系统等信息，可以通过分析这些信息来大致判断用户的设备型。 navigator.userAgent 属性用于获取用户代理字符串。

image.png

使用视口尺寸

有时候用户代理字符串可能不够准确或被修改，此时可以根据视口尺寸作为补充手段。通过检测屏幕 的宽度，你可以推断出设备的大致类别。

image.png

使用CSS 媒体查询

虽然CSS 媒体查询主要用于响应式设计，但你也可以在JavaScript 中使用 window. matchMedia(）方法来判断设备类型。这提供了一种基于 CSS 媒体查询语法来检测设备/ 视口特性的方式。

image.png

注意

◆用户代理字符串被视为不可靠：由于用户代理字符串可以被修改，某些情况下可能不能准确反映用 户的设备信息。

◆响应式设计原则：在进行设备检测时，最佳实践是根据内容和功能的需要来适应不同设备，而不是 针对特定设备进行优化或限制。

综上，设备检测方法多种多样，选择合适的方法取决于你的具体需求和场景。在可能的情况下，优先 考虑使用响应式设计原则，来创建能够在不同设备上良好工作的网页。

  1. flex:1代表什么[热度：400】
  2. 一般是怎么做代码重构的
  3. 如何清理源码里面没有被应用的代码，主要是JS、TS.CSS代码【热度：329】
  4. 前端应用如何做国际化？[热度：199】
  5. 应用如何做应用灰度发布【热度：247】
  6. [微前端]为何通常在微前端应用隔离，不选择iframe方案[热度：280】
  7. [微前端]Qiankun是如何做Js隔离的[热度：228】
  8. [微前端]微前端架构一般是如何做JavaScript隔离
  9. [React]循环渲染中为什么推荐不用index做 key[热度：320】
  10. [React]如何避免使用context的时候，引起整个挂载节点树的重新渲染[热度：420】
  11. 前端如何实现截图？
  12. 当QPS达到峰值时，该如何处理？
  13. js超过 Number最大值的数怎么处理？
  14. 使用同一个链接，如何实现PC打开是web应用、手机打开是-个H5应用？【腾讯二面】
  15. 如何保证用户的使用体验【字节一面】
  16. 如何解决页面请求接口大规模并发问题【必会】
  17. 设计一套全站请求耗时统计工具
  18. 大文件上传了解多少【百度一面】
  19. H5如何解决移动端适配问题[美团一面】
  20. 站点一键换肤的实现方式有哪些？【美团一面】
  21. 如何实现网页加载进度条？【百度一面】
  22. 常见图片懒加载方式有哪些？[京东一面】
  23. cookie构成部分有哪些[百度一面】
  24. 扫码登录实现方式[腾讯一面]
  25. DNS 协议了解多少[字节一面】
  26. 函数式编程了解多少？【京东一面】
  27. 前端水印了解多少？[腾讯一面】
  28. 什么是领域模型【必会】
  29. 一直在window上面挂东西是否有什么风险【百度一面】
  30. 深度SEO优化的方式有哪些，从技术层面来说
  31. 小程序为什么会有两个线程【腾讯一面】
  32. web应用中如何对静态资源加载失败的场景做降级处理
  33. html中前缀为 data-开头的元素厘性是什么?
  34. 移动端如何实现上拉加载，下拉刷新？【字节一面】
  35. 如何判断dom元素是否在可视区域【字节一面】
  36. 前端如何用canvas来做电影院选票功能[美团一面】
  37. 如何通过设置失效时间清除本地存储的数据？【腾讯二面】
  38. 如果不使用脚手架，如果用webpack构建一个自己的react应用
  39. 用nodejs实现一个命令行工具，统计输入目录下面指定代码的行数
  40. package,json里面 sideEffects厘性的作用是啥【必会】

以上一部分是大厂前端项目场景题，答案内容太长就不一一展示了，自己拿上看

  1. JS放在head里和放在 body里有什么区别？
  2. Eslint代码检查的过程是啥？【必会】
  3. 虚拟混动加载原理是什么，用Js代码简单实现一个虚拟滚动加加载
  4. [React]react-router和原生路由区别
  5. html的行内元素和块级元素的区别【京东一面】
  6. 介绍-下 requestlIdleCallback api
  7. documentFragment api是什么，有哪些使用场景？[必会]
  8. git pull 和 git fetch有啥区别?
  9. 前端如何做页面主题色切换【腾讯一面】
  10. 前端视角-如何保证系统稳定性[字节一面]
  11. 如何统计长任务时间、长任务执行次数【腾讯二面】
  12. V8里面的T是什么？[京东一面]
  13. 用Js写一个cookies解析函数，输出结果为一个对象
  14. vue中 Scoped Styles是如何实现样式隔离的，原理是啥
  15. 样式阿商方式有哪些【字节一面】
  16. 在JS中，如何解决递归导致栈溢出问题？
  17. 站点如何防止爬虫？【百度一面】
  18. ts项目中，如何使用nodemodules里面定义的全局类型包到自己项目src下面使用？【百度二面】
  19. 不同标签页或窗口间的【主动推送消息机制】的方式有哪些？（不借助服务端）
  20. [React]】在react项目开发过程中，是否可以不用react router使用浏览器原生history路由来组织页面路由？
  21. 在表单校验场景中，如何实现页面视口滚动到报错的位置
  22. 如何一次性渲染十万条数据还能保证页面不卡顿【百度二面】
  23. [webpack】打包时hash码是如何生成的【必会】
  24. 如何从0到1搭建前端基建【京东一面】
  25. 你在开发过程中，使用过哪些TS的特性或者能力？【美团一面】
  26. JS的加载会阻塞浏览器渲染吗？【百度一面】
  27. 浏览器对队头阻寒有什么优化？【百度一面）
  28. Webpack项目中通过script标签引入资源，在项目中如何处理？
  29. 应用上线后，怎么通知用户刷新当前页面？【腾讯一面】
  30. Eslint代码检查的过程是啥？

好了，今天先整理到这里，后续还会更新，最后祝大家都能在7-8月拿下心仪的offer！！！

avatar
文章
阅读
粉丝