天天看點

JavaScript事件性能優化

在JavaScript中,添加到頁面上的事件處理程式數量将直接關系到頁面整體的運作性能。導緻這一問題是多方面的。首先,每個函數都是一個對象,都會占用記憶體;記憶體中的對象越多,性能就越差。其次,必須指定所有事件處理程式而導緻DOM通路次數,會延遲 整個頁面互動就緒時間。

對于“時間處理程式過多”問題的解決方案就是事件委托。事件委托利用了事件冒泡,隻指定一個事件處理程式,就可以管理某一個類型所有的事件。例如,click事件會一直冒泡到document層次。也就是說,我們可以為整個頁面指定一個onclick事件,而不必給每個可單擊的元素分别添加事件處理程式。(減少頁面中事件處理程式的數量)

<body>
    <table id="table1">
        <thead>
            <tr>
                <th>辨別符</th>
                <th>名稱</th>
                <th>國家</th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>張三</td>
                <td>CHI</td>
                <td><a href="javascript:void(0);" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  id="link1">修改</a></td>
            </tr>
            <tr>
                <td>2</td>
                <td>李四</td>
                <td>CHI</td>
                <td><a href="javascript:void(0);" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  id="link2">修改</a></td>
            </tr>
        </tbody>
    </table>
    <script src="../../../Scripts/common.js"></script>
    <script type="text/javascript">

        //注冊事件處理程式
        document.getElementById("link1").onclick = function () {
            console.log(window.event.target);
        }
        
        document.getElementById("link2").onclick = function () {
            console.log(window.event.target);
        }

        window.onunload = function () {
            //清除事件處理程式
            document.getElementById("link1").onclick = null;
            document.getElementById("link2").onclick = null;
        }
        
    </script>
</body>
           

每當将事件處理函數指定給元素時,運作中的浏覽器代碼與支援頁面互動的JavaScript代碼之間就會建立一個連接配接。這種連接配接越多,頁面執行起來就越慢。我們可以在不需要的時候移除事件處理程式。

在兩種情況下,可能會造成性能問題。第一種是從文檔中移除帶有事件處理函數的程式元素時,例如使用removeChild()和replaceChild()方法,但更多的使用了innerHTML替換頁面中的某一部分。

導緻“空事件處理程式”的另一種情況是,在解除安裝頁面的時候。如果在頁面解除安裝之前沒有幹淨的清除事件處理程式,那它們就會滞留在記憶體中。每次加載完頁面再解除安裝,記憶體中滞留的對象數量就會增加,因為事件處理程式沒有被清除。

一般來說,最好的做法是在頁面解除安裝之前,先通過onunload事件處理程式移除所有的事件處理程式。

//注冊事件處理程式
        document.getElementById("link1").onclick = function () {
            console.log(window.event.target);
        }
        
        document.getElementById("link2").onclick = function () {
            console.log(window.event.target);
        }

        window.onunload = function () {
            //清除事件處理程式
            document.getElementById("link1").onclick = null;
            document.getElementById("link2").onclick = null;
        }
           

繼續閱讀