对于前端的优化接触的太少了，平时在pc端上感觉正常，但是到了移动端，时间一长就不行了。今天说说html中ul的优化问题,我给出了一种传统的写法(耗时的),一种优化的写法.
模拟一种业务流程吧，类似留言墙，大家留言后，要将留言显示在留言墙上面。
开始我们的代码编写吧
如果在平时我会这样写，但是假如我接收了一百万条数据，代码如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>没有进行性能优化的案例</title>
</head>
<body>
<p id="pelement" style="height:200px;overflow-y:scroll;"></p>
<script>
var list = function(container,items,itemheight){
this.container = container;
this.items = items;
this.itemheight = itemheight;
this.init();
this.update();
}
list.prototype.init = function(){
//创建一个ul
this.ul = document.createelement(ul);
this.ul.style.position = relative;
//将元素添加到p中
this.container.appendchild(this.ul);
}
list.prototype.update = function(){
for(var i = 0; i < this.items.length; i++){
var litag = document.createelement("li");
litag.textcontent = this.items[i]
this.ul.appendchild(litag);
}
}
//模拟数据
var array = [];
for(var i = 0; i < 1000000; i++){
array.push(i)
}
new list(document.getelementbyid("pelement"),array,16);
</script>
</body>
</html>
整整使用了大约一分钟，我的天啊，我想大家早已散去，可以看到时间都花在了rendering中，并且要等所有的li都渲染好了之后，才会显示，用户体验感极差.
优化方案就是减少rendering.设定数量合适的li标签，根据位置调整li的内容与样式
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>性能优化</title>
</head>
<body>
<p>list的性能优化</p><br>
<br>
<br>
<p id="pelement" style="height:200px;overflow-y: scroll;"></p>
<script>
var list = function(container,items,itemheight){
this.container = container;
this.items = items;
this.itemheight = itemheight;
this.init();
this.update();
}
list.prototype.init = function(){
//创建一个ul标签
this.ul = document.createelement(ul);
this.ul.style.position = relative;
//获取的显示的高度内可以最多显示多少条数据
var len = this._maxlength();
var html = ;
for(var i = 0; i < len; i++){
html += "<li> + this.items[i] + </li>;
}
this.ul.innerhtml = html
this.container.appendchild(this.ul);
var self = this;
this.container.addeventlistener(scroll,function(){
self.update()
})
}
list.prototype._maxlength = function(){
var h = this.container.offsetheight;
return math.min(math.ceil(h / this.itemheight),this.itemheight);
}
list.prototype.update = function(){
//计算出ul的高度
this.ul.style.height = this.items.length * this.itemheight + px;
this.ul.style.margin = 0;
//计算出滑动条目前位置前有多少个li标签
var start = math.floor(this.container.scrolltop / this.itemheight);
console.log(start:,start)
//获得所有的子节点
var items = this.ul.children;
//获得长度
var len = this._maxlength();
for(var i = 0; i < len; i++){
var item = items[i];
if(!item){
item = items[i] || document.createelement("li");
this.ul.appendchild(item);
}
var index = start + i;
item.innerhtml = this.items[index];
item.style.top = this.itemheight * (index) + "px";
item.style.position = "absolute";
}
}
//模拟数据
var array = [];
for(var i = 0; i < 1000000; i ++){
array.push(i)
}
var list = new list(document.getelementbyid("pelement"),array,16);
</script>
</body>
</html>
再来看一眼性能图
同样的写法这样速度直接提高了20倍.
更多html中ul标签的优化。