Angular编译器历史

时间:2021-1-8 作者:admin

Angular编译器分为4个步骤,

一共发生了三次重大改变,分别是在

Angular2 模版编译器(2016)

  • 生成的模版太长了,增加了太多了字节,包太大了

Angular4 ViewEngine编译器(2017)

他会生成一个数据结构,运行时数据结构传递到Angular解释器

  • 将模版转化为数据结构,遍历数据接口执行DOM节点更新检测,但是遍历时候会消耗性能
  • npm包发布困难,必须使用ngc遍历生成metadata.json文件
  • 生成的文件不同,易读性
  • 如果组件改变了,他的依赖也会重新编译
  • 不利于摇树优化

Angular8 lvy编译器(2018)(摇树,灵活性)

  • 动态组件使用更加方便
  • 增量DOM
  • 打包编译更快,包更小
  • TypeCheck更加完全
  • 不在生成metadata.json,ngfactory.js
  • Easy to bug
  • 动态组件更加方便

Virtual DOM & Incremental DOM

Virtual DOM通过js,初始化时,模拟真实的DOM节点,产生的一个‘虚拟DOM‘,这种虚拟DOM比起真实的DOM少了很多属性,但是也添加一个静态属性,<input type='text' value='123' />,其中type='text'就是静态属性,每当发生增加或删除时,会创建一个新的虚拟DOM,会与旧的虚拟DOM比较,通过diff算法进行比较(静态属性其实不需要比较的),同等级比较,得出结果,会得出差异,这些差异有分为好几种=》

布局图绘时间损失

垃圾回收时间损失

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。