最近很多同学都在忙着找工作，给大家整理了一份非常全面的Web面试手册（简历、面试题、项目全包）及答案。

内容涵盖：JavaScript、Vue、React、Node.js、Webpack、Typescript、性能优化、项目场景、小程序、HTML、CSS、ES6、前端安全等技术栈 质量非常高！！！

接下来是今年面试重复率最多的项目场景题

以上内容截取部分，完整答案及题目可参考海量面试题+提供完整资料+笔记+简历优化等 - 哔哩哔哩

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

下方给大家展示的资料中部分题目（附赠答案）：

Javascript

1.不会冒泡的事件有哪些?
2.mouseEnter 和 mouseOver 有什么区别?

3.MessageChannel 是什么，有什么使用场景?
4.async、await 实现原理

5.Proxy 能够监听到对象中的对象的引用吗?
6.如何让 var [a, b]= {a: 1,b: 2} 解构赋值成功?

7.下面代码会输出什么?
8.描述下列代码的执行结果

9.什么是作用域链?
10.bind、call、apply 有什么区别?如何实现一个bind?

CSS

1. css 中的 animation、transition、transform有什么区别?
2. 怎么做移动端的样式适配？

3.相令的两个inline-block节点为什么会出现间隔，该如何解决？
4.grid网格布局是什么？

5. CSS3新增了哪些特性?
6.怎么使用CSS3实现动画？

7.怎么理解回流跟重绘？什么场景下会触发？
8.什么是响应式设计？响应式设计的基本原理是什么？如何进行实现？

9.如果使用CSS提高页面性能？
10.如何实现单行/多行文本溢出的省略样式？

HTML

1. 什么是DOM和 BOM?
2.简单描述从输入网址到页面显示的过程

3.一台设备的dpr，是否是可变的？
4.前端该如何选择图片的格式？

5.前端跨页面通信，你知道哪些方法？
6. 说说你对 Dom树的理解

7.行内元素有哪些？块级元素有哪些？空(void)元素有那些?
8.htm和css中的图片加载与渲染规则是什么样的？

9. title与h1的区别、b与strong的区别、i与em的区别?
10.script标签为什么建议放在body标签的底部(defer、async)

React

1. 下面代码中，点击”+3”按钮后，age的值是什么？
2. React Portals 有什么用？

3. react 和 react-dom是什么关系?
4. React中为什么不直接使用 requestIdleCallback?

5. 为什么react需要fiber 架构，而Vue 却不需要？
6.子组件是一个Portal，发生点击事件能冒泡到父组件吗？

7. React 为什么要废弃 componentwillMount、componentWillReceiveProps、component...
8.说说React render方法的原理？在什么时候会被触发？

9. 说说React事件和原生事件的执行顺序
10.说说对受控组件和非受控组件的理解，以及应用场景？

Vue

1. Vue有了数据响应式，为何还要diff？
2. vue3为什么不需要时间分片?

3. vue3 为什么要引入 Composition API？
4. 谈谈Vue事件机制,并手写$on、$off、$emit、$once

5.computed计算值为什么还可以依赖另外一个computed计算值？
6.说一下vm.$set原理

7. 怎么在Vue中定义全局方法?
8.Vue中父组件怎么监听到子组件的生命周期？

9.vue组件里写的原生addEventListeners监听事件，要手动去销毁吗？为什么?
10.说说vue3中的响应式设计原理

算法

1. 最人的钻石
2.举例说明你对尾递归的理解，以及有哪些应用场景

3.去除字符串中出现次数最少的字符，不改变原字符串的顺序。
4. 请手写“快速排序”

5. 洗牌算法
6.什么是尾调用优化和尾递归？

7. 合并K个升序链表
8.什么是时间复杂度？

9. 请手写“基数排序”
10.请手写桶排序”

Node.js

1. common.js和es6中模块引入的区别?
2. 为什么Node在使用esmodule时必须加上文件扩展名？

3. 浏览器和Node中的事件循环有什么区别？
4.Node性能如何进行监控以及优化？

5.如果让你来设计一个分页功能，你会怎么设计？前后端如何交互？
6.如何实现文件上传？说说你的思路

7.如何实现jwt鉴权机制？说说你的思路
8.说说对中间件概念的理解，如何封装node中间件?

9.说说Node文件查找的优先级以及Require方法的文件查找策略？
10.说说对Nodejs中的事件循环机制理解?

Typescript

1. 说说对TypeScript 中命名空间与模块的理解？区别?
2. 说说你对 typescript 的理解?与 javascript 的区别?

3. Typescript中泛型是什么?
4. TypeScript中有哪些声明变量的方式?

5. 什么是Typescript的方法重载？
6. 请实现下面的 sleep方法

7. typescript 中的 is关键字有什么用？
8. TypeScript支持的访问修饰符有哪些?

9. 请实现下面的 myMap 方法
10. 请实现下面的 treePath 方法

性能优化

1. script标签放在header里和放在body底部里有什么区别？
2.前端性能优化指标有哪些？怎么进行性能检测？

3.SPA（单页应用）首屏加载速度慢怎么解决？
4.如果使用CSS提高页面性能？

5.怎么进行站点内的图片性能优化？
6.虚拟DOM一定更快吗?

7.有些框架不用虚拟dom，但是他们的性能也不错是为什么？
8.如果某个页面有几百个函数需要执行，可以怎么优化页面的性能？

9.讲一下png8、png16、png32的区别，并简单讲讲png的压缩原理
10.页面加载的过程中，JS文件是不是一定会阻塞DOM和CSSOM的构建？

工程化

1. package.json文件中的 devDependencies和dependencies 对象有什么区别?
2. webpack 5的主要升级点有哪些?

3. 说下 Vite的原理
4.与webpack类似的工具还有哪些？区别?

5.说说如何借助webpack来优化前端性能？
6.说说webpack proxy工作原理？为什么能解决跨域?

7.说说webpack的热更新是如何做到的？原理是什么？
8.面试官：说说Loader和Plugin的区别？编写Loader，Plugin的思路?

9.说说webpack中常见的Plugin?解决了什么问题？
10.说说webpack中常见的Loader？解决了什么问题？

编程题

1.使用Promise实现红绿灯交替重复亮
2. bind、call、apply有什么区别?如何实现一个bind?

3.利用字符重复出现的次数，编写一种方法，实现基本的字符串压缩功能。比如，字符...
4.说说new操作符具体干了什么?

5.如何实现上拉载，下拉刷新？
6.大文件怎么实现断点续传？

7.什么是防抖和节流，以及如何编码实现？
8.说说ajax的原理，以及如何实现？

9.深拷贝浅拷贝有什么区别？怎么实现深考贝？
10.用js实现二叉树的定义和基本操作

如果这篇文章对你有所帮助，还请花费2秒的时间点个赞+在看+分享，让更多的人看到这篇文章，帮助他们走出误区

今天就分享到这里了，海量面试题+提供完整资料+笔记+简历优化等 - 哔哩哔哩有任何的面试疑难，工作难处，以及不懂的地方可以评论区留言！