2020年前端工程師面試題（一）

一、簡述一下HTML5新特性

1）增長了section footer header nav等自定義語義化標籤

2）增長了表單輸入框新time color number tel search等特性

3）提供了視頻音頻標籤

4）添加了canvas繪畫功能

5）支持展現SVG矢量圖形

6）使用getCurrentPosition()方法獲取當前終端地理位置

7）提供drag拖拽，任何元素都能被拖拽

8）webStorage是HTML5最流行的緩存之一

sessionStorage緩存是基於瀏覽器會話的緩存，關閉瀏覽器就會清除緩存

localStroage緩存沒有時間限制，只能手動清除

9）提供WebSocket全雙工通訊機制

客戶端與服務器雙方握手採用http協議，默認80、443端口

沒有同源限制，任何客戶端能夠與服務器通訊，經常使用於臨時社交通訊，例如聊天室

10）WebWork

WebWork基本原理是在當前JavaScript主線程中，加載一個js文件從而建立一個新線程

目的爲了起到互相不阻塞運行其餘腳本文件

WebWork線程與主線程之間能夠實現數據傳輸

var webWorker =new Worker("webWorker.js");
webWorker.postMessage("主線程發送的數據");
webWorker.onmessage = function(event){
  console.log(event)
}

二、講述一下js的循環有哪些方式

// 傳統的for循環方式
for(var i = 0;i < 20;i++){
  console.log(i);// 輸出索引
}
// ES6for方式，用於循環json對象
var arr = [{b:2},{c:3}];
for(var i in arr){
    console.log(i);// 輸出索引
  console.log(arr[i]);// 輸出對象值1,2,3
}
// ES5foreach循環獲取key、value，但過程當中不能跳出循環
var array = ['1','2','3'];
array.forEach((currentValue, index, arr)=>{
  console.log(currentValue); // 輸出1,2,3
  console.log(index); // 輸出索引
  console.log(arr); // 輸出arr數組自己
})

三、瀏覽器及瀏覽器內核

IE瀏覽器：Trident內核

Chrome谷歌：以前一直都是和蘋果共用Webkit內核，如今的谷歌瀏覽器是Blink內核，Blink是在webkit基礎上衍生而來的

Firefox火狐：Gecko內核

Safari蘋果瀏覽器：Webkit內核

Opera歐朋瀏覽器：由Presto內核，轉成Webkit內核，再轉成Blink內核

360、搜狗、遨遊、QQ等一系列瀏覽器基本上爲Trident（兼容模式）+Webkit（高速模式）雙核瀏覽器

四、不一樣瀏覽器有不一樣兼容問題，如何解決？

兼容性問題太多，此處列舉3處

1）默認內外邊距的不一樣，設置通配符選擇器

*{margin:0;padding:0;}

2）在IE六、7中設置float浮動再設置margin後，會出現雙邊距現象，如何解決？

.dom{display:inline;}

3）margin邊距重疊問題

上下兩div之間分別設置5px、10px

量元素之間的間距形成重疊爲10px

解決：兩元素最好給上面的元素設置margin-bottom

或者將元素再套一層div，再設置margin

五、HTML網頁的造成過程

瀏覽器先解析html源代碼，生成一個DOM樹，再解析css代碼，計算出樣式數據，二者合爲渲染樹，再由瀏覽器將渲染樹繪製到瀏覽器頁面中

六、jQuery異步接口請求代碼

get是從服務器上獲取數據，post是向服務器傳送數據

get參數經過地址欄傳遞，post放在request body中

get請求只能進行encodeURI編碼，而post支持多種編碼方式

get傳送的數據量較小，不能大於2KB。post傳送的數據量較大，通常被默認爲不受限制

get參數類型只接受ASCII字符串類型，而post沒有限制

get安全性很是低，可直接暴露在地址欄中，post安全性較高

get在瀏覽器回退時是無害的，而post會再次提交請求

get請求會被瀏覽器主動cache，而post不會，除非手動設置

$.ajax({
  type: "POST",
  url: "http://xxxxxx.com/requestUrl",
  data: {
    name:$("#name").val(),
  },  dataType: "json",
  success: function(result,status,xhr){
    // 輸出請求成功返回結果
    console.log(result);
  },
  error:function(xhr,status,error){
    // 輸出請求失敗回調  
}})

七、長度有哪些單位

px

%百分比

em

rem

vw、vh

八、盒模型理解

盒模型包括：content內容體、padding內邊距、border邊框、margin外邊距

九、清除浮動方式

父級元素添加overflow:hidden;

子級元素添加<div style="clear:both;"></div>

十、圖片的title和alt有什麼區別？

alt是圖片加載失敗時，在網頁上顯示的替代文字

title是鼠標放在圖片上顯示的提示文字

十一、絕對定位和相對定位的區別？

position:absolut

絕對定位：當前元素是相對於最近定位的祖先元素進行定位

position:relative

相對定位：當前元素是相對於該元素的初始位置進行移動

十二、display:inline-block怎樣不顯示間隙？

margin設置負值

或者父級元素設置font-size:0

1三、垂直居中有哪些方法？

單行文本垂直居中能夠把hight和ilne-hight設置相同的高度值

塊級元素能夠使用子絕父相+指定高度解決，例如：

父元素設置position:relative; 子元素設置hight :10px;position:absolute;top:50%;margin-top:-5px;

或者使用子絕父相+transform，不用指定高度也能夠解決，例如：

父元素設置position:relative;子元素設置position:absolute;top:50%;transform:translate (0 -50%);

1四、水平居中有哪些方法？

行內元素能夠設置父元素text-align:center;

元素寬度固定時，也能夠設置元素的左右margin值爲auto

子元素爲絕對定位時，能夠設置父元素相對定位，子元素設置left:0;right:0;margin:auto;

1五、content屬性有什麼做用？能夠怎麼應用？

content屬性用在before和after僞類元素裏，用來生成插入內容；常見的應用是做用在僞類元素裏清除浮動

1六、CSS優先級怎麼肯定？

優先級關係：

!important>內聯樣式 > ID 選擇器 > 類選擇器 = 屬性選擇器 = 僞類選擇器 > 標籤選擇器 = 僞元素選擇器

存在多個優先級時，相加計算比較；優先級相同時，顯示後寫的樣式；