ul建立1000個li

最近看到的一個問題：如果讓你在ul下建立1000個li，你會怎麼做？

1、當時我想到的笨辦法是利用循環添加子節點，如下例

當數目增長到10000的時候，出現了明顯的時延

window.onload = function(){
        var oUi = document.getElementsByTagName("ul");
        //var oUi1 = oUi[0];
        for(var i=0;i<9998;i++){
            var oLi = document.createElement("li");
            oLi.innerHTML = "li";
            oUi[0].appendChild(oLi);
        }
    };

2、然後後來又想到，可以直接構造字符串，然後更替ul的innerHTML，如下例

當數目增至100000個的時候，纔會出現明顯時延

<script type="text/javascript">
        window.onload = function(){
            var oUi = document.getElementsByTagName("ul");
            var str = "";
            for(var i=0;i<999998;i++){
                str += "<li>li</li>";
            }
            oUi[0].innerHTML = str;
        }
    </script>

3、後來又看到網上說，join拼接字符串的效率要比str+=要高，因此，又採用join的做法對方法2做出了改進。

當數目增至1000000個的時候，纔會出現明顯時延

window.onload = function(){
            var arr = new Array();
            var oUi = document.getElementById("ul");
            arr.push("<li>li");
            for(var i=0;i<999998;i++){
                arr.push("li");
            }
            arr.push("li</li>");
            var oList = arr.join("</li><li>");
            oUi.innerHTML = oList;
        };