LinDaiDai的 2019 面试准备
前言
最近在掘金上刷到j(luò)sliang小伙的一篇文章jsliang 的 2019 面試準備,深受啟發(fā),恰巧自己最近也在準備面試,所以趁著此黃金時期寫下此文章,做一些前端方面的總結(jié),鞏固知識的同時也希望對行走在路上的你們有所幫助。
1.HTML
1. 什么是HTML5?
首先,我們知道HTML5其實就是對HTML標準的第五次修改,我們廣義上說的HTML5,實際是包過HTML,CSS,JavaScript在內(nèi)的一套技術(shù)組合.
它的主要目標呢就是將互聯(lián)網(wǎng)語義話,以便更好的被人類還有機器閱讀,同時能夠更好地支持各種媒體的嵌入,比如圖片,鏈接,音樂等非文字元素.
我認為,它有倆大特點:首先,強化了web網(wǎng)頁的表現(xiàn)性能.其次,追加了本地數(shù)據(jù)庫等web應(yīng)用的功能,提供了更多能支持網(wǎng)絡(luò)應(yīng)用的標準集.
拓展:
web數(shù)據(jù)庫?
web數(shù)據(jù)庫呢實際上就是以web查詢接口方式訪問的數(shù)據(jù)庫資源,它將數(shù)據(jù)庫技術(shù)和web技術(shù)融合在一起,使數(shù)據(jù)庫成為了web的重要有機組成部分.
它的工作過程可以簡單的描述成:用戶通過瀏覽器的操作界面以交互的方式經(jīng)由web服務(wù)器來訪問數(shù)據(jù)庫.
web?
萬維網(wǎng)的簡稱web,
Web的工作步驟如下。
（1）用戶打開客戶端計算機中的瀏覽器軟件（例如Internet Explorer）。
（2）用戶輸入要啟動的Web主頁的URL地址，瀏覽器將生成一個HTTP請求。
（3）瀏覽器連接到指定的Web服務(wù)器，并發(fā)送HTTP請求。
（4）Web服務(wù)器接到HTTP請求，根據(jù)請求的內(nèi)容不同作相應(yīng)的處理，再將網(wǎng)頁以HTML文件格式發(fā)回給瀏覽器。
（5）瀏覽器將網(wǎng)頁顯示到屏幕上。
HTML語言?
超文本標記語言,就是創(chuàng)建網(wǎng)頁的計算機語言 HTML(Hyper Text Markup Language)
我們所說的網(wǎng)頁其實就是一個HTML文檔,文檔內(nèi)容由文本和HTML標記組成,擴展名是.html或.htm
HTML標記:它的作用是告訴瀏覽器我們頁面的結(jié)構(gòu)和格式.如果將特定的英文單詞放入標記中就是標簽
HTML程序:放在中,由文件頭和文件體組成.
HTML規(guī)范:也就是HTML標準,是由W3C(萬維網(wǎng)聯(lián)盟)制定的.
HTML程序的編輯環(huán)境:任何文本編輯器.
HTML程序的運行環(huán)境:任何的瀏覽器
XML語言?
可拓展標記語言,是用來定義其它語言的一種元語言.
XML文檔,由字符數(shù)據(jù)和標記組成.它的語義約束是DTD
DTD?
文檔類型定義,基本格式:
我們知道瀏覽器解析css的倆種模式是: 標準模式和怪異模式
標準模式是指按w3c的標準解析執(zhí)行代碼,而怪異模式是指瀏覽器按它自己的方式解析執(zhí)行.
而瀏覽器以哪種模式解釋就是與你網(wǎng)頁中的DTD聲明有關(guān).
若沒有寫DTD的話會使頁面進入怪異模式.
HTML5不需要DTD?
因為HTML5沒有使用SGML或者XHTML,是一個全新的東西,所以不需要參考DTD
HTML和XML區(qū)別?
結(jié)構(gòu)上大致相同,本質(zhì)上不同:
1.語法要求不同,html中不區(qū)分大小寫,xml中更嚴格.
2.標記不同,html使用固有的標記,xml沒有固有的標記.
3.作用不同,html顯示數(shù)據(jù),xml描述數(shù)據(jù),盛放數(shù)據(jù).
注:
XML不是HTML的替代品,因為它們是倆種不同用途的語言.
XHTML和HTML?
XHTML是更嚴格更純凈的 HTML 版本,但現(xiàn)在已經(jīng)不再使用XHTML。
.html? .htm?
.htm與.html沒有本質(zhì)上的區(qū)別,表示的是同一種文件,只是適用于不同的環(huán)境之下.DOS(磁盤操作系統(tǒng))只能識別8 + 3的文件名,所以只能識別.htm而不能識別.html
2. HTML5與HTML4或更早的HTML的區(qū)別
1.文檔聲明上:html4比較復(fù)雜,而html5只有一小段<!DOCTYPE html>
2.結(jié)構(gòu)語義上:html4沒有體現(xiàn)語義化的標簽,而html5有
3.同時h5又新添了很多表單元素的屬性和類型
4.功能上HTML5更加強大,比如可以利用canvas標簽配合js來實現(xiàn)繪圖功能,也比如新增的視頻標簽video,以及新增的表單元素類型,像email,number,range,data等
H5新特性?
1.新的文檔類型
2.腳本和鏈接無需type
3.語義標簽Header和Footer
4.Hgroup標簽，對h1~h6進行分組。
5.標記元素mark高亮標簽
6.圖形元素figure和figcaption
7.新的表單控件，比如data,number,range,color等等
8.新的表單屬性，比如autofocus、autocomplete、multiple、 placeholder、pattern等等
9.新的功能性標簽：audio、vidio
10.強大的繪圖標簽canvas
11.離線存儲localstorage和sessionstorage
css3新特性？
ES6新特性？
1.默認參數(shù)
2.字符串模板
3.多行字符串
4.拆包表達式
5.改進的對象表達式
6.箭頭函數(shù)
H5的離線儲存?
離線存儲表示的是用戶沒有與因特網(wǎng)鏈接時,可以正常訪問站點或應(yīng)用.
原理是基于一個新建的.appcache文件的緩存機制,通過這個文件上的解析清單離線存儲資源,這些資源就會像cookie一樣被保存下來,當在沒有網(wǎng)絡(luò)的情況下,瀏覽器就會通過被離線存儲的數(shù)據(jù)進行頁面展示.
在我們H5中提供了倆種在客戶端存儲數(shù)據(jù)的新方法:
localStorage和sessionStorage
而在這之前呢,這些功能都是由cookie完成的,只不過cookie的存儲量太小了最多也才4k,所以不適合大量數(shù)據(jù)的存儲.
cookie
設(shè)置cookie
document.cookie = "user=wangxiansheng" alert(document.cookie) 復(fù)制代碼設(shè)置過期時間
//expires:過期時間, 接受一個日期對象var d = new Date()d.setTime(d.getTime() + 2 * 24 * 60 * 60 * 1000)var expires = d.toUTCString();//一個條目包含保存的鍵值對和過期時間document.cookie = `demo=wangpei;expires=${expires}`;console.log(document.cookie); 復(fù)制代碼localStorage和sessionStorage?
它們倆都是H5新添的離線存儲方法,并且兩種方式保存的數(shù)據(jù)都僅限于該頁面的協(xié)議,但不同之處在于:
localStorage它的存儲沒有時間限制,一周或者一個月一年,數(shù)據(jù)仍然存在.
而sessionStorage里面存儲的數(shù)據(jù)會在瀏覽器會話結(jié)束時被清除
在兼容性上,各瀏覽器支持localStorage和sessionStorage的容量上限不同.在ie8以上是支持的,不包過ie8.
chrome4支持localStorage,chrome5支持sessionStorage.
cookie與它倆的區(qū)別?
第一點,在存儲量上,cookie太小了,最多只能存儲4K.
第二點,cookie可以設(shè)置過期時間,如果沒有設(shè)置則默認是在關(guān)閉窗口或者回話窗過期,但localStorage和sessionStorage沒有提供設(shè)置過期時間的功能,但我們可以在存儲的時候加上時間,以后在取值的時候判斷一下localStorage是否過期就可以了.
瀏覽器對離線存儲的管理和加載?
在線狀態(tài)下,瀏覽器要是發(fā)現(xiàn)html頭部有manifast屬性的話,它會請求manifast文件,若是第一次訪問app,那么瀏覽器就會根據(jù)mainfest文件的內(nèi)容下載對應(yīng)的資源進行離線存儲
離線狀態(tài)下,已經(jīng)訪問過app并且資源已經(jīng)離線存儲了,那么瀏覽器就會使用離線的資源加載頁面,然后瀏覽器會對比新的manifest文件與舊的manifest文件,如果文件沒有發(fā)生改變,就不做任何操作,如果文件改變了,那么就會重新下載文件中的資源并進行離線存儲.
userData?
ie支持userData存儲數(shù)據(jù).但是基本已經(jīng)很少使用了,除非有很強的瀏覽器兼容需求.
瀏覽器對H5的支持性?
在幾個主流的瀏覽器中,比如ie瀏覽器,ie8以下是不支持的,ie9支持部分,比如video標簽是支持的.ie10以上支持
還有像Chrome這樣的高級瀏覽器,它的3-5支持大部分,在6以上就全部支持了.
H5中的form如何關(guān)閉自動完成功能?
我們知道,表單元素的自動完成功能就是輸入框輸入內(nèi)容的時候,瀏覽器會從你以前的同名輸入框的歷史記錄中查找出類似的內(nèi)容并列舉在輸入框下面,當有時我們希望使用AJAX技術(shù)從數(shù)據(jù)庫搜索并列舉而不是根據(jù)瀏覽器的歷史記錄搜索,所以此時我們就需要將form的自動完成功能給關(guān)閉.
在ie瀏覽器下,我們可以在瀏覽器的設(shè)置中的internet選項菜單內(nèi)容中將自動完成功能中的設(shè)置.
也可以在form標簽中通過設(shè)置autocomplete為"on"或者"off"來開啟或關(guān)閉自動完成功能.
3. a標簽的四個偽類是什么?
a標簽的四個偽類分別是未訪問link,已訪問visited,鼠標懸停hover,鼠標點擊瞬間active
四個偽類的順序是:分別是link,visited,hover,active.
其實link和visited的順序其實是無所謂的,因為不可能同時觸發(fā)未訪問和已訪問.
但是link是一定要在hover或者active之前.
visited要在hover之前.
而hover要在active之前.
關(guān)于兼容性的話,必須要在ie8包含ie8以上才有用.
4. HTML中文亂碼
亂碼原因?
第一點可能是因為沒有設(shè)置HTML編碼,也就是沒有在meta標簽中設(shè)置charset屬性.
第二點也可能是使用了記事本編輯html,直接使用記事本編輯很容易造成html編碼亂碼
怎么解決?
可以在meta標簽中設(shè)置charset屬性為"utf-8",另外盡量使用sublime等編輯器編輯代碼,而不是用記事本.
5. input屬性有哪些？
input的屬性目前在w3c上發(fā)布的是有23種,像比較常見的有定義輸入字段的初始值value,規(guī)定輸入字段為只讀的readonly,還有規(guī)定字段禁用的disabled.
另外還有一些給input限制的標簽,比如像size規(guī)定字段的尺寸,maxlength規(guī)定輸入字段允許的最大長度
在我們H5中有給input添加了很多的屬性,比如規(guī)定form自動完成功能的autocomplete,自動獲取焦點的autofocus.
還有max和min規(guī)定元素的最大最小值等等.
input中readonly和disabled的區(qū)別
倆個都是表單的屬性,都能做到使用戶不能更改表單域中的內(nèi)容.但他們也有一些差別.
第一點:readonly只針對type為text,password,textarea有效,而disabled對所有的表單元素都有效.
第二點:readonly可以進行表單提交,而disabled不能.
input的兼容性問題
首先在樣式上,當type為text的時候,在ie瀏覽器下和在火狐等瀏覽器下高度不同,ie下為24px,火狐下為22px
type為submit也會不同.
同時在低版本的ie瀏覽器(ie8以下)下,input中的文本內(nèi)容都會偏上一點.解決方案是給其添加padding-top.也可以給其設(shè)置高度和行高相等,但是在火狐下不行.
type為button時,value不能為空,否則它就不會和其他的表單元素頭部對其,而是向上一些.解決方案:最后不要給value為空.
6.內(nèi)聯(lián)塊元素有哪些?
常用的內(nèi)聯(lián)塊元素有img標簽,input標簽
內(nèi)聯(lián)塊元素有哪些特征?
首先內(nèi)聯(lián)塊元素是和塊元素一樣可以設(shè)置寬高的,但是卻可以像內(nèi)聯(lián)元素一樣放在同一行顯示,代碼空格換行也會被解析.
內(nèi)聯(lián)塊元素之間為什么會有小間隙?
那是因為內(nèi)聯(lián)元素的空格和換行會被解析
解決方案可以手動將回車空格給去除,但是這樣會影響代碼的美觀,所以如果是像img這種不需要文本內(nèi)容的內(nèi)聯(lián)塊元素可以給它的父級的font-size設(shè)為0,也可以將它的寬高都設(shè)為100%.
7. 如何優(yōu)化網(wǎng)頁
對于我們前端的網(wǎng)頁優(yōu)化來說,一方面是提高我們頁面的加載速度,還一方面可能就是提高我們頁面的表現(xiàn)性.
對于提高頁面加載速度可以有這么幾種方式:
1.減小Http請求的數(shù)量.
2.還可以運用css sprites技術(shù)將多個圖片融合在一張大圖上,另外也可以對圖片進行壓縮,比如png圖片在www.tinypng.com上面進行壓縮,然后在webpack進行轉(zhuǎn)base64,只有圖片大小不超過10k才會轉(zhuǎn).
3.使用CDN;
4.添加Expires頭;
5.將樣式表放在頭部,減少頁面首屏出現(xiàn)的時間,使內(nèi)容逐步呈現(xiàn),提高用戶體驗,可以防止"白屏"
6.將腳本放在底部,也是和樣式表放在頭部一樣.因為js的下載會中斷DOM的更新,所以script標簽要是放在首屏范圍內(nèi)的HTML代碼里是會截斷首屏的內(nèi)容的.另外也是為了保證腳本能按順序執(zhí)行.
7.避免css表達式
8.使用外部的javascript和css,因為當腳本或者css是從外部引用進來的時候,瀏覽器就有可能緩存它,在以后加載的時候就可以直接使用緩存.
9.減少DNS查找.
10.精簡代碼.
11.避免重定向.因為當頁面發(fā)生了重定向的時候,就會影響整個HTML文檔的傳輸.
12.使AJAX可緩存,也就是多用get而少用post,因為get是會在客戶端進行緩存的,而post不會.
CDN?
CDN實際就是一組分布在不同地理位置的Web服務(wù)器,可以更加有效的像用戶發(fā)布內(nèi)容.
CDN還可以進行數(shù)據(jù)備份,擴展存儲能力,進行緩存.
同時也是有一些缺點的,比如響應(yīng)時間是會受到其他網(wǎng)站流量的影響,并且如果CDN服務(wù)質(zhì)量下降了,你的工作質(zhì)量也會下降,同時它也無法控制組件服務(wù)器.
Expires頭?
當我們初次訪問一個頁面的時候,是會進行很多HTTP請求的,但是通過使用一個長久的Epires頭,就可以使這些組件被緩存下來,下次訪問的時候就可以減少不必要的HTTP請求.
重定向與打開新頁面
相同點:
都實現(xiàn)了根據(jù)自己的條件實現(xiàn)的頁面的跳轉(zhuǎn)
區(qū)別:
重定向?qū)е聻g覽器發(fā)出了新的請求,在重定向之前存儲為請求屬性的任何對象都會消失,所以跳轉(zhuǎn)到應(yīng)用內(nèi)的某個頁面,沒有瀏覽記錄,而打開新頁面不會這也是兩者最大的區(qū)別.
所以使用重定向后,返回按鈕會失效,除非在設(shè)置返回按鈕時給它一個指定的路徑.
為了提高網(wǎng)頁的性能,應(yīng)該避免重定向.
重定向?
重定向是用戶從一個URL重新路由到另一個URL.常用的重定向的類型有永久重定向,臨時重定向.
永久重定向用于當網(wǎng)站的域名發(fā)生變更后,應(yīng)該告訴搜索引擎域名已經(jīng)變更了,從而不影響網(wǎng)站的排行.
而臨時重定向主要是實現(xiàn)post請求之后告知瀏覽器轉(zhuǎn)移到新的url,
應(yīng)用的場景主要是
1.跟蹤內(nèi)部流量
2.跟蹤出站流量
重定向如何損失性能的?
因為我們知道重定向其實就是用戶從一個URL重新路由到另一個URL,所以就使瀏覽器發(fā)出了一個新的請求,這樣是會延遲整個HTML文檔的傳輸
8. 'data-'屬性的作用是什么？
在介紹data-屬性的作用之前我想先介紹一下data-,
data-屬性是H5才新增的一種自定義屬性,這些屬性集可以通過對象的dataset屬性獲取,不支持該屬性的瀏覽器可以通過 getAttribute方法獲取
在兼容性上,dataset屬性只有在IE11以上，Chrome8+瀏覽器中實現(xiàn)，所以在此期間最好用的getAttribute和setAttribute來操作。
為什么使用它呢,我們知道HTML標簽是可以通過自定義屬性來存儲和操作數(shù)據(jù)的,但是這樣在寫法上就不太符合Html的規(guī)范,所以H5新添了這個自定義屬性data
js中獲取設(shè)置data-屬性：
<div id = "user" data-uid = "12345" data-uname = "王先生" > </div><script>var user = document.getElementById('user');// 1. data屬性能夠直接用getAttribute獲取，但那樣就失去了它的意義，所以不推薦使用var userName = user.getAttribute('data-uname');var userId = user.getAttribute('data-uid');console.log(userName); // "王先生"// 設(shè)置的話可以用setAttribute();user.setAttribute('data-site', 'www.baidu.com');console.log(user.dataset.site); // www.baidu.com// 2. 定義了data-的屬性應(yīng)該用dataset來獲取，獲取的是整個含有data屬性的對象var dataSet = user.datasetconsole.log(dataSet);// {uid:"12345",uname:"王先生"}// 這樣我們就可以用dataset來獲取里面需要的data屬性console.log(dataSet.uid); // "12345"// 要修改的話就直接修改dataSet.uname = "我是帥帥的王先生";console.log(dataSet.uname);// 使用in來判斷一個屬性是不是dataset中的屬性console.log('someDataAtrr' in user.dataset); // falseconsole.log('uname' in user.dataset); // true// // 刪除data屬性delete user.dataset.uname; // 或者 user.dataset.user = nullconsole.log(user.dataset.uname);// 選擇所有包含 'data-uid' 屬性的元素var dataUids = document.querySelectorAll ('[data-uid]') ;console.log(dataUids); // [div#user.users, div.users]console.log(dataUids[0]); // <div class="users" id = "user" data-uid = "12345" data-uname = "王先生" >我是王先生</div></script> 復(fù)制代碼CSS中獲取data-
<style>.users[data-uid="12345"]{color: red;}</style><div class="users" id = "user" data-uid = "12345" data-uname = "王先生" >我是王先生</div><div class="users" id = "user" data-uid = "54321" data-uname = "李先生" >我是李先生</div>// 只有王先生變紅 復(fù)制代碼9. 怪異模式？
在模式上，主要是有標準模式，和怪異模式。首先怪異模式ie下獨有的一種模式。它和我們的標準模式主要是在布局，樣式解析和腳本的執(zhí)行上有一些差異吧。就比如在怪異模式下，盒模型是按照怪異盒模型解析的，我們知道怪異盒模型和我們普通盒模型的差別還是很大的，另外，還有比如像在怪異模式下，我們常用的margin:0 auto；這種居中方式就沒用了。
標準模式和怪異模式的轉(zhuǎn)換
在css中設(shè)置屬性
div {box-sizing: border-box;/*怪異*/box-sizing: content-box;/*標準*/ } 復(fù)制代碼怎樣查看瀏覽器進入哪種模式
使用 window.top.document.compatMode 可顯示為什么模式
10. 你如何理解HTML結(jié)構(gòu)的語義化？
當頁面樣式加載失敗的時候能夠讓頁面呈現(xiàn)出清晰的結(jié)構(gòu)
有利于seo優(yōu)化，利于被搜索引擎收錄（更便于搜索引擎的爬蟲程序來識別）
便于項目的開發(fā)及維護，使html代碼更具有可讀性，便于其他設(shè)備解析。
11. BFC?
什么是BFC
BFC是塊級格式化上下文，是指在瀏覽器中創(chuàng)建了一個獨立的渲染區(qū)域，這個區(qū)域內(nèi)的元素布局不會影響到外面的元素，并且這個渲染區(qū)域只對塊級元素起作用,然后利用這些規(guī)則我們可以達到一定的布局效果。
BFC的生成
-
float的值不為none;
-
display為inline-block table-ceil table-caption
-
overflow的值不為visible
-
position的值為absolute fixed
BFC的應(yīng)用
-
防止margin重疊
-
解決了浮動的相關(guān)問題，因為創(chuàng)建了BFC的元素，子浮動元素也會參與其高度的計算，這樣就不會產(chǎn)生高度塌陷問題。
-
實現(xiàn)多欄布局的一種方式，因為創(chuàng)建了BFC的元素，與浮動元素相鄰也不會和它互相覆蓋。比如可以設(shè)置倆側(cè)寬度固定，中間元素隨頁面的寬度自適應(yīng)。
12. 標簽嵌套問題
a標簽不能嵌套a標簽（鏈接嵌套瀏覽器解析為兄弟級關(guān)系)
p標簽不能嵌套塊級標簽 瀏覽器解析為兄弟級關(guān)系
如若需要進行鏈接嵌套，可以推薦使用area標簽
2. css
1. css代碼壓縮?
在以前是使用一些壓縮工具進行手動壓縮,但是現(xiàn)在我們都是直接使用webpack打包工具.
2.三層嵌套?
在ie6是不支持border-radius的,當我們要在ie6下想做一個圓角就可以使用三層嵌套.但是在我們實際的開發(fā)中,要是只是為了達到一個圓角的效果而使用各種圖片之類的有些太牽強了,所以在以前的開發(fā)中,我一般就是直接使用border-radius.
3.頁面可見性(Page Visibility)?
Page Visibility是H5新增的API
主要是用來判斷用戶是不是在與頁面進行交互,也就是比如頁面最小化了或者隱藏在其它標簽頁后面了,那么此時就可以用上我們的這個頁面可見性.
這個API主要由三個部分組成:
第一個是document的hidden屬性,表示頁面是否隱藏的布爾值.
第二個是document的visibilityState屬性,它有四個可能狀態(tài)的值.
第三個是visibilitychange事件,當頁面的可見性發(fā)生改變時會觸發(fā).
我們可以監(jiān)聽document的visibilitychange事件,當該事件觸發(fā)時,獲取document.hidden的值來對頁面進行一些操作.比如隱藏頁面時讓播放的歌曲暫停等等.
什么是頁面隱藏?
頁面的隱藏包過頁面在后臺標簽頁中或者瀏覽器最小化,
而頁面被其他軟件遮蓋不算是隱藏
visibilityState?
visibilityState是判斷頁面狀態(tài)的一個屬性,有一下四個狀態(tài)的值:
- hidden：頁面在后臺標簽頁中或者瀏覽器最小化
- visible：頁面在前臺標簽頁中
- prerender：頁面在屏幕外執(zhí)行預(yù)渲染處理 document.hidden 的值為 true
- unloaded：頁面正在從內(nèi)存中卸載
H5之前如何獲取頁面隱藏?
在H5之前,我們是靠監(jiān)聽document獲取焦點和失去焦點來簡單的認為頁面是隱藏還是顯示的.
4. hack?
在css中,hack是指一種兼容css在不同瀏覽器中正確顯示的技巧.因為在不同的瀏覽器中,對css的解析認識不同,因此會導(dǎo)致生成的頁面效果不同.這時候我們就需要針對不同的瀏覽器取寫對應(yīng)的css樣式.一些常見的特殊符號的應(yīng)用.
IE6認識的hacker 是下劃線 _ 和星號 *****
IE7能識別星號" * "，但不能識別下劃線"_"，而firefox兩個都不能認識。
5.解決display:inline-block;在ie6/7中不能正常顯示
如果是塊元素的話給它設(shè)置inline-block沒有效果的,解決方案:
直接讓塊元素設(shè)置為內(nèi)聯(lián)對象呈現(xiàn),也就是設(shè)置display: inline,然后在觸發(fā)塊元素的layout,比如設(shè)置zoom為1等.
其他的內(nèi)聯(lián)元素比如a標簽,span標簽是可以正常顯示的.
layout?
layout是ie的一個私有概念,它決定了一個元素如何顯示以及約束其包含的內(nèi)容等等.一個元素是否具有"layot"屬性可能會導(dǎo)致很多問題,比如ie中很多常見的浮動bug,容器與它子孫元素的邊距重疊問題等等.
如何觸發(fā)layout?
給元素設(shè)置浮動,設(shè)置絕對定位,設(shè)置寬高,設(shè)置zoom,以及轉(zhuǎn)換為inline-block,或者設(shè)置overflow等等都可以觸發(fā)layout.
zomm?
是ie中網(wǎng)頁縮放的比例
ie6/7下通過它來觸發(fā)元素的hasLayout,解決大部分ie瀏覽器下的兼容問題.比如可以用來清除浮動,避免容器高度塌陷.
不過對于現(xiàn)在瀏覽器一般沒必要用它了,因為它只在ie瀏覽器下有用.
6.清除浮動?
給父級float:left; 會影響后面的元素
給父級height:500px; 子級高度改變父級也要改變
給父級overflow:hidden;不同瀏覽器會有兼容性問題
給父級display:inline-block; 內(nèi)聯(lián)塊的一堆問題還在 比如對齊之類的問題
給父級設(shè)置定位;
當然最好的辦法就是在浮動元素的父級元素上使用偽類:after在其后面加上一個空元素并清除它的浮動就可以解決.
7.png圖片有幾種格式?
分別有3種不同深度的格式:png8,png24,png32
png8表示的是8位索引色位圖.png24就是24位索引色位圖
在使用場景上,因為png8最多只能顯示256種顏色,就更適合那些顏色比較單一的圖片,比如純色,logo,圖標等等.
而png24能顯示的顏色要比png8多的多,大概能有1600萬.
顯示效果上:png8支持索引透明和alpha透明,而png24不支持透明,png32都支持.
在兼容性上:我們經(jīng)常說的ie6下不支持PNG透明,指的是不支持png24的透明,但是支持png8的透明,就像支持gif一樣的透明一樣.也就是在ie6下png24的圖片的透明部分會被蒙上一層灰色.(解決方案
索引色位圖
計算機顯示的圖片中所使用的顏色,均有一個顏色體系,每一個顏色與一個顏色表對應(yīng)出來,索引色常使用16色.32色等,最多不超過256色.
切圖是保存為什么樣的格式
1.色彩豐富的,大的圖片切為gif;
2.尺寸小,而且色彩不是很豐富和背景透明的切成gif或者png8;
3.而半透明的切為png24
8.兩欄自適應(yīng)布局，右側(cè)div寬高不定
比如左側(cè)圖片大小固定,右側(cè)隨父級寬度改變而改變
1.使用定位.
2.父級設(shè)定高度,子級高度100%,左側(cè)圖片大小固定并給左浮,右側(cè)元素寬度給100%,因為左側(cè)浮動了是壓得住屬性壓不住內(nèi)容的,所以如果有什么文字內(nèi)容的是會環(huán)繞在圖片周圍,但是最好還是加一個margin-left,以避免右側(cè)有背景圖會被覆蓋.
3.利用彈性布局,父級設(shè)定display: flex;左側(cè)圖片大小固定,右側(cè)元素設(shè)定flex為1.
9. 如何垂直居中一個浮動元素？
第一種情況：已知元素的寬高
將元素設(shè)置定位absolute或者fixed，top和left為50%，margin-left和margin-top為負的寬高的一半。
將元素設(shè)置定位absolute或者fixed，top和left為50%，transform: translate()為負的寬高的一半或者-50%。
第二種情況：不知元素的寬高
將元素設(shè)置定位，四個方向定位都為0，然后設(shè)定margin: auto;
如果子元素是內(nèi)聯(lián)元素或者內(nèi)聯(lián)塊元素也可以將父元素設(shè)定:(使圖片居中最快的方式)
display: table-ceil; text-align: center; vertical-align: middle; 復(fù)制代碼第三種情況：一個瀏覽器頁面中，只有一個div模塊，讓其上下左右居中
將元素設(shè)置定位absolute或者fixed，top和left為50%，margin為auto。
###10.響應(yīng)式布局是什么？
響應(yīng)式布局就是界面能夠適應(yīng)不同的設(shè)備,不同的屏幕大小,讓同一個頁面在在不同的大小比例里看上去還是舒適的,不同分辨率上看上去還是合理的,不同的操作方式體驗應(yīng)該是統(tǒng)一的.
3. JS
1.同步和異步
####用自己的話描述一下對“異步“和”同步“的理解
對“異步”和“同步”我是這樣理解的，首先，我們知道JS是一門單線程語言，也就是不能同時進行很多的事。
所有的任務(wù)都得排隊，要前一個任務(wù)完成之后才能執(zhí)行下一個任務(wù)。但如果我們的任務(wù)列表中有像定時器，ajax請求這一類耗時程序的時候，不得不等結(jié)果出來之后再往下執(zhí)行。所以這時候我們的JS就想到可以將這些耗時耗性能的任務(wù)提取出來然后先不管它們讓他們處于等待狀態(tài)，等那些不耗時的任務(wù)執(zhí)行完之后再來執(zhí)行這些耗時的任務(wù)。
所以像前面我說的那些不耗時的任務(wù)的就是==同步任務(wù)==，盛放他們的列表就是==主線程==。而另一些就是==異步任務(wù)==，它們自然是不在主線程中的，而是在==任務(wù)隊列==。所以只要主線程空了，就會去讀取"任務(wù)隊列"。
異步編程的四種方式
第一種是異步編程最基本的方法，采用==回調(diào)函數(shù)==的方式，將不耗時的任務(wù)或者說是函數(shù)作為耗時的函數(shù)的回調(diào)函數(shù)，這種方式的優(yōu)點是簡單，容易理解和部署，缺點是不利于代碼的閱讀和維護，各個部分之間高度耦合，流程會很混亂，并且每個任務(wù)只能指定一個回調(diào)函數(shù)。
另一種思路是采用==事件驅(qū)動==的方式，任務(wù)的執(zhí)行不是取決于代碼的順序，而是取決于某個事件是否發(fā)生，這種方法的優(yōu)點是比較容易理解，可以綁定多個事件，并且每個事件都可以指定多個回調(diào)函數(shù)，去除了耦合，有利于實現(xiàn)模塊化。缺點是整個程序都變成了事件驅(qū)動，運行流程會變得不清晰。
第三種可以采用==發(fā)布/訂閱==的方式，或者說是觀察者模式，這種方法的性質(zhì)與"事件監(jiān)聽"類似，但是明顯優(yōu)于后者。因為我們可以通過查看"消息中心"，了解存在多少信號、每個信號有多少訂閱者，從而監(jiān)控程序的運行。
最后一種就是我們ES6的==promise==對象，它是CommonJS工作組提出的一種規(guī)范，目的是為異步編程提供統(tǒng)一接口。簡單說，它的思想是，每一個異步請求都會返回一個Promise對象，該對象會有一個then方法，允許指定回調(diào)函數(shù)。它的優(yōu)點在于回調(diào)函數(shù)變成了鏈式寫法，程序的流程可以看到很清楚，并且也有一整套配套的方法，實現(xiàn)很多強大的功能，比如指定多個回調(diào)函數(shù)，指定發(fā)生錯誤時候的回調(diào)函數(shù)fail等等。并且它也有其他三個方法沒有的一點就是如果一個任務(wù)已經(jīng) 完成了，再添加回調(diào)函數(shù)，這個回調(diào)函數(shù)是會立即執(zhí)行的，這樣就不用擔(dān)心是否錯過了某個事件或信號。它的缺點就是有些難理解。
2. HTTP
http協(xié)議
首先http是一個基于請求與響應(yīng)模式的、無狀態(tài)的、應(yīng)用層的協(xié)議
我們的http協(xié)議主要包括了2部分，一部分是==請求協(xié)議==，也就是瀏覽器向服務(wù)器端發(fā)送請求的時候，還有一個是==響應(yīng)協(xié)議==，也就是服務(wù)器向瀏覽器響應(yīng)的時候。
同源
嗯，同源策略是瀏覽器的一個安全機制，為了保護用戶的信息安全，防止惡意的網(wǎng)站竊取數(shù)據(jù)，也就是一個url的協(xié)議，域名，端口號三個都相同情況下，才被判斷為同源。
它最初也就是使用在不同源的情況下不能讀取其他網(wǎng)站的Cookie，但是隨著互聯(lián)網(wǎng)的發(fā)展，同源策略也變得越來越嚴格，目前的話，如果非同源的情況下，不僅像Cookie、Localstorage這種本地儲存不能獲取，連DOM也不能獲取，同時也不能發(fā)Ajax請求。
跨域
雖然它有它的好處能夠保護用戶信息安全，但有時也是挺不方便的。
第一種：
比如我們知道cookie是服務(wù)器寫入瀏覽器的一小段信息，只有同源的網(wǎng)頁才能共享，但是當倆個網(wǎng)頁一級域名相同，只是二級域名不同的情況下，我們也想共享這個cookie。這時就可以通過設(shè)置相同的document.domain來共享cookie，也可以在服務(wù)器設(shè)置cookie的時候，指定cookie的所屬域名為一級域名(Set-Cookie: domain=.example.com)，這樣二級，三級域名不用做任何的處理也能讀取到這個cookie。
第二種：
還有一些請求是像iframe窗口和window.open方法打開新窗口的時候，如果打開的這個窗口與父窗口不同源的時候，是不能與父窗口進行通訊。也就是對于完全不同源的網(wǎng)站，想解決這種跨域的窗口通訊問題，該怎么辦。
目前其實也是有三種解決方案的。
1.第一種是利用片段標識符，我們知道片段標識符指的就是URL的#后面的部分，改變這個片段標識符是不會重新刷新的，這樣父窗口就可以把信息寫入子窗口的片段標識符中。
2.第二種是利用window.name屬性，因為我們知道這個屬性最大的特點就是無論是否同源，只要在同一個窗口，前一個頁面設(shè)置了這個屬性，后面一個網(wǎng)頁也能讀取到它。它的優(yōu)點就是window.name容量很大，可以存儲非常常的字符串，缺點是要監(jiān)聽子窗口的window.name，這樣就影響了網(wǎng)頁的性能。
3.當然，我們H5為了解決這個問題，就引入了一個全新的跨文本通信的API.這個API為window對象新增了一個window.postMessage方法，允許倆窗口通信，無論這倆個窗口是否同源。這樣就也可以獲取LocalStorage和cookie了。
但是在有src屬性的標簽是不受同源策略的影響的，比如我們的img、script、ifame、link標簽。
jsonp
原理：
jsonp的優(yōu)點是：它不像XMLHttpRequest對象實現(xiàn)的Ajax請求那樣受到同源策略的限制，同時兼容性也更好，在更加古老的瀏覽器中都可以運行，不需要XMLHttpRequest或者ActiveX的支持，并且在請求完畢之后可以通過一個回調(diào)函數(shù)callback的方式回傳結(jié)果。
同時它也有一些缺點，首先它只支持get請求而不支持post等其他類型的HTTP請求，另外它只支持跨域HTTP請求這種情況，不能解決不同域的倆個頁面之間如何進行JavaScript調(diào)用的問題。
http狀態(tài)碼
http狀態(tài)碼由三位數(shù)字組成，第一位表示的是一個大狀態(tài)，后面兩個數(shù)字表示該大狀態(tài)的一個子狀態(tài)。
比如200就是請求成功，3開頭的表示重定向，4開頭的狀態(tài)碼客戶端出錯，5開頭的是服務(wù)器錯誤。
又比如常見的404資源未找到，403被請求的頁面禁止訪問等等。
互聯(lián)網(wǎng)的分層
實體鏈接網(wǎng)絡(luò)傳輸應(yīng)用
TCP協(xié)議
首先，TCP協(xié)議是以太網(wǎng)協(xié)議和IP協(xié)議的上層協(xié)議，也是應(yīng)用層的下層協(xié)議。
它的作用呢，簡單來說就是為了保證數(shù)據(jù)通信的完整性和可靠性，防止丟包。
參考阮一峰互聯(lián)網(wǎng)協(xié)議入門
其他協(xié)議
以太網(wǎng)協(xié)議
最底層的以太網(wǎng)協(xié)議（Ethernet）規(guī)定了電子信號如何組成數(shù)據(jù)包（packet），解決了子網(wǎng)內(nèi)部的點對點通信。
IP協(xié)議
IP協(xié)議的作用有兩個：
1·為每臺計算機分配IP地址，
2.確定哪些地址是在同一個子網(wǎng)絡(luò)。
解決的就是多個局域網(wǎng)互相通信，比如路由器就是基于IP協(xié)議的。
ARP協(xié)議
IP數(shù)據(jù)包是放在以太網(wǎng)數(shù)據(jù)包中的，所以我們必須知道倆個地址，一個是對方的IP地址，一個是MAC地址。
獲取MAC地址的倆種情況：
1、倆臺主機不在一個子網(wǎng)絡(luò)，將數(shù)據(jù)包交給“網(wǎng)關(guān)”，讓“網(wǎng)關(guān)”處理。
2、倆臺主機在一個子網(wǎng)絡(luò)中，利用==ARP協(xié)議==獲取同一個子網(wǎng)絡(luò)中的主機的MAC地址。
###3.AJAX
ajax的原理簡單來說其實就是通過==XMLHttpRequest==對象來向服務(wù)器發(fā)異步請求，從服務(wù)器獲取數(shù)據(jù)。而這個XMLHttpRequest就是我們Ajax的核心機制，它是在ie5中首先引入的，是一種支持異步請求的技術(shù)，簡單來說，就是javascript能夠及時向服務(wù)器請求和處理響應(yīng)，而不阻塞用戶，達到無刷新的效果。
大致流程就是創(chuàng)建一個==XMLHttpRequest對象==，然后調(diào)用這個對象的==open==方法來指向請求的類型，有g(shù)et方式或者是post方式來連接服務(wù)器，接著可以使用==send==來發(fā)送請求，同時可以用==onreadystatuschange==來監(jiān)聽請求的狀態(tài)。若是成功獲取到數(shù)據(jù)的話再用回調(diào)函數(shù)拿到數(shù)據(jù)。
可以看到Ajax的==優(yōu)點==也很明顯，最大的一點就是頁面無刷新，給用戶的體驗非常好，同時也可以使用異步的方式，提高響應(yīng)能力，減輕了服務(wù)器的負擔(dān)，進一步促進頁面和數(shù)據(jù)的分離。
但同時它也是有一些缺點的，而且這些缺點也是它先天產(chǎn)生的。首先它干掉了==back==按鈕，即對瀏覽器后退機制的破壞。還有一點就是==安全問題==，可能開發(fā)者在不經(jīng)意間就暴露了比以前更多的數(shù)據(jù)和服務(wù)器邏輯。另外他它對==搜索引擎==的支持也比較弱
首先，我們知道同源策略規(guī)定了，Ajax的請求只能發(fā)給同源的網(wǎng)址，否則就會報錯。
除了設(shè)置==代理服務(wù)器==，還有三種方式來規(guī)避這種限制。
第一種也就是我們常用的方法==jsonp==,它最大的優(yōu)點就是簡單適用，老式的瀏覽器也全都能用。
第二種呢就是可以利用==WebSocket==這種通信協(xié)議。
第三種可以使用==CORS==,它比jsonp要更強大一些，因為jsonp是只支持GET請求的，而它卻支持所有類型的HTTP請求。但是我們知道CORS他的兼容性不是很好，一些老牌瀏覽器像IE10以下的它就不支持。
####1.ajax的事件？
ajaxComplete(callback)
ajaxError(callback)
ajaxSend(callback)
ajaxStart(callback)
ajaxStop(callback)
ajaxSuccess(callback)
4.模板引擎
是最早期為了取代ajax把數(shù)據(jù)拿來然后渲染到頁面上，在性能上也沒有做任何的優(yōu)化，經(jīng)常看到的模板引擎比如==Mustache、Underscore、 Templates==等等。但隨著像React Angular 以及最近比較火的Vue的出現(xiàn)，可以說完全的被取代了。而且這些前端框架做到的不僅僅是它能做到的，同時在性能上優(yōu)化了很多，功能上也更加的強大。
5. 常用的webapk打包工具
老點的有phoneGap
app和webapp區(qū)別
app是可以點擊安裝的，是基于操作系統(tǒng)，webapp是基于瀏覽器的
6.閉包
我們知道，在我們JS中是沒有塊級作用域的，js文件與js文件之間定義的變量也是可以互相訪問的，這樣在我們開發(fā)中就很容易造成命名沖突從而引起我們程序的一系列異常。
? 但要知道如果在函數(shù)內(nèi)部定義一個變量的話這個變量就只有在其內(nèi)部能訪問到也就是我們常說的局部變量了，那么OK，如果我們用一個外部的函數(shù)將一個內(nèi)部函數(shù)包裹起來，那么現(xiàn)在如果在外部函數(shù)里定義一個變量，這個變量就只有這個外部函數(shù)和它里面的內(nèi)部函數(shù)能夠訪問到。
主要是為了設(shè)計私有的方法和變量。它的優(yōu)點也很明顯，可以避免全局變量的污染，缺點是閉包會常駐內(nèi)存，會增大內(nèi)存使用量，使用不當很容易造成內(nèi)存泄露。
? 所以它主要是有這三個特性：
1.函數(shù)嵌套函數(shù) 2.函數(shù)內(nèi)部可以引用外部的參數(shù)和變量 3.參數(shù)和變量不會被垃圾回收機制回收
7. 繼承？
首先我們js里是沒有真正像其它面向?qū)ο笳Z言一樣概念的繼承，js中的繼承都是模擬繼承。
像我們常見的繼承方式有：
第一種，可以采用構(gòu)造函數(shù)綁定的方式，就是使用apply、call來借調(diào)要繼承的那個父對象的構(gòu)造函數(shù)。
第二種，可以利用prototype屬性來實現(xiàn)繼承，可以將要繼承的那個子構(gòu)造函數(shù)的原型對象指向父構(gòu)造函數(shù)創(chuàng)建出來的實例對象。但是這種方式會導(dǎo)致繼承鏈的紊亂。
第三種，第三種方式是第二種方式的一種改進吧，就是直接將要繼承的那個子構(gòu)造函數(shù)的原型對象指向父構(gòu)造函數(shù)
的原型對象。它相比于第二種效率要高點，但是由于現(xiàn)在倆個構(gòu)造函數(shù)的原型對象指向的都是同一個，所以如果更改任意一個原型對象中的屬性的話都會映射到另一個函數(shù)中。
所以可以有第四種改進方案，利用一個空對象來作為中介。創(chuàng)建一個空對象然后這空對象中是一個函數(shù)，我們將這個空對象的原型對象指向父構(gòu)造函數(shù)的原型對象，接下來用這個空的構(gòu)造函數(shù)創(chuàng)建一個實例對象，再將子構(gòu)造函數(shù)的原型對象指向它，實現(xiàn)了繼承。
第五種我們可以采用拷貝的方式來實現(xiàn)繼承。拷貝的話又分深拷貝和淺拷貝。
深拷貝淺拷貝
- 深淺拷貝概念
我們知道js中數(shù)據(jù)類型是分為基本數(shù)據(jù)類型和引用數(shù)據(jù)類型，這些基本數(shù)據(jù)類型是可以直接訪問的，它們是存放在我們棧內(nèi)存中，而我們的引用數(shù)據(jù)就是那些存儲在堆內(nèi)存中的對象。
所以其實當我們進行將一個對象賦值給另一個對象的過程實際只是將整個對象的地址傳遞給了，此時它們倆指向的都是同一個地址，這樣如果我改變其中一個對象中的屬性的話是也會影響另一個對象的，這也就是我們說的淺拷貝。
那么深拷貝呢，它就是解決了上面那種情況，是將父對象拷貝到子對象中，而且倆者的內(nèi)存和以后的操作都互不干擾。
- 有哪些是淺拷貝？
- 有哪些深拷貝的方法？
該方法實際就是通過typeof判斷以下對象中屬性的類型是不是object，如果是的話則在進行接下去的判斷。(這里就直接借鑒jsliang小伙的寫法了)
當然你也可以采用JSON.parse(JSON.stringify(obj))的方式來進行拷貝，但是這種拷貝是存在兼容問題的，因為我們只這倆種方法是只有在ie8以上才支持的，并且它不支持拷貝值為function、symbol和undefined的屬性。
8. null
console.log(Number(null));console.log(parseInt(null));console.log(typeof null);console.log(Number(undefined));console.log(parseInt(undefined));console.log(typeof undefined);demo.html:14 0demo.html:15 NaNdemo.html:16 objectdemo.html:18 NaNdemo.html:19 NaNdemo.html:20 undefined 復(fù)制代碼9.TypeScript和JavaScript的對比
TypeScript 與JavaScript兩者的特性對比，主要表現(xiàn)為以下幾點：
- TypeScript是一個應(yīng)用程序級的JavaScript開發(fā)語言。（這也表示TypeScript比較牛逼，可以開發(fā)大型應(yīng)用，或者說更適合開發(fā)大型應(yīng)用）
- TypeScript是JavaScript的超集，可以編譯成純JavaScript。這個和我們CSS離的Less或者Sass是很像的，我們用更好的代碼編寫方式來進行編寫，最后還是有好生成原生的JavaScript語言。
- TypeScript跨瀏覽器、跨操作系統(tǒng)、跨主機、且開源。由于最后他編譯成了JavaScript所以只要能運行JS的地方，都可以運行我們寫的程序，設(shè)置在node.js里。
- TypeScript始于JavaScript，終于JavaScript。遵循JavaScript的語法和語義，所以對于我們前端從業(yè)者來說，學(xué)習(xí)前來得心應(yīng)手，并沒有太大的難度。
- TypeScript可以重用JavaScript代碼，調(diào)用流行的JavaScript庫。
- TypeScript提供了類、模塊和接口，更易于構(gòu)建組件和維護。
10. Async/await相比于Promise好在哪里？
- 寫法上更加簡潔干凈，對于代碼量的節(jié)省很明顯。避免了嵌套，提升可讀性。
- 錯誤處理更強大,Async/await使得處理同步+異步錯誤成為現(xiàn)實。
- 可以允許中間值。
- Promise鏈中返回的錯誤棧沒有給出錯誤發(fā)生的位置的線索,而Async/await中的錯誤棧會指向錯誤所在的函數(shù)。這樣在我們分析生產(chǎn)環(huán)境的錯誤日志時非常有用。
- Async/await能夠使得代碼調(diào)試更簡單。2個理由使得調(diào)試Promise變得非常痛苦:1.不能在返回表達式的箭頭函數(shù)中設(shè)置斷點；2.在.then代碼塊中設(shè)置斷點，點擊下一步調(diào)試器不會跳到下一個.then而是直接跳過異步代碼。
想了解具體區(qū)別的小伙可以移步：async/await比promise好的原因
4. Canvas
1.canvas基本寫法
var drawing = document.querySelector('#drawing'); if (drawing.getContext) {var context = drawing.getContext("2d"); context.beginPath(); } 復(fù)制代碼2. canvas繪制鐘表
var drawing = document.querySelector('#drawing');if (drawing.getContext) {var context = drawing.getContext("2d");// 繪制外圓context.beginPath();context.arc(100, 100, 99, 0, 2 * Math.PI, false);// 內(nèi)圓context.moveTo(194, 100);context.arc(100, 100, 94, 0, 2 * Math.PI, false);// 變換原點context.translate(100, 100);// 旋轉(zhuǎn)表針context.rotate(1);context.moveTo(0, 0);context.lineTo(0, -85);context.moveTo(0, 0);context.lineTo(-65, 0);context.stroke();} 復(fù)制代碼3. canvas獲取像素點
let imageData = context.getImageData(0, 0, image.width, image.height); 復(fù)制代碼5. vue
1.生命周期
- 什么是vue的生命周期
我理解的生命周期是，每一個vue實例被創(chuàng)建之前都要經(jīng)過一系列 的初始化過程。比如需要設(shè)置數(shù)據(jù)監(jiān)聽，編譯模板，還有數(shù)據(jù)變化時更新DOM等等。同時在這個過程中，就會運行一些就叫做生命周期鉤子的函數(shù)，用來給予用戶在一些特定的場景下添加代碼。
- Vue的生命周期分為哪幾種？
主要分為以下8種：
創(chuàng)建前/后：在 beforeCreated 階段，Vue 實例的掛載元素 $el 和數(shù)據(jù)對象 data 以及事件還未初始化。在 created 階段，Vue 實例的數(shù)據(jù)對象 data 以及方法的運算有了，$el 還沒有。
載入前/后：在 beforeMount 階段，render 函數(shù)首次被調(diào)用，Vue 實例的 $el 和 data 都初始化了，但還是掛載在虛擬的 DOM 節(jié)點上。在 mounted 階段，Vue 實例掛載到實際的 DOM 操作完成，一般在該過程進行 Ajax 交互。
更新前/后：在數(shù)據(jù)更新之前調(diào)用，即發(fā)生在虛擬 DOM 重新渲染和打補丁之前，調(diào)用 beforeUpdate。在虛擬 DOM 重新渲染和打補丁之后，會觸發(fā) updated 方法。
銷毀前/后：在執(zhí)行實例銷毀之前調(diào)用 beforeDestory，此時實例仍然可以調(diào)用。在執(zhí)行 destroy 方法后，對 data 的改變不會再觸發(fā)周期函數(shù)，說明此時 Vue 實例已經(jīng)解除了事件監(jiān)聽以及和 DOM 的綁定，但是 DOM 結(jié)構(gòu)依然存在。
- 第一次頁面加載會觸發(fā) Vue 哪幾個鉤子？
會觸發(fā) 4 個生命鉤子：創(chuàng)建前/創(chuàng)建后、掛載前/掛載后。
2.slot
我對slot的理解就是當組件中的某一項需要單獨定義的時候，那么就應(yīng)該使用slot。
比如說在一個模態(tài)框中，付款成功和付款失敗，這個模態(tài)框僅僅是差了一個字或者是圖片不一樣，
那么這個時候利用slot就會是不錯的選擇。
單個的slot都沒有問題，如果組件中想要使用多個slot的時候就應(yīng)該使用具名slot。具名slot呢也就是使用一個特殊的特性name來進一步配置如何分發(fā)內(nèi)容。我們可以在組件中定義slot的時候給一個name屬性，然后在調(diào)用組件時候在匹配內(nèi)容內(nèi)用slot屬性來匹配對應(yīng)的name。同時它也允許有一個匿名的slot,也就是默認插槽，它是作為找不到匹配內(nèi)容片段的備用插槽，若是沒有這個默認插槽的話，那么這些內(nèi)容片段就會被拋棄。
3.vue中的雙向數(shù)據(jù)綁定原理
vue是通過數(shù)據(jù)劫持的方式來進行雙向數(shù)據(jù)綁定的，最核心的方法就是ES5的Object.defineProperty()方法，使用getter/setter監(jiān)測對數(shù)據(jù)的操作。
它的操作呢大致可以分為三步：
第一步：利用get實現(xiàn)一個數(shù)據(jù)監(jiān)聽器，對數(shù)據(jù)對象的所有屬性進行監(jiān)聽。
第二步：實現(xiàn)一個指令解析器，對所有元素的節(jié)點指令進行解析。
第三步：實現(xiàn)一個觀察者，能夠訂閱并收到每個屬性變化的通知，然后執(zhí)行相應(yīng)的回調(diào)函數(shù)，從而更新視圖。
4. Angular和vue的區(qū)別
相同點：
- 都支持指令：內(nèi)置指令和自定義指令。
- 都支持過濾器：內(nèi)置過濾器和自定義過濾器。
- 都支持雙向數(shù)據(jù)綁定。
- 都不支持低端瀏覽器。
不同點：
-
實現(xiàn)雙向數(shù)據(jù)綁定的原理不同：Angular實現(xiàn)雙向數(shù)據(jù)綁定主要是依賴于臟值監(jiān)測，也就是存儲舊數(shù)值，然后在檢測時把當前時刻的新值和舊值進行比對來達到是否更新視圖的效果；而在vue中，采用數(shù)據(jù)劫持結(jié)合發(fā)布者-訂閱者模式的方式，通過Object.defineProperty()來劫持各個屬性的setter，getter，在數(shù)據(jù)變動時發(fā)布消息給訂閱者，觸發(fā)相應(yīng)的監(jiān)聽回調(diào)。
-
vue需要提供一個el對象進行實例化，后續(xù)的所有作用范圍也是在el對象之下，而angular而是整個html頁面。一個頁面，可以有多個vue實例，而angular好像不是這么玩的。
后語
知識產(chǎn)權(quán)無價，支持原創(chuàng)。
內(nèi)容也會同步更新自我的個人博客:lindaidai.wang
參考文章：
jsliang 的 2019 面試準備
async/await比promise好的原因
vue面試題總匯
轉(zhuǎn)載于:https://juejin.im/post/5c923e916fb9a071082f4c6d
總結(jié)
以上是生活随笔為你收集整理的LinDaiDai的 2019 面试准备的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 达芬奇SP型机器人二度获准FDA，可用于
- 下一篇： PXE+Kickstart实现无人值守批