摘要：記錄下我遇到的面試題，都有大佬分享過，附上各個(gè)大佬的文章，總結(jié)出其中的主要思想即可。推薦黑金團(tuán)隊(duì)的文章前端緩存最佳實(shí)踐推薦名揚(yáng)的文章淺解強(qiáng)緩存和協(xié)商緩存狀態(tài)碼重點(diǎn)是等，要給面試官介紹清楚。

前言

在這互聯(lián)網(wǎng)的寒冬臘月時(shí)期，雖說過了金三銀四，但依舊在招人不斷。更偏向于招聘高級(jí)開發(fā)工程師。本人在這期間求職，去了幾家創(chuàng)業(yè)，小廠，大廠廝殺了一番，也得到了自己滿意的offer。

整理一下自己還記得的面試題，希望能幫助到還在求職的你。大佬略過，不喜勿噴。

記錄下我遇到的面試題，都有大佬分享過，附上各個(gè)大佬的文章，總結(jié)出其中的主要思想即可。

css篇

1. 盒模型

概念就不介紹了，請(qǐng)看一個(gè)例題，若你能立馬反應(yīng)過來，就說明掌握的不錯(cuò)了。

/* 紅色區(qū)域的大小是多少？ */
.box {
    width: 200px;
    height: 200px;
    padding: 20px;
    margin: 20px;
    background: red;
    border: 20px solid black;
    box-sizing: border-box;
}

2. 水平垂直居中

貼上一位騰訊大佬總結(jié)的文章

16種方法實(shí)現(xiàn)水平居中垂直居中

按照固定寬高和不固定寬高分類各說幾個(gè)方法就可以了。

3. 頁面布局

3.1 高度已知，三欄布局，左右寬度300，中間自適應(yīng)

/* 浮動(dòng)布局 */
  .layout.float .left{
    float:left;
    width:300px;
    background: red;
  }
  .layout.float .center{
    background: yellow;
  }
  .layout.float .right{
    float:right;
    width:300px;
    background: blue;
  }
 /* 決定定位布局 */
 .layout.absolute .left-center-right>div{
  position: absolute;
 }
.layout.absolute .left{
  left:0;
  width: 300px;
  background: red;
}
.layout.absolute .center{
  left: 300px;
  right: 300px;
  background: yellow;
}
.layout.absolute .right{
  right:0;
  width: 300px;
  background: blue;
}
 /* flex布局 */
  .layout.flexbox{
      margin-top: 110px;
    }
    .layout.flexbox .left-center-right{
      display: flex;
    }
    .layout.flexbox .left{
      width: 300px;
      background: red;
    }
    .layout.flexbox .center{
      flex:1;
      background: yellow;
    }
    .layout.flexbox .right{
      width: 300px;
      background: blue;
    }

當(dāng)然還有 table 布局 和 grid 布局。

當(dāng)你回答出來以后，面試官還可能會(huì)追問你，這幾種布局有什么優(yōu)缺點(diǎn)，兼容性？

如果把高度已知換成未知，又該怎么做？

這些都是我們要考慮總結(jié)的。

3.2 高度已知，兩欄布局，左邊固定，右邊自適應(yīng)

基本思路和三欄布局一樣

3.3 如何實(shí)現(xiàn)左右等高布局

table 布局就登場(chǎng)了

section {
    width:100%;
  display: table;
}
article  {
    display: table-cell;
}
.left {
    height: 100px;
    background: red;
}
.right {
    background: black;
}

4. 如何實(shí)現(xiàn)一個(gè)最大的正方形

用 padding-bottom 撐開邊距就可以了。

 section {
    width:100%;
    padding-bottom: 100%;
    background: #333;
}

5. css 的解析順序

css 選擇器匹配元素是逆向解析

因?yàn)樗袠邮揭?guī)則可能數(shù)量很大，而且絕大多數(shù)不會(huì)匹配到當(dāng)前的 DOM 元素（因?yàn)閿?shù)量很大所以一般會(huì)建立規(guī)則索引樹），所以有一個(gè)快速的方法來判斷「這個(gè) selector 不匹配當(dāng)前元素」就是極其重要的。

如果正向解析，例如「div div p em」，我們首先就要檢查當(dāng)前元素到 html 的整條路徑，找到最上層的 div，再往下找，如果遇到不匹配就必須回到最上層那個(gè) div，往下再去匹配選擇器中的第一個(gè) div，回溯若干次才能確定匹配與否，效率很低。

逆向匹配則不同，如果當(dāng)前的 DOM 元素是 div，而不是 selector 最后的 em，那只要一步就能排除。只有在匹配時(shí)，才會(huì)不斷向上找父節(jié)點(diǎn)進(jìn)行驗(yàn)證。

所以為了減少查找時(shí)間，盡量不要直接使用標(biāo)簽選擇器。

6. css 如何開啟 gpu 加速

請(qǐng)參考網(wǎng)易云社區(qū)的文章CSS動(dòng)畫的性能分析和瀏覽器GPU加速

js篇

1. 不借助第三者交換 a，b兩個(gè)值。

/* 方法一 */
a = a + b;
b = a - b;
a = a - b;

/* 方法二 */
a = a - b;
b = a + b;
a = b - a;

/* 方法三 */
a = {a:b,b:a};
b = a.b;
a = a.a;

/* 方法四 */
a = [a,b];
b = a[0];
a = a[1];

/* 方法五 */
[a,b] = [b,a];

2. new 的過程和實(shí)現(xiàn)

/* 選自 yck 文章 */
function create(Con, ...args) {
  let obj = {}
  Object.setPrototypeOf(obj, Con.prototype)
  let result = Con.apply(obj, args)
  return result instanceof Object ? result : obj
}

如果你能清楚的了解上邊代碼的原理，請(qǐng)忽略。

不然的話建議閱讀下邊大佬的文章。

推薦 yck 的文章 重學(xué) JS 系列：聊聊 new 操作符

3. Eventloop

無論是筆試還是面試，高頻出現(xiàn)，要知其然還要知其所以然。

/* 選自 小美娜娜 文章 */
async function async1() {
    console.log("async1 start");
    await  async2();
    console.log("async1 end");
}

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

console.log("script start");

setTimeout(function () {
    console.log("settimeout");
},0);

async1();

new Promise(function (resolve) {
    console.log("promise1");
    resolve();
}).then(function () {
    console.log("promise2");
});
console.log("script end"); 

如果你能很清楚的知道每一步的輸出，可以忽略。

不然的話建議閱讀下邊大佬的文章，解釋的很詳細(xì)。

推薦 小美娜娜 的文章 Eventloop不可怕，可怕的是遇上Promise

4. 繼承優(yōu)缺點(diǎn)

 function inherits(childCtor, parentCtor) {
    function tempCtor() {};
    tempCtor.prototype = parentCtor.prototype;
    childCtor.prototype = new tempCtor();
    childCtor.prototype.constructor = childCtor;
};

比如說 原型繼承，構(gòu)造函數(shù)繼承，組合繼承等。

向面試官從簡(jiǎn)到難介紹每個(gè)繼承的優(yōu)缺點(diǎn)，一步步的寫出最完美的繼承。

絕對(duì)能加好多分。

推薦一篇 路易斯 的文章 JS原型鏈與繼承別再被問倒了

5. 實(shí)現(xiàn)一個(gè) promise

首先你需要對(duì) promise 有一個(gè)清晰的認(rèn)識(shí)，封裝過請(qǐng)求，使用過它的 api 等。

請(qǐng)參考 前端勸退師 的文章 「中高級(jí)前端面試」JavaScript手寫代碼無敵秘籍

6. 實(shí)現(xiàn)一個(gè)按順序加載的 promise

當(dāng)你說出 promise.all 和 promise.race 的區(qū)別后，面試官可能就會(huì)接著考察此題。

/* 使用 async await */
async function queue(tasks) {
  const res = []
  for (let promise of tasks) {
    res.push(await promise(res));
  }
  return await res
}
queue([a, b, c])
  .then(data => {
    console.log(data)
  })

當(dāng)然也可以使用 reduce 方法。

7. 對(duì) import 和 module.exports的理解

考察對(duì)模塊化的理解。 區(qū)分 Es6 和 commonJs 規(guī)范。

可以參考 有贊 2dunn 的 文章 import、require、export、module.exports 混合使用詳解

8. 實(shí)現(xiàn)一個(gè) EventEmitter 方法

當(dāng)你回答出 vue 中用 emit 通信的時(shí)候，就要小心了。

EventEmitter 方法主要包含了 on,emit,once,off方法。

  class Event {
    constructor() {
          this.events = Object.create(null);
      }
      on(name, fn) {
        if (!this.events[name]) {
            this.events[name] = []
          }
          this.events[name].push(fn);
          return this;
      }
      emit(name, ...args) {
        if (!this.events[name]) {
            return this;
        }
        const fns = this.events[name]
        fns.forEach(fn => fn.call(this, ...args))
        return this;
      }
      off(name,fn) {
        if (!this.events[name]) {
            return this;
        }
          if (!fn) {
            this.events[name] = null
            return this
          }
          const index = this.events[name].indexOf(fn);
          this.events[name].splice(index, 1);
        return this;
      }
      once(name,fn) {
        const only = () => {
          fn.apply(this, arguments);
          this.off(name, only);
        };
        this.on(name, only);
        return this;
      }
  }

可以參考 尤大大的 vue 源碼 vue-event

9. this 指向

如果你能清楚的知道每個(gè)this的指向，可以忽略。

比如說 默認(rèn)綁定，隱式綁定，顯示綁定，new 綁定。

/* 節(jié)選自 京東小姐姐 文章 */
var obj = {
    hi: function(){
        console.log(this);
        return ()=>{
            console.log(this);
        }
    },
    sayHi: function(){
        return function() {
            console.log(this);
            return ()=>{
                console.log(this);
            }
        }
    },
    see: function() {
        console.log(this);
        (function(){
            console.log(this)
        })()
    },
    say: ()=>{
        console.log(this);
    }
}
let hi = obj.hi(); 
hi();            
let sayHi = obj.sayHi();
let fun1 = sayHi(); 
fun1();             
obj.say();
obj.see();

不清楚的話，建議閱讀一下

京東小姐姐的文章 嗨，你真的懂this嗎？

10. 普通函數(shù)和箭頭函數(shù)的區(qū)別

this指向的問題，會(huì)捕獲其所在上下文的 this 值，作為自己的 this 值。

箭頭函數(shù)不綁定 arguments，取而代之用rest參數(shù)解決。

var foo = (...args) => {
  return args[0]
}
console.log(foo(1)) 

箭頭函數(shù)不能用作構(gòu)造器，和 new 一起用就會(huì)拋出錯(cuò)誤。

箭頭函數(shù)沒有原型屬性。

var foo = () => {};
console.log(foo.prototype) //undefined

11. 考察本地存儲(chǔ)

/* 以下代碼會(huì)輸出什么 */
localStorage.setItem("show",false);
console.log(localStorage.show || "顯示")

vue篇

1. vnode的轉(zhuǎn)換過程 和 dom-diff 的過程

有的大廠面試官需要你手寫這個(gè)過程，很殘忍有木有。

請(qǐng)參考 360-chenhongdong大佬的文章 讓虛擬DOM和DOM-diff不再成為你的絆腳石

2. key值的作用

使用 v-for更新已渲染的元素列表時(shí),默認(rèn)用就地復(fù)用策略。列表數(shù)據(jù)修改的時(shí)候,他會(huì)根據(jù)key值去判斷某個(gè)值是否修改：如果修改,則重新渲染這一項(xiàng);否則復(fù)用之前的dom，僅修改value值。

詳細(xì)參考 阿里-funnycoderstar 文章為什么使用v-for時(shí)必須添加唯一的key?

3. 對(duì) v-show的理解

我猜你可能會(huì)回答 v-show 通過控制樣式的 display: none 和 display: block 實(shí)現(xiàn)顯示隱藏的。 你覺得這樣合理嗎？

比如說：對(duì)一個(gè) img 或者 span 使用 v-show，那么當(dāng)它為 true 的時(shí)候不就把內(nèi)聯(lián)元素改成塊級(jí)元素了嘛。

出題目啦：

/* 1.此時(shí)span是顯示還是隱藏？ */
111



/* 2.此時(shí)span是顯示還是隱藏？ */
111

v-show 控制顯隱，是通過 js 代碼去修改元素的 element style。
如果 value 為 false，設(shè)置 display: none；
如果 value 為 true，清除 display 屬性。
所以 value 為 true 時(shí)，只是將 element style 中的 display 效果清除，并不能覆蓋 css 中的 display 樣式。

4. vue的生命周期

不要直接巴拉巴拉的說出那幾個(gè)英文單詞，建議按照官網(wǎng)圖的執(zhí)行順序來引出各個(gè)生命周期名稱，會(huì)有加分的。

react篇

1. react的自定義事件和原生事件的區(qū)別

React 并不是將 click 事件綁在該 div 的真實(shí) DOM 上，而是在 document 處監(jiān)聽所有支持的事件，當(dāng)事件發(fā)生并冒泡至 document 處時(shí)，React 將事件內(nèi)容封裝并交由真正的處理函數(shù)運(yùn)行。

詳情請(qǐng)參考文章 螞蟻金服-Nekron 大佬的文章 React合成事件和DOM原生事件混用須知

2. setState是異步還是同步的

不要著急回答是異步的，再上問的基礎(chǔ)上 setState 也可以是同步的。

setState 只在合成事件和鉤子函數(shù)中是“異步”的，在原生事件和 setTimeout 中都是同步的。

詳情請(qǐng)閱讀 餓了么-虹晨大佬的文章 你真的理解setState嗎？

3. redux和vuex的區(qū)別

redux 是 flux 的一種實(shí)現(xiàn)，redux 不單單可以用在 react 上面。

vuex 是 redux 的基礎(chǔ)上進(jìn)行改變，對(duì)倉庫的管理更加明確。

數(shù)據(jù)流向不一樣，vuex 的同異步有不同的流向，而 redux 的同異步是一樣的。

redux 使用的是不可變的數(shù)據(jù)，而 vuex 的數(shù)據(jù)是可變的，redux 每次修改更新數(shù)據(jù)，其實(shí)就是用新的數(shù)據(jù)替換舊的數(shù)據(jù)，而 vuex 是直接修改原數(shù)據(jù)。

4.react 和 vue 的 diff 過程有什么區(qū)別

React 是這么干的：你給我一個(gè)數(shù)據(jù)，我根據(jù)這個(gè)數(shù)據(jù)生成一個(gè)全新的 Virtual DOM，然后跟我上一次生成的 Virtual DOM 去 diff，得到一個(gè) Patch，然后把這個(gè) Patch 打到瀏覽器的 DOM 上去。完事。并且這里的 Patch 顯然不是完整的 Virtual DOM，而是新的 Virtual DOM 和上一次的 Virtual DOM 經(jīng)過 diff 后的差異化的部分。

Vue 在渲染過程中，會(huì)跟蹤每一個(gè)組件的依賴關(guān)系，不需要重新渲染整個(gè)組件樹。

React 每當(dāng)應(yīng)用的狀態(tài)被改變時(shí)，全部子組件都會(huì)重新渲染。 這可以通過 shouldComponentUpdate 這個(gè)生命周期方法來進(jìn)行控制。

React diff的是 Dom，而 Vue diff 的是數(shù)據(jù)。

webpack篇

1. webpack 如何進(jìn)行打包優(yōu)化

從提取公共模塊，區(qū)分開發(fā)環(huán)境，移除重復(fù)不必要的 css 和 js 文件等方面說。

推薦arlendp2012的文章 Webpack打包優(yōu)化

2. webpack 打包原理

初始化：?jiǎn)?dòng)構(gòu)建，讀取與合并配置參數(shù)，加載 Plugin，實(shí)例化 Compiler。

編譯：從 Entry 發(fā)出，針對(duì)每個(gè) Module 串行調(diào)用對(duì)應(yīng)的 Loader 去翻譯文件內(nèi)容，再找到該 Module 依賴的 Module，遞歸地進(jìn)行編譯處理。

輸出：對(duì)編譯后的 Module 組合成 Chunk，把 Chunk 轉(zhuǎn)換成文件，輸出到文件系統(tǒng)。

推薦whjin的文章 webpack原理

瀏覽器篇

1. 如何實(shí)現(xiàn)跨域

主要介紹 jsonp 和 cors 即可，其他可以一筆帶過。

推薦閱讀 浪里行舟 大佬的文章 九種跨域方式實(shí)現(xiàn)原理（完整版）

2. 輸入url后的加載過程

簡(jiǎn)要回答出 域名解析，返回資源，瀏覽器渲染，重排重繪概念等即可。

推薦 浪里行舟 文章從URL輸入到頁面展現(xiàn)到底發(fā)生什么？

3. 緩存

分為 強(qiáng)緩存 和 協(xié)商緩存， 各自的標(biāo)識(shí)要記住。

推薦 黑金團(tuán)隊(duì)的文章 前端緩存最佳實(shí)踐

推薦名揚(yáng)的文章 淺解強(qiáng)緩存和協(xié)商緩存

4. http狀態(tài)碼

重點(diǎn)是 301 302 304 401 等，要給面試官介紹清楚。

304 的話就會(huì)涉及到上問的緩存，能詳細(xì)介紹下會(huì)是個(gè)加分項(xiàng)。

推薦騎摩托馬斯文章，有圖有文字 具有代表性的 HTTP 狀態(tài)碼

5. 本地存儲(chǔ)

要記住 cookie 的幾個(gè)屬性值，分別是做什么的。

比如說 cookie 設(shè)置了 express 屬性，存儲(chǔ)位置有什么區(qū)別？

比如說 a.snow.com 和 b.snow.com 兩個(gè)網(wǎng)頁如何共享 cookie ?

推薦 Damonare的文章 Javascript 本地存儲(chǔ)小結(jié)

6. http請(qǐng)求頭有哪些

介紹幾個(gè)，然后說清楚各自的作用即可。

又會(huì)涉及到 緩存頭的知識(shí)。

推薦非常兔的文章http請(qǐng)求頭與響應(yīng)頭的應(yīng)用

7. 路由實(shí)現(xiàn)的原理

兩種模式 hash 和 history。

推薦尋找海藍(lán)96的文章 面試官: 你了解前端路由嗎?

8. 常見的內(nèi)存泄露

全局變量，未清除的定時(shí)器，閉包，以及 dom 的引用等。

推薦掘金的LeviDing文章 [譯] JavaScript 工作原理：內(nèi)存管理 + 處理常見的4種內(nèi)存泄漏

9. 前端安全問題

主要從 XSS 和 CSRF 兩個(gè)方面回答即可。

推薦 京東小姐姐的文章 【面試篇】寒冬求職之你必須要懂的Web安全

10. GET 和 POST 的區(qū)別

這題道理很深，也有很多誤區(qū)。

推薦 WebTechGarden 微信公眾號(hào)的文章 99%的人都理解錯(cuò)了HTTP中GET與POST的區(qū)別

11. 對(duì) HTTP2 的理解

HTTP2號(hào)稱可以讓我們的應(yīng)用更快、更簡(jiǎn)單、更穩(wěn)定，它完美解決了1.1版本的諸多問題。

推薦黑金團(tuán)隊(duì)的文章 面試官問：你了解HTTP2.0嗎？

擴(kuò)展篇

1. 請(qǐng)問你怎么看待技術(shù)和業(yè)務(wù)的關(guān)系？

歡迎討論、、、

2. 請(qǐng)問你怎么看待996或者說公司加班？

也歡迎討論，，，

總結(jié)

寫業(yè)務(wù)的同時(shí)，不要忘記提高自己的基礎(chǔ)知識(shí)，css，js，http 等，才會(huì)在面試中脫穎而出。

水平有限，如果有不妥的回答，還望指出，謝謝。

下篇總結(jié)下遇到的編碼算法相關(guān)題目。

有你才完美

自認(rèn)很菜，創(chuàng)建了一個(gè)數(shù)據(jù)結(jié)構(gòu)和算法的交流群，不限開發(fā)語言，前端后端，歡迎各位同學(xué)入駐。

群以超過掃碼限制人數(shù)，可以加我好友，邀請(qǐng)你入群。

請(qǐng)備注：掘金加群 哦