接着上一篇文章,我们已经实现了构建Vue实例的过程,接下来我们要实现的是提取元素到内存。
主要是通过文档碎片来实现,文档碎片是一个轻量级的文档,可以包含和控制节点,但是不会像真实的DOM那样占用内存,所以我们可以通过文档碎片来提高性能。
大致的思路是这样的:
- 创建一个空的文档碎片对象
- 编译循环取到每一个元素
- 返回存储了所有元素的文档碎片对象
在这个思路当中有一个注意点:
只要将元素添加到了文档碎片对象中, 那么这个元素就会自动从网页上消失
大概是这样的,例如我们页面当中有一个 p 元素,我们将这个元素添加到文档碎片当中,那么这个元素就会从页面上消失,但是我们可以通过文档碎片对象来访问这个元素。
好了基本上就是这样的,我们来看一下代码:
代码语言:javascript复制// 2.根据指定的区域和数据去编译渲染界面
if (this.$el) {
new Compiler(this);
}
代码语言:javascript复制class Compiler {
constructor(vm) {
this.vm = vm;
// 1.将网页上的元素放到内存中
let fragment = this.node2fragment(this.vm.$el);
console.log(fragment);
}
node2fragment(app) {
// 1.创建一个空的文档碎片对象
let fragment = document.createDocumentFragment();
// 2.编译循环取到每一个元素
let node = app.firstChild;
while (node) {
fragment.appendChild(node);
node = app.firstChild;
}
// 3.返回存储了所有元素的文档碎片对象
return fragment;
}
}
我正在参与2023腾讯技术创作特训营第三期有奖征文,组队打卡瓜分大奖!