【原創】超實用前端面試題整理

時間 2019-11-16

標籤原創實用端面試題整理简体版

原文原文鏈接

本內容收集的面試題適用於初級、中級、中高級所用，均爲本坑多年跳槽面試經驗總結，實用性超強已實際幫助多人，但以前均爲口述，通過最近多位坑友要求下特作此撰寫此真經，固然如有看不爽或者想補充者歡迎來撩哈！
javascript

（建議：本文內容可收藏以後慢慢修煉）
css

CSS篇：
html

一、CSS3的新特性前端

實現圓角（border-radius）html5
陰影（box-shadow）java
文字加特效（text-shadow）node
線性漸變（gradient）jquery
旋轉（transform）webpack
媒體查詢，多欄佈局css3

二、CSS中 link 和@import 的區別

link屬於HTML標籤，而@import是CSS提供的;
頁面被加載的時，link會同時被加載，而@import引用的CSS會等到頁面被加載完再加載;
import只在IE5以上才能識別，而link是HTML標籤，無兼容問題;
link方式的樣式的權重高於@import的權重.

三、介紹一下CSS的盒子模型

經過css3新增的屬性 box-sizing: content-box | border-box分別設置盒模型爲標準模型（content-box）和IE模型（border-box）詳細介紹

兩種盒模型：標準W3C盒模型、IE盒模型。
區別對比：

(注意藍色背景區域大小)

標準盒模型元素寬度width=content=100px，高度計算相同

IE模型元素寬度width=content + 2 x padding + 2 x border = 70px + 2 x 10px + 2 x 5px = 100px。

四、CSS 選擇符有哪些？哪些屬性能夠繼承？優先級算法如何計算？CSS3新增僞類有那些？

選擇符

1.id選擇器（ # myid）
2.類選擇器（.myclassname）
3.標籤選擇器（div, h1, p）
4.相鄰選擇器（h1 + p）
5.子選擇器（ul > li）
6.後代選擇器（li a）
7.通配符選擇器（ * ）
8.屬性選擇器（a[rel = "external"]）
9.僞類選擇器（a: hover, li:nth-child）複製代碼

繼承

1. 可繼承的樣式： font-size font-family color, text-indent;
2. 不可繼承的樣式：border padding margin width height;複製代碼

新增僞類

p:first-of-type 選擇屬於其父元素的首個 <p> 元素。
p:last-of-type  選擇屬於其父元素的最後 <p> 元素。
p:only-of-type  選擇屬於其父元素惟一的 <p> 元素。
p:only-child    選擇屬於其父元素的惟一子元素的每一個 <p> 元素。
p:nth-child(2)  選擇屬於其父元素的第二個子元素的每一個 <p> 元素。
:enabled  :disabled 控制表單控件的禁用狀態。
:checked        單選框或複選框被選中。複製代碼

優先級算法規則:優先級就近原則，同權重狀況下樣式定義最近者爲準;

!important >  id > class > tag
important 比 內聯優先級高,但內聯比 id 要高複製代碼

五、爲何要清除浮動？如何清除？
引發的問題：
（1）父元素的高度沒法被撐開，影響與父元素同級的元素
（2）與浮動元素同級的非浮動元素會跟隨其後
（3）若非第一個元素浮動，則該元素以前的元素也須要浮動，不然會影響頁面顯示的結構

解決方法：
一、利用clear清除浮動

.son {
        clear: left | right | both | auto
    }複製代碼

二、在父元素後面額外添加標籤

<div class="parent">
    ...
    <div style="clear:both;"></div>
</div>複製代碼

三、父元素上使用after僞類

#parent:after {
    content: '';
    clear: both;
    height: 0;
    display: block;
}複製代碼

四、利用overflow清除浮動

#parent {
    overflow: auto;
    display: inline-block;
}複製代碼

六、實現垂直居中的幾種方法

<div class="parent">
    <div class="son"></div>
</div>複製代碼

margin: auto

.parent {
    width: 400px;
    height: 400px;
    position: relative;
    .son {
        position: absoulte;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
    }
}複製代碼

margin-left、margin-top負值法(需知道子元素width、height)

.parent {
    width: 400px;
    height: 400px;
    position: relative;
    .son {
        position: absolute;
        width: 100px;
        height: 160px;
        left: 50%;
        top: 50%;
        //margin-top: translateY(-50%);
        //margin-left: translateX(-50%);
        margin-top: -80px;
        margin-left: -50px;
    }
}複製代碼

flex

.parent{
    display: flex;
    align-items: center;
    justify-content: center;
}複製代碼

table-cell(未脫離文檔流)

.parent {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}複製代碼

HTML篇：

1.html5有哪些新特性、移除了那些元素？如何處理HTML5新標籤的瀏覽器兼容問題？如何區分 HTML 和 HTML5？

HTML5 如今已經不是 SGML 的子集，主要是關於圖像，位置，存儲，多任務等功能的增長

繪畫 canvas
用於媒介回放的 video 和 audio 元素
本地離線存儲 localStorage 長期存儲數據，瀏覽器關閉後數據不丟失
sessionStorage 的數據在瀏覽器關閉後自動刪除
語意化更好的內容元素，好比 article、footer、header、nav、section
表單控件，calendar、date、time、email、url、search
新的技術webworker, websocket, Geolocation

移除的元素：
純表現的元素：basefont，big，center，font, s，strike，tt，u
對可用性產生負面影響的元素：frame，frameset，noframes
支持HTML5新標籤：

IE8/IE7/IE6支持經過document.createElement方法產生的標籤
能夠利用這一特性讓這些瀏覽器支持HTML5新標籤
瀏覽器支持新標籤後，還須要添加標籤默認的樣式

固然也能夠直接使用成熟的框架、好比html5shim

<!--[if lt IE 9]>
<script> src="http://html5shim.googlecode.com /svn/trunk/html5.js"</script><![endif]-->複製代碼

如何區分HTML5：DOCTYPE聲明\新增的結構元素\功能元素

2.HTML5的離線儲存怎麼使用，工做原理能不能解釋一下？

在用戶沒有與因特網鏈接時，能夠正常訪問站點或應用，在用戶與因特網鏈接時，更新用戶機器上的緩存文件
原理：HTML5的離線存儲是基於一個新建的.appcache文件的緩存機制(不是存儲技術)，經過這個文件上的解析清單離線存儲資源，這些資源就會像cookie同樣被存儲了下來。以後當網絡在處於離線狀態下時，瀏覽器會經過被離線存儲的數據進行頁面展現
如何使用：

頁面頭部像下面同樣加入一個manifest的屬性；
在cache.manifest文件的編寫離線存儲的資源
在離線狀態時，操做window.applicationCache進行需求實現

CACHE MANIFEST
    #v0.11
    CACHE:
    js/app.js
    css/style.css
    NETWORK:
    resourse/logo.png
    FALLBACK:
    / /offline.html複製代碼

3.瀏覽器是怎麼對HTML5的離線儲存資源進行管理和加載的呢？

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

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

cookie是網站爲了標示用戶身份而儲存在用戶本地終端（Client Side）上的數據（一般通過加密）
cookie數據始終在同源的http請求中攜帶（即便不須要），記會在瀏覽器和服務器間來回傳遞
sessionStorage和localStorage不會自動把數據發給服務器，僅在本地保存
存儲大小：

cookie數據大小不能超過4k
sessionStorage和localStorage雖然也有存儲大小的限制，但比cookie大得多，能夠達到5M或更大

有期時間：

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

5.iframe有那些缺點？

iframe會阻塞主頁面的Onload事件
搜索引擎的檢索程序沒法解讀這種頁面，不利於SEO
iframe和主頁面共享鏈接池，而瀏覽器對相同域的鏈接有限制，因此會影響頁面的並行加載
使用iframe以前須要考慮這兩個缺點。若是須要使用iframe，最好是經過javascript動態給iframe添加src屬性值，這樣能夠繞開以上兩個問題

6.Label的做用是什麼？是怎麼用的？

label標籤來定義表單控制間的關係,當用戶選擇該標籤時，瀏覽器會自動將焦點轉到和標籤相關的表單控件

7.HTML5的form如何關閉自動完成功能？

給不想要提示的 form 或某個 input 設置爲 autocomplete=off。

8.如何實現瀏覽器內多個標籤頁之間的通訊? (阿里)

WebSocket、SharedWorker
也能夠調用localstorge、cookies等本地存儲方式

9.webSocket如何兼容低瀏覽器？(阿里)

Adobe Flash Socket 、
ActiveX HTMLFile (IE) 、
基於 multipart 編碼發送 XHR 、
基於長輪詢的 XHR

10.頁面可見性（Page Visibility API）能夠有哪些用途？

經過 visibilityState 的值檢測頁面當前是否可見，以及打開網頁的時間等;
在頁面被切換到其餘後臺進程的時候，自動暫停音樂或視頻的播放

JavaScript篇：

閉包理解
父函數將子函數做爲返回值，再將子函數賦值給一個變量，因此子函數會存在於內存中，而子函數依賴於父函數存在，因此父函數也會存在於內存中，也就不會被垃圾回收機制回收。

1: let val = 7
 2: function createAdder() {
 3:  function addNumbers(a, b) {
 4:   let ret = a + b
 5:   return ret
 6:  }
 7: return addNumbers
 8:}
 9:  let adder = createAdder()
 10: let sum = adder(val, 8)
 11: console.log('example of function returning a function: ', sum)複製代碼

繼承鏈的理解（原型鏈）

每個對象都有一個「_proto_」指針，指向實例化該對象的構造函數的原型對象，當該對象沒有你想拿到的屬性時，解釋器會順着指針不斷向上找。

每個構造你函數都有一個「prototype」屬性，指向該構造函數的原型對象。

每個原型對象都有一個「constructor」屬性，指向該原型對象的構造函數。

任何對象(全局對象除外)向上查找的終點都是全局對象下的Object構造函數的原型對象。

對像合併？ 數組去重過濾？

對象合併：Object.assign(form, obj)----->Object.assign(目標對象, 被合併的對象)、$.extend、複製代碼

數組去重：Set、filter、Map

http狀態碼有哪幾種？經常使用的狀態碼錶示什麼？
200("OK")
一切正常。實體主體中的文檔（若存在的話）是某資源的表示。
400("Bad Request")
客戶端方面的問題。實體主題中的文檔（若存在的話）是一個錯誤消息。但願客戶端可以理解此錯誤消息，並改正問題。
500("Internal Server Error")
服務期方面的問題。實體主體中的文檔（若是存在的話）是一個錯誤消息。該錯誤消息一般無濟於事，由於客戶端沒法修復服務器方面的問題。
301("Moved Permanently")
當客戶端觸發的動做引發了資源URI的變化時發送此響應代碼。另外，當客戶端向一個資源的舊URI發送請求時，也發送此響應代碼。
404("Not Found") 和410("Gone")
當客戶端所請求的URI不對應於任何資源時，發送此響應代碼。404用於服務器端不知道客戶端要請求哪一個資源的狀況；410用於服務器端知道客戶端所請求的資源曾經存在，但如今已經不存在了的狀況。
409("Conflict")
當客戶端試圖執行一個」會致使一個或多個資源處於不一致狀態「的操做時，發送此響應代碼。
跨域的理解？常見的跨域處理有哪一些？
瀏覽器爲隔離潛在的惡意文件，限制了從同一個源加載的文檔或腳本如何與來自另外一個源的資源進行交互，因此，是瀏覽器的基於安全考慮的同源策略致使的跨域
解決一：
JSONP，script的src屬性不受限制，可是隻能進行get請求，
jQuery將jsonp封裝進了ajax,首先jsonp只支持get請求，因此全部傳入的參數都是 http://xxx.xxx.xxx/xxx/xxx?xxx=1&&yyy=2 這種形式；其次在dataType屬性必須設置爲jsonp，jquery是支持jsonp的。
$.ajax("http://xxx.xxx.xxx/xxx/xxx", {
type: 'get',
dataType: "jsonp",
data : reqData
success: function(data) {
console.log(data);
},
error: function(xhr, type, errorThrown) {

console.log(xhr.statusText);

plus.nativeUI.toast("fail");

}

});

解決二：直接在服務器端設置跨域資源訪問 CORS（Cross-Origin Resource Sharing），設置Request Header頭中Access-Control-Allow-Origin爲指定可獲取數據的域名（經常使用）

解決三：使用Nginx反向代理

解決四：webpack代理（只適用於本地環境）

解決五：nodejs反向代理

7.seo優化的理解？（加分項）

提升頁面加載速度。能用css解決的不用背景圖片，背景圖片也儘可能壓縮大小，能夠幾個icons放在一個圖片上，使用background-position找到須要的圖片位置。能夠減小HTTP請求數，提升網頁加載速度。

結構、表現和行爲的分離。另一個重要的拖慢網頁加載速度的緣由就是將css和JS都堆積在HTML頁面上，每次看到有人直接在頁面上編寫CSS和JS我都很痛心疾首。經過外鏈的方式能大大加快網頁加載速度的，css文件能夠放在head裏，JS文件能夠放置在body的最下方，在不影響閱讀的狀況下再去加載JS文件。

優化網站分級結構。在每一個內頁加麪包屑導航是頗有必要的，可讓蜘蛛進入頁面以後不至於迷路，有條件的話，最好能單獨加個Sitemap頁面，將網站結構一目瞭然地展現在蜘蛛面前，更有利於蜘蛛抓取信息。

集中網站權重。因爲蜘蛛分配到每一個頁面的權重是必定的，這些權重也將平均分配到每一個a連接上，那麼爲了集中網站權重，可使用」rel=nofollow」屬性，它告訴蜘蛛無需抓取目標頁,能夠將權重分給其餘的連接。

文本強調標籤的使用。當着重強調某個關鍵詞須要加粗表示，選用strong標籤比使用b標籤要更有強調做用。

a標籤的title屬性的使用。在不影響頁面功能的狀況下，能夠儘可能給a標籤加上title屬性，能夠更有利於蜘蛛抓取信息。

圖片alt屬性的使用。這個屬性能夠在圖片加載不出來的時候顯示在頁面上相關的文字信息，做用同上。

H標籤的使用。主要是H1標籤的使用須要特別注意，由於它自帶權重，一個頁面有且最多隻能有一個H1標籤，放在該頁面最重要的標題上面，如首頁的logo上能夠加H1標籤。

8.對象深拷貝、淺拷貝

深拷貝：當拷貝完一個對象的時候，其中一個對象的數據發生了變化，另外一個對象的數據也會發生變化。
　　由於深拷貝拷貝的是索引
淺拷貝：當拷貝完一個對象的時候，其中一個對象的數據發生了變化，另一個對象的數據 不會發生變化。
　　由於淺拷貝拷貝的是數值複製代碼

9.js 異步加載的方式

a.標籤的async="async"屬性

b.onload時的異步加載(這種方法只是把插入script的方法放在一個函數裏面，而後放在window的onload方法裏面執行，這樣就解決了阻塞onload事件觸發的問題。)

c.$(document).ready(function() {alert("加載完成！") })

d.標籤的defer="defer"屬性

10.babel原理

ES六、7代碼輸入 -> babylon進行解析 -> 獲得AST（抽象語法樹）-> plugin用babel-traverse對AST樹進行遍歷轉譯 ->獲得新的AST樹->用babel-generator經過AST樹生成ES5代碼

-----------------------------------------------------------------------------

史上前端面試題千千萬萬，本坑只能就本身輕身經歷的面試題做提煉，本文面試題均爲大體市面上遇到的面試，須知道面試官也是有故事的程序員，因此他們在面試的時候確定潛意識裏也是偏向問本身面試過的面試題，因此不要不信任何平臺任何文章總結的面試題，可是本坑有點建議的就是若是是在找工做期間確實有必要刷面試題，可是若是有充裕時間的狀況下我建議你們仍是要進行學習，聽說不少前端大神每一年都有刷一次《javascript高級程序》的習慣啊，基本面試題都是出自這本書！

天下武功出少林，天下js面試題多愛誕至此書！

我愛你，那於小說是當成着年怕騎車，雖每盧中道好沒着年快來起得用地多那容易摔倒，來起得用地我也能夠不顧一切的騎上它，當生如路聲道面有狗追我或者你在前面等我。

The End

若是你喜歡，記得關注大坑微信公衆號【入坑互聯網】