100個前端面試題

Bougie發表於2018-05-30
前端面試題

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

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

個人部落格瞭解一下：www.bougieblog.cn

原生js

基本資料型別

String, Object, Number, Symbol, undefined, null

記憶體洩露

變數提升及作用域，作用域鏈，詞法作用域，動態作用域

this指向

call, apply, bind

Event Loop及定時器和非同步的原理

閉包

原型和繼承鏈

物件的深拷貝和淺拷貝

原生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)
}
複製程式碼

嚴格模式

實現一個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)
            }
        }
    }
}
複製程式碼

函式柯里化

ES6/7

這個全部看阮老師的就行了

Class

Set和Map

generator和async

callback和Promise

Object.defineProperty, Object.defineProperties

Object.setPrototypeOf, Object.getPrototypeOf

Object.getOwnPropertyDescriptors

Proxy和Reflect

Symbol

效能

reflow和repaint，如何避免

前端效能優化

網路和瀏覽器

跨域請求

GET, POST, PUT, DELETE的區別

請求頭和響應頭

cookie, session, token

TCP, TCP/IP, FTP, TELNET

http, https和webSocket

nginx反向代理與負載均衡

http2.0

瀏覽器快取

瀏覽器渲染頁面的過程

async和defer的區別及相容性

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

這個憑經驗解釋了

相容IE8瀏覽器的技術選型

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

xss攻擊和sql注入

演算法與模式

排序演算法

這個github倉庫，包含了很多演算法

virtual dom的diff演算法

炙手可熱的東西，必須理解

設計模式

MVC, NVP, MVVP, MVVM

POP, OOP, SOA, AOP

html和css

Doctype及其作用

h5新特性

data-*屬性的作用

自定義屬性，可以通過el.getAttribute('data-custom')取值，el.dataSet.custom取值和賦值。

grid和flex佈局及相容性

flex自IE10開始支援，已成為手機網頁主流佈局方法。grid佈局相容性一般，估計再過一兩年才會普及。

自適應和響應式佈局

自適應是隨著瀏覽器的大小變化而變化，響應式是響應螢幕尺寸，需要通過CSS來實現。

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

display的所有可能的值

css畫三角形

利用border實現

cubic-bezier

transform所有可能的值

requestAnimationFrame

css動畫和js動畫

掌握keyframs, transition。

框架

雙向繫結，深入響應式原理，釋出訂閱模式，觀察者模式

單向資料流，狀態管理

路由的history和hash模式

Vue和React的區別

Vuex, Redux和Flux

Vue的render和React.createElement

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

Mixin

React需使用createClass建立元件

高階元件

迴圈元素時為什麼要加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程式碼風格

git常用命令

前端模組化的原理和意義

CommonJS, AMD, CMD, UMD規範

karma, jasmine和mocha

js測試框架了解一下

相關文章