字节跳动前端一面面经
9/3凌晨投的简历，没想到字节hr当天下午打电话约面试。
我......
我的第一次面试机会，居然是字节免笔试给的！
天知道我从9/1做各大厂笔试到今天，场场被完虐，笔完就杳无音讯。上周五网易互娱四道编程考完我直接哭了，真情实感，打电话给同学边问题目边哭，为什么这么难😭
本来约的10号下午，我第一次用面试系统，也没想到手机热点在宿舍能差成这样（大家真的一定要早早测试网络，我是在之后才看到咋测试网速的orz），于是跟面试官尝试连了10分钟，都只能听到一句"你先介绍一下自己吧"然后她就不动了......于是改成了今天下午。
记录一下面试题
1.html块元素、行内元素有哪些？区别？
块元素：div、h1-6、p、ul、ol、li、hr、dl、dt、dd、nav、section、article、audio等
行内元素：input、span、img、a、i、br、em、textarea、video等
块元素：
1）独占一行；
2）能定义宽高
3）margin、padding上下左右有效
4）能包含块元素和行内元素
行内元素：
1）横向排列
2）不能改变宽高
3）margin、padding左右有效，上下无效
4）不能包含其他元素
2.行内块元素用过吗？
3.元素水平垂直居中方法
1）父元素设置display:flex; justify-content:center; align-items:center;
2）元素position:absolute；left/top设为50%；margin-left/margin-top设为元素自身宽高一半的负值 或者 transform设为translate(-50%,-50%)
ps.margin需要显示设置width和height
3）自适应居中。元素position:absolute；left/right/top/bottom设为0；margin:auto;
4）父元素display:table-cell; text-align:center; vertical-align:middle; 子元素display:inline-block;
4.打开一个网页的解析过程
1）构建DOM树，即创建document对象，解析html元素和字符数据，添加element节点和text节点到document中。此时，document.readyState = 'loading'
2）遇到link外部CSS，创建线程加载，并继续解析文档
3）遇到script外部JS：
a.未设置async、defer：浏览器加载JS，并堵塞，等待JS加载并执行完成，然后继续解析文档
b.设置async：异步加载脚本，脚本加载完立即执行脚本
c.设置defer：异步加载脚本，文档解析完成后执行脚本
4）遇到img等，先解析DOM结构，然后异步加载src，并继续解析文档
5）文档解析完成，此时document.readyState = 'interactive'
6）设置有defer的JS脚本执行
7）document对象触发DOMContentLoaded事件，标志着程序执行由同步脚本执行阶段转化为事件驱动阶段
8）文档和所有资源加载完成，document.readyState = 'complete'，window触发onload事件
9）此后，以异步响应方式处理用户输入、网络事件等
5.rem、em、px
rem：相对于根元素（html）的字体大小。
em：相对于父元素字体大小。浏览器默认字体尺寸 1em=16px。在body里设置font-size:62.5%则全局1em=10px。
px：相对于当前显示器屏幕分辨率。
6.rem实现页面自适应
结合media媒体查询，将html的font-size设置为 (屏幕宽度/设计图宽度)*16px
7.防抖和节流
应用场景：页面滑动浏览用节流，输入响应用防抖
8.cookie、localStorage、sessionStorage
都保存在客户端。
有效期、大小、服务器端通信方面
cookie：可设置有效期，默认浏览器关闭失效。大小4K。参与服务器端通信，携带在请求头里。
localStorage：永久有效，除非手动删除。大小5M。不参与服务器端通信。
sessionStorage：当前会话期有效。大小5M。不参与服务器端通信。
我们来做几道题吧
第一道
for(var i=0;i< 5;i++){
setTimeout(function(){
console.log(i);
},i*1000);
}
思考：
1.改为输出0-4
1）用let声明i
2）匿名函数立即执行实现闭包
for(var i=0;i< 5;i++){
(function(i){
setTimeout(function(){
console.log(i);
},i*1000);
})(i)
}
2.改为立即输出0-4
将setTimeout里的函数改为立即执行
第二道
setTimeout(function () {
console.log(1);
}, 0);
new Promise(function executor(resolve) {
console.log(2);
for (var i = 0; i < 10000; i++) {
i === 9999 && resolve();
}
console.log(3);
}).then(function () {
console.log(4);
});
console.log(5);
输出：2 3 5 4 1 考点：宏任务和微任务
宏任务
微任务
第三道
var o = {
a: 10,
b: {
a: 12,
fn: function () {
console.log(this.a);
console.log(this);
},
},
};
var j = o.b.fn;
j();
o.b.fn();
输出： undefined window
12 o.b
两道算法
1.两数之和 leetcode.1
2.输出1-10000所有对称数字，如[11,22,33,...,101,...,9999]
(我算法太菜了，第一题做过也忘记简单方法了还是小姐姐提醒哈希表才想起来，第二题找规律全靠小姐姐指导)
反问环节
问了部门工作内容
我：您对我以后面试有什么建议呢？
小姐姐：简历上前端相关内容太少了，投别的公司可能会被刷，建议丰富内容，但是字节看学历和经历，所以会有面试机会。其他的还可以。
总之，这次面试真的特别基础，可能是因为我简历上会的技术太少了吧😂。本人前端超级菜鸟，第一次面试，非常紧张，表达特别不好，有些点我确实也不会orz（对，我知道很简单很基础，但我不会orz）
但是！我的面试官——一个漂亮气质的小姐姐——她太好了！你答得慢的她等你，你没答完的她提醒你，你答错的她引导你，你答不出来的她教你。我真的好喜欢她，第一次面试能遇到她真的太幸运了，希望以后遇到的都是这样的小姐姐面试官。
hr下午快6点给我打电话约二面，我自己是真没想到我这表现能过的，难道是小姐姐看我青涩质朴，不忍心？🧐（我特别害怕是刷kpi，不敢相信自己能过，并且被小姐姐建议改简历说得毛毛的😖）
吃完饭收到了猿辅导面试邀请，A了一道居然过了，难以置信。
我还有太多知识要学了，因为前端学习时间不长，但是真的觉得这是自己喜欢的工作。所以要加油啊！！！
，太难了。 楼主加油！
查看30道真题和解析
