前端面試偏門題總結

轉載：  https://www.bougieblog.cn/article/Qk9VMTlHSUU.html

 

原生js

1. 基本數據類型
   String, Boolean, Number, Symbol, undefined, null
2. 4類 JavaScript 內存泄漏及如何避免
3. JavaScript中做用域和做用域鏈的簡單理解（變量提高）
4. 詞法做用域和動態做用域
5. JS this用法詳解
6. JavaScript中的call、apply、bind深刻理解
7. js中call方法的實現
8. Event Loop及定時器和異步的原理
   JavaScript：完全理解同步、異步和事件循環(Event Loop)
   JavaScript 運行機制詳解：再談Event Loop
   JavaScript定時器原理分析
   Javascript異步編程的4種方法
9. 全面理解Javascript閉包和閉包的幾種寫法及用途
10. 原型和繼承鏈
    最詳盡的 JS 原型與原型鏈終極詳解，沒有「多是」。（一）
    最詳盡的 JS 原型與原型鏈終極詳解，沒有「多是」。（二）
    最詳盡的 JS 原型與原型鏈終極詳解，沒有「多是」。（三）
    Javascript面向對象編程（二）：構造函數的繼承
11. 深刻剖析 JavaScript 的深複製

12. preventDefault()、stopPropagation()、return false 之間的區別

13. 原生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) } 

13. 嚴格模式-MDN

14. 實現一個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) } } } } 

15. JS中的柯里化(currying)

ES6/7

這個所有看阮老師的就好了
ECMAScript 6 入門

1. Class
2. Set和Map
3. generator和async
4. callback和Promise
5. Object.defineProperty, Object.defineProperties
6. Object.setPrototypeOf, Object.getPrototypeOf
7. Object.getOwnPropertyDescriptors
8. Proxy和Reflect
9. Symbol

性能

1. 前端工程師須要明白的「瀏覽器渲染」
2. 瀏覽器渲染原理及流程
3. 2017前端性能優化清單

安全

1. 前端安全之CSRF攻擊
2. 對於跨站腳本攻擊（XSS攻擊）的理解和總結
3. sql注入

網絡和瀏覽器

1. 前端常見跨域解決方案（全）
2. 瀏覽器中輸入URL到返回頁面的全過程
3. get、put、post、delete含義與區別
4. Restful與webService區別
5. HTTP協議的響應頭,請求頭詳解
6. COOKIE和SESSION有什麼區別？
7. Token原理以及應用
8. TCP 協議簡介
9. 互聯網協議入門（一）
10. 互聯網協議入門（二）
11. HTTP與HTTPS的區別
12. HTTPS的七個誤解（譯文）
13. WebSocket 教程
14. 使用Nginx實現反向代理
15. 【Nginx】實現負載均衡的幾種方式
16. http2.0
    關鍵詞：多路複用 HTTP/2.0 相比1.0有哪些重大改進？
17. 瀏覽器緩存機制詳解
18. 瀏覽器渲染原理及流程
19. 腳本引用中的DEFER和ASYNC的用法和區別
20. 兼容性請看can I use
21. IE6, 7, 8, 9, 10的兼容性問題
22. 兼容IE8瀏覽器的技術選型

算法與模式

1. JavaScript 算法與數據結構
2. 深度剖析：如何實現一個 Virtual DOM 算法
3. 常見的6種JavaScript設計模式
4. MVC，MVP 和 MVVM 的圖示
5. 編程思想的理解（POP,OOP,SOA,AOP）

html和css

1. DOCTYPE的做用，取值與區別
2. H5新特性彙總
3. data-*屬性的做用
   自定義屬性，能夠經過el.getAttribute('data-custom')取值，el.dataSet.custom取值和賦值。
4. Flex 佈局教程：語法篇
5. Flex 佈局教程：實例篇
6. grid柵格佈局
7. 自適應和響應式佈局
   自適應是隨着瀏覽器的大小變化而變化，響應式是響應屏幕尺寸，須要經過CSS來實現。 自適應網頁設計
8. CSS 單位
9. CSS display 屬性
10. css畫三角形
    利用border實現
11. 實用的 CSS — 貝塞爾曲線(cubic-bezier)
12. CSS3 transform 屬性
13. requestAnimationFrame，Web中寫動畫的另外一種選擇
14. 深刻理解定時器系列第二篇——被譽爲神器的requestAnimationFrame
15. css動畫和js動畫
    掌握keyframs, transition。
    原生JavaScript中動畫與特效的實現原理
16. 如何理解HTML結構的語義化？

框架

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

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

3. 路由的history和hash模式
   前端路由的兩種實現原理

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

5. Vuex, Redux和Flux
   Vuex，從入門到入門
   React 技術棧系列教程
   Flux 架構入門教程

6. Vue的render和React.createElement

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

8. Mixin
   React需使用createClass建立組件

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

10. 循環元素時爲何要加key
    React中key的必要性與使用

工具

1. sass和less
   多看官方文檔

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

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

4. ESLint代碼風格
   Airbnb JavaScript Style Guide() {

5. Git經常使用命令清單

6. 前端模塊化的原理和意義
   Javascript模塊化編程（一）：模塊的寫法
   前端模塊化開發的價值

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

8. karma, jasmine和mocha
   js測試框架了解一下
   開發人員看測試之TDD和BDD

手機端開發

1. html5移動端Meta設置

2. 移動端的touch click事件的理解+點透

3. rem佈局

4. 彈性滾動，慣性滾動

5. 經常使用的庫

前沿技術

1. webworker使用介紹，js中開啓多線程

2. 講講PWA