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

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

好了，下面是正文（我對(duì)原文做了一些批注，也許不對(duì)或有誤導(dǎo)，請(qǐng)大家指正）

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

接口和用戶體驗(yàn)

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

最新的 Gecko 引擎 (Firefox)，

一個(gè) Webkit 引擎 (Safari, Chrome, 或是其它的移動(dòng)設(shè)備上的瀏覽器)

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

Opera 瀏覽器。

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

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

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

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

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

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

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

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

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

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

安全

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

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

永遠(yuǎn)不要相信用戶的輸入（包括Cookies，因?yàn)槟且彩怯脩舻妮斎耄?

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

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

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

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

知道如何對(duì)付session 劫持。（陳皓注：請(qǐng)參看wikipedia的這Session Hijacking，）

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

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

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

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

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

請(qǐng)讀一下 The Google Browser Security Handbook.

請(qǐng)讀一下 The Web Application Hacker’s Handbook.

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

性能

只要需要，請(qǐng)實(shí)現(xiàn)cache機(jī)制，了解并合理地使用 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)頁裝載的性能）

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

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

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

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

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

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

使用單個(gè)頁面的HTTP請(qǐng)求數(shù)最小化。

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

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

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

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