字节前端面经

面的是抖音电商的前端开发（校招）

之前再牛客上看了些面经，帮助还是挺大的，自己也也三面过了，再等通知，许愿offer的同时也把这次的面经记录下，回馈牛客的朋友们

2021-07-29（周四 上午11点） 一面

一面是一个小哥哥，很帅，也很温和，面试体验非常好

面试时间 1小时10分钟左右

面试链接：牛客面试平台

JS相关

1 作用域相关的,让说输出

分析，默认定义的变量、变量提示、var、let区别

var a = 1;
(() => {
    console.log(a);
    a = 2;
})();
输出 1，查找到全局 a   

var a = 1;
(() => {
    console.log(a);
    var a = 2;
})();
输出 undefined，变量声明提升  

var a = 1;
(() => {
    console.log(a);
    let a = 2;
})();
输出 报错  

2 原型相关

分析+讲述原型和原型链部分（显示原型，隐式原型），

window.name = 'ByteDance';
function A () {
   this.name = 123;
}
A.prototype.getA = function(){
    console.log(this);
    return this.name + 1;
}
let a = new A();  // window
let funcA = a.getA;
funcA();  // ByteDance1

3 异步同步

主要是分析过程，给他讲分析+原理

setTimeout(() => {
    console.log(1);
}, 0);
setInterval(() => {
    console.log(2);
}, 0);
console.log(3);
new Promise(() => {
    console.log(4);
});

3 4 1 2(无限循环)

setTimeout(() => {
    console.log(1);
}, 0);
setInterval(() => {
    console.log(2);
}, 0);
console.log(3);
new Promise(() => {
    console.log(4);
});

while(5){
  console.log(5);
}

3 4 5（循环）

计算机网络

网络分层模型：OSI和TCP/IP 都讲了下

HTTP和TCP的关系

TCP和UDP区别

TCP 流量控制 和 拥塞控制

这里举例 输入一个url发生了什么？重点再HTTP和TCP这一块，杂着讲了DNS和DNS缓存这一块

HTTP的报文结构：请求报文、响应报文，以及各自首航的格式、还说了一些常见的headers

http协议版本：0.9、1.0, 1.1，2.0 说下区别，没说出来..

手撕代码

1 最长回文子串

/**
 * @param {string} s
 * @return {string}
 */
var longestPalindrome = function(s) {
    // 最短回文子串问题：
    const n = s.length;
    if(n < 2) return s;


    function getMax(l, r){
        while(l >=0 && r < n && s[l] === s[r]){
            l --;
            r ++;
        }
        return {
            l: l+1,
            r: r-1
        }
    }

    let start = 0, end = 0;
    for(let i = 0; i < n; i ++){
        let obj1 = getMax(i, i);
        let obj2 = getMax(i, i+1);
        let maxObj = obj1.r - obj1.l > obj2.r - obj2.l ? obj1 : obj2;
        if(maxObj.r - maxObj.l > end - start){
            start = maxObj.l;
            end = maxObj.r;
        } 
    }

    return s.slice(start, end+1);

};

这题，一开始用的暴力做法，就是枚举每个子串，判断是否是回文，更新最长回文子串，写到一般发现时间复杂度太高，就问面试官能不能提示，根据提示，重新梳理了思路，说完思路，就下一题了

2 求最终路径

cd .
cd ..
cd /a/b/c/../../ -> /a
cd /a/b/c/../././././../ -> /a

// 用栈

// 输入： 一个包含.. 和. 的相对路径
// 输出： 一个绝对路径

function f(s){

  const stk = []; 

  // 先分割为数组
  const arr = s.split("/")
  // console.log(arr);

  // console.log(arr);
  //入栈
  for(let i = 0; i < arr.length; i ++){
    if(arr[i] === '..') stk.pop(); // 出栈一个路径
    else if(arr[i] === '.' || arr[i] === '') continue;
    else stk.push(arr[i]);
  }

  // console.log(stk);

  if(stk.length === 0) return '/'
  // 
  let res = '/';
  res += stk.join('/');
  return res;
}


// const s = 'a/b/c/.././' /a/b
// const s = 'a/../../..'  '/
const s = '/A/B/../C/D/../E'
const res = f(s)
console.log(res);

最开始用的dp写的，空间复杂度有点高，面试官引导我优化，一个变量而不是一个dp数组，优化空间，面试官说还有别的方式嘛，一种数据结构更加合适，想到栈，把思路梳理，和面试官说完，就结束了

Vue

问了一些vue相关的，主要有

Vue router 用过没？

路由模式、hash和history

axios？ 你怎么用的，底层知道嘛，知不知道别的（我答了Ajax） 说了XMLHttpRequest的用法

最后提了一下fetch（让我展开，不知道就没问了）

网上看到了一些：

关于Ajax XMLHttpRequest、axios、fetch

ajax =》对原生XML的封装，还支持JSONP （）

fetch 号称是ajax的替代品 =》 api 基于Promise =》链式调用的方式 =》 fetch不是ajax的进一步封装，而是原生js，没有使用XMLHttpRequest对象。

axios的话 本质上也是对原生XHR的封装，只不过它是Promise的实现版本

其他

自我结束

为啥学前端

如何学习前端

学习前端多久了

学习前端的方式

反问 校招注重那些，需要补强的

向面试官致谢

2021-08-04 周三上午11点 二面

因为实验室有事情，二面约的第二周周三，还是上午11点

面试时常：55分钟左右

如果说一面是问答模式，二面的面试官的话有点小高冷，全程是你说，他偶尔问一问

HTML/CSS

一面没有问这个，结果我疏忽了，二面答的不是很好

块级元素和内联元素，能不能说全？

BFC、形成BFC的条件，BFC的应用

JS

数据类型 =》 基本、引用 =》typeof 和 instanceof

异步同步 =》 event-loop　机制 =》 dom渲染 =》 宏任务、微任务

栈、堆？　＝》　举例＝》　执行栈

java和JavaScript区别？聊一聊自己的理解

webpack

你学的比较深入的点有？我说最近再看webpack就开始webpack了

webpack的基本概念？作用是啥？

聊了一些module和里面的一些常见loader（url，file，css，style） ，

插件知道嘛？简单说了一下， htmlwebpackplugin

分割？多入口 =》merge，

抽离CSS、=》MiniCssExtractPlugin.loader,

抽离公共代码=》 为啥抽离，第三方和公共模块 =》 splitChunks

WDS webpackDevServer 聊了一下， 热更新？ 配置 hot = true

聊了下 babel，babel-ployfill，babel-runtime （为啥需要babel，babel-ployfill又干了啥？，babel-runtime知道嘛？）

网络

又讲了一个例子，客户端到服务器之间的通信，这里讲到了缓存

缓存=》关键的状态码403（提了一嘴状态码） =》 协商缓存=》强制缓存

讲完之后，整个强制缓存和协商缓存一起讲了下，里面说了 cache-control , last-modify ,etag，说了各个的含义，取值

这里面试官问了个问题：与etag对应的header是啥？当时有点懵，忘了，应该是if-none-match

其他

自我介绍

怎么学习前端，多久了

你觉得你学的最好的是啥，聊一聊你学习的方法

反问：面试有哪些不足，答：缺少亮点

向面试官致谢

手撕代码

求1-1000内的完数

一个数如果恰好等于它的因子之和，这个数就称为“完数”。例如6=1＋2＋3.编程找出1000以内的所有完数

//line=readline()
//print(line)
console.log('Hello World!');


function is(num){
    const a = [];
    for(let i = 1; i < num; i ++){
        if(num % i == 0){
            a.push(i);
        }
    }
    let res  = 0;
    a.forEach( val => {
        res += val;
    })

    return res === num;
}

function f(){
    const res = [];
    for(let i = 1; i <= 1000; i ++){
        if(is(i)) res.push(i);
    }
    console.log(res)
}

f()

思路很清晰，分析完毕后，写完后和面试官说了思路，结果发现没有输出，尴尬，没有写log也没有调用f函数，补上后输出，面试官说ok

2021-08-06 周五上午11点 三面

如果是一面是问答，二面是你说，他提问，三面就是相互间聊，感觉还是挺不错的

三面也比较特殊，一开始就是项目，我以为我那个简单项目会一直没有人问呢

三面时间：一个小时左右

项目

聊聊你的项目

项目使用了那些技术、为啥使用这些技术

是用的vue-cli？vue的版本是？脚手架版本？

聊下脚手架创建的项目的结构 ，为啥是这个结构 =》很多组件，你怎么去管理，全部一个文件夹呢？ =》你说分目录，大概的依据是啥

项目是spa嘛？多少路由？=》父子路由 =》异步组件加载

了解过优化嘛？

讲了很多，分渲染优化和打包优化说的（js，style放置的位置，使用缓存、CDN、webpack打包时候的tree-shaking），面试官说还可以，优化分类可以从线下、线上、...很多方面去讲，除了我讲的，还有网络优化和其他啥的

手撕代码

股票题

/**
 * @param {number[]} prices
 * @return {number}
 */
var maxProfit = function(prices) {
    let min = prices[0];
    let res = 0;
    for(let i = 1; i < prices.length; i ++){
        res = Math.max(res, prices[i] - min);
        if(prices[i] < min){
            min = prices[i];
        }
    }
    return res;
};

买卖一次股票的最大收益，分析了下，讲了思路，代码写太快了，面试官问我是不是之前遇到过，我说是，他说那加个题

节流

出了一个工程题，节流，先说了防抖和节流的概念，以及区别，让我写节流，这里问我需不需要再了解下，结果举例举得不是很好，我更糊涂了，然后根据自己以前的的记忆写的。

// throttle 函数
function throttle(func, wait){
  let begin = 0;
  return function(){
    let context = this;
    let args = arguments;
    let cur = new Date().getTime();
    if(cur - begin > wait) {
      func.apply(context, args);
      begin = cur;
    }
  }
}

这个有缺陷，你能看出来嘛？不知道=》面试官解释了下

其他

学前端多久了？怎么每轮都问 。。。，我就一股脑读说了，学习时间、方法、方式

知道shell嘛？不知道。。cd命令？ 原来是问Linux命令，讲了一堆

查看进程？杀死进程 ps 和 kill

开发工具， 用的vscode，命令行用的cmd，

git知道嘛？用过吗，说了下项目中使用的基本命令，commit status checkout log pull push branch

如何不影响远程代码，将本地代码回顾到之前的一个状态？ git checkout 某个hash值

git stash 暂存区的概念

反问：业务有什么特殊的嘛，使用的技术栈

没说啥，就是他的组会累一些，react

聊天，最后聊了下，也没说啥

致谢，最后一轮技术面，致谢了面试官还有一轮二轮的面试官

小总结

1 字节大公司效率是真快，我其他投的流程还没开始。。。

2 面试官人都特别好，我说我学的基本是基础的知识，基本也是从上面问

3 校招感觉主要表现自己的潜力把，多和面试官聊，不会也寻求一下提示，多展示自己的思考，面试官能看到的

4 编码能力挺重要的，虽然不一定很难，但三轮基本都有手撕代码，无论是会不会，思路一定要清晰，要和面试官分析，不行就先暴力的做，再想优化

5 面试可以的话，聊聊天，表现出自己的积极，可能会印象好一些，不要太沉闷

最后的最后，许愿能够拿到offer！！！！，也感谢hr小哥哥那天给我突然打电话，问我要不要进入流程，本着试一试的心态，走到了三面结束，感觉经过了面试自己也更看清了自己把，加油！！！，也祝其他小伙伴们加油！！！

补充提问

感觉自己有几个问题答的不太好，也想问问如何去答这一块的问题，主要有下面几个

1. 对项目工程的理解，比如vue-cli脚手架创建的各个文件模块的作用，存在的必要性的时候，当时答的比较乱，也不够系统
2. http缓存相关的header，当时答了强制缓存和协商缓存，但是对应的header答还不够细节完整。
3. 关于手写代码，如何以一种比较好的方式去做，让面试官根据满意。我面试的时候是 先分析=》讲解思路=》手写=》在分析
4. 计网这一块，尤其是拥塞控制和流量控制答的感觉不到核心，想知道这两块面试官希望我们回答的核心是啥，需要掌握那些