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
算法进行比较(静态属性其实不需要比较的),同等级比较,得出结果,会得出差异,这些差异有分为好几种=》