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 :如此抽象的答案不能使人滿意,包括我本身,我試圖引導面試官去在我合適的知識體系內問答,惋惜了,面試官讓我再講講,我已經沒什麼能繼續解答的了,彷彿被榨乾的男人。

總結

面試結束,從算法題開始,我逐漸從拳擊手變成了個沙包,我認識到了不止技術層面的參差。可是,我無所謂誒嘿嘿,這種面試,過了就是賺,不過我不虧。惋惜啊,字節抖音部這半年是得不到我這麼個潛力股了。爲一鳴可惜。爲字節可惜。