createDocumentFragment() 创建文档碎片节点
2016-03-27 20:12
393 查看
var aqiData = [
["北京", 90],
["上海", 50],
["福州", 10],
["广州", 50],
["成都", 90],
["西安", 100]
];
(function () {
var box = aqiData.filter(function(arr){
return arr[1]>60
}).sort(function(num1,num2){
return num2[1]-num1[1];
});
var liFragment = document.createDocumentFragment();//加注
for(var i=0;i<box.length;i++){
var li = document.createElement('li');
var text = document.createTextNode('第' + (i+1) + '名: ' + box[i]);
li.appendChild(text);
liFragment.appendChild(li);
}
document.getElementById('aqi-list').appendChild(liFragment);
})();
如果没有加粗部分,那么每次添加li节点的时候都会调用一次appendChild函数。
如果先创建一个文档碎片节点createDocumentFragment(),那么就是先把li节点放入集合中,
当添加到aqi-list的时候一次性放入其中,节省了性能。
["北京", 90],
["上海", 50],
["福州", 10],
["广州", 50],
["成都", 90],
["西安", 100]
];
(function () {
var box = aqiData.filter(function(arr){
return arr[1]>60
}).sort(function(num1,num2){
return num2[1]-num1[1];
});
var liFragment = document.createDocumentFragment();//加注
for(var i=0;i<box.length;i++){
var li = document.createElement('li');
var text = document.createTextNode('第' + (i+1) + '名: ' + box[i]);
li.appendChild(text);
liFragment.appendChild(li);
}
document.getElementById('aqi-list').appendChild(liFragment);
})();
如果没有加粗部分,那么每次添加li节点的时候都会调用一次appendChild函数。
如果先创建一个文档碎片节点createDocumentFragment(),那么就是先把li节点放入集合中,
当添加到aqi-list的时候一次性放入其中,节省了性能。
相关文章推荐
- 自定义View进阶(一)——爱的贝塞尔曲线
- Ice通信中间件的基础使用(一)
- SSM编码流程
- Sublime Text 3 使用MarkDown编写带预览的文本
- Sublime Text 3 使用MarkDown编写带预览的文本
- HTTP协议
- 蓝桥杯:数列特征
- jQuery实用代码
- Java常见面试题汇总(一)
- csuoj-1715-Positive Con Sequences
- MacOS U盘安装
- 第三次作业
- 程序员与码农的区别
- 分析system_call中断处理过程
- Linux命令-查看用户的UID和GID
- java实现跨平台
- Git使用
- Animation 动画详解(一)——alpha、scale、translate、rotate、set的xml属性及用法
- 项目技术要点
- 【BZOJ1029】[JSOI2007]建筑抢修【优先队列】【贪心】