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

B_Cornelius發表於2019-02-28
前端面試

1、為什麼要使用css預編譯
2、cookie,sessionStorage和localStorage的區別
3、如何實現瀏覽器內多個標籤頁之間的通訊? (阿里)
4、websocket如何相容低瀏覽器
5、如何居中div
6、css3新特性
7、用css穿件一個三角形的原理
8、經常li之間有看不見的間隔，造成的原因
9、為什麼要清除浮動
10、元素浮動後,display變成了什麼
11、如果需要手動寫動畫，你認為最小時間間隔是多久，為什麼？（阿里）
12、cookie隔離
13、陣列的隨機排序
14、什麼是window物件，什麼是document物件
15、如何判斷一個物件是否屬於某個類
16、new操作符幹了什麼
17、Javascript中，有一個函式，執行時物件查詢時，永遠不會去查詢原型，這個函式是？
18、如何檢測瀏覽器版本
19、什麼是polyfill
20、Object.is()
20、前端效能優化
21、http狀態碼常用的

為什麼要使用css預編譯

1、css無法遞迴式定義
2、解決複用性不夠
3、可以緩解瀏覽器相容造成的冗餘

cookie,sessionStorage和localStorage的區別

cookie用來在瀏覽器和伺服器中傳遞並且總量很小
sessionStorage和localStorage用於儲存本地資料，儲存較大
localStorage是永續性儲存

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

websocket、shareWorker
也可以呼叫localstorge、cookies等本地儲存方式
將有專門的教程講解websocket

websocket如何相容低瀏覽器

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

如何居中div

1、水平居中,給定寬度

div{
width: 200px
margin:0 auto
}

2、絕對定位居中

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

}

3、水平居中

確定寬高
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

陣列的隨機排序

方法一、
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操作符幹了什麼

1、建立一個空物件，並且this引用該物件，同時還繼承了該函式的物件
2、屬性和方法都加入到this引用的物件中
3、新建立的物件由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

前端效能優化

1、減少http請求次數：雪碧圖、js,css原始碼壓縮、圖片大小控制合適，cdn託管
2、使用ajax代替整體重新整理頁面
3、減少dom操作
4、設定樣式時更多的時候使用className而不是style
5、少用全域性變數、快取dom節點查詢結果
6、避免使用css expression
7、圖片懶載入（有專門的文章講解圖片懶載入）

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如果…

相關文章