在可预见的情况下，直接写好html元素和用js插入html元素对比？

起因，写了两个html页面，body中只有div块，将div个数从1百加到1千后在浏览器中调试显示加载时间DOMContentLoaded:50ms左右（两者区别不大），加到1万后，页面1显示500ms左右，页面2显示100ms左右。
求解：在可预见的情况下，直接写好html元素和用js插入html元素在各方面的对比。

页面1：

 <!DOCTYPE html>
<html>
<body>
<div>hello world</div>
..........
.......
....
<div>hello world</div>
</body>
</html>

页面2：

 <!DOCTYPE html>
<html>
<body>
<div id="div1">hello world</div>
</body>
<script>
for(var i=0;i<9999;i++){
var div = document.createElement("div");
var node = document.createTextNode("hello world");
div.appendChild(node);
var element =document.getElementById('div1');
element.appendChild(div);
}
</script>
</html>

1、从显示性能上看，肯定是写好再加载更快；
2、从灵活和易维护性上看，那就是用js插入比较好；

总结：根据你的业务需求来选择，如何做取舍，要性能还是要灵活性，要是两者都不可或缺，那建议折中，能写好的尽量写好，需要灵活的地方就用js插入。

虽然想太多没啥错，那么这里就只提一个问题，实际有什么网站会需要瞬间有这么多元素需要操作

js快点吧，1w行hello world文件大小远远超过js的动态创建的文件大小了，网络慢下载文件就是个问题

js动态创建单一，1w行html代码浏览器解析也要时间，你自己测试也有结果了

第一个的缺点（致命）：

去加载一个超大数据量的网页是极其耗费资源的，再不借助js下，浏览器可不知道什么懒加载（而是一次性下载整个资源）；
没有哪个用户愿意等一个浏览器转圈圈转半年的。

第二个优点

数据可控岂不美哉。什么一次加载完！？不不！！分段加载，懒加载，随便选。保证用户体验第一位
最后就是你的现在的js插入代码是可以优化的(*^__^* ) 嘻嘻……

懒加载是你到哪，加载到哪，jquery的优点就是异步提交局部刷新，每次请求少量数据，不必一次加载完一次显示，你看看淘宝就是，你划屏幕才加载图片呢

统一回复，各位的见解正是我要的答案，公司前辈给的回复也是：在对比和取舍上，两种方法应在业务需要，客户体验，代码灵活性和易维护性等方面考虑，性能方面也是采用懒加载方式，按需加载，采用最合适的搭配达到最佳效果。

现在好多网站，都是你看哪加载哪里，异步什么的

性能有差异，DOM操作数量多的我一般用第二种写法。少的话第一种。

就我个人来讲，基本上都是采用的js加载，当然那种只有一两个div的肯定就是直接写了。