首页 > 面试复盘|字节秋招前端提前批一二三面面经
头像
匿名牛油
编辑于 2021-08-16 15:58
+ 关注

面试复盘|字节秋招前端提前批一二三面面经

一面:

1、自我介绍+项目介绍
2、学习前端的途径
3、聊项目20min

4、vue双向数据绑定
  • 数据劫持: 用 Object.defineProperty 为每个数据设置 getter/setter
  • 数据渲染: 为页面使用到数据的每个组件都添加一个观察者(依赖) watcher
  • 发布订阅: 为每个数据添加订阅者(依赖收集器)dep,并将对应的观察者添加进依赖列表,每当数据更新时,订阅者(依赖收集器)通知所有对应观察者(依赖)自动更新对应页面。
这里再补充一下:Object.defineProperty和Proxy的区别,各自的优缺点,也是常考题。

5、rem布局 em vw vh 百分比 宽高自适应屏幕
(1)rem(font size of the root element)是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。
(2)em(font size of the element)是指相对于父元素的字体大小的单位。
(3)其他可以实现响应式布局的单位:vw、vh (视口宽度和视口高度的百分比)


6、实现bind函数
Function.prototype._bind = function(){
    var self = this   //原函数
    var context = [].shift.call(arguments)  //this上下文
    var args = [].slice.call(arguments)  //参数
    return function(){
        self.apply(context, args.concat([].slice.call(arguments)))
    }
}


 function a(m, n, o) {
    console.log(this.name + ' ' + m + ' ' + n + ' ' + o);
  }
  var b = {
    name: 'kong'
  };
  a._bind(b, 7, 8)(9); // kong 7 8 9


7、call 、apply、bind的区别
当我们使用一个函数需要改变this指向的时候才会用到call``apply``bind。
  • 如果你要传递的参数不多,则可以使用fn.call(thisObj, arg1, arg2 ...)。
  • 如果你要传递的参数很多,则可以用数组将参数整理好调用fn.apply(thisObj, [arg1, arg2 ...]),第二个参数必须包含在数组里面。
  • 如果你想生成一个新的函数长期给某个对象使用,则可以使用const newFn = fn.bind(thisObj); newFn(arg1, arg2...),bind() 方法不会调用函数。但是能改变函数内部this 指向。
  • call,apply,bind 不传参数自动绑定在 window

8、使用vue相对于使用原生js有什么好处(操作dom、js对象,vue组件)
(1)控件跟数据自动绑定,可以直接使用data里面的数据值来提交表单,而不需要再使用$("#myid").val()那一套方法来获取控件的值,对控件赋值也方便很多,只需要改变data的值,控件就会自动改变值。将复杂的界面操作,转化为对数据进行操作。
(2)页面参数传递和页面状态管理。
页面传值对于vue来说,可供选择的方法非常多。比如使用子组件实现,通过对props属性传值;也可以使用页面url参数的方法传值;或使用vuex全局状态管理的方法页面传值等等。而原生开发的时候,在页面有多个参数的时候,页面传值和初始化,要复杂很多。
(3)模块化开发、无刷新保留场景参数更新
比如一个列表页面里面有添加功能,有修改功能,这时候我们可以通过引用子组件的形式,当子组件内容更新的时候,修改主组件的数据,比如修改了一条数据后,我们需要列表页同时刷新,但我们不希望改变原来列表页的页码和搜索条件。假如你用原生开发来实现这个,需要写很多业务逻辑保存上一个页面的搜索条件和页码这些参数,但假如你用vue开发,将变得非常简单。
(4)代码的可阅读性
vue天生具有组件化开发的能力,因此不同的功能基本都是写在不同的模块里面,因此代码的可阅读性非常高。当一个新手接手一个旧项目的时候,基本上可以做到一天就能定位到要修改的代码,进行修改,快速接手项目。


9、v-for 里面key的作用,如果没有一个唯一的值,那么要选什么值来作为key?

vue是通过比对组件自身新旧vdom进行更新的。

key的作用是辅助判断新旧vdom节点在逻辑上是不是同一个对象。


10、看代码说输出
(1)
// let x = 5;
function setFn() {
  var x  =  0;
  return function() { 
    x = x + 1; 
    return x;
  };
}

const f1 = setFn();
const f2 = setFn();

f1(); // 1
f2(); // 1

f1(); // 2
f2(); // 2

const f3 = setFn();
const obj = {x: 10};

f3.call(obj); // 1

(2)
var a = 3;
var obj = { 
  a: 5,
  fn: function() {
    this.a = 10;
  }
}
var fn2 = obj.fn;
fn2();

console.log(a);    // 10
console.log(obj.a);  // 5

11、算法题
数据数组 list,元素格式如:
[{id: 'id_a', name: 'foo', delay: 2},{id: 'id_b', name: 'bar', delay: 4} , {id: 'id_c', name: 'baz', delay: 1}... {id: 'id_x', name: 'str_x', delay: 3} ... ];
数组 idList: ['id_b', 'id_x' , ... 'id_a', 'id_c' ...] ,其元素是不定数量且打乱顺序的 id ;
要求得到一个字符串 `bar-str_x ... -foo-baz ...`,即按 idList 中的 id 的顺序拼接的 list 中元素的 name。

我的思路:
首先创建一个obj对象,遍历idList里面的id,对应数据数组list里面的数据,将id和name存入obj中,比如
obj ={
' id_a': 'foo',
'id_b':'bar',
...
}
然后再按顺序将name连接起来。



二面:

1、自我介绍+项目介绍
2、浏览器缓存:强缓存和协商缓存
强制缓存
强制缓存在缓存数据未失效的情况下(即Cache-Control的max-age没有过期或者Expires的缓存时间没有过期),那么就会直接使用浏览器的缓存数据,不会再向服务器发送任何请求。强制缓存生效时,http状态码为200。这种方式页面的加载速度是最快的,性能也是很好的,但是在这期间,如果服务器端的资源修改了,页面上是拿不到的,因为它不会再向服务器发请求了。这种情况就是我们在开发种经常遇到的,比如你修改了页面上的某个样式,在页面上刷新了但没有生效,因为走的是强缓存,所以Ctrl + F5一顿操作之后就好了。
协商缓存
当第一次请求时服务器返回的响应头中没有Cache-Control和Expires或者Cache-Control和Expires过期还或者它的属性设置为no-cache时(即不走强缓存),那么浏览器第二次请求时就会与服务器进行协商,与服务器端对比判断资源是否进行了修改更新。如果服务器端的资源没有修改,那么就会返回304状态码,告诉浏览器可以使用缓存中的数据,这样就减少了服务器的数据传输压力。如果数据有更新就会返回200状态码,服务器就会返回更新后的资源并且将缓存信息一起返回。


3、vue dom-diff算法
是一种通过同层的树节点进行比较的高效算法,避免了对树进行逐层搜索遍历,所以时间复杂度只有 O(n)。
diff 算法的在很多场景下都有应用,例如在 vue 虚拟 dom 渲染成真实 dom 的新旧 VNode 节点比较更新时,就用到了该算法。

4、v-for 中的key(第二次被问到)
vue是通过比对组件自身新旧vdom进行更新的。
key的作用是辅助判断新旧vdom节点在逻辑上是不是同一个对象。

5、v-if为什么不用key

6、宏任务和微任务


宏任务(macrotask)
微任务(microtask)
谁发起的
宿主(Node、浏览器)
JS引擎
具体事件
1. script (可以理解为外层同步代码)
2. setTimeout/setInterval
3. UI rendering/UI事件
4. postMessage,MessageChannel
5. setImmediate,I/O(Node.js)
1. Promise
2. MutaionObserver
3. Object.observe(已废弃;Proxy 对象替代)
4. process.nextTick(Node.js)
谁先运行
后运行
先运行
会触发新一轮Tick吗
不会


7、debounce函数
你尽管触发事件,但是我一定在事件触发 n 秒后才执行,如果你在一个事件触发的 n 秒内又触发了这个事件,那我就以新的事件的时间为准,n 秒后才执行。
总之,就是要等你触发完事件 n 秒内不再触发事件,我才执行。
function debounce(func, wait) {
    var timeout;
    return function () {
        var context = this;
        var args = arguments;
        clearTimeout(timeout)
        timeout = setTimeout(function(){
            func.apply(context, args)
        }, wait);
    }
}

8、最长回文子串(LeetCode第五题)
9、实习时间
10、为什么学习前端,怎么学习的

11、网站怎么实现自动登录
方法一:cookie和session配合使用
  • 首先,用户登录输入用户名和密码,浏览器发送post请求,服务器后台获取用户信息,查询数据库验证用户信息是否正确。
  • 如果验证通过,就会创建session来存储相关信息,并且生成一个cookie字符串,把sessionID放在cookie里面。然后返回给浏览器。
  • 当用户下一次发起请求时,浏览器会自动携带cookie去请求服务器,服务器识别后,通过里面的sessionID,就可以直接读取session中的用户信息。
这样,用户就可以直接访问,不需要再输入用户名和密码来验证身份。

方法二:Token
Token是在服务端产生的。
  • 如果前端使用用户名/密码向服务端请求认证,服务端认证成功,那么在服务端会返回Token 给前端。
  • 前端可以在每次请求的时候带上 Toke 证明自己的合法地位。
如果这个Token在服务端持久化(比如存入数据库),那它就是一个永久的身份令牌。


12、使cookie不能跨域获得,通过设置cookie的什么属性(应该是考CRSF的解决方法)
SameSite 属性可以让 Cookie 在跨站请求时不会被发送,从而可以阻止跨站请求伪造攻击(CSRF)。
属性值
SameSite 可以有下面三种值:
  1. Strict仅允许一方请求携带 Cookie,即浏览器将只发送相同站点请求的 Cookie,即当前网页 URL 与请求目标 URL 完全一致。
  2. Lax允许部分第三方请求携带 Cookie
  3. None无论是否跨站都会发送 Cookie

13、进程和线程的区别 (八股文常考题了)

14、JS的垃圾回收机制
标记-清除
第一阶段:标记。从根结点出发遍历对象,对访问过的对象打上标记,表示该对象可达
第二阶段:清除。对那些没有标记的对象进行回收,这样使得不能利用的空间能够重新被利用。

15、position的值有哪些,relative和absolute的区别

其值可以分为五个:
static      静态定位
relative   相对定位
absolute 绝对定位
fixed       固定定位
sticky     粘性定位

相对定位的特点:
1. 它是相对于自己原来的位置来移动的(移动位置的时候参照点是自己原来的位置)。
2. 原来在标准流的位置继续占有,后面的盒子仍然以标准流的方式对待它。
绝对定位的特点:
1.子级绝对定位,不会占有位置,可以放到父盒子里面的任何一个地方,不会影响其他的兄弟盒子。
2.父盒子需要加定位限制子盒子在父盒子内显示。
3.父盒子布局时,需要占有位置,因此使用相对定位。

三面:

1、自我介绍+项目介绍
2、对自己来说收获最大的一个项目
对这个项目展开问了一些问题,如果被问到这个,一定要说自己最了解的那个项目,可能会针对里面的某些部分问得比较深。
比如我说了自己做的一个购物网站,然后介绍了一些项目中的亮点,面试官就针对这些亮点问了一些细节部分。
3、场景题:
如何获取到页面所有dom元素,并给出标签数量第m多的标签名。
答:从根节点出发,遍历所有dom节点,记录标签名和数量,然后对数量排序,输出第m多的那个标签名。

然后面试官就给了个数据结构
let node = {
tagName:'div',
childrens:[{..},{
tagName:'div',
childrens:[{...},{...}]
}...]
}
实现函数:find(node,m);

然后实现过程比较拉胯,最后面试官说这次面试结果可能不太理想,我😔😔
动手实践这方面还是需要加强,一些常见的场景题也需要去了解学习。

总结:

虽然三面凉了,但是字节整体的面试给我的感觉是非常棒的,面试官都非常和蔼,全程交流都比较友善,这点对于刚开始面试的人真的非常非常友好,不会觉得很有压力。
我记得一面的时候,面试官问了Object.defineProperty和Proxy的区别之后,说这是对对象进行监听,如果要对数组进行监听怎么办,我答不上来,面试官还告诉我可以怎么这么做,体验真的非常好。
继续复习刷题,秋招正式批再见!


另外想再补充一些在面试过程中被问到的出其不意的问题

有时候面试官问一个知识点,我能答出大概的意思,但是就怕面试官突然问一个小细节,而平时容易忽视细节的我就很猝不及防了😂😂
1、从输入URL到页面展示全过程
这可以说是非常常见的一个问题了,除了常规的浏览器缓存、TCP三次、四次握手、DOM渲染、JS阻塞等等,我还被问到了一些延伸的问题:
(1)http协议可以用基于udp协议吗?
(2)JS异步调用时,如果在执行宏任务的过程中出现新的微任务,此时应执行?
(3)async和await属于微任务还是宏任务?
(4)有些服务器设置了强缓存的有效时间很长(比如一年),有什么缺点?(可能不能及时将服务器上更新的内容同步更新到浏览器)那怎么解决?(Ctrl+F5强制刷新)那移动端怎么办?

还有其他方面的一些问题:
2、图片的请求(src)会不会阻塞dom的渲染?
3、px转换为rem不是整数计算的时候怎么办?
4、如果精灵图很大,当前页面只需要其中的某一部分,该怎么做?
5、vue的双向数据绑定过程中,组件在什么时候添加依赖?(不知道是不是想问在组件的哪个生命周期函数里)
6、还有三面面试官问我什么是服务器、什么是http请求、什么是cookies?(感觉自己解释的时候思路混乱,也不知道面试官有没有get到🤣

后面这些问题,我也在探索答案,希望各位大佬多多指教!





更多模拟面试

全部评论

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

推荐话题

相关热帖

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

近期精华帖

热门推荐