技術一面

原文鏈接：//juejin.cn/post/7120516854203809829

因為我之前的項目經驗有開發小程式的，所以一開始就問了小程式的問題

1、小程式onload和onready的區別

• onload：頁面載入的時候觸發，一個頁面只會調用一次，並且可以在onload中獲取到當前頁面路徑中的參數
• onshow：頁面顯示、切入前台時觸發
• onready：頁面初次渲染完成時觸發，代表頁面已經準備號了，可以和視圖層進行交互了

順序：onload、onshow、onready

原生js的順序剛好相反：document.ready —> window.onload

• document.ready是jquery中定義的方法：表示文檔結構載入完成（不包含圖片等非文章媒介文件），如果定義了多個document.ready的話就會按順序的執行
• window.onload ： 包含圖片在內的所有元素都載入完成了，但是onload不管定義多少個，都只執行一次（最後一個） 2、如何手動的觸發當前頁的onload

const pages = getCurrentPages()
const page = pages.pop()
page.onLoad()

3、如果有一個無限的數據列表，你要怎麼渲染 參考：zhuanlan.zhihu.com/p/146791824

已有技術方案：react native的列表組件： flatlist

4、小程式架構

5、instanceof是什麼，實現一個

6、分別講一下useState、useEffect、useContext是幹嘛的

7、實現一個hook：useDebounce

function useDebounce(value: any, delay = 300) {
    const [debounceValue, setDebouncedValue] = useState(value)
    useEffect(() => {
        const handler = setTimeout(() => {
            setDebouncedValue(value)
        }, delay)
        return () => {
            clearTimeout(handler)
        }
    }, [value, delay])
    return debounceValue
}

export default useDebounce

8、實現一個繼承，講一下原型鏈、實例、組合繼承

function A(opt) {
    this.name = opt.name
    this.age = opt.age
}
// A的函數方法
A.prototype.sayName = function() {
    console.log(this.name)
}
// B繼承A的變數
function B(opt) {
    A.call(this, opt)
    this.sex = opt.sex
}

// B繼承A的函數
B.prototype = A.prototype
B.prototype.sayAge = function() {
    console.log(this.age)
}

// 實例化B
const o2 = new B({
    name: "gogocj",
    age: "21",
    sex: "man"
})

8、講一下跨域，以及如何解決

9、jsonp為什麼要用script，script為什麼可以，為什麼不能用image這些呢？

• 利用script可以實現跨域訪問
• 你想想：我們使用script標籤的時候，有時可以直接引用外部資源，那麼為何能夠直接訪問呢？就是因為script自帶跨域
• script標籤裡面的src屬性跨域實現跨域訪問
• jsonp跨域只能用於get請求

function fn(data) {
    console.log('收到數據', data)
} 
const script = document.createElement('script')
script.src = '//localhost:8001/person?callback=fn'
// 標籤插入到頁面中

區別：

• img只能單次發送get請求，不可訪問響應內容（只是展現）
• script可以對get請求進行解析

10、知道egg的插件有哪些嗎？

11、插件和中間件的區別，什麼叫做洋蔥模型

12、能不能實現一個egg的插件

13、http和https的區別

技術二面

1、介紹一下你之前實習的項目（後面針對這個項目的方案和架構問了很多）

2、用純react來實現一個SSR服務端渲染，你會怎麼設計

3、你做的前端監控SDK實現了什麼功能，原理是什麼

4、ts的type和interface的區別

5、ts內置的高級類型Pick和Partial區別，能不能手寫一下源碼

6、能不能通過ts的類型編程實現加減法，手寫一個看看

因為我簡歷上寫了了解ts的類型編程，果然就考了

7 解釋一下eventLoop

8、進程和執行緒的區別，聽說過協程嗎？

9、講一下事件冒泡和捕獲

10、react的事件代理機制可以描述一下嗎

11、grid布局講一下

12、display的幾種屬性，inline-block的特點是什麼

13、addeventlistener第三個參數是什麼

14、演算法題：對二叉樹從上到下進行遍歷

技術三面

1、聊一下小程式的意義是什麼和微信小程式架構是怎麼樣的

• 你對小程式的理解
• 為什麼要有小程式
• 小程式的架構

2、之前實習做的項目難點在哪

3、聊一下微前端，webpack5的模組聯邦

4、聊一下webpack的打包過程是怎麼樣的

5、webpack有哪些優化配置

6、手寫：數組中哪些method會改變原數組，如何實現一個不改變元素組的splice 就是自己實現一個數組的splice方法，但是可以使用數組的slice和concat方法

7、for in和for of區別，下面程式碼的輸出是什麼

var arr = [1, 2, 3]
var obj = {key: 'value'}

function consoleIn(data) {
    for (let i in data) {
        console.log(i)
    }
}

function consoleOf(data) {
    for (let i of data) {
        console.log(i)
    }
}
consoleIn(arr)
consoleOf(arr)
consoleIn(obj)

8、手下一個判斷類型的程式碼，typeof和instanceof區別是什麼，下面程式碼輸出是什麼？

var arr = [1, 2, 3]
var arr2 = new Array();
typeof arr === ?
typeof Array === ?
typeof arr2 === ?

答：

function getType(value) {
    let type = typeof value;
    if (type !== 'object') { // 如果是原始數據類型，直接返回
        return type;
    }
    // 如果是引用數據類型，再進一步判斷，正則返回結果
    return Object.prototype.toString.call(value).replace(/^\[object (\S+)\]$/, '$1');
}

typeof 和 instanceof的區別 參考：juejin.cn/post/707157…

• typeof只能準確判斷原始數據類型和函數（函數其實是對象，並不屬於另一種數據類型，但也能夠使用 typeof 進行區分），無法精確判斷出引用數據類型（統統返回 object）。
• 調用typeof null返回的是object，這是因為特殊值null被認為是一個對空對象的引用（也叫空對象指針）
• instanceof 可以準確判斷引用數據類型，但是不能正確判斷原始數據類型
• typeof 雖然可以判斷原始數據類型（null 除外），但是無法判斷引用數據類型（function 除外）
• 如果想準確判斷引用數據類型，可以用instanceof運算符。
• typeof 會返回一個運算數的基本類型，instanceof 返回的是布爾值

typeof和instanceof都有一定的弊端，並不能滿足所有場景的需求。如果需要通用檢測數據類型，可以使用Object.prototype.toString.call()方法：

Object.prototype.toString.call({}); // "[object Object]"
Object.prototype.toString.call([]); // "[object Array]"
Object.prototype.toString.call(666); // "[object Number]"
Object.prototype.toString.call('xxx'); // "[object String]"

注意，該方法返回的是一個格式為"[object Object]"的字元串。

9、聊一下js的數據類型，基本數據類型和引用數據類型

10、手寫：useDebounce和useThrottle

function useDebounce(fn, delay, dep = []) {
  const { current } = useRef({ fn, timer: null });
  useEffect(function () {
    current.fn = fn;
  }, [fn]);

  return useCallback(function f(...args) {
    if (current.timer) {
      clearTimeout(current.timer);
    }
    current.timer = setTimeout(() => {
      current.fn.call(this, ...args);
    }, delay);
  }, dep)
}

function useThrottle(fn, delay, dep = []) {
  const { current } = useRef({ fn, timer: null });
  useEffect(function () {
    current.fn = fn;
  }, [fn]);

  return useCallback(function f(...args) {
    if (!current.timer) {
      current.timer = setTimeout(() => {
        delete current.timer;
      }, delay);
      current.fn.call(this, ...args);
    }
  }, dep);
}

11、你對位元組基礎架構的了解

12、HMR實現原理是什麼

13、react處理數據流的時候要注意什麼，可以從Hook的使用注意點出發

14、useState和useRef的區別

15、可以說一下CICD嗎

16、流水線打包是一個怎麼樣的過程，各個節點的原子服務是怎麼樣的

技術四面

1、前端程式設計師素質題： PM有一個需求：要處理一個很大很大的數組，找到這個大數組裡面的最大數字並顯示的頁面上，你作為前端owner要怎麼做？

答：我從下面幾個點回答了 【待完善】

2、react的fiber架構聊一下

3、docker的優勢

4、redis的快取雪崩怎麼處理

5、nginx實現的原理，你知道node的cluster模組嗎

HR面

• 自我介紹
• 前面幾輪的技術面試感覺怎麼樣
• 為什麼想搞前端
• 你對OKR的了解
• 你之前實習都做了什麼
• 你之前實習的感悟以及收穫
• 這次實習你想得到的是什麼
• 後面秋招的話，你要怎麼協調實習和秋招呢，你的看法是什麼
• 平時學習渠道是什麼
• 你對位元組基礎架構的了解

hr說：需要拉前四位面試官進群然後對其一下對我的情況，一周後出結果

有點小遺憾，等了一周的結果，滿懷期望的，可能橫向對比的時候不夠優秀吧，還得繼續努力！（今晚搞個小炸雞778，安慰一下自己哈哈哈）

但是不得不說這段時間的面試收穫很多，整理了15w字的typora文檔前端面試資料，大家感興趣的話，我後面可以發文章分享給大家，一起加油辣~