面經知識點總結（一）
目錄
1、$(document).ready和window.onload的區別
前者是DOM樹載入完畢就執行，不必等待頁面中圖片或其他外部檔案都載入完畢，並且可以寫多個ready
後者是頁面所有元素都載入完畢，包括圖片等所有元素，並且只能執行一次
要獲取DOM繫結的屬性，則使用後者，因為window還沒有生效；Jquery中也有load方法，會在元素的onload事件中繫結一個處理函式，如果處理函式給window，則會在所有內容載入完畢之後觸發，如果處理函式繫結在元素上，則在元素內容載入完畢之後觸發。
2、form表單當前頁面無重新整理提交
Ajax最大的特點就是可以不重新整理頁面而實現資料的通訊及更改頁面資訊。那麼用AJAX進行後臺通訊傳遞字串還是可以的，遇到上傳檔案該怎麼辦呢？基於安全考慮，JS是不能直接進行檔案操作的，只好用原始的from來提交檔案上傳了。這樣一來，用form不就要重新整理頁面了嗎？其實也不是。
給我們的from加一個target屬性，並且將這個屬性的值設定為隱藏的iframe的ID，這樣一來，重新整理的頁面是我們隱藏的iframe，我們的頁面就不會重新整理了。
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>AjaxUpload</title> </head> <body onLoad="javascript:alert('onload')" onUnload="javascript:alert('onunload')"> <form name="AjaxUpload" method="post" action="upload.jsp" target="hidden_frame"> <input type="submit" name="Submit" value="提交"> </form> <iframe name='hidden_frame' id="hidden_frame" style="display:none"></iframe> </body> </html>
3、setTimeout和setInterval的區別
setTimeout只在指定時間後執行一次；setInterval以指定時間為週期迴圈執行
兩種方法根據不同的場景和業務需求擇而取之，
一般情況下setTimeout用於延遲執行某方法或功能，
setInterval則一般用於重新整理表單，對於一些表單的假實時指定時間重新整理同步
模擬 setInterval()：將 setTimeout() 包含在一個執行函式A中，而setTimeout() 自己的code執行函式又是A，然後在函式A外將函式A執行一次，即達到了迴圈執行的目的
var intervalNum = 0; function testsetInterval() { var date = new Date(); console.log(date.getSeconds()); console.log("setInterval", intervalNum++); } function recursive() { testsetInterval(); setTimeout(function () { recursive() //遞迴，每隔4秒呼叫一次recursive() }, 4000) } function testFuntion() { recursive(); //在方法recursive外，呼叫一次recursive,以啟動迴圈呼叫！ }
模擬 setTimeout()：用 setInterval() 模擬 setTimeout() 很簡單，在 setInterval() 執行一次後，立刻關閉視窗(當然這是耍無賴)或者執行 clearInterval() 方法(這個靠譜點)。clearInterval() 需要在 setInterval()執行code方法內或其他地方執行，不能緊接著 setInterval() 後面執行，那樣setInterval() 還沒等到執行，就已經被幹掉了。
var intervalNum = 0, clearId = 0;
function testsetInterval(){
var date = new Date();
console.log(date.getSeconds());
console.log("setInterval", intervalNum++);
clearInterval(clearId); //也可以在此執行
}
function testFuntion() {
clearId = setInterval(function () {
testsetInterval(); //每隔4秒呼叫testsetInterval()
// clearInterval(clearId); //可以在此執行
},4000);
}4、重排及重繪，及何時進行重排
- 新增或刪除可見的DOM元素。
- 元素的位置、尺寸（內外邊距、邊框厚度、寬高等屬性）改變
- 內容改變（文字改變或圖片被另一個不同尺寸的圖片替代）
- 頁面渲染器初始化
- 瀏覽器視窗尺寸改變。
"重繪"不一定需要"重排"，比如改變某個網頁元素的顏色，就只會觸發"重繪"，不會觸發"重排"，因為佈局沒有改變。但是，"重排"必然導致"重繪"，比如改變一個網頁元素的位置，就會同時觸發"重排"和"重繪"，因為佈局改變了。
js中一些方法會導致重新獲取佈局資訊,重新整理渲染佇列。
- offsetTop，offsetLeft，offsetWidth，offsetHeight
- scrollTop，scrollLeft，scrollWidth，scrollHeight
- clientTop，clientLeft，clientWidth，clientHeight
- getComputedStyle(currentStyle in IE)
最小化重繪和重排 （合併）
批量修改DOM
當需要對DOM元素進行一系列操作，可以通過以下步驟來減少重繪和重排的次數：
1、使元素脫離文件流（重排）
2、對應用多重改變
3、把元素帶回文件（重排）
有三種基本方法可以使DOM脫離文件流：
1、隱藏元素，應用修改，重新顯示
2、使用文件片段在當前DOM之外構建一個子樹，再把它拷貝迴文檔（推薦）
3、將原始元素拷貝到一個脫離文件的節點中，修改副本，完成後再替換原始元素。
5、偽元素和偽類
偽類用於選擇DOM樹之外的資訊，或是不能用簡單選擇器進行表示的資訊。前者包含那些匹配指定狀態的元素，比如:visited，:active；後者包含那些滿足一定邏輯條件的DOM樹中的元素，比如:first-child，:first-of-type，：target
偽元素為DOM樹沒有定義的虛擬元素。不同於其他選擇器，它不以元素為最小選擇單元，它選擇的是元素指定內容。比如::before表示選擇元素內容的之前內容，也就是""；::selection表示選擇元素被選中的內容
-
偽類
Selector Meaning CSS :active 選擇正在被啟用的元素 1 :hover 選擇被滑鼠懸浮著元素 1 :link 選擇未被訪問的元素 1 :visited 選擇已被訪問的元素 1 :first-child 選擇滿足是其父元素的第一個子元素的元素 2 :lang 選擇帶有指定 lang 屬性的元素 2 :focus 選擇擁有鍵盤輸入焦點的元素 2 :enable 選擇每個已啟動的元素 3 :disable 選擇每個已禁止的元素 3 :checked 選擇每個被選中的元素 3 :target 選擇當前的錨點元素 3 :first-of-type 選擇滿足是其父元素的第一個某型別子元素的元素 3 :last-of-type 選擇滿足是其父元素的最後一個某型別子元素的元素 3 :only-of-type 選擇滿足是其父元素的唯一一個某型別子元素的元素 3 :nth-of-type(n) 選擇滿足是其父元素的第n個某型別子元素的元素 3 :nth-last-of-type(n) 選擇滿足是其父元素的倒數第n個某型別的元素 3 :only-child 選擇滿足是其父元素的唯一一個子元素的元素 3 :last-child 選擇滿足是其父元素的最後一個元素的元素 3 :nth-child(n) 選擇滿足是其父元素的第n個子元素的元素 3 :nth-last-child(n) 選擇滿足是其父元素的倒數第n個子元素的元素 3 :empty 選擇滿足沒有子元素的元素 3 :in-range 選擇滿足值在指定範圍內的元素 3 :out-of-range 選擇值不在指定範圍內的元素 3 :invalid 選擇滿足值為無效值的元素 3 :valid 選擇滿足值為有效值的元素 3 :not(selector) 選擇不滿足selector的元素 3 :optional 選擇為可選項的表單元素，即沒有“required”屬性 3 :read-only 選擇有"readonly"的表單元素 3 :read-write 選擇沒有"readonly"的表單元素 3 :root 選擇根元素 3
注意：p:first-child表示選擇的元素既要是p標籤，同時要是其父元素的第一個子元素，不要錯誤認為是表示p元素的第一個子元素；同理，p:first-of-type表示選擇的元素要是p標籤，同時要是其父元素的第一個p標籤元素；其他類似的偽類含義相似。
-
偽元素
Selector Meaning CSS ::first-letter 選擇指定元素的第一個單詞 1 ::first-line 選擇指定元素的第一行 1 ::after 在指定元素的內容前面插入內容 2 ::before 在指定元素的內容後面插入內容 2 ::selection 選擇指定元素中被使用者選中的內容 3