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