渲染和dom操作的区别

dom和js主线程的桥接必定有消耗。 而dom render主要靠innerHTML吧。。。模板很多也是基于innerHTML的 这个模板范围有点宽。。 我理解模板有 1：字符串的解析和编译，例如arttemplate.js 2：dom-based 类似vue.js 3：两者杂交的 类似react.js 从最初始的是 innerHTML 完成了string到dom 缺点很多。比如安全，还很笨，因为会重新替换渲染一遍，Backbone就是这样，还很慢。。 dom-based 输出当然是dom了。 输入有多种，比如react的jsx 比如angular的模板字符串，比如angular直接写在html中。 viewmodel数据和view绑定，不用在很小的修改后生成很长的字符串，所以可以说，与dom无关。 第三种。使用的virtual-dom 同样基于脏检查。 但是 这个diff发生在view层，因为react只关注view层。 所以也能实现局部更新。

赞楼上. 如果楼主说的就是模板是服务器端模板比如mustache, jinja之类的, 模板渲染简单的说就是把拼字符串（HTML）的活让服务器来做. 拼好的字符串传输给浏览器一次建成dom树（理想状态）. 前端渲染的话，dom操作耗时, 经常还要干些拼HTML的活, 自然就慢了. ———— 微博 @flowmemo 关注JavaScript, 前端, 欢迎交流.

【 在 dcy0701 的大作中提到: 】 : dom和js主线程的桥接必定有消耗。 : 而dom render主要靠innerHTML吧。。。模板很多也是基于innerHTML的 : 这个模板范围有点宽。。 : ................... 学习。

能麻烦解释下dombased吗 【 在 dcy0701 (电路分析100分) 的大作中提到: 】 : dom和js主线程的桥接必定有消耗。 : 而dom render主要靠innerHTML吧。。。模板很多也是基于innerHTML的 : ...................

dom-based 输出当然是dom了。 输入有多种，比如react的jsx 比如angular的模板字符串，比如angular直接写在html中。 viewmodel数据和view绑定，不用在很小的修改后生成很长的字符串，所以可以说，与dom无关。 第三种。使用的virtual-dom 同样基于脏检查。 但是 这个diff发生在view层，因为react只关注view层。 所以也能实现局部更新。 【 在 w153409018 的大作中提到: 】 : 能麻烦解释下dombased吗

我的理解是这样: 在渲染的部分, 对性能影响大的是 relayout, 所以要尽量避免 relayout. 如果直接进行 dom 操作(添加,删除,直接修改布局和位置等), 就会强制出发浏览器的 relayout, 如果比较频繁就会 fps 下降. 模板分前后两端. 后端很直接, 模板在后端载入好, 浏览器收到的就是一个完整的网页,所以就只需要一次 layout. 前端模板,就只是把 dom 内容全都准备好, 然后一次性的加到文档流里, 这样就只有一次 relayout, 对性能影响减少. 这种做法和自己手动拼好 dom 一次性append 上去,在性能上应该基本一样.