js大数据量如何实现页面的局部渲染（不是局部刷新）--解决方法

Posted 2023-05-11

之前我在http://zhidao.baidu.com/question/140423644.html提问,有人回答了,但是不是我想要的结果,我没有说清楚我的意思.

就是一个页面要显示10000行数据,不考虑前面的性能问题,假如就要显示出来(而且在一页里面,不再分页了),我要慢慢的显示(不然全部显示必然崩溃...),如何做到??

现在我无意间看到这个jquery插件,应该就是我想要的.infinite-scroll..
具体情况你们继续百度吧.我也不太清楚.

把看到的区域当画布，创建足够能展现界面的Dom就够了。
比如一个屏幕的高度一般是800像素左右，假设一条记录占用的高度是20像素，我们只用创建40个对象即可。
接下来就是对这40个对象进行数据填充，通过滚动条调整填充数据的起始下标。
10W条记录，IE下有些卡
<style type="text/css">
.panel
overflow:scroll;
width:200px;
height:80%;

.panel .scroll

.item
width:500px;
height:20px;

.odd
background-color:#ccc;

.items
overflow:hidden;
position:absolute;

.red
color:red;

.green
color:green;

</style>
<script>
window.console = window.console || log: function() ;

function absolutePoint(element)
var result = [element.offsetLeft, element.offsetTop];
element = element.offsetParent;
while (element)
result[0] += element.offsetLeft;
result[1] += element.offsetTop;
element = element.offsetParent;

return result;

function ListView(options)
options = options || ;

var self = this,
$C = function(tagName) return document.createElement(tagName); , // 创建节点
p,
height,
item_height, // 项高
view_count, // 可见项条数
parent = options.parent || document.body, // 容器
height, // 面板历史高度
div_panel = $C("div"),
div_scroll = $C("div"),
div_items = $C("div"),
div_items_list = [$C("div")],
freed = [div_panel, div_scroll, div_items]; // 可释放的对象

div_panel.className = "panel";
parent.appendChild(div_panel);

div_items.className = "items";
document.body.appendChild(div_items);

div_scroll.className = "scroll";
div_panel.appendChild(div_scroll);

div_panel.onscroll = function()
doChange();

div_panel.onresize = function()
doChange();


div_items_list[0].className = "item";
div_items.appendChild(div_items_list[0]);

div_scroll.style.width = div_items_list[0].clientWidth + "px";
item_height = div_items_list[0].clientHeight;

p = absolutePoint(div_panel);
with(div_items.style)
left = p[0] + "px";
top = p[1] + "px";
width = div_panel.clientWidth;
height = div_panel.clientHeight;

/**
* 界面改变
*/
function doChange()
if (!item_height) return;
var i, div;
if (height != div_panel.clientHeight)
height = div_panel.clientHeight;
view_count = parseInt(height / item_height);
for (i = div_items_list.length; i < view_count; i++)
div = $C("div");
div.className = "item" + (i % 2 == 0 ? "" : " odd");
div_items.appendChild(div);
div_items_list.push(div);

for (i = 0; i < div_items_list.length; i++)
div_items_list[i].style.display = i < view_count ? "" : "none";

div_scroll.style.height = div_panel.clientHeight + options.count - view_count + "px";
console.log(["view_count", view_count]);

div_items.scrollLeft = div_panel.scrollLeft;
if (!options.ondrawitem) return;
i = Math.min(view_count, div_items_list.length);
while(i--)
// 重新绘制
options.ondrawitem(i + div_panel.scrollTop, div_items_list[i]);



doChange();
this.doChange = doChange;
/**
* 释放Dom对象
*/
this.dispose = function()
var i = freed.length;
while(i--)
freed[i].parentNode.removeChild(freed[i]);

i = freed.length;
while(i--)
div_items_list[i].parentNode.removeChild(div_items_list[i]);



function format(template, json)
if (!json) return template;
return template && template.replace(/\$\(.+?)\/g, function()
return json[arguments[1]];
)

window.onload = function()
var i = 100000, data = new Array(i);
while(i--)
data[i] = index: i, random: Math.random(), key: (+new Date()).toString(36) ;

var listview = new ListView(
count: data.length,
ondrawitem: function(i, div)
div.innerHTML = format(" <em>$index </em>  <span class=\"red\">$random </span>  <span class=\"green\">$key </span>", data[i]);

);
;
</script> 参考技术A 你可以采用类似图片延时加载的方法，采用js客户端分页（客户端是一次保存1w条数据），一次只加载100条数据，不过我觉的你这个一次显示1w数据，怎么会有这样的需求？，一次怎么也看不了那么多数据。

JavaWeb-Ajax笔记汇总 --- 全局刷新和局部刷新；ajax 中使用 XMLHttpRequest 对象（四步）；json 的使用

异步请求特点：某一个时刻，浏览器可以委托多个异步请求对象发送请求，无需等待请求处理完成

1、全局刷新和局部刷新：

---

1）全局刷新：整个浏览器被新的数据覆盖，在网络中传输大量的数据（浏览器需要加载，渲染页面）。

2）局部刷新：在浏览器的内部，发起请求，获取数据，改变页面中的部分内容，其余的页面无需加载和渲染（网络中数据传输量少， 给用户的感受好）。

ajax 是用来做局部刷新的，局部刷新使用的核心对象是【异步对象（XMLHttpRequest）】，这个异步对象存在浏览器内存中 ，使用 javascript 语法创建和使用。

 

2、Asynchronous JavaScript and XML：

---

ajax ---> Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）:

• xml 是网络中的一种传输的数据格式（json 替换了 xml）

1）ajax 是一种做局部刷新的新方法，不是一种语言，ajax包含的技术主要有 javascript , dom , css ,  xml 等等（核心是 javascript 和 xml）。

2）javascript 负责创建异步对象， 发送请求， 更新页面的 dom 对象，ajax 请求需要服务器端的数据。

 

3、ajax 中使用 XMLHttpRequest 对象（四步）：

---

1）创建异步对象（第一步）：

var xmlHttp = new XMLHttpRequest();

 

2）给异步对象绑定事件（第二步）：

xmlHttp.onreadystatechange //当异步对象发起请求，获取了数据都会触发这个事件,这个事件需要指定一个函数,在函数中处理状态的变化

如何获取服务器端返回的数据？

• 使用异步对象的属性 responseText    // xmlHttp . responseText 

当请求的状态变化时，异步对象会自动调用 onreadystatechange 事件对应的函数（回调：当请求的状态变化时，异步对象会自动调用 onreadystatechange 事件对应的函数）

栗子：

xmlHttp.onreadystatechange= function()
    //处理请求的状态变化
    if(xmlHttp.readyState == 4 && xmlHttp.status== 200 )
    
        //可以处理服务器端的数据，更新当前页面
        var data = xmlHttp.responseText;
        document.getElementById("name").value= data;
    
 

 

readyState（异步对象的属性） --- 异步对象请求的状态变化：

•    0：创建异步对象时    //new XMLHttpRequest ( ) ; 
•    1：初始异步请求对象    //xmlHttp.open ( ) ;
•    2：发送请求    //xmlHttp.send ( ) ;
•    3：从服务器端获取了数据，注意3是异步对象内部使用， 获取了原始的数据
•    4：异步对象把接收的数据处理完成后，此时开发人员在4的时候处理数据（更新当前页面）

    异步对象的 status 属性，表示网络请求的状况（200， 404， 500），当 status == 200 时，表示网络请求成功。

 

3）初始异步请求对象（第三步）：

异步的方法：

• open ( ) . xmlHttp . open ( get / post ,  "服务器端的访问地址" ,  true / false ) // true 为异步请求，false 为同步请求 ，默认为 true

• 异步请求特点：

               1)某一个时刻，浏览器可以委托多个异步请求对象发送请求，无需等待请求处理完成；

               2)浏览器委托异步请求对象工作期间，浏览器处于活跃状态。可以继续向下执行其他命令；

               3) 当响应就绪后再对响应结果进行处理 。

• 同步请求特点：

               1)某一个时刻，浏览器只能委托一个异步请求对象发送请求，必须等待请求处理完成；

               2)浏览器委托异步请求对象工作期间，浏览器处于等待状态。不能执行其他命令；

               3)不推荐使用。 

栗子：

xmlHttp.open("get", "loginServlet?name=zs&pwd=123",true);

 

4）使用异步对象发送请求（第四步）：

xmlHttp.send();

 

4、json使用：

---

ajax（发起请求）---> servlet ---> 返回一个 json 格式的字符串（可以将 json 对象格式看作成一个 "key:value"格式） // name:"河北", jiancheng:"冀","shenghui":"石家庄"

json分类：

• json对象 ，JSONObject
• json数组， JSONArray    // [   name:"河北", jiancheng:"冀","shenghui":"石家庄" , name:"山西", jiancheng:"晋","shenghui":"太原" ]

为什么要使用 json？

• json 格式好理解
• json 格式数据在多种语言中，比较容易处理。 使用 java， javascript 读写 json 格式的数据比较容易
• json 格式数据它占用的空间小，在网络中传输快， 用户的体验好

处理 json 的工具库： gson（google）； fastjson（阿里），jackson， json-lib

• 在 js 中，可以把 json 格式的字符串，转为 json 对象， json 中的 key，就是 json 对象的属性名。