字节前端一面面经

1.自我介绍(现在大三,下学期大四,在大二下的时候接触的前端什么的)

2.首先问flex布局,然后问这个css是什么意思(我具体说了一下每个值所代表的意思)

 flex: 0 1 auto

3.这段代码输出顺序(懵了)

console.log('begin')
setTimeout(() => {
    console.log('setTimeout 1')
    Promise.resolve().then(() => {
        console.log('promise 1')
        setTimeout(() => {
            console.log('setTimeout2 between promise1&2')
        })
    }).then(() => {
        console.log('promise 2')
    })
}, 0)
console.log('end')

4.依然是问输出(错了一半)

inner = 'window';

function say() {
    console.log(inner);
    console.log(this.inner);
}

var obj1 = (function() {
    var inner = '1-1';
    return {
        inner: '1-2',
        say: function() {
            console.log(inner);
            console.log(this.inner);
        }
    }
})();

var obj2 = (function() {
    var inner = '2-1';
    return {
        inner: '2-2',
        say: function() {
            console.log(inner);
            console.log(this.inner);
        }
    }
})();


say();
obj1.say();
obj2.say();
obj1.say = say;
obj1.say();
obj1.say = obj2.say;
obj1.say();

5.vue的双向绑定原理(说了Object.defineProperty get/setter模式)
6.说说vue对数组的监听
7.了解过Deps吗(懵了,记混了,我以为是vue watch 的深度监听,然后叭叭了一大堆。。。)
8.能自己写ajax实现一个功能吗(不会)
9.那axios是怎样取消请求的(错了)
10.算法:给一个字符串,输出所有排列(我是真的菜,就说了一下思路是暴力(其实应该是回溯)加上剪枝)
11.看到你简历写了首屏优化,说说怎么实现的(我说CDN和按需引入以及选用轻量化第三方库)
12.说说CDN的原理(分布式存储,请求地理位置最近的资源)
13.比方说我现在要更新北京的一个CDN资源,那么怎么让南京的CDN服务器知道要去flush(清除缓存)呢(懵了)
14.项目上面有一个信息流,怎么实现这个滑动加载
15.怎么实现下拉刷新
16.下拉刷新这边有一个回弹的动画,如何实现动画(我说@keyframes,然后设置时间和过渡状态)
17.说说keep-alive的作用, 如果让你实现的话怎么做
18.可以说说webpack吗(我真不会,但是看出来面试官确实想问这个,紧接着又提了一次关于webpack的配置)
19.说说宏任务和微任务
20.有什么想问的(问了公司氛围)
总结:太难了啊,我是真的菜啊

#字节跳动内推##面经##字节跳动##校招##前端工程师#
全部评论
投的前端实习,不是提前批
1 回复 分享
发布于 2021-08-05 20:03
第四题问输出把我看蒙了
点赞 回复 分享
发布于 2021-08-10 11:42
盲猜电商部门
点赞 回复 分享
发布于 2021-08-08 17:49
lz过了吗?
点赞 回复 分享
发布于 2021-08-06 11:59
我提前批问的问题很多和你一样
点赞 回复 分享
发布于 2021-08-06 08:44
楼主为啥不直接秋招呢
点赞 回复 分享
发布于 2021-08-05 21:36
楼主投的是哪个部门呀
点赞 回复 分享
发布于 2021-08-05 21:32
加油
点赞 回复 分享
发布于 2021-08-05 20:04

相关推荐

飞书前端一面面经:从基础到实战的技术碰撞一、面试初印象这次飞书前端一面给我的整体感受是节奏紧凑且直击技术核心。面试官风格沉稳,问题由浅入深,既考察基础能力,又注重解决实际问题的思维,是一次很有价值的技术交流。二、面试问题复盘1. CSS 基础考察面试官开场便询问我 CSS 基础掌握程度,我坦诚表示“不是很好”,随后进入具体问题:如何实现三列布局,要求两边宽度固定,中间宽度自适应。我首先提到可以用 JavaScript 监听窗口变化动态调整宽度,但面试官希望用纯 CSS 方案。我迅速想到 Flex 布局,并详细解释了实现思路:.container {display: flex;}.left, .right {width: 200px; /* 固定宽度 */}.center {flex: 1; /* 自动分配剩余空间 */}接着,面试官追问 calc() 函数是否了解,由于平时使用较少,我仅简单说明了它能进行四则运算,用于动态计算 CSS 属性值,比如 width: calc(100% - 400px); 可以配合实现响应式布局。2. 项目与性能优化探讨当被问到 项目中的性能优化经验 时,我如实反馈:目前实习项目和个人项目经验较少,尚未深入接触性能优化模块。面试官没有追问,而是迅速切入算法题环节。3. 算法与代码实现题目1:封装 Promise 重试函数要求实现一个函数,传入请求的 Promise 和请求次数,请求失败时自动重试,达到次数上限后不再发起请求。我给出如下代码:function retryPromise(promise, times) {let count = 0;return new Promise((resolve, reject) => {const run = () => {promise.then(resolve).catch((error) => {if (count < times - 1) {count++;run();} else {reject(error);}});};run();});}题目2:实现对象深拷贝我先写出基础版本:function deepClone(obj) {if (typeof obj!== 'object' || obj === null) {return obj;}let result = Array.isArray(obj)? [] : {};for (let key in obj) {if (obj.hasOwnProperty(key)) {result[key] = deepClone(obj[key]);}}return result;}面试官进一步要求 考虑边界情况,我补充说明:若对象属性为数组,需递归处理数组元素;若属性为函数、正则等特殊类型,需特殊处理。例如,对于函数可直接返回原函数,对于正则可创建新的正则实例。三、反问环节我向面试官提出疑问:“为什么在前端面试中如此看重 CSS 基础?”面试官耐心解答:“CSS 是前端页面布局和视觉交互的基石,良好的 CSS 能力能确保页面高效渲染和兼容性,是支撑复杂业务开发的基础,所以我们会重点考察。”四、面试结果与总结幸运的是,面试结果显示 已通过一面。回顾过程,坦诚承认自身不足并积极思考问题,以及在算法题中清晰的逻辑表达是关键。后续准备二面时,我将重点补足 CSS 知识盲区,积累项目实战经验,尤其关注性能优化相关技术,同时加强对 JavaScript 细节和边界场景的理解。这次面试也让我深刻认识到,扎实的基础和灵活的思维永远是技术面试的核心竞争力。
查看5道真题和解析
点赞 评论 收藏
分享
字节跳动前端二面失败面经:复盘与反思一、面试整体感受本次字节跳动前端二面的考核强度明显提升,面试官从计算机基础、CSS 知识,到 JavaScript 核心概念与实践应用层层深入,虽然最终遗憾未通过,但这次经历让我清晰认识到自身知识体系的薄弱环节。二、面试问题回顾与解析1. CS 基础与 CSS 考察• 实现父容器一半大小的正方形:我第一反应是使用 vw 单位,将子容器的 width 和 height 都设置为 50vw。但面试官的意图更倾向于基于父容器尺寸的相对计算,正确思路应该是通过百分比结合 padding-bottom 实现等比例正方形(如 width: 50%; padding-bottom: 50%;),并利用 position 或 flex 布局定位到父容器内。• CSS 盒模型:我准确回答了 标准盒模型(content-box) 和 怪异盒模型(border-box) 的区别,重点说明了 box-sizing 属性对尺寸计算的影响。2. JavaScript 核心概念与 BOM 考察• BOM(浏览器对象模型):当被问到 BOM 相关知识时,我对 window 对象的属性(如 location、history)和方法(setTimeout、addEventListener 等)掌握不够熟练,回答较为模糊,暴露出日常学习中对浏览器环境底层知识的忽视。• 事件委托:面试官询问事件委托原理时,我错误地将其等同于事件冒泡。实际上,事件委托是利用事件冒泡机制,将子元素的事件处理委托给父元素,从而减少内存占用和提高性能。例如,在列表项点击事件中,可将点击事件绑定在列表容器上,通过判断事件源 event.target 处理具体逻辑。3. 代码实战环节• 实现 JavaScript 链式调用并支持 bind 功能:题目要求实现类似 i.initial(5).add(5).minus(3).plus(5).result 的链式调用,并能使用 bind 修改内部状态。我顺利完成了基础的链式调用逻辑,通过返回 this 实现连续调用,并维护一个内部变量记录计算结果:function Chain() {this.value = 0;this.initial = function (num) {this.value = num;return this;};this.add = function (num) {this.value += num;return this;};this.minus = function (num) {this.value -= num;return this;};this.plus = function (num) {this.value += num;return this;};this.result = function () {return this.value;};}但在实现 bind 功能时,由于对 bind 改变函数 this 指向的原理理解不足,未能完成。正确思路是通过 Function.prototype.bind 方法创建一个新函数,在新函数中调用原始方法,并传入绑定的参数和 this 值。• 封装安全的 React Hook:需求是处理可能失败的异步请求,并确保数据安全。我通过 useState 和 useEffect 实现了一个简单的 fetch 请求钩子,在 catch 块中处理错误,并添加了加载状态和错误信息的状态管理:import { useState, useEffect } from'react';const useSafeFetch = (url) => {const [data, setData] = useState(null);const [loading, setLoading] = useState(true);const [error, setError] = useState(null);useEffect(() => {const fetchData = async () => {try {const response = await fetch(url);const result = await response.json();setData(result);} catch (err) {setError(err);} finally {setLoading(false);}};fetchData();}, [url]);return { data, loading, error };};• 手写 JSONP 函数:要求传入 URL、成功回调、失败回调和超时时间。由于对 window 对象动态创建 script 标签、onerror 和 onload 事件,以及 clearTimeout 等原生方法不够熟悉,最终未能完整实现。正确实现思路如下:function jsonp(url, successCallback, errorCallback, timeout) {const script = document.createElement('script');const callbackName = `jsonp_callback_${Date.now()}`;window[callbackName] = (data) => {clearTimeout(timer);document.body.removeChild(script);successCallback(data);};script.src = `${url}&callback=${callbackName}`;script.onerror = () => {clearTimeout(timer);delete window[callbackName];errorCallback(new Error('JSONP request failed'));};document.body.appendChild(script);const timer = setTimeout(() => {document.body.removeChild(script);delete window[callbackName];errorCallback(new Error('JSONP request timed out'));}, timeout);}三、总结与反思此次面试失败暴露出我在 BOM 细节、事件机制、函数绑定原理 等基础知识上的不足,以及 复杂场景下代码实现能力 的欠缺。未来准备面试时,需更深入理解 JavaScript 原型链、作用域、this 机制等核心概念,同时加强手写代码的练习,尤其是对原生 API 的熟练运用。希望我的经历能为大家提供参考,避免踩坑!
查看7道真题和解析
点赞 评论 收藏
分享
3月初到四月中旬,算是我春招面试高峰期了,从商米科技的一面超级顺利到无二面,从白日梦技术业务部门的双向选择到排序挂了,从与芒果的技术主管双向奔赴到昨天告诉我名额被收回了。从4月中旬后我就彻底没投过简历。其实芒果对大多数人来说,一年6.5-7w很少,但对我来是当下的最优选,我只需要找一个比较轻松的工作就好,我爸妈我自己包括我男朋友对我的要求都是这样,大二的时候,我想努力去大厂,大三在cvte实习的时候,我想去比它更好的上市公司,现在我只想让自己稍微快乐一点,从4月初到现在,我每天就是写写论文,减减肥,运动运动,出去玩一玩之类的,得出的结论就是,人也开朗了,皮肤也变好了,减肥也不困难了,之前很容易因为面试挂了暴饮暴食,吃完了人不开心,也变胖了从我那会面试完,芒果那个技术主管,就告诉我他倾向于招我,也确实是他一直在帮我争取,因为他需要我这种不是很看重薪资的人,我也需要轻松一点的工作。本来计划后天答辩,大后天拍毕业照,完事了去旅游玩几天,找好了兼职6月中旬那一周,帮高考生辅导报志愿,可以赚个飞机票钱,7月初毕业证到手,就可以入职了。但是昨天被告知名额被收回了,呜呜呜呜好难过,前天晚上没睡好,昨天听到这个消息还没反应过来,脑子有点呆滞。。。。今天是真难受大后天就要拍毕业照了,前两天和我关系好的朋友,帮我订了鲜花,可她没办法来,因为她也要写论文,最近正在改的高峰期,她们答辩晚一些。我都不知道要和谁拍,在大学,我前两年一直都在卷技术,大三开始卷实习,但现在什么都没有,我不是性格内向或者自闭,其实我性格挺开朗的,和舍友还有同学都能聊的来,但没有关系特别好的,大家都有关系比较好的一两个朋友,今天我男朋友说他过两天给我送东西来,我挺想让他大后天来的。但是他今年年底也要毕业,论文压力更大,而且元旦开始就在家写论文,被父母看着,所以时间更不自由,他最近都是不分昼夜的写论文,我也不好为难他,其他关系好一点的都不在一个省份其实有想过找代拍,但是真的开心不起来,也没有心情拍,这段时间我论文都交了,之前也攒了一些钱,但是我一直没有心情旅游,这下好了,更没心情旅游了,毕业即失业对我来说,太顺利的好像都不会如愿。。。。
Java抽象小篮子:人生本来就处处是意外,因为你根本预测不了接下来会发生的事,但意外也可能有好有坏。
牛客创作赏金赛
点赞 评论 收藏
分享
评论
6
66
分享

创作者周榜

更多
牛客网
牛客网在线编程
牛客网题解
牛客企业服务