午後的陽光，非常漂亮的灑進了Allen在睡覺的房間，並且直接打在他的臉上...冷氣在這個時候，是多餘的，因為開再強都沒什麼用，他臉上的汗，一滴一滴的滑落到枕頭上，睡夢中的他，感到很熱...張開眼，下了床，開了門...看見客廳空空的...Maggie不見了!

(她該不會...生氣...跑回家了吧!)...他走到電腦前，看見Maggie列出來的問題...

他找了一下筆記本，翻開了以前寫過的那一頁...他重新用電腦再畫了一個新的版本，畫完後...IT民宿的大門打開了...Maggie手上拎著一個便當走進來...

<你起床啦...我剛去買便當，給我吃的.......幹嘛那樣看我? 你睡到兩點耶!>

(......哦...那妳邊吃，我繼續跟妳說吧! 我看到妳列出來的問題清單了。)

Maggie坐到Allen旁邊後，打開了便當...<開始吧，我有幾個地方不懂哦，你說吧。>

(這個...是妳問的第一個問題。)

(之前妳在練習CSS的時候，網頁套用CSS的方式有三種，這幾行，是在套用CSS、Jquery和JqueryMobile，套用的方法為「External」，就是從這個HTML檔案外面，將CSS、Jquery和JqueryMobile載入到這個網頁裡面來。這樣了解嗎?)

<等一下，我在吃飯啦............為什麼那個「href」裡的連結位置不一樣? 我們本來是在JS Bin測試，所以要用自己的CSS和Jquery相關的東西時，需要連到別的地方，在JS Bin才能使用，這個部份我知道，但為什麼你將在JS Bin測試的HTML檔案，移回到你的網頁主機時，這三行要載入的Jquery什麼什麼，還是要連到別的地方載入，而不是也放到你的網站裡?>

Maggie手指著電腦上的這幾行...<你邊說我邊吃，我先把這片肉吃完哦。>

<link rel="stylesheet" href="css/maggie_jq_theme.css" />
<link rel="stylesheet" href="css/jquery.mobile.icons.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.4/jquery.mobile.structure-1.4.4.min.css" /> 
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> 
<script src="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.js"></script>

(我先給妳看這張圖好了。)

(從網頁載入的流程上來看，在A、B、C、D和Z，這五個點，會是智慧型手機，載入網頁時的瓶頸點，在IT世界俗稱的「Bottleneck」。妳看一下這四個點的位置。)

<A點的Device Perormance 指的是什麼?>

(Device Performance，有的智慧型手機是 單核心CPU，我跟妳用的是四核心，有的則是雙核心，CPU會影響到智慧型手機的效能，所以用智慧型手機瀏覽網頁時，開出網頁的時間快或慢，跟Device Perormance會有關係。)

<哦...你繼續，我把這豆干吃完就好了...>

(......剩下的三個點，B點指的是，我們智慧型手機的上網速度.....會影響網頁開出來的快慢。

C和D呢，則是網頁提供者那一端的「網頁主機效能(Device Performance)和線路頻寬相關的因素」。 這四個點，會影響用智慧型手機瀏覽網頁，網頁顯示出來的快或慢...)

<可是，現在不是都說什麼4G還是3G...上網速度不是都很快了...還會影響哦?>

(我第一次遇到妳的地方，知道在那裡吧? 一大片的稻田中間...我們站在那往北看是花東縱谷，往西看是中央山脈...往東...在離我們很遠很遠很遠的東邊，才有房子，房子的東邊是海岸山脈，往南邊就不用說了...還是田...妳那天在那邊，要上傳一張照片，不是傳了十次都失敗? 上台鐵網站訂火車票，網頁都打不開? 不是嗎?)

<是啊......>

(妳那時候用的手機，不是雙核心的嗎?)

<是...>

(那是妳的手機有問題? 還是台鐵或臉書的網站有問題?)

<...........是我不應該到了那麼漂亮的地方，還在當低頭族......>

(所以A、B、C和D，這四個點，都有可能影響到，用智慧型手機瀏覽網頁的人。)

<原來如此，那Z那個點呢!?>

(假設妳自己製作的網站首頁，裡面有50張照片，50000個文字，然後妳到我們第一次相遇的地方，用瀏覽器打開妳寫的首頁...妳覺得打的開嗎?)

<打不開啊! 一定打不開吧!>

(是妳寫的網頁有問題嗎?)

<不是啊，如果是在市區，網頁應該打的開，不過應該會比較慢...>

(對囉! 上次不知道是那一位，現在正在吃便當的人...坐在火車上，要看Youtube的影片，結果影片一直跑不出來，就說「這Youtube怎麼這麼差啊! 速度這麼慢...然後罵了快五分鐘。)

<......對! 是我...>

(如果妳要開發網站或網頁...妳是要針對智慧型手機，寫一個版本....還是要讓智慧型手機的人，也用電腦版的網頁? ...如果將剛才說的Youtube影片，換成妳設計的網站...妳的網站，已經沒什麼人要看了。因為太慢，連妳都說爛了......)

<可是不是我寫的網頁慢啊! 是...坐在火車上或在郊外，上網的訊號本來就比較差啊! 那又......>

(一般的使用者，會知道這麼多嗎? 當妳是網頁開發者時，妳會覺得很無辜，可是當妳是使用者的時候，妳又覺得這樣太慢，這網站很爛...)

<好啦! 我便當不吃了啦...真的很討厭耶，吃個便當而已...那個Z是什麼意思啦?>

(那個Z的意思就是...在設計給智慧型手機瀏覽的網頁時...比如一個面頁不要有太多或太大的圖檔，網頁Layout不要太複雜等等，另外妳列出來的其中一個問題，這些連到外地的URL，就是提升網頁瀏覽速度的之一。)

<哦...對了，等等......我去拿你的午餐。>

(我也有午餐?)

<有啊...我又不像某人，看我吃個便當而已，就在那一直唸一直唸...我有準備啊!>

Maggie 說完話之後，抓著Allen 的右手，讓右手掌朝上...然後拿起桌上那包泡咖啡時加的糖包...接著從糖包裡，倒出一粒糖在Allen的手掌上...

<你的心，有多大...這粒糖就有多大! 我再送多你一顆，當你的.....晚餐! 我知道你的心胸很寬大，所以請不要吃太撐哦! 你先把午餐吃完，再繼續跟我講吧!>

Allen 看著自己的右手掌...(...有的時候，要說好聽的話，不能說實話...)

(待)

2014/10/21 SunAllen

現任：太陽數位文創(技術總監)_彩虹53_小鐵道民宿(管家)