js快取變數,減少DOM操作開銷

2021-08-02 14:19:09 字數 526 閱讀 5047

dom是頁面元素物件的體現,dom是個樹,每個dom節點和其他節點有子父、兄弟關係,每次尋找的時候,都會一層層的去尋找,對於相同且已經查詢過的節點,每次都去重新找,如果節點層級關係多了,效能就很低了。

每次$()都會建立乙個新的jquery物件。  在乙個事件/區域內的this物件,就是代表事件呼叫本物件。如果每次使用到再重新去取,顯然多餘了。如果使用該物件頻率高,應該吧變數快取起來。不要再每次$(this).   

如:

$("a").click(function())
每次執行一段**,就會去重新生成這個$(this)這個物件,如果方法內的操作多了,就會顯得效率低下。

應該快取起來:

var self = $(this);

self.***

self.***

快取變數還乙個好處就是以便於在本函式中巢狀的函式也能繼續使用此上下文物件。

比如vue中的methods.

methods:)

}}

使用ETag快取減少網路開銷

使用etag快取減少網路開銷 現在http協議的發展已經很完善了,很多需求在http協議中都已經被支援。比如頁面快取這個需求,http就提供了多種快取功能。最常用的就是超時快取,設定乙個時間,在該時間段內瀏覽器使用快取的資料而不向伺服器發起請求。這種模式對伺服器而言是最省心的,因為不訪問伺服器所以可...

減少操作DOM原因

為什麼不支援操作dom節點原因 個人覺得 在瀏覽器生成網頁時要經過 解析html 生成dom樹 解析css 生成css規則樹 合併dom樹和css樹生成render規則樹 開始渲染頁面 布局render樹對各元素尺寸,位置進行計算,得到每個節點的幾何資訊計算網 頁每個標籤布局距離 顏色 屬性 觸發簡...

為什麼要減少操作DOM

為什麼要減少操作dom?下面將按照以下布局同時操作div1和div2 然後在控制台列印出所需的時間,對時間盡心對比 以下是布局 lang en charset utf 8 titletitle head id div1 div id div2 div 這裡寫 script body html 對di...