2年前端,如何跟抖音面试官battle

前言

面试日期为 5月7日20:00nginx

我提早先到牛客的面试房间等待了半小时,焦灼ing...web

这是一场拳击手与拳击手的较量。芜湖,起飞🤓🤓!!!面试

自我介绍

首先上来就是唠,介绍我的信息,亮点以及项目经历以后,面试的自我介绍阶段就结束了。算法

ps :这里经过本身的话术成功将面试官的注意力吸引到项目优化方向,通过2分钟的自我介绍,面试官也应该读完的简历了,算是达到本身目标的预期了。跨域

简历相关

问：你印象最深的项目是哪一个?难点是什么?是怎么解决的?

ps :这里答的中规中矩,由于自我介绍时,已经引导完面试官了,因此~ 嘿嘿嘿~小面试官,看我碰不碰你就完了,让你傲娇。浏览器

WebPack

问：Loader和Plugin的区别?

Loader直译为"加载器"。Webpack将⼀切⽂件视为模块，可是Webpack原⽣是只能解析JavaScript⽂件，若是想将其余⽂件也打包的话，就会⽤到Loader。因此Loader的做⽤是让Webpack拥有了加载和解析非JavaScript文件的能力;

Plugin直译为"插件"。Plugin能够扩展Webpack的功能,让Webpack具备灵活性。在Webpack运⾏的⽣命周期中会⼴播出许多事件，Plugin能够监听这些事件，在合适的时机经过Webpack提供的API改变输出结果。

ps :以后这里有跟随着这道题又结合项目说了大概有10分钟,面试开头还算不错的。微信

问 : WebPack中bundle,chunk,module的做用是什么?

bundle 是由Webpack打包出来的文件;

chunk 代码块,一个chunk由多个模块组合⽽成，⽤于代码的合并和分割;

module 是开发中的单个模块，在Webpack中⼀个模块对应⼀个⽂件，Webpack会从配置的entry中递归开始找出全部依赖的模块。

PS :没答上来,面试官三个单词一块儿说的,我没听懂,觉得是本身不了解,怕说了再扣分,个人心态发生了一丝微妙的变化。面试结束后,我问了面试官,才知道这道题问的是这三个点。websocket

问 : Less转换Css过程

答 :less模块经过Webpack中Less-Loader将LESS文件转义成Css文件markdown

Less转换Css官方原理连接cors

ps :我说完我脑子都空了,这道题我把命送没了,基本到这将近17分钟了。该下一阶段了。

Webpack总结: 这里Webpack相关仍是有所准备的,只是很是不充分,由于Webpack相关说了大概17分钟左右,因此当时感受还能够,文字描述反而显得单方面找虐了

手写题

实现 isInViewport(dom) 函数，用于判断 DOM 元素是否位于 viewport 内

function isInViewport(dom){
    let viewPortHeight = window.innerHeight || document.documentElement.clientHeight 
    let viewPortWidth = window.innerWidth ||  document.documentElement.clientWidth
    let {
        top,left,right,bottom
    } = dom.getBoundingClientRect()
    
    return (
        top >= 0 &&
        left >= 0 &&
        bottom <= viewPortHeight &&
        right <= viewPortWidth
    );
    //这里还没写完面试官就让我停下了,哼~ 高手之间意念都是相同的。
}
复制代码

ps :这里第一次写其实不是这个写法,第一次写没有考虑到宽度,通过面试官提醒我才优化成这样的。

getBoundingClientRect()的做用

用于获取某个元素相对于视窗的位置集合。集合中有top, right, bottom, left等属性。

手写总结: 就这?嗯?就这? 简单的引导,就让面试官就问出我想让他问的东西了,不愧是我。

ES6模块和CommonJS

COMMONJS和ES6模块区别

CommonJS是对模块的浅拷⻉，ES6 Module是对模块的引⽤，即ES6 Module只存只读，不能改变其值，也就是指针指向不能变，相似const；

import的接⼝是read-only（只读状态），不能修改其变量值。即不能修改其变量的指针指向，但能够改变变量内部指针指向，能够对commonJS对从新赋值（改变指针指向），可是对ES6 Module赋值会编译报错。

ps :这里我回答的支支吾吾的,由于我不会啊,当时美团面试考过这道题,又来了。

说一下会输出什么? 讲解题

// a.js
var a = 1;
setTimeout(() => {
    a = 2;
}, 2)

module.exports.a = a;


// main.js
const a = require('./a').a;

console.log(a);

setTimeout(() => {
    const b = require('./a').a;
    console.log(b);
}, 100);
复制代码

答:1,2 说了一大堆支支吾吾确定错了,气势上就输了。真实答案如图所示

ps :图中是真实答案,原理说对了,可是本身根本没理解,根据曾经的弹坑理论,我TM彻底没预习这道题😂😂😂,坑爹啊!!

算法题

有一个混杂的整数序列，如今任务是对它们从新排序，以使其符合上述序列并输出结果

背景:

假设咱们取一个数字 x 并执行如下任一操做：
a:将 x 除以 3 (若是能够被 3 除)
b:将 x 乘以 2
每次操做后，记下结果。若是从 9 开始，能够获得一个序列

示例:

输入: "[4,8,6,3,12,9]"
输出: [9,3,6,12,4,8]
解释: [9,3,6,12,4,8] => 9/3=3 -> 3*2=6 -> 6*2=12 -> 12/3=4 -> 4*2=8

输入: "[3000,9000]"
输出: [9000,3000]

输入: "[4,2]"
输出: [2,4]

输入: "[4,6,2]"
输出: [6,2,4] 
复制代码

ps :说实话,面试官打题的时候,我内心波动是:此题必拿下,真当我LeetCode白刷了?我就不信你能把我秒了,面试官题题打完了,我懵了,读都没读懂,霎那间我知道了什么是年轻气盛,我膨胀了,我飘了,我人傻了。

面试后求助了某位字节大佬(风神),他给了解答,我看了以后,嗯~参差~~

浮点数

为何出现0.1+0.2 != 0.3

计算机是经过二进制的方式存储数据的，因此计算机计算0.1+0.2的时候，其实是计算的两个数的二进制的和。

0.1的二进制是多少,0.2的二进制是多少

啥??啥啥??。

十进制二进制转换函数

var num = 100;
console.log(num.toString(2));

复制代码

ps :函数我没写上来,第一个问题我啰嗦了很长时间才回答到要点上,由于本人在学校学的是UI专业,因此对这些都是不知因此,仍是本身不够努力吧。

浏览器原理

什么是跨域

违反浏览器同源策略就叫跨域, 同源策略是协议和域名以及端口必须一致

解决方式

JSONP

postMessage()

websocket

Node中间件代理

cors

nginx反向代理

window.name + iframe

location.hash + iframe

document.domain + iframe

优缺点

答不上来了,我都没用过啊,甚至理解都是从书面意义上硬背的

ps :惋惜啊,每次差点能觉得能够口若悬河的讲的时候,总会有些没遇到的问题,仍是知识深度不够。

进程和线程

进程是资源分配的最小单位，线程是CPU调度的最小单位

ps :如此抽象的答案不能使人满意,包括我本身,我试图引导面试官去在我合适的知识体系内问答,惋惜了,面试官让我再讲讲,我已经没什么能继续解答的了,仿佛被榨干的男人。

总结

面试结束,从算法题开始,我逐渐从拳击手变成了个沙包,我认识到了不止技术层面的参差。可是,我无所谓诶嘿嘿,这种面试,过了就是赚,不过我不亏。惋惜啊,字节抖音部这半年是得不到我这么个潜力股了。为一鸣可惜。为字节可惜。