ajax一次输出1万条数据库,后端接口一次给出100万条数据,请问你前端怎么分页处理...
面试官既然能这么问,我们从技术的角度出发,探索一下这道题,上手操作了一下:
function loadAll(response) {
var html = "";
for (var i = 0; i < 100000; i++) {
html += "
title:" + '我正在测试'+[i] + "";
}
$("#content").html(html);
}
在chorme浏览器下面 非常卡顿,刷新页面数据非常卡顿,渲染页面大概花掉10秒左右的时间,卡顿非常明显,性能瓶颈是在将html字符串插入到文档中这个过程上, 也就是性能瓶颈是在将html字符串插入到文档中这个过程上,也就是$("#content").html(html); 这句代码的执行, 毕竟有10万个li元素要被挺入到文档里面, 页面渲染速度缓慢也在情理之中。
解决方案
既然一次渲染10万条数据会造成页面加载速度缓慢,那么我们可以不要一次性渲染这么多数据,而是分批次渲染, 比如一次10000条,分10次来完成, 这样或许会对页面的渲染速度有提升。 然而,如果这13次操作在同一个代码执行流程中运行,那似乎不但无法解决糟糕的页面卡顿问题,反而会将代码复杂化。 类似的问题在其它语言最佳的解决方案是使用多线程,JavaScript虽然没有多线程,但是setTimeout和setInterval两个函数却能起到和多线程差不多的效果。 因此,要解决这个问题, 其中的setTimeout便可以大显身手。 setTimeout函数的功能可以看作是在指定时间之后启动一个新的线程来完成任务。
ajax 请求。。。。
function loadAll(response) {
//将10万条数据分组, 每组500条,一共200组
var groups = group(response);
for (var i = 0; i < groups.length; i++) {
//闭包, 保持i值的正确性
window.setTimeout(function () {
var group = groups[i];
var index = i + 1;
return function () {
//分批渲染
loadPart( group, index );
}
}(), 1);
}
}
//数据分组函数(每组500条)
function group(data) {
var result = [];
var groupItem;
for (var i = 0; i < data.length; i++) {
if (i % 500 == 0) {
groupItem != null && result.push(groupItem);
groupItem = [];
}
groupItem.push(data[i]);
}
result.push(groupItem);
return result;
}
var currIndex = 0;
//加载某一批数据的函数
function loadPart( group, index ) {
var html = "";
for (var i = 0; i < group.length; i++) {
var item = group[i];
html += "
title:" + item.title + index + " content:" + item.content + index + "";
}
//保证顺序不错乱
while (index - currIndex == 1) {
$("#content").append(html);
currIndex = index;
}
}
ajax一次输出1万条数据库,后端接口一次给出100万条数据,请问你前端怎么分页处理...相关推荐
- 挣1万,可能靠的是体力。挣10万,也许靠的是脑力。挣100万靠什么?
大家好,欢迎来到南城,我是一个落魄的程序员,我想成为一个强者,但不知怎么迈出那一部,我分析成为强者的一些秘诀,在这个分析给大家! 人为什么要把自己自嘲成弱者,而不是激励自己成为强者? 互联网的诞生和快 ...
- 某女产品经理吐槽:男朋友家里出450万做婚房首付,自己想出40万加上名字,男朋友却不同意!网友:心机女!...
结婚买房怎么买?两家各出多少钱?房产证写谁的名字?--这些是许多即将结婚的情侣都要面对的"死亡"问题,处理好了皆大欢喜,处理不好的话很可能就会分道扬镳. 一个产品小姐姐发帖讲述了自 ...
- 谷歌宣布投资康盛创想100万美元谷歌宣布投资康盛创想100万美元
谷歌宣布投资康盛创想100万美元 [url]http://www.sina.com.cn[/url] 2008年03月26日 07:33 新浪科技 新浪科技讯 北京时间3月26日消息,据国外媒体报道 ...
- 热点 | 天猫精灵卖出100万台,中国智能音箱市场将井喷?
本文系网易智能工作室出品, 聚焦AI,读懂下一个大时代! 大型年度AI人物评选--2017中国AI英雄风云榜,自荐提名进行中! 奖项设置:技术创新人物TOP 10,商业创新人物TOP 10 表彰人物: ...
- 平均年薪30万的深度学习算法工程师,正面临100万的人才缺口
深度学习的突破极大推动了人工智能的发展,并广泛应用在计算机视觉.自然语言处理等领域中.谷歌.百度的IDL.腾讯的AI lab.华为等都在重金布局人工智能,同时,以深度学习为核心技术的人工智能企业不断涌 ...
- 插入100万条有随机姓名,随机电话等字段的数据最快需要几秒?
问题描述:往数据库的teachers表里面随机插入100万条带随机姓名,随机电话等字段的数据,需要多少秒? 接下来,我将从1.需要多少秒?2.为什么会这么快(包括PreparedStatement与S ...
- 为何蔡徐坤每条微博转发量100万+?用大数据扒一扒他的真假流量粉
前段时间央视新闻公开披露流量明星数据造假.作为一名数据猿,我们秉着好奇心点开了NBA新春贺岁形象大使蔡徐坤的微博,发现他的微博转发量除了最新一条之外,其它的基本每条都是转发100万+. 在我们的印象中 ...
- 中国知网html阅读说明什么区别,万方数据库与中国知网的区别都有哪些
作为国内比较知名的两个数据网站,万方数据库和中国知网可以说都是很多学者和同学们在获取数据,或者是刊发数据的首要选择,而很多同学们在使用的过程中,对于万方和中国知网的认识也会逐步的加深,所以这个时候很多 ...
- 上线 5 天获得 100 万用户,可为什么我开发的 App 最终却倒闭了?
[CSDN编者按]风靡一时的 Pokémon GO 曾经获得过无数游戏爱好者的追捧,上线仅一个月下载次数就高达 13000 万次.Jonathan Zarra 开发的聊天应用程序 GoChat 即是专 ...
最新文章
- java应用高内存占用
- android log丢失(二)使用and4.4log kernel机制
- Spring 核心容器类BeanFactory
- Raspkate - 基于.NET的可运行于树莓派的轻量型Web服务器
- lwip+freeRTOS 故障容错 客户端主动发起连接
- win7中安装redis
- linux查看db2表空间大小,DB2查看表空间大小及使用情况
- 互联网公司去年到今年的大批裁员,难道程序员没有未来了吗?
- redhat7 scl 源_redhat 系使用 scl 工具临时使用高级开发工具
- 黑猴子的家:Minimal Install VS Server with GUI VS GNOME Desktop
- 上海伯俊软件科技有限公司面试题
- 无社交,不创业:2017松松兄弟上海聚会剧透
- 前端可以做的SEO搜索引擎优化(摘取)
- 远程控制软件如何实现两台电脑连接
- ct图像的特点以及CT相关
- Python字典以及方法的测试
- 099 复习:中值定理习题之型二:有ξ,有a,b ,型三: 有ξ,η
- 数学定理(2)——凸包算法
- 公司账号如何ios打包上传以及app证书配置
- 松下伺服上下限位信号EtherCAT读取
热门文章
- java自定义变量解析,Thymeleaf内置对象、定义变量、URL参数及标签自定义属性
- 云端计算机可以玩游戏么,手机掌上云电脑是什么?为什么可以玩PC游戏?
- php dos命令用不了,windows下如何使用DOS命令强制复制文件
- 设置中文linux输入ubuntu,Linux_ubuntu怎么设置成中文?ubuntu中文设置图文方法, 很多朋友安装ubuntu后,发 - phpStudy...
- linux添加删除回环地址,CentOS7如何添加本地回环地址?CentOS7添加本地回环地址的方法...
- python三大编程语言_程序员最需要的三种编程语言
- 4位先行进位电路 logisim_你真的了解74系列集成电路吗?让我帮你总结一下
- java中同时两人提交数据_如何一起发送JSON请求和发布表单数据请求?
- 腾讯财报中“最大秘密”:2018云收入91亿元,交首份TO B答卷
- 用Emit技术替代反射