Web 架構設計經驗分享

不要過設計：never over design

　　web 開發，是個非常靈活的過程，變化随時都在産生，使用者需求千變萬化，許多方面偶然性非常高，較之軟體開發，希望用一個架構規劃以後的所有設計，是不現實的。

web架構生命周期：web architecture‘s life cycle

　　所設計的架構需要在 1－10 倍的增長下，通過簡單的增加硬體容量就能夠勝任，而在 5－10 倍的增長期間，請着手下一個版本的架構設計，使之能承受下一個 10 倍間的增長。

緩存：Cache

　　其實設計 web 緩存和企業級緩存是非常不同的，企業級緩存偏重于邏輯，而 web 緩存，簡單快速為好。

Cache 的常用的政策是：讓資料在記憶體中，而不是在比較耗時的磁盤上。

　　mysql 的 heap 引擎（記憶體表）和 memcached

核心子產品一定要自己開發：DIY your core module

　　一些開源子產品，如果不涉及核心子產品，确實是可以的，如果涉及核心子產品，那麼就要小心了。

　　核心出現問題的時候，不能完全掌握其代碼是非常可怕的。

　　某些問題在壓力較小的情況下表現不出來，當壓力放大到一定程度時，出現錯誤的幾率會随之放大。

合理選擇資料存儲方式：reasonable data storage

　　在設計資料的持久化時，需要根據實際情況來選擇存儲方式，而資料庫不過是其中一個選項。

　　資料庫也是對檔案進行操作，我們需要資料庫關聯，排序的能力，這個能力在某些情況下非常重要。

　　使用資料庫，意味着資料和表現是完全分離的，當網站具備一定規模的時候，資料庫往往成為效率的瓶頸。

　　使用靜态檔案存儲資料，lucene 進行檢索。

搞清楚誰是最重要的人：who's the most important guy

　　涉衆，就是和你的設計息息相關的人。

　　一個傳統的互動社群開發中，最重要的東西是内容，使用者産生内容，是以使用者就是上帝。

　　至于内容挑選，實際上網站每天産生的内容非常的多，普通人是不可能看完的，而編輯負責把精華的内容推薦到首頁上，是以很多使用者讀到的内容其實都依賴于編輯的推薦，是以設計讓編輯工作友善的工具也是非常重要，有時甚至是最重要的。

不要執着于文檔：don't be crazy about document

　　web 開發中交流 > 文檔

　　而 web 項目從概念到實作的時間是非常短的，而且越短越好。

　　face2face 是一種不錯的選擇。

團隊：team

　　不要專家團隊，而要外科手術式的團隊，指的是團隊中要培養各種類型的成員，與《人月神話》中“外科手術團隊”的概念有所不同。

　　

總結

　　0)架構是一種權衡。

　　1)web 開發的特點是是：

　　　　沒有太複雜的技術難點，一切在于迅速的把握需求，其實這正式靈活開發的要旨所在，一切都可以非常快速的建立，非常快速的重構，我們的開發工具，底層庫和架構，包括搜尋引擎和 web 文檔提供的幫助，都提我們供給了靈活的能力。

　　2)此外，相應的，最有效率的交流方式必須留給 web 開發，那就是 face2face（面對面），不要太擔心你的設計不能被完備的文檔所保留下來，他們會以交流，代碼和小卡片的方式儲存下來。

　　3)人的因素會更加重要，無論是對使用者的需求，還是開發人員的素質。

Yahoo Yslow 團隊提高 Web 性能的 14 條法則

　　01. Make Fewer HTTP Requests

　　　　減少少 HTTP 請求（整合多個分開的 CSS / JavaScript）

　　02. Use a Content Delivery Network

　　　　使用 CDN

　　03. Add an Expires Header

　　　　加入 Expires Header（過期時間标記頭） 到 Image、CSS、JavaScript 檔案裡

　　04. Gzip Components

　　　　頁面使用 gzip 壓縮 HTML、JavaScript、StyleSheet、XML、JSON，但切記“不要壓縮 Images，PDF 檔案”

　　05. Put CSS at the Top

　　　　樣式代碼 css 置于頁面頂部 head 标簽中，使用 <LINK> 标簽，不要使用 @import 文法。

　　　　避免樣式改變引起的頁面元素重繪。

　　　　link 是一個 html 标簽，而 @import 是一個 css 标簽，

　　06. Move Scripts to the Bottom

　　　　腳本語言 script 置于頁面底部最下方 </body> 之前，所有在 JavaScript 加載以下的 HTML 在 JS 還沒讀完前，都不會顯示畫面。

　　　　把 JavaScript 的代碼都放在 onload 執行。

　　07. Avoid CSS Expressions

　　　　避免使用 CSS expressions，可能這段 expression 會在每一次 mouse move、resize、scroll、key press 時執行，使用 js 來完成相應的功能。

　　　　 expression  是 CSS 中的行為，IE5 及其以後版本支援在 CSS 中使用 expression，用來把 CSS 屬性和 Javascript 表達式關聯起來，這裡的 CSS 屬性可以是元素固有的屬性，也可以是自定義屬性。就是說 CSS 屬性後面可以是一段 Javascript 表達式，CSS 屬性的值等于 Javascript 表達式計算的結果。

　　　　微軟 IE 官方部落格報道：IE8 标準模式下将不再支援 CSS 的 expression 功能。

　　08. Make JavaScript and CSS External

　　　　JS 跟 CSS 獨立出檔案比較好，首頁除外。

　　　　使用 Post-onload download 技巧（download external files after onload）

 window.onload = downloadComponents;

 function downloadComponents() {

  var elem = document.createElement("script");

  document.body.appendChild(elem);

  ...

 }

 在 Server-side 判斷使用者 Browser 是否有設定 Cookie["hasPostOnloadDownload"]，

 若沒有，就使用 post-onload download 動态下載下傳 CSS & JS；

 若有用，就直接用 <script src="xxxx.js"></script>下載下傳，Browser會抓取 Cache 的版本。

　　09. Reduce DNS Lookups

　　　　在一個頁面中，不要使用過多地不同域名解析，建議不要超過 2 - 4 個，不然會降低頁面載入速度。

　　　　開啟 Keep-Alive 支援，在 pv 不是很高時可以加快客戶通路的速度，因為不需要三次握手，pv > 120 萬時就不要使用了，有可能導緻伺服器一直 TIME WAIT 而無響應。

　　10. Minify JavaScript

　　　　減小 Javascript。可以使用工具減少代碼量，可以被浏覽器更快的下載下傳。

　　　　相關工具：

　　　　　　　　下載下傳後更名成 jsmin.zip 解壓縮出 jsmin.exe 即可執行：jsmin.exe < input.js > output.js（注意：所有 UTF-8 編碼的 js 檔會變成 ANSI as UTF-8 編碼）

　　11. Avoid Redirects

　　　　避免重定向：

　　　　　　網址若省略檔案時，最後面一定要加上/結尾

　　　　　　追查 Log 檔檢視 Log Referer。

　　12. Remove Duplicate Scripts

　　　　移出代碼中重複的腳本語言。

　　13. Configure ETags（Turn off ETags）

　　　　Etags 是 Web 伺服器傳回的實體的唯一辨別，主要應用在有條件的 Get 請求中，如果 ETags 不比對，就不能發送 304 碼。

　　　　對于伺服器之間一個單獨的實體的 ETag 總是不同的，對于伺服器多餘一台機器的 Site，很少傳回 304 狀态碼，是以多台前端伺服器時要關閉 ETags 選項。

　　　　ETag format：

　　　　　　Apache: ETag: inode-size-timestamp

　　　　　　IIS: ETag: Filetimestamp:ChangeNumber

　　14. Make Ajax Cacheable

　　　　XHR、JSON、iframe、動态腳本 都是可以被緩存，精簡和壓縮的，這些不會經常變動的内容，可以緩存它，将最後修改時間标記在 URL 中。

提高 Web 性能的 14 條法則（詳細版）

<a href="http://www.cnblogs.com/csharp/archive/2008/08/27/high_performance_web_sites_14_rules.html">http://www.cnblogs.com/csharp/archive/2008/08/27/high_performance_web_sites_14_rules.html</a>

CSS 中的行為——expression

<a href="http://www.blueidea.com/tech/site/2006/3705.asp">http://www.blueidea.com/tech/site/2006/3705.asp</a>

IE8 将不再支援 CSS 中的 expression

<a href="http://www.cnblogs.com/JustinYoung/archive/2008/10/17/ending-expressions.html">http://www.cnblogs.com/JustinYoung/archive/2008/10/17/ending-expressions.html</a>

Dojo 的壓縮

<a href="http://pigdogyourmother.ycool.com/post.1684294.html">http://pigdogyourmother.ycool.com/post.1684294.html</a>

提高基于 Dojo 的 Web 2.0 應用程式的性能

<a href="http://www.ibm.com/developerworks/cn/web/wa-lo-dojo-perf/">http://www.ibm.com/developerworks/cn/web/wa-lo-dojo-perf/</a>

常見的 HTTP 狀态代碼及其原因

<a href="http://leeqianjun.javaeye.com/blog/266866">http://leeqianjun.javaeye.com/blog/266866</a>

使用 ETags 減少 Web 應用帶寬和負載

<a href="http://www.infoq.com/cn/articles/etags">http://www.infoq.com/cn/articles/etags</a>

<a href="http://liudaoru.javaeye.com/blog/211975">http://liudaoru.javaeye.com/blog/211975</a>