阅读 658

字节(今日头条)前端二面面经

前言

面试日期为 2021-06-06 18:00

接着上回一面后,有个人给我打电话了,问我可不可以二面,我毕竟抱着学习的态度来面试的,但是万一成了呢,我突然紧张了。感觉答应的唐突了,但是感觉没事,毕竟滴滴二面时那种八股文我已经又准备了一遍。

自我介绍

首先面试官开启了摄像头,这反光,这大额头,就是没看见几根头发啊,一看就是大佬,

我的嘴遁(自我介绍)之后,我宣布字节晋级赛正式开始。

eac4b74543a98226d4de9018177800074b90ebf7.jpeg

代码输出题

问 : JavaScript原型链相关 ?

console.log(1);
setTimeout(function () { console.log(2); }, 0);
new Promise(resolve => {
    console.log(3);
    resolve();
}).then(() => {
    console.log(4);
})
console.log(5);

//正确答案
1
3
5
4
undefined
2
复制代码

解析:

  1. script是一个宏任务,按照顺序执行这些代码,先打印1;

  2. 遇到定时器steTimeout,它是一个宏任务,放入宏任务队列;

  3. 首先进入Promise,执行该构造函数中的代码,打印3;

  4. 碰到resolve函数, 将Promise的状态改变为resolve, 并将结果保存下来;

  5. 碰到Promise.then这个微任务,将它放入微任务队列;

  6. 继续往下走,输出5;

  7. 执行.then() 输出4

  8. 接着执行resolve输出undefined

  9. 最后执行定时器(宏任务)输出2

    这里面试官问了我顺带问了我Event Loop事件流,我都答对了,但是这道题我答错了。

PS : 不过上了就问了原型链相关的,难道我背八股文的事情被他发现了?我一面的时候,你在旁边偷听?可恶啊,竟然车轮战,原来一面的小姐姐只是个倒钩!!!

src=http___img.bqb12.com_vod_2020-05-30_vixikom2rsu.jpg&refer=http___img.bqb12.jpg

手写题

问:判断数组的几种方式?

//通过原型链做判断
obj.__proto__ === Array.prototype;
//通过ES6的Array.isArray()做判断
Array.isArrray(obj);
//通过instanceof做判断
obj instanceof Array
//通过Array.prototype.isPrototypeOf
Array.prototype.isPrototypeOf(obj)
//通过Object.prototype.toString.call()做判断
Object.prototype.toString.call(obj).slice(8,-1) === 'Array';
复制代码

PS : 最后一个我没想起来,第三个面试官说我写反了,到这里的时候其实心态没缓过来,还是对于刚才原型题的思考中。

手写:reduce实现map

/**
 * 用数组的reduce方法实现数组的map
 */
Array.prototype.Mmap = function(fn, thisArg) {
  const result = [];
  this.reduce((prev, curr, index, array) => {
    result[index] = fn.call(thisArg, array[index], index, array);
  }, 0)
  return result;
}

复制代码

解析

arr.reduce((previousValue, currentValue, currentIndex, array) => {}, initialValue?)

reduce 接收两个参数,第一个参数为函数,指定了每次迭代调用的函数,函数的返回值为下一次迭代的 previousValue;第二个参数为初始值,是可选的。

若不指定初始值,那么第一次迭代的 previousValue 为 ar[[0], currentValue 为 arr[1], currentIndex 为 1,

若指定初始值,那么第一次迭代的 previousValue 为 initialValue, currentValue为 arr[0], currentIndex 为0

arr.map(function callback(currentValue[, index[, array]]) { }[, thisArg])

其中第二个参数为 thisArg, 可选的,表示执行callback时的this。

注意,如果callback为箭头函数时,里面的this指向外层代码块,(非严格模式下为window),此时指定 thisArg 无效

PS : 这里没写好,原因有三,1:对map函数理解不深,项目使用都只是传一个参数,2:对reduce使用较少,3:考虑时间过长。

手写:使定时器没回调

console.log(0)
await delay(1000)
console.log(1)

const delay = (time) => new Promies((resolve) => setTimeout(resolve,time))
复制代码

PS : 这块我写的很快,因为之前补习八股文的时候,遇到过这个问题,基本凭借肌肉记忆背下来了,但是总感觉面试官不会问这种简单的,我心里又起了疑惑,呆滞了半分钟左右,面试官一看,这不写完了嘛,来咱们下一题。

src=http___image1.pig008.com_20190731_c0142de4d489c52cfac42a47a6d918f1.jpg&refer=http___image1.pig008.jpg

浏览器

问:浏览器过程

浏览器第一次加载资源,服务器返回 200,浏览器从服务器下载资源文件,并缓存资源文件与 response header,以供下次加载时对比使用;

下一次加载资源时,由于强制缓存优先级较高,先比较当前时间与上一次返回 200 时的时间差,如果没有超过 cache-control 设置的 max-age,则没有过期,并命中强缓存,直接从本地读取资源。如果浏览器不支持HTTP1.1,则使用 expires 头判断是否过期;

如果资源已过期,则表明强制缓存没有被命中,则开始协商缓存,向服务器发送带有 If-None-Match 和 If-Modified-Since 的请求;

服务器收到请求后,优先根据 Etag 的值判断被请求的文件有没有做修改,Etag 值一致则没有修改,命中协商缓存,返回 304;如果不一致则有改动,直接返回新的资源文件带上新的 Etag 值并返回 200;

如果服务器收到的请求没有 Etag 值,则将 If-Modified-Since 和被请求文件的最后修改时间做比对,一致则命中协商缓存,返回 304;不一致则返回新的 last-modified 和文件并返回 200

问:浏览器强缓存,协商缓存

(1)强缓存

使用强缓存策略时,如果缓存资源有效,则直接使用缓存资源,不必再向服务器发起请求。

强缓存策略可以通过两种方式来设置,分别是 http 头信息中的 Expires 属性和 Cache-Control 属性。

(2)协商缓存

如果命中强制缓存,我们无需发起新的请求,直接使用缓存内容,如果没有命中强制缓存,如果设置了协商缓存,这个时候协商缓存就会发挥作用了。

命中协商缓存的条件有两个:

  • max-age=xxx 过期了
  • 值为no-store

使用协商缓存策略时,会先向服务器发送一个请求,如果资源没有发生修改,则返回一个 304 状态,让浏览器使用本地的缓存副本。如果资源发生了修改,则返回修改后的资源

PS : 这块的八股文我这是背吐了,我真记不住那么多字段啊,但是浏览器原理方面,我尽量往点子上靠了,可是一旦说不出单词其实对答题效果是有影响的。

src=http___ww2.sinaimg.cn_large_6af89bc8gw1f8q7q7bpdxj208006xt8p.jpg&refer=http___www.sina.jpg

HTML

问:基于DOM画一个扇形,提出方案

  • CSS3中的clip (面试官说要考虑兼容性)
  • Canvas或者svg去实现 (面试官说要用HTMLDOM来考虑)
  • HTML5中进度条老修改样式达到目的 (面试官说还有没有其他的)

**面试官给出的答案:**先画一个圆,然后通过CSS3border-radius属性去定位到圆上。

PS :斯阔以,我还真没用border-radius去画半圆,脑洞大开了。

反问

职业规划,入职培训,新技术的看法,然后又双叒叕吹波字节的彩虹屁。

总结

基本总体来看,感觉表现比预估的差一截,气氛很微妙也不是欢快那种。

就是莫名其妙面完了,我面瘫了? 我是谁?我在哪?我刚才做了什么?

后来加了给我打电话的那位的微信,我以为是HR,发现并不是~~ 我说了好多关于我面试的表现,结果是面试官。

又是一个社死的瞬间,

src=http___i.17173cdn.com_2fhnvk_YWxqaGBf_cms3_yYvRaYbmxcaAilC.png&refer=http___i.17173cdn.jpg

我突然想起来小时候问妈妈, 清华北大你想让我去哪个? 结果高考后发现哪个都去不了。

现在一面过,二面挂,是怎么个问题呢~~~。

文章分类
前端
文章标签