长列表优化-eg

页面数据太多（几百上万条）导致页面卡顿，此时需要对页面进行优化
重点：scoll方法计算，只加载可视区域的标签；
直接复制代码运行查看
<!doctype html5>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport"
        content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
    <title>长列表优化测试</title>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.4.min.js"></script>
    <style>
        * {
            padding: 0px;
            margin: 0px;
        }

        li {
            height: 50px;
            line-height: 50px;
            font-size: 20px;
            color: red;
            background: blue;
            border-bottom: solid 1px yellow;
        }
    </style>
</head>

<body>
    <div>长列表测试</div>
    <ul>
    </ul>
    <script>
        var ul = $('ul');
        var newCounter = 1;
        var prefix = $('<li></li>');
        var liCache = [];

        prefix.css('border', '0px');
        prefix.css('height', '0px');
        ul.append(prefix);
        ul.append('<li>1</li>');

        function checkIsBottom(target) {
            var winHeight = window.innerHeight;
            var scrollY = window.scrollY;
            var targetBottom = target.offset().top + target.height();
            return targetBottom > scrollY + winHeight;
        }

        function checkIsTop(target) {
            var scrollY = window.scrollY;
            var targetBottom = target.offset().top + target.height();
            return targetBottom > scrollY;
        }

        function newLi() {
            var li;
            if (liCache.length == 0) {
                li = $('<li></li>');
                // console.log('new Li,counter:' + newCounter);
                newCounter++;
            } else {
                li = liCache.pop();
            }
            return li;
        }

        function delLi(li) {
            li.remove();
            liCache.push(li);
        }

        function delTopData(li) {
            while (true) {
                //console.log(li.text());
                var nextLi = li.next();
                var height = li.height();
                var prefixHeight = prefix.height();
                delLi(li);
                prefix.height(prefixHeight + height);
                if (checkIsTop(nextLi)) {
                    break;
                }
                li = nextLi;
            }
        }

        function addBottomData() {
            var lastLi = $('li:last');
            var counter = parseInt(lastLi.text());
            while (true) {
                var li = newLi();
                li.text(++counter);
                ul.append(li);
                if (checkIsBottom(li)) {
                    break;
                }
            }
        }

        function addTopData() {
            var prefixLi = $('li:first');
            var firstLi = $('li:first').next();
            while (true) {
                var newFirstLi = newLi();
                var prefixHeight = prefix.height();
                newFirstLi.text(parseInt(firstLi.text()) - 1);
                firstLi.before(newFirstLi);
                prefix.height(prefixHeight - newFirstLi.height());
                if (prefixLi.height() == 0 || checkIsTop(prefixLi) == false) {
                    break;
                }
                firstLi = newFirstLi;
            }
        }

        function delBottomData() {
            var prefixLi = $('li:first');
            var li = $('li:last');
            var prevLi = li.prev();
            while (true) {
                delLi(li);
                li = prevLi;
                prevLi = li.prev();
                if (prevLi.prev()[0] == prefixLi[0] || checkIsBottom(prevLi) == false) {
                    break;
                }
            }
        }

        addBottomData();

        $(window).scroll(function () {
            //顶部移除节点
            var firstLi = $('li:first').next();
            if (checkIsTop(firstLi) == false) {
                delTopData(firstLi);
            }

            //尾部移除节点
            var suffixLi = $('li:last').prev();
            if (checkIsBottom(suffixLi)) {
                delBottomData();
            }

            //尾部添加节点
            var lastLi = $('li:last');
            if (checkIsBottom(lastLi) == false) {
                addBottomData();
            }

            //顶部添加节点
            var prerfixLi = $('li:first');
            if (prerfixLi.height() != 0 && checkIsTop(prerfixLi) == true) {
                addTopData();
            }

        });
    </script>
</body>

</html>
后续更新中。。。
posted @ 2020-08-05 15:24 queenDream 阅读(439) 评论(0) 收藏举报
刷新页面返回顶部
queenDream

长列表优化-eg

公告
