`
baby69yy2000
  • 浏览: 187674 次
  • 性别: Icon_minigender_1
  • 来自: 自己输入城市...
社区版块
存档分类
最新评论

[转]大数组的分时优化处理

    博客分类:
  • JS-1
阅读更多
呵呵,以后有大批数据要需要展示的时候,按照下面的方法整就行
客户体验很不错呀!!!
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>大数组的分时优化处理</title>
<style type="text/css">
    th { text-align: left; }
</style>
</head>
<body>

<button onclick="reset()" id="resetBtn" autocomplete="off">重置</button>
<button onclick="test1()" id="test1Btn" autocomplete="off">传统方式加载</button>
<button onclick="test2()" id="test2Btn" autocomplete="off">分时优化加载</button>

<div style="border: 1px solid black; width: 500px; margin: 10px 0; color: white">
    <div id="time-progress" style="background-color: navy; height: 16px; width: 0"></div>
</div>

<table id="demo">
    <col width="200" />
    <col width="300" />
    <tbody>
    <tr>
        <th>商品名称</th>
        <th>商品描述</th>
    </tr>
    </tbody>
</table>
<script type="text/javascript">

    // 模拟数据
    var JSON_DATA = [], i, len;
    for (i = 1; i <= 5000; ++i) {
        JSON_DATA.push(["商品名称" + i, "商品描述" + i]);
    }

    // 通用操作
    var demo = document.getElementById("demo"),
        tbody = demo.tBodies[0],
        tr, td, n = 0,
        addItem = function(data) {
            tr = document.createElement("tr");

            td = document.createElement("td");
            td.appendChild(document.createTextNode(data[0]));
            tr.appendChild(td);

            td = document.createElement("td");
            td.appendChild(document.createTextNode(data[1]));
            tr.appendChild(td);

            tbody.appendChild(tr);
            if(++n % 10 == 0)
                progressing();
        },
        reset = function() {
            resetBtn.disabled = true;

            if(window.ActiveXObject) { // ie
                var temp = document.createElement("div");
                temp.innerHTML  = "<table><tbody><tr><th>商品名称</th><th>商品描述</th></tr></tbody></table>";
                demo.replaceChild(temp.firstChild.tBodies[0], tbody);
                tbody = demo.tBodies[0];
            } else {
                tbody.innerHTML = "<tr><th>商品名称</th><th>商品描述</th></tr></tbody>";
            }

            n = 0;
            progress.innerHTML = "";
            progress.style.width = 0;

            test1Btn.disabled = false;
            test2Btn.disabled = false;
        },
        progressing = function() {
            progress.style.width = (progress.offsetWidth + 1) + "px";
        },
        resetBtn = document.getElementById("resetBtn"),
        test1Btn = document.getElementById("test1Btn"),
        test2Btn = document.getElementById("test2Btn"),
        progress = document.getElementById("time-progress");


    // 传统加载
    function test1() {
        resetBtn.disabled = true;
        test1Btn.disabled = true;
        test2Btn.disabled = true;

        var start = +new Date(), end;
        for (i = 0, len = JSON_DATA.length; i < len; ++i) {
            addItem(JSON_DATA[i]);
        }
        end = +new Date();
        progress.innerHTML = end - start;

        resetBtn.disabled = false;
    }

    // 分时加载
    function test2() {
        resetBtn.disabled = true;
        test1Btn.disabled = true;
        test2Btn.disabled = true;

        var start = +new Date(), end;
        timedChunk(JSON_DATA, addItem, null, function() {
            resetBtn.disabled = false;
            end = +new Date();
            progress.innerHTML = end - start;

        });
    }


    // 通用分时处理函数
    function timedChunk(items, process, context, callback) {
        var todo = items.concat(), delay = 25;

        setTimeout(function() {
            var start = +new Date();

            do {
                process.call(context, todo.shift());
            } while(todo.length > 0 && (+new Date() - start < 50));

            if(todo.length > 0) {
                setTimeout(arguments.callee, delay);
            } else if(callback) {
                callback(items);
            }

        }, delay);
    }
    
</script>
</body>
</html>
分享到:
评论

相关推荐

    大数组处理时的分时加载 --收藏

    总之,大数组处理时的分时加载是一种重要的优化策略,它结合了内存管理和数据处理的智慧,能够在有限的资源下高效地处理大量数据。通过理解其原理,选择合适的工具,开发者可以更好地应对大数据时代的挑战。

    大数运算方法

    当处理的数字超出普通整型或浮点型数据类型的范围时,大数运算就显得尤为重要。以下是对“大数运算”这一主题的详细阐述。 首先,我们要理解什么是大数。在计算机中,通常的整型数据类型(如int或long)有其存储...

    大数乘法、除法、加法、减法、以及求平方根源代码

    在编程领域,处理大数运算是一项重要的技能,特别是在加密算法、数学计算或金融应用中。...通过深入理解这些代码,开发者可以更好地理解和实现自己的大数处理功能,同时也可以优化现有算法以提高计算效率。

    PAT甲级考试的题解和分类

    2. **大数组处理**:对于涉及大数组的问题,避免过度思考复杂算法,简单直接的方法通常是首选。例如,20分的题目可以用嵌套循环配合`break`语句解决,尽量减少不必要的复杂性。 3. **双指针技术**:双指针是解决...

    01背包问题、prim算法、八皇后、大数相加、分治法求最近对、克鲁斯卡尔算法、分财宝、蛮力法最近对

    4. **大数相加**:在计算机科学中,处理超过常规整型范围的大数相加,通常使用字符串表示法。逐位进行加法运算,并处理进位,可以实现任意大小数字的相加。 5. **分治法求最近对**:分治法是解决复杂问题的一种策略...

    ACM常用算法打印版

    在计算机科学中,大数运算常常遇到边界限制的问题,尤其是在处理阶乘这类指数级增长的数据时。大数阶乘算法通过数组存储每一位数字,实现对大数的乘法和加法操作,从而计算出n的阶乘。这种算法的关键在于避免溢出,...

    matlab开发-TipstricksGetingStartedusingMatlab优化

    2. **预分配**:预先为大数组分配内存可以减少动态扩展时的开销。例如,使用zeros或ones函数初始化数组,避免在循环中逐步增长数组大小。 3. **使用内置函数**:MATLAB内置了很多高效的函数,如快速傅里叶变换(fft)...

    面向神经网络的模糊测试算法优化.pdf

    7. **对比实验**:通过对比实验,优化后的算法在检测含有大量非数值型缺陷的系统时表现优于原始模糊算法,且在多组检测实验中,检测到缺陷的时间更短。 8. **张量模糊**:可能涉及到使用张量操作来处理神经网络的...

    易语言对分

    2. **数据分割**:对分也可以用于处理大数据集,将大数组或数据流分割成相等或近似相等的两个部分,便于多线程或分布式处理。易语言源码可能展示了如何确定分割点,以及如何有效地分配和处理这些子集。 3. **算法...

    C语言 高精度计算

    例如,在给定的代码片段中,首先读入两个字符串形式的大数,将其转换为逆序的整数数组,再逐位相加并处理进位,最后将结果数组转换回字符串输出。 ### 高精度减法 高精度减法与加法类似,但是需要额外处理借位。...

    算法设计中的有趣算法

    对于大规模矩阵,可以优化搜索策略,如使用二分查找或动态规划来减少比较次数。 2. **矩阵翻转**: 矩阵翻转包括行翻转、列翻转和矩阵整体翻转。行翻转是将矩阵的一行与其下方的行互换;列翻转是将矩阵的一列与其...

    NOIP大纲整理:历年2000-2016NOIP提高组题目分析.pdf

    9. 高精度算法:在某些题目中,需要处理超出常规整数范围的大数运算,例如2007年的"D2^k进制数动态规划/组合数学",需要使用高精度算法。 10. 计算几何:涉及到几何图形的分析、计算和构造,如2013年的"C华容道广搜...

    php优化小实例

    - **内存管理**:对于占用大量内存的变量,尤其是大数组,应该在不再需要时及时销毁,以释放内存。 **实践建议**: - 使用`unset()`函数来销毁不再使用的变量,特别是大数组。 #### 五、避免使用魔术方法 **知识点...

    教案ACM小组内部预定函数.pdf

    - **大数阶乘**:在计算大数阶乘时,由于常规数据类型无法存储大数,需要自定义数据结构和算法来处理。例如,`factorial()`函数使用了动态数组`long a[]`存储中间结果,通过循环乘法并处理进位来计算阶乘。 - **...

    在Linux系统下基于ARM嵌入式的俄罗斯方块.doc

    - 创建一个20*12的大数组模拟游戏屏幕,初始值为0,用空格打印出空白的游戏区域。 - 方块占用4*4的单元,通过在大数组中更新相应的值来显示方块。 - 屏幕上方显示下一个方块和游戏状态(得分、等级、计时等)。 ...

    常用编程ACM[借鉴].pdf

    1. **精度计算**:在处理大数运算时,由于浮点数的精度限制,通常需要自定义算法进行高精度计算。例如,大数阶乘、乘法(大数乘小数和大数乘大数)、加法、减法等。提供的代码示例展示了如何实现这些操作,如`...

    PHPER代码优化建议

    5. 释放内存:及时注销不再使用的变量,尤其是大数组,有助于内存管理。 6. 避免魔术方法:尽量减少对__get, __set, __autoload等魔术方法的使用,因为它们会增加运行时开销。 7. require_once的代价:require_...

    mpir库说明文档-v 2.7.2

    此外,数据分析领域在处理数据量大或需要极高精确度的计算时,也会使用到高精度算法。 标签“c++ 密码学 高精度”强调了MPIR库的三个关键词:首先,“c++”说明了该库的编程语言和使用场景;其次是“密码学”,表明...

    优化PHP代码的40条建议

    5. 注销变量:及时释放不需要的变量,特别是大数组,以减少内存消耗。 6. 避免使用魔术方法:__get, __set, __autoload 这些魔术方法在运行时会有额外开销,尽量减少使用。 7. require_once 代价高昂:require_...

Global site tag (gtag.js) - Google Analytics