2020年中的中高級前端面試題

面試前的準備

1.中/英文自我介紹
2.離職的原因

html

1.把帶 css 鏈接的<link>標簽放在 <head> 標簽內(nèi)饵逐，而帶 js 鏈接的 <script> 標簽盡量靠近 </body> , 為什么會有這種提議扯夭？如果必須不這樣做搞监，如何處理璃哟？

css

1.列舉水平垂直居中的實現(xiàn)
2.簡述一下什么是盒子模型
3.了解過 flex 布局倘是、 grid 布局嗎
4.計算樣式權(quán)重

JavaScript

1.數(shù)組去重
2.數(shù)組多層扁平化
3.深拷貝數(shù)組和對象
4.數(shù)組里面有 10 萬個數(shù)據(jù)黄虱，取第 1 個數(shù)據(jù)與第 10 萬個數(shù)據(jù)的時間相差多少？
5.數(shù)組的 map 和 forEach 有什么區(qū)別白热？
6.Fetch 與 XHR 的區(qū)別?
7.bind敛助、call、apply 的區(qū)別?
8.如何檢測變量的類型(盡可能多屋确，描述可能出現(xiàn)的問題)?
9.簡述一下原型鏈
10.使用過 ES6 嗎纳击？你常用的有哪一些？
11.簡述一下 Promise 的特點
12.Promise 怎么做異常處理?
13.Promise 串聯(lián)加載?
14.Promise 并行加載?
15.Promise 限流并發(fā)?
16.async/await?
17.一定要使用 async/await 嗎攻臀，如果我不做異步處理焕数，可能只是處理簡單的關(guān)閉彈框不能用 Promise 嗎?
18.事件循環(huán) (event-loop)

計算題

1.按順序?qū)懗龀绦虻妮敵鼋Y(jié)果:

考察 this 問題

var length = 10;

function fn() { alert(this.length); }
var obj = {
  length: 5,
  callApi: function(fn) {
    fn();
    arguments[0]();
  }
}

obj.callApi(fn, 3)

2.列出下面代碼的不足及優(yōu)化方案

var node = document.querySelectorAll('ul');
for (var i = 0;i < node.length; i++) {
  node[i].addEventListener('click', function() {
    alert('click' + i);
  });
}

3.改造下面的代碼，使之輸出 0 ~ 9茵烈，寫出你能想到的所有解法百匆。

for (var i = 0;i < 10; i++) {
  setTimeout(() => {
    console.log(i)
  }, 1000);
}

4.請寫出下面代碼的運行結(jié)果

async function async1() {
 console.log("async1 start");
 await async2();
 console.log("async1 end");
}

async function async2() {
    console.log("async2");
}

console.log("script start");

setTimeout(() => {
    console.log('setTimeout');
}, 0);

async1();

new Promise((reslove) => {
    console.log("promise1");
    reslove();
}).then(() => {
    console.log("promise2");
})

console.log("script end");

概念類

1.什么是閉包？列舉閉包的應(yīng)用場景
2.什么是科里化呜投？
3.節(jié)流與防抖
4.說說從瀏覽器地址欄輸入 URL 到頁面加載完的過程中都發(fā)生了什么事情?

TypeScript

1.為什么要引入 TypeScript加匈，引入的好處是什么？

React

1.虛擬 dom 是如何提升性能的
2.React 通過什么方式來更新數(shù)據(jù)
3.React 不能直接修改 State 嗎仑荐？
4.setState 是同步還是異步的雕拼？
5.React 生命周期
6.組件通信
7.簡述一下 React.Context 怎么使用
8.函數(shù)組件是什么？
9.高階函數(shù)粘招、高階組件
10.受控組件與非受控組件的區(qū)別
11.異步組件怎么使用啥寇？
12.怎么對組件的參數(shù)做類型約束呢？
13.組件設(shè)計原則
14.React 性能優(yōu)化
15.父組件在執(zhí)行 render 時會不會觸發(fā)子組件的 render 事件？如果會該怎么避免辑甜？
16.有了解過 Portals 嗎衰絮？
17.Hook 相比 class 的優(yōu)點
18.自定義 Hook 約束
19.自定義 Hook 使用
20.redux 是什么？
21.redux 的三大原則是什么磷醋？
22.描述 redux 單向數(shù)據(jù)流

Vue

1.列舉 Vue 的生命周期以及它們的應(yīng)用場景
2.父組件和子組件生命周期鉤子執(zhí)行順序是什么猫牡？
3.DOM 渲染在 Vue 的哪個生命周期就已經(jīng)完成
4.v-for 遍歷模板時為什么要用 key? key 有什么用？
5.v-if 與 v-show 有什么區(qū)別? 在什么場景下可以應(yīng)用
6.組件通信
7.vue 的雙向綁定原理是什么邓线？
8.怎么在組件中實現(xiàn) v-modal
9.vue router 的 beforeEach 和 afterEach 一般用法/使用場景?

webpack

1.module淌友、chunk、bundle 分別是什么骇陈？
2.loader 和 plugin 有什么區(qū)別震庭？有自己實現(xiàn)過嗎？
3.除了做基礎(chǔ)腳手架外你雌，還用來做過什么?
4.webpack 實現(xiàn)懶加載
5.webpack 優(yōu)化項
6.babel-runtime 和 babel-polyfill
7.什么是 Tree-Shaking

優(yōu)化類

1.SPA（vue/react）如何優(yōu)化首頁的加載速度器联？首屏空白是什么問題引起的？
2.頁面優(yōu)化有哪些方案匪蝙？

解決方案

1.列舉移動端適配方案
2.怎么處理跨域主籍？
3.Vue 與 React 的區(qū)別，怎么做技術(shù)選型逛球？

HTTP

1.列舉 HTTP 狀態(tài)碼以及它們的含義
2.有了解過 HTTP 緩存嗎？

運維相關(guān)

1.了解過 docker 嗎苫昌？
2.你們項目的 CI/CD 是怎么搭建的颤绕？
3.阿里云的 CDN 資源有緩存，如何強制更新緩存?
4.git 除了 pull 祟身、 push 外還了解哪些命令奥务？

其他

1.你哪些項目實現(xiàn)的比較滿意？
2.你碰到最難的一個問題是什么袜硫？
3.是否寫過測試用例
4.是否了解敏捷開發(fā)

目前只是整理了常見的題目