2024 前端高频面试题，刷到就是赚到

1. vue3 新增了哪些特性

• 响应式的变化，检测数据变化的api从defineProperty换成了Proxy，消除了vue2的很多限制，减少defineProperty 递归产生的性能损耗
• 组件写法改变，vue2 是选项式 api，vue3 是组合式api，可以跟typeScript 更好的结合
• 新增Fragment 多节点写法和Portal(teleport组件) 传送门
• 全家桶的变化，vue2 使用vuex ，vue3 推荐使用pinia（仍然可以可以使用vuex4.0）
• 响应式与temlate分离，响应式数据不拘泥于vue实例中，使用 ref, reactive 做函数响应式，可以封装hooks函数，可以多页面公用的局部响应式变量，满足多样化开发需求。

2. es6 新特性

• let / const 修复了var变量提升问题, 使用let，const 的局部作用域形成暂时性死区
• 新增了 Map, Set , symbol 数据类型
• 箭头函数，解决函数调用this指向改变的问题
• 扩展运算符，可以在对象，数组赋值使用，也可以用于函数的形参解析
• Promise 异步微任务，原型方法，then，finally，catch， 静态方法， all, race, any, reject, rosolve 等
• async / await 实现异步的同步写法，generator函数和Promise 的语法糖
• 函数的默认参数/剩余参数扩展运算符 name=‘zhangsan’
• 模板字符串
• Object新增原型方法(keys, values, entries, getPrototypeOf, setPrototypeof,isPrototypeof, assign), Array 新增原型方法（find, forEach,findIndex, reduce, map, filter）等
• 对象属性简写（属性名和变量名一样的时候）
• class 声明类关键字
• 数组和对象的解构赋值
• includes 和 for of 和for in

3. Diff 算法原理

1. 对比节点本身，是否是同一节点，要是不同节点，直接进行替换
2. 若都是同一节点，进行 patchVnode 若新节点有子节点旧子节点没有，直接将子节点插入，若新节点没有子节点旧子节点有，则删除子节点
3. 若新旧都有子节点，则进行updateChildren,匹配时候，找到相同的子节点进行递归比较
4. 只会比较同一层级的，判断是否相同：判同条件有：判断标签名称，key值是否相同
5. 匹配到相同子节点会重新执行第二步操作

4. TCP 三次握手

1. 第一次握手，客户端给服务端发一个SYN报文，并指明客户端的初始化序列号 ISN，此时客户端处于 SYN_SEND 状态。
2. 服务端收到客户端的报文之后，会以自己的SYN 报文作为应答，并且指定自己的初始化序列号ISN。同时会把客户端的ISN+1作为ACK的值，表示收到客户端的SYN,服务器处于SYN_REVD的状态
3. 客户端收到SYN报文滞后，会发送一个ACK报文，把服务器的ISN+1作为ACK的值，表示收到，客户端处于ESTABLISHED状态， 服务器收到之后也处于同一状态，此时，双方建立了连接

5. js事件循环机制

• js是单线程，因为要操作dom，因此将定时器，接口请求等需要异步操作的放入一个事件队列中。
• 异步的进入 Event Table 并注册函数。当同步任务完成后，Event Table 会将这个函数移入 Event Queue。主线程内的任务执行完毕为空，会去 Event Queue 读取对应的函数，进入主线程执行。上述过程会不断重复，也就是常说的 Event
  Loop(事件循环)。

6、 vue 模版解析原理

共分为三个阶段： 解析 parse， 优化 optimize, 生成 generate,最终生成可执行函数render

• 解析阶段：使用大量的正则表达式对template字符串进行解析，将标签、指令、属性等转化为抽象语法树AST。
• 优化阶段：遍历AST,找到其中的一些静态节点并进行标记，方便在页面重渲染的时候进行diff比较时，直接跳过这些静态节点，优化runtime性能
• 生成阶段：将最终的AST转化为render函数字符串

7、vue 响应式

• data、或者ref里面的数据，添加数据劫持，vue2是defineProperty，vue3是proxy，添加get/set劫持
• 当vue compiler对template编译时，触发响应式数据get方法，初始化视图，并订阅watcher，此时watcher将自己添加到消息订阅器Dep中
• 当数据更新时候，触发 Observer 中的setter方法，立即调用Dep.notify(), Dep数组遍历所有的订阅者，并调用其update方法，Vue内部再通过diff算法，patch相应的更新来完成订阅者视图改变

8、vue-router 有哪些钩子函数

• 全局前置守卫 router.beforeEach
• 全局解析守卫 router.beforeResolve
• 全局后置钩子 router.afterEach
• 路由独享的守卫 beforeEnter
• 组件内的守卫 berforeRouteEnter、beforeRouteUpdate、beforeRouteLeave

9、浏览器渲染的步骤

1. html 解析出DOM Tree
2. css 解析出 Style Rules
3. 两者关联生成 Render Tree
4. Layout(布局) 根据Render Tree 计算每个节点的信息
5. Painting 根据计算好的信息进行渲染整个页面

10、http的强制缓存和协商缓存

• 强缓存是我们第一次请求资源时在http响应头设置的一个过期时间，在时效内都是直接从浏览器进行获取，常见的http响应头字段如：Cache-Control和Expires
• 协商缓存是我们通过http响应头字段etag或者Last-Modified 等判断服务器上的资源是否修改，如果修改则从服务器重新获取，如果未修改则304指向浏览器缓存中进行获取

11、vue2 和 vue3 diff 算法的区别

1. virtual DOM 的优化 静态提升
   vue2 针对整个virtual DOM 树进行了完整的比较，导致大型应用中可能存在性能问题
   vue3 中通过静态分析和标记，将组件标记为静态，动态或者稳定，从而避免不必要的virtual DOM 比较，提高了渲染性能
2. 动态指令的优化(v-for 和 v-if)
   vue2 中的动态指令的diff算法在某些情况下效率不高，导致不必要的重新渲染
   vue3 中通过优化动态指令的处理方式，提高了动态指令的diff效率，减少了不必要的更新操作，提升了性能
3. 事件侦听的优化 vue3 做了事件监听缓存
4. 静态树处理
5. FragMents的处理

12 数据类型检测的方式有哪些

1. typeof 基本类型 null, [], {} 都被事物object
2. instanceof
3. constructor
4. Object.prototype.toString.call()

13 new 一个函数的过程发生了什么

1. 创建一个对象 obj = {}
2. 将构造函数的作用域赋值给新的对象（obj.setProtoTypeOf(fn.protocoltype)）
3. 绑定这个对象执行一下构造函数，如果有返回值，就取返回值，如果没有返回值就取对象 obj

14.对vue 设计原则的理解

1. 渐进式JavaScript框架
2. 易用性
3. 灵活性
4. 高效性

15. 路由的hash和history模式的区别

• hash 模式，默认模式，URL带 # 路由切换不会请求http， ie8 也支持，支持度好，成为前端路由 SPA 标配
  原理是onhashchange()事件
• history 没有#, 符合传统，传统路由分发模式，服务器会接收这个请求，解析这个URL
  特点： 更好看，需要后台配置支持，做个通配符就可以了，
  API: html5 history interface 中新增的pushState() 和 replaceState() 方法，达到改变url不刷新页面的效果，切换历史状态
  forward()/back()/go() 结合浏览器的原生后退前进按钮

16、网页的重绘和重排以及优化措施

网页的重绘（Repaint）和重排（Reflow）是网页性能优化中重要的概念。
重绘是指元素样式的改变引起浏览器重新绘制元素，但不影响其在文档流的位置，例如改变颜色，背景等
重排是指元素的尺寸、位置等属性改变以前你浏览器重新计算元素的几何属性，导致其他元素重新排列。

• 批量修改样式：避免单独修改多个样式属性，可以将它们合并到一起再进行修改。
• 离线操作dom 修改大量元素样式前，可以先将他们从文档流移除，修改完成后再放回文档流
• 使用文档片段： 在需要频繁操作dom时候，可以使用文档片段（DocumentFragment）进行操作，最后一次性插入文档
• 避免强制同步布局：避免在读取布局信息前修改样式，会触发强制同步布局
• 使用css动画： 使用css动画代替jsvascript 操作样式，可以优化性能
• 使用translate 替代top/left：使用transform 属性的translate 替代top和left，因为transform不会触发重排

17、css哪些属性可以从父元素继承

• 字体属性（font-family、font-size、font-weight、font-style） 自动继承
• 文本属性（color、text-align、text-decoration、text-transform、line-height） 自动继承
• 列表属性（list-style-type、list-style-position、list-style-image）自动继承
• 表格属性（border-collapse、border-spacing、caption-side、empty-cells）被动继承
• 背景属性（background-color、background-image、background-repeat、background-position）被动继承
• 元素可见性属性（visibility）被动继承
• 光标属性（cursor）被动继承
• 内边距属性（padding）手动继承
• 边框属性（border）手动继承
• 外边距属性（margin）手动继承

18、如何用webpack 来优化前端性能

• 压缩代码，删除多余代码、注释、简化代码的写法等等方式。可以利用webpack的UglifyJsPlugin 和 ParallelUglifyPlugin 来压缩js文件，利用cssnano 压缩css
• 利用cdn加速: 将引用的静态资源路径修改为CDN上对应的路径。可以利用webpack对于output参数和各loader的publicPath 参数来修改资源路径
• 配置 Tree shaking 将代码中永远不会走到的片段删除掉。可以通过在启动时追加参数 --optimize-minimize 实现
• code splitting: 将代码按照路由唯独或者组件分块，做到按需加载，充分利用浏览器缓存
• 提取第三方库：splitChunksPlugin 插件来进行公共模块抽取，利用浏览器缓存可以长期缓存这些无需频繁变动的公共代码

未完待续~~~