Kano

外观

导航栏

【字节跳动】前端一面面经 ​

TIP

文章编写于 2020 年 06 月 11 日 —— 当时春招面试字节跳动一面面经。

投递初 ​

春招过去了，面了两次腾讯，两次一面直接 gg，但这两份经历对我是有很大帮助的，体会到了一定差距。但在 6 月份，看了牛客网讨论区，又发现了字节跳动一直在招人，从未停止过，而且正好某天瞧见了内推码，于是乎，我又想尝试一下了，赶紧迭代一下简历，投！投！投！

要求 ​

1、计算机、软件相关专业； 2、熟悉 HTML, CSS, JavaScript 和 HTTP 协议基本知识； 3、熟悉常用的数据结构以及其使用场景； 4、有参与设计和实现的项目（无论大小）； 5、了解浏览器调试工具； 6、有强烈的求知欲和进取心，具有扎实的编程功底，良好的编程习惯。

加分项： ​

1、有过数据可视化相关经验； 2、了解 JavaScript 依赖管理； 3、了解 Webpack, React, SASS, ES6 基本原理以及它们解决的问题； 4、了解过不限于 Node.js, Python, Ruby 的任意一门脚本语言； 5、有 Github 账号并有项目。

投递完 ​

不得不说，字节的处理效率真的是高，2 号投的，3 号就收到了 HR 小姐姐的电话询问，简单询问做过什么项目，用的是什么技术栈，然后有没有用过 React，最后一句：如果后续简历通过了，我们会联系您进行面试。

然后再 5 号，下午还在做网络安全的实验，就收到微信消息，HR 小姐姐加我然后跟我约下周面试时间。最后，选择了 8 号（周一）晚上 7 点 30 约一面，话不多说，我们进入正题。

面经 ​

自我介绍 ​

熟悉的开头，这里就不多说了，跳过...

地址栏输入 url，然后经历了什么，浏览器此时又经历了什么 ​

从 URL 输入到页面展现到底发生什么？ ​

参考答案推荐阅读：从 URL 输入到页面展现到底发生什么？

推荐阅读：前端面试：http 专场，你需要懂的知识

推荐阅读：（建议精读）HTTP 灵魂之问，巩固你的 HTTP 知识体系

浏览器解析渲染页面 ​

参考答案 浏览器解析渲染页面分为一下五个步骤：
  • 根据 HTML 解析出 DOM 树
  • 根据 CSS 解析生成 CSS 规则树
  • 结合 DOM 树和 CSS 规则树，生成渲染树
  • 根据渲染树计算每一个节点的信息
  • 根据计算好的信息绘制页面

推荐阅读：从 URL 输入到页面展现到底发生什么？

看了我的简历，说使用过 Koa2，提出为什么要使用 Koa2，怎么不用 express 呢？ ​

项目地址（传送门）

Koa2 中间件你了解过嘛？ ​

项目中有提到用户数据&状态，然后问：你登录拦截有具体了解怎么实现的么？ ​

参考答案

其实，面试官就是看到了这样一句话：

浏览器发送一个 request 请求，根据 cookie ，服务器通过 passport 与 redis 来验证当前是否是登录状态，返回 username。

主要是项目忘了，我就提了一句用了 passport 中的一个函数，isAu...来着的，单词不会读

面试官也是觉得可能再问下去没啥必要了，就说，我们来搞点基础吧~

主要是三大模块，CSS，JS，算法

考察 CSS ​

css 样式优先级，以及渲染过程 ​

参考答案
  • 内联样式(例如, style="...")
  • ID 选择器(例如, #example)
  • 类选择器(例如, .example)、属性选择器(例如, [type="radio"])、伪类(例如, :hover)
  • 类型选择器(例如, h1)、伪元素(例如, ::before)
  • 继承的样式

推荐阅读：CSS 技巧篇(五)：理解 CSS 优先级

下面样式是怎样渲染的 ​

javascript
.container .inner div{
	width: 100px;
	height: 100px;
}
参考答案

我说的是从右到左，这确实是没有问题的，面试官反问，为什么？ 其实道理很简单，如果先渲染 container，怎么找 inner 呢？我说了全部遍历一遍，然后又说了如果是从右到左的话，就会少一些查找。

下面代码，父级元素 container 高度是多少？ ​

javascript
<div class="container">
        <div class="inner"/>
        <div class="inner"/>
</div>

.container {
    border: 1px;
}
.inner {
    margin: 10px;
    height=width: 10px;
}
参考答案

我自己重新写了一个比较好理解的代码，具体如下：

javascript
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    .container {
        border: 1px;
    }
    .inner1 {
        margin: 10px;
        height: 10px;
        width: 10px;
        background: red;
    }
    .inner2 {
        margin: 10px;
        height: 10px;
        width: 10px;
        background: blue;
    }
    </style>
</head>
<body>
    <div class="container">
        <div class="inner1"></div>
        <div class="inner2"></div>
    </div>
</body>
</html>

查看结果，高度为 50px

面试官然后又添加了浮动，再问父级元素高度

javascript
<div class="container">
        <div class="inner"/>
        <div class="inner"/>
</div>

.container {
    border: 1px;
}
.inner {
    float: left;
    margin: 10px;
    height=width: 10px;
}

查看结果，高度为 0px，此时就出现了一个高度塌陷问题。

因为子元素设置了浮动，导致父级元素高度没有算进去。通过以下方式即可清楚浮动，形成一个 BFC，就会加上子集元素的高度。

css
.container {
  border: 1px;
  overflow: hidden;
}

重新打开开发者工具（F12），可以看到父级元素有了高度。

100px 直径的圆你怎么画？ ​

参考答案

推荐阅读：趣味 CSS3 效果挑战小汇总

推荐阅读：css 绘制特殊图形

推荐：CSS3 border-radius 圆角各个属性值作用演示实例页面

考察 JS ​

下面代码会输出什么？（考察变量提升） ​

推荐阅读：JavaScript 变量提升运行机制

第一步 ​
javascript
console.log(a);

此时会报错，因为 a 未定义。

第二步 ​
javascript
console.log(a);
var a = 1;

会输出 undefined。

上述代码中，变量 a 用 var 命令声明，会发生变量提升，即脚本开始运行时，变量 a 已经存在了，但是没有值，所以会输出 undefined 。

第三步 ​
javascript
console.log(a);
var a = 1;
function a() {}

上述代码会输出一个函数 a。

考察知识点：当有多个同名变量声明的时候，函数声明会覆盖其他的声明。如果有多个函数声明，则是由最后的一个函数声明覆盖之前所有的声明。

第四步 ​
javascript
console.log(a);
var a = 1;
function a() {}
a = 2;

上述代码结果与知识点与 第三步 一样

第五步 ​
javascript
console.log(a);
var a = 1;
function a() {}
a = 2;
a();

推荐阅读：javascript 变量提升详解推荐阅读：深入浅出 JS - 变量提升（函数声明提升）

输出结果：

上述代码，首先进行函数声明提升，然后再进行变量提升，此时 a已经是一个变量了，不再是一个函数了，所以就会 throw error 。

下面代码会输出什么？（考察事件循环） ​

推荐阅读：Javascript 事件循环 event loop

第一步 ​
javascript
setTimeout(() => {
  console.log(1);
}, 0);
console.log(2);
// 输出结果：2 1
第二步 ​
javascript
setTimeout(() => {
  console.log(1);
}, 0);
console.log(2);
new Promise((resolve) => {
  console.log(3);
  resolve(4);
}).then((val) => console.log(val));
// 输出结果：2 3 4 1
第三步 ​
javascript
document.body.addEventListener(
  "click",
  () => {
    Promise.resolve().then(() => console.log(1));
    console.log(2);
  },
  false
);

document.body.addEventListener(
  "click",
  () => {
    Promise.resolve().then(() => console.log(3));
    console.log(4);
  },
  false
);

之前那几题答完后，这道题，我毫不犹豫的直接说了 2 4 1 3 ，然后面试官给了我下面这代码提示，啪，直接被拍醒...

javascript
document.body.click();

答案是 2 1 4 3

谢谢评论区小伙伴提醒，现已修改。

后面搜了相关资料，原来是设计模式中的发布-订阅模式，之前就看了面经，知道字节喜欢考这个设计模式，原来真的又考到了，不过题型不一样罢了。

推荐阅读：Javascript 设计模式之发布-订阅模式

推荐阅读：前端 JavaScript 的发布-订阅模式

算法题 ​

你了解回文字符串吗？例如 abba，写一下代码吧（不限语言） ​

参考答案
cpp
#include<bits/stdc++.h>
using namespace std;
int main(){
    string str;
    cin>>str;
    int len=str.length();
    int mid=(len+1)/2;
    string ans1=str.substr(0,mid); //取前半段字符串
    if(len&1) mid--;
    string ans2=str.substr(mid,len-mid); //取后半段字符串
    reverse(ans2.begin(),ans2.end()); //取反
    if(ans1==ans2) cout<<1<<endl;
    else cout<<0<<endl;
    return 0;
}

由于不限语言，我就用了 C++ 编写了，当时忘记对第二个字符串取反了，也没有验证是否可行，就直接上代码了 ...

那你可以求出字符串中最长回文子串吗？例如给你 abbac，得到 abba ​

参考答案

我当时提到了马拉车算法（Manacher），面试官要我手写一下，还是吃了过去的亏啊，打比赛还遇到过，没有怎么使用就忘了，今天又重新温习一下吧...

话不多说，先贴参考博客：

推荐阅读：马拉车算法（Manacher's Algorithm）

贴上代码：

cpp
#include<bits/stdc++.h>
#define endl '\n'
using namespace std;
const int maxn=1e3+5;
int p[maxn];
int main(){
    string str;
    while(cin>>str){
        string s="$";//第一步:预处理，将原字符串转换为新字符串
        for(int i=0;i<str.length();i++)
            s+="#",s+=str[i];
        s+="#@"; //尾部再加上字符@，将偶数长度变为奇数长度
        int n=s.length();
        int id=0,mx=0; //初始化中心位置和最右端位置
        int maxlen=-1,idx=0;
        for(int j=1;j<n-1;j++){
            p[j]=mx>j? min(p[2*id-j],mx-j):1;
            while(s.at(j+p[j]) == s.at(j-p[j])) //向左右两边拓展
                p[j]++;
            if(mx<p[j]+j){ //如果超过右边界，进行更新
                mx=p[j]+j;
                id=j;
            }
            if(maxlen<p[j]-1){ //更新最大长度和中心索引位置
                maxlen=p[j]-1;
                idx=j;
            }
        }
        int start=(idx-maxlen)/2;  //求起始点索引
        string ans=str.substr(start,maxlen); //字符串截取得到最长回文子串
        cout<<ans<<endl;
    }
    return 0;
}

用两种数据，进行测试，得到如下结果：

总结 ​

每次面完之后，都要好好总结一下。当我写完这篇文章之后，我发现本次面试难度算很低了，没有考察要你手撕各种设计模式，还有手撕 Promise、手撕 new等等。这些我在面试前还做了准备，但是我发现我又遗忘了...原因很简单，只是第一次接触那些手撕，用的也不是很多，还有更多的知识也是在面试前抢记的。看的特别广而杂，反而知识没有连通性，记着记着自然遗忘了。

其次，对于字节跳动，经历过这一次面试后，我也逐渐发现面试都差不多，面试官都挺好的，期间还会暗示你（当然你懂他意思的话...），面之前，一看是头条我一下觉得没啥自信了，都说头条很在意算法，但本次考察的算法好像没有 acm 那样的难度，而是自己把自己给吓住了，信心自然没了...

过了好几天了，也没有收到感谢信，当然，也没有收到下次面试通知，估计是 "入库" 了吧，在此，写下今后的安排：

  • 无需惧怕算法题，难度真的没有 acm 那个高度
  • 将知识重新捡起来，不要在要面试的时候，才临时抢记知识
  • 安静地努力，每篇文章写完后就要消化，不要没弄懂就发布
  • 文章不在于多，而在于精，将每篇文章都要认真书写，让读者都能一读即懂

发现每次只有把知识点讲出来才会印象深刻，今后的日子也要这样做！

最后，本次面经书写完毕，算是一次不错的体验了，还要继续加油~

javascript
学如逆水行舟，不进则退