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

CSS篇：

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

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

3、介紹一下CSS的盒子模型
通過css3新增的屬性 box-sizing: content-box | border-box分別設(shè)置盒模型為標準模型（content-box）和IE模型（border-box）詳細介紹
兩種盒模型：標準W3C盒模型、IE盒模型。
區(qū)別對比：(注意藍色背景區(qū)域大小)
標準盒模型元素寬度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.標簽選擇器（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)重情況下樣式定義最近者為準;
!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、在父元素后面額外添加標簽

<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負值法(需知道子元素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新標簽的瀏覽器兼容問題？如何區(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)生負面影響的元素：frame，frameset，noframes
支持HTML5新標簽：
IE8/IE7/IE6支持通過document.createElement方法產(chǎn)生的標簽
可以利用這一特性讓這些瀏覽器支持HTML5新標簽
瀏覽器支持新標簽后，還需要添加標簽?zāi)J的樣式
當然也可以直接使用成熟的框架、比如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)連接時，更新用戶機器上的緩存文件
原理：HTML5的離線存儲是基于一個新建的.appcache文件的緩存機制(不是存儲技術(shù))，通過這個文件上的解析清單離線存儲資源，這些資源就會像cookie一樣被存儲了下來。之后當網(wǎng)絡(luò)在處于離線狀態(tài)下時，瀏覽器會通過被離線存儲的數(shù)據(jù)進行頁面展示

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

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

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

cookie是網(wǎng)站為了標示用戶身份而儲存在用戶本地終端（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大得多，可以達到5M或更大
有期時間：
localStorage 存儲持久數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失除非主動刪除數(shù)據(jù)
sessionStorage 數(shù)據(jù)在當前瀏覽器窗口關(guān)閉后自動刪除
cookie 設(shè)置的cookie過期時間之前一直有效，即使窗口或瀏覽器關(guān)閉

5.iframe有那些缺點？

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

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

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

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

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

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

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

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

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

JavaScript篇：

1.閉包理解

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

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

3.http狀態(tài)碼有哪幾種？常用的狀態(tài)碼表示什么？
200(“OK”)
一切正常。實體主體中的文檔（若存在的話）是某資源的表示。
400(“Bad Request”)
客戶端方面的問題。實體主題中的文檔（若存在的話）是一個錯誤消息。希望客戶端能夠理解此錯誤消息，并改正問題。
500(“Internal Server Error”)
服務(wù)期方面的問題。實體主體中的文檔（如果存在的話）是一個錯誤消息。該錯誤消息通常無濟于事，因為客戶端無法修復(fù)服務(wù)器方面的問題。
301(“Moved Permanently”)
當客戶端觸發(fā)的動作引起了資源URI的變化時發(fā)送此響應(yīng)代碼。另外，當客戶端向一個資源的舊URI發(fā)送請求時，也發(fā)送此響應(yīng)代碼。
404(“Not Found”) 和410(“Gone”)
當客戶端所請求的URI不對應(yīng)于任何資源時，發(fā)送此響應(yīng)代碼。404用于服務(wù)器端不知道客戶端要請求哪個資源的情況；410用于服務(wù)器端知道客戶端所請求的資源曾經(jīng)存在，但現(xiàn)在已經(jīng)不存在了的情況。
409(“Conflict”)
當客戶端試圖執(zhí)行一個”會導(dǎo)致一個或多個資源處于不一致狀態(tài)“的操作時，發(fā)送此響應(yīng)代碼。
跨域的理解？常見的跨域處理有哪一些？
瀏覽器為隔離潛在的惡意文件，限制了從同一個源加載的文檔或腳本如何與來自另一個源的資源進行交互，所以，是瀏覽器的基于安全考慮的同源策略導(dǎo)致的跨域
解決一：
JSONP，script的src屬性不受限制，但是只能進行g(shù)et請求，
jQuery將jsonp封裝進了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)航是很有必要的，可以讓蜘蛛進入頁面之后不至于迷路，有條件的話，最好能單獨加個Sitemap頁面，將網(wǎng)站結(jié)構(gòu)一目了然地展示在蜘蛛面前，更有利于蜘蛛抓取信息。
集中網(wǎng)站權(quán)重。由于蜘蛛分配到每個頁面的權(quán)重是一定的，這些權(quán)重也將平均分配到每個a鏈接上，那么為了集中網(wǎng)站權(quán)重，可以使用”rel=nofollow”屬性，它告訴蜘蛛無需抓取目標頁,可以將權(quán)重分給其他的鏈接。
文本強調(diào)標簽的使用。當著重強調(diào)某個關(guān)鍵詞需要加粗表示，選用strong標簽比使用b標簽要更有強調(diào)作用。
a標簽的title屬性的使用。在不影響頁面功能的情況下，可以盡量給a標簽加上title屬性，可以更有利于蜘蛛抓取信息。
圖片alt屬性的使用。這個屬性可以在圖片加載不出來的時候顯示在頁面上相關(guān)的文字信息，作用同上。
H標簽的使用。主要是H1標簽的使用需要特別注意，因為它自帶權(quán)重，一個頁面有且最多只能有一個H1標簽，放在該頁面最重要的標題上面，如首頁的logo上可以加H1標簽。

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

因為深拷貝拷貝的是索引

深拷貝：當拷貝完一個對象的時候，其中一個對象的數(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進行解析 -> 得到AST（抽象語法樹）->
plugin用babel-traverse對AST樹進行遍歷轉(zhuǎn)譯
得到新的AST樹->用babel-generator通過AST樹生成ES5代碼

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

最新評論