备案控制台
开发者社区 开发与运维 文章 正文

长列表优化之滚动替换数据方案小记

2017-11-24 1342
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：

　　最近项目中要用到比较长的列表，在浏览器中打开渲染时比较慢，并占用了较多内存，于是就同事就建议尽量减少节点，在滚动时只是替换数据，于是就决定试试这种方法。

　　首先要做的就是添加拖动滚动条时的事件，另外由于UE要求对滚动条进行美化，于是就选用了jscrollpane这个jQuery滚动条插件，主页是：http://jscrollpane.kelvinluck.com/

　　基本要求是表头固定，内容可滚动，滚动时只是替换数据，不增减节点。由于要出现滚动条，所以要添加一个空的节点来占位，所以DEMO的HTML结构如下：

<h3>DEMO</h3>
<div class="bookList">
    <table class="bookList_head">
        <thead>
            <tr>
                <th class="book_title">Title</th>
                <th class="book_time">Time</th>
                <th class="book_author">Author</th>
                <th class="book_prize">Prize</th>
            </tr>
        </thead>
    </table>
    <div class="scroll-pane">
        <div id="emptyContainer" class="emptyContainer"></div>
        <table class="bookList_body">
            <tbody id="bookContent">
            </tbody>
        </table>
    </div>
</div>

　　然后要做的就是用测试数据填充列表，并给占位节点设置高度，JS代码如下：

    var bookData = [],
        bookMap = [],
        bookCount = 1000,
        showCount = 10,
        bookListBodyNode = $(".bookList_body"),
        bookContentNode = $("#bookContent"),
        itemHeight = 0,
        oFragment = document.createDocumentFragment();

    var emptyContainerNode = $("#emptyContainer");
    for(var i=0;i<bookCount;i++){
        bookData.push({
            "title":"JavaScript高级程序设计第"+(i+1)+"版",
            "time":"2013-1-27",
            "author":"佚名"+i,
            "prize":(i%50+1)+".00"
        });
    }
    
    for(i=0;i<showCount;i++){
        var bookItem = $("<tr></tr>"),
            bookItem_title = $("<td class=\"book_title\">" + bookData[i].title + "</td>"),
            bookItem_time = $("<td class=\"book_time\">" + bookData[i].time + "</td>"),
            bookItem_author = $("<td class=\"book_author\">" + bookData[i].author + "</td>"),
            bookItem_prize = $("<td class=\"book_prize\">" + bookData[i].prize + "</td>");
        bookItem.append(bookItem_title)
            .append(bookItem_time)
            .append(bookItem_author)
            .append(bookItem_prize);
        bookMap[i] = bookItem;
        oFragment.appendChild(bookItem[0]);
    }
    bookContentNode[0].appendChild(oFragment);
    itemHeight = parseInt(bookMap[0].height());
    emptyContainerNode.css("height", bookCount * itemHeight);

　　下一步就是给class为scroll-pane的节点应用jScrollPane插件添加滚动条，同是要添加滚动条滚动时的事件，代码如下：

$('.scroll-pane').bind('jsp-scroll-y',function(event, scrollPositionY, isAtTop, isAtBottom){
        bookListBodyNode.css("top",scrollPositionY);
        replaceBooklistData(scrollPositionY);
    }
).jScrollPane();

function replaceBooklistData(scrollPositionY){
    var beginIndex = Math.round(scrollPositionY / itemHeight);
    for(var i=0;i<showCount;i++){
        var bookItem = bookMap[i],
            bookItem_title = bookItem.find(".book_title"),
            bookItem_time = bookItem.find(".book_time"),
            bookItem_author = bookItem.find(".book_author"),
            bookItem_prize = bookItem.find(".book_prize");
        bookItem_title.html(bookData[i+beginIndex].title);
        bookItem_time.html(bookData[i+beginIndex].time);
        bookItem_author.html(bookData[i+beginIndex].author);
        bookItem_prize.html(bookData[i+beginIndex].prize);
    }
}

　　最后还要引入一个鼠标滚动时的插件mousewheel，全部代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Table Body Scroll Demo</title>
        <link type="text/css" href="style/jquery.jscrollpane.css" rel="stylesheet" media="all" />
        <link type="text/css" href="style/demo.css" rel="stylesheet" media="all" />
        <script type="text/javascript" src="script/jquery.js"></script>
        <script type="text/javascript" src="script/jquery.mousewheel.js"></script>
        <script type="text/javascript" src="script/jquery.jscrollpane.min.js"></script>
    </head>
    <body>
        <h3>DEMO</h3>
        <div class="bookList">
            <table class="bookList_head">
                <thead>
                    <tr>
                        <th class="book_title">Title</th>
                        <th class="book_time">Time</th>
                        <th class="book_author">Author</th>
                        <th class="book_prize">Prize</th>
                    </tr>
                </thead>
            </table>
            <div class="scroll-pane">
                <div id="emptyContainer" class="emptyContainer"></div>
                <table class="bookList_body">
                    <tbody id="bookContent">
                    </tbody>
                </table>
            </div>
        </div>
        <script type="text/javascript" id="sourcecode">
            var bookData = [],
                bookMap = [],
                bookCount = 1000,
                showCount = 10,
                bookListBodyNode = $(".bookList_body"),
                bookContentNode = $("#bookContent"),
                itemHeight = 0,
                oFragment = document.createDocumentFragment();
                
            $(function(){
                $('.scroll-pane').bind('jsp-scroll-y',
                    function(event, scrollPositionY, isAtTop, isAtBottom){
                        bookListBodyNode.css("top",scrollPositionY);
                        replaceBooklistData(scrollPositionY);
                    }
                ).jScrollPane();
            });

            loadData();

            function replaceBooklistData(scrollPositionY){
                var beginIndex = Math.round(scrollPositionY / itemHeight);
                for(var i=0;i<showCount;i++){
                    var bookItem = bookMap[i],
                        bookItem_title = bookItem.find(".book_title"),
                        bookItem_time = bookItem.find(".book_time"),
                        bookItem_author = bookItem.find(".book_author"),
                        bookItem_prize = bookItem.find(".book_prize");
                    bookItem_title.html(bookData[i+beginIndex].title);
                    bookItem_time.html(bookData[i+beginIndex].time);
                    bookItem_author.html(bookData[i+beginIndex].author);
                    bookItem_prize.html(bookData[i+beginIndex].prize);
                }
            }

            function loadData(){
                var    emptyContainerNode = $("#emptyContainer");
                for(var i=0;i<bookCount;i++){
                    bookData.push({
                        "title":"JavaScript高级程序设计第"+(i+1)+"版",
                        "time":"2013-1-27",
                        "author":"佚名"+i,
                        "prize":(i%50+1)+".00"
                    });
                }
                
                for(i=0;i<showCount;i++){
                    var bookItem = $("<tr></tr>"),
                        bookItem_title = $("<td class=\"book_title\">" + bookData[i].title + "</td>"),
                        bookItem_time = $("<td class=\"book_time\">" + bookData[i].time + "</td>"),
                        bookItem_author = $("<td class=\"book_author\">" + bookData[i].author + "</td>"),
                        bookItem_prize = $("<td class=\"book_prize\">" + bookData[i].prize + "</td>");
                    bookItem.append(bookItem_title)
                        .append(bookItem_time)
                        .append(bookItem_author)
                        .append(bookItem_prize);
                    bookMap[i] = bookItem;
                    oFragment.appendChild(bookItem[0]);
                }
                bookContentNode[0].appendChild(oFragment);
                itemHeight = parseInt(bookMap[0].height()) || 34;//FOR IE7
                emptyContainerNode.css("height", bookCount * itemHeight);
            }
        </script>
    </body>
</html>

　　代码中的CSS（除了demo.css）和JS都可以在这里找到：https://github.com/vitch/jScrollPane

 　　demo.css代码如下：

.bookList{
    width:520px;
    height:364px;
}
.scroll-pane
{
    height:330px;
    overflow: auto;
}
.bookList .bookList_head,.bookList .bookList_body{
    width:100%;
    border-collapse:collapse;
}
.bookList .bookList_body{
    z-index:999;
    position:absolute;
    top:0;
    left:0;
}
.bookList .bookList_head thead{
    background-color:#F2F4F6;
}
.bookList th,.bookList td{
    padding:8px 0px 8px 5px;
    text-align:left;
    border-bottom:1px solid #CCC;
    font-size:14px;
}
.bookList .bookList_body tr:nth-child(even){
    background-color:#F0F0F0;
}
.bookList .bookList_body tr:hover{
    background-color:#CCC;
}
.book_title{
    width:250px;
}
.book_time{
    width:100px;
}
.book_author{
    width:80px;
}
.book_prize{
} 
.emptyContainer{
    width:100%;
    z-index:-1;
}

　　初步测试，在IE6/7/8/9、chrome、firefox下均正常显示，如果大家有更好方案，欢迎分享。



本文转自Artwl博客园博客，原文链接：http://www.cnblogs.com/artwl/，如需转载请自行联系原作者

文章标签：
前端开发
Web App开发
JavaScript
技术mix呢
目录
相关文章
八百标兵奔北坡
|
13天前
|
前端开发 JavaScript
如何处理用户的拖拽排序操作
这个示例展示了如何使用JavaScript处理HTML列表的拖拽排序。通过监听`dragstart`、`dragend`、`dragenter`、`dragleave`、`dragover`和`drop`事件，实现拖拽元素时的视觉反馈和元素位置交换。当用户拖放列表项时，相关事件触发，更新列表顺序，提供直观的交互体验。
八百标兵奔北坡
9 0
蒾酒
|
2月前
|
JavaScript
vue列表信息展示中新增数据，与编辑数据页面复用，降低重复代码
vue列表信息展示中新增数据，与编辑数据页面复用，降低重复代码
蒾酒
169 2
晚来南风晚相识
|
4月前
原生表格-滚动-合并功能
原生表格-滚动-合并功能
晚来南风晚相识
34 0
1924133573907542
|
存储 开发框架 前端开发
ModStartCMS v5.5.0 页面标签支持，用户逻辑优化
ModStart 是一个基于 Laravel 模块化极速开发框架。模块市场拥有丰富的功能应用，支持后台一键快速安装，让开发者能快的实现业务功能开发。
1924133573907542
258 0
游客g2r3yknu46ngq
|
XML JavaScript 前端开发
App自动化之dom结构和元素定位方式（包含滑动列表定位）
App自动化之dom结构和元素定位方式（包含滑动列表定位）
游客g2r3yknu46ngq
152 0
anny_4243
SwiftUI—如何使列表同时支持删除和移动记录的功能
SwiftUI—如何使列表同时支持删除和移动记录的功能
anny_4243
116 0
SwiftUI—如何使列表同时支持删除和移动记录的功能
jerrywangsap
|
监控 JavaScript 前端开发
一个简单的小技巧，监控网页所有动态标签创建的调用处
一个简单的小技巧，监控网页所有动态标签创建的调用处
jerrywangsap
104 0
一个简单的小技巧，监控网页所有动态标签创建的调用处
烟海之蓝
|
JavaScript 前端开发 Web App开发
移动端长列表滚动优化
当移动端无限加载列表的滚动的时候，如果不做处理就会出现性能问题，会出现卡顿等问题，这时候就需要去优化。 思路 可以把数据分成一屏一屏加载，初始化加载2屏数据 往下滚动监测到滚动到底部后，添加一屏数据，同时把第一屏数据移除掉，并改变滚动条的位置 往上滚动监测到滚动到顶部后，把之前移除掉的数据添加到...
烟海之蓝
2068 0
德哥,digoal
|
SQL 关系型数据库 测试技术
PostgreSQL 实践 - 实时广告位推荐 2 (任意字段组合、任意维度组合搜索、输出TOP-K)
德哥,digoal
1729 0
德哥,digoal
|
SQL 移动开发 关系型数据库
PostgreSQL 实践 - 实时广告位推荐 1 (任意字段组合、任意维度组合搜索、输出TOP-K)
德哥,digoal
1323 0

热门文章

最新文章

  • 1
    Maven 中央仓库地址
  • 2
    【SSL】OV、DV和EV证书的区别
  • 3
    OLAP与OLTP介绍
  • 4
    大数据上手实战！《Elasticsearch 实战进阶营》第二季限时免费报名啦
  • 5
    tr命令
  • 6
    JavaScript理解(转载)
  • 7
    shell重定向小记
  • 8
    CentOS7 yum lamp 虚拟主机配置 lamp各组件简单影响性能的参数调整--for 一定的环境需求
  • 9
    【SICP练习】49 练习2.17
  • 10
    如何让Pl/Sql查出的某个值可编辑？
  • 1
    如何修改NFT的元数据
    37
  • 2
    【机器学习】噪声数据对贝叶斯模型有什么样的影响？
    29
  • 3
    rabbitmq插件升级-延时队列为列
    27
  • 4
    【机器学习】比较朴素贝叶斯算法与逻辑回归算法
    28
  • 5
    如何解决Linux时差问题
    22
  • 6
    rabbitmq安装erlang环境后没生效
    22
  • 7
    高性能代码如何编写？-2
    21
  • 8
    高性能代码如何编写？-1
    17
  • 9
    【机器学习】朴素贝叶斯分类器的缺点是什么？
    18
  • 10
    【机器学习】朴素贝叶斯分类器的优点是什么？
    15

    • 相关课程

    更多
  • 如何使用Kubernetes监控定位慢调用

    • 相关电子书

    更多
  • 动态、高效，蚂蚁动态卡片的内核逻辑
  • 用计算和数据去改变整个世界
  • 《开放搜索查询分析服务架构分享》

    • 相关实验场景

    更多
  • 通过函数计算实现网站文件自动处理
  • 基于Kibana Discover筛选数据，自由搜索航班信息
  • 使用交互方式实现数据查询、插入、修改和删除操作
  • 使用Count功能批量创建资源
  • ROS模板参数动态展示
  • 函数计算进阶-IP查询工具开发
    • 下一篇
    部署LAMP环境（Alibaba Cloud Linux 3）