前端面試題（一）

前端面試題（一）

博客說明

文章所涉及的資料來自互聯網整理和個人總結，意在于個人學習和經驗匯總，如有什么地方侵權，請聯系本人洗掉，謝謝！

1、請你講一下js監聽物件屬性的改變具體是怎么實作的，它們各自有什么特點？

• 在ES5中可以通過Object.defineProperty來實作已有屬性的監聽

Object.defineProperty(user,'name',{ set：function(key,value){ } })

缺點：如果id不在user物件中，則不能監聽id的變化

• 在ES6中可以通過Proxy來實作

var  user = new Proxy({}，{ set：function(target,key,value,receiver){ } })

這樣即使有屬性在user中不存在，通過user.id來定義也同樣可以這樣監聽這個屬性的變化

2、如果要畫一條0.5px的線，你會怎么去實作呢？講講你的方法

• 先畫1px的，然后transform:scaleY(0.5)
• 利用hr標簽，設定元素屬性為0.5px

3、淺談CSS3中的content-box和border-box的區別

• content-box是符合w3c標準的盒模型，也是默認的盒模型
• border-box是不符合w3c標準的盒模型，也稱為怪異盒子

他們二者有什么區別呢？

content-box是先根據設定的樣式確定元素content的寬高，有border和padding的情況下再額外增加盒子的寬高，內容寬高不受影響，設定多少就是多少，

border-box是先根據設定的樣式固定盒子的寬高，如果有border和padding的情況下，再根據盒子的寬高減去border或者padding，內容的寬高會受到影響，會被減去border或者padding，

4、display:none;visibility:hidden;和opacity:0;的區別

• display:none;

• visibility:hidden;

• opacity:0;

它們都可以讓元素隱藏掉，但是它們之間還是有區別的

• display:none;隱藏后不占空間，而另外兩個雖然隱藏了元素，但是還是占據著空間

• 而transition對于display:none;和visibility:hidden;是無效的，但是對于opacity:0;是有效的

5、狀態碼301，302，304不同

301表示永久重定向（301 moved permanently），表示請求的資源分配了新url，以后應使用新url，

302表示臨時性重定向（302 found），請求的資源臨時分配了新url，本次請求暫且使用新url，302與301的區別是，302表示臨時性重定向，重定向的url還有可能還會改變，

303 表示請求的資源路徑發生改變，使用GET方法請求新url，她與302的功能一樣，但是明確指出使用GET方法請求新url，

304 not modified

客戶端發送附帶條件的請求時（if-matched,if-modified-since,if-none-match,if-range,if-unmodified-since任一個）服務器端允許請求訪問資源，但因發生請求未滿足條件的情況后，直接回傳304Modified（服務器端資源未改變，可直接使用客戶端未過期的快取），

304狀態碼回傳時，不包含任何回應的主體部分，304雖然被劃分在3xx類別中，但是和重定向沒有關系，

6、Vue的v-model的原理，Vue實體是怎么拿到data屬性的

在vue中v-model這個語法糖能夠很方便的實作表單和資料之間的系結，v-model實作的原理封裝了一些邏輯例如：在input上系結Message,并通過input事件獲取當前事件的target.value,并賦值給message，
使用v-model的組件會自動監聽Input事件，并把這個input事件所攜帶的值，傳遞給v-model所系結的屬性，這樣組件內部的值就給到了父組件中

7、CSS影片，transition和animation，哪一個性能更好

其主要區別在于：transition需要觸發一個事件才會隨著時間改變其CSS屬性；animation在不需要觸發任何事件的情況下，也可以顯式的隨時間變化來改變元素CSS屬性，達到一種影片的效果

transition是使一個或多個屬性值產生過渡效果，animation則作用于元素本身，強調流程與控制，是關鍵幀影片的范疇，簡單的效果可以用animation，復雜的或想要更自由地掌控應該選擇transition，我認為transition會更占資源一些，

8、Vue-router 中hash模式和history模式的區別

hash模式url里面永遠帶著#號，我們在開發當中默認使用這個模式，那么什么時候要用history模式呢？如果用戶考慮url的規范那么就需要使用history模式，因為history模式沒有#號，是個正常的url適合推廣宣傳，當然其功能也有區別，比如我們在開發app的時候有分享頁面，那么這個分享出去的頁面就是用vue或是react做的，咱們把這個頁面分享到第三方的app里，有的app里面url是不允許帶有#號的，所以要將#號去除那么就要使用history模式，但是使用history模式還有一個問題就是，在訪問二級頁面的時候，做重繪操作，會出現404錯誤，那么就需要和后端人配合讓他配置一下apache或是nginx的url重定向，重定向到首頁路由上，

hash原理

比如在用超鏈接制作錨點跳轉的時候，就會發現，url后面跟了"#id"，hash值就是url中從"#"號開始到結束的部分，hash值變化瀏覽器不會重新發起請求，但是會觸發window.hashChange事件，假如我們在hashChange事件中獲取當前的hash值，并根據hash值來修改頁面內容，則達到了前端路由的目的，

history原理

history模式原理可以這樣理解，首先我們要改造我們的超鏈接，給每個超鏈接增加onclick方法，阻止默認的超鏈接跳轉，改用history.pushState或history.replaceState來更改瀏覽器中的url，并修改頁面內容，由于通過history的api調整，并不會向后端發起請求，所以也就達到了前端路由的目的

Koa和Express的區別，以及Koa中間鍵的原理

9、用JS實作一個sleep函式

//方法一
function sleep1(ms,callback){
  setTimeout(callback,ms)
}
sleep1(1000,()=>{
  console.log(1000)
})

//方法二
function sleep2(ms){
  return new Promise(function(resolve,reject){
    setTimeout(resolve,ms)
  })
}
sleep2(2000).then(()=>{
  console.log(2000)
})

//方法三
function sleep3(ms){
  return new Promise(function(resolve,reject){
    setTimeout(resolve,ms)
  })
}
async function init(
	await sleep3(3000)
)
init().then(()=>{
  console.log(3000)
})

10、bootstrap實作回應式布局原理

Bootstrap的官方解釋：Bootstrap提供了一套回應式、移動設備優先的流式柵格系統，隨著螢屏或視口（viewport）尺寸的增加，系統會自動分為做12列，

11、瀏覽器的重排和重繪是什么意思？重繪的觸發條件？如何避免重繪重排？

當 DOM 元素的屬性發生變化 (如 color) 時, 瀏覽器會通知 render 重新描繪相應的元素, 此程序稱為 repaint，

如果該次變化涉及元素布局 (如 width), 瀏覽器則拋棄原有屬性, 重新計算并把結果傳遞給 render 以重新描繪頁面元素, 此程序稱為 reflow

減少重繪重排

1.分離讀寫操作

2.樣式集中改變

可以添加一個類，樣式都在類中改變

3.可以使用absolute脫離檔案流，

4.使用 display:none ，不使用 visibility，也不要改變 它的 z-index

5.能用css3實作的就用css3實作，

跨域問題

JSONP

Hash

postMessage(HTML5)

WebSocket

CORS(支持跨域通信的Ajax)

CORS背后的思想，就是使用自定義的HTTP頭部讓瀏覽器與服務器進行溝通，從而決定請求或回應是應該成功，還是應該失敗，

同源策略

如何產生閉包

當一個嵌套的內部(子)函式參考了嵌套的外部(父)函式的變數(函式)時，產生閉包

HTTP 2.0 給我們帶了很多新的特性，簡單總結一下：

• 二進制分幀
• 多路復用
• 首部壓縮
• 流量控制
• 請求優先級
• 服務器推送

感謝

淺述函式防抖和函式節流

以及勤勞的自己，個人博客，GitHub

標籤：其他

上一篇：python軟體下載安裝教程詳解！

下一篇：Python爬蟲練習：爬取天氣資料實時資料并保存（附原始碼）