js緩存變量,減少DOM操作開銷

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

每次$()都會創建一個新的jquery對象。  在一個事件/區域內的this對象,就是代表事件調用本對象。如果每次使用到再重新去取,顯然多餘了。如果使用該對象頻率高,應該吧變量緩存起來。不要再每次$(this).   

如:

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

應該緩存起來:

var self = $(this);

self.xxx

self.xxx


緩存變量還一個好處就是以便於在本函數中嵌套的函數也能繼續使用此上下文對象。

比如vue中的methods.

methods:{
        add:function(){
            var vm = this;
            $("a").click(function(){
                alert(vm.message);//繼續訪問當前方法中vue實例   如果不緩存vm實例對象,那麼這裏直接使用this,就不是vue實例了,而是DOM a元素對象了
            })
        }
    }



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