【面试题】喔影网络科技面试题复盘
1. 分别用Flex布局和Grid布局实现两边固定中间自适应三列布局
相关文章：https://juejin.cn/post/7249010956935266364?searchId=202407250009004EE0BBD1E792FB92FB60#heading-5
- Flex: 两边给固定宽度，中间给 flex；1；
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}.wrapper {width: 100vw;height: 100vh;display: flex;}.wrapper div {height: 100vh;text-align: center;line-height: 100vh;}.left {width: 200px;background-color: blue;}.right {width: 200px;background-color: green;}.center {background-color: red;flex: 1;}</style>
</head>
<body><div class="wrapper"><div class="left">left</div><div class="center">center</div><div class="right">right</div></div>
</body>
</html>
- Grid: grid-template-areas + grid-template-columns
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}.wrapper {width: 100vw;height: 100vh;display: grid;grid-template-areas: 'left center right';grid-template-columns: 200px 1fr 200px;}.wrapper div {height: 100vh;text-align: center;line-height: 100vh;}.left {background-color: green;grid-area: left;}.right {background-color: blue;grid-area: right;}.center {background-color: red;grid-area: center;}</style>
</head>
<body><div class="wrapper"><div class="left">left</div><div class="center">center</div><div class="right">right</div></div>
</body>
</html>
2. Http1.1 和 Http 2 有什么区别？
- 新的二进制格式；
- 多路复用：同一个TCP连接，客户端和服务器可以同时发送多个请求和多个响应，并且不用按照顺序来。
- header压缩。HTTP1.x 的 header 带有大量信息，而且每次都要重复发送，HTTP2.0使用encoder来减少需要传输的header大小，通讯双方各自cache一份header filelds表，既避免了重复header的传输，又减少了需要传输的大小。
- 服务端推送：同SPDY一样，HTTP2.0也具有server push功能。
文章：https://juejin.cn/post/7079936383925616653?searchId=202407242211408D655255B4472C750A77#heading-21
3. TSX解决了 Vue3模板的什么问题？
- 逻辑复用：在 Vue 模板中处理复杂的逻辑可能会使模板变得冗长和难以维护。使用TSX，可以将逻辑封装在函数或组件中，更容易复用和管理。
- 更直观的条件渲染和列表渲染：虽然Vue模板支持条件渲染和列表渲染，但在TSX中，这些操作可以更接近JavaScript的写法，对于习惯于编写JavaScript的开发者来说可能更加直观。
- 更好的编辑器支持：对于TSX是基于TypeScript的，因此可以获得更好的代码提示、自动完成和重构功能，这些在纯模板语法中可能不那么完善
4. Vue3 和 Vue2 diff算法有什么优化？
- Vue2 - 双端比较
- 新列表和旧列表两个列表的头和尾互相对比，在对比的过程中指针会逐渐向内靠拢，知道某一个列表的节点全部遍历过，对比停止
- Vue3 - 最长递增子序列
文章：https://juejin.cn/post/7152410265261178911#heading-4
5. micro-app 子应用之间是怎么切换的
- 路由配置：主应用配置一个路由规则，用来匹配不同的子应用。Vue- Router；
- 子应用注册：在主应用中，需要使用 micro-app 提供的API来注册所有的子应用。注册时，可以指定子应用的名称、入口HTML文件、基础路由等信息；
- 路由变化监听：当用户导航到不同的路由时，主应用的路由系统会监听到这一变化；
- 子应用激活：当路由变化与某个子应用的基础路由匹配时，micro-app 会激活对应的子应用。激活过程通常包括以下步骤：
- 加载子应用的入口HTML文件；
- 解析子应用的 JavaScript 和 CSS资源；
- 将子应用渲染到主应用的某个容器元素中
- 子应用卸载：当用户离开当前子应用的路由时，micro-app 会卸载该子应用，这通常包括从DOM中移除子应用的元素，并可能包括清理资源等操作