經常會看些性能分析的書，但是實際在做優化的時候又無從下手。
因為沒有資料，也不能确定實際使用者到底在哪一環影響了他們的性能。
寫的比較倉促，自己能力也有限，如有問題，歡迎指正。
垂直角度的度量順序圖：
1）performance
設定好插件中全局的performance對象，以及方法now，擷取目前時間戳。
2）Document.readyState
上圖中的“domComplete”、“domInteractive”和“domLoading”，就是Document。readyState的3種狀态loading, interactive或complete發生的時間。
3）getTimes()
在這個方法中計算各個參數之間的值。
1. firstPaint：白屏時間，也就是開始解析DOM耗時，使用者在沒有滾動時候看到的内容渲染完成并且可以互動的時間
2. loadTime：加載總時間，這幾乎代表了使用者等待頁面可用的時間
3. unloadEventTime：Unload事件耗時
4. loadEventTime：執行 onload 回調函數的時間
5. domReadyTime：使用者可操作時間
6. firstScreen：首屏時間，使用者在沒有滾動時候看到的内容渲染完成并且可以互動的時間，記錄載入時間最長的圖檔
7. parseDomTime：解析 DOM 樹結構的時間，期間要加載内嵌資源
8. initDomTreeTime：請求完畢至DOM加載耗時
9. readyStart：準備新頁面時間耗時
10. redirectTime：重定向的時間
11. appcacheTime：DNS緩存耗時
12. lookupDomainTime：DNS查詢耗時
13. connectTime：TCP連接配接耗時
14. requestTime：内容加載完成的時間
15. requestDocumentTime：請求文檔時間，開始請求文檔到開始接收文檔
16. responseDocumentTime：接收文檔時間，開始接收文檔到文檔接收完成
17. TTFB（Time To First Byte）：讀取頁面第一個位元組的時間
performance對象中有個getEntries方法，通過此方法可以将頁面中的資源載入情況記錄下來。
可以繪制出像下圖那樣的瀑布圖。
然而此方法相容性非常差，我在紅米手機中測試，UC不行，自帶的浏覽器倒是可以将資訊列印出來。
在插件中也稍微封裝了一個方法“getEntries”，在相容的浏覽器中可以采集到相關資料。
1. name：資源的完整路徑，例如“http://localhost:63342/web/strick/Primus/ajax/data2.json”
2. fileName：檔案名。例如“data2.json”
3. duration：資源載入總共消耗的時間
4. requestStartDelay：開始請求延時時間
5. lookupDomainTime：DNS 查詢時間
6. connectTime：TCP 建立連接配接完成握手的時間
7. TTFB：讀取資源第一個位元組的時間
8. requestTime：内容加載完成的時間
9. requestDuration：請求區間
10. redirectTime：重定向的時間
在一些商業性能采集的應用中，我看到有瀑布圖的展示，不知道他們是怎麼搞的。
網絡狀态就是擷取目前是“WIFI 2G 3G 4G”等。
如果能擷取到這個參數，就能準确知道頁面在不同網絡狀态中展現的情況。
目前隻知道這種方法，感覺實用性不是很大。
在index.html中寫了個例子，将圖檔放到某個伺服器下面會更準确一些。
現在的頁面上面充斥着大量的ajax請求，可以将請求的資訊儲存起來有助于分析性能。
在項目中使用Zepto庫、jQuery等封裝好的庫，最後還是會調用原生的“XMLHttpRequest”
可以重新一下“XMLHttpRequest”對象，在這個對象的幾個步驟中埋入要統計的點。
在open和send中也埋入統計的方法，通過這種方式就能擷取到資訊了，下圖就是統計的資訊。
1）UA資訊
每個請求頭中都會帶有“User-Agent”屬性，通過這個屬性可以分析出OS、Device、Browser、Platform等資訊。
我自己沒有封裝這個頭，網上有很多插件可以做分析的工作，不過JS的話有點大。
2）分辨率
這個比較簡單就是擷取螢幕的實體寬度和高度，一句話就能擷取。
異常監控就是監聽“window.onerror”事件，在這個事件内能夠擷取到錯誤提示資訊，行數，列數，錯誤位址。
1）資料發送
為了更好的跨域，資料發送通過設定Image對象的src來實作。
簡單的将各個收集過來的資料作為URL中的參數傳過去，代碼中可能有BUG。
發送以後就是儲存資料了，可以将資料儲存在Hadoop中。
2）Primus的引用
由于要計算白屏時間，dom時間等，是以位置不能随便放，得要放在head的最後面。
如果要做點初始化配置也是完全OK的。
源碼下載下傳：
<a href="https://github.com/pwstrick/Primus" target="_blank">https://github.com/pwstrick/Primus</a>
參考資料：
<a href="http://githubengineering.com/browser-monitoring-for-github-com/%20" target="_blank">Browser Monitoring for GitHub.com</a>
<a href="http://www.oneapm.com/bi/feature.html%20" target="_blank">Browser Insight</a>
<a href="http://www.alloyteam.com/2014/03/front-end-data-monitoring/" target="_blank">前端相關資料監控</a>
<a href="https://www.zhihu.com/question/37585246" target="_blank">你是如何搭建 Web 前端性能監控系統的？</a>
<a href="http://taobaofed.org/blog/2015/10/28/jstracker-how-to-collect-data/" target="_blank">JSTracker</a>
<a href="http://www.cnblogs.com/ihardcoder/p/5336639.html" target="_blank">從零開始搭建前端資料監控系統(一)-同類産品調研</a>
<a href="http://www.cnblogs.com/chenpingzhao/archive/2015/11/13/4963416.html" target="_blank">使用Javascript監控前端相關資料</a>
<a href="https://varvy.com/performance/document-ready-state.html" target="_blank">Document.readyState</a>
<a href="https://github.com/acelan86/chromeDevTools/wiki/%E8%AF%84%E4%BC%B0%E7%BD%91%E7%BB%9C%E6%80%A7%E8%83%BD%20" target="_blank">評估網絡性能</a>
<a href="http://www.cnblogs.com/_franky/archive/2011/11/07/2238980.html" target="_blank">HTML5 performance API 草案.</a>
<a href="http://javascript.ruanyifeng.com/bom/performance.html" target="_blank">Performance API</a>
<a href="http://www.infoq.com/cn/articles/html5-performance-api-monitoring" target="_blank">使用HMTL5 API監控前端性能</a>
<a href="http://www.alloyteam.com/2015/09/explore-performance/" target="_blank">初探 performance – 監控網頁與程式性能</a>
<a href="http://www.alloyteam.com/2012/11/performance-api-monitoring-page-performance/" target="_blank">使用performance API 監測頁面性能</a>
<a href="http://tech.meituan.com/performance-metric.html" target="_blank">美團性能優化之路——性能名額體系</a>
<a href="http://codingjohnson.com/javascript-precision-timing#.Vz634Pl96Uk" target="_blank">Javascript precision timing</a>
<a href="https://blog.mariusschulz.com/2013/11/22/measuring-execution-times-in-javascript-with-consoletime" target="_blank">Measuring Execution Times</a>
本文轉自 咖啡機（K.F.J） 部落格園部落格，原文連結：http://www.cnblogs.com/strick/p/5750022.html，如需轉載請自行聯系原作者