Angular2+ 进阶开发实战 广发证券

Transcription

1 Angular2+ 进阶开发实战 广发证券

2 关于我 Senior Securities( 广发证券 ) Core co-author of " 揭秘 Angular 2 Webpack China official team member Former tencent&baidu

3 大纲 ( 一 ) 性能优化探索 ( 运 行行时 ) ( 二 ) 工具与 工程化 ( 静态 ) ( 三 ) 常 见问题原因及解决 方法

4 ( 一 ) 性能优化探索

5

6 Angular 响应式处理理链路路 Trigger Change Detection Root Click Timer Zone 类深度优先 XHR Leaf

7 链路路优化 Event Zone.js Change Detection Root Component Leaf Component

8 典型例例 子 : 元素拖放

9 @Component({ template: ` <item // (touchstart)= touchstart($event) (touchmove)= touchmove($event) (touchend)= touchend($event) ></item> ` }) export class BoxComponent { constructor() { } touchstart(event: any) { // 记录原始位置 } touchmove(event: any) { // 更更新模型数据 } touchend(event: any) { } }

10 红 米 Note 4X 模拟 500 个组件 * 4 个 binding 每次 `touchmove` 事件都触发变化检测执 行行, 耗时约 15-20ms

11 Zone Click Timer 部分过滤 ALL Change Detection XHR

12 NgZone class NgZone { run(fn: () => any) : any runoutsideangular(fn: () => any) : any //... }

13 Zone Click Root Zone Timer fork XHR Angular Zone trigger Change Detection

14 Root Zone ngzone.run(cb) fork ngzone.runoutsideangular(cb) Angular Zone

15 export class BoxComponent { constructor( private ngzone: NgZone ) { } touchstart(event: any) { this.ngzone.runoutsideangular(() => { // 使 用DOM API 绑定 touchmove 事件 }); } touchmove(event: any) { // 更更新元素样式 } touchend(event: any) { // 移除 touchmove 事件监听 // 更更新模型数据, 保持与视图 一致 this.ngzone.run(() => { // 调 用run 防 止 一些异常情况出现 }); } }

16 NgZone S M M M M M E Change Detection

17 RootZone M M M M M NgZone S E Change Detection

18 优化前 优化后 touchmove 不不再触发变化检测逻辑

19 Event Zone Change Detection Root Component Leaf Component

20 开始 1. 更更新输 入数据 view.state & ViewState.ChecksEnable 2. 是否执 行行变化检测 Compiler 生成 3. 检查组件模型数据 精准更更新 4. 更更新 DOM 5. 执 行行 子组件变化检测 结束

21 基准性能衡量量 1. 单向变化检测 2. 组件数据模型优化 a. VM-friendliness b. 只检查模板上绑定的变量量 ( 非深度遍历对象 ) 红 米 Note 4X 个组件 * 3 个 binding 一次变化检测平均约 45ms

22 开始 view.state &= ViewState.ChecksEnable 1. 更更新输 入数据 2. 是否执 行行变化检测 3. 检查组件模型数据 4. 更更新 DOM 5. 执 行行 子组件变化检测 结束 Click, Timer, XHR

23 强 力力武器器 class ChangeDetectionStrategy { Default OnPush }

24 Default 每次变化检测阶段都检测 值是否变动 OnPush 1. 当前组件的输 入数据发 生变更更 2. 当前组件及其 子组件模板有 DOM 事件触发

25 开始 1. 输 入数据发 生变更更 2. 有 DOM 事件触发 1. 更更新输 入数据 2. 是否执 行行变化检测 updateprop markparentviewsforcheck 3. 检查组件模型数据 view.state = ViewState.ChecksEnable 4. 更更新 DOM 5. 执 行行 子组件变化检测 6. 关闭组件变化检测 view.state &= ~ViewState.ChecksEnable 结束

26 ChangeDetectionStrategy Parent Component Input OnPush Input Default model model 组件数据只依赖 父组件的输 入数据

27 输 入值不不变 OnPush click, xhr, timer

28 红 米 Note 4X 个组件 * 3 个 binding 一次变化检测约花费 7ms 上下 性能提升约 80%

29 Angular vs React 异曲同 工 OnPush shouldcomponentupdate() Angular React + Redux

30 OnPush 注意点 Parent Component OnPush { account: , balance: } { account: , balance: } model 输 入值只做浅 比较 引 用地址不不变故不不会触发变化检测

31 Immutable

32 @Component({ selector: 'my-app', template: '<my-child [data]="datatochild"></my-child>' }) export class MyComponent { private datatochild: any; ngoninit() { this.datatochild = Immutable.Map({ account: , balance: }); } charge() { this.datatochild = this.datatochild.set('balance', ); } }

33 Object.assign()

34 @Component({ selector: 'my-app', template: '<my-child [data]="datatochild"></my-child>' }) export class MyComponent { datatochild: any; ngoninit() { this.datatochild = { account: , balance: }; } charge() { this.datatochild = Object.assign({}, this.datatochild, { balance: }); } } lodash.merge()

35 OnPush 视图能更更新? template: ` Parent Component }) ` <p>current Value: {{ curvalue }}</p> export class BranchComponent { curvalue: string; stream: Observable<string>; ngoninit() { this.stream.subscribe(value => { model }); this.curvalue = value; } }

36 更更灵活的 方案 class ChangeDetectorRef { markforcheck() : void detach() : void reattach() : void detectchanges() : void checknochanges() : void }

37 markforcheck: 把当前分 支的所有组件标记为可执 行行变化检测 输 入值不不变 OnPush markforcheck() view.state = ViewState.ChecksEnable

38 markforcheck: 把当前分 支的所有组件标记为可执 行行变化检测 输 入值不不变 Default OnPush markforcheck() view.state = ViewState.ChecksEnable

39 export class BranchComponent { curvalue: string; constructor( private cd: ChangeDetectorRef Observable ) { stream: Observable<string>; OnPush ngoninit() { this.stream.subscribe(value => { this.curvalue = value; this.cd.markforcheck(); }) } }

40 detach: 把该组件及其所有 子组件从组件树的变化检测体系剥离出来 reattach: 把剥离出来的组件分 支重新接 入组件树的变化检测体系 view.state &= ~ViewState.ChecksEnable detach() reattach() view.state = ViewState.ChecksEnable

41 export class MenuComponent() ishide: boolean = false; constructor( private cd: ChangeDetectorRef ) { } ngonchanges( changes: SimpleChanges ) { if ( ishide in changes ) { if ( changes.ishide.currentvalue ) { // 隐藏时 this.cd.detach(); } else { // 显示时 this.cd.reattach(); } } } }

42 detectchanges: 手动触发该组件及其所有 子组件的变化检测 detectchanges() detach() detectchanges() $scope.$digest()

43 export class BranchComponent { curvalue: string; constructor( private cd: ChangeDetectorRef Observable ) { stream: Observable<string>; OnPush ngoninit() { this.stream.subscribe(value => { this.curvalue = value; this.cd.detectchanges(); this.cd.markforcheck(); }) } } 手动触发 一次变化更更新

44 其他性能优化点

45 enableprodmode() 可关闭运 行行时的特殊检查 import { enableprodmode } from '@angular/core'; if (ENV === 'production') { } enableprodmode();

46 ngfor-trackby 减少元素的销毁重建 // template <li *ngfor="let item of items; let i = index; trackby: trackbyfn >...</li> // class class AppComponent { trackbyfn(idx, item) { return item.id; } }

47 < ng-container /> 避免 DOM 嵌套过深 <ng-container> <h1>gf</h1> <span>i m in ng container</span> </ng-container> <h1>gf</h1> <span>i m in ng container</span>

48 ( 二 ) 工具与 工程化

49 Angular CLI 1. auto generate 2. webpack 3. ngtools

50 Angular Language Service Completions lists AoT Diagnostic messages Quick info Go to definition

51 其他 工具 Codelyzer Augury Compodoc & ngd Snippets Ngrev 更更好玩的 ngworld

52 构建

53 AoT Server 非常耗时 有隐患 Browser Inputs Parse & Generate View Source <script> Eval View Class new () Runing App Metadata Templates & Styles Directive Dependencies more JIT AOT

54 首屏 Scripting 指标 JiT AoT 12s 2s

55 AoT 构建 ngc 1. Angular CLI: 2. webpack: ng build --aot const { AotPlugin } = require('@ngtools/webpack'); module.exports = { //... module: { rules: [ // // 1. 添加必要的 loader { "test": /\.html$/, "loader": "raw-loader" }, { "test": /\.ts$/, "loader": "@ngtools/webpack" } ] }, plugins: [ //... // 2. 在插件栏添加 AotPlugin 实例例 } ] new AotPlugin({ "mainpath": "main.ts", "tsconfigpath": "tsconfig.json" })

56 AOT vs JIT JiT AoT

57 JiT AoT

58 main.js Binding View_ToyComponent_0() View_ToyComponent_Host_0() 数据 比较 ToyComponentNgFactory()

59 template: ` <cmp [name]="name"></cmp> ` //... }) // Dont t export class NameComponent private name: string; }; // Do export class NameComponent { name: string; };

60 Lazy Load 太 大了了!

61 Lazy Load { 黑魔法? path: 'lazy-path', loadchildren: 'path/to/lazy.module#lazymodule' } # 模块类名

62 Tree Shaking (webpack2) TS Compiler ESM ES2015 TS Code ESM ES5 TS Compiler // tsconfig.json "compileroptions": { "target": "es5", "module": "es2015", //... }, UglifyJS (DCE) Babili webpack target ES5

63 583KB vendor 564KB 尽量量使 用带 ES Module 版本的第三 方库 如果不不 支持 Tree Shaking, 尽量量使 用 小粒度导 入

64 小粒度导 入 // Bad import 'rxjs'; import { Observable } from 'rxjs'; import { Subject } from 'rxjs/rx'; // Good import { Observable } from 'rxjs/observable'; import { Subject } from 'rxjs/observer'; import 'rxjs/add/operator/switchmap.js';

65 ( 三 ) 常 见问题解决

66 3.1 依赖导 入 Error: Can't bind to 'x' since it isn't a known property of 'y' imports: [ XModule ] declarations: [ XComponent ]

67 3.2 CDN 使 用的 Angular CLI 提供的 deployurl 功能 ng build --deploy-url= 注意 : 1. 必须以 `/` 结尾 2. 暂不不 支持省略略协议头, 如 `//cdn.gfzq.cn/pah/`

68 3.3 detach & markforcheck detach() markforcheck()

69 3.4 视图更更新失效 Click Root Zone Timer XHR Angular Zone trigger Change Detection

70 function asyncfunc() { } console.log(zone.current.name); Click 异常输出 :<root> Root Zone Timer XHR 正常输出 :angular Angular Zone trigger Change Detection

71 JSBridge JSB.call( name, params, successcb, errorcb )

72 // angular zone function btnclick() { console.log(zone.current.name); calljsbridgefunction(() => { console.log(zone.current.name); settimeout(() => { console.log(zone.current.name); }); }); } CB Task Zone.current runtask Zone.current = task.zone; try { invokecbwithzone(); } finally { Zone.current = task.zone.parent; } current Zone <root> angular Tasks <root>?? settimeout asyncfunc task common callback Stack angular click task Log angular <root> <root>

73 解决 方法 // angular zone console.log(zone.current.name); JSBridgeAsyncMethod(() => { console.log(zone.current.name); settimeout(() => { console.log(zone.current.name); this.cd.detectchanges(); }); this.cd.detectchanges(); });

74 推荐解决 方法 // angular zone console.log(zone.current.name); JSBridgeAsyncMethod(() => { this.ngzone.run(() => { console.log(zone.current.name); settimeout(() => { console.log(zone.current.name); }); }); }); $scope.$apply()

75 谢谢 大家 Q&A