背景简述

本人23届CS弱相关专业，自学前端两个月，做过微信小程序的全栈开发项目，简历里写的技术栈是三大件+node+vue，除此之外无开发岗实习经历。当时是有学长给我了部门定向内推，日常实习，整体过程还算挺顺利的，觉得题目也相对基础。

面试问题

一面（约40min

1. 介绍项目

2. jwt在项目中的具体实现，必要性？为什么不用微信API的鉴权？（答官方文档建议开发者自定登录态）

3. tcp与udp区别？应用场景？

4. get与post区别，应用场景？在项目中的使用？

5. http缓存控制，协商缓存？

6. https如何保证安全的？加密方式？公私钥交换过程？

7. 跨域是什么？产生条件？在微信小程序中的运用？解决了什么？

8. jsonp有了解过吗？（答没有什么了解，之前看到跨域解决方案的时候有看到过对比，没有深入了解，熟悉的是cors和nginx反向代理。然后也没有追问下去了）

9. 看输出，解释原因

   // 1.局部作用域与全局作用域
   let val = 1;
   function foo() {
     console.log(val);
   }
   function bar() {
     let val = 2;
     foo();
   }
   bar();
   
   // 2.this指向
   window.name = 'ByteDance';
   function A() {
     this.name = 123;
   }
   A.prototype.getA = function () {
     return this.name + 1;
   };
   let a = new A();
   let funcA = a.getA;
   console.log(funcA());
   // 解释完上面答下面这种情况
   console.log(a.getA());
   
   // 3.this指向(call)
   const obj = {
     birth: 1990,
     getAge(year) {
       let fn = y => y - this.birth;
       return fn.call({ birth: 2000 }, year);
     },
   };
   console.log(obj.getAge(2020));
   
   // 4.执行顺序
   async function async1() {
     console.log('async1 start');
     await async2();
     console.log('async1 end');
   }
   async function async2() {
     console.log('async2');
   }
   console.log('script start');
   setTimeout(() => {
     console.log('setTimeout');
   }, 0);
   async1();
   new Promise(function (resolve) {
     console.log('promise1');
     resolve();
   }).then(function () {
     console.log('promise2');
   });
   console.log('script end');
   

10. 算法：栈模拟队列 剑指 Offer 09. 用两个栈实现队列 - 力扣（LeetCode） (leetcode-cn.com)

二面（约70min

1. 介绍项目，看项目后端中某个具体功能的具体代码（图片上传与处理）

2. 实习经历？（简历上写的hr岗怎么就整开发了呢？噢，原来是用python编写脚本、使用文档，提升部门某项重复性耗时工作的工作效率）

3. 浏览器不同标签页面通信？同源、跨域情况下？（可能我一直都没答到点子上，一直让我说有没有其他的方案，说了好几个能想到的，包括storage api,server侧配合websocket甚至外部应用程序

4. localStorage，sessionStorage区别？

5. css实现三角形！（我答的transform: rotate(45deg)然后在父元素overflow: hidden，插问了rotate的旋转中心怎么确定。总之是没答到正解border的点子上）

6. css position属性有哪些？区别是什么？详细说说fixed的定位方式？

7. 看输出，解释原因

   //1也是关于this的，还有闭包，和一面差不多
   
   //2. 作用域？变量提升？
   for(var i=0;i<5;i++){
     setTimeout(()=>{
       console.log(i);
     },0) 
   }
   //3也是关于event loop的，和一面的执行顺序差不多，让具体解释了一下宏任务和微任务

8. 算法：查找json中的children路径
   现有如下json（简化为对象），已知每个节点id唯一，编写findNode(id)，返回路径，如findNode(5) 输出 1->4->5
   （直接DFS就行，当时一下没想好回溯写了半天没写对，面试结束后两分钟搞定了）

   {
     id: 1,
     children: [
       { id: 2, children: [{ id: 3, children: [] }] },
       {
         id: 4,
         children: [
           { id: 5, children: [] },
           { id: 6, children: [] },
         ],
       },
       { id: 7, children: [] },
     ],
   };

9. 算法：合并两个有序数组88. 合并两个有序数组 - 力扣（LeetCode） (leetcode-cn.com)，要求时间O(m+n)。改进：输入的两个数组各自有序，有可能分别是升序，降序情况

三面（约40min

1. 项目整体设计思路与逻辑、架构（感觉很棒的是面试官从项目本身的需求出发，一起探讨了项目的设计和方向，还给项目提出了建设性意见，而不是模板式的让我说有什么难点、解决方案）
2. 前端是怎么学的？
3. promise原理与实现（我答了发布订阅模式的实现方法，说逻辑没让写代码）
4. 那已经有发布订阅模式了，为什么还要promise（我答promise是用这个模式来解决异步回调地狱问题balabala，扯到了事件循环）
5. 事件队列保存在哪？执行栈呢？

HR面（约20min

时间不长，主要聊了爱好、为什么选择前端？学习方法？详细聊了聊之前的实习经历的工作？读不读研、职业规划？可以实习的时间，公司待遇方面的介绍。

最后

由于篇幅原因，这里分享最有用的面试题部分，我把我的学习历程、面试流程、实习一月的体验的记录与总结（其实挺多废话的hhh）都发在了自己的blog上，这里遵守牛客的相关规章只发名称，不做引流，感兴趣的可以自行在搜索引擎搜索 @西行寺悟空の小站 。有任何问题也可以和我在评论区交流，希望大家都能收到理想的offer~