前端面試題（三）

時間 2019-12-07

標籤端面試題简体版

原文原文鏈接

1.px 和 em 和r em 的區別？

px像素，相對長度單位；javascript

em相對長度單位，會繼承父元素的字體大小；css

rem相對長度單位，會根據節點html定義，不會受父元素的影響。html

2.如何理解css的盒子模型？

盒子模型包含內容的大小，padding，border，margin前端

css盒子模型分爲IE盒子模型和標準盒子模型；java

IE盒子模型內容的寬高包含了padding和border。node

3.css選擇符有哪些？那些屬性能夠繼承？優先級算法如何計算？css3新增僞類有哪些？

class，ID，標籤，通配符 * ，僞類，子代，後代，相鄰；jquery

font-size，font-family，color，ul，li；css3

* 0web

標籤 1ajax

class 10

ID 100

內聯樣式 1000

！imported 無窮大

計算時根據它的權重和來計算；

last-of-type ， last-child ， first-of-type ， first-child

4.push()，pop() ， shift() ， unshift()分別是什麼功能？

push() 尾部插入；

pop() 尾部刪除；

shift() 頭部刪除；

unshift() 頭部插入；

5.什麼是默認行爲？什麼是冒泡？如何禁止。

網頁元素都有默認行爲；

冒泡指事件由文檔嵌套最深的元素接受，而後逐級向外傳播；

經過stopPropagation() 方法用event對象在事件函數中調用阻止事件冒泡；

經過preventdefault() 方法用event對象在事件函數中調用阻止默認行爲；

6.請給出異步加載js方案

動態建立<script>標籤

示例：

<!DOCTYPE html>

<html>

<head>

　　　　(function () {

　　　　　　var s = document.createElement('script');

　　　　　　s.type = 'text/javascript';

　　　　　　s.src = "http://code.jquery.com/jquery-1.7.2.min.js";

　　　　　　var tmp = document.getElementsByTagName('script')[0];

　　　　　　tmp.parentNode.insertBefore(s, tmp);

　　　　})();

　　</script>

</head>

<body>

</body>

</html>

方案2：<script>標籤的async="async"屬性

async的定義和用法(是HTML5的屬性)

async 屬性規定一旦腳本可用，則會異步執行。

示例：

<script type="text/javascript" src="xxxxxxx.js" async="async"></script>

方案3：<script>標籤的defer="defer"屬性

defer 屬性規定是否對腳本執行進行延遲，直到頁面加載爲止。

有的 javascript 腳本 document.write 方法來建立當前的文檔內容，其餘腳本就不必定是了。

若是您的腳本不會改變文檔的內容，可將 defer 屬性加入到 <script> 標籤中，以便加快處理文檔的速度。由於瀏覽器知道它將可以安全地讀取文檔的剩餘部分而不用執行腳本，它將推遲對腳本的解釋，直到文檔已經顯示給用戶爲止。

示例：

<script type="text/javascript" defer="defer"> 
　　alert(document.getElementById("p1").firstChild.nodeValue); 
</script>

7.$(document).ready() 是什麼函數？爲何要用它？跟window.onload有什麼區別？嘗試實現ready方法。

$(document).ready()是jQuery中是入口函數。它能適應與全部瀏覽器；

window.onload是頁面中的全部元素加載完成後才執行；

$(document).ready()是將頁面中的DOM文檔結構繪製完成就執行。

8.怎樣添加，移除，移動，繪製，建立和查找節點。

（1）建立新節點

createDocumentFragment() //建立一個DOM片斷

createElement() //建立一個具體的元素

createTextNode() //建立一個文本節點

（2）添加、移除、替換、插入

appendChild()

removeChild()

replaceChild()

insertBefore()

（3）查找

getElementsByTagName() //經過標籤名稱

getElementsByName() //經過元素的Name屬性的值

getElementById() //經過元素Id，惟一性

9.簡述一下css sprites及其優勢。

css sprites ：精靈圖/雪碧圖

可以優化頁面性能，減小圖片的字節和http請求。

10.談談ES6 中的 let，const 聲明。

let 相似於 var， let沒法重複定義，塊級做用域外沒法讀取塊級做用域內的let聲明的變量，let沒有變量提高，沒法在聲明以前使用變量；

const是常量聲明，一旦聲明就不能更改，聲明的變量是數組或者對象的時候，聲明的只是一個引用地址並非一個值，因此數組和對象中的值是能夠改變的。

11.什麼是閉包，如何使用它，爲何要使用它？

在函數中在嵌套一個函數，裏面的函數可以訪問外面函數中的變量，外部的變量是內部函數的一部分；

用外層函數包裹要保護的變量和內層函數，外層函數將內層函數返回到外部，調用外層函數，能夠得到內層函數的對象，保存在外部變量中。

閉包可以有效的防治變量被污染；

12.什麼是跨域？跨域請求資源的方法有哪些？

因爲瀏覽器的同源策略，凡是發送請求 URL 的協議，域名，端口三者之間任意一個與當前頁面地址不一樣即爲跨域；

跨域請求資源方法：

proxy代理，jsonp ， cors

13.請解釋JSONP的工做原理，以及它爲何不是正真的AJAX。

Ajax工做原理是

至關於在用戶和服務器之間加了—箇中間層(AJAX引擎),使用戶操做與服務器響應異步化。

對於用戶請求ajax引擎會作一些數據驗證和數據處理，不是全部請求都提交給服務器，當須要從服務器讀取新數據時由Ajax引擎代爲向服務器提交請求。AJAX最大優勢就是不刷新整個頁面的前提下與服務器通訊維護數據。

過程的話

第一步：建立一個ajax引擎對象，ie6的是new ActiveXObject其餘瀏覽器是new一個xmlHttpRequest對象

第二步調用open方法啓動一個請求以備發送，open方法傳入三個參數請求類型，請求url和一個布爾值

第三步調用send方法發送

第四部處理回調函數onreadystatechange，當readState = 4 響應數據完成時而且2status=200請求成功的時候處理響應數據

注意：回調函數要寫在open（）和send（）以前

Jsonp原理

動態建立一個script標籤，利用script標籤src屬性訪問沒有限制，實現跨域。

web客戶端經過與調用腳本同樣的方式來調用跨域服務器上動態生成的js格式文件(後綴.json)，服務器之因此要動態生成json文件目的把客戶端須要的數據裝入進去。

容許用戶傳遞一個callback參數給服務端，而後服務端返回數據時會將這個callback參數做爲函數名來包裹住json數據這樣客戶端就能夠隨意定製本身的函數來自動處理返回數據

Ajax 和 jsonp的區別

1.ajax和jsonp的調用方式很像，目的同樣，都是請求url，而後把服務器返回的數據進行處理，所以jquery和ext等框架都把jsonp做爲ajax的一種形式進行了封裝；

2.實質不一樣

　ajax的核心是經過xmlHttpRequest獲取非本頁內容

　jsonp的核心是動態添加script標籤調用服務器提供的js腳本（後綴.json)

3.區別聯繫

　不在因而否跨域

　ajax經過服務端代理同樣跨域

　jsonp也不併不排斥同域的數據的獲取

4.jsonp是一種方式或者說非強制性的協議

　ajax也不必定非要用json格式來傳遞數據　

5.jsonp只支持get請求，ajax支持get和post請求

14.請解釋GET/POST的區別，分別在什麼場景下使用。

　　GET ：數據在地址欄中；

　　POST ：數據在請求體中；

在不一樣的網頁須要接受同一個帳號名的時候用GET；

在登陸和註冊提交的時候用POST；

總之獲取數據用 GET，提交數據用POST。

15.call 與 apply 區別？

JavaScript中的每個Function對象都有一個apply()方法和一個call()方法，它們的語法分別爲：

/*apply()方法*/
function.apply(thisObj[, argArray])

/*call()方法*/
function.call(thisObj[, arg1[, arg2[, [,...argN]]]]);

它們各自的定義：

apply：調用一個對象的一個方法，用另外一個對象替換當前對象。例如：B.apply(A, arguments);即A對象應用B對象的方法。

call：調用一個對象的一個方法，用另外一個對象替換當前對象。例如：B.call(A, args1,args2);即A對象調用B對象的方法。

它們的共同之處：

都「能夠用來代替另外一個對象調用一個方法，將一個函數的對象上下文從初始的上下文改變爲由thisObj指定的新對象」。

它們的不一樣之處：

apply：最多隻能有兩個參數——新this對象和一個數組argArray。若是給該方法傳遞多個參數，則把參數都寫進這個數組裏面，固然，即便只有一個參數，也要寫進數組裏。若是argArray不是一個有效的數組或arguments對象，那麼將致使一個TypeError。若是沒有提供argArray和thisObj任何一個參數，那麼Global對象將被用做thisObj，而且沒法被傳遞任何參數。

call：它能夠接受多個參數，第一個參數與apply同樣，後面則是一串參數列表。這個方法主要用在js對象各方法相互調用的時候，使當前this實例指針保持一致，或者在特殊狀況下須要改變this指針。若是沒有提供thisObj參數，那麼 Global 對象被用做thisObj。

實際上，apply和call的功能是同樣的，只是傳入的參數列表形式不一樣。