上個月，Yahoo!優異性能（Yahoo!'s Exceptional Performance）開發團隊成員 Stoyan Stefanov 出席了蒙特利爾的2008魁北克PHP會議演講。他提供了他們團隊最新的研究成果和提高網頁性能規則20條。在早先的高性能網頁開發14條軍規已經讓大家耳熟能詳，此次新增的20條更加全面，覆蓋了伺服器端、cookies、頁面內容、JavaScript、CSS、圖片、移動手機應用這七大類別。以下內容就是根據這二十條結合個人在實際開發中的理解所做的全面解讀。希望對大家開發有所助益。
閱讀指導：
1. 每條規則後會指明是針對上述所說的七大類別中哪個類別的優化。
2. 文中提到的一些工具在文後附注中會提供簡要說明。
3. 文中經常提到“元件”這個詞，這個詞不同于我們程式開發中常提到的元件概念。本文中提到的“組件”特指嵌在HTML頁面中圖片、JavaScript腳本、CSS等靜態檔。
一、儘早清除緩衝區［伺服器端］
假如使用者請求一個頁面，而這個頁面在後端伺服器需要花200至500毫秒乃至更長時間才能生成最終HTML頁面，這時候使用者流覽器處於較長時間的、等待頁面資料返回的空閒狀態，使用者體驗不會很好。此時可以根據頁面內容長短做適當分隔，將先生成的頁面局部HTML緩衝內容提前發送到用戶端，不必讓伺服器消耗記憶體緩衝完整個龐大的頁面內容後再行輸出。這種方法有益於處理後端負荷大而前端負荷輕的頁面。
在HTML頁面的head標籤位置後是清除緩衝的好位置，因為HTML的head標籤可以包括 CSS 和 JavaScript 檔，對於流覽器而言獲取頁面顯示與後端伺服器處理並行的效果較好。在PHP中有一個函數 flush()，它可以發送請求頁面的局部HTML代碼給流覽器，以便流覽器能先取得頁面已經生成的部分HTML，同時後端伺服器繼續忙於處理生成頁面餘下的HTML。以下以此函數做個示例：view plaincopy to clipboardprint?
...
...
...
...
其他語言也有類似語法，如ASP.NET和ASP中的 Response.Flush()。
注意：在實際Web開發中，儘量減少HTTP請求次數是優化的重要方面，這條基本原則是早先14條和新增20條中很多規則的制訂基礎，實際上它也是14條規則中第一條也是非常重要的一條規則，但是使用儘早清除緩衝語句會增加一個頁面的HTTP請求次數，這無疑是一個矛盾，因此請注意本條規則的適用範圍，不要濫用它。
二、使用GET方法的AJAX請求［伺服器端］
這個容易理解一些。AJAX經常要用XMLHttpRequest，但是它的POST方法在流覽器中完成需要執行兩步：首先發送資訊頭，然後才是發送資料；而GET方法只用一個TCP資料包傳遞（cookies資訊例外）即可，減少了一個步驟，速度會快些。
另外根據HTTP規範，GET方法就是為獲取資訊而生的。因此僅在請求資料而不是發送資料給伺服器端存儲時，使用GET方法很有意義。
要注意的是，IE中URL允許最大允許長度是2K，用GET方法發送資料時注意2K的這個限制。
三、後載入元件［頁面內容］
使用該方法的意義在於：如果某個頁面內容豐富多彩的話，在流覽器載入顯示它時速度就不會很快。使用後載入元件的方法可以通過延遲載入一些隱藏內容來保證流覽器優先顯示初始頁面。
要做到這一點必須仔細觀察自己的頁面並且問自己：“解釋生成一個完整頁面，什麼部分內容是開始載入時絕對必須顯示的？”清楚了這個問題，那麼那些餘下內容和元件就可以採用後載入方法延遲生成。這樣會大大加快頁面顯示速度。
這個技巧通常是JavaScript通過處理頁面載入時的onload事件完成。例如，使用JavaScript代碼和庫去執行拖放動態效果操作時，這些操作可以延遲，因為拖動頁面上元素的操作只能等初始頁面生成完後才能發生。頁面中的隱藏內容也適合用後載入方式，因為只有頁面載入完畢使用者才能操作決定是否顯示該內容。
Yahoo!網站的首頁內容繁多，觀察處於隱藏狀態下的內容，這些內容通常在一些選項卡一樣的標籤頁當中，只有點擊後才會載入。
只要明白該規則的優化要點後相信大家可以通過JavaScript做出自己的具體實現。Yahoo!提供了兩個用於實現後載入方法的工具：
◆ YUI Image Loader：可以延遲圖片顯示
◆ YUI Get utility：它可以在頁面載入完成後把JavaScript和CSS資源綁定到DOM上去。
以上的工具是Yahoo!的YUI庫提供。
四、預載入元件［頁面內容］
從文字上看預載入元件與後載入元件似乎作用相反，但實際上二者目標是完全不同的。通過預先載入元件可以充分利用流覽器的閒置時間，並且可以請求未來頁面需要的元件。在這種情況下，當使用者訪問下一個頁面時，你已經提前讓大多數元件保存在緩存中，使用者載入這個頁面就會非常快。
預載入類型有下列三種：
1. 無條件預載入
onload事件一觸發，就要馬上取回一些指定的組件。可以檢查google.com首頁中onload事件中請求Sprite圖片的例子（注：什麼是Sprite圖片，請參看第十六條規則）。在這個例子可以看出這個sprite圖片:
在google.com首頁本身並不需要, 但它會在隨後使用者搜索生成的結果頁面中需要。
2. 條件預載入
根據使用者操作預測使用者下一步操作的方向，並據此做預載入。例如，search.yahoo.com中，在輸入框中剛鍵入幾個字元後，就會看到頁面對你鍵入的詞做出合理推測，推出幾個可能要搜索的實際關鍵字。此方法目前穀歌（google.cn）也在使用。
3. 提前預載入
在將重新設計的網站頁面發佈前用此法較好。頁面重新設計後常會有這樣的回饋：“新網站太酷了，就是比以前慢”。原因在於用戶訪問舊網站是全緩存的，但新網站還沒有緩存過。這時可以在發佈新設計前就預載入一些新網站元件，這可以減少沒有緩存的副作用。可以利用用戶訪問舊網站時流覽器空閒的時間請求新網站要使用的圖片、腳本等。
五、減少 DOM 元素數量［頁面內容］
一個複雜的頁面意味著要請求下載的位元組數更多，也意味著用JavaScript訪問DOM速度更慢。
如何儘量減少已有頁面的 DOM 元素數量呢？一個重要的思路就是不要濫用表格table和div 。很多人習慣用一些網頁編輯軟體去設計頁面，這樣會導致大量嵌套的表格或在使用語義不合法的標記。使用div要僅當它在語義上有意義時才使用它，有些開發者使用它僅僅是因為它可以被流覽器解釋生成一個新行。
Yahoo! 提供了一個避免這些問題的方法——使用YUI CSS工具。grids.css 有助於整體佈局設計，fonts.css 和 reset.css 有且於清除流覽器的默認格式設置。這些工具可以在Yahoo!的YUI頁面中去找。
DOM元素的數量可在Firebug的Console上鍵入 document.getElementsByTagName('*').length 得到。
DOM 元素不超過多少才適當呢？這可以通過檢查一些有良好設計的頁面來感覺比較。如Yahoo! 主頁訪問量相當大，它的數量在700個元素（HTML標籤）以下。
六、分隔元件到多個域中［頁面內容］
對終端使用者回應時間影響最大的就是所請求頁面所含元件數量。只要流覽器緩存為空，下載每個元件需要佔用額外的HTTP請求，只有緩存滿時才可能不佔用。
HTTP/1.1規範中建議流覽器對每一個主機名稱允許併發下載兩個元件。預設狀態下，Internet Explorer和Firefox都符合這個規範。注意：IE8.0默認允許6個併發請求。
許多網頁中所有元件都從同一主機名稱中下載，這時不僅回應時間受併發執行緒數限制，同時也受該伺服器CPU和頻寬限制。把頁面元件分佈在兩個主機名稱中，整體回應時間就會快2倍，CPU和頻寬消耗也會得以分擔。
七、儘量減少 HTML 標籤 iframe 的使用數［頁面內容］
iframe允許在父文檔內插入一個HTML文檔。要想高效使用iframes，理解它的工作方式很重要。
使用iframe有如下好處：
◆ 有助於減慢顯示協力廠商標記和廣告內容。
◆ 是個安全的 Sandbox。
◆ 能併發下載腳本。
但同時也有弊端：
◆ 即使iframe 內的 HTML 文檔內容為空，消耗也比較高。
◆ 會阻止頁面的onload事件
◆ 非語義的
八、避免404頁面［頁面內容］
如果做了一個HTTP請求然後得到一個無用的回應頁面，不僅完全不必要而且會降低用戶體驗。404頁面就是在沒有發現指定資源時返回的頁面。
一些網站提供了有益的404提示，對用戶體驗有好處，但這畢竟浪費了伺服器資源。當連結一個外部JavaScript檔，而它又出了404錯誤，這尤其糟糕。首先，因為這個下載有問題會阻止併發下載；其次，即使有錯流覽器仍然會盡力解析404返回的內容，看看有無JavaScript代碼，盡力查找裡面可用代碼。
訂閱
文章
所有留言
2009年1月6日星期二
2008年12月29日星期一
富程式員, 窮程式員--(轉載)
近日再閱讀富爸爸, 窮爸爸一書, 給我些靈感, 寫了以下文章.
我和P是好朋友，都是一樣喜歡編寫程式。
我們由1997年就好想創業，看到 IT 熱，人人做網站賺大錢，我們也想成為其中之一。
可惜到1999年畢業， 我們也想不到有甚麼構思可以創業， 只好出來打工。P到一間大型的程式設計公司做程式設計員，我便在大學做助理研究，然後到一間小型的程式設計公司做 Project Lead。
2001年，P已經升了職， 當時他的薪金已超過市場薪酬，比我高出很多。
由始至終我都沒有放棄創業的念頭，2001我同P說， 不如一起開間程式設計公司。P問我有沒有計劃編寫甚麼軟件、如何找客戶、收入和支出會有多少等等問題， 我答沒有週詳的計劃， 但只覺得工字不出頭， 很想試一試。
P覺得現在薪酬已很好，老闆又對他很好，很快又會升職加薪，所以拒絕我的計劃，他建議有週詳的計劃才創業吧。
我創業時真的沒有計劃怎樣發展公司，但我的性格就是這樣， 只要覺得對的事， 便要去嘗試。
2001年離職， 寫了個公司網頁 (http://www.memdb.com) 和一個示範系統就開了公司。 我不清楚要開發甚麼軟件去迎合市場需求， 只是研究記憶體資料庫技術，開發一個資料庫引擎MemDB。
接著客戶開始找我， 告訴他們要甚麼系統，市場需要甚麼解決方案，我便不斷地學習， 開發一套又一套的軟件， 租借、髮廊、會計、零售和美容管理等等系統， 直到現在發展的連鎖和網絡管理系統，要求都是客戶提供的。同時，也開發了多個不同的模組， 以前要用七日才可以完成的系統， 現在只需要三日便可以。
完成的系統，可以繼續銷售給不同的客戶，這也成為公司收入的主要來源 (不用做的收入)。
我定期也會和P聚會，只聽到他埋怨公司減人工、要加班和同事不好等等的說話，開始時我會與他分享公司的發展，但之後也不敢說太多，因為知道他己沒有興趣聽下去。
我現在的薪酬和P差不多， 但每日工作時少他一半。有一天，我和P會面，知道他想轉工，想邀請他和我一起發展公司，但已不知道合作方式。 公司需要的不是一個窮程式員，只會要求一份穩定工作，安於現狀，為別人工作的伙伴，需要的是富程式員，知道如何改變現狀， 將公司發展得更好的人才。
富程式員和窮程式員的分別:
1) 富程式員會為自己發展系統，窮程式員只會為別人發展系統。
2) 富程式員會利用系統來幫他賺錢，窮程式員要從開發系統才可以賺錢。
3) 客戶、合作伙伴、代理商和投資者會來找富程式員，窮程式員要找人給他一份工作。
註: 以上P是取POOR的意思，沒有指任何人士．
相關文章：
1) 窮程式員被裁了
我和P是好朋友，都是一樣喜歡編寫程式。
我們由1997年就好想創業，看到 IT 熱，人人做網站賺大錢，我們也想成為其中之一。
可惜到1999年畢業， 我們也想不到有甚麼構思可以創業， 只好出來打工。P到一間大型的程式設計公司做程式設計員，我便在大學做助理研究，然後到一間小型的程式設計公司做 Project Lead。
2001年，P已經升了職， 當時他的薪金已超過市場薪酬，比我高出很多。
由始至終我都沒有放棄創業的念頭，2001我同P說， 不如一起開間程式設計公司。P問我有沒有計劃編寫甚麼軟件、如何找客戶、收入和支出會有多少等等問題， 我答沒有週詳的計劃， 但只覺得工字不出頭， 很想試一試。
P覺得現在薪酬已很好，老闆又對他很好，很快又會升職加薪，所以拒絕我的計劃，他建議有週詳的計劃才創業吧。
我創業時真的沒有計劃怎樣發展公司，但我的性格就是這樣， 只要覺得對的事， 便要去嘗試。
2001年離職， 寫了個公司網頁 (http://www.memdb.com) 和一個示範系統就開了公司。 我不清楚要開發甚麼軟件去迎合市場需求， 只是研究記憶體資料庫技術，開發一個資料庫引擎MemDB。
接著客戶開始找我， 告訴他們要甚麼系統，市場需要甚麼解決方案，我便不斷地學習， 開發一套又一套的軟件， 租借、髮廊、會計、零售和美容管理等等系統， 直到現在發展的連鎖和網絡管理系統，要求都是客戶提供的。同時，也開發了多個不同的模組， 以前要用七日才可以完成的系統， 現在只需要三日便可以。
完成的系統，可以繼續銷售給不同的客戶，這也成為公司收入的主要來源 (不用做的收入)。
我定期也會和P聚會，只聽到他埋怨公司減人工、要加班和同事不好等等的說話，開始時我會與他分享公司的發展，但之後也不敢說太多，因為知道他己沒有興趣聽下去。
我現在的薪酬和P差不多， 但每日工作時少他一半。有一天，我和P會面，知道他想轉工，想邀請他和我一起發展公司，但已不知道合作方式。 公司需要的不是一個窮程式員，只會要求一份穩定工作，安於現狀，為別人工作的伙伴，需要的是富程式員，知道如何改變現狀， 將公司發展得更好的人才。
富程式員和窮程式員的分別:
1) 富程式員會為自己發展系統，窮程式員只會為別人發展系統。
2) 富程式員會利用系統來幫他賺錢，窮程式員要從開發系統才可以賺錢。
3) 客戶、合作伙伴、代理商和投資者會來找富程式員，窮程式員要找人給他一份工作。
註: 以上P是取POOR的意思，沒有指任何人士．
相關文章：
1) 窮程式員被裁了
2008年10月29日星期三
一篇粉生活化的解釋出ERP的精髓....
ERP (Enterprise Resource Planning)企業資源計畫，指的是具有品質管理、現場服務、維修管理、配銷、行銷和供應商管理等額外能力的系統。
還是不懂嗎？ 沒關係，看了這篇文章就懂了~~^^"
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
＊＊＊＊
一天中午，丈夫在外給家裏打電話：「親愛的老婆，晚上我想帶幾個同事回家吃飯
可以嗎？」（訂貨意向）
妻子：「當然可以，來幾個人，幾點來，想吃什麼菜？」
丈夫：「6個人，我們7點左右回來，準備些酒、烤鴨、番茄炒蛋、涼菜、蛋花
湯……你看可以嗎？」（商務溝通）
妻子：「沒問題，我會準備好的，」（訂單確認）
妻子記錄下需要做的功能表（MPS計劃），
具體要準備的菜：鴨 酒 番茄 雞蛋 調料──（BOM物料清單），
發現需要：1只鴨，5瓶酒，4個番茄，──（BOM展開），
炒蛋需要6個雞蛋，蛋花湯需要4個雞蛋（共用物料）。
打開冰箱一看（庫房），只剩下2個雞蛋（缺料）。
來到自由市場，妻子：「請問雞蛋怎麼賣？」（採購詢價）
小販：「1個1元，半打5元，1打9.5元。」
妻子：「我只需要8個，但這次買1打。」（經濟批量採購）
妻子：「這有一個壞的，換一個。」（驗收，退料，換料）
回到家中，準備洗菜、切菜、炒菜──（工藝路線），
廚房中有燃氣、微波爐、電飯堡──（工作中心）。
妻子發現拔鴨毛最費時間（瓶頸工序，關鍵工藝路線），
用微波爐自己做烤鴨可能就來不及（產能不足），
於是決定在樓下的餐廳裏買現成的（產品委外）。
下午4點，電話鈴又響：「媽媽，晚上幾個同學想來家裏吃飯，你幫準備一下。」
（緊急訂單）
「好的，兒子，你們想吃什麼，爸爸晚上也有客人，你願意和他們一起吃嗎？」
「菜你看著辦吧，但一定要有番茄炒雞蛋。我們不和大人一起吃，6：30左右回
來。」（呵呵，不能併單處理）
「好的，肯定讓你們滿意。」（訂單確認）
雞蛋又不夠了，打電話叫小販送來。（緊急採購）
6：30，一切準備就緒，可烤鴨還沒送來，急忙打電話詢問：「我是李太太，怎麼
訂的烤鴨還沒送來。」（採購委外單跟催）
「不好意思，送貨的人已經走了，可能是堵車吧，馬上就會到的。」門鈴響了，
「李太，這是您要的烤鴨。請在單上簽一個字。」（驗收、入庫、轉應付帳款）
6：45，女兒的電話：「媽媽，我想現在帶幾個朋友回家吃飯可以嗎？」（呵呵，
又是緊急訂購意向，要求現貨）
「不行呀，女兒，今天媽媽已經需要準備兩桌飯了，時間實在是來不及，真的非常
抱歉，下次早點說，一定給你們準備好。」（哈哈，這就是ERP的使用侷限，要有
穩定的外部環境，要有一個起碼的提前期）
送走了所有客人，疲憊的妻子坐在沙發上對丈夫說：「親愛的，現在咱們家請客的
頻率非常高，應該要買些廚房用品了（設備採購），最好能再雇個小保姆（連人力
資源系統也有介面了）。」
丈夫：「家裏你做主，需要什麼你就去辦吧。」（通過審核）
妻子：「還有，最近家裏花銷太大，用你的私房錢來補貼一下，好嗎？」（哈哈哈
哈，最後就是應收貨款的催要。還可再加上成本核算，總帳，決策分析等等）。
例如……送走了所有客人，妻子拿著計算器，準確地算出了今天的各項成本（成本
核算）和節餘原材料（車間退料），並計入了日記帳（總帳），把結果念給丈夫聽
（給領導報表），丈夫說道「值得，花了145.49元，請了好幾個朋友，感情儲蓄帳
戶增加了若干」（經濟效益分析）。
還是不懂嗎？ 沒關係，看了這篇文章就懂了~~^^"
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
＊＊＊＊
一天中午，丈夫在外給家裏打電話：「親愛的老婆，晚上我想帶幾個同事回家吃飯
可以嗎？」（訂貨意向）
妻子：「當然可以，來幾個人，幾點來，想吃什麼菜？」
丈夫：「6個人，我們7點左右回來，準備些酒、烤鴨、番茄炒蛋、涼菜、蛋花
湯……你看可以嗎？」（商務溝通）
妻子：「沒問題，我會準備好的，」（訂單確認）
妻子記錄下需要做的功能表（MPS計劃），
具體要準備的菜：鴨 酒 番茄 雞蛋 調料──（BOM物料清單），
發現需要：1只鴨，5瓶酒，4個番茄，──（BOM展開），
炒蛋需要6個雞蛋，蛋花湯需要4個雞蛋（共用物料）。
打開冰箱一看（庫房），只剩下2個雞蛋（缺料）。
來到自由市場，妻子：「請問雞蛋怎麼賣？」（採購詢價）
小販：「1個1元，半打5元，1打9.5元。」
妻子：「我只需要8個，但這次買1打。」（經濟批量採購）
妻子：「這有一個壞的，換一個。」（驗收，退料，換料）
回到家中，準備洗菜、切菜、炒菜──（工藝路線），
廚房中有燃氣、微波爐、電飯堡──（工作中心）。
妻子發現拔鴨毛最費時間（瓶頸工序，關鍵工藝路線），
用微波爐自己做烤鴨可能就來不及（產能不足），
於是決定在樓下的餐廳裏買現成的（產品委外）。
下午4點，電話鈴又響：「媽媽，晚上幾個同學想來家裏吃飯，你幫準備一下。」
（緊急訂單）
「好的，兒子，你們想吃什麼，爸爸晚上也有客人，你願意和他們一起吃嗎？」
「菜你看著辦吧，但一定要有番茄炒雞蛋。我們不和大人一起吃，6：30左右回
來。」（呵呵，不能併單處理）
「好的，肯定讓你們滿意。」（訂單確認）
雞蛋又不夠了，打電話叫小販送來。（緊急採購）
6：30，一切準備就緒，可烤鴨還沒送來，急忙打電話詢問：「我是李太太，怎麼
訂的烤鴨還沒送來。」（採購委外單跟催）
「不好意思，送貨的人已經走了，可能是堵車吧，馬上就會到的。」門鈴響了，
「李太，這是您要的烤鴨。請在單上簽一個字。」（驗收、入庫、轉應付帳款）
6：45，女兒的電話：「媽媽，我想現在帶幾個朋友回家吃飯可以嗎？」（呵呵，
又是緊急訂購意向，要求現貨）
「不行呀，女兒，今天媽媽已經需要準備兩桌飯了，時間實在是來不及，真的非常
抱歉，下次早點說，一定給你們準備好。」（哈哈，這就是ERP的使用侷限，要有
穩定的外部環境，要有一個起碼的提前期）
送走了所有客人，疲憊的妻子坐在沙發上對丈夫說：「親愛的，現在咱們家請客的
頻率非常高，應該要買些廚房用品了（設備採購），最好能再雇個小保姆（連人力
資源系統也有介面了）。」
丈夫：「家裏你做主，需要什麼你就去辦吧。」（通過審核）
妻子：「還有，最近家裏花銷太大，用你的私房錢來補貼一下，好嗎？」（哈哈哈
哈，最後就是應收貨款的催要。還可再加上成本核算，總帳，決策分析等等）。
例如……送走了所有客人，妻子拿著計算器，準確地算出了今天的各項成本（成本
核算）和節餘原材料（車間退料），並計入了日記帳（總帳），把結果念給丈夫聽
（給領導報表），丈夫說道「值得，花了145.49元，請了好幾個朋友，感情儲蓄帳
戶增加了若干」（經濟效益分析）。
2008年10月7日星期二
訂閱：
文章 (Atom)