javascript效能提公升 最小化重繪和重排

2021-06-20 19:07:35 字數 549 閱讀 8313

——authored by 李家優 

頁面的重繪和重排會產生計算消耗,為了提公升效能,我們應該盡可能的降低頁面的重繪和重排。

用展開/摺疊的方式來顯示和隱藏部分頁面是一種常見的互動模式。它通常包括展開區域的幾何動畫,並將頁面其他部分推向下方。

一般來說,重排只影響渲染樹中的一小部分,但也可能影響很大的部分,甚至整個渲染樹。瀏覽器所需重排的次數越少,應用程式的響應速度就越快。因此當頁面頂部的乙個動畫推移頁面整個月下的部分時,會導致一次代價昂貴的大規模重排。渲染樹中需要重新計算的節點越多,情況就會越糟糕。

使用以下步驟可以避免頁面中的大部分重排:

1、使用絕對位置定位頁面上的動畫元素,將其脫離文件流。

2、讓元素動起來。當它擴大時,會臨時覆蓋部分頁面。但這只是頁面乙個小區域的重繪過程,不會產生重排並重繪頁面的大部分內容。

3、當動畫結束時恢復定位,從而只會下移一次文件的其他元素。

「前端那些事兒」,帶你了解最新的前端技術。

Javascript應注意的效能提公升問題

總結了一下平時用得比較普遍的js效能提公升方面的注意事項 1 關於js 的迴圈,迴圈是一種常用的流程控制。js提供了三種迴圈 for while for in 在這三種迴圈中 for in 的效率最差,因為它需要查詢 hash 鍵,因此應盡量少用 for in 迴圈,for while 迴圈的效能基...

javascript變數提公升和函式提公升

variable hoisting變數提公升是js比較有特點的地方,它允許你先使用變數,在其後面再進行變數宣告,不會丟擲 uncaught referenceerror異常。雖然變數被提公升到前面,但是它的預設值則是undefind,在引用的時候也使用這個值,知道在其面後進行賦值,在使用時候即為所贖...

提公升軟體效能

提高系統的安全性和健壯性,資料庫伺服器和應用伺服器,就要考慮冗餘設計。保證系統的高可用和高可靠以及高併發。保證系統在出現故障時,及時切換正常工作,使用雙機熱備份。使用redis快取伺服器提高系統的效能。使用讀寫分離技術減輕資料訪問的壓力,提公升系統的使用者體驗。在資料庫的設計上來使用分庫 分表 分割...