Posts Tagged ‘網路’

有需要瀏覽器與網頁的審核組織嗎!??

Friday, October 8th, 2010


這張圖是在網路上搜尋找到的,如果把”網路世界”畫成一個真實的街道圖,也許真的就是長這樣吧… 挺有趣的~ 注意到最大的那棟Google建築附近一直在施工… XD

最近在看JavaScript的書時想到,如果有一個像審核iPhone App的組織,來審核要發行的Browser和網頁的話,這是一件好事嗎?

好處是以後所有要發行的Browser都要強制follow一樣的規則才可發行,不會再跑出像IE 6, 7那樣不標準的瀏覽器。不過在現在自由軟體當道的網路世界裡,似乎不太可行。或者可以改成比較軟性的作法,通過認證的Browser給予一個認證標章logo,並定期公佈新Browser或其新版本的資訊及測試結果供使用者比較和下載。灌輸使用者最好用這些認證過的Browser來瀏覽網頁,才能得到比較好的體驗。這樣一來,時間久了,使用者就會慢慢養成習慣選擇比較好的Browser軟體(就像選防毒軟體一樣),Browser開發商就不得不follow規則了。

如此一來,網頁開發者在寫頁面時就不用再做一大堆client / feature的判斷,程式碼也會比較乾淨好維護。而大型網站也可以將Web App服務送審,取得認證標章,讓使用者在使用該服務時獲得更安全的保障和更好的體驗。而一般的小網站或個人網頁當然也可以不透過認證,使用者仍然可以瀏覽。聽起來這樣的idea似乎不錯,但相對的,會不會因此扼殺了網頁程式和瀏覽器的自由度呢?? 就像現在許多人會去越獄iPhone,下載沒通過認證的軟體一樣。另外,還有一個問題是,網頁App不像一般的OS App一樣,是可以隨時修改的。萬一一開始送審時通過,但卻在日後的新改版出現問題,也很難防範。除非規定要通過認證的網站每次改版都要重新送審,並註記修改的部份,但這樣一來,會不會反而增加了App的開發時間和難度呢?

這真是一個令人爭議的問題啊,不知道未來Chrome OS正式上線後會是怎麼做? 或者仍維持現狀? 在幾年前只有IE當道時,從沒想過會有這種情形(瀏覽器百家爭鳴),所以自然不需要這種組織出現。但後來慢慢有了Firefox, Opera, Safari, Chrome…etc. 網頁的前端技術,也慢慢越變越複雜… JavaScript, AJAX, JSONP, CSS, Flex, Silverlight…etc.。最近,隨著Facebook電影的上映,似乎也宣告著未來網路世界的來臨,更蓬勃發展、更複雜、更有趣和………..更危險。

這一切,也許都要歸功於Google、Yahoo、Facebook、Microsoft、Apple…etc. 彼此之間的良性競爭(我指在網路技術方面)吧~ 如果大家為了侵犯某某專利,互相告來告去,這真的是對人類的未來科技發展有幫助嗎? I don’t think so… 這也是我想選擇Web Front-end技術做為我未來focus的主要技術的原因,我希望有一天,我寫出來的網頁程式是真的對人類有幫助的。也期待未來有更多的網路技術可以讓我玩~~ :)

The picture source is from:
http://www.deg.byu.edu/ding/WebEvolution/evolution-review.html

網頁加速的14條黃金法則

Monday, April 14th, 2008

這本書看起來蠻不錯的,很值得有在架站的人參考
我本身也是個很沒有耐性的使用者,不要說一個頁面要我等9秒鐘,等2秒鐘我都嫌久了

Reference: http://www.ithome.com.tw/itadm/article.php?c=48311

想要加快網頁下載速度,卻不知道問題出在哪裡?本書以全球十大網站做為案例分析的對象,包括Yahoo、Google、Amazon、YouTube等。只要了解大型網站的經驗法則,就可以指引你優化網頁效能的方向。

High Performance Web Sites
Steve Souders /著
O’Reilly Media出版
售價:29.99美元
Amazon四顆半星

網站的視覺設計及內容,是能否吸引訪客的重要因素之一,但也不能因而顧此失彼,造成網站效能的瓶頸。從過去的訪客行為研究分析指出,等待一個網頁的呈現時間不能超過9秒鐘,但面對目前網頁內容多媒體化的現實挑戰,要達到這樣的目標,在前端頁面的設計上,也就需要多花些心思

著重網頁前端的效能改善
《High Performance Web Sites》內容主要針對網站前端的設計人員所設計。作者曾經擔任雅虎CPO(Chief Performance Officer),在雅虎負責研究改善網站效能的方法,他以多年的經驗整理出14個網站前端設計需要注意的準則。全書內容簡明扼要,具有網站設計經驗的讀者,可以快速領略要點;初次接觸的生手,也可以透過本書建立良好的網站設計觀念。

14條必勝定律
如何有效提升網站效能?作者針對網站效能最佳化歸納出以下方針,並舉例加以說明:

1. 減少需要發出HTTP Request的數量

當你設計的網頁中包含的元件數量越多,Client需要對網站伺服器發出的HTTP Request也會增加,同時也會延長網頁處理的時間。

2. 採用Content Delivery Network服務

由Mirror Image、Akamai、SAVVIS等業者所提供的Content Delivery Network(CDN,內容遞送網路服務),可以供應強大的全球網路基礎架構,將網站以最有效的方式傳送給全球使用者,並自動幫網站選擇最佳路徑傳送資料,例如,根據瀏覽者所在地、網路品質及流量狀況,選擇距離用戶端最近的資料中心傳送資料,確保網頁的瀏覽品質及運作速度。

3. 在網頁中加入過期檔頭

你可以利用這個設定讓網頁具備快取機制,縮短頁面載入時間,尤其是針對內容不常變動的網頁。當然這樣的運用,得視你的網頁性質而定,若內容變動頻率高的網頁,則不適用此方式。

4. 善用Gzip壓縮機制

以XML/HTTP做為資料交換的開放格式已經十分普遍,傳輸的檔案體積,較過去單純的EDI方式增加許多,用傳送壓縮時間換取傳輸時間,也是一種提升效率的策略,目前常見的網站伺服器大都支援此項技術。你甚至也可以視情況選擇壓縮HTML、CSS及JavaScript的檔案內容。

5. 將Stylesheet置於網頁頁首

將樣式表(Stylesheet)置於頁首,可以讓CSS設定先行載入,在第一時間套用設定直接呈現網頁。相較於把樣式表放置在頁尾,等所有內容都下載完畢後才套用,樣式表置於頁首的作法,除了頁面呈現速度較快,載入過程中也較不易造成空白頁的出現。

6. 將Script內容置於頁尾

許多實際狀況中,網頁包含的Script程式,本身並不需要在載入後立即執行,所以作者建議將這些程式碼置於頁尾,至少內容可以在傳輸前段時間即備妥,讓使用者有較佳的瀏覽體驗。

7. 避免CSS Expression的撰寫方式

CSS Expression的目的,在於讓自訂樣式的語法可以取代部分的Script內容,雖然這麼做很好用,但因網頁顯示過程中花費較多的邏輯判斷時間,造成網站效能的致命傷。

8. 將JavaScript及CSS內容獨立於網頁內容之外

透過獨立內容的方式,讓HTML本文檔案縮小,而且可以同時被瀏覽器下載,以縮短網頁呈現的時間。

9. 減少DNS查找的次數,縮短取得網頁內容之前的前置時間

雖然網頁可以串連不同網站來源的內容,但是不同網站來源的內容一旦太多,便會延遲頁面載入速度;如果能夠減少網頁內不同網站來源的內容,就可以減少從用戶端發出的DNS Request數量,縮短DNS的查詢時間。

10. JavaScript內容精簡化

網頁中的JavaScript也是下載的一部分,所以當程式碼內容較多時,亦會直接影響網頁下載的速度。檢視一下程式碼,移除不必要的部分。

11. 避免重導向

網頁重新導向是很方便的功能,但對於使用者而言,他必須等待更多的時間直到最終頁面被載入,所以應該盡可能避免使用重導向轉址功能。

12. 移除重複的Script程式碼

重複的Script程式碼需要花費更多的下載時間,這個問題通常發生在程式碼未能妥善模組化的情況下,檢查一下你的Script程式吧。

13. 善用Etag

透過設定Web Server中的Entity Tag方式,能決定網頁中被快取的內容,以加速網頁呈現,但也得視網頁內容特性而定,Etag主要運用在靜態頁面上,而動態顯示內容的網頁則不適用此方式。

14. 讓Ajax程式可做到暫存快取

Ajax架構透過非同步的傳輸方式,讓使用者具有較佳的使用體驗,卻不見得是效能的保證。除了可以透過利用Gzip壓縮、避免DNS查找次數、簡化JavaScript內容之外,控制HTTP過期檔頭來快取Ajax網頁,也能發揮明顯效果。

拿知名網站開刀,保證你大呼過癮
本書最後以全球十大網站做為案例分析的對象,包括Yahoo、Google、Amazon、YouTube等。這些網站之所以成功,除了透過內容及社群機制吸引訪客,在網站效能的表現上,也必須克服流量提高所帶來的問題。

作者使用3個度量值(Page Weight、Response Time、YSlow Grade)逐一檢視這些網站,找出問題點以及可以改善的地方,配合前述建議的14項準則,解決效能表現不佳的現象。

作者表示,這些準則都經過實務證明為有效的解法,可以幫網站減少平均二至三成的網路傳輸時間。對照本書,檢視你的網站架構出了哪些問題,並對症下藥加以落實,我相信可以讓訪客感受到明顯的效能提升。

Google App Engine

Thursday, April 10th, 2008

Google App Engine

前一陣子Google才剛宣布了他們家新的應用技術 – Google Video Advertise 之後
Google Video AD

前幾天又宣布了一個新的服務 – Google App Engine
一個類似虛擬主機供應商提供的服務,可以將Web Application免費放罝在他們家的主機上跑
軟體開發者要去下載他們家提供App Engine SDK開發工具來開發
然後將開發好的Web Application上傳至他們的主機裡
他們標榜的好處是,開發者完全不需要去顧慮Server端主機硬體設備的環境
即使當一個小網站因為太受歡迎而變得流量非常大的時後,開發者也不需要去擔心
Google App Engine會自動將你的頻寬擴充

下面是他們提出來Application環境的幾個Features:
* dynamic web serving, with full support for common web technologies
* persistent storage with queries, sorting and transactions
* automatic scaling and load balancing (這就是上面講的自動擴充頻寬)
* APIs for authenticating users and sending email using Google Accounts (可以透過Google的Gmail帳號,利用API發送Email)
* a fully featured local development environment that simulates Google App Engine on your computer (有完整的本機模擬開發環境)

而App Engine Application目前僅可用Python這個Scripting language來開發
日後應該會再提供支援更多的程式語言
初期提供10,000個免費Account供網友申請,有500MB的空間可用
不過我昨天看到消息去申請時,名額已經被申請完了….手腳太慢~~ 囧rz

其它網站的報導,可以看這篇這篇這篇
有關Google Video Advertise的詳細報導可以看Mr.6