手撕Vue-提取元素到内存

接着上一篇文章,我们已经实现了构建Vue实例的过程,接下来我们要实现的是提取元素到内存。

主要是通过文档碎片来实现,文档碎片是一个轻量级的文档,可以包含和控制节点,但是不会像真实的DOM那样占用内存,所以我们可以通过文档碎片来提高性能。

大致的思路是这样的:

  1. 创建一个空的文档碎片对象
  2. 编译循环取到每一个元素
  3. 返回存储了所有元素的文档碎片对象

在这个思路当中有一个注意点:

!> 只要将元素添加到了文档碎片对象中, 那么这个元素就会自动从网页上消失

大概是这样的,例如我们页面当中有一个 p 元素,我们将这个元素添加到文档碎片当中,那么这个元素就会从页面上消失,但是我们可以通过文档碎片对象来访问这个元素。

好了基本上就是这样的,我们来看一下代码:

image-20231014181103761

// 2.根据指定的区域和数据去编译渲染界面
if (this.$el) {
    new Compiler(this);
}
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;
    }
}
posted @   BNTang  阅读(56)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· AI技术革命,工作效率10个最佳AI工具
  1. 1 总会有人离开 王巨星
  2. 2 月亮 孟凡明
  3. 3 迟里乌布
  4. 4 我只能离开 颜人中
  5. 5 达尔文 蔡健雅
  6. 6 夜色滚烫 叶明净
  7. 7 你的星环 路飞文
  8. 8 不再说话 三块木头
  9. 9 黄昏 粥粥和小伙/粥粥
  10. 10 爱不单行 刘大拿
  11. 11 心动贩卖机 PIggy
  12. 12 别来无恙 苏星婕
  13. 13 我们的歌 刘大拿
  14. 14 一直很安静 王贰浪
  15. 15 去有风的地方 清音
  16. 16 雪 Distance Capper/罗言
  17. 17 坏女孩 徐良/小凌
  18. 18 乐园 沧桑Cang333/虎皮蛋/曲甲
  19. 19 Ayo(Explicit) Chris Brown/Tyga
  20. 20 我的美丽feat.海洋Bo 海洋Bo/高睿
  21. 21 世事可爱 粥粥和小伙/粥粥
  22. 22 我记得 赵雷
  23. 23 我想牵着你的手 许嵩
  24. 24 人们都不懂 刘诺然
  25. 25 寻一个你(电视剧《苍兰诀》温情主题曲) TTTTTeehom
  26. 26 子莫格尼 杉和
  27. 27 Cat Cafe Shoffy
  28. 28 风停了雨停了我们还拥抱着 Superluckyqi
  29. 29 寂寞沙洲冷 于潼
  30. 30 三国恋 王巨星
  31. 31 达尔文 林俊杰
  32. 32 有些 颜人中
  33. 33 小模样 张小只ya
  34. 34 是否 程响
  35. 35 楼顶上的小斑鸠 队长
  36. 36 笑场 薛之谦
  37. 37 还是分开 张叶蕾
  38. 38 修炼爱情 林俊杰
  39. 39 二零三 毛不易
  40. 40 雅俗共赏 许嵩
  41. 41 Serendipity 古瑞斯Graps/Zakiya晴子
  42. 42 就让这大雨全都落下·2023 刘大拿
  43. 43 老男孩 筷子兄弟
  44. 44 有何不可 许嵩
  45. 45 缓缓 杜宣达
  46. 46 好久不见 陈奕迅
  47. 47 爱的魔法(Cover 金莎) 封茗囧菌
  48. 48 在你的身边 盛哲
  49. 49 带我去找夜生活 告五人
  50. 50 假面舞会 很美味
  51. 51 STAY The Kid LAROI/Justin Bieber
  52. 52 我好想睡觉的 无敌西红柿
  53. 53 日不落(温柔版)
  54. 54 恋爱画板 锦零
  55. 55 7710 好乐无荒/尹露浠
  56. 56 给你呀(又名:for ya) 蒋小呢
  57. 57 Love Story Taylor Swift
  58. 58 Plain Jane(Remix 13z) 鱼幼微
  59. 59 晚风 7opy/BT07
  60. 60 拜托 孙晨
  61. 61 乌梅子酱 李荣浩
  62. 62 南半球与北海道 范倪Liu
  63. 63 星河万里 Rom邢锐
乌梅子酱 - 李荣浩
00:00 / 00:00
An audio error has occurred, player will skip forward in 2 seconds.

作词 : 李荣浩

作曲 : 李荣浩

编曲 : 李荣浩

制作人 : 李荣浩

背靠在树枝上

蜻蜓落在露水旁乘凉

表白后的乌梅树下

土壤发了芽

美得不像话

再让我想一想

那最腻的情话怎么讲

慢火熬的细水长流

念长长久久

约好到白头

你浅浅的微笑就像 乌梅子酱

我尝了你嘴角唇膏 薄荷味道

是甜甜的爱情 来的这么确定

因为你每个害羞的反应

你浅浅的微笑就像 乌梅子酱

迎风吹过你的头发 我好喜欢

厚厚的甜蜜感用幸福秤杆秤一些收藏

合照一张和夕阳

舀一勺这味道 暮暮朝朝比例刚刚好

果肉配焦糖的温柔

再几个春秋

我喂你一口

你浅浅的微笑就像 乌梅子酱

我尝了你嘴角唇膏 薄荷味道

是甜甜的爱情 来的这么确定

因为你每个害羞的反应

你浅浅的微笑就像 乌梅子酱

迎风吹过你的头发 我好喜欢

厚厚的甜蜜感用幸福秤杆秤一些收藏

合照一张和夕阳

厚厚的甜蜜感用幸福秤杆秤一些收藏

合照一张和夕阳

吉他 : 李荣浩

贝斯 : 李荣浩

鼓 : 李彦超

和音 : 李荣浩

录音师 : 李荣浩

混音师 : 李荣浩

音乐制作助理 : 青格乐

录音工作室 : 北京一样音乐录音室

混音工作室 : 北京一样音乐录音室

母带制作 : 李荣浩

母带后期处理工程师 : 周天澈

母带后期处理录音室 : Studio 21A

点击右上角即可分享
微信分享提示