前端面試總結
先說背景，本人2018年7月畢業，去年十月校招到今年10月一直在做前端開發工作，年前打算換工作，就重新梳理下面試考點
總結包含：
JavaScript基礎，CSS基礎，常見演算法和資料結構，React&Vue框架，計算機網路相關知識，可能有的點很細，有的點很大，參考個人情況進行總結，方便對知識進行回憶，有的列舉出了參考答案，有的則在文末列舉了優秀回答
閉包
- 閉包的概念？
- 閉包的作用？
- 使用閉包的注意點？
事件機制
- 事件3個階段 事件捕獲階段，處於目標階段，事件冒泡階段
- 預設為事件冒泡
ES6
- let const class 模組化 等等常用ES6知識
- 箭頭函式作用，此處可以擴充套件考察 this指向問題
- set map 相關
原型鏈
- 4種繼承方式
- new 原理
深拷貝&淺拷貝
- 資料型別
- 基本資料型別和引用資料型別
跨域
- 同源策略
- CORS
- JSONP
- Iframe + document.domain
安全
- CSRF 跨站請求攻擊 （原理，保護措施 referer token 驗證碼，設定cookie的httponly屬性，post請求等等
- XSS （同上
HTTP 方法
- 幾種方法介紹
- axios庫
輸入URL到頁面成功渲染的過程
- 經典問題 (任何一個步驟都可以引申來考察
- DNS解析 （具體的解析過程
- TCP連線
- http請求 (狀態碼考察
- 返回資料 瀏覽器渲染頁面 （頁面渲染過程
- 上面這些模組下面一一例舉
DNS解析過程
- 概念
- 瀏覽器快取
- 系統快取
- 路由器快取
- 域名提供商
- 頂級域名伺服器
- 主域名伺服器
瀏覽器頁面渲染
- 載入html構建頁面dom樹
- 解析css 構建渲染樹
- 渲染樹構建完成後，將渲染樹繪製到螢幕（迴流和重繪
- JS解析，會阻塞dom樹的構建
狀態碼
- http快取 304
- 強制快取 （expires cache-control
- 對比快取 （ Etag & if-none-match last-modified & if-modified-since
- 301 302 區別（永久性重定向（帶快取和臨時性重定向）
垃圾回收
- 引用計數
- 標記清除
TypeScript
- 使用就不說了，總結下優缺點
- 增加了程式碼的可讀性和可維護性 編譯時錯誤提示
- 包容性 .js 可寫為 .ts
- 擁抱ES6， 框架支援
- 學習成本高如：類，泛型，介面
函數語言程式設計
- 概念 相同的輸入 永遠的到相同的輸出，且沒有任何副作用
- 副作用 比如 ajax請求 改變全域性變數
- 優缺點 1.快取性 2. 可移植性 3. 並行性 不需要共性記憶體
- 柯里化的概念，作用（ 最好不要答裝逼 我還沒想到更好的答案
- 我列舉一個知乎答案： 統一介面，封裝的每一層都乾乾淨淨，邏輯表現清楚
IndexedDB
- 特點
- 區別LocalStorage SessionStorage(1.同步 2.儲存大小)
WebSocket
- 概念
- 特點
- readyState
排序演算法
- 常見的排序演算法 複雜度 穩定性
- 快速排序 不穩定 空間複雜度O(logn) 平均時間複雜度O(nlogn) 最差…O(n2)
- 選擇排序 不穩定 空間複雜度O(1) …所有都是O(n2)
- 氣泡排序 穩定
- 堆排序 不穩定 空間複雜度O(1) …所有都是O(nlogn)
- 插入排序
雜湊表
- 陣列和連結串列的特點
- 搜尋插入和刪除的時間複雜度O(1)
二叉樹
- 先序遍歷
- 中序遍歷
- 後序遍歷
- 層序表裡
- 樹高
連結串列
- 翻轉連結串列
AVL樹 二叉查詢樹
- 特點
- O(logn)
精度丟失問題
- 0.1 + 0.1 != 0.2 (為什麼
- 計算機內部的資訊都是由二進位制儲存的，但是有些浮點數沒法用二進位制精準的表示出來
- 小數轉整數
- Math.round() 四捨五入
- Math.ceil() Math.floor()
生成隨機數
- 引入 Math.random() [0,1) 的隨機小數
- parseInt(Math.random()*(m-n)+n) [n, m)
- Math.round(Math.random()*(m-n)+n) [n, m]
陣列去重
- var set = new Set([1,1,2,2,3,3,3,3]) var arr = […set]
- indexOf
如何判斷陣列是陣列
- Array.isArray(arr) ES5的方法
- arr instanceof Array
- arr.__proto__.constructor === Array()
- Object.prototype.toString.call(arr) === `[object Array]` //資料原型和物件原型定義的toString 方法不同
- Object.prototype.toString.call(obj) === `[object Object]` // 如上
- Object.prototype.toString.call(null) === `[object Null]` // 推薦此方法
陣列指定個數去重 findDuplicate(num)
- es6 Set Map 相關操作
反轉字串
JS非同步
- 非同步解決歷史(Ajax的進化歷程)
- Promise，Async/Await 用法 Promise 缺點
- Promise API Promise.all & Promise.race
Ajax
- ReadyState (0, 1, 2, 3, 4) 5中狀態
- js實現ajax
- 優缺點
單/雙向資料繫結
- MV** 概念
- vue/react 資料繫結機制
Vue
- 生命週期
- 父子元件通訊
- 雙向資料繫結
- vm.$nextTick原理
React
- 生命週期
- Virtual-dom技術以及改良後的Diff演算法
- 對比Vue.js
Position屬性
- 幾種屬性值
Box-sizing 屬性
- content-box border-box
- 盒模型 W3c標準盒模型和IE盒模型
兩欄佈局 三欄佈局
- 常見自適應佈局寫法
迴流和重繪
- 概念
- 舉例
- 如何避免 eg: DocumentFragment, Absolute
浮動
- 偽元素和偽類
- 清除浮動常見3種方法
隱藏元素
- display none
- visibility hidden 區別
垂直居中佈局
- 常見的垂直居中佈局方法
前端效能優化
- 列舉常見前端效能優化方法
列舉一些優秀回答
輸入URL你可以看到什麼？
HTTP快取
域名解析過程
vue生命週期
React生命週期
CSRF攻擊
水平垂直居中佈局