關於reflow迴流問題

reflow(英音:[ri:’fləu] 美音:[ri’flo])在詞典中的解釋是迴流,逆流。而在web應用中,翻譯爲迴流有些牽強。我個人覺得,理解爲回爐(重新塑形),似乎更加形象一點。舉個例子,頁面上節點是以樹的形式展現的。假如我使用JavaScript砍掉一個節點,這棵樹爲了不脫節,肯定要重新梳理一遍,將砍掉的那個斷點重新結合起來又形成一顆完整的樹,而這個結合梳理過程就是這裏的reflow,所謂迴流,就是由於某些原因(如修改),要將元素回過頭來重新“流”一遍。

迴流(reflow)這個名詞指的是網絡瀏覽器爲了重新渲染部分或全部的文檔而重新計算文檔中元素的位置和幾何結構的過程。因爲迴流(reflow)在瀏覽器中屬於一種用戶主導的模塊化操作,所以知道如何去改進迴流(reflow)時間以及知道各種文檔屬性(DOM節點深度,css的渲染效率,各種各樣的樣式改變)對迴流(reflow)時間的影響對於開發人員講是很有幫助的。有時候,即使僅僅迴流一個單一的元素,也可能要求它的父元素以及任何跟隨它的元素也產生迴流。

有大量的用戶行爲以及潛在的DHTML改變會觸發迴流(reflow)。例如,改變瀏覽器窗口的大小,使用一些JavaScript方法,包括計算樣式,對DOM進行元素的添加或刪除,或是改變元素的class等。值得注意的是有一些操作產生的迴流(reflow)時間可能要比你原先預想的要多——您可以參考下面這張史蒂芬•桑德斯(Steve Souders)的“更快的網站(Even Faster Web Sites)”一文中提到的圖表。


從上邊的表格我們可以清晰的看到並不是所有JavaScript改變的樣式都會在瀏覽器中產生迴流(reflow),所花費的迴流(reflow)時間也是多樣的。而且我們或多或少可以看到,現代瀏覽器在迴流(reflow)時間上要做的更好一些。

藉助Google,我們用各種方式測試了我們頁面以及應用程序的速度,發現在界面上添加功能時迴流是個至關重要必須考慮的因素,我們應盡最大努力傳達生動的,交互的,愉悅的用戶體驗。

指導

以下是一些簡單的指導方針可以幫助你頁面上的迴流(reflow)減到最小。

1. 減少不必要的DOM深度。因爲無論你改變DOM節點樹上任何一個層級都會影響節點樹的每個層級——從根結點一直到修改的子節點。不必要的節點深度將導致執行迴流時花費更多的時間。
2. 精簡css,去除沒有用處的css
3. 如果你想讓複雜的表現發生改變,例如動畫效果,那麼請在這個流動線之外實現它。使用position-absolute或position-fixed來實現它。
4. 避免不必要的複雜的css選擇符,尤其是使用子選擇器,或消耗更多的CPU去做選擇器匹配。

文章轉自地址:http://www.zhangxinxu.com/wordpress/?p=311

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章