Android沉浸式頂部實現程式碼及效果
阿新 • • 發佈：2020-09-23
參考 :https://www.jianshu.com/p/12d5209ef882
<style> #button{ width: 100px; height: 100px; background: red; cursor: pointer; } </style> <body> <div id="button"></div> </body> <script> var button = document.getElementById('button'); button.addEventListener('click', function () { var a = new Array(100000).fill(1); var b = new Array(20000).fill(1); }); </script> </html>
1.監聽記憶體情況
不點選的情
最後記憶體顯示的線，都變低了，因為一個，垃圾回收機制會把這部分的變數給回收掉。
第二次點選按鈕，然後藍色的一條線就是js事件的佔用記憶體情況，因為沒用重新整理頁面，所以全域性被垃圾回收掉的變數已經不佔記憶體了
瀏覽器的垃圾回收機制，是每隔3.5秒（差不多，肉眼測量）回收一次不用的記憶體
var arr = []; var button3 = document.getElementById('button'); button3.addEventListener('click', function () { var a = new Array(100000); var b = new Array(20000); arr.push(b); });
等瀏覽器第一次回收記憶體以後，瘋狂點選按鈕，之後，記憶體會變高,然後瀏覽器又回收了一次，記憶體降低了一點
，再瘋狂點選幾次，就看到記憶體又變高了，然後瀏覽器又回收了一次記憶體，之後就穩定在這個值上面。
值變得越來越高，沒用被釋放掉，即使垃圾回收了，記憶體任然被佔用不被釋放掉。
這樣就是記憶體洩漏。
但是
var b = "sssss";字串就不會造成記憶體的洩漏，因為陣列是引用，不能被釋放。但是變數會被釋放掉。
分析一下：
因為點選按鈕，以後會生成一個數組，記憶體會給這個陣列分配一個記憶體空間。執行完畢以後，分配給陣列的記憶體應該被釋放掉，但是這個陣列被外部的arr陣列儲存了引用，
它就不會被釋放掉了
就一直儲存在記憶體裡面，每次點選一次，就會再分配一個新的記憶體空間。
因為瀏覽器的記憶體是有限的，記憶體不夠的時候，就會去釋放記憶體，垃圾回收機制。記憶體不斷被佔掉，
然後新的程式變數執行記憶體不夠就會去
不停的釋放記憶體，就會讓瀏覽器越來越卡，甚至崩潰。為啥頁面邏輯越寫越多，頁面越來越卡，還會奔潰，就是記憶體管理有問題。