用文档碎片代替页面多次刷新

最新推荐文章于 2024-04-06 10:51:37 发布

cxc3214

最新推荐文章于 2024-04-06 10:51:37 发布

阅读量258

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript 文章标签：文档 function

本文链接：https://blog.youkuaiyun.com/cxc3214/article/details/2908094

javascript 专栏收录该内容

7 篇文章

订阅专栏

本文对比了两种不同的页面元素插入方法：一种利用文档碎片对象(document fragment)进行批量添加，仅触发一次页面重绘，有效提升了用户体验；另一种逐个将元素添加到页面中，导致页面多次重绘，效率较低。通过具体实例说明如何使用文档碎片来优化页面加载性能。

使用文档碎片样式，这样页面就只刷新了一次

function insertMessage(){
var arrText = ["first","second","third","fourth","fifth","sixth","seventh","eighth","ninth","tenth"];
var oFragment = document.createDocumentFragment();
for(var i=0;i<arrText.length;i++){
    var oP = document.createElement("p");
    var oText = document.createTextNode(arrText[i]);
    oP.appendChild(oText);
    oFragment.appendChild(oP);
}
document.body.appendChild(oFragment);
}

</script>
</head>
<body onload="insertMessage()">
<p>Hello World!</p>
</body>
</html>

而以下的样式则页面需要刷新十次，降低了速度

function insertMessage(){
var arrText = ["first","second","third","fourth","fifth","sixth","seventh","eighth","ninth","tenth"];
for(var i=0;i<arrText.length;i++){
    var oP = document.createElement("p");
    var oText = document.createTextNode(arrText[i]);
    oP.appendChild(oText);
    document.body.appendChild(oP);
}
}

</script>
</head>
<body onload="insertMessage()">
<p>Hello World!</p>
</body>
</html>