@xujif 既然讨论技术，我也就谦虚点。

我没有费尽心思优化。document.createElement是js里面一个比较基础的方法，是由各个浏览器厂商根据w3c的规范进行实现的。很早就有的方法。

这个方法是在内存里面构建dom元素
而innerHtml也是浏览器原生方法，但它接收字符串。

添加dom节点的时候实际上是需要添加一个dom对象的
createElement相当于在内存中描述好了这个对象，

而innerHtml的字符串是需要浏览器自己解析字符串，并且构建dom对象的，相当于多了字符串解析的过程

这个快慢还不明了?

关于你上面提到的+=，你可以反推一下，这个符号重载的拼接字符串就算是慢，有可能慢40%吗，它真正的开销在于字符串解析

我是一个比较较真的人，我喜欢研究技术。请用你理性的经验说服我。

上面那个是女孩，她对性能不追求，不好强求，但作为一个认真的程序员，就算不写这样的代码，也应该知道哪些东西是真正能提升代码性能和质量的。

@xujif 你跟我讲技术，我没听？

你扯7扯8，只能显露你的无知，

拜托你多百度一下，多学点东西。你以为前端就你想的那样，就你还能来看javascript代码？

就你这样，对待知识一点不认真、不严谨，就在这里装b



好的前端开发都是懂后台的，你写的那些东西，我不用看就知道是啥玩意。

我上面说的知识点，你自己稍微百度一下，看看你自己是多无知。



我这么无礼是因为我见不得对待知识不谦逊的人，就知道瞎放屁，一句都不在理。

一行代码没写过，就来跟我讨论dom渲染性能。

@xujif 我说你这种sb能别在这里丢人现眼

模板引擎自己createElement?

这个方法是bom原生 浏览器自己实现的方法。

国内东西做的垃圾就因为你这样不求甚解 敷衍鸟事。

2b东西

@xujif 所有的编程语言里面的思想，理念都是相通的。只有你这样的sb才会觉得不能类比。

你举得性能例子是为的举例而举例。
渲染数据一般都是要渲染一些集合，是需要用到循环的。

我举得例子是我实际开发经验中，经常碰到的，的确能提升性能的例子。

你讲技术，讲不出个东西，一说到一些深的东西，你说你不清楚。

你不清楚就不要装b，搞的好像你要在你不懂的领域装b，别人看不出你是个sb一样。

@zythum “优化是浏览器去做的”

行了，没别的了，你做的东西我明白了。


楼主问这个问题说明他不是很清楚。这个时候他该使用bom的一些原生方法去渲染结构。

只有经历过这些，才会思考，有没有更好的方法。怎样做更好。

模版引擎是怎么实现的。他们有哪些差异...


什么都不明白就直接开始用模版引擎，就跟你现在一样，对性能一无所知。

就等着浏览器帮你优化。当然大多数应用不太需要这些性能的提升。


但移动端或许需要，以及未来更多的智能设备。

@xujif 你是sb吗 你不知道手动操作内存，比自动的效率高很多吗。

懒得和你当键盘侠了，你去问问做ios的 资深的 看 手动效率高 还是 自动高。。

自动是因为程序员能力不足，人家给你一种舒服的方式，降低难度。

真要做好的 还得是手动人工管理的东西。



另外createElement相关方法是DOM 1 specification 里面就有的，也就是说ie6也是支持的。

效率的提升同样适用，别拿你不知道的兼容性说事，你是做前端的吗？

你是做开发吗，写过多少行代码，就研究编译器了？

@Ahri 我想楼主并没有玩插件这样一个东西，chrome有许多好用的前端插件。

比如有一个插件名字叫做 SnappySnippet


比如我现在要模仿支付宝做一个页面，我用这个插件只需要点一下按钮，html、css、全部搞定了


楼主呢，需要多长时间呢？是不是需要开发一天呢？ 这就是效率。不用再争论了

@xujif http://jsperf.com/appendchild-vs-documentfragment-vs-innerhtml/61


sb东西 性能高了40% 另外createDocumentFragment这个方法dom结构只会reflow一次

作为一个程序员，天天写些垃圾代码，从不思考怎么提升代码性能，有什么用？

@zythum 性能差异微乎其微？好意思说出口？

你看老外现在研究的前端框架，没什么人讨论jquery了吧？因为大家都会用了，现在要求精了

react为什么这么多人用，难道不是因为别人的性能高？ react的开发成本比jquery可高多了


假设你只要完成任务，ok你现在的技能足够了。假设你要做的性能好，远远不够。

代码级别的性能就应该开始追求，那怕一点点。

@xujif 没写过createElement就不要bb，你给的测试例子是循环使用createElement不断的添加dom借点

有点经验的人都知道使用document.createDocumentFragment在内存中创建好所有dom元素，最后才添加到dom中。

你猜什么效率高，你是个猪，你就知道什么效率高？ 操作内存不比浏览器自己解析字符串，然后根据字符串的含义，一个个创建的效率高？

你能先看玩c++的书，再跟我bb？

首先 你得有个好用的梯子。

@zythum createElement是在内存中一个个创建元素，innerHtml接受一堆字符串，需要对字符串进行解析，哪一种效率高，不言而喻。

react的本质也是在调用createElement这样的方法，只是他用jsx这种比较友好的方式，完成了对dom结构的描述。

react是innerHTML？ 你能静下心来读读别人的文档么？不要不懂装懂。

@zythum 只有每一个都createElement过的人，才能体会为什么react比较好，怎样渲染dom效率高。

不然一开始就用一些类库渲染，永远不知道哪种东西好，为什么好。

新版chrome 查看dom结构的时候，可以看到那些元素被动态的修改了。

至少领先其他工具几年。

不用chrome开发 不能算前端，真的


新版chrome的调试工具，javascript下断点的时候，变量运行的值，直接写出来了。

其他调试工具，还需要用鼠标指到变量上面一个一个的看。效率低的不行。



chrome的调试工具 比其他所有都强，比很多ide都复杂。

它支持很多sublime的快捷键，ctrl p，所有文件搜索。

哪里坑了？ 自动追加分号，这么好的功能。

没看到老外现在代码，好多都不加分号了。

不加分号的代码看着舒服多了啊。


https://github.com/feross/standard

其实我觉得有些广告比电视好看多了，比如那个什么abc卫生巾，那广告里面的女主角，大腿又白又嫩。不能因为一部分恶俗广告。而放弃了整片森林啊。

@nowcoder 基础为何不看老外的代码

自己写的固然有好处，但就是基础的东西，人家写出来的 也比你写的好 写的性能高


为何不能虚心抄袭别人的东西，偏要自己去闭门造车？

@nowcoder

与其在这上面浪费时间 不如学好英语

至少90%的开发问题，都有老外已经解决了

与其重复造轮子 不如用更好的轮子