一种移除页面的DOM节点的方法和装置

摘要

本申请公开了一种移除页面的DOM节点的方法和装置。该方法包括：接收移除页面的DOM节点的命令；当在页面卸载事件发生之前接收到移除页面的DOM节点的命令时，先将与该DOM节点绑定的事件移除，然后再将该DOM节点移除。应用本发明能够解决包括IE浏览器在内的某些浏览器内存占用过高的问题。

说明书

技术领域

本申请涉及计算机技术领域，尤其涉及一种移除页面的DOM节点的方法和装置。

背景技术

包括IE浏览器在内的某些浏览器在内存管理方面存在着一定的缺陷，导致了浏览 器的内存占用过高。针对IE浏览器内存占用过高的问题，目前存在着如下的解决方案：

通过建立事件索引表的方式，跟踪页面上绑定的每一个事件，并监听页面的卸载 事件，在监听到页面的卸载事件时，遍历事件索引表，将遍历到的所有事件移除，从 而释放这些绑定事件占用的内存。

其中，目前建立事件索引表的方法包括：当页面在DOM节点绑定一个事件时， 为该事件分配一个ID，该ID为事件索引表的一个键，并指向该事件的属性索引表， 该事件的属性索引表的内容包括：绑定该事件的DOM节点信息、该事件的类型、以 及该事件的处理方法，其中绑定该事件的DOM节点信息具体为指向该DOM节点的 引用。

在IE浏览器监听到页面的卸载事件之前，如果产生将DOM节点移除的事件，例 如页面开发人员需要将该页面中的DOM节点移除、或者用户浏览页面时的某些操作 触发了移除DOM节点的事件，则IE浏览器在接收到移除DOM节点的命令后，直接 执行移除DOM节点的操作。

然而，由于被移除的DOM节点可能绑定了事件，该DOM节点绑定的事件还存 在对该DOM节点信息的引用，因此IE浏览器不会真正删除所述被移除的DOM节点， 而是将该被移除的DOM节点的信息暂存在预设的内存中。

可见，包括IE浏览器在内的某些浏览器在监听到页面的卸载事件之前，如果接收 到移除页面的DOM节点的命令，则IE浏览器无法真正删除被移除的DOM节点，因 此无法释放被移除的DOM节点占用的内存空间，导致了IE浏览器的内存占用过高。

发明内容

有鉴于此，本申请提供了一种移除页面的DOM节点的方法和装置，能够解决包 括IE浏览器在内的某些浏览器内存占用过高的问题。

一种移除页面的DOM节点的方法，该方法包括：

接收移除页面的DOM节点的命令；

当在页面卸载事件发生之前接收到移除页面的DOM节点的命令时,先将与该 DOM节点绑定的事件移除，然后再将该DOM节点移除。

一种移除页面的DOM节点的装置，该装置包括接收模块和移除模块；

所述接收模块，用于接收移除页面的DOM节点的命令；

所述移除模块，用于当所述接收模块在页面卸载事件发生之前接收到移除页面的 DOM节点的命令时，先将与该DOM节点绑定的事件移除，然后再将该DOM节点移 除。

可见，当在页面卸载事件发生之前接收到移除页面的DOM节点的命令时,本发明 先将与该DOM节点绑定的事件移除,然后再将该DOM节点移除,与现有技术中在接收 到移除DOM节点的命令时直接移除DOM节点相比,由于先移除了与该DOM节点绑 定的事件,相当于解除了绑定事件对DOM节点的引用,因此可以在移除DOM节点时可 以真正地删除被移除的DOM节点,而非将被移除的DOM节点暂存在预设的内存中,因 此本发明能够节省浏览器的内存,解决包括IE浏览器在内的某些浏览器内存占用过高 的问题。

附图说明

图1是本发明提供的移除页面的DOM节点的方法流程图。

图2是本发明提供的移除页面的DOM节点的装置结构图。

具体实施方式

图1是本发明提供的移除页面的DOM节点的方法流程图。

如图1所示，该方法包括：

步骤101，接收移除页面的DOM节点的命令。

本步骤中，可以在页面卸载事件发生之前接收移除页面的DOM节点的命令。

步骤102，根据在页面卸载事件发生之前接收到的移除页面的DOM节点的命 令，将与该DOM节点绑定的事件移除。

步骤103，将所述DOM节点移除。

其中，步骤102和步骤103的顺序不可调，也就是说，当在页面卸载事件之 前接收到移除页面的DOM节点的命令时，需要先将与该DOM节点绑定的事件移 除，然后再将该DOM节点移除。

当DOM节点具有子节点时，将该DiM节点绑定的事件移除具体可以包括： 遍历该DOM节点直接绑定的事件，将与该DOM节点直接绑定的所有事件移除； 并且，遍历该DOM节点的各层子节点绑定的事件，将与该DOM节点的各层子节 点绑定的所有事件移除。

具体地，本发明可以为页面上每个绑定的事件分配一个唯一的标识（ID）， 通过这个ID为每个事件维护一份事件属性表，事件属性表的内容包括：绑定事件 的DOM节点、绑定的事件类型、响应事件的处理方法。

对于绑定事件的DOM节点，为其维护一份事件ID序列，每个ID对应该DOM 节点上绑定的一个事件。

当移除与DOM节点绑定的事件时，可以通过遍历该DOM节点对应的事件ID 列表，将该事件ID列表中的所有事件移除。

因此，将与DOM节点直接绑定的所有事件移除具体可以包括：遍历该DOM 节点对应的事件ID序列，将该事件ID序列中的所有事件移除；将DOM节点的各 层子节点绑定的事件移除具体可以包括：遍历该DOM节点的各层子节点，遍历每 个子节点对应的事件ID序列，将每个子节点对应的事件ID序列中的所有事件移 除。在移除事件时，具体可以根据该事件的ID查询事件属性表，根据所述事件属 性表删除该事件，并解除事件属性表对该事件绑定的DOM节点的引用。

在将与DOM节点及其各层子节点绑定的事件移除以后，将DOM节点插入充 当节点回收站的临时节点，并将所述临时节点的innerHTML属性设置为空，从而 实现将该DOM节点彻底删除。

其中，DOM节点的innerHTML属性用于描述该DOM节点的内容，当 innerHTML属性被设置为空时，则该DOM节点的子节点都会被删除，因此，通过 将需要移除的DOM节点插入充当节点回收站的临时节点，并且临时节点的 innerHTML属性又被设置为空，因此可以实现真正地删除DOM节点。

为了进一步解决浏览器关闭后的内存泄露问题，本发明还提出，可以解除被 移除的DOM节点与事件或其他DOM节点的双向引用关系，避免由于DOM节点 之间、或者DOM节点与事件之间存在双向引用关系，而导致在浏览器关闭后浏览 器占用的内存仍然不能释放的内存泄露问题。

本发明还提供了一种移除页面的DOM节点的装置。

图2是本发明提供的移除页面的DOM节点的装置结构图。

如图2所示，该装置包括接收模块201和移除模块202。

接收模块201，用于接收移除页面的DOM节点的命令。

移除模块202，用于当接收模块201在页面卸载事件发生之前接收到移除页面 的DOM节点的命令时，先将与该DOM节点绑定的事件移除，然后再将该DOM 节点移除。

其中，移除模块202具体可以包括第一移除模块和第二移除模块。

所述第一移除模块，用于遍历该DOM节点直接绑定的事件，将与该DOM节 点直接绑定的所有事件移除。

所述第二移除模块，用于遍历该DOM节点的各层子节点绑定的事件，将与该 DOM节点的各层子节点绑定的所有事件移除。

所述第一移除模块，具体可以用于遍历该DOM节点对应的事件标识ID序列， 将该事件ID序列中的所有事件移除。

所述第二移除模块，具体可以用于遍历该DOM节点的各层子节点，遍历每个 子节点对应的事件ID序列，将每个子节点对应的事件ID序列中的所有事件移除。

其中，每个绑定了事件的DOM节点对应一个事件标识ID序列，该事件ID 序列中存储了对应的DOM节点直接绑定的事件信息。

移除模块201，具体可以用于对于每个需要移除的事件，通过查询该事件的事 件属性表，根据所述事件属性表删除所述事件，并解除所述事件属性表对需要移 除的DOM节点的引用。

其中，所述事件属性表是通过为页面上每个绑定的事件分配一个唯一的ID而 建立的，其中存储了每个事件绑定的DOM节点信息、事件类型信息、以及响应所 述事件的处理方法信息。

移除模块201，具体可以用于将移除的DOM节点插入充当节点回收站的临时 节点，并将该临时节点的innerHTML属性设置为空,所述innerHTML属性用于描 述所述临时节点的内容。

该装置还可以包括双向引用关系解除模块。

所述双向引用关系解除模块，用于解除被移除的DOM节点与事件或其他 DOM节点的双向引用关系。

下面举一个具体的例子对本发明进行示例性说明。

假设页面上存在一个父节点，记为P节点，该P节点上面直接绑定了两个事 件，分别为事件EVENT_P_01和事件EVENT_P_02；P节点具有一个子节点，记 为C节点，C节点上绑定了一个事件，记为事件EVENT_C_01，则当接收到将P 节点从页面上移除的命令以后，本发明需要执行以下步骤：

步骤1，将P节点以上绑定的所有事件移除。

步骤1具体包括步骤11和步骤12：

步骤11，检查P节点对应的事件ID序列，将P节点绑定的事件EVENT_P_01 和事件EVENT_P_02移除。

步骤12，然后检查P节点的子节点C对应的事件ID序列，将C节点绑定的 事件EVENT_C_01移除。

步骤2，移除P节点，即将P节点插入充当节点回收站的临时节点，该临时节 点的innerHTML属性设置为空，从而完成P节点的移除。

可见，通过本发明，可以有效地降低页面打开期间的内存占用以及可能存在 的页面关闭以后的内存泄露问题，使得IE浏览器以及与IE浏览器存在同样问题的 其他浏览器下的付客户端应用页面的性能能够得到有效提升。

并且，通过本发明，还可以避免开发人员手动跟踪DOM节点上绑定的每一个 事件，能够提高开发效率。

以上所述仅为本发明的较佳实施例而已，并不用以限制本发明，凡在本发明 的精神和原则之内，所做的任何修改、等同替换、改进等，均应包含在本发明保 护的范围之内。