前端學科面試寶典 蔡威 [電子郵件地址] HTML5、CSS3...................................................................................................................... ...
前端學科面試寶典
蔡威
[電子郵件地址]
HTML5、CSS3...................................................................................................................... 22
1、H5 的新特性有哪些？C3 的新特性有哪些？（必會）....................................................... 22
2、Localstorage、sessionStorage、cookie 的區別（必會）........................................................23
3、H5 的瀏覽器存儲有哪些？（必會）.....................................................................................23
4、簡述 transform，transition，animation 的作用？（必會）................................................... 24
5、如何使一個盒子水平垂直居中？（必會）.......................................................................... 24
6、如何垂直居中一個 img?（必會）........................................................................................ 29
7、如何實現雙飛翼（聖杯）佈局？（必會）.......................................................................... 29
8、CSS 的盒模型？（必會）...................................................................................................... 32
9、什麼是漸進增強和優雅降級?它們有什麼不同？（必會）................................................33
10、哪些是塊級元素那些是行內元素，各有什麼特點 ？（必會）...................................... 34
11、CSS 中選擇器的優先順序以及 CSS 權重如何計算？（必會）.......................................... 34
12、CSS 選擇器有哪些?哪些屬性可以繼承?（必會）............................................................ 35
13、HTML5 的離線存儲怎麼使用，工作原理是什麼？（必會）............................................35
14、說說你對語義化的理解？列舉 5 個語義化的標簽？（必會）........................................36
15、 列舉 5 個以上的 H5 事件？（必會）................................................................................37
16、列舉 5 個以上的 H5input 元素 type 屬性值？（必會）..................................................... 37
17、用 CSS3 做一個三角形？（必會）..................................................................................... 38
18、CSS 中哪些屬性可繼承，哪些不可以？（必會）............................................................ 39
19、CSS 單位中 px、em 和 rem 的區別？（必會）.................................................................. 39
20、rem 適配方法如何計算 HTML 跟字型大小及適配方案？（必會）..........................................40
21、CSS 中 link 和@import 的區別？（必會）......................................................................... 40
22、Display：none 與 visibility：hidden 的區別？（必會）......................................................41
23、Position 的值有哪些，分別有哪些作用？（必會）.......................................................... 41
24、為什麼會出現浮動？浮動元素會引起什麼問題？如何清除浮動？（必會）................ 42
25、簡述彈性盒子 flex 佈局及 rem 佈局？（必會）................................................................ 42
26、important 的作用？（必會）................................................................................................46
27、如何解決 margin“塌陷”？（必會）................................................................................ 46
28、 什麼是外邊距重疊？重疊的結果是什麼？（必會）...................................................... 47
29、HTML5 的 input 增加哪些 type？（必會）.......................................................................... 47
30、雪碧圖 （ 精靈圖 ）？（必會）...................................................................................... 48
31、less 和 Scss 的配置使用以及特點？（必會）................................................................... 48
32、::before 和::after 中雙冒號和單冒號有什麼區別、作用？（必會）............................. 50
33、CSS3 新增偽類，以及偽元素？（必會）.......................................................................... 50
34、 img 的 alt 與 title 的異同，還有實現圖片懶載入的原理？（必會）............................ 51
35、BFC 是什麼？（高薪常問）.................................................................................................51
36、列舉 HTML5 移動開發 APP 框架？（瞭解）...................................................................... 52
37、Style 標簽寫在 body 後與 body 前有什麼區別？（瞭解）................................................52
38、如何區分 HTML 和 HTML5？（瞭解）................................................................................ 52
39、使用 CSS 預處理器的優缺點有哪些？（瞭解）............................................................... 53
40、 Doctype 作用，H5 為什麼只需要寫？（瞭解）............................ 53
41、什麼是字體圖標？如何避免圖片在網頁上失真？（瞭解）............................................ 53
第 1 頁 共 348 頁
42、iframe 有哪些優缺點？（瞭解）......................................................................................... 54
43、什麼是 canvas，基本用法是什麼？你使用它做個什麼需求？（瞭解）........................ 54
44、使用 CSS 怎麼讓 Chrome 支持小於 12px 的文字比如 10px？（瞭解）...........................56
Bootstrap 響應式開發.......................................................................................................... 56
1、 Bootstrap 柵格系統的工作原理？（必會）....................................................................... 56
2、Bootstrap 優缺點？（必會）.................................................................................................. 58
3、大屏適配方案有哪些？（必會）.......................................................................................... 58
4、對於各類尺寸的設備，Bootstrap 設置的 class 首碼分別是什麼？（必會）.................... 64
5、 自己手動封裝響應式佈局方案？（必會）........................................................................64
6、 Bootstrap 引入的 Jquery 是哪個版本？Jquery 版本不同會產生什麼影響？（必會）.....65
7、Bootstrap 如何設置響應式表格？（必會）.......................................................................... 71
8、使用 Bootstrap 創建垂直表單的基本步驟？（必會）......................................................... 71
9、使用 Bootstrap 創建水平表單的基本步驟？（必會）......................................................... 71
10、使用 Bootstrap 如何創建表單控制項的幫助文本？（必會）............................................... 71
11、使用 Bootstrap 激活或禁用按鈕要如何操作？（必會）................................................... 72
12、Bootstrap 有哪些關於的 class？（必會）............................................................... 72
13、Bootstrap 中有關元素浮動及清除浮動的 class？（必會）............................................... 72
14、Bootstrap 如何製作下拉菜單？（必會）............................................................................ 72
15、Bootstrap 如何製作按鈕組件？以及水平按鈕組和垂直按鈕組的優先順序？（必會）.... 72
16、Bootstrap 如何設置按鈕的下拉菜單？（必會）................................................................ 73
17、Bootstrap 中的輸入框組如何製作？（必會）.................................................................... 73
18、Bootstrap 中的導航都有哪些？（必會）............................................................................ 73
19、Bootstrap 中設置分頁的 class？（必會）........................................................................... 73
20、Bootstrap 中顯示標簽的 class？（必會）........................................................................... 73
21、什麼是媒體查詢？（必會）................................................................................................ 73
22、Bootstrap 中按鈕組件顏色？（必會）................................................................................ 75
23、Bootstrap 常用組件有哪些？（瞭解）................................................................................ 75
JavaScript 基礎.....................................................................................................................75
1、 JavaScript 的基本類型有哪些？引用類型有哪些？null 和 undefined 的區別？（必會）
........................................................................................................................................................ 75
2、如何判斷 JavaScript 的數據類型？（必會） JavaScript 數據類型一共有 7 種：....... 76
2、 創建對象有幾種方法（必會）............................................................................................ 78
4、簡述創建函數的幾種方式？ （必會）................................................................................78
5、Javascript 創建對象的幾種方式？ （必會）...................................................................... 78
6、請指出 JavaScript 宿主對象和原生對象的區別？（必會）............................................... 80
7、 JavaScript 內置的常用對象有哪些？併列舉該對象常用的方法？（必會）................. 81
8、 === 和 ==的區別？（必會）.......................................................................................... 86
9、 null，undefined 的區別（必會）.......................................................................................... 86
10、JavaScript 中什麼情況下會返回 undefined 值？（必會）................................................. 87
11、如何區分數組和對象？（必會）........................................................................................87
12、怎麼判斷兩個對象相等？（必會）.................................................................................... 88
第 2 頁 共 348 頁
13、列舉三種強制類型轉換和兩種隱式類型轉換？（必會）................................................ 89
14、 JavaScript 中怎麼獲取當前日期的月份？（必會）........................................................ 89
15、 什麼是類數組（偽數組），如何將其轉化為真實的數組？（必會）..........................90
16、如何遍歷對象的屬性？（必會）........................................................................................91
17、src 和 href 的區別是？（必會）.......................................................................................... 93
18、如何使用原生 JavaScript 給一個按鈕綁定兩個 onclick 事件？（必會）........................ 93
19、 如何在 JavaScript 中比較兩個對象？（必會）............................................................... 94
20、JavaScript 中的作用域、預解析與變數聲明提升？ （必會）....................................... 95
21、變數提升與函數提升的區別？（必會）............................................................................97
22、 什麼是作用域鏈？（必會）..............................................................................................97
23、如何延長作用域鏈？（必會）............................................................................................ 98
23、 判斷一個值是什麼類型有哪些方法？（必會）.............................................................. 98
25、JavaScript 變數按照存儲方式區分為哪些類型，並描述其特點？（必會）.................. 99
26、如何實現數組的隨機排序？（必會）................................................................................ 99
27、 Function foo() {}和 var foo = function() {}之間 foo 的用法上的區別？（必會）.... 100
28、索引有哪幾種類型，有什麼區別？（瞭解）..................................................................100
29、簡述 Array.form 和 Array.of 的使用及區別？（瞭解）.................................................. 101
30、根據你的理解,請簡述 JavaScript 腳本的執行原理（瞭解）......................................... 103
WebAPI............................................................................................................................... 103
1、 什麼是 dom？（必會）...................................................................................................... 103
2、dom 是哪種基本的數據結構？（必會）............................................................................ 103
3、 dom 操作的常用 api 有哪些？（必會）........................................................................... 103
4、 dom 節點的 Attribute 和 Property 有何區別？（必會）................................................... 104
5、dom 結構操作怎樣添加、移除、移動、複製、創建和查找節點？（必會）................ 104
6、dom 事件的級別？（必會）................................................................................................ 105
7、dom 事件模型？（必會）.................................................................................................... 105
8、dom 事件流？（必會）........................................................................................................ 106
9、什麼是事件冒泡，它是如何工作的？如何阻止事件冒泡、預設行為?（必會）..........106
10、JavaScript 動畫和 CSS3 動畫有什麼區別？（必會）...................................................... 107
11、event 對象的常見應用？（必會）.................................................................................... 108
12、自定義事件/ 模擬事件？（必會）................................................................................. 108
13、通用事件綁定/ 編寫一個通用的事件監聽函數？（必會）......................................... 108
14、dom 和 bom 的區別（必會）............................................................................................. 109
15、事件三要素（必會）..........................................................................................................110
16、事件執行過程（必會）...................................................................................................... 110
17、獲取元素位置（必會）...................................................................................................... 110
18、封裝運動函數（必會）...................................................................................................... 111
19、綁定事件和解除事件的區別（必會）.............................................................................. 112
20、談談事件委托的理解？（必會）......................................................................................113
21、 JavaScript 中的定時器有哪些？他們的區別及用法是什麼？（必會）...................... 113
22、比較 attachEvent 和 addEventListener?（必會）................................................................ 113
第 3 頁 共 348 頁
23、document.write 和 innerHTML 的區別？（必會）............................................................. 114
24、 什麼是 window 對象？什麼是 document 對象？（必會）............................................ 114
25、Js 拖動的原理？（必會）................................................................................................. 116
26、描述瀏覽器的渲染過程，DOM 樹和渲染樹的區別（必會）......................................... 117
27、dom 樹和 render 樹之間的關係？（高薪常問）.............................................................. 117
28、獲取到頁面中所有的 CheckBox 怎麼做（不適用第三方框架）？（高薪常問）........ 118
29、 簡單說一下頁面重繪和迴流？（高薪常問）................................................................ 118
30、如何最小化重繪(repaint)和迴流(reflow)（高薪常問）.................................................... 118
31、Js 延遲載入的方式有哪些？（瞭解）............................................................................. 118
32、IE 與標準事件模型有哪些差別？（瞭解）...................................................................... 121
js 高級................................................................................................................................ 121
1、typeof 和 instanceof 區別（必會）...................................................................................... 121
2、js 使用 typeof 能得到的哪些類型？（必會）.................................................................... 122
3、解釋一下什麼是回調函數，並提供一個簡單的例子？（必會）.................................... 122
4、什麼是閉包？（必會）........................................................................................................123
5、什麼是記憶體泄漏（必會）....................................................................................................124
6、哪些操作會造成記憶體泄漏？（必會）................................................................................ 124
7、JS 記憶體泄漏的解決方式（必會）....................................................................................... 124
8、說說你對原型（prototype）理解（必會）......................................................................... 126
9、介紹下原型鏈（解決的是繼承問題嗎）（必會）............................................................ 126
10、簡單說說 js 中的繼承（必會）......................................................................................... 126
11、介紹 this 各種情況（必會）.............................................................................................. 127
12、數組中的 forEach 和 map 的區別？（必會）.................................................................... 127
13、for in 和 for of 的區別（必會）........................................................................................ 127
14、常見的繼承有幾種方法（必會）...................................................................................... 127
15、Call 和 apply，bind 的區別（必會）................................................................................. 128
16、New 操作符具體幹了什麼呢？（必會）..........................................................................128
17、用 JavaScript 實現冒泡排序。數據為 23、45、18、37、92、13、24 （必會）..... 129
18、用 js 實現隨機選取 10–100 之間的 10 個數字，存入一個數組併排序（必會）....... 129
19、已知數組 var stringArray = [“This”,“is”, “Baidu”,“Campus”]，Alert 出”This
is Baidu Campus”（必會）...................................................................................................... 130
20、已知有字元串 foo=”get-element-by-id”,寫一個 function 將其轉化成駝峰表示
法”getElementById”（必會）..................................................................................................130
21、有這樣一個 URL： http://item.taobao.com/item.htm?a=1&b=2&c=&d=xxx&e，請寫
一段 JS 程式提取 URL 中的各個 GET 參數(參數名和參數個數不確定)，將其按 key-value
形式返回到一個 json 結構中，如{a: "1", b: "2", c: "", d: "xxx", e: undefined}（必會）
...................................................................................................................................................... 130
22、var numberArray = [3,6,2,4,1,5]; （考察基礎 API）（必會）................................. 131
23、輸出今天的日期，以 YYYY-MM-DD 的方式，比如今天是 2014 年 9 月 26 日，則輸出
2014-09-26（必會）................................................................................................................ 131
24、把兩個數組合併，並刪除第二個元素。（必會）.......................................................... 132
第 4 頁 共 348 頁
25、寫一個 function，清除字元串前後的空格。（相容所有瀏覽器）（必會）............... 132
26、截取字元串 abcdefg 的 efg （必會）............................................................................. 132
27、判斷一個字元串中出現次數最多的字元，統計這個次數（必會）..............................132
28、將數字 12345678 轉化成 RMB 形式 如： 12,345,678 （必會）.............................133
29、Split（）和 join（）的區別？（必會）............................................................................133
30、JavaScript 中如何對一個對象進行深度 clone？（必會）............................................... 133
31、js 數組去重，能用幾種方法實現（必會）...................................................................... 134
32、談談你對 Javascript 垃圾回收機制的理解？（高薪常問）............................................ 135
33、Class 和普通構造函數有何區別？（高薪常問）............................................................ 136
34、什麼是 js 事件迴圈 event loop（高薪常問）.................................................................. 137
35、JS 里垃圾回收機制是什麼，常用的是哪種，怎麼處理的？（高薪常問）................. 137
36、計算字元串位元組數：（高薪常問）.................................................................................. 137
37、js 如何處理防抖和節流（高薪常問）.............................................................................. 138
38、Eval 是做什麼的？（高薪常問）...................................................................................... 139
39、什麼是進程、什麼是線程、它們之間是什麼關係（瞭解）..........................................140
40、什麼是任務隊列？（瞭解）..............................................................................................140
41、棧和隊列的區別？（瞭解）.............................................................................................. 141
42、棧和堆的區別？（瞭解）.................................................................................................. 141
JQuery................................................................................................................................. 141
1、JQuery 的\((document).ready(function () {})，\)(function () {})與原生 JS 的 window.onload
有什麼不同？（必會）..............................................................................................................141
2、jQuery 和 Zepto 的區別？各自的使用場景？（必會）......................................................142
3、你是如何使用 jQuery 中的 ajax 的？（必會）................................................................... 142
4、JQuery 的常用的方法增、刪、複製、改、查（必會）.................................................... 143
5、jQuery 中\(.get()提交和\).post()提交有區別嗎？（必會）................................................ 144
6、簡單的講敘一下 jQuery 是怎麼處理事件的，你用過哪些事件？（必會）....................144
7、你使用過 jQuery 中的動畫嗎，是怎樣用的？（必會）....................................................145
8、在 jQuery 中引入 css 有幾種方式？（必會）.................................................................... 145
9、你在 jQuery 中使用過哪些插入節點的方法，它們的區別是什麼？（必會）................145
10、你為什麼要使用 jQuery?(或者是這樣問的：你認為 jQuery 有哪些好處？)（必會）.. 145
11、你知道 jQuery 中的選擇器嗎，請講一下有哪些選擇器？（必會）..............................146
12、jQuery 中的選擇器和 css 中的選擇器有區別嗎？（必會）........................................... 146
13、你覺得 jQuery 中的選擇器有什麼優勢？（必會）..........................................................146
14、jQuery 的 ajax 返回的是 promise 對象嗎？（必會）........................................................146
15、jQuery 對象和 dom 對象是怎樣轉換的？（必會）.......................................................... 146
16、jQuery 中的 load()方法一般怎麼用的？（必會）............................................................ 146
17、在 jQuery 中你是如何去操作樣式的？（必會）..............................................................147
18、jQuery 中如何來獲取或和設置屬性？（必會）...............................................................147
19、jQuery 如何設置和獲取 HTML、文本和值？（必會）.................................................... 147
21、有哪些查詢節點的選擇器？（必會）..............................................................................148
22、jQuery 中的 hover()和 toggle()有什麼區別？（必會）..................................................... 148
第 5 頁 共 348 頁
23、你知道 jQuery 中的事件冒泡嗎，它是怎麼執行的，如何阻止事件冒泡？（必會）..148
24、jQuery 中的 bind(),live(),delegate(),on()的區別？（必會）............................................ 148
25、jQuery 中 detach()和 remove()方法的區別是什麼? （必會）..........................................149
26、\((this)和 this 關鍵字在 jQuery 中有何不同？（必會）................................................... 149
27、jQuery 中 attr()和 prop()的區別（必會）........................................................................... 149
28、jQuery 庫中的\)()是什麼？（必會）.................................................................................. 149
29、jQuery.extend()與 jQuery.fn.extend()的區別？（必會）................................................. 150
30、jQuery 的屬性拷貝(extend)的實現原理是什麼，如何實現深淺拷貝？（高薪常問）.. 150
31、jQuery 的實現原理？（高薪常問）...................................................................................150
32、jQuery 是如何處理緩存的？（高薪常問）.......................................................................151
33、jQuery 的 slideUp 動畫，當滑鼠快速連續觸發動畫會滯後反覆執行，該如何處理呢?（高
薪常問）...................................................................................................................................... 151
34、你讀過有關於 jQuery 的書嗎？（瞭解）..........................................................................151
數據可視化........................................................................................................................ 151
1、echarts 的基本用法（必會）................................................................................................151
2、如何使用 echarts（必會）....................................................................................................152
3、echarts3.x 與 echarts2.x 的區別（必會）........................................................................... 152
4、echarts 如何畫圖？（必會）................................................................................................ 152
5、echarts 繪製條形圖（必會）................................................................................................ 152
6、切換其他組件統計圖時，出現卡頓問題如何解決（必會）............................................ 153
7、echarts 圖表自適應 div resize 問題（必會）......................................................................153
8、echarts 和 chart 對比（必會）.............................................................................................. 153
9、echarts 在 vue 中怎麼引用？（必會）................................................................................ 154
10、echarts 支持哪些圖標？（瞭解）...................................................................................... 155
ES6...................................................................................................................................... 156
1、 ES5 和 ES6 的區別，說幾個 ES6 的新增方法（必會）................................................... 156
2、ES6 的繼承和 ES5 的繼承有什麼區別（必會）.................................................................159
3、var、let、const 之間的區別（必會）..................................................................................159
4、Class、extends 是什麼，有什麼作用（必會）.................................................................. 159
5、module、export、import 有什麼作用（必會）................................................................... 160
6、舉例 ES6 對 String 字元串類型做的常用升級優化（必會）.............................................160
7、舉例 ES6 對 Array 數組類型做的常用升級優化（必會）................................................. 160
8、舉例 ES6 對 Number 數字類型做的常用升級優化（必會）.............................................. 161
9、舉例 ES6 對 Function 函數類型做的常用升級優化（必會）.............................................161
10、舉例 ES6 對 Object 類型做的常用升級優化?（必會）.................................................... 162
11、使用箭頭函數應註意什麼/箭頭函數和普通函數的區別（必會）............................... 163
12、ES6 的模板字元串有哪些新特性？並實現一個類模板字元串的功能（必會）........... 163
13、介紹下 Set、Map 的區別（必會）................................................................................... 164
14、setTimeout、Promise、Async/Await 的區別（必會）....................................................164
15、Promise 有幾種狀態，什麼時候會進入 catch？（必會）............................................... 165
16、ES6 怎麼寫 Class ，為何會出現 Class（必會）........................................................... 165
第 6 頁 共 348 頁
17、Promise 構造函數是同步執行還是非同步執行，那麼 then 方法呢？（必會）.............. 165
18、Promise 只有成功和失敗 2 個狀態，怎麼讓一個函數無論成功還是失敗都能被調用？（必
會）..............................................................................................................................................165
19、ES6 如何轉化為 ES5，為什麼要轉化（必會）................................................................ 166
20、日常前端代碼開發中，有哪些值得用 ES6 去改進的編程優化或者規範（必會）...... 168
21、ES6 和 node 的 commonjs 模塊化規範的區別（高薪常問）.......................................... 168
22、Promise 中 reject 和 catch 處理上有什麼區別（高薪常問）...................................... 168
23、理解 async/await 以及對 Generator 的優勢................................................................... 168
24、手寫一個 Promise（高薪常問）........................................................................................ 169
25、Promise 如何封裝一個 Ajax（高薪常問）........................................................................ 170
26、下麵的輸出結果是多少（高薪常問）.............................................................................. 170
27、以下代碼依次輸出的內容是（高薪常問）...................................................................... 171
28、分析下列程式代碼，得出運行結果，解釋其原因（高薪常問）.................................. 171
29、分析下列程式代碼，得出運行結果，解釋其原因（高薪常問）.................................. 172
30、使用結構賦值，實現兩個變數的值的交換（高薪常問）..............................................172
31、設計一個對象，鍵名的類型至少包含一個 symbol 類型，並且實現遍歷所有 key（高薪
常問）.......................................................................................................................................... 172
32、下麵 Set 結構，列印出的 size 值是多少（高薪常問）................................................... 172
33、使用 class 手寫一個 Promise（高薪常問）....................................................................173
34、說一下 ES6 的導入導出模塊（高薪常問）...................................................................... 174
Ajax/電腦網路相關...................................................................................................... 175
1、Ajax 應用和傳統 web 應用有什麼不同（必會）...............................................................175
2、Ajax 請求總共有多少種 Callback（必會）......................................................................... 175
3、什麼是 Ajax，Ajax 都有哪些優點和缺點？（必會）....................................................... 175
4、常見的 HTTP 狀態碼以及代表的意義（必會）................................................................ 176
5、請介紹一下 XMLHTTPrequest 對象及常用方法和屬性（必會）....................................... 176
6、Ajax 的實現流程是怎樣的？（必會）............................................................................... 177
7、Ajax 接收到的數據類型有哪些，數據如何處理？（必會）........................................... 178
8、請解釋一下 JavaScript 的同源策略（必會）................................................................... 179
9、闡述一下非同步載入 JS（必會）........................................................................................... 179
10、為什麼會有跨域的問題出現，如何解決跨域問題（必會）.......................................... 180
11、Get 和 Post 的區別？什麼情況下用到（必會）............................................................... 180
12、解釋 jsonp 的原理（必會）................................................................................................181
13、工作當中封裝好的 Ajax 里的幾個參數 （必會）.......................................................... 181
14、jQuery 中 Ajax 、fetch 、axios 有什麼異同，適用場景有哪些？（必會）................ 182
15、Ajax 註意事項及適用和不適用場景（必會）................................................................. 183
16、HTTP 與 HTTPS 的區別（必會）........................................................................................ 184
17、簡述 web 前端 cookie 機制，並結合該機制說明會話保持原理？（必會）................. 184
18、一個頁面從輸入 URL 到頁面載入顯示完成，這個過程中都發生了什麼（高薪常問）
......................................................................................................................................................185
19、你知道的 HTTP 請求方式有幾種（高薪常問）.............................................................. 186
第 7 頁 共 348 頁
20、描述一下 HTTP 的請求過程與原理（高薪常問）........................................................... 186
21、HTTPS 有幾次握手和揮手？HTTPS 的原理什麼是（高薪常問）................................... 187
22、 什麼是 TCP 連接的三次握手（高薪常問）................................................................... 187
23、為什麼 TCP 連接需要三次握手四次揮手（高薪常問）................................................. 188
24、TCP 與 UDP 的區別有哪些（高薪常問）.......................................................................... 188
25、HTTP2 / HTTP1 之間的區別是什麼（高薪常問）.......................................................189
26、介紹一下 websocket（高薪常問）.................................................................................... 189
27、websocket 如何相容低瀏覽器（高薪常問）.................................................................... 189
28、瀏覽器如何載入頁面的，script 腳本阻塞有什麼解決辦法，defer 和 async 的區別是什麼
（高薪常問）..............................................................................................................................190
29、拆解一下 URL 的各個部分，分別是什麼意思（高薪常問）.......................................... 190
30、Ajax 解決瀏覽器緩存問題？（高薪常問）..................................................................... 191
31、為什麼要使用模板引擎（高薪常問）.............................................................................. 191
32、目前 JS 對於非同步的解決方案有哪些？（高薪常問）.................................................... 191
33、Xml 和 Json 的區別？（瞭解）......................................................................................... 192
34、如何實現瀏覽器內多個標簽頁之間的通信（瞭解）......................................................196
git........................................................................................................................................ 196
1、git 的基本使用方法（必會）............................................................................................... 196
2、git 工作流程（必會）........................................................................................................... 197
3、我們如何使用 git 和開源的碼雲或 github 上面的遠端倉庫的項目進行工作呢（必會）
......................................................................................................................................................198
4、git、github、gitlab 三者之間的聯繫以及區別（必會）.................................................... 201
5、github 和碼雲的區別（必會）............................................................................................. 201
6、提交時發生衝突，你能解釋衝突是如何產生的嗎？你是如何解決的（必會）............ 202
7、如果本次提交誤操作，如何撤銷（必會）........................................................................ 202
8、git 修改提交的歷史信息（必會）....................................................................................... 203
9、你使用過 git stash 命令嗎？你一般什麼情況下會使用它（必會）................................203
10、如何查看分支提交的歷史記錄？查看某個文件的歷史記錄呢（必會）......................204
11、git 跟 svn 有什麼區別（必會）......................................................................................... 204
12、我們在本地工程常會修改一些配置文件，這些文件不需要被提交，而我們又不想每次
執行 git status 時都讓這些文件顯示出來，我們該如何操作（必會）................................ 204
13、git fetch 和 git merge 和 git pull 的區別（必會）........................................................... 205
14、如何把本地倉庫的內容推向一個空的遠程倉庫（高薪常問）......................................205
大事件項目 PC 端.............................................................................................................. 206
1、開發背景........................................................................................................................... 206
1.1 項目介紹..................................................................................................................... 206
2、系統架構........................................................................................................................... 206
2.1 關鍵技術..................................................................................................................... 206
2.2 API 文檔......................................................................................................................207
2.3 人員配置..................................................................................................................... 207
2.4 開發流程.................................................................................................................... 207
第 8 頁 共 348 頁
3、登錄模塊........................................................................................................................... 208
3.1 業務實現思路............................................................................................................. 208
3.2 技術亮點..................................................................................................................... 208
4、首頁模塊........................................................................................................................... 208
4.1 業務實現思路............................................................................................................. 208
4.2 技術亮點..................................................................................................................... 209
5、文章類別管理................................................................................................................... 209
5.1 業務實現思路............................................................................................................. 209
5.2 技術亮點..................................................................................................................... 209
6、文章列表管理................................................................................................................... 209
6.1 業務實現思路............................................................................................................. 209
6.2 技術亮點..................................................................................................................... 209
7、前臺頁面文章獲取........................................................................................................... 209
7.1 業務實現思路............................................................................................................. 209
7.2 技術亮點..................................................................................................................... 209
8、項目介紹話術................................................................................................................... 209
nodejs.................................................................................................................................. 210
1、對 node.js 有沒有瞭解，它有什麼特點，適合做什麼業務（必會）.............................. 210
2、npm 作用是什麼（必會）.................................................................................................... 210
3、常用的 npm 指令有哪些（必會）....................................................................................... 211
4、module.exports 和 exports 的區別（必會）.........................................................................211
5、session 和 cookie 的作用（必會）....................................................................................... 211
6、說一下事件迴圈 eventloop（必會）.................................................................................... 211
7、node 和 前端項目怎麼解決跨域的（必會）.................................................................... 211
8、node 的優點是什麼？缺點是什麼（必會）....................................................................... 212
9、commonJS 中的 require/exports 和 ES6 中 import/export 的區別是什麼（必會）... 212
10、簡述同步和非同步的區別，如何避免回調地獄，node 的非同步問題是如何解決的（必會）
......................................................................................................................................................213
11、npm i 與 npm install 之間的細小區別（必會）............................................................. 213
12、dependencies 和 devDependencies 兩者區別（必會）....................................................... 213
13、express 和 koa 有什麼關係，有什麼區別（高薪常問）................................................ 214
14、什麼是前後端分離的項目?什麼是 JS 渲染的項目，前端渲染和後端渲染的區別（高薪
常問）..........................................................................................................................................215
15、mysql 和 mongoDB 有什麼區別（高薪常問）................................................................ 216
16、事件的訂閱和發佈的設計模式是什麼（高薪常問）...................................................... 217
17、express 中 Router 的作用（高薪常問）............................................................................. 217
18、npm 自定義命令在哪裡配置（高薪常問）...................................................................... 217
19、express 優點、缺點（高薪常問）..................................................................................... 217
20、什麼是中間件（高薪常問）..............................................................................................217
21、為什麼要進行模塊化（高薪常問）..................................................................................218
22、談談你對 AMD 和 CMD 的理解（高薪常問）.................................................................. 218
第 9 頁 共 348 頁
23、node 怎麼跟 MongoDB 建立連接（高薪常問）.................................................................218
24、請介紹一下 require 的模塊載入機制（高薪常問）......................................................... 218
25、內置的 fs 模塊架構是什麼樣子的（高薪常問）............................................................. 219
26、express 中如何獲取路由的參數（高薪常問）................................................................. 219
27、express response 有哪些常用方法（高薪常問）.............................................................. 219
28、實現一個簡單的 HTTP 伺服器（高薪常問）................................................................... 219
Vue...................................................................................................................................... 220
1、Vue 的最大的優勢是什麼？（必會）................................................................................. 220
2、Vue 和 jQuery 兩者之間的區別是什麼？（必會）.............................................................220
3、MVVM 和 MVC 區別是什麼？哪些場景適合？（必會）.................................................. 221
4、Vue 數據雙向綁定的原理是什麼?（必會）....................................................................... 221
5、Object.defineProperty 和 Proxy 的區別（必會）................................................................. 222
6、Vue 生命周期總共分為幾個階段？（必會）..................................................................... 222
7、第一次載入頁面會觸發哪幾個鉤子函數？（必會）........................................................ 223
8、請說下封裝 Vue 組件的過程？（必會）.......................................................................... 223
9、Vue 組件如何進行傳值的? （必會）.................................................................................223
10、組件中寫 name 選項有什麼作用？（必會）..................................................................224
11、Vue 組件 data 為什麼必須是函數（必會）................................................................... 224
12、講一下組件的命名規範（必會）...................................................................................... 224
13、怎麼在組件中監聽路由參數的變化？（必會）.............................................................. 224
14、怎麼捕獲 Vue 組件的錯誤信息？（必會）......................................................................225
15、Vue 組件里的定時器要怎麼銷毀？（必會）...................................................................225
16、Vue-cli 用自定義的組件？有遇到過哪些問題嗎？（必會）........................................ 225
17、Vue 中 slot 的使用方式，以及 slot 作用域插槽的用法（必會）................................... 225
18、Vue 該如何實現組件緩存?（必會）................................................................................. 225
19、跟 keep-alive 有關的生命周期是哪些？（必會）.......................................................... 226
20、Vue 常用的修飾符都有哪些？（必會）...........................................................................226
21、Vue 常用的指令都有哪些？並且說明其作用（必會）...................................................226
22、自定義指令(v-check、v-focus)的方法有哪些?它有哪些鉤子函數?還有哪些鉤子函數參
數?（必會）................................................................................................................................ 227
23、指令 v-el 的作用是什麼?（必會）.................................................................................. 227
24、v-show 和 v-if 指令的共同點和不同點?（必會）......................................................... 227
25、為什麼避免 v-if 和 v-for 用在一起（必會）.............................................................. 228
26、watch、methods 和 computed 的區別?（必會）............................................................228
27、怎麼在 watch 監聽開始之後立即被調用？（必會）...................................................... 229
28、watch 怎麼深度監聽對象變化？（必會）....................................................................... 229
29、computed 中的屬性名和 data 中的屬性名可以相同嗎？ （必會）......................... 229
30、什麼是 Vue 的計算屬性（必會）...................................................................................... 229
31、Vue 中 key 值的作用是什麼？（必會）........................................................................... 230
32、Vue-loader 是什麼？使用它的用途有哪些？（必會）.................................................. 230
33、Vue 中怎麼自定義過濾器（必會）.................................................................................. 231
第 10 頁 共 348 頁
34、你是怎麼認識 Vuex 的?（必會）...................................................................................... 231
35、Vuex 的 5 個核心屬性是什麼?（必會）........................................................................... 231
36、Vuex 的出現解決了什麼問題?（必會）........................................................................... 232
37、簡述 Vuex 的數據傳遞流程（必會）................................................................................ 232
38、Vuex 的 Mutation 和 Action 之間的區別是什麼？（必會）............................................. 232
39、Vue-router 是乾什麼的，原理是什麼？（必會）........................................................... 232
40、路由之間是怎麼跳轉的？有哪些方式？（必會）.......................................................... 233
41、Vue-router 怎麼配置路由（必會）................................................................................... 233
42、Vue-router 有哪幾種路由守衛?（必會）......................................................................... 234
43、Vue-router 的鉤子函數都有哪些?（必會）..................................................................... 234
44、路由傳值的方式有哪幾種(必會)....................................................................................... 234
45、怎麼定義 Vue-router 的動態路由?怎麼獲取傳過來的動態參數?.................................. 235
46、query 和 params 之間的區別是什麼？（必會）............................................................... 235
47、\(route 和\)router 的區別是什麼？（必會）....................................................................... 235
48、active-class 屬於哪個組件中的屬性？該如何使用？.....................................................235
49、Vue 的路由實現模式：hash 模式和 history 模式（必會）.............................................. 237
50、請說出路由配置項常用的屬性及作用（必會）.............................................................. 237
51、編程式導航使用的方法以及常用的方法（必會）.......................................................... 237
52、Vue 怎麼實現跨域（必會）............................................................................................... 237
53、Vue 中動畫如何實現（必會）........................................................................................... 238
54、你對 Vue.js 的 template 編譯的理解？（必會）..............................................................238
55、Vue 渲染模板時怎麼保留模板中的 HTML 註釋呢？（必會）........................................238
56、Vue2.0 相容 IE 哪個版本以上嗎？（必會）.................................................................... 238
57、Vue 如何去除 URL 中的#（必會）.................................................................................... 239
58、說一下你在 Vue 中踩過的坑（必會）.............................................................................. 239
59、在 Vue 中使用插件的步驟（必會）.................................................................................. 239
60、Vue 項目優化的解決方案都有哪些？（必會）...............................................................239
61、使用 Vue 的時候一下載入造成頁面卡頓，該如何解決？（必會）..............................239
62、請說出 Vue.cli 項目中 src 目錄每個文件夾和文件的用法？（必會）......................... 240
63、你知道 style 上加 scoped 屬性的原理嗎？（必會）....................................................... 240
64、說說你對 SPA 單頁面的理解，它的優缺點分別是什麼？（必會）............................. 241
65、怎樣理解 Vue 的單向數據流？（必會）........................................................................ 241
66、VNode 是什麼？什麼是虛擬 DOM？（高薪常問）.........................................................241
67、Vue 中如何實現一個虛擬 DOM？說說你的思路（高薪常問）...................................... 242
68、Vue 中操作 data 中數組的方法中哪些可以觸發視圖更新，哪些不可以，不可以的話有
什麼解決辦法？（高薪常問）.................................................................................................. 242
69、Vue 中如何重置 data? （高薪常問）............................................................................... 243
70、如何對 Vue 首屏載入實現優化? （高薪常問）............................................................. 243
71、Vue 的 nextTick 的原理是什麼? （高薪常問）............................................................ 243
72、在 Vue 實例中編寫生命周期 hook 或其他 option/propertie 時，為什麼不使用箭頭函
數？（高薪常問）...................................................................................................................... 244
73、is 這個特性你有用過嗎？主要用在哪些方面？（高薪常問）...................................... 244
第 11 頁 共 348 頁
74、scss 是什麼？在 Vue-cli 中的安裝使用步驟是？有哪幾大特性？（高薪常問）....... 244
75、請詳細介紹一些 package.json 中的配置的作用（瞭解）............................................... 245
webpack.............................................................................................................................. 245
1、什麼是 webpack（必會）..................................................................................................... 245
2、webpack 的優點是什麼？（必會）..................................................................................... 245
3、webpack 的構建流程是什麼?從讀取配置到輸出文件這個過程儘量說全（必會）....... 246
4、說一下 webpack 的熱更新原理(必會)................................................................................ 246
5、webpack 與 grunt、gulp 的不同？（必會）......................................................................... 246
6、有哪些常見的 Loader？他們是解決什麼問題的？（必會）............................................ 247
7、Loader 和 Plugin 的不同？（必會）..................................................................................... 247
8、webpack3 和 webpack4 的區別（必會）............................................................................. 248
9、分別介紹一下 bundle，chunk，module 的作用是什麼（必會）....................................... 248
10、如何利用 webpack 來優化前端性能（高薪常問）.......................................................... 248
11、是否寫過 Loader 和 Plugin？描述一下編寫 loader 或 plugin 的思路？（高薪常問）.... 248
12、使用 webpack 開發時，你用過哪些可以提高效率的插件？（高薪常問）.................. 249
14、source map 是什麼？生產環境怎麼用？（高薪常問）.................................................. 249
15、請詳細說明一下 Babel 編譯的原理是什麼？（高薪常問）........................................... 250
16、在生產環境下如何提升 webpack 優化構建速度（高薪常問）...................................... 250
17、什麼是長緩存？在 webpack 中如何做到長緩存優化？（高薪常問）.......................... 250
18、如何提高 webpack 的構建速度？（高薪常問）.............................................................. 251
19、webpack 的占位符[hash],[chunkhash],[contenthash] 有什麼區別和聯繫（高薪常問）. 251
20、怎麼實現 webpack 的按需載入？什麼是神奇註釋?(高薪常問)......................................251
21、開發一個 jQuery 插件、vue 組件等，需要怎麼配置 webpack（瞭解）........................ 252
22、Babel 的 preset-env 是什麼（瞭解）................................
