2 年前端,如何跟抖音面试官 battle，从外包公司到今日头条offer

Less转换Css官方原理链接[1]

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 :图中是真实答案,原理说对了,但是自己根本没理解,根据曾经的弹坑理论[2],我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 -> 32=6 -> 62=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专业,所以对这些都是不知所以,还是自己不够努力吧。

浏览器原理

---

什么是跨域

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

解决方式

1. JSONP

2. postMessage()

3. websocket

4. Node中间件代理

5. cors

6. nginx反向代理

7. window.name + iframe

8. location.hash + iframe

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录大纲截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且后续会持续更新

如果你觉得这些内容对你有帮助，可以添加V获取：vip1024c （备注前端）

最后

---

大厂面试问深度，小厂面试问广度，如果有同学想进大厂深造一定要有一个方向精通的惊艳到面试官，还要平时遇到问题后思考一下问题的本质，找方法解决是一个方面，看到问题本质是另一个方面。还有大家一定要有目标，我在很久之前就想着以后一定要去大厂，然后默默努力，每天看一些大佬们的文章，总是觉得只有再学深入一点才有机会，所以才有恒心一直学下去。

[外链图片转存中…(img-sSnCrcdu-1712121745695)]

最后

---

大厂面试问深度，小厂面试问广度，如果有同学想进大厂深造一定要有一个方向精通的惊艳到面试官，还要平时遇到问题后思考一下问题的本质，找方法解决是一个方面，看到问题本质是另一个方面。还有大家一定要有目标，我在很久之前就想着以后一定要去大厂，然后默默努力，每天看一些大佬们的文章，总是觉得只有再学深入一点才有机会，所以才有恒心一直学下去。