摘要：還有天，年便過(guò)去了，回頭看看，這段時(shí)間自己有出去面試過(guò)，也遇到了很多面試題，以下是我的一些總結(jié)，這篇關(guān)于面試的文章，我也會(huì)不定時(shí)的更新。然而，如果前一個(gè)定時(shí)器尚未執(zhí)行，其實(shí)就是將其替換為一個(gè)新的定時(shí)器。

還有7天，2018年便過(guò)去了，回頭看看，這段時(shí)間自己有出去面試過(guò)，也遇到了很多面試題，以下是我的一些總結(jié)，這篇關(guān)于面試的文章，我也會(huì)不定時(shí)的更新。

1.說(shuō)一下你對(duì)HTML語(yǔ)義化的理解？

語(yǔ)義化就是根據(jù)內(nèi)容的結(jié)構(gòu)化（內(nèi)容語(yǔ)義化），選擇合適的標(biāo)簽（代碼語(yǔ)義化）便于開(kāi)發(fā)者閱讀和寫(xiě)出更優(yōu)雅的代碼的同時(shí)讓瀏覽器的爬蟲(chóng)和機(jī)器很好地解析。

2.瀏覽器的內(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的分支）]

3.說(shuō)一說(shuō)對(duì)HTML5的離線儲(chǔ)存的理解

離線緩存是Html5新特性之一，簡(jiǎn)單理解就是第一次加載后將數(shù)據(jù)緩存，在沒(méi)有清除緩存前提下，下一次沒(méi)有網(wǎng)絡(luò)也
可以加載，用在靜態(tài)數(shù)據(jù)的網(wǎng)頁(yè)或游戲比較好用。當(dāng)然，Html5新的特性都不是所有瀏覽器都能支持的，離線緩存也
一樣。反正IE9（包括）及IE9以下的瀏覽器目前是不支持的。如果用在移動(dòng)端，應(yīng)該都能支持。檢測(cè)是否支持離線
緩存也是比較簡(jiǎn)單的。

詳細(xì)的使用請(qǐng)參考：
https://www.cnblogs.com/wuzhiquan/p/4844258.html

4.請(qǐng)描述一下 cookies，sessionStorage 和 localStorage 的區(qū)別

儲(chǔ)存大小：
cookie數(shù)據(jù)大小不能超過(guò)4k。
sessionStorage和localStorage也有大小的限制，但是比cookie大，可以達(dá)到5M或更大

有期時(shí)間：

localStorage：存儲(chǔ)持久數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失除非主動(dòng)刪除數(shù)據(jù)；
sessionStorage：數(shù)據(jù)在當(dāng)前瀏覽器窗口關(guān)閉后自動(dòng)刪除。
cookie：設(shè)置的cookie過(guò)期時(shí)間之前一直有效，即使窗口或?yàn)g覽器關(guān)閉，可以設(shè)置其過(guò)期時(shí)間

存儲(chǔ)位置：
localStorage和sessionStorage都保存在客戶端，不與服務(wù)器進(jìn)行交互通信。
cookie數(shù)據(jù)始終在同源的http請(qǐng)求中攜帶（即使不需要），記會(huì)在瀏覽器和服務(wù)器間來(lái)回傳遞。

5.請(qǐng)描述一個(gè)網(wǎng)頁(yè)從開(kāi)始請(qǐng)求道最終顯示的完整過(guò)程？

一個(gè)網(wǎng)頁(yè)從請(qǐng)求到最終顯示的完整過(guò)程一般可以分為如下7個(gè)步驟：
（1）在瀏覽器中輸入網(wǎng)址；
（2）發(fā)送至DNS服務(wù)器并獲得域名對(duì)應(yīng)的WEB服務(wù)器IP地址；
（3）與WEB服務(wù)器建立TCP連接；
（4）瀏覽器向WEB服務(wù)器的IP地址發(fā)送相應(yīng)的HTTP請(qǐng)求；
（5）WEB服務(wù)器響應(yīng)請(qǐng)求并返回指定URL的數(shù)據(jù)，或錯(cuò)誤信息，如果設(shè)定重定向，則重定向到新的URL地址；
（6）瀏覽器下載數(shù)據(jù)后解析HTML源文件，解析的過(guò)程中實(shí)現(xiàn)對(duì)頁(yè)面的排版，解析完成后在瀏覽器中顯示基礎(chǔ)頁(yè)面；
（7）分析頁(yè)面中的超鏈接并顯示在當(dāng)前頁(yè)面，重復(fù)以上過(guò)程直至無(wú)超鏈接需要發(fā)送，完成全部數(shù)據(jù)顯示。

6.webSocket 如何兼容低瀏覽器？

Adobe Flash Socket
ActiveX HTMLFile（IE）
基于 multipart 編碼發(fā)送 XHR
基于長(zhǎng)輪詢的 XHR

1.怎樣讓一個(gè)div垂直居中

第一：定位之后根據(jù)div的寬高計(jì)算margin;
第二:flex布局
第三:transform: translate(-50%, -50%) （定位之后）;

2.css定義的權(quán)重

!important > 行間樣式 > id > class|屬性|偽類 > 標(biāo)簽|偽元素 > 通配符

3.清除浮動(dòng)的方法有哪些

第一：給父元素高度；
第二：讓父元素一起浮動(dòng)起來(lái)
第三：clear:both;
第四：定義偽類:after

4.使用css實(shí)現(xiàn)一個(gè)持續(xù)的動(dòng)畫(huà)效果

animation:mymove 5s infinite;
@keyframes mymove {
from {top:0px;}
to {top:200px;}
}

5.右邊寬度固定，左邊自適應(yīng)

第一:display:flex布局；
第二：浮動(dòng)；
第三：右邊定位，左邊給一個(gè)往右的padding；

6.對(duì)于css的hack理解

可見(jiàn)該文章:https://www.cnblogs.com/mumble/p/4576489.html

7.隱藏一個(gè)元素的方法有哪些

visibility: hidden; 這個(gè)屬性只是簡(jiǎn)單的隱藏某個(gè)元素，但是元素占用的空間任然存在
opacity: 0; CSS3屬性，設(shè)置0可以使一個(gè)元素完全透明
position: absolute; 設(shè)置一個(gè)很大的 left 負(fù)值定位，使元素定位在可見(jiàn)區(qū)域之外
display: none; 元素會(huì)變得不可見(jiàn)，并且不會(huì)再占用文檔的空間。
transform: scale(0); 將一個(gè)元素設(shè)置為縮放無(wú)限小，元素將不可見(jiàn)，元素原來(lái)所在的位置將被保留

1.對(duì)于數(shù)組的操作方法有哪些

pop() 刪除一個(gè)數(shù)組中的最后的一個(gè)元素；
shift() 刪除數(shù)組的第一個(gè)元素；
unshift() 方法可向數(shù)組的開(kāi)頭添加一個(gè)或更多元素，并返回新的長(zhǎng)度。
push() 向數(shù)組的末尾添加元素；
reverse() 顛倒數(shù)組中元素的順序；
splice() 添加/刪除數(shù)組元素；
sort() 數(shù)組排序；
copyWithin() 指定位置的成員復(fù)制到其他位置；
fill() 填充數(shù)組；
join() 數(shù)組轉(zhuǎn)字符串；
slice() 淺拷貝數(shù)組的元素；
indexOf() 查找數(shù)組是否存在某個(gè)元素，返回下標(biāo)；
includes() 查找數(shù)組是否包含某個(gè)元素 返回布爾；
every 檢測(cè)數(shù)組所有元素是否都符合判斷條件；
some 數(shù)組中的是否有滿足判斷條件的元素；
filter 過(guò)濾原始數(shù)組，返回新數(shù)組；
map 對(duì)數(shù)組中的每個(gè)元素進(jìn)行處理，返回新的數(shù)組；
reduce 為數(shù)組提供累加器，合并為一個(gè)值；

更多的方法和方法對(duì)于的參數(shù)用法等，可以自己再去了解一下。

2.數(shù)組去重的方法

[...new Set([2,"12",2,12,1,2,1,6,12,13,6])]
或者使用for循環(huán)

3.數(shù)據(jù)類型

Boolean
Null
Undefined
Number
String
Symbol :（ECMAScript 6 新定義 ，Symbol 生成一個(gè)全局唯一、表示獨(dú)一無(wú)二的值） 
Object :（Array、Function、Object）

4.你對(duì)重繪、重排的理解？

重繪：不重新布局，只是元素的外觀改變;
重排：重排是更明顯的一種改變，可以理解為渲染樹(shù)需要重新計(jì)算，重排一定會(huì)引起重繪。


頁(yè)面渲染初始化（這個(gè)無(wú)法避免）
DOM元素的幾何屬性變化：元素尺寸（寬或高）改變。
DOM樹(shù)的結(jié)構(gòu)變化：例如節(jié)點(diǎn)的增減（添加或者刪除可見(jiàn)的DOM元素），移動(dòng)，元素位置改變等。
改變?cè)氐囊恍邮剑{(diào)整瀏覽器窗口大小，滾動(dòng)條出現(xiàn)等等

以上都會(huì)讓頁(yè)面發(fā)生重排

5.說(shuō)說(shuō)你要用到的es6和es7

對(duì)于這個(gè)問(wèn)題，建議大家能阮一峰老師的書(shū)
http://es6.ruanyifeng.com/#docs/module

6.函數(shù)節(jié)流是什么，有什么優(yōu)點(diǎn)

目的：
從字面上就可以理解，函數(shù)節(jié)流就是用來(lái)節(jié)流函數(shù)從而一定程度上優(yōu)化性能的。例如，DOM 操作比起非DOM 交互需
要更多的內(nèi)存和CPU 時(shí)間。連續(xù)嘗試進(jìn)行過(guò)多的DOM 相關(guān)操作可能會(huì)導(dǎo)致瀏覽器掛起，有時(shí)候甚至?xí)罎ⅰＳ?在IE 中使用onresize 事件處理程序的時(shí)候容易發(fā)生，當(dāng)調(diào)整瀏覽器大小的時(shí)候，該事件會(huì)連續(xù)觸發(fā)。在oresize 
事件處理程序內(nèi)部如果嘗試進(jìn)行DOM 操作，其高頻率的更改可能會(huì)讓瀏覽器崩潰。又例如，我們常見(jiàn)的
一個(gè)搜索的功能，我們一般是綁定keyup事件，每按下一次鍵盤(pán)就搜索一次。但是我們的目的主要是每輸入一些內(nèi)容
搜索一次而已。為了解決這些問(wèn)題，就可以使用定時(shí)器對(duì)函數(shù)進(jìn)行節(jié)流。

函數(shù)節(jié)流的原理：
某些代碼不可以在沒(méi)有間斷的情況連續(xù)重復(fù)執(zhí)行。第一次調(diào)用函數(shù)，創(chuàng)建一個(gè)定時(shí)器，在指定的時(shí)間間隔之后運(yùn)行
代碼。當(dāng)?shù)诙握{(diào)用該函數(shù)時(shí)，它會(huì)清除前一次的定時(shí)器并設(shè)置另一個(gè)。如果前一個(gè)定時(shí)器已經(jīng)執(zhí)行過(guò)了，這個(gè)操
作就沒(méi)有任何意義。然而，如果前一個(gè)定時(shí)器尚未執(zhí)行，其實(shí)就是將其替換為一個(gè)新的定時(shí)器。目的是只有在執(zhí)行
函數(shù)的請(qǐng)求停止了一段時(shí)間之后才執(zhí)行。
http://www.cnblogs.com/LuckyW...

7.你知道哪些HTTP的狀態(tài)碼，他們分別代表什么

我們一般常見(jiàn)的就是200，304，400，401，404，405，500等，詳細(xì)可見(jiàn)如下地址
http://tool.oschina.net/commons?type=5

8.說(shuō)一說(shuō)你對(duì)閉包的理解

官方對(duì)閉包的解釋是：一個(gè)擁有許多變量和綁定了這些變量的環(huán)境的表達(dá)式（通常是一個(gè)函數(shù)），因而這些變量也
是該表達(dá)式的一部分。
太官方了，硬是繞口，我覺(jué)得閉包簡(jiǎn)單來(lái)說(shuō)就是函數(shù)套函數(shù)，有權(quán)訪問(wèn)另一個(gè)函數(shù)作用域內(nèi)變量的函數(shù)。
閉包的好處就是：
1.希望一個(gè)變量長(zhǎng)期駐扎在內(nèi)存中；
2.避免全局變量的污染。
3.私有成員的存在。
閉包的缺點(diǎn)：
1.常駐內(nèi)存，增加內(nèi)存使用量。
2.使用不當(dāng)會(huì)很容易造成內(nèi)存泄露。

9.判斷數(shù)據(jù)類型的方法有哪些

var a = [1,2,3]

1.最常見(jiàn)的判斷方法：**typeof**
alert(typeof a)   ------------> object

2.判斷已知對(duì)象類型的方法： **instanceof**
alert(a instanceof Array) ---------------> true

3.**Object.prototype.toString** 
Object.prototype.toString.call("") ; --------------->[object String]

4.**constructor**
alert(c.constructor === Array) ----------> true

5.**jquery.type()**
如果對(duì)象是undefined或null，則返回相應(yīng)的“undefined”或“null”。
jQuery.type( undefined ) === "undefined"
jQuery.type( null ) === "null"
如果對(duì)象有一個(gè)內(nèi)部的[[Class]]和一個(gè)瀏覽器的內(nèi)置對(duì)象的 [[Class]] 相同，我們返回相應(yīng)的 [[Class]] 名
字。 (有關(guān)此技術(shù)的更多細(xì)節(jié)。 )
jQuery.type( true ) === "boolean"
jQuery.type( 3 ) === "number"
jQuery.type( "test" ) === "string"
其他一切都將返回它的類型“object”。

還有很大一部分關(guān)于js的面試題，之后再繼續(xù)補(bǔ)充