資訊專欄INFORMATION COLUMN
摘要：摘要想稍微系統的說說對于的操作把和常用操作的內容歸納成思維導圖方便閱讀同時加入性能上的一些問題前言在前端開發的過程中極為重要的一個功能就是對對象的操作無論增刪改查在前端頁面操作這一范圍內都是比較消耗性能的如何高效率的便捷的操作這就是本文要講
摘要
想稍微系統的說說對于DOM的操作,把Javascript和jQuery常用操作DOM的內容歸納成思維導圖方便閱讀,同時加入性能上的一些問題.
前言在前端開發的過程中,javascript極為重要的一個功能就是對DOM對象的操作,無論增刪改查在前端頁面操作這一范圍內都是比較消耗性能的.如何高效率的,便捷的操作DOM,這就是本文要講述的.希望看完全文,你能知道如何更高效的通過原生js以及jQuery操作DOM元素.
操作DOM這里我希望介紹的相對系統一點,而不是東一句西一句,所以把Javascript和jQuery常用操作DOM的內容歸納成思維導圖方便閱讀.這里就總結出最基本最常用的DOM操作.
Javascript:
jQuery:
上面的思維導圖分別是javascript和jQuery下操作DOM的一些常用Function,并不完全我僅僅列出相對常用的.這里我比較推薦的是jQuery的操作方式,更加便捷的同時在性能上也相對有所保障.
DOM操作會導致最重要的,也是我們最需要的問題就是導致用戶阻塞的重構(reflow)和重繪(repaint).比較通俗的一句話就是你在頁面上的任何操作都是有代價的,有些大有些小,如果我們的操作比較頻繁或者波及范圍較大,那么就要講究方式和技巧.reflow和repaint就是我們在改變頁面或者說操作DOM時,會帶來的兩種后果.
reflow意味著結構的改變,比如一堆元素堆疊,改變其中一個的寬高,那么相應的所有元素的位置都要改變.repaint意味著樣式的改變比如div調整了背景色等,但是位置不變,只改變我們操作的元素.所以通常來看repaint的代價要遠小于reflow,速度也更快.
影響性能的因素我們已經知道了,那么下面看一下怎么避免.
更有效的操作
最重要的觀點:既然任何DOM操作都有代價,那么最好就是不操作或者最少的操作DOM.所以首先記住一個原則,將DOM操作盡量少!這里有我認為主要的4個原則,記下來足以應付大多數情況.
(1) 能放到DOM操作之外的操作就放到外面,DOM操作要盡量少.
DOM操作優化中這一觀點在網上已經很普及了,很多例子都有比如遍歷一個數組然后逐漸把內容添加到DOM上,這里就推薦先遍歷完數組,然后一次性在DOM上操作.大家可以看代碼:
// 不好的做法
for (var i=0; i < items.length; i++){
var item = document.createElement("li");
item.appendChild(document.createTextNode("Option " + i));
list.appendChild(item);
}
// 更好的做法
// 使用容器存放臨時變更， 最后再一次性更新DOM
var fragment = document.createDocumentFragment();
for (var i=0; i < items.length; i++){
var item = document.createElement("li");
item.appendChild(document.createTextNode("Option " + i));
fragment.appendChild(item);
}
list.appendChild(fragment);
(2) 大范圍操作先把容器隱藏,在其中操作完成后,再顯示.
這是一個我剛接觸前端時遇到的一個優化辦法,當時很不理解為什么display=none之后操作就算是性能優化了.但是數據證明如此渲染確實快了很多,這個的原理要涉及到瀏覽器加載和渲染的原理,簡單說就是隱藏的元素其中不會產生reflow.這個例子我就不寫了,很簡單.
(3) 樣式操作不要注意修改屬性,直接替換class
這個還是比較容易理解的,你逐一修改要訪問很多次,而替換class就相當于批量操作了,訪問一次DOM就可以了,當然性能提高了.
(4) 用變量保存DOM對象而不是多次獲取,同時減少操作DOM屬性的次數.
//不好
function addAnchor(parentElement, anchorText, anchorClass) {
var element = document.createElement("a");
parentElement.appendChild(element);
element.innerHTML = anchorText;
element.className = anchorClass;
}
//更好
function addAnchor(parentElement, anchorText, anchorClass) {
var element = document.createElement("a");
element.innerHTML = anchorText;
element.className = anchorClass;
parentElement.appendChild(element);
}
總結
說到這里DOM的操作就差不多了,其實沒有什么太新鮮的內容只是做了一個系統點總結.對于性能這部分要平時積累這個意識,因為大多數時候它在開發過程中體現的并不明顯.本文還有很多不足,希望大家留言溝通吧.
注：第四點中兩種方式執行過程的不同之處
例如：如果想想加入一個a標簽,標簽有class和內容.如果第一種方式,你是先將節點加入到DOM樹中然后添加內容和class,就是一個先reflow再repaint的過程.如果你先為節點在DOM對象變量的狀態下就加好class和內容,再appendChild,就只有一個reflow的過程.自然性能更好.
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/91582.html
摘要：記錄下我遇到的面試題，都有大佬分享過，附上各個大佬的文章，總結出其中的主要思想即可。推薦黑金團隊的文章前端緩存最佳實踐推薦名揚的文章淺解強緩存和協商緩存狀態碼重點是等，要給面試官介紹清楚。前言 在這互聯網的寒冬臘月時期，雖說過了金三銀四，但依舊在招人不斷。更偏向于招聘高級開發工程師。本人在這期間求職，去了幾家創業，小廠，大廠廝殺了一番，也得到了自己滿意的offer。 整理一下自己還記得的面試...
摘要：忍者級別的函數操作對于什么是匿名函數，這里就不做過多介紹了。我們需要知道的是，對于而言，匿名函數是一個很重要且具有邏輯性的特性。通常，匿名函數的使用情況是創建一個供以后使用的函數。 JS 中的遞歸 遞歸, 遞歸基礎, 斐波那契數列, 使用遞歸方式深拷貝, 自定義事件添加 這一次，徹底弄懂 JavaScript 執行機制 本文的目的就是要保證你徹底弄懂javascript的執行機制，如果...
摘要：五六月份推薦集合查看最新的請點擊集前端最近很火的框架資源定時更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥雀呼晴，侵曉窺檐語。葉上初陽乾宿雨，水面清圓，一一風荷舉。家住吳門，久作長安旅。五月漁郎相憶否。小楫輕舟，夢入芙蓉浦。 五、六月份推薦集合 查看github最新的Vue weekly；請::點擊::集web前端最近很火的vue2框架資源；定時更新，歡迎 Star 一下。 蘇...
摘要：五六月份推薦集合查看最新的請點擊集前端最近很火的框架資源定時更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥雀呼晴，侵曉窺檐語。葉上初陽乾宿雨，水面清圓，一一風荷舉。家住吳門，久作長安旅。五月漁郎相憶否。小楫輕舟，夢入芙蓉浦。 五、六月份推薦集合 查看github最新的Vue weekly；請::點擊::集web前端最近很火的vue2框架資源；定時更新，歡迎 Star 一下。 蘇...
閱讀 1572·2021-11-25 09:43
閱讀 2476·2019-08-30 15:54
閱讀 2938·2019-08-30 15:53
閱讀 1087·2019-08-30 15:53
閱讀 747·2019-08-30 15:52
閱讀 2538·2019-08-26 13:36
閱讀 807·2019-08-26 12:16
閱讀 1210·2019-08-26 12:13
