- 前端性能理解，優化有哪些
- 爲什麼瀏覽器會產生同源策略
- 如何獲取元素的父節點和兄弟節點
- jsonp的原理是什麼，處理script標籤還可以通過什麼實現？（靜態資源標籤）
- HTTP請求頭，響應頭裏面有哪些
- margin坍塌
- 寫一個API實現insertAfter
- promise的狀態有哪些
- preventDefault和stopPropagation的區別
- 事件冒泡，事件捕獲相關，以及事件委託？
1. 前端性能理解，優化有哪些？(點擊查看 >>)
2. 爲什麼瀏覽器會產生同源策略
- 什麼是同源策略？
同源策略限制了從同一個源加載的文檔或腳本如何與來自另外一個源的資源進行交互。它是一個用於隔離潛在惡意文件的重要安全機制。 - “源”都有哪些？
- 主機（域名）
- 協議
- 端口
- 爲什麼會產生同源策略？
- 設置同源策略主要是爲了安全。
- 如果沒有同源限制存在的瀏覽器中的cookie等其他數據可以任意讀取，不同域下DOM可以任意操作，泄漏隱私數據。
3. 如何獲取元素的父節點和兄弟節點（點擊查看 >>）
4. jsonp的原理是什麼，處理script標籤還可以通過什麼實現？（靜態資源標籤）
jsonp 的跨域：
主要是利用script標籤的src屬性中的鏈接可以訪問跨域的js腳本進行跨域請求，只能用於get請求。
原理
- 使用script標籤發送請求，這個標籤支持跨域訪問
- 在script標籤裏面給服務器端傳一個callback
- callback 的值對應到頁面定義的一個全局函數
- 服務端返回的是一個函數的調用。調用的時候會把數據作爲參數包在這個函數裏面。
jQuery給封裝的使用jsonp跨請求方法的使用如下：
$ajax({
url: '.....',
type: 'get',
dataType: 'jsonp',
success: function(data){
console.log(data);
}
})
通過設置ajax方法中的dataType屬性的值爲jsonp就可以進行跨域了。
5. HTTP請求頭，響應頭裏面有哪些
http請求頭：
（主要是key:value的形式），比如：
User-Agent：產生請求的瀏覽器類型。
Accept：客戶端可識別的內容類型列表。
Host：主機地址
http響應頭：
包含數據類型，日期，長度，內容類型，長度等，如：
Server : Apache Tomcat/5.0.12
Date:Mon,6Oct2003 13:13:33 GMT
Content-Type:text/html
Last-Moified:Mon,6 Oct 2003 13:23:42 GMT
Content-Length:112
6. margin坍塌
margin坍塌問題：
- 在文檔流中，父元素的高度默認是被子元素撐開的
- 也就是說子元素多高，父元素就多高
- 但是當子元素設置浮動之後，子元素會完全脫離文檔流
- 此時將會導致子元素無法撐開父元素的高度，導致父元素高度塌陷
7. 寫一個API實現insertAfter
- DOM API中有一個insertBefore()方法，在已知子節點的前面插入一個新的子節點
- 但是沒有提供insertAfter()方法（在已知子節後面插入一個新的子節點）
// newNode表示要插入的新節點
// currentNode表示當前現有節點
function insertafter(newNode,currentNode){
// 獲取當前節點的父節點
const parent = currentNode.parentNode;
if(parent.lastChild === currentNode){
parent.appendChild(newNOde); //如果當前元素是父節點的最後一個節點，則將新節點放在最後
} else {
parent.insertBefore(newNode, currentNode.nextSibling); //否則就將新節點插入到當前節點的下一個節點的前面
}
}
8. promise的狀態有哪些
- pending 初始化
- fulfilled （resolved）成功
- rejected失敗
9. preventDefault和stopPropagation的區別
- preventDefault阻止事件默認行爲
- stopPropagation阻止事件冒泡
10. 事件冒泡，事件捕獲相關，以及事件委託？
- 事件冒泡：從當前觸發事件目標一級一級向上傳遞，依次觸發，直到document爲止
- 事件捕獲：會從document開始觸發，一級一級向下傳遞，依次觸發，直到真正的事件目標爲止。
- 事件委託：又叫事件代理，利用事件冒泡的原理，指指定一個事件處理程序，就可以管理某一類的所有事件