1、什么是w3c標準，談?wù)剬3c的理解？
如果從WEB技術(shù)角度，可以分為三個方面的標準：結(jié)構(gòu)、表現(xiàn)、行為。結(jié)構(gòu)主要指(X)HTML標準，包括各種標簽的名字、屬性、語義及其他相關(guān)標準。表現(xiàn)主要指CSS，包括各種定位、顏色、大小等方面的標準。行為主要指Javascript，其實主要由ECMA國際制定的標準，但由于在萬維網(wǎng)上廣泛應(yīng)用，開發(fā)人員也要關(guān)注。Javascript的詞法、表達式、語句等方面也有一系列的標準。 Javascript沒有像Java JDK那樣的現(xiàn)成二進制文件，只有文檔標準，具體的實現(xiàn)交給了各瀏覽器，所以在開發(fā)過程中，各瀏覽器的兼容性問題會是一個問題，我們在處理的時候可以遵循鴨式辨型原則去處理。
參考：淺談w3c標準
2、Doctype作用是什么？嚴格模式與混雜模式如何區(qū)分？有何差異？
? ?<!DOCTYPE>聲明叫做文件類型定義（DTD），聲明的作用為了告訴瀏覽器該文件的類型。讓瀏覽器解析器知道應(yīng)該用哪個規(guī)范來解析文檔。<!DOCTYPE>聲明必須在 HTML 文檔的第一行，這并不是一個 HTML 標簽。
? ?嚴格模式：又稱標準模式，是指瀏覽器按照 W3C 標準解析代碼。
? ?混雜模式：又稱怪異模式或兼容模式，是指瀏覽器用自己的方式解析代碼。
? ?如何區(qū)分：瀏覽器解析時到底使用嚴格模式還是混雜模式，與網(wǎng)頁中的 DTD 直接相關(guān)。
1、如果文檔包含嚴格的 DOCTYPE ，那么它一般以嚴格模式呈現(xiàn)。（嚴格 DTD ——嚴格模式）?
2、包含過渡 DTD 和 URI 的 DOCTYPE ，也以嚴格模式呈現(xiàn)，但有過渡 DTD 而沒有 URI （統(tǒng)一資源標識符，就是聲明最后的地址）會導致 頁面以混雜模式呈現(xiàn)。（有 URI 的過渡 DTD ——嚴格模式；沒有 URI 的過渡 DTD ——混雜模式）?
3、DOCTYPE 不存在或形式不正確會導致文檔以混雜模式呈現(xiàn)。（DTD不存在或者格式不正確——混雜模式）
4、HTML5 沒有 DTD ，因此也就沒有嚴格模式與混雜模式的區(qū)別，HTML5 有相對寬松的語法，實現(xiàn)時，已經(jīng)盡可能大的實現(xiàn)了向后兼容。（ HTML5 沒有嚴格和混雜之分）
? ?意義：嚴格模式與混雜模式存在的意義與其來源密切相關(guān)，如果說只存在嚴格模式，那么許多舊網(wǎng)站必然受到影響，如果只存在混雜模式，那么會回到當時瀏覽器大戰(zhàn)時的混亂，每個瀏覽器都有自己的解析模式。
? 嚴格模式與混雜模式的語句解析不同點有哪些？
? ?1）盒模型的高寬包含內(nèi)邊距padding和邊框border
在W3C標準中，如果設(shè)置一個元素的寬度和高度，指的是元素內(nèi)容的寬度和高度，而在IE5.5及以下的瀏覽器及其他版本的Quirks模式下，IE的寬度和高度還包含了padding和border。
2）可以設(shè)置行內(nèi)元素的高寬
??? 在Standards模式下，給span等行內(nèi)元素設(shè)置wdith和height都不會生效，而在quirks模式下，則會生效。
3）可設(shè)置百分比的高度
??? 在standards模式下，一個元素的高度是由其包含的內(nèi)容來決定的，如果父元素沒有設(shè)置高度，子元素設(shè)置一個百分比的高度是無效的。
4）用margin:0 auto設(shè)置水平居中在IE下會失效
??? 使用margin:0 auto在standards模式下可以使元素水平居中，但在quirks模式下卻會失效,quirk模式下的解決辦法，用text-align屬性:
???body{text-align:center};#content{text-align:left}
5）quirk模式下設(shè)置圖片的padding會失效
6）quirk模式下Table中的字體屬性不能繼承上層的設(shè)置
7）quirk模式下white-space:pre會失效
來源：Doctype作用？嚴格模式與混雜模式如何區(qū)分？它們有何差異？
3、display：none和display：visibility的區(qū)別？
display：none和display：visibility都會隱藏某個元素，但是display：none隱藏的元素不會占據(jù)任何空間，從頁面上消失，而display：visibility隱藏的元素仍想未隱藏的元素一樣占據(jù)頁面的空間。也就是說該元素被隱藏了，蛋仍會影響頁面布局。
4、css選擇器有哪些？那些css屬性可以繼承？
1、id選擇器：#myid{background:black}
2、類選擇器：.classname{}
3、標簽選擇器： div{}
4、通配選擇器： *{}
5、相鄰選擇器：h1+div{}
6、子代選擇器：h1>div{}
7、后代選擇器：h1 div{}
8、屬性選擇器：a[attr=value]{}
9、偽類選擇器：a:hover{}
可以被繼承的屬性有：
字體相關(guān)：line-height,?font-family, font-size, font-style, font-variant, font-weight, font
文本相關(guān)： letter-spacing, text-align, text-indent, text-transform, word-spacing
列表相關(guān)：list-style-image, ?list-style-position, list-style-type, list-style
5、解釋一下wiondow.onload和onDocumentReady和區(qū)別？
window.onload在頁面所有元素（包括圖片、引入的文件）夾子啊完成后執(zhí)行，onDocument在html DOM和css DOM 加載后（部分圖片可能沒有加載完成）就可執(zhí)行；
window.onload只能執(zhí)行一次，如果定義多次，后者將覆蓋前者，onDocument可定義多次，并且都能運行；
6、解釋一下css盒模型？
所有HTML元素可以看作盒子，在CSS中，"box model"這一術(shù)語是用來設(shè)計和布局時使用。
CSS盒模型本質(zhì)上是一個盒子，封裝周圍的HTML元素，它包括：邊距，邊框，填充，和實際內(nèi)容。
盒模型允許我們在其它元素和周圍元素邊框之間的空間放置元素。
下面的圖片說明了盒子模型(Box Model)：
不同部分的說明：
Margin(外邊距)- 清除邊框外的區(qū)域，外邊距是透明的。
Border(邊框)- 圍繞在內(nèi)邊距和內(nèi)容外的邊框。
Padding(內(nèi)邊距)- 清除內(nèi)容周圍的區(qū)域，內(nèi)邊距是透明的。
Content(內(nèi)容)- 盒子的內(nèi)容，顯示文本和圖像。
為了正確設(shè)置元素在所有瀏覽器中的寬度和高度，你需要知道的盒模型是如何工作的。
最終元素的總寬度計算公式是這樣的：
總元素的寬度=寬度+左填充+右填充+左邊框+右邊框+左邊距+右邊距
元素的總高度最終計算公式是這樣的：
總元素的高度=高度+頂部填充+底部填充+上邊框+下邊框+上邊距+下邊距
7.你能解釋一下漸進增強和優(yōu)雅降級和不同嗎？
漸進增強（progressive enhancement）：針對低版本瀏覽器進行構(gòu)建頁面，保證最基本的功能，然后再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗。（從被所有瀏覽器支持的基本功能開始，逐步地添加那些只有新式瀏覽器才支持的功能，向頁面添加無害于基礎(chǔ)瀏覽器的額外樣式和功能。當瀏覽器支持時，它們會自動地呈現(xiàn)出來并發(fā)揮作用。）
優(yōu)雅降級（graceful degradation）：一開始就構(gòu)建完整的功能，然后再針對低版本瀏覽器進行兼容。（Web站點在所有新式瀏覽器中都能正常工作，如果用戶使用的是老式瀏覽器，則代碼會檢查以確認它們是否能正常工作。由于IE獨特的盒模型布局問題，針對不同版本的IE的hack實踐過優(yōu)雅降級了，為那些無法支持功能的瀏覽器增加候選方案，使之在舊式瀏覽器上以某種形式降級體驗卻不至于完全失效。）
區(qū)別：優(yōu)雅降級是從復(fù)雜的現(xiàn)狀開始，并試圖減少用戶體驗的供給，而漸進增強則是從一個非?；A(chǔ)的、能夠起作用的版本開始，并不斷擴充，以適應(yīng)未來環(huán)境的需要。
19、javaScript中數(shù)組方法push() 、pop()、shift()和 unshift()的區(qū)別？
push（）方法可以接收任意個數(shù)的參數(shù)，吧它們逐一添加到到數(shù)組末尾。并返回修改后的數(shù)組長度；
pop（）方法從數(shù)組末尾最后一項，減少數(shù)組length值，并返回去除的那一項；
shift（）方法移除數(shù)組第一項，將這一項返回；
unshift（）方法能再數(shù)組前端添加任意個項，并返回新數(shù)組的長度
20、你能解釋一下vue.js雙向數(shù)據(jù)綁定的原理嗎？
vue.js雙向綁定就是指model層與view層的同步，兩者之間任意一個發(fā)生變化都會同步更新到另一者。
View為視圖層，Model為數(shù)據(jù)層，ViewModel為邏輯控制層。?
vue.js采用數(shù)據(jù)劫持結(jié)合發(fā)布者-訂閱者模式的方法，通過Object.defineProperty()劫持各個屬性的setter，getter在數(shù)據(jù)變動時發(fā)布消息給訂閱者，觸發(fā)相應(yīng)的監(jiān)聽回調(diào)。
更詳細的內(nèi)容請參考此頁：vuejs雙向數(shù)據(jù)綁定原理詳解
21、說一下你對vue.js生命周期的理解？
每個 Vue 實例在被創(chuàng)建時都要經(jīng)過一系列的初始化過程——例如，需要設(shè)置數(shù)據(jù)監(jiān)聽、編譯模板、將實例掛載到 DOM 并在數(shù)據(jù)變化時更新 DOM 等。同時在這個過程中也會運行一些叫做生命周期鉤子的函數(shù)，這給了用戶在不同階段添加自己的代碼的機會。
比如created鉤子可以用來在一個實例被創(chuàng)建之后執(zhí)行代碼，也有一些其它的鉤子，在實例生命周期的不同階段被調(diào)用，如mounted、updated和destroyed。生命周期鉤子的?this?上下文指向調(diào)用它的 Vue 實例。
在JS中，綁定的事件默認的執(zhí)行時間是在冒泡階段執(zhí)行，而非在捕獲階段，必須要理解
不過我們可以通過綁定事件時，指定事件執(zhí)行時間是在冒泡階段還是捕獲階段。
obj.addEventListener(event,function(){},bool)
bool:false，代表冒泡階段執(zhí)行
bool:true，代表捕獲階段執(zhí)行
JS在默認情況下獲取事件后，就開始從根元素開始捕獲所有該事件的監(jiān)聽對象，然后在冒泡階段逐一執(zhí)行。捕獲階段是在冒泡階段前面
阻止冒泡
w3c的方法是e.stopPropagation()，IE則是使用e.cancelBubble = true；
阻止默認行為
w3c的方法是e.preventDefault()，IE則是使用e.returnValue = false;
關(guān)于JS 事件冒泡和onclick,click,on()事件觸發(fā)順序
onclick,click,on()的優(yōu)先關(guān)系：onclick>click>on()；
onclick和click綁定的事件，彼此之間遵守事件冒泡規(guī)則，從內(nèi)到外觸發(fā)；
on()綁定的事件，總是晚于onclick和click綁定的事件觸發(fā)；
前端工程化面臨的問題
要解決前端工程化的問題，可以從兩個角度入手：開發(fā)和部署。
從開發(fā)角度，要解決的問題包括：
提高開發(fā)生產(chǎn)效率；
降低維護難度。
這兩個問題的解決方案有兩點：
制定開發(fā)規(guī)范，提高團隊協(xié)作能力；
分治。軟件工程中有個很重要的概念叫做模塊化開發(fā)其中心思想就是分治。
從部署角度，要解決的問題主要是資源管理，包括：
代碼審查；
壓縮打包；
增量更新；
單元測試；
要解決上述問題，需要引入構(gòu)建/編譯階段。
2.1 開發(fā)規(guī)范
開發(fā)規(guī)范的目的是統(tǒng)一團隊成員的編碼規(guī)范，便于團隊協(xié)作和代碼維護。開發(fā)規(guī)范沒有統(tǒng)一的標準，每個團隊可以建立自己的一套規(guī)范體系。
值得一提的是JavaScript的開發(fā)規(guī)范，尤其是在ES2015越來越普及的局面下，保持良好的編碼風格是非常必要的。筆者推薦Airbnb的eslint規(guī)范。
2.2 模塊/組件化開發(fā)
2.2.1 模塊還是組件？
很多人會混淆模塊化開發(fā)和
