*** 代表重要程度及頻率
一、HTML/CSS模塊
| 知識點 | 題目 |
|---|---|
| HTML | 如何理解語義化？ |
| 默認情況下，哪些是塊級元素，哪些是內聯元素? | |
| 佈局 | 盒模型的寬度如何計算、margin縱向重疊的問題 |
| margin負值得問題、BFC理解和應用 *** | |
| float佈局的問題，以及清除浮動clearfix、float畫篩子 | |
| 定位 | absolute和relative分別依據什麼定位？ |
| 居中對齊有哪些實現方式？*** | |
| 圖文樣式 | line-height的繼承問題 *** |
| 響應式 | rem是什麼？如何實現響應式？ |
| CSS3 | css3動畫 |
二、Javascript基礎模塊
1. 變量類型和計算
| 知識點 | 題目 |
|---|---|
| 1.值類型vs引用類型、堆棧模型、深拷貝內容*** 2.typeof運算符*** 3.類型轉換，truly和falsely變量 |
①. *** 值類型和引用類型的區別\type of能判斷哪些類型\如何準確判斷一個變量是不是數組？ ②. *** .js 賦值、淺拷貝、深拷貝的區別及實例詳解 ③.*** 變量計算-類型轉換\何時使用 === 何時使用 == |
2. 原型和原型鏈
| 知識點 | 題目 |
|---|---|
| 1.Class和繼承，結Jquery的示例來理解.*** 2.instanceof *** 3.原型和原型鏈：圖示&執行規則 |
①. ***class的原型本質，怎麼理解？ ②. 手寫一個簡易的的Jquery，考慮插件和擴展性 ③. 如何準確判斷一個變量是不是數組？ |
3. 作用域和閉包
| 知識點（本章都很重要***） | 題目 |
|---|---|
| 1.作用域和自由變量. 2.閉包：兩種常見的方式& 自由變量查找規則. 3.this.*** |
①. ***淺析作用域、自由變量、閉包. ②. ***this的不同應用場景，如何取值？. ③. ***.js手寫bind函數. ④. ***實際開發中閉包的應用場景，舉例說明（catch工具) |
4. 異步和單線程
| 知識點（本章都很重要***） | 題目 |
|---|---|
| 1. 單線程和異步，異步和同步的區別 2. 前端異步的應用場景：網絡請求和定時任務 3. Promise解決callback hell |
① 同步和異步的區別是什麼？\ 前端異步的場景有哪些？ ② 手寫Promise加載一張圖片 |
| event-loop | ③ ***請描述event-loop（時間輪詢）機制 |
| Promise進階 | ④ Promise 狀態的表現與變化以及執行順序 |
| async/awiat | ⑤ async/awiat 實例詳解 |
| 微任務/宏任務 | ⑥ 微任務/宏任務 實例詳解 |
| 異步執行順序 | ⑦ ***promise和setTimeout async/await順序問題 |
三、Javascript-Web-API模塊
JS基礎知識，是規定語法（ECMA 262 標準）.
JS Web API，是網頁操作的API（W3C標準）
前者是後者的基礎，兩者結合纔是真正實際的應用
1. DOM-文檔對象模型
| 知識點 | 題目 |
|---|---|
| DOM本質. DOM節點操作. DOM結構操作. DOM性能*** |
DOM的本質 \ DOM節點操作 \ attr和property的區別. DOM結構操作. ***一次性插入多個DOM節點，考慮性能 |
2. BOM 瀏覽器對象模型
| 知識點 | 題目 |
|---|---|
| navigator 瀏覽器的信息. screen 屏幕的信息. location 地址的信息. history 前進後退的信息. |
navigator、screen、location、history對象 \ 如何識別瀏覽器的類型 \ 分析拆解URL的各個部分. |
3. 事件綁定
| 知識點 | 題目 |
|---|---|
| 事件綁定. 事件冒泡 事件代理*** |
描述事件冒泡的過程 \ 動態數據列表裏，如何監聽每條數據的點擊？. ***手寫通用的事件監聽函數 |
4. ajax
| 知識點 | 題目 |
|---|---|
| XMLHttprequest. 狀態碼. ***跨域：同源策略，跨域解決方案 |
手寫一個簡易的ajax. ***AJAX跨域問題講解 |
5. 存儲
| 知識點 | 題目 |
|---|---|
| cookie. localStorage sessionStorage |
localStorage、sessionStorage、Cookie的區別 |
四、開發環境
| 知識點 | 題目 |
|---|---|
| ***git 調試工具 **抓包 ***webpack babel ***linux常用命令 連接測試機 KOA |
*** 前端常用的開發環境核心內容整理[ git/chrome/h5抓包/webpack/linux ] |
五、運行環境
| 知識點 | 題目 |
|---|---|
| ***網頁加載過程 | *** 從輸入url到渲染頁面的整個過程 |
| ***性能優化 | ***前端性能優化的方式 ***防抖節流函數封裝 |
| 安全 | 常見的web前端攻擊方式有哪些？ |
六、HTTP模塊
| 知識點 | 題目 |
|---|---|
| 狀態碼 methods Restful API header |
HTTP基礎面試題[狀態碼\Methods\Restful API\header] |
| 描述http的緩存機制***** | *****Http緩存詳解 |
七、真題模擬
| 知識點 | 題目 |
|---|---|
| 對象（Object.keys()）、數組、 遞歸 | 手寫深度比較 |
| map、parseInt方法參數詳解 | [10,20,30].map(parseInt)返回結果解析 |
| 正則匹配、拆分數組、URLSearchParams | 獲取當前頁面url參數的三種方法 |
| concat()、遞歸 | 手寫數組flatern數組拍平，考慮多層級 |
| 遍歷、set | 數組去重有幾種方式？ |
| 數組 | js數組方法整理 |