css3太难,太难了字节跳动二面就挂了

前言

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

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

https://juejin.cn/post/6953450923439947812

自我介绍

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

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

代码输出题

问 : 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;

解析：script是一个宏任务，按照顺序执行这些代码，先打印1;

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

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

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

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

继续往下走，输出5;

执行.then() 输出4

接着执行resolve输出undefined

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

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

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

手写题

问:判断数组的几种方式?//通过原型链做判断

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 为 arr[[0]， currentValue 为 arr[1]， currentIndex 为 1，

若指定初始值，那么第一次迭代的 previousValue 为 initialValue， currentValue 为 arr[0]， currentIndex 为 0arr.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 : 这块我写的很快，因为之前补习八股文的时候，遇到过这个问题，基本凭借肌肉记忆背下来了，但是总感觉面试官不会问这种简单的，我心里又起了疑惑，呆滞了半分钟左右，面试官一看，这不写完了嘛，来咱们下一题。

浏览器

问:浏览器过程

浏览器第一次加载资源，服务器返回 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 : 这块的八股文我这是背吐了，我真记不住那么多字段啊，但是浏览器原理方面，我尽量往点子上靠了，可是一旦说不出单词其实对答题效果是有影响的。

HTML

问:基于 DOM 画一个扇形，提出方案CSS3中的clip (面试官说要考虑兼容性)

Canvas或者svg去实现 (面试官说要用HTML中DOM来考虑)

HTML5中进度条老修改样式达到目的 (面试官说还有没有其他的)

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

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

反问

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

总结

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

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

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

又是一个社死的瞬间。

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

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

前端真好玩

关注恺哥，前端进阶不再是难事。

147篇原创内容

公众号