結(jié)合網(wǎng)上和個人總結(jié)，僅供參考。
1、HTML&CSS:
1、DOM結(jié)構(gòu) —— 兩個節(jié)點之間可能存在哪些關(guān)系以及如何在節(jié)點之間任意移動。（通俗易懂的來講講DOM、兩個節(jié)點之間可能存在哪些關(guān)系以及如何在節(jié)點之間任意移動）
DOM: Document Object Module, 文檔對象模型。
節(jié)點的關(guān)系：父（parent）、子（child）和同胞（sibling）等節(jié)點關(guān)系；
- 在節(jié)點樹中，頂端節(jié)點被稱為根（root）
- 每個節(jié)點都有父節(jié)點、除了根（它沒有父節(jié)點）
- 一個節(jié)點可擁有任意數(shù)量的子
- 同胞是擁有相同父節(jié)點的節(jié)點
2、DOM操作 —— 如何添加、移除、移動、復(fù)制、創(chuàng)建和查找節(jié)點等。
查找DOM：document.getElementById()和document.getElementsByTagName()，以及CSS選擇器document.getElementsByClassName()；querySelector()和querySelectorAll()【低版本的IE<8不支持，8有限支持】。
????document.getElementById()可以直接定位唯一的一個DOM節(jié)點。document.getElementsByTagName()和document.getElementsByClassName()總是返回一組DOM節(jié)點。
創(chuàng)建DOM：document.createElement(newElement)；
更新DOM：innerHTML和innerText、textContent；
插入DOM：innerHTML 和 parentNode.appendChild(childNode)，parentElement.insertBefore(newElement, referenceElement)；
刪除DOM：parent.removeChild(childElement)；
3、事件 —— 如何使用事件，以及IE和標(biāo)準(zhǔn)DOM事件模型之間存在的差別。
（1）冒泡型事件：事件按照從最特定的事件目標(biāo)到最不特定的事件目標(biāo)(document對象)的順序觸發(fā)。
? IE 5.5: div -> body -> document
? IE 6.0: div -> body -> html -> document
? Mozilla 1.0: div -> body -> html -> document -> window
（2）捕獲型事件(event capturing)：事件從最不精確的對象(document 對象)開始觸發(fā)，然后到最精確(也可以在窗口級別捕獲事件，不過必須由開發(fā)人員特別指定)。
（3）DOM事件流：同時支持兩種事件模型：捕獲型事件和冒泡型事件，但是，捕獲型事件先發(fā)生。兩種事件流會觸及DOM中的所有對象，從document對象開始，也在document對象結(jié)束。
? DOM事件模型最獨特的性質(zhì)是，文本節(jié)點也觸發(fā)事件(在IE中不會)。
4、XMLHttpRequest —— 這是什么、怎樣完整地執(zhí)行一次GET請求、怎樣檢測錯誤。（老版本IE ajax核心對象為ActiveXObject）
XMLHttpRequest 對象提供了在網(wǎng)頁加載后與服務(wù)器進(jìn)行通信的方法。
獲取ajax核心對象：
var request = false;
try {
request = new XMLHttpRequest();
} catch (trymicrosoft) {
try {
request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (othermicrosoft) {
try {
request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (failed) {
request = false;
}}}
5、嚴(yán)格模式與混雜模式 —— 如何觸發(fā)這兩種模式，區(qū)分它們有何意義。
DOCTYPE（是Document Type文檔類型的簡寫）是一組機器可讀的規(guī)則，它們指示(X)HTML文檔中允許有什么，不允許有什么，DOCTYPE正是用來告訴瀏覽器使用哪種DTD，三種 DTD 類型分別是嚴(yán)格版本、過渡版本以及基于框架的 HTML 文檔。聲明位于文檔中的最前面的位置，處于標(biāo)簽之前。如果DOCTYPE聲明不是頁面上的第一個元素，那么IE 6會自動切換到混雜模式。
嚴(yán)格模式是瀏覽器根據(jù)web標(biāo)準(zhǔn)去解析頁面，是一種要求嚴(yán)格的DTD，不允許使用任何表現(xiàn)層的語法，如<br/>
?；祀s模式則是一種向后兼容的解析方法，就是可以實現(xiàn)IE5.5以下版本瀏覽器的渲染模式。總結(jié)：
（1）、 <!DOCTYPE>聲明位于文檔中的最前面，處于標(biāo)簽之前。告知瀏覽器的解析器，用什么文檔類型規(guī)范來解析這個文檔。
（2）、嚴(yán)格模式的排版和 JS 運作模式是? 以該瀏覽器支持的最高標(biāo)準(zhǔn)運行。
（3）、在混雜模式中，頁面以寬松的向后兼容的方式顯示。模擬老式瀏覽器的行為以防止站點無法工作。
（4）、DOCTYPE不存在或格式不正確會導(dǎo)致文檔以混雜模式呈現(xiàn)。
6、盒模型 —— 外邊距、內(nèi)邊距和邊框之間的關(guān)系，及IE8以下版本的瀏覽器中的盒模型
CSS 盒子模型(Box Model)
所有HTML元素可以看作盒子，在CSS中，"box model"這一術(shù)語是用來設(shè)計和布局時使用。
CSS盒模型本質(zhì)上是一個盒子，封裝周圍的HTML元素，它包括：邊距，邊框，填充，和實際內(nèi)容。
盒模型允許我們在其它元素和周圍元素邊框之間的空間放置元素。
屬性：box-sizing；
屬性值1： box-sizing： content-box；（默認(rèn)值）?標(biāo)準(zhǔn)盒子模型 ，元素實際寬度等于width加上元素的內(nèi)邊距padding和邊框?qū)挾萣order-width，元素內(nèi)容寬度 = width；（IE8以下瀏覽器的盒模型中定義的元素的寬高不包括內(nèi)邊距和邊框）?
屬性值2： box-sizing：border-box； 元素寬度width包含了元素的內(nèi)邊距padding和邊框?qū)挾萣order-width，元素內(nèi)容寬度 = width - padding - border；
7、塊級元素與行內(nèi)元素 —— 怎么用CSS控制它們、以及如何合理的使用它們（參考鏈接）
（1）CSS規(guī)范規(guī)定，每個元素都有display屬性，比如div默認(rèn)display屬性值為“block”，成為“塊級”元素，總是獨占一行，表現(xiàn)為另起一行開始，而且其后的元素也必須另起一行顯示；span默認(rèn)display屬性值為“inline”，是“行內(nèi)”元素，可以和相鄰的內(nèi)聯(lián)元素在同一行。
（2）行內(nèi)元素有：a b span img input select strong···
?（3）塊級元素有：div ul ol li dl dt dd h1 h2 h3 h4…p?
（4）知名的空元素： <br/>? <hr/>? <img/>? <input/>? <link> <meta>
? ? ? ? ? ?// 鮮為人知的是：<area> <base> <command> <col> <embed>? <keygen>? <param> <source>? ?<track>? <wbr>??
8、浮動元素 —— 怎么使用它們、它們有什么問題以及怎么解決這些問題。（參考鏈接）
屬性：float；
屬性值：left：往左浮動；right：往右浮動；
浮動元素引起的問題：
?1.父元素的高度無法被撐開，影響與父元素同級的元素；
?2.與浮動元素同級的非浮動元素會跟隨其后；
?3.若非第一個元素浮動，則該元素之前的元素也需要浮動，否則會影響頁面顯示的結(jié)構(gòu)；
解決方法：
清浮動，使用CSS中的clear:both;屬性來清除同級子元素的浮動問題
給父元素添加clearfix樣式，解決父元素高度無法撐開問題：
.clearfix:after {content: ""; display: block; clear: both;}
9、HTML與XHTML —— 二者有什么區(qū)別，你覺得應(yīng)該使用哪一個并說出理由。
主要區(qū)別：HTML是一種基本的WEB網(wǎng)頁設(shè)計語言，XHTML是一個基于XML的置標(biāo)語言；
XHTML元素必須被正確地嵌套；
XHTML元素必須被關(guān)閉；
標(biāo)簽名必須用小寫字母；
XHTML文檔必須擁有根元素。
10、JSON —— 作用、用途、設(shè)計結(jié)構(gòu)。
JSON(JavaScript Object Notation) 是一種輕量級的數(shù)據(jù)交換格式。易于人閱讀和編寫。同時也易于機器解析和生成。
JSON建構(gòu)于兩種結(jié)構(gòu)：“名稱/值”對的集合（A collection of name/value pairs）。
不同的語言中，它被理解為對象（object）、紀(jì)錄（record）、結(jié)構(gòu)（struct）、字典（dictionary）、哈希表（hash table）、有鍵列表（keyed list）或者關(guān)聯(lián)數(shù)組（associative array）、值的有序列表（An ordered list of values）。在大部分語言中，它被理解為數(shù)組（array）。
11、link 和@import 的區(qū)別。
? ? （1）、link屬于XHTML標(biāo)簽，而@import是CSS提供的；
? ? （2）、頁面被加載的時，link會同時被加載，而@import引用的CSS會等到頁面被加載完再加載；
? ? （3）、import只在IE5以上才能識別，而link是XHTML標(biāo)簽，無兼容問題；
? ? （4）、link方式的樣式的權(quán)重 高于@import的權(quán)重；
12、CSS 選擇符有哪些？哪些屬性可以繼承？優(yōu)先級算法如何計算？ CSS3新增偽類有那些？
*? 1.id選擇器（ # myid）
? ? 2.類選擇器（.myclassname）
? ? 3.標(biāo)簽選擇器（div, h1, p）
? ? 4.相鄰選擇器（h1 + p）
? ? 5.子選擇器（ul < li）
? ? 6.后代選擇器（li a）
? ? 7.通配符選擇器（ * ）
? ? 8.屬性選擇器（a[rel = "external"]）
? ? 9.偽類選擇器（a: hover, li: nth - child）
*? 可繼承： font-size font-family color, UL LI DL DD DT;
*? 不可繼承 ：border padding margin width height ;
*? 優(yōu)先級就近原則，樣式定義最近者為準(zhǔn);
*? 載入樣式以最后載入的定位為準(zhǔn);
優(yōu)先級為:?
!important > id > class > tag?
important 比內(nèi)聯(lián)優(yōu)先級高
CSS3新增偽類舉例：
p:first-of-type? ?選擇屬于其父元素的首個元素的每個元素。
p:last-of-type? ?選擇屬于其父元素的最后元素的每個元素。
p:only-of-type? 選擇屬于其父元素唯一的元素的每個元素。
p:only-child? ? 選擇屬于其父元素的唯一子元素的每個元素。? ?
?p:nth-child(2)? 選擇屬于其父元素的第二個子元素的每個元素。? ?
?:enabled、:disabled 控制表單控件的禁用狀態(tài)。? ?
?:checked，單選框或復(fù)選框被選中。
13、對瀏覽器內(nèi)核的理解？常見的瀏覽器內(nèi)核有哪些？
瀏覽器內(nèi)核的理解：
主要分成兩部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎。
渲染引擎：負(fù)責(zé)取得網(wǎng)頁的內(nèi)容（HTML、XML、圖像等等）、整理訊息（例如加入CSS等），以及計算網(wǎng)頁的顯示方式，然后會輸出至顯示器或打印機。瀏覽器的內(nèi)核的不同對于網(wǎng)頁的語法解釋會有不同，所以渲染的效果也不相同。所有網(wǎng)頁瀏覽器、電子郵件客戶端以及其它需要編輯、顯示網(wǎng)絡(luò)內(nèi)容的應(yīng)用程序都需要內(nèi)核。
JS引擎則：解析和執(zhí)行javascript來實現(xiàn)網(wǎng)頁的動態(tài)效果。
最開始渲染引擎和JS引擎并沒有區(qū)分的很明確，后來JS引擎越來越獨立，內(nèi)核就傾向于只指渲染引擎。
常見的瀏覽器內(nèi)核：
Trident內(nèi)核：IE,MaxThon,TT,The World,360,搜狗瀏覽器等。[又稱MSHTML]
Gecko內(nèi)核：Netscape6及以上版本，F(xiàn)F,MozillaSuite/SeaMonkey等
Presto內(nèi)核：Opera7及以上。 [Opera內(nèi)核原為：Presto，現(xiàn)為：Blink;]
Webkit內(nèi)核：Safari,Chrome等。 [ Chrome的：Blink（WebKit的分支）]
16、less、sass、stylus預(yù)處理器
17.? HTML5：離線存儲
參考鏈接：有趣的HTML5：離線存儲
html&&css參考地址：
https://leohxj.gitbooks.io/front-end-database/html-and-css-basic/learn-dom-tree.html
https://www.liaoxuefeng.com/wiki/
2、js基礎(chǔ)
0. 面向?qū)ο笤恚?/b>
????1）目標(biāo)：實現(xiàn)封裝、繼承、多態(tài)等面向?qū)ο蟮幕竟δ堋?/p>
????2）原理：使用prototype、function 、new、this模擬面向?qū)ο蟮念悺?/p>
? ? ? ? ? JavaScript是面向?qū)ο笳Z言，但不使用類（根本不存在類）。JavaScript的面向?qū)ο笫?b>基于prototype和function的，而不是基于類的。
1. 原型和原型鏈；（參考鏈接）
每個對象都有一個私有屬性（稱之為 [[Prototype]]），它指向它的原型對象（prototype）。該 prototype 對象又具有一個自己的 prototype ，層層向上直到一個對象的原型為?null。根據(jù)定義，null?沒有原型，并作為這個原型鏈中的最后一個環(huán)節(jié)。
當(dāng)查找一個對象的屬性時，JavaScript 會向上遍歷原型鏈，直到找到給定名稱的屬性為止，到查找到達(dá)原型鏈的頂部 - 也就是 Object.prototype - 但是仍然沒有找到指定的屬性，就會返回 undefined
2. 閉包；（參考鏈接）
閉包是代碼塊和創(chuàng)建該代碼塊的上下文中數(shù)據(jù)的結(jié)合。
閉包是指有權(quán)訪問另一個函數(shù)作用域中的變量的函數(shù)。創(chuàng)建閉包的常見方式，就是在一個函數(shù)內(nèi)部創(chuàng)建另一個函數(shù)。（紅寶書P178）。
例子1：
[1, 2, 3].sort(function(a, b) {
...// 排序條件
});
[1, 2, 3].map(function (element) {
????return element * 2;
}); // [2, 4, 6]
例子2-延遲調(diào)用：
var a = 10;
setTimeout(function () {
????alert(a); // 10, after one second
}, 1000);
例子3-回調(diào)函數(shù)：
var x = 10;
xmlHttpRequestObject.onreadystatechange =function() {
// 當(dāng)數(shù)據(jù)就緒的時候，才會調(diào)用;
// 這里，不論是在哪個上下文中創(chuàng)建
// 此時變量“x”的值已經(jīng)存在了
????alert(x);// 10
};
例子4-隱藏輔助對象：
varfoo = {};
// 初始化
(function(object) {
????var x = 10;
????object.getX =function_getX() {
????????return x;
????};
})(foo);
alert(foo.getX());// 獲得閉包 "x" – 10
3. 類和繼承（es5實現(xiàn)方法 + es6實現(xiàn)方法）；
ES6創(chuàng)建類的基本語法和繼承實現(xiàn)原理
4.? let、const、var；（參考鏈接）
5. Promise的使用及原理；（參考鏈接）
6. 異步處理方法；（參考鏈接）
1)回調(diào)函數(shù)：
function fn1 () {
????console.log('Function 1')
}
function fn2 (f) {
????setTimeout(() => {
????????console.log('Function 2')
????????f()
}, 500)
}
function fn3 () {
????console.log('Function 3')
}
fn1();
fn2(fn3) ; //可依次執(zhí)行fn1，fn2，fn3
2)發(fā)布/訂閱模式；
class AsyncFunArr {
????constructor (...arr) {
????????this.funcArr = [...arr]
}
next () {
????const fn = this.funcArr.shift()
????if (typeof fn === 'function') fn()
}
run () {
????this.next()
}
}
function fn1 () {
????console.log('Function 1')
????asyncFunArr.next()
}
function fn2 () {
????setTimeout(() => {
????????console.log('Function 2')
????????asyncFunArr.next()
????}, 500)
}
function fn3 () {
????console.log('Function 3')
????asyncFunArr.next()
}
3）Promise：
function fn1 () {
console.log('Function 1')
}
function fn2 () {
????return new Promise((resolve, reject) => {
????????setTimeout(() => {
????????????console.log('Function 2')
????????????resolve()
????}, 500) })
}
function fn3 () {
console.log('Function 3')
}
fn1()；
fn2().then(() => { fn3() })；
4)generator:（參考鏈接）
7. 遍歷所有文檔樹所有節(jié)點(考察遞歸)的方法；
（參考鏈接：https://blog.csdn.net/jjaze3344/article/details/7280321
? ? ? ? ? ? ? ? ? ????https://blog.csdn.net/sinat_27346451/article/details/77073938）
8. sort排序相關(guān)(注意ASCII這個坑)（參考鏈接）
默認(rèn)情況下，sort函數(shù)是按照ASCII字符排序。在ASCII字符排序中，是對應(yīng)位相比較。18和5相比，實際上就是1和5相比，因為5只有一位數(shù)，所以只比較第一位。因為1<5，所以就會出現(xiàn)錯誤的答案。
錯誤如：
var a = [5,41,7,18]
a.sort();
alert(a);? ? ?//18，41，5，7?
解決方案：
如果省略參數(shù)，將默認(rèn)為ASCII字符排序，簡而言之，就是有了參數(shù)，就不是默認(rèn)為ASCII字符排序了。
即：
var a=[5,41,7,18];
a.sort(function (m, n){
? ??return m-n;
});
alert(a);? ? ?//5,7,18,41
9. 數(shù)組和對象的深淺拷貝；（參考鏈接）
10. String + Array的一些基本操作；（參考鏈接）
11. 數(shù)組去重的方法；（參考鏈接）
推薦的兩種方法：
1、先將原數(shù)組進(jìn)行排序，使重復(fù)元素在相鄰位置，創(chuàng)建新數(shù)組，并賦值元數(shù)組的第一項，檢查原數(shù)組中的第i個元素與新數(shù)組中的最后一個元素是否相同，如果不相同，則將該元素存入新數(shù)組中
function unique(arr){?
????arr.sort();?//先排序 ，這里不需要參數(shù)
????var res = [arr[0]];??
????for (var i = 1; i < arr.length; i++) {??
????????if (arr[i] !== res[res.length - 1]) {???
????????res.push(this[i]);?
?????????}?
????}?
return res;
}
2、創(chuàng)建一個空對象和一個空數(shù)組，將數(shù)組的數(shù)值以對象屬性的形式保存，并賦值1，push到新數(shù)組中，后續(xù)遍歷數(shù)組時通過數(shù)組的值以屬性的方式訪問對象，從而達(dá)到驗證重復(fù)的目的。（較推薦）
function unique(arr) {?
var res = [];
?var hash = {};
?for (var i = 0; i < arr.length; i++) {??
????if (!hash[arr[i]]) {???
????????res.push(arr[i]);??
?????????hash[arr[i]] = 1;?
?????}?
?}?
return res;
}
12. 冒泡和捕獲；（參考鏈接）
13. 事件代理；（參考鏈接）
14. cookies，sessionStorage 和 localStorage 的區(qū)別？（參考鏈接）
cookie是網(wǎng)站為了標(biāo)示用戶身份而儲存在用戶本地終端（Client Side）上的數(shù)據(jù)（通常經(jīng)過加密）。cookie數(shù)據(jù)始終在同源的http請求中攜帶（即使不需要），即會在瀏覽器和服務(wù)器間來回傳遞。
sessionStorage和localStorage僅在客戶端（即瀏覽器）中保存，不參與和服務(wù)器的通信；sessionStorage保存在當(dāng)前會話窗口；localStorage保存在本瀏覽器數(shù)據(jù)緩存區(qū)。
共同點：都是保存在瀏覽器端、僅同源可用的存儲方式。
存儲大?。?/b>cookie數(shù)據(jù)大小不能超過4k；sessionStorage和localStorage 雖然也有存儲大小的限制，但比cookie大得多，可以達(dá)到5M或更大。
存儲格式：cookie只能以字符串格式保存；webStorage以key-value格式保存，更便于存?。╯essionStorage.setItem("key","value")，sessionStorage.getItem("key")）；
保存時間：localStorage 存儲持久數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失除非主動刪除數(shù)據(jù)；sessionStorage 數(shù)據(jù)在當(dāng)前瀏覽器窗口關(guān)閉后自動刪除；cookie 設(shè)置的cookie過期時間之前一直有效，即使窗口或瀏覽器關(guān)閉。
Cookie的作用是與服務(wù)器進(jìn)行交互，作為HTTP規(guī)范的一部分而存在 ，而Web Storage僅僅是為了在本地“存儲”數(shù)據(jù)而生。
15. jsonp和跨域，為什么瀏覽器會禁止跨域（參考鏈接：??跨 域、?jsonp）
16. 變量提升；（參考鏈接）
17. 高階函數(shù)；（參考鏈接）
18. 動畫；（參考鏈接）
19. setTimeout、setInterval和requestAnimationFrame；（參考鏈接）（requestAnimationFrame參考鏈接）
基本用法與區(qū)別
setTimeout(code, millseconds)?用于延時執(zhí)行參數(shù)指定的代碼，如果在指定的延遲時間之前，你想取消這個執(zhí)行，那么直接用clearTimeout(timeoutId)來清除任務(wù)，timeoutID?是?setTimeout?時返回的；
setInterval(code, millseconds)用于每隔一段時間執(zhí)行指定的代碼，永無停歇，除非你反悔了，想清除它，可以使用?clearInterval(intervalId)，這樣從調(diào)用 clearInterval 開始，就不會在有重復(fù)執(zhí)行的任務(wù)，intervalId?是?setInterval?時返回的；
requestAnimationFrame(code)，一般用于動畫，與?setTimeout?方法類似，區(qū)別是?setTimeout?是用戶指定的，而?requestAnimationFrame?是瀏覽器刷新頻率決定的，一般遵循 W3C 標(biāo)準(zhǔn)，它在瀏覽器每次刷新頁面之前執(zhí)行。
20. 模塊化開發(fā)；
參考鏈接：模塊化入門-知乎
???????????????????UMD
21. 引起內(nèi)存泄漏的原因；（參考鏈接）
1）全局變量引起的內(nèi)存泄漏
function leaks(){ leak = 'xxxxxx';//leak 成為一個全局變量，不會被回收}
2）閉包引起的內(nèi)存泄漏
var leaks = (function(){
????????var leak = 'xxxxxx';// 被閉包所引用，不會被回收
????????return function(){
????????????????console.log(leak);
????????}
})()
3）dom清空或刪除時，事件未清除導(dǎo)致的內(nèi)存泄漏
$('#container').bind('click', function(){
????console.log('click');
}).remove();
// zepto 和原生 js下，#container dom 元素，還在內(nèi)存里jquery 的 empty和 remove會幫助開發(fā)者避免這個問題
$('#container').bind('click', function(){
????console.log('click');
}).off('click').remove();
//把事件清除了，即可從內(nèi)存中移除
4）?被遺忘的計時器或回調(diào)函數(shù)
var someResource = getData();
setInterval(function() {
????var node = document.getElementById('Node');
????if(node) {? ? ? ? // 處理 node 和 someResource
????????node.innerHTML = JSON.stringify(someResource));
}}, 1000);
修改：
var element = document.getElementById('button');
function onClick(event) {
????element.innerHTML = 'text';
}
element.addEventListener('click', onClick);
22. ajax；
（參考鏈接：?http://www.runoob.com/ajax/ajax-tutorial.html
???????????????????http://3ms.huawei.com/km/blogs/details/5434911）
23. map、filter、reduce相關(guān)；
（參考鏈接：https://atendesigngroup.com/blog/array-map-filter-and-reduce-js
? ? ? ? ? ? ? ? ? ? http://zerosoul.github.io/2016/12/06/array-filter-map-reduce-in-js/）
24. Map和Set；（參考鏈接）
Map是一組鍵值對的結(jié)構(gòu)，具有極快的查找速度。
例：var m =new Map([['Michael',95], ['Bob',75], ['Tracy',85]]);
m.get('Michael');// 95
Set和Map類似，也是一組key的集合，但不存儲value。由于key不能重復(fù)，所以，在Set中，沒有重復(fù)的key。
要創(chuàng)建一個Set，需要提供一個Array作為輸入，或者直接創(chuàng)建一個空Set：
var s1 = new Set(); // 空Set
var s2 = new Set([1, 2, 3]); // 含1, 2, 3
25. this相關(guān)(注意箭頭函數(shù)的this指向問題)；（參考鏈接）
1）ES6中箭頭函數(shù)的this問題：
ES6 允許使用“箭頭”（=>）定義函數(shù)，函數(shù)體內(nèi)的this對象，就是定義時所在的對象，而不是使用時所在的對象。this對象的指向是可變的，但是在箭頭函數(shù)中，它是固定的，箭頭函數(shù)根本沒有自己的this，導(dǎo)致內(nèi)部的this就是外層代碼塊的this。所以箭頭函數(shù)不能做構(gòu)造函數(shù)，?也不能用call()、apply()、bind()這些方法去改變this的指向。
26. call、apply、bind；（參考鏈接）
27. 移動端開發(fā)相關(guān)；
（參考鏈接：https://juejin.im/post/5a77d6086fb9a0634417bfd3
??????????????????????http://www.restran.net/2015/05/14/mobile-web-front-end-collections/）
3、框架和工具相關(guān)
vue數(shù)據(jù)綁定原理；
定義：vue的數(shù)據(jù)雙向綁定是基于Object.defineProperty方法，通過定義data屬性的get和set函數(shù)來監(jiān)聽數(shù)據(jù)對象的變化，一旦變化，vue利用發(fā)布訂閱模式，通知訂閱者執(zhí)行回調(diào)函數(shù)，更新dom。
參考鏈接：vue數(shù)據(jù)綁定原理
vue父子組件和兄弟組件的通信問題；
1）父子組件通信：
1、父組件使用 props 把數(shù)據(jù)傳給子組件。
2、子組件使用 $emit 觸發(fā)父組件的自定義事件。
2）兄弟組件通信：
創(chuàng)建一個事件中心，相當(dāng)于中轉(zhuǎn)站，可以用它來傳遞事件和接收事件。
let Hub = new Vue(); //創(chuàng)建事件中心
組件1觸發(fā)：
methods: {
????eve() { Hub.$emit('change','hehe');? }??//Hub觸發(fā)事件
}
組件2接收:
created() {
????Hub.$on('change', () => {??//Hub接收事件
????????this.msg = 'hehe';??
????});
}
vuex的原理；
????參考鏈接：到底vuex是什么
vuex的action和mutation的異步操作和同步操作問題；
????參考鏈接：vuex2.0 基本使用(2) --- mutation 和 action
vue的事件監(jiān)聽；
? ? 參考鏈接：事件監(jiān)聽
vue-router獲取自定義參數(shù)；
傳值：
this.$router.push(name:"test",params:{data:"test"});
this.$router.push(path:"/test",query:{data:"test"});
取值（與傳值一一對應(yīng)）：
$route.params? ? ? 類型:?Object
一個 key/value 對象，包含了動態(tài)片段和全匹配片段，如果沒有路由參數(shù)，就是一個空對象。
this.$route.params.data? //"test"
$route.query? ? ? ?類型:?Object
一個 key/value 對象，表示 URL 查詢參數(shù)。例如，對于路徑?/foo?user=1，則有?$route.query.user == 1，如果沒有查詢參數(shù)，則是個空對象。
this.$route.query.data? //"test"
? ??????query和params使用區(qū)別
vue-router 路由模式（url中#號的解析）；
????參考鏈接：vueRouter - mode API
????1）Hash模式：使用 URL hash 值來作路由。支持所有瀏覽器，包括不支持 HTML5 History Api 的瀏覽器。（URL中帶有#號）：
http://localhost:8080/#/
????2）History模式：依賴HTML5 History API 和服務(wù)器配置。HTML5 History模式，(URL中不帶有#號）:
export default new Router ({
?????mode: 'history',
????routes: [ {
????????path: '/',
????????name: '/',
????????component: main
????} ]
})
????3）Abstract模式：支持所有javascript運行模式，如 Node.js 服務(wù)器端。如果發(fā)現(xiàn)沒有瀏覽器的API，路由會自動強制進(jìn)入這個模式。
vue-router的go相關(guān)；
router.go(n)：類似 window.history.go(n)，在 history 記錄中向前或后退n步(n為int類型)
router.push(location)：導(dǎo)航到不同的 URL，則使用 router.push 方法。這個方法會向 history 棧添加一個新的記錄，所以，當(dāng)用戶點擊瀏覽器后退按鈕時，則回到之前的 URL。
router.replace(location)：跟 router.push 很像，唯一的不同就是，它不會向 history 添加新記錄，而是跟它的方法名一樣 —— 替換掉當(dāng)前的 history 記錄。
vue組件設(shè)計相關(guān)；
? ? 1）用一些功能單一的小模塊來組織應(yīng)用，較小的模塊更容易看懂、維護(hù)、復(fù)用和調(diào)試 （每個組件應(yīng)該保持單一、獨立、可復(fù)用、可測試）；
????2)組件命名應(yīng)該遵從以下幾點原則：
????????有意義: 名字不要太詳細(xì)，也不要太抽象。
????????短: 名字最好是2-3個單詞。
????????可讀的:容易讓人能讀出來以便我們可以更容易的討論它。
????vue組件也應(yīng)該遵循以下原則：
????????遵從元素命名規(guī)范，包括連字符，不要使用保留字
????????為了在其他項目中復(fù)用，應(yīng)該以某個模塊名字作為命名空間。
????3）把復(fù)雜的語法移動到methods或者計算屬性中，避免使用行內(nèi)表達(dá)式；
????4）保證組件的props簡單，保證接口簡單，便于開發(fā)理解維護(hù)，同時進(jìn)行props限制，比如檢查是否存在，設(shè)置默認(rèn)值，設(shè)置類型校驗等；
????參考鏈接：vue組件最佳實踐
模塊化的工具；
????參考鏈接：常用模塊化方案
webpack打包優(yōu)化；
????參考鏈接：webpack打包體積優(yōu)化
設(shè)計一個自己的打包工具需要設(shè)計哪些主要功能；
? ? 參考鏈接：前端打包工具
babel相關(guān)；
????參考鏈接：Babel 從入門到插件開發(fā)? ?
?????????????????????? Babel
mvvm的好處；
????參考鏈接：MVVM的優(yōu)點和缺點
????????????????????MVVM架構(gòu)的優(yōu)缺點
jquery的一些基本用法；
????參考鏈接：jquery的一些基本用法
????????????????????????jQuery的詳細(xì)解析以及用法
lodash相關(guān)；
????參考鏈接：官方文檔
vue和react的對比；
????參考鏈接：Vue.js與React的全面對比
vue和jquery的對比；
jQuery是使用選擇器（$）選取DOM對象，對其進(jìn)行賦值、取值、事件綁定等操作，其實和原生的HTML的區(qū)別只在于可以更方便的選取和操作DOM對象，而數(shù)據(jù)和界面是在一起的。比如需要獲取label標(biāo)簽的內(nèi)容：$("lable").val();,它還是依賴DOM元素的值。
?Vue則是通過Vue對象將數(shù)據(jù)和View完全分離開來了。對數(shù)據(jù)進(jìn)行操作不再需要引用相應(yīng)的DOM對象，可以說數(shù)據(jù)和View是分離的，他們通過Vue對象這個vm實現(xiàn)相互的綁定。這就是傳說中的MVVM。
vue適用的場景：復(fù)雜數(shù)據(jù)操作的后臺頁面，表單填寫頁面；
jquery適用的場景：比如說一些html5的動畫頁面，一些需要js來操作頁面樣式的頁面；
然而二者也是可以結(jié)合起來一起使用的，vue側(cè)重數(shù)據(jù)綁定，jquery側(cè)重樣式操作，動畫效果等，則會更加高效率的完成業(yè)務(wù)需求。
webGL：
????參考鏈接：webGL—MDN
