[測試] Table排版於Android上之流量測試

[Tool] NetCounter – Android 流量監測工具

當我們在進行網頁設計時,通常會使用兩種方式:

一種是以Table排版;另一種則為CSS排版。

從保哥的「善用 CSS 中的 table-layout 屬性加快 Table 的顯示速度」這篇文章可得知,

使用 Table排版讓網頁可在各瀏覽器中顯示比較不會亂掉,

因此還是有為數不少的人使用此方法。

然而gipi提出了「用Table排版會產生一些問題」,

就如同上述,使用Table排版在瀏覽器中顯示不易亂掉,較為美觀,

但相對的,當使用Table排版的欄位越來越多時,

會造成CPU使用率的增加,使畫面render的速度慢上許多。

,後來我將Table改成DIV+CSS來進行版面配置,CPU使用率過高的問題就解決了。

gipi的「為何不要用Table排版」這篇文章也是在談論此議題,

但關鍵就在於「效能」這兩個字。

 

那如果要開發手機的網頁時,是否也會面臨相同的問題呢?

比較幸運的是,用手機瀏覽的網頁往往不需要太多資訊和太過複雜的表達方式,

意味著用Table排版不會需要太多的欄位,因效能產生的問題也可望減少。

但這些理想都要建立在一個前提之上,

那就是用Table排版並不會造成手機瀏覽網頁的流量問題。

為了驗證此假設,所以我在之前安裝的「Android模擬器」上,

以Android流量監測工具「NetCounter」進行測試。

 

首先,先以模擬器連結到「NetCounter」的網站:

http://www.jaqpot.net/netcounter/

image

接著下載最新版本的軟體。

image

image

下載完成後再進行軟體的安裝。

image

image

裝好之後就可以在工具列表中看到「NetCounter」的快捷鍵囉!!

image

這是「NetCounter」軟體的介面,

它會顯示此手機在今天、過去一週和過去一個月的網路流量。

image

 

測試一:

安裝好後先測試2*2大小的Table,到底會產生多大的流量?

image

結果總流量從757.8KB增至759.8KB,共增加了2KB。

image image image

 

測試二:

接著測試2*15大小的Table,結果產生了3.2KB的流量。

image

image image image

 

測試三:

測試2*15大小的Table,在Table中加了8個不同類型的控件,產生了約10KB的流量。

image

image image image

小結:平均下來每個控件約產生1KB的流量,但在此測試的控件並未加入事件。

 

測試四:

測試10個3*2大小的Table,產生了約5KB的流量

image

image image image

小結:增加Table數並不會過度增加流量。

 

總結:

以目前的測試來看,Table並不會造成網頁流量太大的負擔,

若手機網頁有用到Table排版,在不會用到過多的欄位的前提下,

流量應可控制在一定的範圍內。

 

另外,還有Table在Android的顯示測試。

若勾選在Settings裡的Auto-fit pages的選項,

表格內容會自動調整為手機視窗大小。

image image  image

image

 

反之,若不勾選該選項的話,

網頁就會呈現原本的Table寬度,有scroll bar讓使用者拉。

image

image