自由万岁
作为一个憧憬自由的射手座，
总是有一些作死的基因流淌在身体里面的。
毕竟人生总会有三大错觉：手机振动，她喜欢我、我还能跳。
可能也是嗅到了公司前景有些不是那么景气，
然后一时脑残冲动，选择了跳槽跑路，
确实享受了一次完美的没有后顾之忧的度假之旅，
同时也被行业的寒冬打击的体无完肤。
在这个时期裸辞找工作确实比较辛苦，真是为自己的骚操作买单。
整理了一波面试八股知识，也算是为这一阶段的面试情况做一个复盘。
标识意义如下：
🔴 频率高（面试中经常遇到）
🟠 频率中（面试中遇到过一次以上）
🟢 频率低（面试中遇到过一次）
⚪ 自己瞎捉摸、自己面试会可能会问到。可以酌情忽略
一、HTML
🔴 简单说一下浏览器有哪些缓存：localstorage、sessionstorage、cookie。有什么区别？缓存大小限制？在你之前项目中分别在什么场景下使用？
🟢 有做过 SEO 相关经验么？
🟢 http 的强缓存、协商缓存都是什么
🟠 常见 http 协议状态码有哪些。200、301，401、404、500
⚪ 语义化标签有什么好处？h1 ~ h6 / code / pre / nav / aside / section / strong
⚪ Canvas、video、audio、是否有使用过？如何 api 绘图 Canvas？如何 api 操作多媒体？点击 video 自动全屏且播放如何实现？
二、CSS
🔴 了解盒子模型么。
从内到外 content / padding / border / margin
配合属性 box-sizing / width / height
🔴 大小两个元素，小元素在大元素中如何实现垂直水平居中。
（文档流内 flex / 脱离文档流 position: absolute;top: 0;left: 0;right: 0;bottom: 0）
🟢 实现三个模块，左右模块固定宽度，中间宽度自适应如何实现。（用过 flex 布局么？对应参数的意义）
🟢 如何画个圆、画个三角。
🟢 给一段文本，超过 100px 就要省略号，怎么实现？多行文本省略号呢（有什么限制）？
🟢 是否遇到过一像素问题？
🟢 渐变效果分几种？线性渐变、径向渐变
🟢 了解 BFC(块格式化上下文)么？
🟢 讲讲你对 CSS 思维 原子化的理解？组件化的理解？
⚪ 缩放需要用什么属性，通过 transform:scale(0.5) 缩放缩小后，实际占用的空间缺没有变化，你会如何处理。
⚪ transform: rotate(70deg) translate(100px, 200px); 请问这种书写方法是先旋转再位移，还是先位移再旋转
⚪ 如果我想将元素设置半透明有几种处理方式，他们有什么区别？opacity: 0.5 / background-color: rgba(0, 0, 0, 0.5)
⚪ 如果一个元素宽度是动态的为当前浏览器的 50%，宽高比始终保持 16:9，如何通过 CSS 实现？aspect-ratio: 16 / 9;
⚪ 有用 css 实现过动画么？了解贝塞尔曲线么？通过控制曲线上的四个点（起始点、终止点以及两个相互分离的中间点）来创造、编辑图形。
三、JS
🔴 你用过那些 ES6 的新特性。定义变量、扩展元素符…对象解构
🔴 数据精度丢失，0.1 + 0.2 = ?。为什么会有这个情况? 项目中是如何处理的? 如果两个数的小数位数不同的时候，要如何处理? 如果小数位数过多，乘以 10 的 n 次幂数据过大如何处理? （后面恶心问题也基本不会追问）
🟢 暂时性死区了解过么？变量提升了解过么？
⚪ 有用过序列化，反序列化么？什么场景下会用到？需要注意什么。应当放在 try…catch 内会安全一些。
序列化时应当注意对象中是否有循环引用字段(其中对象字段的值是自己)，否则直接报错；
反序列化时，以防传入的是非法 JSON 格式字符，也会导致直接报错；
⚪ 有用过编码，解码相关 api 么？什么场景下会用到？可以解决路由传值时，中文参数的乱码问题。
🔴 简单说一下你对 Promise 的一个理解，解决了什么问题。如何将其改为同步实现。
有一个场景同时调用多个接口你会如何实现？Promise.all
那假如其中的一个接口报错如何处理？Promise.allsettled，或者每个接口都有 try…catch 。Promise.race 是做什么的？
手写 Promise 的思路，实现链式调用，有三种状态且成功失败后则状态凝固，两个入参实现其回调，等等。
🟢 应用过 generator、yield 么？
⚪ 使用过 async await 么? 如果想在循环中使用，应当如何操作？for 可以么？forEach 可以么？for await of 了解过么？
🟢 简单说一下 Set 、 Map 数据结构都是什么，Map 和 Object 有什么区别，之前项目中分别在什么场景会用到？
🟢 了解过设计模式么，有在项目中实际应用么？装饰器模式，工厂模式，单例模式，观察者模式。
🟢 RESTFUL 接口规范。GET POST 有什么不一样的地方？
🟢 说说想实现数组的循环有哪些方式？for in .of while forEach map reduce 哪种效率最快？
🔴 数组相关操作 api。
数组筛选，遍历，取输入前三个，slice \ splice
数组的哪些 API 会改变原数组？不会改变：concat、every、some、filter、indexOf、join、toString、lastIndexOf、map、slice、valueOf。会改变：pop、push、shift、unshift、reverse、sort、splice
🟢 讲讲你对宏任务与微任务的理解？
🟢 setTimeout,setInterval 会有时间偏差？requestAnimationFrame 是否用过？
🔴 了解什么是深拷贝么？
简单的通过 JSON.parse / JSON.stringify 处理。
复杂的，如果涉及到字段包含方法的，就需要递归实现。
手写深拷贝说出思路，函数如何拷贝，数组如何拷贝，对象如何拷贝。
如何判断对象中的字段是数组，对象。typeof / instanceof
typeof 判断所有变量的类型，返回值有 number、string、boolean、function、object、undefined。typeof 对于丰富的对象实例，只能返回 object，导致有时候得不到真实的数据类型。
instanceof 可以对不同的实例对象进行判断，判断方法是根据对象的原型链依次向上查询。
🟢 递归应该注意什么？边界，明确条件返回。
🟠 讲一讲你对原型链的理解，平时开发过程中有对原型链操作过么？
当函数自身有相应的方法或者属性时就用自己的，当自身没有时才通过proto原型链查找。
封装或者调整公共的方法绑定到一种类型变量上。比如：实现工厂模式设计模式的时候，可以把一些基础的方法挂在到工厂类的方法里，然后实例化工厂类的对象，则天然就会携带这些刚刚的基础方法。
🟠 什么是闭包，平时开发中什么场景会用到闭包？比如：写防抖节流时，存储定时器的变量不去污染全局。
🟠 普通函数和箭头函数有什么区别？箭头函数不能用于 new，this 指向不同：普通函数指向调用该函数的对象，箭头函数根据声明的位置决定 this
🟢 apply、bind、call 有什么区别？
都是可以实现改变函数内部 this 的指向。第一个参数都是 this 要指向的对象。
第二个参数：apply 是以数组形式传入、bind、call 则是以平铺参数传入。bind 直接改变了绑定的函数
箭头函数能否使用 apply、bind、call？不能。
🟢 讲讲为什么会有内存泄漏，什么情况下会有内存泄漏的风险？
内存泄漏：闭包、未注销事件/定时器、直接使用函数内未定义变量会绑定到全局对象 window
常见的内存垃圾回收机制 GC 清理算法：
- 引用计数。为每个对象设置引用数字，引用关系变化时引用计数器会修改对应的引用数字，引用数字为 0 时立即回收。 缺点：无法回收循环引用的对象。
- 标记清除。定期遍历所有对象并标记活动对象（可达对象），然后将不可到达的对象释放掉。缺点：容易产生碎片化空间，浪费空间，不会立即回收垃圾对象，清除垃圾对象时程序暂停。
- 标记整理。标记清除可以看作是标记清除的增强。标记的阶段和标记清除一致。清除阶段会先执行整理，移动对象位置。
🟠 用过 TS 么？有哪些基本类型？写过泛型么？
🔴 以往项目中有埋点相关业务么？是如何实现的？第三方/自研接口？
第三方会有引用埋点包后有实现自动上传数据的功能。比如点击元素自动埋点上传、页面跳转自动埋点上传，而这些不需要开发者额外写代码，你知道是如何实现的么？
🟢 基础变量相关
var a = ‘a’
var b = new String(‘a’)
a == b // true
a === b // false
a、b 分别是如何在内存中存放的
Const b = new String(a)
a、b 分别是如何内存中存放的
a = ‘c’
那么，b 的内容是否会发生变化？
🟢 基础函数相关
var a = function () {}
function b () {}
var c = new function()
分别解释一下这三种方式 js 内部是如何实现的？
js 编译器是如何解析声明函数的？
🟢 基础算法相关
🟢 手写 字符串转数字 思路
🟢 手写 快速排序 思路
🟢 手写 将一个数组顺序随机打乱 思路
🟢 手写 统计一个字符串中 每个字符出现的次数 思路
⚪ 手写 反转链表 思路
四、框架相关
🔴 能简单说一下 MVVM 模型的概念么？
🔴 Vue 生命周期都有哪些？在对应生命周期适合做那些事情？
🔴 Vue watch 和 computed 有什么区别？watch 深度监听数组、对象如何处理？computed 缓存计算结果优化性能。那么在你之前工作项目中什么场景会用到了 watch，什么场景用到了 computed？
🟠 Vue 、React 你觉得有什么不同，你更喜欢用哪个。
🟠 Vue3 有使用过么？Vue3 和 2 相比有什么区别？
🟠 Vue 数据双向绑定的原理是什么？Vue2 是通过 Object.defineProperty，Vue3 是通过 Proxy 分别有什么优缺点？
🟠 了解过路由守卫么？平时项目中什么场景会用到？
🟢 缓存页面状态应该用什么？keep-alive 用过么？keep-alive 如果单独想要缓存几个页面如何处理？
🟢 Vue 使用过动态组件么？
⚪ input 标签的 v-module 是如何实现数据双向绑定的。
⚪ Vue 文件中 template、style、script 哪些是必须的？template 必须，style、script 没有也可编译通过。
⚪ Vue 用有 watch 这个概念，那 React 中，传入子组件字段变化，组件渲染逻辑跟着变化，怎么实现？componentDidUpdate 无法实现深度监听如何处理？
🔴 React 生命周期都有哪些？在对应生命周期适合做那些事情？
🔴 父子组件如何传值、兄弟组件如何传值。
🟠 React 的 this.setState 是同步还是异步？setState 为什么合成事件和钩子函数中是异步的，在原生事件和 setTimeout 中都是同步的？
🟠 React 的 useEffect()封装了什么生命周期？
🟠 React 的 useCallback()什么场景会用到？与 useMemo()相比有什么区别。
🟠 用过 Hook 么？为什么诞生了 hook，是为了解决什么问题。
🟠 有用过 React 高阶组件么？封装组件，可以实现对参数透传。
🟢 React 的 Hook 可以在循环中使用么？那可以再条件判断中使用么？为什么？
🟢 React 的版本平时用的是多少？16、17、18 分别有哪些更新？
🟢 React 的 useState 和 this.setState 有什么区别？useState 只能改变绑定的变量，this.setState 可以一次性修改多个变量。
⚪ React 的绑定的事件和原生事件一样么？不一样，原生的消息继承自 MouseEvent，React 的消息继承自 SyntheticEvent（合成事件）。event.nativeTarget 是真正的原生消息。
🔴 说一下你对 Redux/Vuex 的理解。状态机，把所有状态存到一个对象中，如何读值、如何写值。会触发页面的响应式么？
⚪ 我在项目中声明一个全局对象，这样是不是就没必要使用 Redux/Vuex 了？
🟠 有个数组[0..100]，实现个 list，循环渲染列表。key 的作用是什么。
🟠 简单说一下虚拟 DOM 是什么？为什么要引用这个概念？
🟠 了解过自己所用的框架源码中的 diff 算法？
⚪ 路由跳转传参有几种方式，PC 端通过传参来控制页面是编辑/展示状态，如果我手动将 url 中参数修改了，怎么防止这种情况。如果页面用户主动 F5 刷新了，怎么处理。
🟠 小程序 webview 是如何 H5 与小程序通讯的。
H5 网页向小程序通讯，H5 页面通过引用https://res.wx.qq.com/open/js/jweixin-1.3.2.js，然后使用wx.miniProgram.postMessage向小程序发送消息。
小程序向 H5 页面通讯，webview 组件的 src 字段后面 url 拼接参数。
🟢 小程序原生由于 setData 效率很慢，如何处理？渲染进程、数据处理进程。
⚪ Taro 有使用过么？有做过跨端项目么？跨端遇到过什么问题，最后怎么解决的？
⚪ 小程序的生命周期有哪些？小程序 onShow / onLoad 生命周期什么情况下会触发，一般什么业务场景会用到这两个生命周期。
⚪ 小程序太阳码码生成过么？小程序的登录流程熟悉过么？小程序授权流程熟悉过么？
⚪ 小程序图片长按识别二维码怎么开启，想要长按图片然后绑定事件如何实现？
五、项目相关
🔴 遇到过跨域问题么？为什么会有跨域问题，同源策略是为了防止什么情况的发生？
你在平时开发中面对跨域怎么解决的。
前端调整：项目的 config 配置代理 或者 浏览器追加参数 –disable-web-security
后端调整：jsonp 、CORS （Access-Control-Allow-Origin）
🟢 cdn 加速是怎么实现的？用户和服务器之间增加 Cache 层，智能 DNS 负载均衡系统解析域名，把对用户响应速度最快的 IP 节点返回给用户。
🟢 配置过 webpack 么？
🟢 开发阶段有优化打包效率的相关经验么？webpack / vite
⚪ 有跨端项目经验开发经验么？怎么实现的？遇到过什么坑？
⚪ 微信小程序插件有做过么？
⚪ 有大屏经验么？字号的适配怎么实现，用 px 可以么？
⚪ 有 Canvas 的经验么？是矢量图还是位图？生成 canvas 保存之后图片会很模糊怎么解决。
⚪ 有 ECharts 的经验么？
⚪ 简单说一下如何使用 ECharts，如何初始化 this.mapChart = echarts.init，
⚪ 通过什么 api 渲染图像。this.mapChart.setOption
⚪ 本地随机生成的背景颜色，然后要在此颜色上显示文字，文字的颜色，希望能通过代码的方法来判断，背景颜色深就用白色显示文字，背景颜色浅就用黑色，这个有思路可以代码实现么？
⚪ 有实现登录功能么？知道 Auth2.0 登录么？如果用 hash 路由，返回来的结果参数被拼到.html 与 # 之间了。你需要怎么处理？
⚪ React const {list} = this.state 然后直接对第一个对 list[0] = 111，this.setState(list)可以触发渲染么？
⚪ Vue 直接 this.list[0] = 1111, 可以触发渲染么？
⚪ 你在之前的项目中，表单校验一般如何实现的？
⚪ 如果这个 List 数据非常多，会白屏一段时间，你有什么好的优化方案？
⚪ UI 给出 List 空列表样式，不过页面请求接口获取数据，接口请求时，列表没有数据 就会闪过空列表样式，你怎么解决。
六、开放问题
🔴 有对项目性能优化方面的经验么？
只把用于渲染的变量放在 state。逻辑中间变量尽量不要放到 state 内。不然每次渲染都会 diff 处理 state 中的字段。过多无意义的比较，会浪费性能。
懒加载组件/图片，减少接口调用，图片资源压缩，cdn 加速，白屏优化，节流、防抖，骨架屏，虚拟列表等。
css 样式放在 head 里，js 脚本放在最后。
🟠 简单说一下浏览器从输入 url 到获得页面经历的所有事情：
- 输入网址
- 缓存解析
- 域名解析
- tcp 连接，三次握手
- 浏览器发送请求（请求头、请求体），服务器返回响应（响应头、响应体）
- 页面渲染
- 生成 DOM 树
- 解析 CSS 样式
- 加载 js 脚本，实现交互
🟢 如果生产上出现了问题，你一般会如何去定位问题？SourceMap 用过么？
🟢 说一下自己工作中遇到最困难的问题是什么，你是怎么解决的？或者说一下在你工作中最有成就感的事情。
🟢 能简单说一下自己的优势么？你相比于其他开发同学你有哪些核心竞争力？
🟢 如果给小伙伴安排工作，不过他不服从安排，你应该如何处理？
🟢 如果 2 个领导给出的意见不一致，你会如何处理？
🟢 有为团队中作出什么贡献的事情么？
⚪ UI 库的样式跟设计稿不匹配，你会怎么处理？
⚪ 平时用过缺陷管理系统么？禅道，tapd？
⚪ 自己有从头搭建过项目的经历么？
⚪ 有做过 封装公共组件，封装插件，开放辅助工作的工具和脚本。封装了哪些？为解决什么问题？
后记
哈哈，本来准备在放飞理想的咸鱼博主后面加一个（先苟一波），
后来想想还是有点太怂了，实在是下不去手。
富贵不能淫，
贫贱不能移，
威武不能屈，
理想还是应该放飞放飞。😎