首页 > 面试复盘 | 字节前端-抖音电商1、2、3面试
头像
vccyb
编辑于 2021-08-13 15:51
+ 关注

面试复盘 | 字节前端-抖音电商1、2、3面试

字节前端面经

面的是抖音电商的前端开发(校招)

之前再牛客上看了些面经,帮助还是挺大的,自己也也三面过了,再等通知,许愿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. 计网这一块,尤其是拥塞控制和流量控制答的感觉不到核心,想知道这两块面试官希望我们回答的核心是啥,需要掌握那些

更多模拟面试

全部评论

(18) 回帖
加载中...
话题 回帖

相关热帖

历年真题 真题热练榜 24小时
技术(软件)/信息技术类
查看全部

热门推荐