100個前端面試題

預計會總結100個（ ^ω^），目前74個，後續會繼續更新。

答案大部分來自網絡，是我選取的說明的較好的博文。

我的博客瞭解一下：www.bougieblog.cn

原生js

基本數據類型

String, Object, Number, Symbol, undefined, null

內存泄露

• 4類 JavaScript 內存泄漏及如何避免

變量提高及做用域，做用域鏈，詞法做用域，動態做用域

• JavaScript中做用域和做用域鏈的簡單理解（變量提高）
• 詞法做用域和動態做用域

this指向

• JS this用法詳解

call, apply, bind

• JavaScript中的call、apply、bind深刻理解

Event Loop及定時器和異步的原理

• JavaScript：完全理解同步、異步和事件循環(Event Loop)
• JavaScript 運行機制詳解：再談Event Loop
• JavaScript定時器原理分析
• Javascript異步編程的4種方法

閉包

• 全面理解Javascript閉包和閉包的幾種寫法及用途

原型和繼承鏈

• 最詳盡的 JS 原型與原型鏈終極詳解，沒有「多是」。（一）
• 最詳盡的 JS 原型與原型鏈終極詳解，沒有「多是」。（二）
• 最詳盡的 JS 原型與原型鏈終極詳解，沒有「多是」。（三）
• Javascript面向對象編程（二）：構造函數的繼承

對象的深拷貝和淺拷貝

• 深刻剖析 JavaScript 的深複製

原生ajax寫法

摘自youmightnotneedjquery

// post
var request = new XMLHttpRequest();
request.open('POST', '/my/url', true);
request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
request.send(data);

// get
var request = new XMLHttpRequest();
request.open('GET', '/my/url', true);
request.onload = function() {
  if (request.status >= 200 && request.status < 400) {
    // Success!
    var resp = request.responseText;
  } else {
    // We reached our target server, but it returned an error
  }
};
request.onerror = function() {
  // There was a connection error of some sort
};
request.send();

// 稍微封裝一下
function ajax({ url, method, headers, data, success, error }) {
    headers = headers || 'application/x-www-form-urlencoded; charset=UTF-8'
    let request = new XMLHttpRequest()
    request.open(method, url, true)
    request.setRequestHeader('Content-type', headers)
    request.onload = function(progressEvent) {
        let response = progressEvent.currentTarget
        let {status, statusText, responseText, responseUrl} = response
        if(status > 199 && status < 400) {
            if(success) success(responseText)
        } else {
            if(error) error(statusText)
        }
    }
    request.onerror = function(error) {
        console.error(error)
    }
    request.send(data)
}
複製代碼

嚴格模式

• 嚴格模式-MDN

實現一個Event Bus

如下是簡單模仿vue js的

class EventBus{
    constructor() {
        this.eventList = new Map()
    }
    $emit(evName, ...args) {
        let fn = this.eventList.get(evName)
        if(!fn) {
            console.error(`'${evName}' is undefined`)
            return
        }
        this.eventList.get(evName).apply(this, args)
    }
    $on(evName, fn) {
        if(this.eventList.get(evName)) {
            console.error(`duplicated event name : '${evName}'`)
            return
        }
        this.eventList.set(evName, fn)
        return {
            remove: () => {
                this.eventList.delete(evName)
            }
        }
    }
}
複製代碼

函數柯里化

• JS中的柯里化(currying)

---

ES6/7

這個所有看阮老師的就好了

• ECMAScript 6 入門

Class

Set和Map

generator和async

callback和Promise

Object.defineProperty, Object.defineProperties

Object.setPrototypeOf, Object.getPrototypeOf

Object.getOwnPropertyDescriptors

Proxy和Reflect

Symbol

---

性能

reflow和repaint，如何避免

• 前端工程師須要明白的「瀏覽器渲染」

前端性能優化

• 2017前端性能優化清單

---

網絡和瀏覽器

跨域請求

• 前端常見跨域解決方案（全）

GET, POST, PUT, DELETE的區別

• GET，POST，PUT，DELETE的區別與研究

請求頭和響應頭

• HTTP協議的響應頭,請求頭詳解

cookie, session, token

• COOKIE和SESSION有什麼區別？
• Token原理以及應用

TCP, TCP/IP, FTP, TELNET

• TCP 協議簡介
• 互聯網協議入門（一）
• 互聯網協議入門（二）

http, https和webSocket

• HTTP與HTTPS的區別
• WebSocket 教程

nginx反向代理與負載均衡

• 使用Nginx實現反向代理
• 【Nginx】實現負載均衡的幾種方式

http2.0

• HTTP/2.0 相比1.0有哪些重大改進？

瀏覽器緩存

• 瀏覽器緩存和HTTP緩存協商

瀏覽器渲染頁面的過程

• 瀏覽器渲染原理及流程

async和defer的區別及兼容性

• 腳本引用中的DEFER和ASYNC的用法和區別
• 兼容性請看can I use

IE6, 7, 8, 9, 10的兼容性問題

這個憑經驗解釋了

兼容IE8瀏覽器的技術選型

win7自帶IE8，在政府及事業單位工做的須要掌握

xss攻擊和sql注入

• 對於跨站腳本攻擊（XSS攻擊）的理解和總結
• sql注入

---

算法與模式

排序算法

這個github倉庫，包含了不少算法

• JavaScript 算法與數據結構

virtual dom的diff算法

煊赫一時的東西，必須理解

• 深度剖析：如何實現一個 Virtual DOM 算法

設計模式

• 常見的6種JavaScript設計模式

MVC, NVP, MVVP, MVVM

• 你對MVC、MVP、MVVM 三種組合模式分別有什麼樣的理解？

POP, OOP, SOA, AOP

• 編程思想的理解（POP,OOP,SOA,AOP）

---

html和css

Doctype及其做用

• DOCTYPE的做用，取值與區別

h5新特性

• H5新特性彙總

data-*屬性的做用

自定義屬性，能夠經過el.getAttribute('data-custom')取值，el.dataSet.custom取值和賦值。

grid和flex佈局及兼容性

flex自IE10開始支持，已成爲手機網頁主流佈局方法。grid佈局兼容性通常，估計再過一兩年纔會普及。

• Flex 佈局教程：語法篇
• Flex 佈局教程：實例篇
• grid柵格佈局

自適應和響應式佈局

自適應是隨着瀏覽器的大小變化而變化，響應式是響應屏幕尺寸，須要經過CSS來實現。

• 自適應網頁設計

px, in, em, rem, vh, vw, vmin, vmax

• CSS 單位

display的全部可能的值

• CSS display 屬性

css畫三角形

利用border實現

cubic-bezier

• 實用的 CSS — 貝塞爾曲線(cubic-bezier)

transform全部可能的值

• CSS3 transform 屬性

requestAnimationFrame

• requestAnimationFrame，Web中寫動畫的另外一種選擇
• 深刻理解定時器系列第二篇——被譽爲神器的requestAnimationFrame

css動畫和js動畫

掌握keyframs, transition。

• 原生JavaScript中動畫與特效的實現原理

---

框架

雙向綁定，深刻響應式原理，發佈訂閱模式，觀察者模式

• Vue.js雙向綁定的實現原理
• 深刻響應式原理
• 發佈-訂閱者模式和事件監聽器模式

單向數據流，狀態管理

• 單向數據流 和 Vuex 簡介
• Web前端的狀態管理（State Management）

路由的history和hash模式

• 前端路由的兩種實現原理

Vue和React的區別

• Vue與React兩個框架的區別和優點對比

Vuex, Redux和Flux

• Vuex，從入門到入門
• React 技術棧系列教程
• Flux 架構入門教程

Vue的render和React.createElement

React.createClass，React.Component和函數式申明組件的區別

• React.createClass和extends Component的區別
• React中函數式聲明組件

Mixin

React需使用createClass建立組件

高階組件

• 深刻淺出React高階組件
• 探索Vue高階組件

循環元素時爲何要加key

• React中key的必要性與使用

---

工具

sass和less

多看官方文檔

webpack, gulp, grunt, rollup, browersify的區別

• Gulp / Grunt 是前端自動化的工具，旨在提供一個自動化的流程（省去了手動編譯less，stylus，sass已經babel的轉碼，圖片的壓縮，代碼的壓縮複製等系列操做），傳統的多頁面應用很是適合用這個
• browserify / webpack 提供的是一個前端模塊化的方案，讓咱們能夠將commonJS的模塊方式應用與瀏覽器端
• webpack 是 browserify 的增強版，不但實現了browserify模塊化思想，還將圖片，樣式等也歸入了模塊化中
• rollup 打包代碼量小，經常使用來進行類庫的打包

babel和babel-polyfill的做用

babel會將ES6語法轉化爲ES5語法，可是不會轉義Promise和Object、Array等上的靜態方法，這時候就須要babel-polyfill

ESLint代碼風格

• Airbnb JavaScript Style Guide() {

git經常使用命令

• Git經常使用命令清單

前端模塊化的原理和意義

• Javascript模塊化編程（一）：模塊的寫法
• 前端模塊化開發的價值

CommonJS, AMD, CMD, UMD規範

• 關於 CommonJS AMD CMD UMD 規範的差別總結

karma, jasmine和mocha

js測試框架了解一下