網站開發人員應該知道的61件事

作者： 阮一峰

日期： 2010年11月25日

有人在Stack Overflow上發問，動手開發網站之前，需要知道哪些事情？

不出意料地，他得到了一大堆回答。

通常情況下，你需要把所有人的發言從頭到尾讀一遍。 但是，Stack Overflow有一個很貼心的設計，它允許在問題下方開設一個wiki區，讓所有人共同編輯一個最佳答案。 於是，就有了下面這篇文章，一共總結出六個方面共計61條」網站開發須知」。

我發現，這種概述性的問題，最適合這種集合群智、頭腦風暴式的回答方式了。 這也是我第一次覺得，Stack Overflow做到了Wikipedia做不到的事。 （難怪它最近擠進了全美前400大網站。 ）

在我的印象中，關於網站開發，這樣全面的概述性文章非常少見，因此也就非常有用。 大家不妨看看，61件事情中你做到了多少？

（更新：剛剛發現，一共應該是62條建議，我先前數錯了，這個...... 太窘了。 ）

=============================

網站開發人員應該知道的61件事

原文網址：HTTP://stackoverflow.com/questions/72394

譯者：阮一峰

一、介面和使用者體驗（Interface and User Experience）

1.1

知道各大瀏覽器執行Web標準的情況，保證你的網站在主要瀏覽器上都能正常運行。 你至少要測試以下引擎：Gecko（用於Firefox）、Webkit（用於Safari、Chrome和一些手機瀏覽器）、IE（你可以利用微軟發佈的Application Compatibility VPC Images進行測試）和Opera。 同時，不同的作業系統，可能也會影響瀏覽器如何呈現你的網站。

1.2

除了瀏覽器，網站還有其他使用方式：手機、螢幕朗讀器、搜尋引擎等等。 你應該知道在這些情況下，你的網站的運行狀況。 MobiForge提供了手機網站開發的一些相關知識。

1.3

知道如何在基本不影響使用者使用的情況下升級網站。 通常來說，你必須有版本控制系統（CVS、Subversion、Git等等）和資料備份機制（backup）。

1.4

不要讓使用者看到那些不友好的出錯提示。

1.5

不要直接顯示使用者的Email位址，至少不要用純文字顯示。

1.6

為你的網站設置一些合理的使用限制，一旦超過門檻值，就自動停止服務。 （這也與網站安全相關。 ）

1.7

知道如何實現網頁的漸進式增強（progressive enhancement）。

1.8

使用者發出POST請求後，總是將其重導向（redirect）至另外一個網頁。

1.9

不要忘記網站的可訪問性（accessibility，即殘疾人如何使用網站）。 對於美國網站來說，有時這是法定要求。 WAI-ARIA有一些這方面很好的參考資料。

二、安全性（Security）

2.1

閱讀《OWASP開發指南》，它提供了全面的網站安全指導。

2.2

瞭解SQL注入（SQL injection）及其預防方法。

2.3

永遠不要信任使用者提交的資料（cookie也是使用者端提交的！ ）。

2.4

不要明文（plain-text）儲存使用者的密碼，要hash處理後再儲存。

2.5

不要對你的使用者認證系統太自信，它可能很容易就被攻破，而你事先根本沒意識到存在相關漏洞。

2.6

瞭解如何處理信用卡。

2.7

在登錄頁面及其他處理敏感資訊的頁面，使用SSL/HTTPS。

2.8

知道如何對付session劫持（session hijacking）。

2.9

避免」跨網站執行「（cross site scripting，XSS）。

2.10

避免」跨域偽造請求「（cross site request forgeries，XSRF）。

2.11

及時打上補丁，讓你的系統始終跟上最新版本。

2.12

確認你的資料庫連接資訊的安全性。

2.13

跟蹤攻擊技術的最新發展，以及你使用的平臺的最新安全性漏洞。

2.14

閱讀Google的《瀏覽器安全手冊》（Browser Security Handbook）。

2.15

閱讀《網路軟體的駭客手冊》（The Web Application Hackers Handbook）。

三、性能（Performance）

3.1

只要有可能，就使用緩存（caching）。 正確理解和使用HTTP caching與HTML5離線儲存。

3.2

優化圖片。 不要把一個20KB的圖片檔，作為重複出現的網頁背景圖樣。

3.3

學習如何用gzip/deflate壓縮內容（deflate方式更可取）。

3.4

將多個樣式表檔或指令檔，合為一個檔，這樣可以減少瀏覽器的HTTP請求數，以及減小gzip壓縮後的檔總體積。

3.5

流覽Yahoo的Exceptional Performance網站，裡面有大量提升前端性能的優秀建議，還有他們的YSlow工具。 Google的page speed則是另一個用來分析網頁性能的工具。 兩者都要求安裝Firebug。

3.6

如果你的網頁用到大量的小體積圖片（比如工具列），就應該使用CSS Image Sprite，目的是減少HTTP請求數。

3.7

大流量的網站應該考慮將網頁物件分散在多個功能變數名稱（split components across domains）。

3.8

靜態內容（比如圖片、CSS、JavaScript、以及其他cookie無關的網頁內容）都應該放在一個不需要使用cookie的獨立功能變數名稱之上。 因為功能變數名稱之下如果有cookie，那麼用戶端向該功能變數名稱發出的每次HTTP請求，都會附上cookie內容。 這裡的一個好方法就是使用」內容分發網路」（Content Delivery Network，CDN）。

3.9

將瀏覽器完成網頁渲染所需要的HTTP請求數最小化。

3.10

使用Google的Closure Compiler壓縮JavaScript檔，YUI Compressor亦可。

3.11

確保網站根目錄下有favicon.ico檔，因為即使網頁中根本不包括這個檔，瀏覽器也會自動發出對它的請求。 所以如果這個檔不存在，就會產生大量的404錯誤，消耗光你的伺服器的頻寬。

四、搜尋引擎優化（Search Engine Optimization，SEO）

4.1

使用」搜尋引擎友好」的URL形式，比如example.com/pages/45-article-title，而不是example.com/index.php?page=45。

4.2

不要使用」點擊這裡」之類的超級連結，因為這樣等於浪費了一個SEO機會，而且降低了」螢幕朗讀器」（screen reader）的使用效果。

4.3

創建一個XML sitemap檔，它的缺省位置一般是/sitemap.xml（即放在網站根目錄下）。

4.4

當你有多個URL指向同一個內容時，在網頁代碼中使用<link rel=」canonical」 ... />。

4.5

使用Google的Webmaster Tools和Yahoo的Site Explorer。

4.6

從一開始就使用Google Analytics（或者開源的訪問量分析工具Piwik）。

4.7

知道robots.txt的作用，以及搜尋引擎蜘蛛的工作原理。

4.8

將www.example.com的訪問請求導向example.com（使用301 Moved Permanently重定向），或者採用相反的做法，目的是防止Google把它們當做兩個網站，分開計算排名。

4.9

知道存在著惡意或行為不正當的網路蜘蛛。

4.10

如果你的網站有非文本的內容（比如視頻、音訊等等），你應該參考Google的sitemap擴展協定。

五、技術（Technology）

5.1

理解HTTP協定，以及諸如GET、POST、sessions、cookies之類的概念，包括」無狀態」（stateless）是什麼意思。

5.2

確保你的XHTML/HTML和CSS符合W3C標準，使得它們能夠通過檢驗。 這可以使你的網頁避免觸發瀏覽器的古怪行為（quirk），而且使它在」螢幕朗讀器」和手機上也能正常工作。

5.3

理解瀏覽器如何處理JavaScript腳本。

5.4

理解網頁上的JavaScript檔、樣式表檔和其他資源是如何裝載及運行的，考慮它們對頁面性能有何影響。 在某些情況下，可能應該將指令檔放置在網頁的尾部。

5.5

理解JavaScript沙箱（JAVAscript sandbox）的工作原理，尤其是如果你打算使用iframe。

5.6

知道JavaScript可能無法使用或被禁用，以及Ajax並不是一定會運行。 記住，」不允許腳本運行」（NoScript）正在某些使用者中變得流行，手機瀏覽器對腳本的支援千差萬別，而Google索引網頁時不運行大部分的指令檔。

5.7

瞭解301重定向和302重定向之間的區別（這也是一個SEO相關問題）。

5.8

盡可能多得了解你的部署平臺（deployment platform）。

5.9

考慮使用樣式表重置（Reset Style Sheet）。

5.10

考慮使用JavaScript框架（比如jQuery、MooTools、Prototype），它們可以使你不用考慮瀏覽器之間的差異。

六、解決bug

6.1

理解程式師20%的時間用於編碼，80%的時間用於維護，根據這一點相應安排時間。

6.2

建立一個有效的錯誤報表機制。

6.3

建立某些途徑或系統，讓使用者可以與你接觸，向你提出建議和批評。

6.4

為將來的維護和客服人員撰寫文檔，解釋清楚系統是怎麼運行的。

6.5

經常備份！ （並且確保這些備份是有效的。 ）除了備份機制，你還必須有一個恢復機制。

6.6

使用某種版本控制系統儲存你的檔，比如Subversion或Git。

6.7

不要忘記做單元測試（Unit Testing），Selenium之類的框架會對你有用。

（完）

來源：HTTP://www.ruanyifeng.com/blog/2010/11/61_things_every_web_developer_should_know.html