字节跳动前端一二三hr面面经

字节跳动前端1面（2021/3/19 55分钟）（已复盘）

自我介绍介绍一下项目难点怎么做的
对CSS了解吗？介绍一下盒子模型（box-sizing）
介绍一下flex布局，实现相应需求（左右盒子垂直居中，两侧分布），和display：block 、inline-block的区别

flex 布局

// 垂直居中，水平分布两侧/居中/？？
// parent 1000px
// child 100px
<div class="parent">
    <div class="child-left"></div>
    <div class="child-right"></div>
</div>

---------------------

1                     2

---------------------

了解http请求方式吗？说说get和post的区别使用场景是什么？
http缓存（什么时候用etag什么时候用last-modified，使用场景的区别）
跨域访问（jsonp为什么只能用get？）
事件循环看代码输出

事件循环
console.log('start')
setTimeout(() => {
  console.log('timer1')
  Promise.resolve().then(function() {
    console.log('promise1')
  })
}, 0)
setTimeout(() => {
  console.log('timer2')
  Promise.resolve().then(function() {
    console.log('promise2')
  })
}, 0)
Promise.resolve().then(function() {
  console.log('promise3')
})
console.log('end')

start -> end -> p3 -> timer1 -> p1 -> timer2 -> p2

了解幂等吗（听过但不了解）
算法题：求数组中重复最多的数（已做出）

用map做的
算法题：比较版本号（已做出）

function compare(str1, str2) {
    let arr1 = str1.split('.');
    let arr2 = str2.split('.');

    let len1 = arr1.length;
    let len2 = arr2.length;
    let maxlen = Math.max(len1, len2);
    console.log(len1, len2, maxlen);
    if(len1 < maxlen) { //这里一开始写了> 我服了
        for(let i = 0; i < maxlen - len1; i++) {
            arr1.push(0);
        }
    }else {
        for(let i = 0; i < maxlen - len2; i++) {
            arr2.push(0);
        }
    }
    console.log(arr1, arr2);
    for(let i = 0; i < maxlen; i++) {
        let num1 = parseInt(arr1[i]);

        let num2 = parseInt(arr2[i]);
        console.log(num1,num2);
        if(num1 > num2) {
            return 1;
        }else if(num1 < num2) {
            return -1;
        }
    }
    return 0;
}
let bo = compare('1.0', '1.0.1');
console.log(bo);

反问：我今天表现如何，有什么改进的地方：基础还可以，实践能力有待加强

没有相关前端项目经验可以应聘贵公司的实习生吗：当然可以，每个人都不是有经验的

字节前端2面：（2021/3/25 50分钟）（已复盘）

一开始和我介绍流程说：自我介绍——前端基础——项目介绍——1-2题算法

然后。。。。

自我介绍
问回调函数
全程问promise。。。动手封装一些函数

第一题：

readFile(filename, callback);

readFile('a.txt', content => console.log(content));

let a = '';

readFile('a.txt', content => {

xxxxx;

});

// 封装 readFile 可以通过 .then 获取结果

readFilePromise(filename).then(content => console.log(content));

function readFilePromise(filename) {
    return new Promise((resolve, reject) => {
        readFile(filename, content => {
            resolve(content);
        })

    })
}

第二题：

function XXX (input, callback);

function toPromiseVersioon(functionxxx) ;

toPromiseVersion(readFile) === readFilePromise

const fn = toPromiseVersion(readFile);

fn('a.txt').then(content => console.log);

function toPromiseVersion(fn) {
    return function(input) {
        return new Promise(resolve => {
            fn(input, content => {
                resolve(content);
            })
        })
    }
}

第三题：

request(url, body, callback);

empty(callback);

function toPromiseVersion(fn) {
    return function() {
        return new Promise(resolve => {
            fn(...arguments, content => { 
                resolve(content);
            })
        })
    }
}
//回去思考的结果
function toPromiseVersion(fn) {
    return function() {
        return new Promise(resolve => {
            let args = [].slice.call(arguments);
            args.push(function(content){
                resolve(content)
            });
            fn.apply(null, args);
        })
    }
}

再问：如果不用解构赋值怎么传参？我不会，后来问他是用bind、call或者apply都可以实现，可以回去思考一下

都做出来了他说还不错嘻嘻，希望能过！其实这三题做了好久，好菜！不过第一次写promise也不错了5555

不得不说，这个面试官好认真在做面试记录

反问：字节前端做啥？用啥框架（react、typescript）

字节前端3面（2021/4/1 一小时）

自我介绍
问项目主要问小程序
小程序登录怎么做或者说网页登录怎么做
讲一下数字证书
小程序或者网页轮播图怎么实现的
为什么图片从本地加载会很慢很卡，但是从服务器请求就很快，原理是什么
图片懒加载是怎么实现的
怎么保存客户端的状态信息
cookie里面是怎么保存状态信息的？
输入url之后会发生什么
详细讲一下cdn 存在的意义是什么
cdn除了把域名转成ip地址还能干什么
反问：实习生会做那部分方面的工作

答：leader是字节技术中台部门的，主要做一些可复用的东西，譬如说消息推送（可以复用在抖音、头条）等等，具体到前端的话，可能会有sdk、页面、小程序、pc端等等的应用场景