文章预览
前言
随着4月份还有几天的结束，金三银四也要结束了， 小编想综合一次面试题，把大家面试中问的面试题归类总结，于是和参加了面试的小伙伴大致聊了一下面试情况（聊得不多），最后小编把面试题分为了8个方面，每个部分都会带有面试题及部分参考答案，可能涉及到面试题范围小，那么大家遇到的面试题也可以在评论区说说哦，给要参加金九银十的小伙伴们做个参考。
8个面试题方面
（下面题目的🌟代表面试频率出现过多次）
-
JavaScript 基础
-
Css 以及优化
-
vue 或 react 框架相关
-
前端打包等工程化
-
浏览器及常见安全问题相关
-
跨平台技术
-
网络相关
-
少量算法
其中并没有 Html 相关的东西，一方面确实是相关的题目少，另外不会有太难的问题，平时开发时常见的情况基本可以解决。
还有很常见的 nodejs、serverless、GraphQL 等等面试题小编没有总结到，但很有可能
出现在你的题目里
，相关题目要自行补课哦！
原生 JS 代码
1. JavaScript 实现对上传图片的压缩？
答：读取用户上传的 File 对象，读写到画布（canvas）上，利用 Canvas 的 API 进行压缩，完成压缩之后再转成 File（Blob） 对象，上传到远程图片服务器；不过有时候我们也需要将一个 base64 字符串压缩之后再变为 base64 字符串传入到远程数据库或者再转成 File（Blob） 对象。
思路就是 File + Canvas 的 drawImage
**2. 谈一谈 JavaScript 的异步？**🌟
答： setTimeout、MutationObserver、postMessage、Promise、async、await、generator
从 MutationObserver、postMessage 会牵扯到 vue 的 $nextTick
从 generator 会聊到 co.js 实现
从 Promise 和 setTimeout 会聊到下面要说的
事件循环
3. 浏览器和 nodejs 事件循环？
🌟
答：执行栈，promise 是 microTask，setTimeout 是 task
需要说出来的点：首先 setTimeout 并没有特殊，也是一个 task。另外每次的执行过 task 和 大量的 microtask（不一定在一次循环全执行完）后，会进行 renderUi 阶段，虽然不是每次事件循环都进行 renderUi ，但每次间隔，也就是传说中
60hz
的一帧
16ms
。
nodejs 事件循环略有不同…多了 process.nextTick 等
4. 手写 Promise 或者 Promise 的静态方法
答： 手写 Promise 尽量写出来 Promise 的状态，静态方法以及
.then
，
.catch
。当然更细节的还原可以看
Promise A+
规范。
静态方法指
Promise.allSettled
Promise.all
Promise.race
等等。
5. 手写节流与防抖
🌟
答： 老生常谈，原理很简单，主要还是看会不会封装函数，以及封装的高级与否，考虑的情况是否全面。
6. 手写 bind 函数
答： 同上。
7. service worker 使用
答： 缓存，渐进式应用，拦截处理
聊到
worker
可能还会聊到
web worker， shared worder
等等，如果有自信，或者工作对这方面有深入理解，可以秀一下。能体现出自己的优势…
8. 严格模式
答： this 的 undefined，禁止 with，arguments 不允许更改，给只读对象赋值抛异常，变量需要先声明，call，apply 第一个参数不会被转换…
能答出来一些就行。
9. 原型链以及继承
答： 很常问，找个赞数高的讲解，看一遍就懂了，记住常考点即可。
10. 正则表达式匹配规则？
答： 这个真没办法，只能是对正则表达式的规则进行系统学习，当然常考的可能是
邮箱，url
匹配。
css 以及优化
1. flex 布局
🌟
常用的 api 和两列、三列布局等等，对于我来说稍微有点难度。之前项目对兼容性高，基本没怎么用过 flex 布局。没用过的建议用一用，几个小时就会常见布局了。
2. 优化长列表滚动效果
transition 优化动画效果，分层渲染
后面分析了一下，可以用 transform 进行强制分层，第二种可以用 content-visibility 将看不见的元素不渲染，设置值为
auto
即可。第三个是对于某些动画效果，可以用
will-change
作用在父元素上进行 gpu 加速，使用后删掉。
3. 响应式布局
🌟
答： 可能会涉及 css 函数，rem/em 区别，媒体查询…
4. 什么是 BFC？
答： 块级格式化上下文，我布局总用！
问： 什么会形成 BFC？ 它的作用是什么？
答：
-
body 根元素
-
浮动元素：float 除 none 以外的值
-
绝对定位元素：position (absolute、fixed)
-
display 为 inline-block、table-cells、flex
-
overflow 除了 visible 以外的值 (hidden、auto、scroll)
vue 或 react 框架相关
-
vue 响应式原理以及双向绑定实现代码 ? 🌟
-
vue3 响应式原理，有什么不同？
-
vue 的 diff 算法思路，怎么对比节点？
-
vue 的 compile 实现？ 🌟
-
vue 如何自定义指令？ 具体的 api 写法？
-
vue3 对于 vue2 在性能上的优化（从 compile 和 runtime 两方面）？
-
react 有什么不同？了解 hooks 吗？
8. 用过 TypeScript 吗？ 有什么优点，为什么用？ 具体的场景，使用 TypeScript 进行类型定义。
答：vue 项目多， ts 用的少，也用过，写前端监控 sdk 时，对接口进行类型校验，它像一个文档，每一个接口都有定义，后面再翻看瞬间理解意思。（强类型好处还有很多，但是个人觉得写起来超级麻烦，当然有人很喜欢很爽。）
-
vue 的 keep-alive 使用场景，以及原理？ 🌟
前端打包等工程化
-
webpack 和 rollup 使用？
-
tree-shaking 原理？ 🌟
-
webpack loader 和 plugin 怎么写？
-
你对 vite 熟悉，和 webpack 区别？
-
给 vite 做的贡献和在实际项目的使用？
浏览器及常见安全问题相关
-
浏览器页面加载过程，越详细越好 🌟
-
浏览器缓存 🌟
-
跨域问题及处理 🌟
-
v8 快数组慢数组，hidden class 或者其他模块？
5. xss 和 csrc 的意思？如何防范？
🌟
答： 美团的两篇文章摆出来，面试官直接问下一题！
跨平台技术
-
electron 使用，如何实现小托盘功能？
-
flutter 的 widget stateFullWidget stateLessWidget 区别？
-
js Bridge 的原理 ？ 🌟
-
flutter 的渲染引擎？
网络相关
-
dns 相关，dns 服务器是什么，如何查询 dns 的？ 🌟
-
Oauth2.0 和 jwt 单点登录等
-
http/https 区别？ 为什么 https 更安全一点？ https 为什么也不是十分安全？
-
http1.x 和 http2.0 的区别？ http2.0 优点，以及某些情况会比 1.x 速度更慢？
-
https 加密原理？
-
http2.0 压缩头，以及并行请求原理？
-
tcp 的连接方式？
少量算法
1.回文串，中心扩散法
2.冒泡，快排 🌟
3.二分查找 🌟
4.二叉树 🌟
5.动态规划
需要完整版前端面试题总结-综合问题的PFD资料的小伙伴们，
请点击这里自行获取哦
总结
-
框架原理真的深入某一部分具体的代码和实现方式时，要多注意到细节，不要只能写出一个框架。
-
算法方面很薄弱的，最好多刷一刷，不然影响你的工资和成功率😯
-
在投递简历之前，最好通过各种渠道找到公司内部的人，先提前了解业务，也可以帮助后期优秀 offer 的决策。
-
要勇于说不，对于某些 offer 待遇不满意、业务不喜欢，应该相信自己，不要因为当下没有更好的 offer 而投降，一份工作短则一年长则 N 年，为了幸福生活要慎重选择！！！
小编这个只是做了小小的归类总结，不够全面，大家有遇到的奇葩的、印象深刻的等面试题也欢迎打在评论区哦。喜欢这篇文章文章的小伙伴们
点赞+转发
支持，你们的支持是我最大的动力！
………………………………
