前言

本人现在大三菜鸡，想在暑期找一份实习锻炼锻炼自己，所以也去投了一下简历试了试面试emmm感觉自己还是太菜了呜呜呜，真的还得加强一下自己才行，特别是算法方面，太吃亏了呜呜呜。大家最近赶快投！！提前批！挂了也不会计入系统！以后再努力努力！！冲鸭！！

有兴趣可以看看俺整理的知识点或许有所帮助呢~祝大家早日实习上岸！！！ juejin.cn/post/684490…

顺便安利一下小项目~嘻嘻嘻，希望走过路过给个star！

由衷感谢 CVTE 让俺获得人生中第一个offer呜呜呜

总结

提前总结一下吧，这些面试让我感觉到emmm，他们都比较重视计算机网络，网络安全，框架原理方面的知识，HTTP协议，TCP握手，各种网络方面的东东...... 啊好多好多啊基础部分，每次都能问到新的不会的东东，爆哭
总之吧emmm还是基础得打好，框架原理还有node方面也需要重视。然后面试官会审视简历，大多会根据简历来问。所以不熟的没把握的千万不要写在简历上！！！
其次就是如果有自己的小项目就最好啦，面试官基础部分了解过后就会对项目进行提问啊，问问有什么亮点，自己遇到的难点，如何解决。他们很重视解决问题的能力。不过如果项目有明显的的不合理的地方或者不足，他们就会抓出来进行提问，问你将来怎么解决的之类的。
一般会问你是如何学习前端的，然后最近在看什么文章，最近在了解什么新的知识热点等等，平时的积累也是挺重要的，然后也会根据你说的内容来进行提问，所以有能力的话也可以视图引导面试官来提问你擅长的地方哈哈哈哈（手动狗头）

问的东西都偏向于基础，然后慢慢升华一下，到项目，到思维扩展，实际情景的应用等等。面经内容不全，大概就是这些吧！！哈哈哈凑活着看看！或许有帮助！有些东东不方便透露太多，大多都是基础，大噶多背背就行啦！

CVTE 一面（过）

电面，面试官很和蔼hhhh，全程都是以聊天的方式进行下去，问了一下项目也给了一些意见。哈哈哈哈印象最深的就是一直问我觉得自己哪里牛逼哪里牛逼hhhh

主要还是问了项目
js基础
计算机网络

CVTE 二面（过）

视频面，这一面还是有点紧张的，突然看见一个戴着口罩的小帅哥，但就聊了聊，然后还是主要说的项目，然后针对项目的功能问了几个问题，也发现几个不足的地方，提出了挺多的建议的，很感谢这个面试官，看我做不出来算法题也很有耐心给我指导，感动，有一些细节的地方，深入理解的部分，见到我不会也不会为难我，就大概跟我解释一下，很棒！

主要也还是问了项目
浏览器相关（缓存，存储）
实际情景题
算法题

// 根据实例输入输出矩阵规律完成以下 matrix 函数：
function matrix(n) {

}

matrix(n).forEach((item, i) => {
    console.log(item);
});


// 示例 1
// 输入: 3 or 4
// 输出: 
// [ 0, 2, 0 ]
// [ 2, 1, 2 ]
// [ 0, 2, 0 ]

// 示例 2
// 输入: 5 or 6
// 输出: 
// [ 0, 0, 3, 0, 0 ]
// [ 0, 3, 2, 3, 0 ]
// [ 3, 2, 1, 2, 3 ]
// [ 0, 3, 2, 3, 0 ]
// [ 0, 0, 3, 0, 0 ]

// 示例 3
// 输入: 7 or 8
// 输出: 
// [ 0, 0, 0, 4, 0, 0, 0 ]
// [ 0, 0, 4, 3, 4, 0, 0 ]
// [ 0, 4, 3, 2, 3, 4, 0 ]
// [ 4, 3, 2, 1, 2, 3, 4 ]
// [ 0, 4, 3, 2, 3, 4, 0 ]
// [ 0, 0, 4, 3, 4, 0, 0 ]
// [ 0, 0, 0, 4, 0, 0, 0 ]
复制代码

还是算法吃亏，这题没有写出来，面试官给了点思路，提示只需要搞定四分之一，然后可以进行翻转，虽然提示了，但还是做不出哈哈哈，面试完之后试了试才做出来（感谢面试官不挂之恩！）

以下是根据面试官给的提示做出来哒，就是先算好四分之一，然后进行翻转拼接

function matrix(n) {
  // 求长度
  let len = Math.ceil(n / 2)
  let arr = Array.from({ length: len }, _ => Array.from({ length: len }, __ => 0))
  let temp = null
  // 算出四分之一的矩阵
  for (let i = 0; i < len; i++) {
    for (let j = 0; j < len; j++) {
      if (i + j >= len - 1) {
        arr[i][j] = len * 2 - i - j - 1
      }
    }
  }
  // 水平翻转，搞定上半部分
  for (let row = 0; row < len; row++) {
    temp = [...arr[row]].reverse().splice(1)
    arr[row] = arr[row].concat(temp)
  }
  // 垂直拼接
  temp = [...arr].reverse().splice(1)
  arr = arr.concat(temp)
  return arr
}
复制代码

字节跳动（感谢信get√）

视频面，还是算法吃了大亏嗷，全程题面，然后解释各种知识点，提问等，算法给了提示还是做不出来，唉，太蠢了
（为什么还不给我感谢信！！！让我有种错觉可以被捞！！！）

是在官网投的日常实习生，也不知道是不是因为不是内推的原因，自己感觉必挂了，但感谢信迟迟不到，爆哭，好歹呜呜呜我也...努力过嘛，哭（啊，算法！洗内！）

大概记得的就这些主要的吧

block元素水平垂直居中

这里我采用了两种，一种是translate + absolute，另一种是在修改body样式用flex，这里注意一定要把body的height设置为100vh不然会垂直居中不了

<body>
    <div class="block"></div>
</body>
复制代码

读代码解释原因，然后说出浏览器事件循环与node事件循环等知识点

console.log('begin')
setTimeout(() => {
  console.log('setTimeout 1')
  Promise.resolve().then(() => {
    console.log('promise 1')
    setTimeout(() => {
      console.log('setTimeout2 between promise1&2')
    })
  }).then(() => {
    console.log('promise 2')
  })
}, 0)
console.log('end')

// 答案是
/*
  begin
  end
  setTimeout 1
  promise1
  promise2
  setTimeout2 between promise1&2
*/
复制代码

实现求和（柯里化）

sum(1)(2)(3).sumOf() // 6
sum(1, 2)(3).sumOf() // 6
sum(1, 2, 3).sumOf() // 6

// 一下为答案
function curry() {
  let argsList = [...arguments]
  let fn = function () {
    argsList.push(...arguments)
    return fn
  }

  fn.sumOf = () => argsList.reduce((a, b) => a + b)

  return fn
}

let sum1 = curry()
let sum2 = curry()
let sum3 = curry()

console.log(sum1(1, 2, 3).sumOf())
console.log(sum2(1)(2)(3).sumOf())
console.log(sum3(1, 2)(3).sumOf())
复制代码

读程序，并解释为什么，然后说一下上下文之类的各种知识

这里被坑了，没有注意到函数传了一个a进去哈哈哈哈，然后说成了9 18 27，尴尬~

var result = []
var a = 3
var total = 0
function foo(a) {
  var i = 0
  for (; i < 3; i++) {
    result[i] = function () {
      total += i * a
      console.log(total)
    }
  }
}

foo(1)
result[0]()
result[1]()
result[2]()

// 答案是 3 6 9
复制代码

算法，实现全排列

输入"abc"返回他的全排列组合

以下为答案
var permute = function (nums) {
  let path = []
  let visited = Array.from({ length: nums.length }, _ => false)
  let res = []
  DFS(nums, 0, nums.length, path, visited, res)
  return res
};

var DFS = function (nums, curSize, len, path, visited, res) {
  if (curSize === len) {
    res.push([...path])
    return
  }

  for (let i = 0; i < len; i++) {
    if (!visited[i]) {
      visited[i] = true
      path.push(nums[i])
      DFS(nums, curSize + 1, len, path, visited, res)
      visited[i] = false
      path.pop()
    }
  }
}
复制代码

智力题：A,B抛硬币，正面赢，A先手，A赢得概率是多少

这个完全懵逼嗷，大家觉得是多少呢！

阿里 - 不知名部门（暴毙）

电面，这个十分可惜，还没开始准备直接暴毙

React原理
cookie的属性
localStorage和sessionStorage的区别
localStorage能跨域吗
重绘和回流
httponly
csrf 和 xss

阿里钉钉 - 主要为小程序（不合适）

视频面，主要聊了项目，然后问了比较多网络，以及安全的问题，团队主要是做小程序的，问了挺多小程序的东东，直接懵逼，主管还是猛嗷呜呜呜

小程序原生api
https加密原理
好的登录态的实现
React的优势
setState之后发生了什么
React性能优化
hook的原理（如何实现）
小程序运行池
微信浏览器有什么区别
Taro编译的原理
事件代理（捕获阶段可以吗）
React的事件委托到哪

阿里CBU（初面）

电面，感觉怪凶的哈哈哈，前面问的好好的，突然问起了Vue瞬间暴毙，原来是看到我简历上描述有个项目使用Vue开发所以问，以后一定不能吧这些不熟悉的放在简历上了！

事件委托
深浅拷贝的区别
Object.assign
BFC
Fiber
virtual dom
diff算法
hook
webpack流程
webpack打包出来的js的结构，内容是什么
babel编译原理
node的优势
node中，async/await，generator，promise的区别，联系
多用户来访问聊天服务器，你有1000台服务器，应该怎么办（坑啊）
Vue双向绑定如何实现
Vue数据流
Vue与React的区别
一堆Vue.... (还说了句，你不会的还往简历上写？以后不敢了！哭)

阿里飞猪（初面）

电面，这个是聊得最久的呜呜呜，手机都烫了！面试官很好人，emmm就真的很棒棒，全程不会刁难你的那种，不会咄咄逼人，就一直引导你思考，然后问道深入的点，不会的话他也会说没关系~感兴趣的话去了解了解就行了，十分nice啊。
最后根据项目聊了很多也，然后给了很多建议，指出有些地方还可以改进改进，然后我也厚着脸皮问了问之前面试官问我的一到开放题。没想到他竟然给我分享了好多好多种办法，真的太感动了，真的好强好厉害，很详细的告诉以后往什么方向去做，然后如何去思考，如何去实现，最后花了挺长时间来介绍他们的部门，真的很棒！

输入url到页面渲染展示
DNS如何解析
输入域名如何转换为ip地址，然后转到服务器
gzip原理
cookie localStorage sessionStorage
cookie与token的本质区别（session）
闭包及其常见的应用场景
缓存
强缓存如何存
过期时间等参数浏览器是如何获取的
服务器如何设置缓存设置头
缓存的场景
call apply区别
React的事件机制
virtual dom
hooks的优势，为何被喜欢，常用的方式
React数据流
HOC，优势及其常用方式
setState获取更新的值
csrf 和 xss
flex布局，及你常用的方式，兼容性
前端性能优化（你用过的）
node异步的历史（答了async/await, generator）
webpack流程
webpack-dev-server原理
webpack配置项与常用插件
ES6的语法，及你常用的
Mobx的原理
盒模型与怪异盒模型
HTTP报文结构，请求头有啥，响应头有啥
最近看什么书，看什么文章，打算考研吗
栈，队列
10万个数字找最大的K个数（描述了快排，及如何实现，时间复杂度，最好，最差的情况下）
DFS与BFS，如何实现
小程序与H5的区别，商业性、技术性（小程序有自己独立的保护机制，独立运行在一个地方，不会破坏现有生态）
nginx怎么配置
阿里云dns怎么配置解析（A？TXT？）
箭头函数和普通函数
按钮设置监听用箭头函数this指向哪
jwttoken
服务器开启服务（nohup，pm2）
Taro编译原理
typescript优势，为何收到推崇

阿里云

flex
移动端适配
React hook
React优势
为什么选择React
React数据流
单向数据流与双向绑定有什么区别
输入url到页面展示发生了什么（查缓存先还是dns解析先）
http状态码
git的tag，常用什么指令
npm版本（a.b.c）
webpack功能
webpackloader和plugin有什么区别
es6的class
继承
typescript，范式
async/await 与 promise （联系，区别）
express 和 koa
中间件的区别
为什么用koa，express不好吗
数据库用的什么
sql语句（外连接，内连接有什么区别）
N个数字，取最大的K个数，有什么方法，时间复杂度，空间复杂度，用堆
用了什么开源的库，比较火的
加快渲染
如何获得页面加载的时间
为什么选择Taro，Taro优势
怎么开发一个webpack插件
怎么开发一个npm组件

腾讯（捞错了...）

啊，暴毙，在官网投的web前端，结果发来的邀请函却是后台开发，啊虽然被捞起来很开心，但是呜呜呜不是期望的岗位鸭！哭

小菜鸡🐔面试の初体验，自闭路上渐行渐远......🏃‍♂️

前言

总结