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

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

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

下面的這些東西可能對(duì)于大多數(shù)人并不陌生，但是可能會(huì)有些東西你以前并沒(méi)有看過(guò)，或是沒(méi)有完全搞懂，甚至都沒(méi)有聽(tīng)說(shuō)過(guò)。（陳皓注：我相信當(dāng)你看完這個(gè)列表后，你會(huì)覺(jué)得對(duì)于我國(guó)的Web開(kāi)發(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è)工具 來(lái)看看你的網(wǎng)頁(yè)在不同的瀏覽器下是怎么被顯示出來(lái)的（陳皓注：這個(gè)工具就是以前本站介紹過(guò)的在不同瀏覽器和平臺(tái)上檢查你的網(wǎng)站的兼容性）

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

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

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

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

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

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

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

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

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

安全

在網(wǎng)上有很多關(guān)于安全的文章，但是 OWASP 開(kāi)發(fā)指導(dǎo) 涵蓋了幾乎所有關(guān)于Web站點(diǎn)安全的東西。（陳皓注：OWASP(開(kāi)放Web應(yīng)用安全項(xiàng)目- Open Web Application Security Project)是一個(gè)開(kāi)放的非營(yíng)利性組織，目前全球有130個(gè)分會(huì)近萬(wàn)名會(huì)員，其主要目標(biāo)是研議協(xié)助解決Web軟體安全之標(biāo)準(zhǔn)、工具與技術(shù)文件，長(zhǎng)期致力于協(xié)助政府或企業(yè)了解并改善網(wǎng)頁(yè)應(yīng)用程式與網(wǎng)頁(yè)服務(wù)的安全性。OWASP被視為Web應(yīng)用安全領(lǐng)域的權(quán)威參考。2009年下列發(fā)布的美國(guó)國(guó)家和國(guó)際立法、標(biāo)準(zhǔn)、準(zhǔn)則、委員會(huì)和行業(yè)實(shí)務(wù)守則參考引用了OWASP。美國(guó)聯(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 來(lái)比對(duì)。 理論上用salt 可以大幅度讓密碼更難破解，相同的密碼除非剛好salt 相同，最后??存在database 上的內(nèi)容是不一樣的。google一下md5+salt你可以看到很多文章。關(guān)于Rainbow 攻擊， 其意思是很像密碼字典表，但不同的是，Rainbow Table存的是已經(jīng)被Hash過(guò)的密碼了，而且其查找密碼的速度更快，這樣可以讓攻擊非�？欤�。使用慢一點(diǎn)的Hash算法來(lái)保存口令，如 bcrypt (被時(shí)間檢證過(guò)了) 或是 scrypt (更強(qiáng)，但是也更新一些) (1, 2)。你可以閱讀一下 How To Safely Store A Password（陳皓注：酷殼以前曾介紹過(guò)bcrypt這個(gè)算法，這里，我更建議我們應(yīng)該讓用戶輸入比較強(qiáng)的口令，比如Apple ID注冊(cè)的過(guò)程需要用戶輸入超過(guò)8位，需要有大小寫(xiě)和數(shù)字的口令，或是做出類似于這樣的用戶體驗(yàn)的東西）。

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

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

使用 SSL/HTTPS 來(lái)加密傳輸?shù)卿涰?yè)面或是任可有敏感信息的頁(yè)面，比如信用卡號(hào)等。

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

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

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

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

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

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

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

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

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

性能

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

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

學(xué)習(xí)如何 gzip/deflate 網(wǎng)頁(yè) (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è)用來(lái)做性能采樣的工具。這兩個(gè)工具都需要安裝 Firebug 。

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

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

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

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

為Javascript使用 Google Closure Compiler 或是 其它壓縮工具（陳皓注：壓縮Javascript代碼可以讓你的頁(yè)面減少網(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)文件沒(méi)有在你的網(wǎng)頁(yè)中明顯說(shuō)明，瀏覽器也會(huì)請(qǐng)求。如果你沒(méi)有這個(gè)文件，就會(huì)出大量的404錯(cuò)誤，這會(huì)消耗你的服務(wù)器帶寬。（陳皓注：服務(wù)器返回404頁(yè)面會(huì)比這個(gè)ico文件可能還大）

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

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

如果你的動(dòng)態(tài)頁(yè)面要使用 # ，那么請(qǐng)把其改成 #! ，而在服務(wù)端，你需要處理$_REQUEST["_escaped_fragment_"] 這是Google搜索引擎需要的。換句話說(shuō)，./#!page=1 會(huì)被Google搜索引擎轉(zhuǎn)成 ./?_escaped_fragments_=page=1。 （陳皓注：通常來(lái)說(shuō)URL中的#后的東西都不會(huì)被傳到服務(wù)器上，所以，為了要讓Google可以抓取AJAX的東西，你需要使用#!，而Google會(huì)把 “#!”轉(zhuǎn)成“_escaped_fragment_”來(lái)向服務(wù)器發(fā)請(qǐng)求，Twitter的大量的鏈接者是#!的，比如：https://twitter.com/#!/your_activity）。另外，用戶也許會(huì)使用Firefox 或 Chromium， history.pushState({"foo":"bar"}, "About", "./?page=1"); 是一個(gè)很不錯(cuò)的命令。所以，就算是我們的地址欄上的地址改變了，頁(yè)面也不會(huì)重新裝載。這可以讓你使用 ? 而不是 #! 也能無(wú)刷地保住當(dāng)前的動(dòng)態(tài)的頁(yè)面，這可以讓AJAX的請(qǐng)求被瀏覽器記住。

別使用 “click here” 這樣的鏈接。這樣一來(lái)，無(wú)法SEO，而且對(duì)于一些需要使用讀屏人來(lái)說(shuō)很不友好（陳皓注：關(guān)于讀屏軟件，可參看本站的“如果看不見(jiàn)你還能編程嗎”）

做一個(gè) XML sitemap，并放在網(wǎng)端的根下 /sitemap.xml. （陳皓注：這個(gè)文件可以讓搜索引擎了解你的網(wǎng)站圖）

當(dāng)你有多個(gè)URL指向同一個(gè)網(wǎng)頁(yè)的使用，使用 你可以使用 Google Webmaster Tools 來(lái)查看相關(guān)的問(wèn)題。

使用 Google Webmaster Tools 和 Yahoo Site Explorer.

安裝 Google Analytics (或是別的開(kāi)源的網(wǎng)站分析工具，如： Piwik).

了解 robots.txt 和搜索引擎爬蟲(chóng)是如何工作的。

重定向請(qǐng)求 (使用 301 重定向網(wǎng)站) ，如果你要把 www.example.com 定向到 example.com(或是其它的變更) 這樣可以防止Google的rank因?yàn)橛蛎�的變化發(fā)生改變。（陳皓注：301重定向一般用作域名變更）

知道并不是所有的爬蟲(chóng)都是好的，有些爬蟲(chóng)的行為并不好。（陳皓注：比如向你的網(wǎng)站發(fā)大量的請(qǐng)求導(dǎo)致服務(wù)器性能低下）

如果你有一些非文本的內(nèi)容需要在 Google’s sitemap 中，比如視頻什么的。Tim Farley的答案，可以讓你看到很多有價(jià)值的東西。

技術(shù)

理解什么是 HTTP 比如 GET, POST, sessions, cookies等，了解什么是 “stateless” 無(wú)狀態(tài)。

讓你的 XHTML/HTML 和 CSS 符合 W3C 規(guī)范，并確認(rèn)他們都是 合格的。我們的目標(biāo)是避免瀏覽器的 “quirks mode”，并且可以讓其更容易地能和非標(biāo)準(zhǔn)的瀏覽器工作，比如讀屏器或移動(dòng)設(shè)備。

理解瀏覽器是怎么處理 JavaScript 的。（陳皓：你會(huì)看到有些Javascript代碼在頁(yè)面上前面，有些則是在后面，所以你需要對(duì)其了解清楚為什么是這樣）

了解瀏覽器是怎么裝載 JavaScript，CSS和其它資源的，了解其對(duì)視覺(jué)上的影響。（陳皓注：10年前我做網(wǎng)頁(yè)的時(shí)候因?yàn)镠TML還很弱，所以只能使用table來(lái)布局，使用table布局的問(wèn)題就是整個(gè)table讀完后頁(yè)面才會(huì)顯示，用戶的視覺(jué)體驗(yàn)并不好）。在某些情況下，你可能需要把你的腳本放在頁(yè)面的后面。

理解 JavaScript 的 sandbox 是怎么怎么工作的，尤其是你想使用iframes。

請(qǐng)注意 JavaScript 可能會(huì)被禁止，這樣會(huì)讓你的AJAX失效。就算是大多數(shù)用戶都開(kāi)啟了Javascript功能，但是也可能在一些情況下腳本是不被運(yùn)行的，比如移動(dòng)終端上，搜索引擎抓網(wǎng)頁(yè)的時(shí)候也并不會(huì)執(zhí)行你的腳本。

學(xué)習(xí) 301 和 302 轉(zhuǎn)向的區(qū)別 (這也是一個(gè)SEO的問(wèn)題).

盡可能多地學(xué)習(xí)你的部署平臺(tái)。（比如：操作系統(tǒng)，Web Server：Apache/Nginx，防火墻，數(shù)據(jù)庫(kù)，等等）

考慮使用一個(gè) Reset Style Sheet.

考慮使用 JavaScript 框架(如： jQuery, MooTools, Prototype, Dojo 或 YUI 3)，它們會(huì)很好的兼容于不同的瀏覽器。（陳皓注：強(qiáng)烈推薦你看一下本站的開(kāi)源中最好的WEB開(kāi)發(fā)資源一文）

把視覺(jué)效果和JS框架合在一起討論，考慮使用一個(gè)Service，如：Google Libraries API 來(lái)裝載框架，這樣可以讓瀏覽器可能早就把這個(gè)JS框架已經(jīng)cache了而不需要再?gòu)哪愕木W(wǎng)站上下載了。

Bug fixing

明白你會(huì)花20%的時(shí)間寫(xiě)代碼，而80%的時(shí)候在維護(hù)，所以你要小心編碼。（陳皓注：參看本站的“多些時(shí)間可以少些代碼”一文）

設(shè)計(jì)一個(gè)好的錯(cuò)誤報(bào)告機(jī)制。

設(shè)計(jì)一個(gè)入口可以讓人們聯(lián)系到你并給你建議和批評(píng)。

為你開(kāi)發(fā)的東西形成文檔，這樣可以讓后來(lái)的人容易維護(hù)你的軟件和系統(tǒng)。

頻繁備份（也可確保你的這些備份功能正常） Ed Lucas 的回答 有一些忠告。你還需要有一個(gè)恢復(fù)策略，而不只是一個(gè)備份策略。

使用一個(gè)版本控制系統(tǒng)來(lái)保存你的代碼，如： Subversion 或 Git.

別忘了做Acceptance Testing，使用 Selenium 能幫到你。

確保你有足夠的日志，你可以使用 log4j, log4n 或 log4r。如果出了問(wèn)題，這是可以讓你快速找到問(wèn)題的方式。

當(dāng)你寫(xiě)日志的時(shí)候，確保你記錄了你捕獲了處理和未處理異常。報(bào)告和分析日志可以讓你知道你網(wǎng)站的問(wèn)題。

這里有多的東西被省略了，并不是因?yàn)槟切┛赡懿皇怯袔椭�的答案，而是因�(yàn)槟切〇|西都太細(xì)節(jié)了，超出了這個(gè)問(wèn)題的范圍，因?yàn)檫@本來(lái)就是一個(gè)Web開(kāi)發(fā)需要了解東西的Overview。我想你可以去看一下其它人的答案，我有時(shí)間，我也會(huì)補(bǔ)充別人的答案進(jìn)來(lái)。請(qǐng)隨意編輯這個(gè)答案，因?yàn)榭赡苡行〇|西忘了，也有可能有些東西不對(duì)。