一個微信專案
從0到.000的效能調教之路
三部曲
http://mvc.tw
 twMVC 核心講師
 現任微軟最有價值專家
 微軟 TechDay & MSDN 講師
 著有《ASP.NET MVC 4/5網站開發美學》
 譯有《Bootstrap 2/3》中文教材
 https://kkbruce.tw
 http://blog.kkbruce.net
@Bruce
2
http://mvc.tw
首部曲、二部曲?
3
http://mvc.tw/004Q http://mvc.tw/004R
一個微信專案
從秒到毫秒的效能調教之路
一個微信專案
效能調教面面面觀但內容是
http://mvc.tw
人
事物
Agenda
6
http://mvc.tw
效能有兩種
 與人有關
 …
 …
 …
 …
 …
 與Code有關
 …
 …
 …
 …
 …
7
8
http://mvc.tw
江湖事
 一開始,專案使用 NLog 輸出至 File日誌
 專案進行發行測試開始,問題慢慢出現…
 出現問題時,File 日誌不易追查
 需一條一條從日誌中查看
 File 日誌散落各站點
 需將所有站點 File 日誌下載回來
 上線後發現,SPA頁面難以偵錯
 前端日誌無法收集分析問題
 相當不即時…
http://mvc.tw
互推
 前端 – 是不是你們後端沒寫好?
 後端 – 我們輸出的資料是正確的哦?
 Database – 不關我的事?
http://mvc.tw
Hipchat
 第一次是選用 https://www.hipchat.com/ 進行日誌的整
合。
 類似 slack 的另一家服務商。
http://mvc.tw
Hipchat的即時日誌
 將 hipchat 當成我們Log日誌中心
 專案以 room 進行區分,分類收集所需日誌訊息
 room 有各自成員互不干擾
http://mvc.tw
可以看到許多有趣的事(1)
13
http://mvc.tw
可以看到許多有趣的事(2)
14
http://mvc.tw
為什麼會換slack?
 hipchat 沒什麼不好的。
 不過當站點訊息量大時,容易呈現掛點狀態。
 非 hipchat 問題,猜測為第三方元件(HipChat.Net )沒
處理好。
http://mvc.tw
Slack能做什麼事?
 說明影片
 http://mvc.tw/004i
http://mvc.tw
Slack 重點整理
 團隊通訊平台服務。
 依據需求 – 不同主題、不同成員、不同專案、不同功能 – 去訂
制不同的 Channels 來使用。
 傳遞訊息、檔案、圖片與任何資料。
 強大的搜尋、過濾與回顧歷史訊息的功能。Slack 免費版可以搜
尋最近的 10000 則訊息,並且任何新成員加入後都可以回溯每
個頻道之前的歷史訊息內容,銜接討論進度。
 容易與許多第三方服務進行整合。(mail 也能)
 跨平台訊息同步。
http://mvc.tw
第三方服務
 提供大量第三方服務
 整合容易
http://mvc.tw
專案 channel
http://mvc.tw
那前端呢?
http://mvc.tw
用 Console.log ?
http://mvc.tw
jsnlog
 http://jsnlog.com/
 解決前端 - SPA頁面無法收集日誌問題。
 可與 Log4Net、Elmah、NLog 等套件整合。
 多種整合方案:.NET、PHP、Node、JS Only。
 整合容易 
23
Jsnlog
http://mvc.tw
即時且跨平台的效果 … 很恐怖
http://mvc.tw
來自團隊的見證 – 前端
未導入Slack(紀錄Log)
•遇到使用者反應系統有Bug時,常常使用者講
得很清楚,但聽得很模糊…很難快速從知道
的訊息中,歸納知道問題出在哪,需花費大
量的時間在理解問題,並在猜測的可能問題
中,不斷嘗試,Bug還可能再度出現….
導入Slack(紀錄Log)
•無時無刻都能根據使用者的描述與Slack的紀
錄(自訂描述,支援手機版以及桌機板),減少
與使用者溝通之間的代溝,能快速歸納出Bug
的問題,徹底解決Bug,還有時間喝杯咖啡唷
~
http://mvc.tw
來自團隊的見證
情境
Gina: 認真工作中
Boss: User 反應有錯
誤,看一下Log
Gina: 等我一下,我
去Azure FTP 下載log
回來看,我找一下
Log 喔! 等等跟你說…
(十分鐘過去…)
Boss: 找到了嗎?
Gina: 部屬完了
Boss: API沒辦法正
常呼叫耶!
Gina: 真的嗎? 可是
我只加了Log而已,
哈哈! Log量太大,好
像沒記錄到,導致
API掛掉,我再部一
次沒Log的。
Boss: 可以了耶!
Gina: 公車上
Boss: User 反應有錯
誤,看一下Log
Gina: 好,我現在看
一下(開啟手機App),
啊! 有Log,DB有…
問題,前端有…問題,
後端有…問題,所以
造成錯誤。
Boss: 好,有空可以
先改一下
27
環境
改善
28
29
從公司要資源
http://mvc.tw
8GB out – 16GB in
30
http://mvc.tw
HDD out – SSD in
31
http://mvc.tw
http://mvc.tw/004P
32
33
投資自己
1. 以下都是花自己錢
34
2. 以下都是花自己錢
3. 以下都是花自己錢
http://mvc.tw
有要推坑的手 XD
35
http://mvc.tw
Multi-Monitor
36
http://mvc.tw
Mouse
 多螢幕,可以試試滾輪。
 鍵盤、滑鼠的錢不要省。
37
http://mvc.tw
要坐得舒服
38
http://mvc.tw
高度要對 
39
http://mvc.tw
Office V3 - 人生一定要有目標   
40
http://mvc.tw
 缺點,想低調,完全行不通。常常有人跑來照像 
 不要老是想著公司,他只是給你一份工作,但你可以在裡面
生活。
 扣除睡覺,Office 搞不好是你第一個家,何不讓他舒服
一點。
物 - 小結
41
42
http://mvc.tw
專案終於來了
43
http://mvc.tw
 Mobile first
 Cloud first
 Global Azure
 China Azure
 China user first – GFW   
first
44
http://mvc.tw
 以 VSTS 進行 Version Control (TFVC)
 後來才知道,可以一個專案同時執行兩種版控
 TFVC and Git repositories in the same team
project
 http://mvc.tw/004S
VSTS
45
http://mvc.tw
架構
46
http://mvc.tw
 Web App (scale out)
 SQL Database
 Storage
 CDN
 Webjobs
Azure Service
47
http://mvc.tw
 Test Site:Microsoft Global Azure
 Stage Site:Microsoft China Azure
 兩個 Azure 有非常明顯的技術落差,我們在採用 Azure
相關技術時,必須做 balance 的考量。
發行
48
http://mvc.tw
效調前,一定要有...
49
http://mvc.tw
爛Code   
 我的爛CODE重構之路
 http://mvc.tw/004U
 我的爛CODE重構之路(二)
 http://mvc.tw/004V
50
經典
回顧
51
http://mvc.tw
經典(1)
52
http://mvc.tw
經典(2)
53
註解
下課
54
http://mvc.tw
滅了它
55
http://mvc.tw
Empty + MVC, MVC
Empty + MVC MVC
56
http://mvc.tw
MVC
57
http://mvc.tw
Empty + Web API, Web API
58
http://mvc.tw
Web API
59
http://mvc.tw
 ASP.NET Identity
 你有使用?
 自由度太高,入門成本不小,在內部推廣不易
 packages 的相依性很麻煩
 很多不(再)使用的套件移不掉
 結論:專案越乾淨越好,才有染黑的空間 
Empty目的
60
http://mvc.tw
導入分層架構
 http://mvc.tw/004X
 找這位 
61
http://mvc.tw
三層式架構
Logger.Plus.篇
63
http://mvc.tw
 平常你如何取得以下三種資訊
 呼叫者是唯?
 那一支檔案呼叫?
 第幾行出錯?
再論 Logger
64
http://mvc.tw
Member, sourceFile, sourceLine
65
66
Logger plus
Database.DBA.篇
67
http://mvc.tw
資料庫專案
68
Stored
Procedure
69
http://mvc.tw
 Entity Framework
 Entity Framework Performance and What You Can Do
About It
 中文討論:http://mvc.tw/004Y
 NHibernate
 OpenAccess  之前使用
思考 ORM Framework
70
CRUD
71
http://mvc.tw
 Install-Package Dapper
 https://github.com/StackExchange/dapper-dot-net
Dapper
72
http://mvc.tw
 小 – 僅單一Dapper.dll
 快 – Performance ( http://mvc.tw/004Z )
 靈活 – SQL to ORM
 學習成本低
 注意:Dapper不管理資料庫連線的開啟和關閉
Dapper
73
74
Dapper
程式碼.加加加速.篇
75
http://mvc.tw
導入C# 6 – 語法糖
76
http://mvc.tw
加速心法
 Parallel Processing and
Concurrency in the .NET
Framework
 http://mvc.tw/004a
77
不就是
async
awaint
78
79
Life flow
80
deadlock
http://mvc.tw
 在非UI工作上,盡量使用 .ConfigureAwait(false)
 從頭到尾都使用非同步方法
兩大原則
81
http://mvc.tw
 非同步的 File I/O 沒處理好,可能會有減低10倍的效能?
 如何取消非同步嗎?
 如何回報非同步進度?
 清楚 compute-bound 與 I/O-bound 差異嗎?
 多個非同步,要如何互相等待?
 非同步的 re-try 機制?
 ...
未能介紹
82
Azure.Data加速.篇
83
http://mvc.tw
 MemoryCache
 Storage Table
 Redis
 Session
 OutputCache
Cache
84
http://mvc.tw
 最省成本;最好處理;
 不能應用在 scale-out 情境。
 .NET Framework 應用程式中的快取
 http://mvc.tw/004b
 改良式GetCachableData可快取查詢函式
 http://mvc.tw/004c
MemoryCache
85
http://mvc.tw
Storage Table
 NoSQL服務
 Key-Value 組合
 存取 Wecaht JSON Data
 減少 Azure SQL
Database (DTU) 壓力
 http://mvc.tw/004W
86
http://mvc.tw
Redis
 未使用!!!  還是要學哦!
 Redis for Windows
 http://mvc.tw/004g
 StackExchange.Redis
 http://mvc.tw/004h
87
WebAPI.唯快不破.篇
88
http://mvc.tw
 序列化
 反序列化
只做二件事
89
Web API
http://mvc.tw
Jil – 序列化
90
http://mvc.tw
Jil – 序列化
91
http://mvc.tw
Jil – 序列化
92
http://mvc.tw
Jil – 反序列化
93
http://mvc.tw
Jil – 反序列化
94
http://mvc.tw
Jil – 反序列化
95
http://mvc.tw
日期
96
http://mvc.tw
 Jil
 http://mvc.tw/004d
 MVC with Jil
 http://mvc.tw/004e
 WebAPI with Jil
 http://mvc.tw/004f
Jil三部曲
97
http://mvc.tw
終於
98
http://mvc.tw
結論(1)
99
http://mvc.tw
結論(2)
100
101
http://mvc.tw
Blog 是記錄知識的最佳平台
102
http://mvc.tw
感謝 Jetbrains 贊助贈品
103
https://www.jetbrains.com/resharper/
http://mvc.tw
感謝 OzCode 贊助贈品
104
http://www.oz-code.com/
http://mvc.tw
感謝 ALIVE 贊助贈品
105
https://comealive.io/
http://mvc.tw
業界師資、實戰教學
106
http://skilltree.my
謝謝各位
• 本投影片所包含的商標與文字皆屬原著作者所有。
• 本投影片使用的圖片皆從網路搜尋。
• 本著作係採用姓名標示-非商業性-相同方式分享 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

twMVC#22 | 一個微信專案從0到.000的效能調教之路