阅读 1735

Angular编译器历史

Angular编译器分为4个步骤,

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

Angular2 模版编译器(2016)

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

Angular4 ViewEngine编译器(2017)

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

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

angular4编译后会生成4种类型文件

  • *.metadata.json: 把.ts(component, NgMdule)文件里的decorator信息和constructor的依赖注入信息用json的形式记录下来,然后第二次编译的时候直接从json里面获取。二次编译是指引用第三方的库,在编译自己项目的时候需要对第三方重新编译
  • *.ngfactory.js: 里面包含了创建组件、渲染组件涉及DOM操作,执行变化简化检查(获取oldValue和newValue对比)、销毁组件的代码
  • *.js: 是.ts(component/NgModule)文件里除了decorator和constructor之外的内容,编译成了es6代码
  • *.ngsummary.json: 和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算法进行比较(静态属性其实不需要比较的),同等级比较,得出结果,会得出差异,这些差异有分为好几种=》

文章分类
阅读
文章标签