開發的效能與效率 - twMVC#15

Slide 1

Slide 1 text

twMVC#15 – 開發的效能與效率 Kevin Tseng

Slide 2

Slide 2 text

http://mvc.tw  微軟最有價值專家（MVP）2013,2014  twMVC 核心成員及講師（http://mvc.tw）  SkillTree 專任講師（http://skilltree.my）  部落格「mrkt 的程式學習筆記」 http://kevintsengtw.blogspot.tw  Google+ 專頁 https://plus.google.com/+KevintsengtwBlogspot 簡介 2

Slide 3

Slide 3 text

3 效能 Performance

Slide 4

Slide 4 text

http://mvc.tw  twMVC#8「超。光速網站最佳化實戰」by demo http://mvc.tw/Event/2013/3/30  簡報 http://goo.gl/P7P8h2 今天不講怎麼調校網頁讓執行速度更快 4

Slide 5

Slide 5 text

http://mvc.tw  TechEd North America 2014 [DEV-B418] Performance Optimize Your ASP.NET Web App Mads Kristensen http://goo.gl/wFZBCU 今天不講怎麼調校網頁讓執行速度更快 5

Slide 6

Slide 6 text

Yahoo – Yslow (Why Slow) 6 https://developer.yahoo.com/yslow/

Slide 7

Slide 7 text

Web Developer Checklist – ASP.NET Performance 7 http://webdevchecklist.com/asp.net/performance/

Slide 8

Slide 8 text

Web Developer Checklist 8 http://webdevchecklist.com/

Slide 9

Slide 9 text

Web Developer Checklist – ASP.NET 9 http://webdevchecklist.com/asp.net/

Slide 10

Slide 10 text

Web Developer Checklist – Chrome Extensions 10 http://goo.gl/2DqFl

Slide 11

Slide 11 text

http://mvc.tw  不要太早關注效能  網頁執行慢，常常是開發時忽略了應注意而未注意的項目  很多時候都是程式寫法而造成  不當的 LINQ 操作關於效能…… 11

Slide 12

Slide 12 text

http://mvc.tw 如何觀察 EF 所產生的 SQL Command 12

Slide 13

Slide 13 text

http://mvc.tw 如何觀察 EF 所產生的 SQL Command 13

Slide 14

Slide 14 text

http://mvc.tw 如何觀察 EF 所產生的 SQL Command 14

Slide 15

Slide 15 text

http://mvc.tw 如何觀察 EF 所產生的 SQL Command – EF6 15

Slide 16

Slide 16 text

http://mvc.tw 如何觀察 EF 所產生的 SQL Command – EF6 16

Slide 17

Slide 17 text

http://mvc.tw 如何觀察 EF 所產生的 SQL Command – EF6 17

Slide 18

Slide 18 text

http://mvc.tw  只有 Ultimate 版本才有此功能 Visual Studio - IntelliTrace 18

Slide 19

Slide 19 text

http://mvc.tw Visual Studio - IntelliTrace 19

Slide 20

Slide 20 text

http://mvc.tw  Clutch.Diagnostics.EntityFramework https://github.com/Kukkimonsuta/Clutch  Nuget Install-Package Clutch.Diagnostics.EntityFramework Entity Framework 5 20 P.S. 與 NLog 搭配使用

Slide 21

Slide 21 text

http://mvc.tw Clutch.Diagnostics.EntityFramework 21

Slide 22

Slide 22 text

http://mvc.tw Clutch.Diagnostics.EntityFramework 22

Slide 23

Slide 23 text

http://mvc.tw Clutch.Diagnostics.EntityFramework 23

Slide 24

Slide 24 text

http://mvc.tw  Logging and Intercepting Database Operations http://msdn.microsoft.com/zh-tw/data/dn469464.aspx  Entity Framework 6 Only  與 NLog 搭配使用（也可使用 Log4Net …etc） EF6 – Intercepting, Logging 24

Slide 25

Slide 25 text

http://mvc.tw EF6 – Intercepting, Logging 25

Slide 26

Slide 26 text

http://mvc.tw EF6 – Intercepting, Logging 26

Slide 27

Slide 27 text

http://mvc.tw EF6 – Intercepting, Logging 27

Slide 28

Slide 28 text

http://mvc.tw EF6 – Intercepting, Logging 28

Slide 29

Slide 29 text

29 MiniProfiler

Slide 30

Slide 30 text

http://mvc.tw MiniProfiler 30 http://miniprofiler.com/

Slide 31

Slide 31 text

http://mvc.tw  可分析系統裡透過 ADO.NET 所執行的 SQL Command  顯示頁面執行所耗費的時間  MS SQL Server, Oracle, MySql, Postgres …  LINQ to SQL, Entity Framework, ADO.NET  ASP.NET MVC, ASP.NET WebForms  由 Stack Overflow 團隊所設計開發  在 Stack Exchange 等系列網站都有使用. MiniProfiler 31

Slide 32

Slide 32 text

http://mvc.tw  透過 NuGet 安裝： MiniProfiler,MiniProfiler.Mvc4,MiniProfiler.EF6 MiniProfiler 32

Slide 33

Slide 33 text

http://mvc.tw  修改 _Layout.cshtml MiniProfiler 33

Slide 34

Slide 34 text

http://mvc.tw  修改 Global.asax MiniProfiler 34

Slide 35

Slide 35 text

http://mvc.tw  修改 Global.asax MiniProfiler 35

Slide 36

Slide 36 text

http://mvc.tw  修改 Web.Config MiniProfiler 36 ...

Slide 37

Slide 37 text

http://mvc.tw MiniProfiler 37

Slide 38

Slide 38 text

http://mvc.tw MiniProfiler 38

Slide 39

Slide 39 text

http://mvc.tw MiniProfiler 39

Slide 40

Slide 40 text

http://mvc.tw  安全性釋疑：預設只有在 Local 端才會顯示，Remote 下並不會顯示 MiniProfiler 40

Slide 41

Slide 41 text

http://mvc.tw  可在 Web.Config 裡加上開關，用來控制是否顯示 MiniProfiler 41

Slide 42

Slide 42 text

http://mvc.tw MiniProfiler 42

Slide 43

Slide 43 text

http://mvc.tw  改由 enable_profiling 與 Request.IsLocal MiniProfiler 43

Slide 44

Slide 44 text

http://mvc.tw  分層架構、AJAX  結合權限機制限定角色才會顯示 MiniProfiler 視窗 MiniProfiler – 進階操作 44

Slide 45

Slide 45 text

45 Glimpse

Slide 46

Slide 46 text

http://mvc.tw Glimpse 46 http://getglimpse.com/

Slide 47

Slide 47 text

http://mvc.tw Glimpse 47 線上操作就知道有什麼功用 http://play.getglimpse.com/

Slide 48

Slide 48 text

http://mvc.tw  視覺化的系統執行追蹤訊息  顯示系統 Configuration 內容  Route Debugging  顯示 View Rander 的細節  顯示 Http Request 的內容  多種擴充的 Third Party Extensions Glimpse 48

Slide 49

Slide 49 text

http://mvc.tw  NuGet: Glimpse Core Glimpse ASP.NET Glimpse Mvc5 Glimpse EF6 Glimpse 49

Slide 50

Slide 50 text

http://mvc.tw  安裝之後，開啟使用 Glimpse 50 http://localhost/Glimpse.axd

Slide 51

Slide 51 text

http://mvc.tw  觀察 EntityFramework 所執行的 SQL Command Glimpse 51

Slide 52

Slide 52 text

http://mvc.tw Glimpse 52

Slide 53

Slide 53 text

http://mvc.tw Glimpse Extensions 53 http://getglimpse.com/Extensions/

Slide 54

Slide 54 text

http://mvc.tw  分層架構、AJAX  Glimpse.Performance Glimpse – 進階操作 54

Slide 55

Slide 55 text

http://mvc.tw  Glimpse 有支援 ASP.NET WebForms Glimpse – ASP.NET WebForms 55 https://www.youtube.com/watch?v=vS6ONq6YwyI

Slide 56

Slide 56 text

http://mvc.tw Glimpse – ASP.NET WebForms 56

Slide 57

Slide 57 text

57 Microsoft Monitoring Agent

Slide 58

Slide 58 text

http://mvc.tw  Microsoft Monitoring Agent 會監視電腦基礎結構和應用程式健全狀況。它會收集診斷資料，例如效能標準、事件記錄檔和追蹤。Microsoft Monitoring Agent 可以做為獨立工具使用，或是與 System Center Operations Manager 搭配使用。  下載位置 http://www.microsoft.com/zh-TW/download/details.aspx?id=40316 Microsoft Monitoring Agent (MMA) 58

Slide 59

Slide 59 text

http://mvc.tw Microsoft Monitoring Agent (MMA) 59

Slide 60

Slide 60 text

http://mvc.tw Microsoft Monitoring Agent (MMA) 60

Slide 61

Slide 61 text

61 Performance and Diagnostics Hub (效能與分析中樞)

Slide 62

Slide 62 text

http://mvc.tw 效能與診斷 62

Slide 63

Slide 63 text

http://mvc.tw 效能與診斷 63

Slide 64

Slide 64 text

http://mvc.tw 效能與診斷 64

Slide 65

Slide 65 text

http://mvc.tw 效能與診斷 65

Slide 66

Slide 66 text

http://mvc.tw 效能與診斷 66

Slide 67

Slide 67 text

67 ANTS Performance/ANTS Memory Profiler

Slide 68

Slide 68 text

http://mvc.tw ANTS Performance Profiler 68 http://www.red-gate.com/products/dotnet-development/ants-performance-profiler/

Slide 69

Slide 69 text

http://mvc.tw ANTS Memory Profiler 69 http://www.red-gate.com/products/dotnet-development/ants-memory-profiler/

Slide 70

Slide 70 text

http://mvc.tw ANTS Performance/Memory Profiler 70

Slide 71

Slide 71 text

71 Telerik JustTrace Performance/Memory Profiler

Slide 72

Slide 72 text

http://mvc.tw Telerik JustTrace 72 http://www.telerik.com/products/memory-performance-profiler.aspx

Slide 73

Slide 73 text

http://mvc.tw Telerik JustTrace Key Features 73

Slide 74

Slide 74 text

http://mvc.tw Telerik JustTrace Profoiler 74

Slide 75

Slide 75 text

75 開發的效率

Slide 76

Slide 76 text

http://mvc.tw  多螢幕，效率高！開發的效率 76

Slide 77

Slide 77 text

http://mvc.tw  換 SSD ，效率高！開發的效率 77

Slide 78

Slide 78 text

http://mvc.tw  善用你手邊的開發工具  Visual Studio 號稱地表上最強的工具，要懂得如何使用  熟悉 Visual Studio 快捷鍵  安裝好用的 Visual Studio Extensions 開發的效率 78

Slide 79

Slide 79 text

http://mvc.tw 熟悉 Visua Studio 快捷鍵 79 http://visualstudioshortcuts.com/2013/

Slide 80

Slide 80 text

http://mvc.tw Products and Extensions for Visual Studio 80 http://visualstudiogallery.msdn.microsoft.com/

Slide 81

Slide 81 text

推薦好套件 by demo 81 http://vs.demo.tc/

Slide 82

Slide 82 text

http://mvc.tw Productivity Power Tools http://visualstudiogallery.msdn.microsoft.com/d0d33361-18e2- 46c0-8ff2-4adea1e34fef/ VSCommands http://vscommands.squaredinfinity.com/features Web Essentials http://vswebessentials.com/ 這些套件你裝了沒？ 82

Slide 83

Slide 83 text

http://mvc.tw  ReAttach  Indent Guides  Javascript Parser  Advanced Javascript outlining  Jscript vsdoc Stub Generator 2012  CodeMaid  BuildVision 我還有哪些必裝的套件 83

Slide 84

Slide 84 text

http://mvc.tw  Highlight all occurrences of selected words  Image Optimizer  jQuery Code Snippets  GhostDoc  Cobisi Routing Assistant 我還有哪些必裝的套件 84

Slide 85

Slide 85 text

http://mvc.tw  ReSharper http://www.jetbrains.com/resharper/  OzCode http://www.oz-code.com/  .NET Reflector Visual Studio Extension http://www.red-gate.com/products/dotnet- development/reflector/ 我還有哪些必裝的套件 85

Slide 86

Slide 86 text

http://mvc.tw Bing Code Search for C# 86 http://goo.gl/OoXzsf

Slide 87

Slide 87 text

http://mvc.tw  Alt + A Bing Code Search for C# 87

Slide 88

Slide 88 text

http://mvc.tw Web Search 88 http://goo.gl/199ByB

Slide 89

Slide 89 text

http://mvc.tw Web Search 89

Slide 90

Slide 90 text

http://mvc.tw Web Search 90

Slide 91

Slide 91 text

91 ReShaper

Slide 92

Slide 92 text

http://mvc.tw JetBrain - ReSharper 92 http://www.jetbrains.com/resharper/

Slide 93

Slide 93 text

http://mvc.tw JetBrain - ReSharper 93

Slide 94

Slide 94 text

94 行動網站-用來偵錯的瀏覽器

Slide 95

Slide 95 text

http://mvc.tw  Ctrl + Shift + M Firefox 95

Slide 96

Slide 96 text

http://mvc.tw Chrome 96

Slide 97

Slide 97 text

http://mvc.tw Mobilizer 97

Slide 98

Slide 98 text

http://mvc.tw Electric Mobile Studio 98 http://www.electricplum.com/

Slide 99

Slide 99 text

http://mvc.tw Electric Mobile Studio 99

Slide 100

Slide 100 text

http://mvc.tw BrowserStack 100 http://www.browserstack.com

Slide 101

Slide 101 text

http://mvc.tw BrowserStack 101

Slide 102

Slide 102 text

http://mvc.tw BrowserStack 102

Slide 103

Slide 103 text

http://mvc.tw BrowserStack - Chrome Extensions 103

Slide 104

Slide 104 text

104 Windows Phone Emulator

Slide 105

Slide 105 text

http://mvc.tw Windows Phone 開發人員中心 105 https://dev.windowsphone.com/zh-tw

Slide 106

Slide 106 text

http://mvc.tw Windos Phone 8.1 模擬器 106 https://dev.windowsphone.com/zh-tw/downloadsdk

Slide 107

Slide 107 text

http://mvc.tw Windows Phone Emulator 107

Slide 108

Slide 108 text

http://mvc.tw Windows Phone Emulator 108

Slide 109

Slide 109 text

http://mvc.tw 使用 Windows Phone Emulator 偵錯 109

Slide 110

Slide 110 text

110 modern.IE

Slide 111

Slide 111 text

http://mvc.tw modern.IE 111 http://loc.modern.ie/zh-tw

Slide 112

Slide 112 text

http://mvc.tw 下載虛擬機器，測試各版本 IE 瀏覽器 112

Slide 113

Slide 113 text

http://mvc.tw 下載虛擬機器，測試各版本 IE 瀏覽器 113

Slide 114

Slide 114 text

http://mvc.tw Modern.IE …… BrowserStack 114

Slide 115

Slide 115 text

115

Slide 116

Slide 116 text

http://mvc.tw  Introducing Microsoft Monitoring Agent  Performance Details in IntelliTrace  IntelliTrace MVC Navigation  UI Enhancements for IntelliTrace with Visual Studio 2013 Update 2  使用 Microsoft Monitoring Agent 監視部署中的應用程式  使用 Visual Studio 和 Microsoft Monitoring Agent 診斷部署中的問題 Microsoft Monitoring Agent 相關連結 116

Slide 117

Slide 117 text

http://mvc.tw  Performance and Diagnostics Hub in Visual Studio 2013  New CPU Usage tool in the Performance and Diagnostics hub in Visual Studio 2013  MSDN 使用程式碼剖析工具分析應用程式效能  Visual Studio 2013的進階偵錯與效能分析技巧 Performance and Diagnostics Hub 117

Slide 118

Slide 118 text

http://mvc.tw 好活動需要支持感謝 KKTIX 贊助 twMVC 活動報名平台 118

Slide 119

Slide 119 text

http://mvc.tw 好課程需要支持 119 http://skilltree.my

Slide 120

Slide 120 text

http://mvc.tw 好課程別放過 – ASP.NET MVC 5 實戰訓練營 120 http://skilltree.kktix.cc/events/skilltree2

Slide 121

Slide 121 text

謝謝各位 • 本投影片所包含的商標與文字皆屬原著作者所有。 • 本投影片使用的圖片皆從網路搜尋。 • 本著作係採用姓名標示-非商業性-相同方式分享 3.0 台灣授權。閱讀本授權條款，請到 http://creativecommons.org/licenses/by-nc-sa/3.0/tw/，或寫信至Creative Commons, 444 Castro Street, Suite 900, Mountain View, California, 94041, USA. h t t p : / / m v c . t w