(字节/华为/美团)前端面经记录冷冷清清的金三银四

从毕业到现在已经在北京3年了，当年一起来北京的同学，如今都有了要离开的打算。我也在萌生了想要去成都的想法。然而从投递简历开始，就感受到了今年确实不是很景气。很多大厂不是裁员就是锁HC，面试邀约都显得非常宝贵。

字节（北京）

一面

1. HTTPS建立连接过程

2. 
3. http缓存，强缓存时cache-control字符集是什么 publichttps://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Cache-Control

4. 深拷贝的实现，如果遇到function怎么办 需要判断类型，对于基础类型，直接赋值，对于复杂类型则需要递归处理，并同时设置map，避免嵌套。对于function可以通过 new Function(‘ return ‘+ fn.toString())的方式拷贝

5. webpack 有用过哪些loader、webpack做过哪些优化 loader：babel-loader、ts-loader、style-loader、css-loader、less-loader 优化：提取公共代码、代码分割、代码压缩、按需加载、预加载

6. 微前端的问题，设计思路，有遇到哪些问题，如何做样式隔离。公用路由的设计 采用路由分层的方式，将路由划分为4层，第一层用来区分是iframe还是微应用，第二层用来区分具体的app页面名称由此在配置表中拿到具体的配置信息，第三层为子应用的路由，第4层为子应用的参数。由此实现基座与微应用的路由共享。

• 样式隔离，一是通过qiankun自身提供的样式沙箱 { sandbox : { experimentalStyleIsolation: true } } ，二是vue组件样式使用scoped，三是顶层样式增加私有类名 面试官反馈说，iframe还是微应用对于用户来说是无感的，配置表区分iframe还是微应用即可，不必多占一层路由

6. 为什么要使用composition-api 首先因为业务性质需要兼容ie所以项目只能使用vue2 通过使用@vue/composition-api方式使用新特性。转变以往的vue选项式开发，为更贴近函数式的代码开发。使原本关联逻辑分散在各个选项中，组件代码庞大的问题的问题得到解决，提高代码易读性、可维护性。同时通过抽取hook实现逻辑复用，提升效率。相较于mixin具有隐式依赖等缺点，更具备可用性。
7. 两数之和https://leetcode-cn.com/problems/two-sum/
8. 纯数字版本号数组排序

// 给定一个 row x col 的二维网格地图 grid ，其中：grid[i][j] = 1 表示陆地， grid[i][j] = 0 表示水域。
// 网格中的格子 水平和垂直 方向相连（对角线方向不相连）。整个网格被水完全包围，但其中恰好有一个岛屿（或者说，一个或多个表示陆地的格子相连组成的岛屿）。
// 岛屿中没有“湖”（“湖” 指水域在岛屿内部且不和岛屿周围的水相连）。格子是边长为 1 的正方形。网格为长方形，且宽度和高度均不超过 100 。计算这个岛屿的周长。
// 示例1：输入：grid = [[0,1,0,0],[1,1,1,0],[0,1,0,0],[1,1,0,0]]
// 输出：16
// 解释：它的周长是上面图片中的 16 个黄色的边
// 示例2：输入：grid = [[1]]
// 输出：4

function search(grid) {
    let res = 0
    grid.forEach((line, i) => {
        line.forEach((item, j) => {
            if (item === 1) {
                dp(i, j)
            }
        })
    });
    function dp(i, j) {
        if (i == 0 || grid[i - 1][j] == 0) {
            res++
        }
        if (i + 1 == grid.length || grid[i + 1][j] == 0) {
            res++
        }
        if (j == 0 || grid[i][j - 1] == 0) {
            res++
        }
        if (j + 1 == grid[0][1].length || grid[i][j + 1] == 0) {
            res++
        }
    }
    return res
}
const grid = [[0,1,0,0],[1,1,1,0],[0,1,0,0],[1,1,0,0]]
console.log(search(grid))

三面

这一面就是简单沟通了一下现在的工作情况。电话面试大概10分钟就结束了

美团（成都）

一面

1. http 缓存cache-control字符集 max-agepublicprivateno-cacheno-store
2. 网络安全，页面出现广告什么原因 XSS脚本添加页面？页面劫持、代理？CDN，iframe嵌套 同上
3. 微前端样式隔离，js隔离原理 同上
4. babel原理
5. loader和plugin的区别 同上
6. map和object的区别 map补足了js没有这种字典类似功能的短板。虽然好像map能做的key/value object也可以实现。但是map可以按照顺序递归，key可以是对象等复杂数据类型
7. Object.assgin 与 …复制对象的区别 这个除了使用方式上，并没有感觉有什么不同，之后尝试了一下表现也是一样的
8. 有做过组件库，或者这种公共基础么？有考虑哪些设计原则 单一原则、拓展性、可靠性
9. 有用过哪些ide的能力（变更函数名？） 这个没懂是想问什么
10. 尾递归优化 这个是从调用栈的角度来讲的，通过尾递归优化的方式，释放中间变量

https://zhuanlan.zhihu.com/p/39371113411. ts 用过那些函数，interface和type的区别 interface 可以拓展 extends interface能够声明合并 type不可以extends、implement但是可以类型交叉 type可以声明类型别名、联合类型、元组 interface不可以 12. 扁平化嵌套数组有几种方式

• flat
• toString().split(‘,’)
• 递归

二面

1. 你最近做的事情 在做一个lowCode平台的代码重构，项目采用vue3但是之前是组合式的写法。我们重构主要做了两件事，一是将选项式改为组合式，并抽离hook；二是将整个渲染配置数据从组件中剥离出来，通过响应式的方式构建单项数据流维护
2. 介绍数据流，是否了解市面上其他公共状态管理工具 ，了解Piniahttps://pinia.vuejs.org/introduction.html#basic-example通过vue3提供的响应式api，我们获得了无需借助第三方工具，即可实现公共响应式数据的维护。我们总结了一些经验，可以直接定义响应式数据，以及更新他的set方法通过代码引入，props传递以及porvide/inject的方式灵活使用。感觉这部分表达为什么不用市面上已有的状态管理库而用我们的方案，这部分讲的不够自信，理由不够充分
3. 展开问业务
4. 问微前端的选型原因 一是qiankun的技术方案相对比较完善，无论是常见问题还是社区经验都比较丰富 二是我个人之前有一定的知识储备，使用qiankun能够容易落地
5. 如何寻找到两个dom节点的最近公共父节点 通过从下向上递归，并将父节点储存，比较

美团二面感觉面的不是很好二面之后就没有后续了