前端性能优化--如何让用户体验快速删除dom节点

最新推荐文章于 2023-01-27 19:02:25 发布

cangowu

最新推荐文章于 2023-01-27 19:02:25 发布

阅读量1.8k

点赞数

分类专栏：性能优化 javascript 文章标签：前端性能优化

本文链接：https://blog.csdn.net/wzgdjm/article/details/51093131

版权

javascript 同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

性能优化

4 篇文章 0 订阅

订阅专栏

0、今天我们要解决什么问题

在我们网页开发的过程中，难免会遇到，用户会在页面删除一些信息的过程，如：多少行记录，以及一些会话什么的，今天我在这里以10000个dom节点的删除做示例

1、为什么会有这样的问题出现

今天早上起床删除qq好友的聊天记录，发现上千条记录大概，1s不到删除了，但反之微信大概10s多吧，究其原因，原来qq是删除会话而已，记录还都在，而微信删除了记录。

2、解决思路

其实到这里已经得到思路，那么就是假删除，所谓的假删除，就是先让用户删除的内容隐藏，然后再执行删除，很明显，将dom节点display设为none比删除节点来得快。

3、源代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="button" value="加载10000条节点" οnclick="fnAddDoms()">
<input type="button" value="删除所有节点方法一" οnclick="fnDeleteDoms0()">
<input type="button" value="删除所有节点方法二" οnclick="fnDeleteDoms1()">
<input type="button" value="删除所有节点方法三" οnclick="fnDeleteDoms2()">
<div id="div">
</div>

<script>

    function fnAddDoms() {
        var domDiv = document.getElementById('div');

        for (var i = 0; i < 10000; i++) {
            var domSub = document.createElement('div');
            domSub.setAttribute('class', 'subDiv');
            domSub.innerHTML = "111";
            domDiv.appendChild(domSub);
        }
    }
    function fnDeleteDoms0() {
        var domDiv = document.getElementById('div');
        var dStart = new Date().getTime();
        domDiv.innerText = null;
        var dEnd = new Date().getTime();
        alert('耗时：' + (dEnd - dStart) + 'ms');
    }
    function fnDeleteDoms1() {
        var domDiv = document.getElementById('div');
        var domSubDivs = document.getElementsByClassName('subDiv');

        var dStart = new Date().getTime();
        var j = domSubDivs.length;
        for (var i = j - 1; i >= 0; i--) {
            domSubDivs[i].style.display = 'none';
        }
        var dEnd = new Date().getTime();

        alert('耗时：' + (dEnd - dStart) + 'ms');

        for (var i = j - 1; i >= 0; i--) {
            domDiv.removeChild(domSubDivs[i]);
        }
    }

    function fnDeleteDoms2() {
        var domDiv = document.getElementById('div');
        var domSubDivs = document.getElementsByClassName('subDiv');

        var dStart = new Date().getTime();
        var j = domSubDivs.length;
        for (var i = j - 1; i >= 0; i--) {
            domDiv.removeChild(domSubDivs[i]);
        }
        var dEnd = new Date().getTime();

        alert('耗时：' + (dEnd - dStart) + 'ms');
    }


</script>
</body>
</html>

总结：也许看了代码大家发现，最终我还是删除了，或者直接给div里面的内容复制为空了，同样耗时了，但是用户其实很多时候并不关心你怎么处理的，用户关心的只是我看到的，所以这里只是提供一种思路，在增加用户体验的过程中，是不是可以改变一下思路，“欺骗”一下用户的视觉呢？