前端面試題總結

時間 2019-11-12

標籤端面試題總結简体版

原文原文鏈接

一、html5的新特性？javascript

　　canvas繪畫css

　　用於媒介回放的video和audio元素html

　　本地離線存儲localStorage能夠長期存儲，而且在瀏覽器關閉以後能夠保存很長一段時間，sesstionStorage在瀏覽器關閉以後會丟失前端

　　語義化更好的標籤，如article、nav、section、footer、headerhtml5

　　表單控件calendar、date、time、emailjava

　　新的技術websock、websocketweb

二、html標籤語義化的理解？chrome

　　用正確的標籤作正確的事canvas

　　html標籤語義化可讓頁面的內容結構化，讓結構更加清晰，便於對瀏覽器、搜索引擎解析數組

　　即便在沒有css樣式的狀況下，也以一種文檔格式顯示，易於閱讀，易於SEO,易於閱讀和維護

三、html5離線存儲

　　在用戶沒有網絡鏈接的時候，能夠正常訪問站點或應用，在用戶有網絡鏈接時，更新用戶機器上的緩存文件

　　原理：html5的離線存儲是基於一個新建的.appcache文件的緩存機制（不是存儲技術），經過這個文件上的解析清單離線存儲資源，這些資源就會像cookie同樣被存儲了下來。以後當網絡處於離線狀態時，瀏覽器會經過被離線存儲的數據進行頁面展現。

　　如何使用：　

　　　3.一、頁面頭部像下面同樣加入一個manifest的屬性；

　　　3.二、在cache.manifest文件的編寫離線存儲的資源；
　　　　　　CACHE MANIFEST
　　　　　　#v0.11
　　　　　　CACHE:
　　　　　　js/app.js
　　　　　　css/style.css
　　　　　　NETWORK:
　　　　　　resourse/logo.png
　　　　　　FALLBACK:
　　　　　　/ /offline.html

　　　3.三、在離線狀態時，操做window.applicationCache進行需求實現。

瀏覽器是怎麼對HTML5的離線儲存資源進行管理和加載的呢？
在線的狀況下，瀏覽器發現html頭部有manifest屬性，它會請求manifest文件，若是是第一次訪問app，那麼瀏覽器就會根據manifest文件的內容下載相應的資源而且進行離線存儲。若是已經訪問過app而且資源已經離線存儲了，那麼瀏覽器就會使用離線的資源加載頁面，而後瀏覽器會對比新的manifest文件與舊的manifest文件，若是文件沒有發生改變，就不作任何操做，若是文件改變了，那麼就會從新下載文件中的資源並進行離線存儲。
離線的狀況下，瀏覽器就直接使用離線存儲的資源。

四、css居中

　　水平居中

div{ width: 200px; margin: 0 auto;    
}

　　讓絕對定位的div居中

div{ position: absolute; width: 500px; margin: auto; top: 0; left: 0; right: 0; bottom: 0 }

　　水平垂直居中顯示

一、 div{ position: absolute; width: 500px; height: 300px; top: 50%; left: 50%; margin: -150px 0 0 -250px;
} 二、 未知容器的寬高 div{ position:absolute; width: 500px; heigth:300px; top: 50%; left: 50%; transform: translate(-50%,-50%) }
三、利用flex佈局
.container{
　　display: flex;
　　align-items:center;//垂直居中
　　justify-content: center;//水平居中
}
.container div{
　　width: 100px;
　　height: 100px;
}

五、ie盒模型和標準盒模型

IE盒模型
box-sizing: border-box;
width: 400px;
盒子width=padding+border+content = 400px

標準盒模型
box-siziing: content-box
width: 400px;
盒子width = padding + border + 400px(content)

六、css優先級肯定

　　每一個選擇器都有權值，權值越大越優先，

　　繼承的樣式優先級低於自身指定樣式

　　！important優先級最高，js也沒法修改

　　權值相同時，靠近元素的樣式優先級高順序爲內聯樣式表（標籤內部）> 內部樣式表（當前文件中）> 外部樣式表（外部文件中）

七、請解釋一下爲何會出現浮動和何時須要清除浮動？清除浮動的方式？

浮動float最初出現的意義是爲了讓文字環繞圖片而已，可是人們發現，要讓3個塊級元素並排顯示，給他們加個float會來的比較方便，可是當給3個元素加上float以後，父元素的高度塌陷了，清除浮動是指清除子元素浮動帶來父元素高度坍塌的影響。

清除浮動的兩大方法：1.腳底插入clear:both;2.父元素BFC(ie8+)或haslayout(ie6/ie7)

在父元素的最後加一個冗餘元素併爲其設置clear:both;必要在頁面中添加不少沒有意義的冗餘元素，太麻煩，並且不符合語義化。

採用僞元素，這裏咱們使用:after。添加一個類clearfix：

使用overflow屬性，給父元素添加overflow:hidden ||auto

八、BFC

　　block formatting context 塊級格式化上下文，它是頁面中的一個獨立的渲染區域。只有Block-level box參與，它規定了內部的Block-level Box如何佈局，而且與這個區域外部絕不相干。

　　BFC佈局規則：

內部的Box會在垂直方向，一個接一個地放置。
Box垂直方向的距離由margin決定。屬於同一個BFC的兩個相鄰Box的margin會發生重疊
每一個元素的margin box的左邊，與包含塊border box的左邊相接觸(對於從左往右的格式化，不然相反)。即便存在浮動也是如此。
BFC的區域不會與float box重疊。
BFC就是頁面上的一個隔離的獨立容器，容器裏面的子元素不會影響到外面的元素。反之也如此。
計算BFC的高度時，浮動元素也參與計算

　　BFC應用

　　　解決margin疊加。兩個div的margin會疊加。好比上下兩個div，上面的div設置margin-bottom：10px，下面的div設置margin-top:10px，這個時候兩個div的間距是10px，而不是想象中的20px；若是想要兩個div的間距爲20px，能夠對其中一個div經過display:inline-block來觸發BFC，這樣兩個div就不會發生margin重疊了。

　　用於佈局；

　　用於清除浮動，對父元素設置overflow:hidden

九、如何讓chrome支持小於12px的字體

　　咱們都知道，chrome瀏覽器支持的最小字體就是12px，不管你對字體設置10px仍是8px，頁面中顯示的仍是12px，可是咱們可使用transform:scale()來對字體進行縮放從而達到目的

十、flex佈局的優點？又稱聖盃佈局

　　聖盃佈局是一種左中右佈局，左右兩欄固定寬度，中間內容欄自適應寬度，當pc端屏幕夠寬時，會呈現水平三欄佈局，當在移動端時，屏幕較小，會呈現垂直的三欄佈局；聖盃佈局的優點在於只須要寫一套代碼，就能夠同時兼容pc端和移動端。父div display: flex; flex-low: row nowrap;子div flex: 1 6 20%;order:1; 最大放大一倍，最小能夠縮小6倍，佔據父div的20%，order是子div的順序

十一、div+css佈局較table佈局的優缺點？

　　div+css佈局的符合w3c的標準，代碼結構清晰明瞭，結構、樣式和行爲分離，帶來了足夠的維護性，佈局精準，網站版面佈局修改簡單，加快了頁面的加載速度，節約站點所佔的空間和站點的流量。用只包含結構化內容的html代替嵌套的標籤，提升搜索引擎對網頁的搜索效率。

　　table佈局容易上手，能夠造成複雜的變化，簡單快速，在不一樣瀏覽器中有很好的兼容。

十二、img圖片標籤的alt和title屬性的區別

　　alt是給搜索引擎識別，在圖像沒法顯示時的替代文本；title是關於元素的註釋信息，主要是給用戶解讀

1三、漸進加強和優雅降級之間的不一樣？

　　漸進加強：針對低版本瀏覽器進行構建頁面，保證最基本的功能，而後在針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗。

　　優雅降級：一開始就構建完整的功能，而後再針對低版本的瀏覽器進行兼容。

　　區別：優雅降級是從複雜的現狀開始，並試圖減小用戶體驗的供給，而漸進加強是一個很是基礎，可以起做用的版本開始，並不斷擴充，以適應將來環境的須要。

1四、cookie和session的區別？

cookie數據存放在客戶端的瀏覽器上，session數據放在服務器上
cookie不是很安全，別人能夠分析存放在本地的cookie進行cookie欺騙
session會在必定時間內保存在服務器上，當訪問增多，會比較佔用服務器的性能，考慮減輕服務器性能方面，應當使用cookie
單個cookie保存的數據不能超過4k，不少瀏覽器如今一個站點最多保存20個cookie
將登陸信息等重要信息存儲在session，其餘信息若要保留，放在cookie中

1五、瀏覽器的cookies、sessionStorage、localStorage的區別？

　　共同點：都是保存在瀏覽器端，而且使同源的（協議、端口、主機名相同）

　　不一樣點：

- cookie數據始終在http請求中攜帶，即在客戶端和服務器端間來回傳遞，而sessionStorage和localStorage不會自動把數據發送給服務器，僅在本地保存
- 存儲大小限制不一樣。cookie數據不能超過4k，同時每次http請求都會攜帶cookie，因此cookie只適合保存很小的數據，sessionStorage和localStorage雖然也有儲存大小的限制，可是比cookie大的多，能夠達到5M或更大
- 數據有效期不一樣。sessionStorage僅在當前瀏覽器關閉以前有效；localStorage始終有效。窗口或者瀏覽器關閉以後也一直保存，所以做用持久數據。cookie只在設置過時時間以前有效，即便關閉窗口或者瀏覽器。
- 做用域不一樣。sessionStorage在不一樣的瀏覽器窗口中不共享，即便同一個頁面。localStorage在全部的同源窗口中是共享的，cookie也是。

1六、href和src的區別？

　　href表示超文本引用，用在link和a等元素上，用來創建當前元素和文檔之間的連接

　　src表示引用資源，表示替換當前元素，用在img，script，iframe上，src指向的內容會嵌入到文檔中當前標籤所在的位置

1七、在css/js代碼上線以後開發人員常常會優化性能，從用戶刷新網頁開始，一次js請求通常狀況下有哪些地方會有緩存處理？

　　dns緩存、cdn緩存、瀏覽器緩存、服務器緩存

1八、css中可讓文字在垂直和水平方向重疊的屬性是什麼？

　　垂直方向：line-height

　　水平方向：letter-spacing

1九、normalize.css和reset的css文件的異同？

　　相同點：重置樣式；保持跨瀏覽器一致性

　　不一樣點：reset經過爲幾乎全部的元素施加默認樣式，強行是的元素有相同的視覺效果，而normalize.css保持了許多瀏覽器的默認樣式，它會力求這些樣式保持一致並儘量與現代標準符合

20、html5中的link和@import引入外部css文件的區別？

link屬於html標籤，而@import是css提供的一種方式
@import有引入次數的限制，只能引入31次
當頁面加載時，link引用的css會同時被加載，而@import引入的css文件會在等待主頁面所有加載完成後纔會被加載，全部網速較慢時，可能只有頁面而沒有樣式，須要過一段時間纔會被加載出來
@import只能在IE5以上才能使用識別，而link則沒有瀏覽器版本限制
當使用javascript控制dom去改變樣式表裏面的樣式時，只能用link，dom不能控制@import

2一、doctype的做用？嚴格模式和混雜模式的區別？

　　doctype聲明文檔的類型，告訴瀏覽器該文檔的類型，讓瀏覽器知道應該用哪一個規範來解析文檔。

　　嚴格模式又稱標準模式，是指瀏覽器按照w3c標準解析代碼

　　混雜模式又稱怪異模式或兼容模式，是指瀏覽器按本身的規範解析代碼

　　HTML5 沒有 DTD ，所以也就沒有嚴格模式與混雜模式的區別，HTML5 有相對寬鬆的語法，實現時，已經儘量大的實現了向後兼容。（ HTML5 沒有嚴格和混雜之分）

2二、html和xhtml的區別

```
XHTML 元素必須被正確地嵌套
```

XHTML 元素必須被關閉，空標籤也必須被關閉，如 <br> 必須寫成 <br />

XHTML 標籤名必須用小寫字母
```
XHTML 文檔必須擁有根元素
```

XHTML 文檔要求給全部屬性賦一個值

 XHTML 要求全部的屬性必須用引號""括起來

XHTML 文檔須要把全部 < 、>、& 等特殊符號用編碼表示

```
XHTML 圖片必須有說明文字
```

XHTML 文檔中用id屬性代替name屬性

2二、前端頁面由哪三層構成？做用分別是什麼？

　　結構層、表示層、行爲層

　　html實現頁面結構，css完成頁面的表現與風格，javascript實現客戶端的功能與業務

2三、javascript的typeof返回哪些數據類型？

　　undefined、string、number、object、Function、boolean、symbol

2四、強制類型轉換和隱式轉換

　　經過String()、Number()、Boolean()函數強制轉換

　　JavaScript的數據類型分爲六種，分別爲null,undefined,boolean,string,number,object。object是引用類型，其它的五種是基本類型或者是原始類型。咱們能夠用typeof方法打印來某個是屬於哪一個類型的。不一樣類型的變量比較要先轉類型，叫作類型轉換，類型轉換也叫隱式轉換。隱式轉換一般發生在運算符加減乘除，等於，還有小於，大於等。。 console.log(10+'5')//105；console.log(10-'2')//8 number

2五、javascript中spilt()和join()的區別？

　　共同點：兩個函數一般都是對字符或者字符串的操做

　　區別：split()用於分割字符串，返回一個數組

　　　　　join()用於鏈接多個字符或字符串，返回值爲一個字符串，默認鏈接符爲逗號

2六、javascript中的pop() push() shift() unshift()？

　　push()方法能夠在數組的末尾添加一個或多個元素

　　pop()方法把數組中的最後一個元素刪除

　　shift()方法把數組中的第一個元素刪除

　　unshift()方法在數組的前端添加一個或多個元素

2七、javascript中事件綁定和普通事件的區別？

　　普通事件中的onclick是DOM0級事件只支持單個事件，會被其餘onclick事件覆蓋；而事件綁定中的addEventListener是DOM2級事件，能夠添加多個事件而不會被覆蓋。

未完待續...........