暑期实习结算：那就继续北漂吧～～🎉🎉🎉小编5月之前一直都在公司忙业务，因为mt给的确实是太多了，加上本人比较菜😭

前言

小编5月之前一直都在公司忙业务，几乎是快要癫狂的地步，因为mt给的确实是太多了，加上本人比较菜😭😭，但是时至今日，已经过去了半个月，终于可以在团子这边坐下来跟大家分享我这段充满了惊喜、紧张和成长"暑期实习求职记"啦 🚀🚀

先说一下大概的投递和面试情况吧～

美团：小编这次接受的是美团这边的offer，因为觉得部门比较不错，技术栈我也觉得刚好可以补充一下简历上的漏洞，目前来这边实习了一周多，要比我预想中的好太多了，不仅仅是技术栈方面（前后端都有在写，业务也非常的前沿，在做一些探索的相关业务，和AI靠的也特别近），还有一点就是mt真的很肯培养，感觉就和自己的老师一样，1v1带的那种😌😌，这么重要的模块只有我和mt在负责，基本上是她做好规划之后把40%左右的工作量分配给我吧，然后一起跟进，真的收获满满～～，看来身边的朋友们说的也没错，团子的培养计划真的很不错，也给了我选择团子的底气哈哈
腾讯：腾讯在2月底投递过一次简历，三月份的时候差不多平均每周2面吧，每次流程结束后其他部门都是陆续约我面试，总共面试了4个部门，offer率50%，我觉得那会刚来快手不久，而且大家在3月份几乎是最忙的时候，我也几乎每天并行好几个需求，没好意思离开，而且本人觉得这两个部门的业务确实不太适合我，所以没打算去
快手：投递过两次电商那边的部门，但是都在hr审批流程挂了，后来mt和我说我现在的个人信息存在公司里面，走不了官网内推流程，想去的话可能需要找一下那边的相关同事走下内部流程，我觉得太麻烦了，所以没再去投递
字节：字节内部资深大佬内推后说被卡学历了，他技术侧控制不了，所以我没机会面试，最近总觉得挺遗憾的，而且到目前为止，字节我一次没面试过，罢了，秋招再战！！Fighting！！！

面经分享

这次的话主要是想分享下小编的面经，并且在有的问题下面有我当时的答案或者答题思路，如果有哪里觉得回答的不好的，欢迎在评论区讨论，这也是我写这篇文章的最重要的原因之一，还有就是腾讯这边基本上把同一个部门几轮面试的内容整合在一起了，大部分都没记起来，只统计了下印象比较深的问题吧，考的算法啥的也没统计，三月份业务太忙没时间去详细记录(最忙的时候和腾讯面试官申请了5min去上线需求呜呜呜😭，太牛马了)

腾讯 - IEG

上一段实习主要负责的内容
为什么采用微前端
为什么采用qiankun
常见微前端方案和原理，以及优缺点对比
monorepo 怎么实现的，为什么微前端里面还要通过 monorepo 实现，我记得 qiankun 里面原本就可以实现

我记得external确实可以实现，但是官网描述太少了，也没有较好的实践参考，并且司内有 monorepo 相关的实现案例
qiankun的沙箱是怎么实现的

proxy、快照、legacySandbox
你vue3里面怎么实现对于vue2里面的源码引用的
你手写了webpack插件转化为绝对路径怎么实现的

主要是获取compiler进行路径映射，核心在于包装一个class类，实现apply方法
为什么还要手写插件实现呢，不是使用pnpm的workspace实现了源码引用了吗

源码引入路径太长，做一下优化
alias不能实现吗

我印象中alias是在自己独立的子应用下配置的路径别名，对于monorepo之间应该行不通
有没有想过对于复用的部分可以编译打包到通用的部分，直接使用dist产物，会不会更方便一点
请你说说pnpm为什么比其他包管理器快，原理怎么实现的
幽灵依赖是什么，pnpm怎么解决的

前面知道，这点忘记了,当时回去补习了一下，尤其是符号链接～～
除了fcp还有什么其他指标吗、影响fcp的因素有什么，如何优化？

后面还追问了工程化相关知识，比较开放性的话题，不再赘述
我上面说主要依据lighthouse进行分析，面试官说这个只是我自己设备上的测量数值，不具代表性，问我怎么实现一套通用模版去分析从而获取可靠的数据
除了对这个指标进行监控，还有其他的性能监控吗

其他部分我说的是埋点的时候才会涉及到监控的概念，单独对于webpack的优化的话，主要是fcp,所以这里肯定是有缺陷的，后续要补充
说说你对http的理解

从发展历程来讲：1.1不记得细节了，其他的0.9、1.0、2.0和3.0说了，其实应该先说一下http的概念和特征等等,我后面想了下觉得自己好蠢，这里的回答有点潦草了，引以为戒哈
你说了http3.0使用udp优化，那是怎么保证可靠传输的呢

主要还是Quic协议
tcp和udp的区别与使用场景
为什么tcp是三次握手而不是两次或者四次

三次是保证客户端和服务端的接收和发送能力正常的最少次数,可以展开说说
说说你对http报文的理解

可以从请求报文和响应报文来回答
单点登录实现流程以及原理是什么，你的凭证存在哪里

我说了后端的凭证存在redius上，面试官提示了一下前端存在哪里，这里被自己蠢笑了哈哈，我补充了一下必要性，因为司内采用的是单个长token的方式实现单点，由于token不可撤回，所以存在sessionStorage里面降低风险
你单点的父子应用之间这怎么通信的

可以理解为认证中心和子系统之间的通信）--》子应用发送ajax请求+本地地址，然后服务端将token拼接在路径上，最后通过中间层重定向回来
单点是在同域下的吗，说一下跨域以及解决方案
扫码登录怎么实现的，说一下原理
扫码除了轮训还有其他方案吗

提了websocket,但面试官还说这个过程其实主要涉及服务端单方面的状态推送，这里抢答了一下sse
vue2和3区别
keep-alive
算法：
1. 移动零(一开始对于数组的fill方法的参数写反了，第一个参数是填充的内容，第二个才是填充的起始位置，看见结果不对才反应过来)
2. 最长公共子序列（我采用二维动态规划解出来的）
反问
1. 主要业务方向以及技术栈
2. 学习建议（建议成体系的去学习一个知识）

腾讯 - CDG

代码题：

不同路径

典型二维动态规划题目，没什么好解释的
promise的手写题: 有两个互不干涉的接口，只要有一个失败页面就阻塞了，你需要做一下统一的错误处理和loading的处理，注意触发时机，分别实现一下，以及模拟出渲染函数，在什么时候拿到数据进行渲染，调用一下

当时的主要写法如下，还是存在有几点问题的，欢迎在评论区讨论，平时手搓这类代码也比较少，所以也只能硬写了哈哈😄😄

import { fetchDataA, fetchDataB } from ...
import { showLoading, hideLoading } from ...
async function init() {
    showLoading()
    try {
        const dataA = fetchDataA().then(data) => {
            return data
        }
        dealWithDataA()
    } catch(err) {
        dealWithCommonError()
    } finally {
        hideLoading()
    }

    try {
        const dataB = fetchDataB().then(data) => {
            return data
        }
        dealWithDataB()
    } catch(err) {
        dealWithCommonError()
    } finally {
        hideLoading()
    }
}

对称加密和非对称加密的理解，怎么做的
对称加密的数据体量比较大的时候在不同设备下会不会有明显的卡顿，测试过没有

有做了埋点相关的上报，但是后来离职后没有相关数据，面试官后来解释了在iOS下的极端情况
对称加密的密钥是怎么生成的，是同一个吗，生成的时机是什么时候

每次发起接口都调用第三方库生成
对称加密和非对称加密主要是阻止了什么攻击

主要是增加传输过程中数据被劫持后破解的难度吧，因为没有使用明文进行传输，可以参考https，它内部也是结合了这两种方式，而且xss和csrf的重点不在这，所以理论上不涉及这两种攻击方式，但是前面说的这个 case 我也说不出这叫什么攻击...
你这个移动端项目是怎么嵌入中国移动app使用的
说说对xss和csrf的理解，怎么防范
在快手这边参与B端架构治理，怎么做的

收集开发时的痛点，目前组内在结合组内的代码结构痛点开发一个AI Lint的vs code插件，有在参与，目前在实验阶段），这块有在重点聊，想不起来了，比如有什么痛点具体分析一下，我说了watch搭配computed对比ref的用法，会被追问这种实际上是框架中的什么问题（大体上可以从数据流分析一下，因为旧版代码写的很冗长，数据追踪难度大

说说对设计模式的理解

只想起发布订阅、单例、策略、观察者、装饰器了，也详细介绍了一下各自的特性
设计模式有哪些重要原则

只记得开闭原则、单一原则了，还提了个叫里氏替换好像
你说这个项目参与技术选型与调研，说说过程
为什么要使用微前端，说说背景
为什么使用qiankun
有遇到什么卡壳点吗
你目前的规划是什么，打算一直留在快手这边还是...还问我4.10号能不能入职之类的
反问：
1. 技术栈，业务方向
2. 学习建议
  1. 从知识点切入，没有什么所谓的八股，大部分也可以运用到我们的开发过程中的
  2. 深入一下原理
3. 从面试官的角度给点长远规划，如果打算深耕前端
  1. 理论 --》实践
  2. 紧跟时代步伐，拥抱AI等

腾讯 - PCG

算法：
1. 从中序和后序构造二叉搜索树
2. 元素的下一个更大元素，没有则返回-1（最后一个元素的下一个元素是数组第一项第一项）
可以理解为下一个更高温度的变种
1. 最大连续子数组和
接着拷打算法变形，比如第二道的每一个元素的下一个更大元素在从后面找，发现没有下一个更大元素之后，会从头回来找，直至自身还是没找到的话再返回-1，以及复杂度分析，当时使用栈去解的，追问我时间复杂度，我分析应该是一个n*线性对数的这种复杂度，不至于到n的平方
工单列表卡顿优化怎么做的，这种无限滚动加载完数据后如果再上拉回来发生卡顿怎么办
说说你对jwt的理解
单点登录怎么做的
你凭证是存在前端还是后端呢，同一个用户登录不同子系统之后认证中心怎么知道这个全局会话是不是你的呢
为什么不存在cookie中

单点登录这里还问了很多，没太记住问题了
cookie和sessionStorage的区别
cookie有什么属性
浏览器缓存，强缓存如何刷新
CDN缓存
XSS、CSRF，他们是如何窃取用户数据的，以及如何防范

腾讯 - WXG

腾讯还面了WXG，当时感觉没问到什么有价值的问题，有点像是KPI，所以当时也没记录下面经

接下来就是团子这边的面试了，当时4月中下旬了，业务相对宽松一点，面经记录的比较详细，如下～～

美团一面

面试官自我介绍
公司内部业务介绍
对美团这边有了解过没
对AI的理解，常见的有哪些，各自的特性，平时你有怎么用
自我介绍
有参与过AI相关的实战吗

目前在组内参与一个AI Lint的插件开发，介绍了背景和我主动担任的工作，推进的流程等
介绍一个让你比较有成就感的项目
qiankun选型怎么做的，是你在负责吗
微前端这块涉及的沙箱解释一下，原理是什么

proxy、快照、legacySandbox
样式隔离怎么实现的，以及原理是什么
有出了什么线上问题吗，原因是什么，怎么解决的
有没有哪个项目比较有遗憾的，就是觉得可以做优化的

介绍了中移app背景业务的埋点相关没做好，曲面屏等特殊设备没有考虑周全等
问了下three.js的项目，主要是做的什么，怎么做的
计算机网络相关：
- 7层模型
  
  tcp、http、ip在哪层以及说说理解等
- http发展史
操作系统相关：
- 页面置换算法
  
  fifo、lru、lfu, 我记得还有一种可以预知未来的置换算法，但是不实际，因为实现不了
- 虚拟内存
  
  逻辑上是连续的，在物理内存的基础上结合了磁盘内存来扩展内存容量
浏览器相关：
- 浏览器缓存
- cookie、sessioStorage、localStorage区别
js相关
- 数据类型以及如何判断
- object.tostring.call()为什么可以判断所有数据类型
  
  object是基类，它的每个子类型都重写了方法

题目

检测一个变量 a 是否是字符串，是的话返回 true 否则返回 false

这个面试官根据刚刚的八股来的，我还反问了一下写的太简短了，总感觉不对劲，然后面试官笑着说有的学生知道这些API，但是不会用，就是想热热身
事件循环

// 请给出输出结果
console.log('1');
async function async1() {
  console.log('2');
  await console.log('3');
  console.log('4');
}
setTimeout(function () { console.log('5') }, 0)
async1();
new Promise(function (resolve) {
  console.log('6');
  resolve(6);
}).then((x) => x + 6)
.then((x) => { throw new Error('My Error') })
.catch(() => 7)
.then((x) => x + 7)
.then((x) => console.log(x))
.catch(() => {
  console.error('error')
})
console.log('8')

数组扁平化

这个其实有很多种写法，reduce，while循环，递归，filter，map，some等，我采用递归是因为前面面试官问了我怎么判断数据类型，我讲到了Array.isArray(XXX)，我就主动和面试官说用这个写，后面就是一边写一边讲解思路了，因为我想回扣一下前面的内容，适当展示下学以致用层面的能力吧

function flat(oldArr) {
  let result = []
  const _flat = (values) =>  {
    for(const value of values) {
      if(Array.isArray(value)) {
        _flat(value)
      } else {
        result.push(value)
      }
    } 
  }
  _flat(oldArr)
  return result
}
console.log(flat( [1, 2, ['str', 4]]))

三栏布局

左中右三栏布局，高度占满整个屏幕。左右两列固定100px，中间填充满剩余空间

以下是我面试时的写法:当时在中间的容器采用 width: auto; 发现没效果，页面上调试发现实际宽度为0，并没有实现自适应，其实使用 flex: 1; 应该就可以了，我想秀下css的功底，所以使用了 calc(100vw - 200px) 这个计算函数实现的（一开始写成clac没效果，后来想起calculate这个单词，不然差点翻车了，因为在快手这边都是在写b端，n年没写一行css...）

 <!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <style>
       /* 填写样式 */
       * {
        margin: 0;
        padding: 0;
       }
       .parent {
          width: 100vw;
          height: 100vh;
          display: flex;
       }
       .child1 {
        width: 100px;
        order: -1;
        background-color: aqua;
       }
       .child2 {
          width: calc(100vw - 200px);
          background-color: blue;
          order: 1;
       }
       .child3 {
        width: 100px;
        order: 2;
        background-color: skyblue;
       }
    </style>
</head>

<body>
    <div class="parent">
      <div class="child1"></div>
      <div class="child2"></div>
      <div class="child3"></div>
    </div>
    <!-- 填写标签 -->
    <script type="text/javascript">

    </script>
</body>

</html>

反问
1. 技术栈
  
  开头介绍了业务，所以不再问业务了
2. 学习建议
  
  面试官说无论是知识面、手写代码功底还是项目阅历都不错，所以也不敢说是建议，只能说是讲一下她个人的学习方法，当时听到这个评价还是很震惊的，我只是小菜鸡一枚～～
其实不少时候是在跟面试官聊天，不知道是不是我的错觉，挺好的一次面试，聊了不少诸如下面的话题：
1. 哪里人
2. 学校课程多吗
3. 你是打算继续在快手这边待下去还是说你有什么规划
4. 手头有没有其他的offer
5. 你觉的北京天气干不干
6. 我（指面试官）这边的业务不是很忙（应该是前面我说了在快手很忙，以及原因等等）
7. ......

美团二面

自我介绍
开源项目

自我介绍的时候说的，简历上没更新上去
1. 是什么
2. 你负责什么
3. 看下你写的具体代码，分析一下
拷打了掘金博客相关的内容

面试官点击我的掘金主页看了，他看了一遍然后挑了几篇来问我
拷打AI 层面的知识
1. 具体实践
2. Mcp 协议以及相关实践
  
  model context protocol吧，探讨了他的概念和能力等等
3. 放到项目中分析，比如它会不会已读乱回，怎么调整
4. ......
快手这边负责内容

被拷打了AI Lint插件（我只是根据组内业务引出来的），起码问了20分钟，人麻了（所以如果不熟悉的话还是少这样做，会给自己挖坑，尽量让面试官往你擅长的知识点靠吧），围绕你做的功能怎么实现，出现什么问题怎么处理，比如：
1. 你对一个变量命名怎么约束一个拼音的格式？我说的是数据集里面去检索的思路，还被追问一大堆
2. 规则怎么添加进去的（参考eslint，结合ast，同时维护一个树形结构的json文件，命中规则就触发提示,而且规则还会分为三个等级，严重为error，次之为warning，最后为info）
回流重绘
如何减少回流
react相关
1. useState异步还是同步更新
在react可以管理的范围之内应该是异步的，可以理解为一种优化手段吧
1. React hook
vue相关
1. 生命周期
性能优化相关

我主要从懒加载，缓存（cdn，浏览器缓存等），代码切割，树摇优化，资源大小和请求数量层面等分析
算法：旋转字符串

/**
         * 代码中的类名、方法名、参数名已经指定，请勿修改，直接返回方法规定的值即可
         *
         * 旋转字符串
         * @param A string字符串 
         * @param B string字符串 
         * @return bool布尔型
         */
        function solve( strA ,  strB ) {
            // write code here
            let curr = '';
            for(let i = 0; i < strA.length; i++) {
                let temp = strA.slice(i)
                if((temp + curr) === strB) {
                    return true
                }
                curr = strA.slice(0, i + 1)
            }
            return false
        }
        module.exports = {
            solve : solve
        };

我当时一边写一边解释，运气比较好，一次就跑通了所有测试用例（上面可以优化一下边界条件的处理），面试官说进入下一个流程吧，我反问了下为什么不再考一两道呢，他说写的比较快，思路很清晰，没必要再考了哈哈😄😄

反问
1. 学习建议
2. 在前端路上有没有什么是觉得比较遗憾的，就是如果再给你一次机会，你会怎么做
  1. 这块聊了不少，面试官的会议室时间到了，说还是很想和我一起聊聊，所以他在走廊上继续和我聊哈哈，主要涉及以下几个方面
  1. 阶段不同，开发模式也有出入
  2. 人生阅历不同，认知能力不同，但是还是举了他例子
  3. 最后他总结了下自己的想法，也就是向未来看齐，同时让我继续保持
3. 反馈时间

总结

简历篇：

不知道大家看完有没有发现，其实不同轮或者不同公司的面试，我被提问的问题不太一致，因为内容写的比较多，所以八股问的就比较少了，平时基本上都在专心处理业务，所以这也正是我想要的结果，各位小伙伴如果想要面试官多问你哪个层面的问题其实我们是可以在简历上去侧重写的，去引导面试官往我们擅长的领域去问我觉得是可取的，我个人比较喜欢面试官问我项目～～

个人学习习惯：

我个人在实习期间的学习习惯主要如下：

每天早上提前半小时来到工位上，花半小时去简单组织下今天的计划

晚上的话我很喜欢去花 30-40min 去总结下今天学习了什么，有什么收获，以及反思等，大部分是业务驱动型的思考方式，从而引出相关的决策方案等

最后还是潦草收尾了吧哈哈，小编在写这篇博客之前打算多写写感悟的，但是太懒了，算了吧～～，还有就是请留下你宝贵的点赞和收藏噢🌹🌹🌹