關於JS中文件碎片的理解

2021-08-13 09:43:05 字數 609 閱讀 2379

我們大家都知道,當我們在操作dom的時候,是乙個很耗效能的過程,尤其是改變dom的結構就更加的消耗效能,但是有些時候我們不得不在dom中新增內容,改變dom的結構,此時我們就要減少dom結構改變時的效能消耗,怎麼減少效能消耗呢,這時我們就要引用「文件碎片」,其目的就是將我們每次增加的節點先儲存在文件碎片中,在將文件碎片再新增到dom結構中,這樣將多次增加節點改變dom結構,變了只改變一次dom結構,大大得減少了效能的消耗。

let frg=document.createelementfragment();//建立乙個文件碎片

for(let i=0;i<1000;i++)

frg=null;//將臨時建立的文件碎片在操作完成之後,賦值為null。釋放記憶體,減少效能的消耗。

script>

在這裡我們需要注意的是:當我們在給頁面末尾追加這文件碎片的時候,只是將文件碎片的子節點新增到了頁面的末尾,而文件碎片本身並沒有新增到頁面中。在新增結束之後,記得將臨時建立的文件碎片賦值為null,目的是減少效能的消耗。

即減少了dom結構改變時消耗的效能,又防止了使用完畢的文件碎片消耗效能,一舉多得,prefect!!!

html中文件流的理解

理解好文件流,有助於我們對css中定位和浮動的理解。什麼是文件流呢,經過我看過的一些文章,加入自己的理解。我得出文件流的定義如下 1 從左至右,從上至上的布局。2 符合html中標籤本身含義的布局,比如某些標籤獨佔一行。有些標籤屬於行內元素等。下面來講乙個css中的定位機制,共三種 1 正常的文件流...

js效能優化篇建立文件碎片

大家都知道,大量的操作dom會引起頁面的渲染變慢,文件碎片是指乙個臨時的文件,把建立的dom放到文件裡面,不要每次操作都操作dom,提高頁面的效率。下面我們就來看一下如何運用建立文件碎片。首先,我們了解下向頁面建立dom發生了什麼。for var i 0 i 5000 i 如果我們向以上 一樣,向頁...

關於tensorflow的碎片

1 突然間視覺化tensorflow報錯 importerror cannot import name monitoring 解決 pip uninstall tensorflow estimator pip install iv tensorflow estimator 1.13.02 tenso...