亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

JS基礎(chǔ)篇--JS的DOM操作 - 你真的了解嗎?

DirtyMind / 1699人閱讀

摘要：摘要想稍微系統(tǒng)的說說對于的操作把和常用操作的內(nèi)容歸納成思維導(dǎo)圖方便閱讀同時(shí)加入性能上的一些問題前言在前端開發(fā)的過程中極為重要的一個(gè)功能就是對對象的操作無論增刪改查在前端頁面操作這一范圍內(nèi)都是比較消耗性能的如何高效率的便捷的操作這就是本文要講

摘要

想稍微系統(tǒng)的說說對于DOM的操作,把Javascript和jQuery常用操作DOM的內(nèi)容歸納成思維導(dǎo)圖方便閱讀,同時(shí)加入性能上的一些問題.

前言

在前端開發(fā)的過程中,javascript極為重要的一個(gè)功能就是對DOM對象的操作,無論增刪改查在前端頁面操作這一范圍內(nèi)都是比較消耗性能的.如何高效率的,便捷的操作DOM,這就是本文要講述的.希望看完全文,你能知道如何更高效的通過原生js以及jQuery操作DOM元素.

操作DOM

這里我希望介紹的相對系統(tǒng)一點(diǎn),而不是東一句西一句,所以把Javascript和jQuery常用操作DOM的內(nèi)容歸納成思維導(dǎo)圖方便閱讀.這里就總結(jié)出最基本最常用的DOM操作.
Javascript:

jQuery:

上面的思維導(dǎo)圖分別是javascript和jQuery下操作DOM的一些常用Function,并不完全我僅僅列出相對常用的.這里我比較推薦的是jQuery的操作方式,更加便捷的同時(shí)在性能上也相對有所保障.

性能影響

DOM操作會(huì)導(dǎo)致最重要的,也是我們最需要的問題就是導(dǎo)致用戶阻塞的重構(gòu)(reflow)和重繪(repaint).比較通俗的一句話就是你在頁面上的任何操作都是有代價(jià)的,有些大有些小,如果我們的操作比較頻繁或者波及范圍較大,那么就要講究方式和技巧.reflow和repaint就是我們在改變頁面或者說操作DOM時(shí),會(huì)帶來的兩種后果.

reflow意味著結(jié)構(gòu)的改變,比如一堆元素堆疊,改變其中一個(gè)的寬高,那么相應(yīng)的所有元素的位置都要改變.repaint意味著樣式的改變比如div調(diào)整了背景色等,但是位置不變,只改變我們操作的元素.所以通常來看repaint的代價(jià)要遠(yuǎn)小于reflow,速度也更快.
影響性能的因素我們已經(jīng)知道了,那么下面看一下怎么避免.
更有效的操作

最重要的觀點(diǎn):既然任何DOM操作都有代價(jià),那么最好就是不操作或者最少的操作DOM.所以首先記住一個(gè)原則,將DOM操作盡量少!這里有我認(rèn)為主要的4個(gè)原則,記下來足以應(yīng)付大多數(shù)情況.

(1) 能放到DOM操作之外的操作就放到外面,DOM操作要盡量少.

DOM操作優(yōu)化中這一觀點(diǎn)在網(wǎng)上已經(jīng)很普及了,很多例子都有比如遍歷一個(gè)數(shù)組然后逐漸把內(nèi)容添加到DOM上,這里就推薦先遍歷完數(shù)組,然后一次性在DOM上操作.大家可以看代碼:

// 不好的做法
for (var i=0; i < items.length; i++){
    var item = document.createElement("li");
    item.appendChild(document.createTextNode("Option " + i));
    list.appendChild(item);
}   
 
 
// 更好的做法
// 使用容器存放臨時(shí)變更， 最后再一次性更新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) 大范圍操作先把容器隱藏,在其中操作完成后,再顯示.
這是一個(gè)我剛接觸前端時(shí)遇到的一個(gè)優(yōu)化辦法,當(dāng)時(shí)很不理解為什么display=none之后操作就算是性能優(yōu)化了.但是數(shù)據(jù)證明如此渲染確實(shí)快了很多,這個(gè)的原理要涉及到瀏覽器加載和渲染的原理,簡單說就是隱藏的元素其中不會(huì)產(chǎn)生reflow.這個(gè)例子我就不寫了,很簡單.

(3) 樣式操作不要注意修改屬性,直接替換class
這個(gè)還是比較容易理解的,你逐一修改要訪問很多次,而替換class就相當(dāng)于批量操作了,訪問一次DOM就可以了,當(dāng)然性能提高了.

(4) 用變量保存DOM對象而不是多次獲取,同時(shí)減少操作DOM屬性的次數(shù).

//不好
 
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);
}
總結(jié)

說到這里DOM的操作就差不多了,其實(shí)沒有什么太新鮮的內(nèi)容只是做了一個(gè)系統(tǒng)點(diǎn)總結(jié).對于性能這部分要平時(shí)積累這個(gè)意識(shí),因?yàn)榇蠖鄶?shù)時(shí)候它在開發(fā)過程中體現(xiàn)的并不明顯.本文還有很多不足,希望大家留言溝通吧.

注：第四點(diǎn)中兩種方式執(zhí)行過程的不同之處
例如：如果想想加入一個(gè)a標(biāo)簽,標(biāo)簽有class和內(nèi)容.如果第一種方式,你是先將節(jié)點(diǎn)加入到DOM樹中然后添加內(nèi)容和class,就是一個(gè)先reflow再repaint的過程.如果你先為節(jié)點(diǎn)在DOM對象變量的狀態(tài)下就加好class和內(nèi)容,再appendChild,就只有一個(gè)reflow的過程.自然性能更好.

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/91582.html

相關(guān)文章

  • 【前端面試分享】- 寒冬求職上篇

    摘要：記錄下我遇到的面試題，都有大佬分享過，附上各個(gè)大佬的文章，總結(jié)出其中的主要思想即可。推薦黑金團(tuán)隊(duì)的文章前端緩存最佳實(shí)踐推薦名揚(yáng)的文章淺解強(qiáng)緩存和協(xié)商緩存狀態(tài)碼重點(diǎn)是等，要給面試官介紹清楚。前言 在這互聯(lián)網(wǎng)的寒冬臘月時(shí)期，雖說過了金三銀四，但依舊在招人不斷。更偏向于招聘高級開發(fā)工程師。本人在這期間求職，去了幾家創(chuàng)業(yè)，小廠，大廠廝殺了一番，也得到了自己滿意的offer。 整理一下自己還記得的面試...

    shinezejian 評論0 收藏0

  • JavasScript重難點(diǎn)知識(shí)

    摘要：忍者級別的函數(shù)操作對于什么是匿名函數(shù)，這里就不做過多介紹了。我們需要知道的是，對于而言，匿名函數(shù)是一個(gè)很重要且具有邏輯性的特性。通常，匿名函數(shù)的使用情況是創(chuàng)建一個(gè)供以后使用的函數(shù)。 JS 中的遞歸 遞歸, 遞歸基礎(chǔ), 斐波那契數(shù)列, 使用遞歸方式深拷貝, 自定義事件添加 這一次，徹底弄懂 JavaScript 執(zhí)行機(jī)制 本文的目的就是要保證你徹底弄懂javascript的執(zhí)行機(jī)制，如果...

    forsigner 評論0 收藏0

  • 關(guān)于Vue2一些值得推薦的文章 -- 五、六月份

    摘要：五六月份推薦集合查看最新的請點(diǎn)擊集前端最近很火的框架資源定時(shí)更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥雀呼晴，侵曉窺檐語。葉上初陽乾宿雨，水面清圓，一一風(fēng)荷舉。家住吳門，久作長安旅。五月漁郎相憶否。小楫輕舟，夢入芙蓉浦。 五、六月份推薦集合 查看github最新的Vue weekly；請::點(diǎn)擊::集web前端最近很火的vue2框架資源；定時(shí)更新，歡迎 Star 一下。 蘇...

    sutaking 評論0 收藏0

  • 關(guān)于Vue2一些值得推薦的文章 -- 五、六月份

    摘要：五六月份推薦集合查看最新的請點(diǎn)擊集前端最近很火的框架資源定時(shí)更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥雀呼晴，侵曉窺檐語。葉上初陽乾宿雨，水面清圓，一一風(fēng)荷舉。家住吳門，久作長安旅。五月漁郎相憶否。小楫輕舟，夢入芙蓉浦。 五、六月份推薦集合 查看github最新的Vue weekly；請::點(diǎn)擊::集web前端最近很火的vue2框架資源；定時(shí)更新，歡迎 Star 一下。 蘇...

    khs1994 評論0 收藏0

發(fā)表評論

0條評論

DirtyMind

男|高級講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<