内部机制
bandicam 2019-03-03 16-01-23-195.jpg
我们看一下上面的模版中${}表达式，这些表达式都将被{{}}所代替。
bandicam 2019-03-03 16-01-29-658.jpg
然后将字符串生成一个 template。
bandicam 2019-03-03 16-01-36-086.jpg
然后我们可以在 template 找到可变的部分。记住这些占位符，标记为 Parts
bandicam 2019-03-03 16-01-43-996.jpg
接下来移除占位符{{}},创建元素。
bandicam 2019-03-03 16-02-00-947.jpg
因为我们记忆了 parts
bandicam 2019-03-03 16-02-07-875.jpg
template 语法
这里给大家分析一下我们的 html 之所以快的原因，从两个方面进行改善提供模板速度。
对模板进行缓存
之前提及到 html 是一个纯函数，接受模板字符串和数据，我们会对相同的模板进行缓存，区别不去额外地创建相同的模板。
export function html(strings,...values){
let template = templateCache.get(strings);
}
我们看一看下面示例，通过示例给大家解释。创建模板
let sayHi = (name) => html`
<h1>hello ${name}</h1>
`
然后我们两次调用这个模板，之前以及到调用模板sayHi 会返回一个 TemplateResult 的对象他具有模板（template） 和数据（data）引用。
lit001.JPG
其实模板在是在两次调用时是共享的，我们共享 Template 以达到节省资源提供效率的效果
lit002.JPG
对静态和动态节点区分
我们的模板会生产一个 dom 树，然后将 dom 树接入到页面的某个节点下。在渲染之后并不意味我们数据是一层不变。部分数据会进行更新。随意根据数据是否更新我们 dom 树中节点划分为两类，静态的和动态的。在下面的 dom 树中，用蓝色表示静态的节点而用绿色表示动态的节点。
lit003.JPG
lit005.JPG
当数据发生改变我们更新节点相对位置。我们是如何有效更新数据到节点上的，在开始讲解 lit-html 之前我们先看一看 polymer 和 VDOM（虚拟dom）是如何实现动态更新数据到节点。
- polymer 是通过对节点和数据建立关系来实现的，当数据发生改变根据这个关系来更新数据。
- VDOM 是会遍历整个虚拟 dom 来查找发生变化节点后进行更新的
lit009.JPG
lit-html 是介于两者之前，首选通过表达式来实现，根据表达式仅对动态节点进行遍历来检查变化来更新数据到节点上。所以 lit-html 不会遍历整个 dom 树来更新数据，也是 lit-html 优于 VDOm 原因
网友评论