初級前端開發面試總結

前端面試總結

先說背景，本人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攻擊
水平垂直居中佈局