小雕雕的家

這個套件主要功用，是把網頁中的元素載入消耗時間，以熱力圖的方式直接表示在頁面區塊

雖然 Chrome 按 F12也可以看出到底是哪個元素耗最多資源，但還是沒有直接視覺化來的淺顯易懂

這個套件對於網站設計 or 開發者還蠻有用的 (雖然我還是習慣按F12)

 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

套件名稱：Perfmap

位置：https://chrome.google.com/webstore/detail/perfmap/hgpnhiajcdppfbogcpfdgcceepgkhdmk

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

就像下面這樣，可以一目了然哪個區塊載入最慢

第一個毫秒是指使用者花了多少時間才看到這張圖，括號中的毫秒是指瀏覽器載入這張圖花了多少時間

大家看到以上說明是不是也跟我一樣覺得怪怪的....

怎麼只有顯示圖片載入的資訊，頁面上可能還有影片、flash 之類的可怕東西啊

但看了一下他的原始碼，好像就真的只有圖片，如果要看更多資訊請自己按F12去過濾了

雖然如此，這個套件還是蠻適合不擅於使用 Chrome 偵錯工具的人，而且只要按一個鈕就行了很方便

大家下載完可以回上一頁了，因為下面就比較進階一點

===============================================================

作者的原始碼在此，如果大家有興趣應該也可以自己改一下

https://github.com/zeman/perfmap/blob/master/perfmap.js

這邊來順便觀摩學習一下人家寫的 js 

作者使用的是 Web API Interfaces 中的其中一項 Performance API

程式流程大概是這樣

1. 先去找出網頁中的所有圖片，包含背景圖與隱藏圖片

2. 然後透過 performance.getEntriesByName 去取得各圖片元素的 PerformanceEntry 物件

    PerformanceEntry 是一個有關效能與計時的物件，透過這物件去計算耗費時間

3. 再來使用 Element.getBoundingClientRect() 找出各圖片元素的 TextRectangle 物件

   判斷該物件的 width、height，如果 width > 10 而且 height > 10 的話就代表是偵測的對象

4. 依照取得的 width、height 判斷要蓋在圖片上的色塊與字的大小

5.建立一個 div Element 將他定位在剛剛 TextRectangle 抓到的 left、top 位置

6. 搞定

程式最下面還有針對滑鼠移到色塊下的 mouseover 事件

是用來控制滑鼠移過去時，底部色標示的指針式表示法

看到很有趣的套件有時候都會很好奇是怎麼寫的，也謝謝作者有公布 source code XD

參考資料 : 

http://javascript.ruanyifeng.com/bom/performance.html

https://developer.mozilla.org/en-US/docs/Web/API/Performance