文档碎片提升网页加载效率-优快云博客

本文链接：https://blog.youkuaiyun.com/wogeiniziyou/article/details/7573437

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

<html>
<head>
<script type='text/javascript'>

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 οnlοad="insertMessage()">
     <p>Hello World!</p>
</body>
</html>

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

<html>
<head>
<script type='text/javascript'>

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 οnlοad="insertMessage()">
     <p>Hello World!</p>
</body>
</html>