修改和建立DOM節點兩種方式的4種最佳化方案

來源:互聯網
上載者:User

原文:《Speeding up JavaScript: Working with the DOM》
作者:KeeKim Heng, Google Web Developer
翻譯:http://www.blogjava.net/emu/archive/2010/03/01/314185.html

在我們開發互連網富應用(RIA)時,我們經常寫一些javascript指令碼來修改或者增加頁面元素,這些工作最終是DOM——或者說文檔對象模 型——來完成的,而我們的實現方式會影響到應用的響應速度。

DOM操作會導致瀏覽器重解析(reflow),這是瀏覽器的一個決定頁面元素如何展現的計算過程。直接修改DOM,修改元素的CSS樣式,修改瀏 覽器的視窗大小,都會觸發重解析。讀取元素的布局屬性比如offsetHeithe或者offsetWidth也會觸發重解析。重解析需要花費計算時間, 因此重解析觸發的越少,應用就會越快。

DOM操作通常要不就是修改已經存在的頁面上的元素,要不就是建立新的頁面元素。下面的4種最佳化方案覆蓋了修改和建立DOM節點兩種方式,協助你減 少觸發瀏覽器重解析的次數。

方案一:通過CSS類名切換來修改DOM

這個方案讓我們可以一次性修改一個元素和它的子項目的多個樣式屬性而只觸發一次重解析。

需求:

emu注:原文作者寫到這裡的時候腦子顯然短路了一下,把後面的Out-of-the-flow DOM Manipulation模式要解決的問題給擺到這裡來了,不過從示範代碼中很容易明白作者真正想描述的問題,因此emu就不照翻原文了)

我們現在需要寫一個函數來修改一個超連結的幾個樣式規則。要實現很簡單,把這幾個規則對應的屬性逐一改了就好了。但是帶來的問題是,每修改一個樣式 屬性,都會導致一次頁面的重解析。

function selectAnchor(element) {
  element.style.fontWeight = 'bold';
  element.style.textDecoration = 'none';
  element.style.color = '#000';
}

解決方案:

要解決這個問題,我們可以先建立一個樣式名,並且把要修改的樣式規則都放到這個類名上,然後我們給超連結添加上這個新類名,就可以實現添加幾個樣式 規則而只觸發一次重解析了。這個模式還有個好處是也實現了表現和邏輯相分離。

.selectedAnchor {
  font-weight: bold;
  text-decoration: none;
  color: #000;
}

function selectAnchor(element) {
  element.className = 'selectedAnchor';
}



相關文章

Cloud Intelligence Leading the Digital Future

Alibaba Cloud ACtivate Online Conference, Nov. 20th & 21st, 2019 (UTC+08)

Register Now >

Starter Package

SSD Cloud server and data transfer for only $2.50 a month

Get Started >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。