Downloaded 13 times
Uploaded byJeff Wu
AUGT 社群小聚 - Angular Optimize Performance NgZone 的原理與應用
本文件讨论了 Angular 中的 ngZone 的原理和应用，包括 zone 的定义及其在非同步处理和性能优化中的重要性。通过 demo 介绍了如何有效利用 zone 进行错误处理和分析，并展示了如何在不更新 UI 的情况下执行多个非同步任务。最终，强调了理解事件循环及其在 Angular 中的作用。
AUGT 社群小聚 - Angular Optimize Performance NgZone 的原理與應用
- 1. Angular Optimize Performance NgZone的原理與應用 多奇數位創意有限公司 前端工程師 Jeff Wu 部落格：https://jeffwu85182.github.io/
- 2. • 關於應用 (Application ) 的狀態 • Zone 是啥? • NgZone 又是啥? • DEMO • 基本款 – Loading 0% - 100% • 進階款 – 10000 個可拖曳的 SVG boxes 以 60 FPS 拖動 Agenda
- 3. 多奇數位創意 – 前端工程師 Angular傳教士 Angular 線上讀書會樁腳 AUGT 社群成員 Angular ( 2+ ) 入坑一年半 Hello World ! Jeff Wu （阿魯）
- 4. • User Events •例如： click, change, input, submit, … • XMLHttpRequests • 例如：從遠端伺服器取得資料 • Timers • 例如：setTimeout(), setInterval() 有什麼可以改變 Application 狀態 ?
- 5.
- 6.
- 7. • 關於 Eventloop 的運作機制 • 例如 setTimeout() 執行的內容是無法進行追蹤與分析的 • 非同步的操作會被加進瀏覽器的 Event queue • 時機成熟，瀏覽器的 Event loop 就會將 Event queue 清空 關於 JavaScript 非同步處理
- 8.
- 9. • 我們需要一些基本的 hook，這個hook 可讓我們在非同步處理 時可以執行一些分析的程式碼 • 這正是 Zone 發揮作用的地方 • Timer 的開始或結束 • 保存堆疊追蹤 （程式碼每次進入或離開 Zone） • 覆寫程式碼的方法 （很暴力） • 甚至將資料與各個 zone 串連起來 需要掛鉤 ( Hook )！
- 10.
- 12. • Zone 其實是來自於Dart 語言的特性 • Zones are actually a language feature in Dart. • Dart 也只是編譯成 JavaScript • Dart also just compiles to JavaScript • 因此我們也可以使用 JavaScript 實作一樣的功能 • We can implement the same functionality in JavaScript too. Zone 是啥?
- 13. • Zone 是一個非同步處理的執行環境( Execution Context ) • An execution context for asynchronous operations. • 對於錯誤處理和分析非常實用 ( 透過 hooks ) • Useful for things like error handling and profiling. 所以 Zone 到底能幹嘛?
- 14.
- 15. 就是 Angular 的Zone 阿
- 16. • 是一個可注入的服務 (Aninjectable service ) • 用於效能調教 ( Optimize performance ) • 執行一個或多個非同步處理且不需更新 UI ( Change Detection ) • when starting a work consisting of one or more asynchronous tasks that don't require UI updates • 若有錯誤需要 Angular 協助處理 • Error handling to be handled by Angular. NgZone
- 17. • 執行的工作要被排除在外可用 runOutsideAngular •Tasks can be kicked off via runOutsideAngular • 若有需要，一些 tasks 可用 run 再次進入 Angular Zone • If needed, these tasks can reenter the Angular zone via run. NgZone
- 18.
- 19. • Understanding zones •Using Zones in angular for better performance • Zones in angular • What the heck is the event loop anyway? • Understanding Zones and Change Detection in Ionic 2 & Angular 2 • Angular 2とZone.jsとテストの話 • Angular.io – NgZone • Event Loop Demo Page • Demo Source - GitHub Reference
- 20.