本內(nèi)容收集的面試題適用于初級、中級、中高級所用，均為本坑多年跳槽面試經(jīng)驗總結(jié)，實用性超強(qiáng)已實際幫助多人，但之前均為口述，經(jīng)過最近多位坑友要求下特做此撰寫此真經(jīng)，當(dāng)然若有看不爽或者想補(bǔ)充者歡迎來撩哈！

CSS篇：

1、CSS3的新特性
實現(xiàn)圓角（border-radius）
陰影（box-shadow）
文字加特效（text-shadow）
線性漸變（gradient）
旋轉(zhuǎn)（transform）
媒體查詢，多欄布局

2、CSS中 link 和@import 的區(qū)別
link屬于HTML標(biāo)簽，而@import是CSS提供的;
頁面被加載的時，link會同時被加載，而@import引用的CSS會等到頁面被加載完再加載;
import只在IE5以上才能識別，而link是HTML標(biāo)簽，無兼容問題;
link方式的樣式的權(quán)重 高于@import的權(quán)重.

3、介紹一下CSS的盒子模型
通過css3新增的屬性 box-sizing: content-box | border-box分別設(shè)置盒模型為標(biāo)準(zhǔn)模型（content-box）和IE模型（border-box）詳細(xì)介紹
兩種盒模型：標(biāo)準(zhǔn)W3C盒模型、IE盒模型。
區(qū)別對比：(注意藍(lán)色背景區(qū)域大小)
標(biāo)準(zhǔn)盒模型元素寬度width=content=100px，高度計算相同
IE模型元素寬度width=content + 2 x padding + 2 x border = 70px + 2 x 10px + 2 x 5px = 100px。

4、CSS 選擇符有哪些？哪些屬性可以繼承？優(yōu)先級算法如何計算？CSS3新增偽類有那些？
選擇符
1.id選擇器（ # myid）
2.類選擇器（.myclassname）
3.標(biāo)簽選擇器（div, h1, p）
4.相鄰選擇器（h1 + p）
5.子選擇器（ul > li）
6.后代選擇器（li a）
7.通配符選擇器（ * ）
8.屬性選擇器（a[rel = “external”]）
9.偽類選擇器（a: hover, li:nth-child）

繼承

可繼承的樣式： font-size font-family color, text-indent;
不可繼承的樣式：border padding margin width height;
新增偽類
p:first-of-type 選擇屬于其父元素的首個
元素。
p:last-of-type 選擇屬于其父元素的最后

元素。
p:only-of-type 選擇屬于其父元素唯一的

元素。
p:only-child 選擇屬于其父元素的唯一子元素的每個

元素。
p:nth-child(2) 選擇屬于其父元素的第二個子元素的每個

元素。
:enabled :disabled 控制表單控件的禁用狀態(tài)。
:checked 單選框或復(fù)選框被選中。
優(yōu)先級算法規(guī)則:優(yōu)先級就近原則，同權(quán)重情況下樣式定義最近者為準(zhǔn);
!important > id > class > tag
important 比 內(nèi)聯(lián)優(yōu)先級高,但內(nèi)聯(lián)比 id 要高

5、為什么要清除浮動？如何清除？
引起的問題：
（1）父元素的高度無法被撐開，影響與父元素同級的元素
（2）與浮動元素同級的非浮動元素會跟隨其后
（3）若非第一個元素浮動，則該元素之前的元素也需要浮動，否則會影響頁面顯示的結(jié)構(gòu)

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

.son {
        clear: left | right | both | auto
    }

2、在父元素后面額外添加標(biāo)簽

<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;
}
 

6、實現(xiàn)垂直居中的幾種方法

<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負(fù)值法(需知道子元素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新標(biāo)簽的瀏覽器兼容問題？如何區(qū)分 HTML 和 HTML5？

HTML5 現(xiàn)在已經(jīng)不是 SGML 的子集，主要是關(guān)于圖像，位置，存儲，多任務(wù)等功能的增加
繪畫 canvas
用于媒介回放的 video 和 audio 元素
本地離線存儲 localStorage 長期存儲數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失
sessionStorage 的數(shù)據(jù)在瀏覽器關(guān)閉后自動刪除
語意化更好的內(nèi)容元素，比如 article、footer、header、nav、section
表單控件，calendar、date、time、email、url、search
新的技術(shù)webworker, websocket, Geolocation
移除的元素：
純表現(xiàn)的元素：basefont，big，center，font, s，strike，tt，u
對可用性產(chǎn)生負(fù)面影響的元素：frame，frameset，noframes
支持HTML5新標(biāo)簽：
IE8/IE7/IE6支持通過document.createElement方法產(chǎn)生的標(biāo)簽
可以利用這一特性讓這些瀏覽器支持HTML5新標(biāo)簽
瀏覽器支持新標(biāo)簽后，還需要添加標(biāo)簽?zāi)J(rèn)的樣式
當(dāng)然也可以直接使用成熟的框架、比如html5shim

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

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

在用戶沒有與因特網(wǎng)連接時，可以正常訪問站點或應(yīng)用，在用戶與因特網(wǎng)連接時，更新用戶機(jī)器上的緩存文件
原理：HTML5的離線存儲是基于一個新建的.appcache文件的緩存機(jī)制(不是存儲技術(shù))，通過這個文件上的解析清單離線存儲資源，這些資源就會像cookie一樣被存儲了下來。之后當(dāng)網(wǎng)絡(luò)在處于離線狀態(tài)下時，瀏覽器會通過被離線存儲的數(shù)據(jù)進(jìn)行頁面展示

3.瀏覽器是怎么對HTML5的離線儲存資源進(jìn)行管理和加載的呢？

在線的情況下，瀏覽器發(fā)現(xiàn)html頭部有manifest屬性，它會請求manifest文件，如果是第一次訪問app，那么瀏覽器就會根據(jù)manifest文件的內(nèi)容下載相應(yīng)的資源并且進(jìn)行離線存儲。如果已經(jīng)訪問過app并且資源已經(jīng)離線存儲了，那么瀏覽器就會使用離線的資源加載頁面，然后瀏覽器會對比新的manifest文件與舊的manifest文件，如果文件沒有發(fā)生改變，就不做任何操作，如果文件改變了，那么就會重新下載文件中的資源并進(jìn)行離線存儲。
離線的情況下，瀏覽器就直接使用離線存儲的資源。

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

cookie是網(wǎng)站為了標(biāo)示用戶身份而儲存在用戶本地終端（Client Side）上的數(shù)據(jù)（通常經(jīng)過加密）
cookie數(shù)據(jù)始終在同源的http請求中攜帶（即使不需要），記會在瀏覽器和服務(wù)器間來回傳遞
sessionStorage和localStorage不會自動把數(shù)據(jù)發(fā)給服務(wù)器，僅在本地保存
存儲大?。?br /> cookie數(shù)據(jù)大小不能超過4k
sessionStorage和localStorage雖然也有存儲大小的限制，但比cookie大得多，可以達(dá)到5M或更大
有期時間：
localStorage 存儲持久數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失除非主動刪除數(shù)據(jù)
sessionStorage 數(shù)據(jù)在當(dāng)前瀏覽器窗口關(guān)閉后自動刪除
cookie 設(shè)置的cookie過期時間之前一直有效，即使窗口或瀏覽器關(guān)閉

5.iframe有那些缺點？

iframe會阻塞主頁面的Onload事件
搜索引擎的檢索程序無法解讀這種頁面，不利于SEO
iframe和主頁面共享連接池，而瀏覽器對相同域的連接有限制，所以會影響頁面的并行加載
使用iframe之前需要考慮這兩個缺點。如果需要使用iframe，最好是通過javascript動態(tài)給iframe添加src屬性值，這樣可以繞開以上兩個問題

6.Label的作用是什么？是怎么用的？

label標(biāo)簽來定義表單控制間的關(guān)系,當(dāng)用戶選擇該標(biāo)簽時，瀏覽器會自動將焦點轉(zhuǎn)到和標(biāo)簽相關(guān)的表單控件

7.HTML5的form如何關(guān)閉自動完成功能？

給不想要提示的 form 或某個 input 設(shè)置為 autocomplete=off。

8.如何實現(xiàn)瀏覽器內(nèi)多個標(biāo)簽頁之間的通信? (阿里)

WebSocket、SharedWorker
也可以調(diào)用localstorge、cookies等本地存儲方式

9.webSocket如何兼容低瀏覽器？(阿里)
Adobe Flash Socket 、
ActiveX HTMLFile (IE) 、
基于 multipart 編碼發(fā)送 XHR 、
基于長輪詢的 XHR

10.頁面可見性（Page Visibility API） 可以有哪些用途？
通過 visibilityState 的值檢測頁面當(dāng)前是否可見，以及打開網(wǎng)頁的時間等;
在頁面被切換到其他后臺進(jìn)程的時候，自動暫停音樂或視頻的播放

JavaScript篇：

1.閉包理解

父函數(shù)將子函數(shù)作為返回值，再將子函數(shù)賦值給一個變量，所以子函數(shù)會存在于內(nèi)存中，而子函數(shù)依賴于父函數(shù)存在，所以父函數(shù)也會存在于內(nèi)存中，也就不會被垃圾回收機(jī)制回收。

 let val = 7
function createAdder() {
 function addNumbers(a, b) {
  let ret = a + b
  return ret
   }
return addNumbers
 }
 let adder = createAdder()
 let sum = adder(val, 8)
console.log('example of function returning a function: ', sum)

2.繼承鏈的理解（原型鏈）

每一個對象都有一個“proto”指針，指向?qū)嵗搶ο蟮臉?gòu)造函數(shù)的原型對象，當(dāng)該對象沒有你想拿到的屬性時，解釋器會順著指針不斷向上找。
每一個構(gòu)造你函數(shù)都有一個“prototype”屬性，指向該構(gòu)造函數(shù)的原型對象。
每一個原型對象都有一個“constructor”屬性，指向該原型對象的構(gòu)造函數(shù)。
任何對象(全局對象除外)向上查找的終點都是全局對象下的Object構(gòu)造函數(shù)的原型對象。
對像合并？數(shù)組去重過濾？
對象合并：Object.assign(form, obj)----->Object.assign(目標(biāo)對象, 被合并的對象)、$.extend、
數(shù)組去重：Set、filter、Map

3.http狀態(tài)碼有哪幾種？常用的狀態(tài)碼表示什么？
200(“OK”)
一切正常。實體主體中的文檔（若存在的話）是某資源的表示。
400(“Bad Request”)
客戶端方面的問題。實體主題中的文檔（若存在的話）是一個錯誤消息。希望客戶端能夠理解此錯誤消息，并改正問題。
500(“Internal Server Error”)
服務(wù)期方面的問題。實體主體中的文檔（如果存在的話）是一個錯誤消息。該錯誤消息通常無濟(jì)于事，因為客戶端無法修復(fù)服務(wù)器方面的問題。
301(“Moved Permanently”)
當(dāng)客戶端觸發(fā)的動作引起了資源URI的變化時發(fā)送此響應(yīng)代碼。另外，當(dāng)客戶端向一個資源的舊URI發(fā)送請求時，也發(fā)送此響應(yīng)代碼。
404(“Not Found”) 和410(“Gone”)
當(dāng)客戶端所請求的URI不對應(yīng)于任何資源時，發(fā)送此響應(yīng)代碼。404用于服務(wù)器端不知道客戶端要請求哪個資源的情況；410用于服務(wù)器端知道客戶端所請求的資源曾經(jīng)存在，但現(xiàn)在已經(jīng)不存在了的情況。
409(“Conflict”)
當(dāng)客戶端試圖執(zhí)行一個”會導(dǎo)致一個或多個資源處于不一致狀態(tài)“的操作時，發(fā)送此響應(yīng)代碼。
跨域的理解？常見的跨域處理有哪一些？
瀏覽器為隔離潛在的惡意文件，限制了從同一個源加載的文檔或腳本如何與來自另一個源的資源進(jìn)行交互，所以，是瀏覽器的基于安全考慮的同源策略導(dǎo)致的跨域
解決一：
JSONP，script的src屬性不受限制，但是只能進(jìn)行g(shù)et請求，
jQuery將jsonp封裝進(jìn)了ajax,首先jsonp只支持get請求，所以所有傳入的參數(shù)都是 http://xxx.xxx.xxx/xxx/xxx?xxx=1&&yyy=2 這種形式；其次在dataType屬性必須設(shè)置為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");  
          }  
        });
 

解決二：直接在服務(wù)器端設(shè)置跨域資源訪問 CORS（Cross-Origin Resource Sharing），設(shè)置Request Header頭中Access-Control-Allow-Origin為指定可獲取數(shù)據(jù)的域名（常用）
解決三：使用Nginx反向代理
解決四：webpack代理（只適用于本地環(huán)境）
解決五：nodejs反向代理

7.seo優(yōu)化的理解？（加分項）

提高頁面加載速度。能用css解決的不用背景圖片，背景圖片也盡量壓縮大小，可以幾個icons放在一個圖片上，使用background-position找到需要的圖片位置?？梢詼p少HTTP請求數(shù)，提高網(wǎng)頁加載速度。
結(jié)構(gòu)、表現(xiàn)和行為的分離。另外一個重要的拖慢網(wǎng)頁加載速度的原因就是將css和JS都堆積在HTML頁面上，每次看到有人直接在頁面上編寫CSS和JS我都很痛心疾首。通過外鏈的方式能大大加快網(wǎng)頁加載速度的，css文件可以放在head里，JS文件可以放置在body的最下方，在不影響閱讀的情況下再去加載JS文件。
優(yōu)化網(wǎng)站分級結(jié)構(gòu)。在每個內(nèi)頁加面包屑導(dǎo)航是很有必要的，可以讓蜘蛛進(jìn)入頁面之后不至于迷路，有條件的話，最好能單獨加個Sitemap頁面，將網(wǎng)站結(jié)構(gòu)一目了然地展示在蜘蛛面前，更有利于蜘蛛抓取信息。
集中網(wǎng)站權(quán)重。由于蜘蛛分配到每個頁面的權(quán)重是一定的，這些權(quán)重也將平均分配到每個a鏈接上，那么為了集中網(wǎng)站權(quán)重，可以使用”rel=nofollow”屬性，它告訴蜘蛛無需抓取目標(biāo)頁,可以將權(quán)重分給其他的鏈接。
文本強(qiáng)調(diào)標(biāo)簽的使用。當(dāng)著重強(qiáng)調(diào)某個關(guān)鍵詞需要加粗表示，選用strong標(biāo)簽比使用b標(biāo)簽要更有強(qiáng)調(diào)作用。
a標(biāo)簽的title屬性的使用。在不影響頁面功能的情況下，可以盡量給a標(biāo)簽加上title屬性，可以更有利于蜘蛛抓取信息。
圖片alt屬性的使用。這個屬性可以在圖片加載不出來的時候顯示在頁面上相關(guān)的文字信息，作用同上。
H標(biāo)簽的使用。主要是H1標(biāo)簽的使用需要特別注意，因為它自帶權(quán)重，一個頁面有且最多只能有一個H1標(biāo)簽，放在該頁面最重要的標(biāo)題上面，如首頁的logo上可以加H1標(biāo)簽。

8.對象深拷貝、淺拷貝
淺拷貝：當(dāng)拷貝完一個對象的時候，其中一個對象的數(shù)據(jù)發(fā)生了變化，另一個對象的數(shù)據(jù)也會發(fā)生變化。

因為深拷貝拷貝的是索引

深拷貝：當(dāng)拷貝完一個對象的時候，其中一個對象的數(shù)據(jù)發(fā)生了變化，另外一個對象的數(shù)據(jù) 不會發(fā)生變化,因為淺拷貝拷貝的是數(shù)值

9.js 異步加載的方式

a.

b.onload時的異步加載(這種方法只是把插入script的方法放在一個函數(shù)里面，然后放在window的onload方法里面執(zhí)行，這樣就解決了阻塞onload事件觸發(fā)的問題。)

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

d.

10.babel原理

ES6、7代碼輸入 -> babylon進(jìn)行解析 -> 得到AST（抽象語法樹）->
plugin用babel-traverse對AST樹進(jìn)行遍歷轉(zhuǎn)譯
得到新的AST樹->用babel-generator通過AST樹生成ES5代碼

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。