前端面試問題二（持續更新）

一、爲何要使用css預編譯
二、cookie,sessionStorage和localStorage的區別
三、如何實現瀏覽器內多個標籤頁之間的通訊? (阿里)
四、websocket如何兼容低瀏覽器
五、如何居中div
六、css3新特性
七、用css穿件一個三角形的原理
八、常常li之間有看不見的間隔，形成的緣由
九、爲何要清除浮動
十、元素浮動後,display變成了什麼
十一、若是須要手動寫動畫，你認爲最小時間間隔是多久，爲何？（阿里）
十二、cookie隔離
1三、數組的隨機排序
1四、什麼是window對象，什麼是document對象
1五、如何判斷一個對象是否屬於某個類
1六、new操做符幹了什麼
1七、Javascript中，有一個函數，執行時對象查找時，永遠不會去查找原型，這個函數是？
1八、如何檢測瀏覽器版本
1九、什麼是polyfill
20、Object.is()
20、前端性能優化
2一、http狀態碼經常使用的

爲何要使用css預編譯

一、css沒法遞歸式定義
二、解決複用性不夠
三、能夠緩解瀏覽器兼容形成的冗餘

cookie,sessionStorage和localStorage的區別

cookie用來在瀏覽器和服務器中傳遞而且總量很小
sessionStorage和localStorage用於存儲本地數據，存儲較大
localStorage是持久性存儲

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

websocket、shareWorker
也能夠調用localstorge、cookies等本地存儲方式
將有專門的教程講解websocket

websocket如何兼容低瀏覽器

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

如何居中div

一、水平居中,給定寬度

div{
width: 200px
margin:0 auto
}

二、絕對定位居中

div {
position: absolute;
width: 300px;
height: 300px;
margin: auto;
top: 0;
left: 0;
bottom: 0;
right: 0;複製代碼

}

三、水平居中

肯定寬高
div {
position: relative;
width: 500px;
height: 300px;
top: 50%;
left: 50%;
margin: -150px 0 0 -250px;複製代碼

}
不知道寬高

div {
position: relative;
width: 500px;
height: 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;
    }複製代碼

css3新特性

文字特效：text-shadow
線性漸變：gradient
旋轉：transform
圓角：border-radius
新增選擇器:not(:input)
沒寫全，可是夠用了

用css穿件一個三角形的原理

把上、左、右三條邊隱藏掉

#demo {
    width: 0;
    height: 0;
    border-width: 20px;
    border-style: solid;
    border-color: transparent transparent red transparent;
}複製代碼

常常li之間有看不見的間隔，形成的緣由

回車和空格會被應用樣式,解決方法：把字符大小設置成font-size:0

爲何要清除浮動

清除浮動是爲了清除浮動元素產生的影響，浮動的元素高度將會塌陷，後面的佈局也就不能實現，這兒講一種方法
&:after

元素浮動後,display變成了什麼

display: inline-block複製代碼

若是須要手動寫動畫，你認爲最小時間間隔是多久，爲何？

多數顯示屏默認頻率是60hz，因此理論上最小間隔1/60*1000ms = 16.7ms複製代碼

cookie隔離

cookie有域的限制,跨期提交請求時，不會攜帶cookie

數組的隨機排序

方法1、
var arr = [1,2,3,4,5,7,8,9]
function randSort(arr) {
for (var i = 0, len = arr.length; i < len; i++) {
var rand = parseInt(Math.random()len)
var temp = arr[rand]
arr[rand] = arr[i]
arr[i] = temp
}
return arr
}
方法二
var arr = [1,2,3,4,5,7,8,9]
function randSort2(arr) {
var mixedArray = []
while(arr.length > 0) {
var randomIndex = parseInt(Math.random()arr.length)
mixedArray.push(arr[randomIndex])
arr.splice(randomIndex, 1)
}
return mixedArray
}
方法三
var arr = [1,2,3,4,5,7,8,9]
arr.sort(function () {
return Math.random() - 0.5
})

什麼是window對象，什麼是document對象

window是瀏覽器打開的窗口，document是Document對象的一個只讀引用

[「1」, 「2」, 「3」].map(parseInt) 答案是多少？
[1, NaN, NaN]

如何判斷一個對象是否屬於某個類

return a instance of Person

new操做符幹了什麼

一、建立一個空對象，而且this引用該對象，同時還繼承了該函數的對象
二、屬性和方法都加入到this引用的對象中
三、新建立的對象由this所引用，最後隱式返回this

Javascript中，有一個函數，執行時對象查找時，永遠不會去查找原型，這個函數是？

Oject.hasOwnProperty(name),返回布爾值，不會去尋找原型鏈上的屬性

如何檢測瀏覽器版本

功能檢測、userAgent特徵檢測：navigator.userAgent

什麼是polyfill

polyfill 是「在舊版瀏覽器上覆制標準 API 的 JavaScript 補充」,能夠動態地加載 JavaScript 代碼或庫，在不支持這些標準 API 的瀏覽器中模擬它們。

Object.is()

Object.is在處理-0和+0是返回false,可是Object.is(NaN, NaN)返回true

前端性能優化

一、減小http請求次數：雪碧圖、js,css源碼壓縮、圖片大小控制合適，cdn託管
二、使用ajax代替總體刷新頁面
三、減小dom操做
四、設置樣式時更多的時候使用className而不是style
五、少用全局變量、緩存dom節點查找結果
六、避免使用css expression
七、圖片懶加載（有專門的文章講解圖片懶加載）

http狀態碼經常使用的

100 Continue 繼續，通常在發送post請求時，已發送了http header以後服務端將返回此信息，表示確認，以後發送具體參數信息
200 OK 正常返回信息
201 Created 請求成功而且服務器建立了新的資源
202 Accepted 服務器已接受請求，但還沒有處理
301 Moved Permanently 請求的網頁已永久移動到新位置。
302 Found 臨時性重定向。
303 See Other 臨時性重定向，且老是使用 GET 請求新的 URI。
304 Not Modified 自從上次請求後，請求的網頁未修改過。

400 Bad Request 服務器沒法理解請求的格式，客戶端不該當嘗試再次使用相同的內容發起請求。
401 Unauthorized 請求未受權。
403 Forbidden 禁止訪問。
404 Not Found 找不到如何與 URI 相匹配的資源。

500 Internal Server Error 最多見的服務器端錯誤。
503 Service Unavailable 服務器端暫時沒法處理請求（多是過載或維護）。

寫技術文檔是真的累，點個star以資獎勵
個人githubgithub.com/skychenbo若是…