面經知識點總結（一）

1、$(document).ready和window.onload的區別

2、form表單當前頁面無重新整理提交

3、settimeout和setinterval的區別

4、重排及重繪，及何時進行重排

批量修改dom

5、偽元素和偽類

前者是dom樹載入完畢就執行，不必等待頁面中或其他外部檔案都載入完畢，並且可以寫多個ready

後者是頁面所有元素都載入完畢，包括等所有元素，並且只能執行一次

要獲取dom繫結的屬性，則使用後者，因為window還沒有生效；jquery中也有load方法，會在元素的onload事件中繫結乙個處理函式，如果處理函式給window，則會在所有內容載入完畢之後觸發，如果處理函式繫結在元素上，則在元素內容載入完畢之後觸發。

ajax最大的特點就是可以不重新整理頁面而實現資料的通訊及更改頁面資訊。那麼用ajax進行後台通訊傳遞字串還是可以的，遇到上傳檔案該怎麼辦呢？基於安全考慮，js是不能直接進行檔案操作的，只好用原始的from來提交檔案上傳了。這樣一來，用form不就要重新整理頁面了嗎？其實也不是。

給我們的from加乙個target屬性，並且將這個屬性的值設定為隱藏的iframe的id，這樣一來，重新整理的頁面是我們隱藏的iframe，我們的頁面就不會重新整理了。

settimeout只在指定時間後執行一次；setinterval以指定時間為週期迴圈執行

兩種方法根據不同的場景和業務需求擇而取之，

一般情況下settimeout用於延遲執行某方法或功能，

setinterval則一般用於重新整理表單，對於一些表單的假實時指定時間重新整理同步

模擬 setinterval()：將 settimeout() 包含在乙個執行函式a中，而settimeout() 自己的code執行函式又是a，然後在函式a外將函式a執行一次，即達到了迴圈執行的目的

var intervalnum = 0;
function testsetinterval() 
function recursive() , 4000)
}function testfuntion()

模擬 settimeout()：用 setinterval() 模擬 settimeout() 很簡單，在 setinterval() 執行一次後，立刻關閉視窗(當然這是耍無賴)或者執行clearinterval()方法(這個靠譜點)。clearinterval() 需要在 setinterval()執行code方法內或其他地方執行，不能緊接著 setinterval() 後面執行，那樣setinterval()還沒等到執行，就已經被乾掉了。

var intervalnum = 0, clearid = 0;
function testsetinterval()
function testfuntion() ,4000);
}

"重繪"不一定需要"重排"，比如改變某個網頁元素的顏色，就只會觸發"重繪"，不會觸發"重排"，因為布局沒有改變。但是，"重排"必然導致"重繪"，比如改變乙個網頁元素的位置，就會同時觸發"重排"和"重繪"，因為布局改變了。

js中一些方法會導致重新獲取布局資訊,重新整理渲染佇列。

最小化重繪和重排（合併）

當需要對dom元素進行一系列操作，可以通過以下步驟來減少重繪和重排的次數：

1、使元素脫離文件流（重排）

2、對應用多重改變

3、把元素帶回文件（重排）

有三種基本方法可以使dom脫離文件流：

1、隱藏元素，應用修改，重新顯示

2、使用文件片段在當前dom之外構建乙個子樹，再把它拷貝回文件（推薦）

3、將原始元素拷貝到乙個脫離文件的節點中，修改副本，完成後再替換原始元素。

偽類用於選擇dom樹之外的資訊，或是不能用簡單選擇器進行表示的資訊。前者包含那些匹配指定狀態的元素，比如:visited，:active；後者包含那些滿足一定邏輯條件的dom樹中的元素，比如:first-child，:first-of-type，：target

偽元素為dom樹沒有定義的虛擬元素。不同於其他選擇器，它不以元素為最小選擇單元，它選擇的是元素指定內容。比如::before表示選擇元素內容的之前內容，也就是""；::selection表示選擇元素被選中的內容

注意：p:first-child表示選擇的元素既要是p標籤，同時要是其父元素的第乙個子元素，不要錯誤認為是表示p元素的第乙個子元素；同理，p:first-of-type表示選擇的元素要是p標籤，同時要是其父元素的第乙個p標籤元素；其他類似的偽類含義相似。

面經知識點總結（一）

面經阿里一面知識點總結

面經京東一面知識點總結

2023年秋招總結（面經知識點歸納）

面經知識點總結（一）

面經 阿里一面知識點總結

面經 京東一面知識點總結

2023年秋招總結（面經 知識點歸納）

相關推薦

面經阿里一面知識點總結

面經京東一面知識點總結

2023年秋招總結（面經知識點歸納）