使用createDocumentFragment的渲染数据(节省性能)

时间：2015-01-09 18:45:00 阅读：260 评论：0 收藏：0 [点我收藏+]

标签：

调用多次document.body.append(),每次都要刷新页面一次。效率也就大打折扣了，

而使用document.createDocumentFragment()创建一个文档碎片，
把所有的新结点附加在其上，然后把文档碎片的内容一次性添加到document中，

这也就只需要一次页面刷新就可。

下面是我做的2个实例，一个使用了createDocumentFragment，一个没有使用createDocumentFragment的

demo,以及渲染时间截图：

感兴趣的朋友可以自己手动加点数据试试createDocumentFragment有多节省性能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用createDocumentFragment</title>
</head>
<style type="text/css">
    *{margin:0px;padding: 0px;}
    li{list-style:none;}
    .box{width:600px;margin:10px auto;}
    .box ul li{width:578px;padding:10px;margin-bottom:10px;border:1px solid #000;
        overflow:hidden;}
    .box ul li a{color:#999;width:100%;height:30px;line-height: 30px;border-bottom: 1px dashed #ccc;color:#000;
        text-decoration: none;}
    .box ul li p{color:#ccc;line-height:1.6em;}
    #time{width:100%;color:#f00;text-align:center;font-size:18px;margin-bottom: 20px;}
</style>
<body>
    <div id="box" class="box">
        <ul id="target">
            
            
        </ul>
    </div>
    <div id="time"></div>
</body>
<script type="text/javascript" src="http://static.qiyi.com/js/common/jquery-1.7.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
    var target=$(‘#target‘);
    var oLi=$(‘.box>ul>li‘);
    var time=$(‘#time‘);
    var oHtml=‘‘;
    var data={
        pageInfor:[
                {
            "title":"html5",
            "desp":"万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言（HTML）的第五次重大修改（这是一项推荐标准[1] 、外语原文：W3C Recommendation、见本处参考资料原文内容：[1] ）。"
            },
            
            //想象这个后边还有N条数据

        ]
    }
    function render(){
        var beginTime=new Date().getTime();
        var oFragment = document.createDocumentFragment();
        for(var i=0;i<data.pageInfor.length;i++){
            var oTitle=data.pageInfor[i].title;
            var oDesp=data.pageInfor[i].desp;
            var tmpl=[
                ‘<a href="#">‘+oTitle+‘</a>‘,
                ‘<p>‘+oDesp+‘</p>‘,
            ];
            var str=tmpl.join(‘‘);
            var oLi=$(‘<li></li>‘);
            oLi.html(str);

            oFragment.appendChild(oLi[0]);
        }
        target[0].appendChild(oFragment);
        var endTime=new Date().getTime();
        var differenceTime=‘使用createDocumentFragment的渲染数据总时长‘+(endTime-beginTime)+‘毫秒‘;
        time.html(differenceTime)
    }
    render();
</script>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>没有使用createDocumentFragment</title>
</head>
<style type="text/css">
    *{margin:0px;padding: 0px;}
    li{list-style:none;}
    .box{width:600px;margin:10px auto;}
    .box ul li{width:578px;padding:10px;margin-bottom:10px;border:1px solid #000;
        overflow:hidden;}
    .box ul li a{color:#999;width:100%;height:30px;line-height: 30px;border-bottom: 1px dashed #ccc;color:#000;
        text-decoration: none;}
    .box ul li p{color:#ccc;line-height:1.6em;}
    #time{width:100%;color:#f00;text-align:center;font-size:18px;margin-bottom: 20px;}
</style>
<body>
    <div id="box" class="box">
        <ul id="target">
            
            
        </ul>
    </div>
    <div id="time"></div>
</body>
<script type="text/javascript" src="http://static.qiyi.com/js/common/jquery-1.7.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
    var target=$(‘#target‘);
    var oLi=$(‘.box>ul>li‘);
    var time=$(‘#time‘);
    var oHtml=‘‘;
    var data={
        pageInfor:[
            {
            "title":"html5",
            "desp":"万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言（HTML）的第五次重大修改（这是一项推荐标准[1] 、外语原文：W3C Recommendation、见本处参考资料原文内容：[1] ）。"
            },
            
            //想象这个后边还有N条数据

        ]
    }
    function render(){
        var beginTime=new Date().getTime();
        for(var i=0;i<data.pageInfor.length;i++){
            var oTitle=data.pageInfor[i].title;
            var oDesp=data.pageInfor[i].desp;
            var tmpl=[
            ‘<li>‘,
                ‘<a href="#">‘+oTitle+‘</a>‘,
                ‘<p>‘+oDesp+‘</p>‘,
            ‘</li>‘
            ];
            var str=tmpl.join(‘‘);
            oHtml+=str;
            target.html(oHtml)
        }
        var endTime=new Date().getTime();
        var differenceTime=‘没使用createDocumentFragment的渲染数据总时长：‘+(endTime-beginTime)+‘毫秒‘;
        time.html(differenceTime)
        
    }
    render();
</script>
</html>

技术分享

使用createDocumentFragment的渲染数据(节省性能)

标签：

原文地址：http://www.cnblogs.com/ollie-sk8/p/4213739.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行