2007-03-01

計算頁面產生時間

Blogger 提供很多能夠 Hack 的彈性,和我一樣花俏的人就會在上面搞一堆的功能,雖然可以產生所有自己想要的效果,不過,功能越多卻又沒有兼顧效能的話,會浪費讀者等待的時間。問題來了,到底讀者看一個頁面,從開始讀取到頁面產生完畢,到底要花使用者多少時間?還有,裝了某些 Hack,對整個頁面產生的效率會造成什麼效能上的影響?這個數據對使用者和站長來說都可以作為效能的參考。有些 Blog 系統甚至還提供資料庫的 Query 數量,讓自己判斷程式的效能和執行時間,這個在 Blogger 上做不到,只能利用 Javascript 做個簡單的 Timer,計算使用者從頁面讀取到完成的時間,這是個影響變數很多、也很粗糙的評估方式,僅用來參考網站的效能。

首先,在頁面一開始的地方宣告啟始一個計時器 (Timer),這是個 Javascript 的全域變數 (Global Variable),所以要放在 <head> 標籤裡面(或是自行定義的 Javascript 區段中間),<HTML> 前面,塞入下面這幾行:

<script type='text/javascript'>
<!-- Global variable for calculating page generation time-->
var PageInitTime = new Date();
</script>

再來,就是在頁面的「最後」也放入一個計時器,兩個計時器的時間相減就是頁面產生過程所花費的時間了。問題來了,哪裡是頁面的最後?每個人的頁面樣版都不一樣,所以如果要放入自己首頁的最後一行,就要自行判斷囉!基本上有兩種地方可以放,第一,直接塞在樣版 HTML 完整的原始碼裡面,不過每個 Widget 出現在頁面上的順序不一定會照程式碼裡面的先後,你要很清楚倒底哪一段程式或 Widget 才是最後一個(可以由實際網頁原始碼裡面知道)。第二個地方,是直接編輯放入特定 HTML/Javascript 模組裡面。像我的頁面,最下面有一個 Javascript「網頁元素」放在 Footer 區段裡面(就是最下面顯示網站訂閱圖示那一塊),它絕對是「最後」一個載入執行的模組,所以計算和顯示執行時間的程式碼當然就直接放在裡面就行了!上面在頁首放了一個計時器,接著計算和顯示的程式碼如下:

<script type="text/javascript">
var PageEndTime = new Date();
document.write ("Page used "+(PageEndTime.getTime()-PageInitTime.getTime())/1000+" secs");
</script>

請注意,一定要放在頁面最後才會比較準,亂塞在 Sidebar 裡甚至標題列裡就不行囉!由於計算的 Javascript 程式是在 Client 端讀者的瀏覽器上執行,所以如果時間太長,可能牽扯到的因素除了頁面的 Hack 外掛之外,Blogger 官方的網路和伺服器效能、閱讀者的網路狀況、電腦速度和瀏覽器效能也都有影響。所以要評估自己 Blog 的效率,要在固定時間、固定電腦上測試才有意義,畢竟,這只是參考用的啊~

回應: 3

Het187 提到...

我采用你的好多HACK

THANKS

or 提到...

可以要個數據做參考么~~Abin大你的頁面產生時間是多少。

Abin 提到...

To or:
我這裡提到的頁面產生時間,指的是「讀者」看到完整頁面所需要的時間,並不是「伺服器」完成回應所需要的時間,所以這個時間每個讀者看到的都不一樣,可能和網路速度、看的頁面內容、自己電腦的反應甚至 Blogger 官方伺服器的狀況也有關係,僅供參考。
目前我的頁面最下面一行就有顯示,我自己看到的時間大概掉在 5-10 秒,不過感覺上並沒有那麼久(因為很多模組都是在背景載入的)。

張貼留言

歡迎留言或發表意見,不過要理性不做人身攻擊。匿名的朋友得到回應的速度會比較慢喔~
發問相關的禮貌和規矩請先參考這篇文章,不當留言、和本文無關的回應可能會被直接刪除無視喔!