前端面試題總結

還有7天，2018年便過去了，回頭看看，這段時間本身有出去面試過，也遇到了不少面試題，如下是個人一些總結，這篇關於面試的文章，我也會不定時的更新。

HTML

1.說一下你對HTML語義化的理解？

語義化就是根據內容的結構化（內容語義化），選擇合適的標籤（代碼語義化）便於開發者閱讀和寫出更優雅的代碼的同時讓瀏覽器的爬蟲和機器很好地解析。

2.瀏覽器的內核，你知道的有哪些？

Trident內核：IE,MaxThon,TT,The World,360,搜狗瀏覽器等。[又稱MSHTML]
Gecko內核：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等。
Presto內核：Opera7及以上。      [Opera內核原爲：Presto，現爲：Blink;]
Webkit內核：Safari,Chrome等。   [ Chrome的：Blink（WebKit的分支）]

3.說一說對HTML5的離線儲存的理解

離線緩存是Html5新特性之一，簡單理解就是第一次加載後將數據緩存，在沒有清除緩存前提下，下一次沒有網絡也
能夠加載，用在靜態數據的網頁或遊戲比較好用。固然，Html5新的特性都不是全部瀏覽器都能支持的，離線緩存也
同樣。反正IE9（包括）及IE9如下的瀏覽器目前是不支持的。若是用在移動端，應該都能支持。檢測是否支持離線
緩存也是比較簡單的。

詳細的使用請參考：
https://www.cnblogs.com/wuzhiquan/p/4844258.html

4.請描述一下 cookies，sessionStorage 和 localStorage 的區別

儲存大小：
cookie數據大小不能超過4k。
sessionStorage和localStorage也有大小的限制，可是比cookie大，能夠達到5M或更大

有期時間：

localStorage：存儲持久數據，瀏覽器關閉後數據不丟失除非主動刪除數據；
sessionStorage：數據在當前瀏覽器窗口關閉後自動刪除。
cookie：設置的cookie過時時間以前一直有效，即便窗口或瀏覽器關閉，能夠設置其過時時間

存儲位置：
localStorage和sessionStorage都保存在客戶端，不與服務器進行交互通訊。
cookie數據始終在同源的http請求中攜帶（即便不須要），記會在瀏覽器和服務器間來回傳遞。

5.請描述一個網頁從開始請求道最終顯示的完整過程？

一個網頁從請求到最終顯示的完整過程通常能夠分爲以下7個步驟：
（1）在瀏覽器中輸入網址；
（2）發送至DNS服務器並得到域名對應的WEB服務器IP地址；
（3）與WEB服務器創建TCP鏈接；
（4）瀏覽器向WEB服務器的IP地址發送相應的HTTP請求；
（5）WEB服務器響應請求並返回指定URL的數據，或錯誤信息，若是設定重定向，則重定向到新的URL地址；
（6）瀏覽器下載數據後解析HTML源文件，解析的過程當中實現對頁面的排版，解析完成後在瀏覽器中顯示基礎頁面；
（7）分析頁面中的超連接並顯示在當前頁面，重複以上過程直至無超連接須要發送，完成所有數據顯示。

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

Adobe Flash Socket
ActiveX HTMLFile（IE）
基於 multipart 編碼發送 XHR
基於長輪詢的 XHR

CSS

1.怎樣讓一個div垂直居中

第一：定位以後根據div的寬高計算margin;
第二:flex佈局
第三:transform: translate(-50%, -50%) （定位以後）;

2.css定義的權重

!important > 行間樣式 > id > class|屬性|僞類 > 標籤|僞元素 > 通配符

3.清除浮動的方法有哪些

第一：給父元素高度；
第二：讓父元素一塊兒浮動起來
第三：clear:both;
第四：定義僞類:after

4.使用css實現一個持續的動畫效果

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

5.右邊寬度固定，左邊自適應

第一:display:flex佈局；
第二：浮動；
第三：右邊定位，左邊給一個往右的padding；

6.對於css的hack理解

可見該文章:https://www.cnblogs.com/mumble/p/4576489.html

7.隱藏一個元素的方法有哪些

visibility: hidden; 這個屬性只是簡單的隱藏某個元素，可是元素佔用的空間任然存在
opacity: 0; CSS3屬性，設置0可使一個元素徹底透明
position: absolute; 設置一個很大的 left 負值定位，使元素定位在可見區域以外
display: none; 元素會變得不可見，而且不會再佔用文檔的空間。
transform: scale(0); 將一個元素設置爲縮放無限小，元素將不可見，元素原來所在的位置將被保留
<div hidden="hidden"> HTML5屬性,效果和display:none;相同，但這個屬性用於記錄一個元素的狀態
height: 0; 將元素高度設爲 0 ，並消除邊框
filter: blur(0); CSS3屬性，將一個元素的模糊度設置爲0，從而使這個元素「消失」在頁面中

JS

1.對於數組的操做方法有哪些

pop() 刪除一個數組中的最後的一個元素；
shift() 刪除數組的第一個元素；
unshift() 方法可向數組的開頭添加一個或更多元素，並返回新的長度。
push() 向數組的末尾添加元素；
reverse() 顛倒數組中元素的順序；
splice() 添加/刪除數組元素；
sort() 數組排序；
copyWithin() 指定位置的成員複製到其餘位置；
fill() 填充數組；
join() 數組轉字符串；
slice() 淺拷貝數組的元素；
indexOf() 查找數組是否存在某個元素，返回下標；
includes() 查找數組是否包含某個元素 返回布爾；
every 檢測數組全部元素是否都符合判斷條件；
some 數組中的是否有知足判斷條件的元素；
filter 過濾原始數組，返回新數組；
map 對數組中的每一個元素進行處理，返回新的數組；
reduce 爲數組提供累加器，合併爲一個值；

更多的方法和方法對於的參數用法等，能夠本身再去了解一下。

2.數組去重的方法

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

3.數據類型

Boolean
Null
Undefined
Number
String
Symbol :（ECMAScript 6 新定義 ，Symbol 生成一個全局惟1、表示獨一無二的值） 
Object :（Array、Function、Object）

4.你對重繪、重排的理解？

重繪：不從新佈局，只是元素的外觀改變;
重排：重排是更明顯的一種改變，能夠理解爲渲染樹須要從新計算，重排必定會引發重繪。


頁面渲染初始化（這個沒法避免）
DOM元素的幾何屬性變化：元素尺寸（寬或高）改變。
DOM樹的結構變化：例如節點的增減（添加或者刪除可見的DOM元素），移動，元素位置改變等。
改變元素的一些樣式，調整瀏覽器窗口大小，滾動條出現等等

以上都會讓頁面發生重排

5.說說你要用到的es6和es7

對於這個問題，建議你們能阮一峯老師的書
http://es6.ruanyifeng.com/#docs/module

6.函數節流是什麼，有什麼優勢

目的：
從字面上就能夠理解，函數節流就是用來節流函數從而必定程度上優化性能的。例如，DOM 操做比起非DOM 交互需
要更多的內存和CPU 時間。連續嘗試進行過多的DOM 相關操做可能會致使瀏覽器掛起，有時候甚至會崩潰。尤
在IE 中使用onresize 事件處理程序的時候容易發生，當調整瀏覽器大小的時候，該事件會連續觸發。在oresize 
事件處理程序內部若是嘗試進行DOM 操做，其高頻率的更改可能會讓瀏覽器崩潰。又例如，咱們常見的
一個搜索的功能，咱們通常是綁定keyup事件，每按下一次鍵盤就搜索一次。可是咱們的目的主要是每輸入一些內容
搜索一次而已。爲了解決這些問題，就可使用定時器對函數進行節流。

函數節流的原理：
某些代碼不能夠在沒有間斷的狀況連續重複執行。第一次調用函數，建立一個定時器，在指定的時間間隔以後運行
代碼。當第二次調用該函數時，它會清除前一次的定時器並設置另外一個。若是前一個定時器已經執行過了，這個操
做就沒有任何意義。然而，若是前一個定時器還沒有執行，其實就是將其替換爲一個新的定時器。目的是隻有在執行
函數的請求中止了一段時間以後才執行。
http://www.cnblogs.com/LuckyW...

7.你知道哪些HTTP的狀態碼，他們分別表明什麼

咱們通常常見的就是200，304，400，401，404，405，500等，詳細可見以下地址
http://tool.oschina.net/commons?type=5

8.說一說你對閉包的理解

官方對閉包的解釋是：一個擁有許多變量和綁定了這些變量的環境的表達式（一般是一個函數），於是這些變量也
是該表達式的一部分。
太官方了，硬是繞口，我以爲閉包簡單來講就是函數套函數，有權訪問另外一個函數做用域內變量的函數。
閉包的好處就是：
1.但願一個變量長期駐紮在內存中；
2.避免全局變量的污染。
3.私有成員的存在。
閉包的缺點：
1.常駐內存，增長內存使用量。
2.使用不當會很容易形成內存泄露。

9.判斷數據類型的方法有哪些

var a = [1,2,3]

1.最多見的判斷方法：**typeof**
alert(typeof a)   ------------> object

2.判斷已知對象類型的方法： **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()**
若是對象是undefined或null，則返回相應的「undefined」或「null」。
jQuery.type( undefined ) === "undefined"
jQuery.type( null ) === "null"
若是對象有一個內部的[[Class]]和一個瀏覽器的內置對象的 [[Class]] 相同，咱們返回相應的 [[Class]] 名
字。 (有關此技術的更多細節。 )
jQuery.type( true ) === "boolean"
jQuery.type( 3 ) === "number"
jQuery.type( "test" ) === "string"
其餘一切都將返回它的類型「object」。

還有很大一部分關於js的面試題，以後再繼續補充