前言：
有句老話說的好：如果你想戰勝它，那么請先接受它。
知己知彼，百戰不殆，說到降低項目的DrawCall。那么就必須先了解以下3個概念：
1、CPU (中央處理器) : 通過指令來調度，管理和協調各種不同的任務，處理復雜的邏輯，使用的是串行編程模式。
2、GPU (圖形處理器) : GPU接受CPU的調度，可以處理大量重復的數據集運算和頻繁的內存訪問，使用的是並行編程模式。
3、DrawCall ： 中文譯為“繪制調用”或“繪圖指令”。是一種行為（指令），即 CPU 調用圖形 API，命令 GPU 進行圖形繪制。
例如，某個游戲場景的DrawCall是80，代表該場景每幀內GPU需要繪制80次。每一次DrawCall都需要傳輸紋理、頂點數據以及渲染上下文切換，是非常消耗性能的操作，DarwCall過高會直接影響游戲的整體性能，帶來卡頓、CPU占用率高、設備發燙等問題。所以在合理的情況下游戲的DrawCall越低越好。
SpectorJS使用說明：
由此可見DrawCall的數量對於項目的重要性是毋庸置疑的，那么我們廢話也不多說，趕緊來看一下如何使用SpectorJS插件。
1.安裝SpectorJS
SpectorJS工具提供了npm模塊、Chrome擴展程序等多種安裝方式。本文以Chrome擴展程序為例。
通過 Chrome瀏覽器的菜單，進入“擴展程序”界面，輸入“Spector”，然后安裝即可，如下所示。
如果在擴展程序的商店搜索不到該插件可以自行到對應源碼地址下載對應插件。
源代碼網址:http://www.github.com/BabylonJS/Spector.js
如果是自行下載的代碼zip包，解壓后，按照以下流程啟用：
打開chrome瀏覽器->右上角三個點（自定義控制）->更多工具->擴展工具->右上角開發者模式打開->加載已加壓的擴展程序
2.使用SpectorJS:
1、SpectorJS安裝完成后，Chrome瀏覽器的地址欄右側將會出現一個紅色小圖標，如下圖所示默認情況下， SpectorJS處於非工作狀態。
2、點擊這個紅色圖標，圖標變成綠色， SpectorJS開始工作，將重新加載當前頁面，並注入調試代碼用來收集當前Web頁面的渲染信息，如圖所示
。
3、打開需要分析的游戲頁面后，再次點擊插件的綠色圖標，將會出現如下彈窗
4、點擊上圖捕獲的選項，片刻之后SpectorJS收集完信息后，會自動新打開一個Chrome頁面，並展示收集到的渲染信息，如下圖所示。例如，本Web頁面有4個DrawCall，則SpectorJS大約生成4-6張截圖，從圖中左側圖列可以看出，每一張截圖對應一個DrawCall，通過比較不同圖片的差異，就能看出本次DrawCall究竟繪制了什么，從而幫助判斷DrawCall是否可以合並。
