Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

从模板引擎聊聊 Web 架构方向

  传统的模板引擎都是字符串模板,在一个字符串中放置一堆特殊标识符,然后输入一组数据将这些标识符替换成目标数据。后来由于数据的实时性增加,出现了弥补字符串模板实时性能问题的结构模板。比如 Angular 的 DOM 模板和 React 的 vDOM 模板都属于结构模板。
  字符串模板就是每次填入数据后生成一段 HTML,然后程序使用 innerHTML 之类的数据更新到 DOM 上。每次数据时,相应的元素就要被重新生成一遍,所以对于更新频繁的场景会有性能问题。结构模板解决了这个问题,将数据绑定到渲染完后的实例上。每当数据变化时,找到实例上相应的位置单独变化。这样就避免了大量的 innerHTML 操作,更适合高实时需求的数据更新场景。
  但并不是结构模板就一定比字符串模板好。比如有一个巨大的复杂模板,插入一个巨大的数据把这个模板重复了好多次,并且这个数据没有实时更新的需求。那么此时用结构模板就会慢成狗,而字符串模板反而快。这是因为对大批量的 DOM 做生成操作时最快的方式是 innerHTML,逐个元素去创建反而是非常慢的。结构模板的渲染普遍都是逐个元素创建,所以这种情况无论是 Angular 还是 React 都会卡成狗。其实 Angular 和 React 也想优化这个问题,只是碍于指令(模块)的嵌套,很难真正实现字符串模板优化而已。
  然而,结构模板通常比字符串模板更适用这一点是千真万确的。上面我举的例子是一种特殊的情况,它是极少数的。只有极少数情况下字符串模板才会比结构模板高效。大部分时候数据是有更新需求的(因为数据通常都从服务器异步读取),而且一般情况下也不会出现一个模板渲染出大到卡爆的 DOM 节点量。所以结构模板比字符串模板更通用,也更容易使用。这里直接绑定到模板上的数据称为 VM 层(这些数据改变会触发视图更新),这也是我眼中所谓 MVVM 的定义。
  MVVM 给我们带来的只是更方便的数据展示,它并没有解决架构上的问题。但是从 Angular 的 directive 到 React 的组件模式,再到 Polymer 的完全组件模式。未来的方向应该是朝着「组件化」发展,而且 MVVM 这套「数据绑定」的概念也将在很长一段时间内适用。所以呢?想造轮子趁早!
网名:
54.144.24.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^