Web開發(fā)中需要了解的東西

在StackExchange上有人問了這樣一個問題：What should every programmer know about web development?（關于Web開發(fā)，什么是所有程序員需要知道的？）里面給出的答案非常不錯，所以，我翻譯轉(zhuǎn)載過來。順便說一下，StackExchange真是非常好，大家可以對同一個答案做貢獻和修訂，看看這個問題的修訂過程你就知道了——專業(yè)的問答網(wǎng)站應該怎么去做。這就是我在這篇文章中也說過真正的用戶體驗是什么樣的。

好了，下面是正文（我對原文做了一些批注，也許不對或有誤導，請大家指正）

下面的這些東西可能對于大多數(shù)人并不陌生，但是可能會有些東西你以前并沒有看過，或是沒有完全搞懂，甚至都沒有聽說過。（陳皓注：我相信當你看完這個列表后，你會覺得對于我國的Web開發(fā)有點弱了，還是那句話，表面上的東西永遠是膚淺的）

接口和用戶體驗

小心瀏覽器的實現(xiàn)標準上的不一致，確信讓你的網(wǎng)站能夠適當?shù)乜鐬g覽器。至少，你的網(wǎng)站需要測試一下下面的瀏覽器：

最新的 Gecko 引擎 (Firefox)，

一個 Webkit 引擎 (Safari, Chrome, 或是其它的移動設備上的瀏覽器)

IE 瀏覽器 (測試IE的兼容性你可以使用微軟IE的 Application Compatibility VPC Images)

Opera 瀏覽器。

最后，你可以使用一下這個工具 來看看你的網(wǎng)頁在不同的瀏覽器下是怎么被顯示出來的（陳皓注：這個工具就是以前本站介紹過的在不同瀏覽器和平臺上檢查你的網(wǎng)站的兼容性）

多考慮一下人們是怎么來訪問你的網(wǎng)站而不是那些主流的瀏覽器：手機，讀屏軟件和搜索引擎，例如：一些Accessibility的東西： WAI 和 Section508, 移動設備開發(fā)：MobiForge.

部署Staging：怎么部署網(wǎng)站的更新而不會影響用戶的訪問。 Ed Lucas的答案 可以讓你了解一些（陳皓注：Ed說了一些如版本控制，自動化build，備份，回滾等機制）。

千萬不要直接給用戶顯示不友好的錯誤信息。

千萬不要把用戶的郵件地址以明文顯示出來，這樣會被爬蟲爬走并被讓用戶的郵箱被垃圾郵件搞死。

為用戶的鏈接加上 rel="nofollow" 的屬性以 避免垃圾網(wǎng)站的干擾。（陳皓注：nofollow是 HTML的一個屬性，用于通知搜索引擎“這個鏈接所指向的網(wǎng)頁非我所能控制，對其內(nèi)容不予置評”，或者簡單地說，該鏈接不是對目標網(wǎng)站或網(wǎng)頁的“投票”，這樣搜索引擎不會再訪問這個鏈接。這個是用來減少一些特定垃圾頁面對原網(wǎng)站的影響，從而可以改善搜索結果的質(zhì)量，并且防止垃圾鏈接的蔓延。）

為網(wǎng)站建立一些的限制 - 這個屬于安全性的范疇。（陳皓注：比如你在Google注冊郵箱時，你一口氣注冊超過兩個以上的郵箱，gmail要求給你發(fā)短信或是給你打電話認證，比如 Discuz論壇的會限制你發(fā)貼或是搜索的間隔時間等等，更多的網(wǎng)站會用CAPTCHA來確認是人為的操作。這些限制都是為了防止垃圾和惡意攻擊）

學習如何做 Progressive Enhancement. （陳皓注：Progressive Enhancement是一個Web Design的理念，如：1）基礎的內(nèi)容和功能應該可以被所有的瀏覽器存取，2）頁面布局的應該使用外部的CSS鏈接，3）Javascript也應該是外部鏈接還應該是 unobtrusive 的，4）應該讓用戶可以設置他們的偏好）

如果POST成功，要在POST方法后重定向網(wǎng)址，這樣可以阻止用戶通過刷新頁面重復提交。

嚴重關注Accessibility。因為這是法律上的需求（陳 皓注：Section 508是美國的508法案，其是美國勞工復健法的改進，它是一部聯(lián)邦法律，這個法律要求所有技術要考慮到殘障人士的應用，如果某個大眾信息傳播網(wǎng)站，如果某些用戶群體（如殘疾人）瀏覽該網(wǎng)站獲取信息時，如果他們無法正常獲得所期望的信息（如無法正常瀏覽），那可以依據(jù)相關法規(guī)，可以對該網(wǎng)站依法起訴）。 WAI-ARIA 為這方面的事提供很不錯的資源.

安全

在網(wǎng)上有很多關于安全的文章，但是 OWASP 開發(fā)指導 涵蓋了幾乎所有關于Web站點安全的東西。（陳皓注：OWASP(開放Web應用安全項目- Open Web Application Security Project)是一個開放的非營利性組織，目前全球有130個分會近萬名會員，其主要目標是研議協(xié)助解決Web軟體安全之標準、工具與技術文件，長期致力于協(xié)助政府或企業(yè)了解并改善網(wǎng)頁應用程式與網(wǎng)頁服務的安全性。OWASP被視為Web應用安全領域的權威參考。2009年下列發(fā)布的美國國家和國際立法、標準、準則、委員會和行業(yè)實務守則參考引用了OWASP。美國聯(lián)邦貿(mào)易委員會(FTC)強烈建議所有企業(yè)需遵循OWASP十大WEB弱點防護守則）

了解什么是 SQL 注入攻擊 并知道怎么阻止這種攻擊。

永遠不要相信用戶的輸入（包括Cookies，因為那也是用戶的輸入）

對用戶的口令進行Hash，并使用salt，以防止Rainbow 攻擊（陳皓注：Hash算法可用MD5或SHA1等，對口令使用salt的意思是，user 在設定密碼時，system 產(chǎn)生另外一個random string(salt)。在datbase 存的??是與salt + passwd 產(chǎn)的md5sum 及salt。 當要驗證密碼時就把user 輸入的string 加上使用者的salt，產(chǎn)生md5s??um 來比對。 理論上用salt 可以大幅度讓密碼更難破解，相同的密碼除非剛好salt 相同，最后??存在database 上的內(nèi)容是不一樣的。google一下md5+salt你可以看到很多文章。關于Rainbow 攻擊， 其意思是很像密碼字典表，但不同的是，Rainbow Table存的是已經(jīng)被Hash過的密碼了，而且其查找密碼的速度更快，這樣可以讓攻擊非�？欤�。使用慢一點的Hash算法來保存口令，如 bcrypt (被時間檢證過了) 或是 scrypt (更強，但是也更新一些) (1, 2)。你可以閱讀一下 How To Safely Store A Password（陳皓注：酷殼以前曾介紹過bcrypt這個算法，這里，我更建議我們應該讓用戶輸入比較強的口令，比如Apple ID注冊的過程需要用戶輸入超過8位，需要有大小寫和數(shù)字的口令，或是做出類似于這樣的用戶體驗的東西）。

不要試圖自己去發(fā)明或創(chuàng)造一個自己的fancy的認證系統(tǒng)，你可能會忽略到一些不容易讓你查覺的東西而導致你的站點被hack了。（陳皓注：我在騰訊那坑爹的申訴系統(tǒng)中說過這個事了，我說過這句話——“真正的安全系統(tǒng)是協(xié)同整個社會的安全系統(tǒng)做出來的一道安全長城，而不是什么都要自己搞”，當然，很遺憾不是所有的人都能看懂這個事，包括一些資深的人）

了解 處理信用卡的一些規(guī)則 . (這里也有一個問題你可以查看一下) （陳皓注：有兩上vendor可以幫助你，一個是 Authorize.Net 另一個是 PayFlow Pro）

使用 SSL/HTTPS 來加密傳輸?shù)卿涰撁婊蚴侨慰捎忻舾行畔⒌捻撁�，比如信用卡號等�?

知道如何對付session 劫持。（陳皓注：請參看wikipedia的這Session Hijacking，）

避免 跨站腳本攻擊(XSS)。（陳皓注：參看酷殼站前幾天發(fā)的《新浪微博的XSS攻擊事件》）

避免 跨站偽造請求攻擊 cross site request forgeries (XSRF).

保持你的系統(tǒng)里的所有軟件更新到最新的patch。

確保你的數(shù)據(jù)庫連接是安全的。

確保你能了解最新的攻擊技術，以及你系統(tǒng)的脆弱處。

請讀一下 The Google Browser Security Handbook.

請讀一下 The Web Application Hacker’s Handbook.

（陳皓注：之前本站的“一些資源”提到過Mozilla的安全編程規(guī)范，還有Ruby on Rails的Web安全的開發(fā)教程）

性能

只要需要，請實現(xiàn)cache機制，了解并合理地使用 HTTP caching 以及 HTML5 Manifest.

優(yōu)化頁面 —— 不要使用20KB圖片來平鋪網(wǎng)頁背景。（陳皓注：還有很多網(wǎng)頁頁面優(yōu)化性的文章，你可以STFG – Search The Fucking Google一下。如果你要調(diào)試的話，你可以使用firebug或是chrome內(nèi)置的開發(fā)人員的工具來查看網(wǎng)頁裝載的性能）

學習如何 gzip/deflate 網(wǎng)頁 (deflate 更好).

把多個CSS文件和Javascript文件合并成一個，這樣可以減少瀏覽器的網(wǎng)絡連數(shù)，并且使用gzip壓縮被反復用到的文件。

學習一下 Yahoo Exceptional Performance 這個網(wǎng)站上的東西，上面有很多非常不錯的改善前端性能的指導，以及 YSlow 這個工具。 Google page speed 是另一個用來做性能采樣的工具。這兩個工具都需要安裝 Firebug 。

為那些小的圖片使用 CSS Image Sprites，就像工具條一樣。 (參看 “最小化 HTTP 請求” ) （陳皓注：把所有的小圖片合并成一個圖片，然后用CSS把顯示其中的一塊，這樣，這些小圖片只用傳輸一次，酷殼的Wordpress樣式的那個RSS訂閱列表中的小圖標就是這樣做的）

繁忙的網(wǎng)絡應該考慮把網(wǎng)頁的內(nèi)容分開存放在不同的域名下。（陳皓注：比如有專門的圖片服務器——圖片相當耗帶寬，或是專門的Ajax服務器）

靜態(tài)網(wǎng)頁 (如，圖片，CSS，JavaScript，以及一些不需要訪問cookies的網(wǎng)頁) 應該放在一個不使用cookies的獨立的域名下，因為所有在同一個域名或子域名下的cookie會被這個域名下的請求一同發(fā)送。另一個好的選擇是使用 Content Delivery Network (CDN).

使用單個頁面的HTTP請求數(shù)最小化。

為Javascript使用 Google Closure Compiler 或是 其它壓縮工具（陳皓注：壓縮Javascript代碼可以讓你的頁面減少網(wǎng)絡傳輸從而可以得到很快的喧染。注意，并不是所有的工具都可以正確壓縮Javascript的，Google的這個工具甚至還可以幫你優(yōu)化你的代碼）

確認你的網(wǎng)站有一個 favicon.ico 文件放在網(wǎng)站的根下，如 /favicon.ico. 瀏覽器會自動請求這個文件，就算這個圖標文件沒有在你的網(wǎng)頁中明顯說明，瀏覽器也會請求。如果你沒有這個文件，就會出大量的404錯誤，這會消耗你的服務器帶寬。（陳皓注：服務器返回404頁面會比這個ico文件可能還大）

SEO (搜索引擎優(yōu)化)

使用 “搜索引擎喜歡的” URL，如：使用 example.com/pages/45-article-title 而不是 example.com/index.php?page=45 (陳皓注：這里的URL是說Wordpress的，后者是默認的)