页面数据太多（几百上万条）导致页面卡顿，此时需要对页面进行优化
重点：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>
后续更新中。。。