2011年12月7日陳皓發(fā)表評論閱讀評論109,191 人閱讀
在StackExchange上有人問了這樣一個問題：What should every programmer know about web development?（關(guān)于Web開發(fā)，什么是所有程序員需要知道的方淤？）里面給出的答案非常不錯钉赁，所以，我翻譯轉(zhuǎn)載過來臣淤。?順便說一下橄霉，StackExchange真是非常好，大家可以對同一個答案做貢獻(xiàn)和修訂邑蒋，看看這個問題的修訂過程你就知道了——專業(yè)的問答網(wǎng)站應(yīng)該怎么去做姓蜂。這就是我在這篇文章中也說過真正的用戶體驗是什么樣的。
好了医吊，下面是正文（我對原文做了一些批注钱慢，也許不對或有誤導(dǎo)，請大家指正）
下面的這些東西可能對于大多數(shù)人并不陌生卿堂，但是可能會有些東西你以前并沒有看過束莫，或是沒有完全搞懂，甚至都沒有聽說過草描。（陳皓注：我相信當(dāng)你看完這個列表后览绿，你會覺得對于我國的Web開發(fā)有點弱了，還是那句話穗慕，表面上的東西永遠(yuǎn)是膚淺的）
接口和用戶體驗
小心瀏覽器的實現(xiàn)標(biāo)準(zhǔn)上的不一致饿敲，確信讓你的網(wǎng)站能夠適當(dāng)?shù)乜鐬g覽器。至少逛绵，你的網(wǎng)站需要測試一下下面的瀏覽器：
一個 Webkit 引擎 (Safari,Chrome, 或是其它的移動設(shè)備上的瀏覽器)
IE 瀏覽器(測試IE的兼容性你可以使用微軟IE的Application Compatibility VPC Images)
Opera瀏覽器。
最后术浪，你可以使用一下這個工具來看看你的網(wǎng)頁在不同的瀏覽器下是怎么被顯示出來的（陳皓注：這個工具就是以前本站介紹過的在不同瀏覽器和平臺上檢查你的網(wǎng)站的兼容性）
多考慮一下人們是怎么來訪問你的網(wǎng)站而不是那些主流的瀏覽器：手機(jī)瓢对，讀屏軟件和搜索引擎，例如：一些Accessibility的東西：WAI和Section508, 移動設(shè)備開發(fā)：MobiForge.
部署Staging：怎么部署網(wǎng)站的更新而不會影響用戶的訪問胰苏。Ed Lucas的答案可以讓你了解一些（陳皓注：Ed說了一些如版本控制硕蛹，自動化build，備份，回滾等機(jī)制）妓美。
千萬不要直接給用戶顯示不友好的錯誤信息僵腺。
千萬不要把用戶的郵件地址以明文顯示出來鲤孵，這樣會被爬蟲爬走并被讓用戶的郵箱被垃圾郵件搞死壶栋。
為用戶的鏈接加上rel="nofollow"的屬性以避免垃圾網(wǎng)站的干擾。（陳皓注：nofollow是HTML的一個屬性普监，用于通知搜索引擎“這個鏈接所指向的網(wǎng)頁非我所能控制贵试，對其內(nèi)容不予置評”，或者簡單地說凯正，該鏈接不是對目標(biāo)網(wǎng)站或網(wǎng)頁的“投票”毙玻，這樣搜索引擎不會再訪問這個鏈接。這個是用來減少一些特定垃圾頁面對原網(wǎng)站的影響廊散，從而可以改善搜索結(jié)果的質(zhì)量桑滩，并且防止垃圾鏈接的蔓延。）
為網(wǎng)站建立一些的限制– 這個屬于安全性的范疇允睹。（陳皓注：比如你在Google注冊郵箱時运准，你一口氣注冊超過兩個以上的郵箱，gmail要求給你發(fā)短信或是給你打電話認(rèn)證缭受，比如Discuz論壇的會限制你發(fā)貼或是搜索的間隔時間等等胁澳，更多的網(wǎng)站會用CAPTCHA來確認(rèn)是人為的操作。 這些限制都是為了防止垃圾和惡意攻擊）
學(xué)習(xí)如何做Progressive Enhancement. （陳皓注：Progressive Enhancement是一個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锦庸。因為這是法律上的需求（陳皓注：Section 508是美國的508法案，其是美國勞工復(fù)健法的改進(jìn)妻顶，它是一部聯(lián)邦法律酸员，這個法律要求所有技術(shù)要考慮到殘障人士的應(yīng)用，如果某個大眾信息傳播網(wǎng)站讳嘱，如果某些用戶群體（如殘疾人）瀏覽該網(wǎng)站獲取信息時幔嗦，如果他們無法正常獲得所期望的信息（如無法正常瀏覽），那可以依據(jù)相關(guān)法規(guī)沥潭，可以對該網(wǎng)站依法起訴）邀泉。WAI-ARIA為這方面的事提供很不錯的資源.
安全
在網(wǎng)上有很多關(guān)于安全的文章，但是OWASP 開發(fā)指導(dǎo)涵蓋了幾乎所有關(guān)于Web站點安全的東西。（陳皓注：OWASP(開放Web應(yīng)用安全項目- Open Web Application Security Project)是一個開放的非營利性組織汇恤，目前全球有130個分會近萬名會員庞钢，其主要目標(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)則、委員會和行業(yè)實務(wù)守則參考引用了OWASP匠璧。美國聯(lián)邦貿(mào)易委員會(FTC)強(qiáng)烈建議所有企業(yè)需遵循OWASP十大WEB弱點防護(hù)守則）
了解什么是SQL 注入攻擊并知道怎么阻止這種攻擊桐款。
永遠(yuǎn)不要相信用戶的輸入（包括Cookies，因為那也是用戶的輸入）
對用戶的口令進(jìn)行Hash夷恍，并使用salt魔眨，以防止Rainbow 攻擊（陳皓注：Hash算法可用MD5或SHA1等，對口令使用salt的意思是酿雪，user 在設(shè)定密碼時遏暴，system 產(chǎn)生另外一個random string(salt)。在datbase 存的??是與salt + passwd 產(chǎn)的md5sum 及salt执虹。?當(dāng)要驗證密碼時就把user 輸入的string 加上使用者的salt拓挥，產(chǎn)生md5s??um 來比對。?理論上用salt 可以大幅度讓密碼更難破解袋励，相同的密碼除非剛好salt 相同侥啤，最后??存在database 上的內(nèi)容是不一樣的。google一下md5+salt你可以看到很多文章茬故。關(guān)于Rainbow 攻擊盖灸，其意思是很像密碼字典表，但不同的是磺芭，Rainbow Table存的是已經(jīng)被Hash過的密碼了赁炎，而且其查找密碼的速度更快，這樣可以讓攻擊非臣叵伲快）徙垫。使用慢一點的Hash算法來保存口令，如 bcrypt (被時間檢證過了) 或是 scrypt (更強(qiáng)放棒，但是也更新一些) (1,2)姻报。你可以閱讀一下How To Safely Store A Password（陳皓注：酷殼以前曾介紹過bcrypt這個算法，這里间螟，我更建議我們應(yīng)該讓用戶輸入比較強(qiáng)的口令吴旋，比如Apple ID注冊的過程需要用戶輸入超過8位损肛，需要有大小寫和數(shù)字的口令，或是做出類似于這樣的用戶體驗的東西）荣瑟。
不要試圖自己去發(fā)明或創(chuàng)造一個自己的fancy的認(rèn)證系統(tǒng)治拿，你可能會忽略到一些不容易讓你查覺的東西而導(dǎo)致你的站點被hack了。（陳皓注：我在騰訊那坑爹的申訴系統(tǒng)中說過這個事了笆焰，我說過這句話——“真正的安全系統(tǒng)是協(xié)同整個社會的安全系統(tǒng)做出來的一道安全長城劫谅，而不是什么都要自己搞”，當(dāng)然仙辟，很遺憾不是所有的人都能看懂這個事同波，包括一些資深的人）
了解處理信用卡的一些規(guī)則. (這里也有一個問題你可以查看一下) （陳皓注：有兩上vendor可以幫助你，一個是Authorize.Net另一個是PayFlow Pro）
使用SSL/HTTPS來加密傳輸?shù)卿涰撁婊蚴侨慰捎忻舾行畔⒌捻撁娴热缧庞每ㄌ柕取?/p>
知道如何對付session 劫持。（陳皓注：請參看wikipedia的這Session?Hijacking戴尸，）
避免跨站腳本攻擊(XSS)粟焊。（陳皓注：參看酷殼站前幾天發(fā)的《新浪微博的XSS攻擊事件》）
避免跨站偽造請求攻擊 cross site request forgeries(XSRF).
保持你的系統(tǒng)里的所有軟件更新到最新的patch。
確保你的數(shù)據(jù)庫連接是安全的孙蒙。
確保你能了解最新的攻擊技術(shù)项棠，以及你系統(tǒng)的脆弱處。
請讀一下The Google Browser Security Handbook.
請讀一下The Web Application Hacker’s Handbook.
（陳皓注：之前本站的“一些資源”提到過Mozilla的安全編程規(guī)范挎峦，還有Ruby on Rails的Web安全的開發(fā)教程）
性能
只要需要香追，請實現(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 更好).
把多個CSS文件和Javascript文件合并成一個峭咒，這樣可以減少瀏覽器的網(wǎng)絡(luò)連數(shù)，并且使用gzip壓縮被反復(fù)用到的文件纪岁。
學(xué)習(xí)一下Yahoo Exceptional Performance這個網(wǎng)站上的東西凑队，上面有很多非常不錯的改善前端性能的指導(dǎo)，以及YSlow這個工具幔翰。Google page speed是另一個用來做性能采樣的工具漩氨。這兩個工具都需要安裝Firebug。
為那些小的圖片使用CSS Image Sprites遗增，就像工具條一樣叫惊。?(參看 “最小化 HTTP 請求” ) （陳皓注：把所有的小圖片合并成一個圖片，然后用CSS把顯示其中的一塊贡定，這樣赋访，這些小圖片只用傳輸一次，酷殼的Wordpress樣式的那個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)該放在一個不使用cookies的獨立的域名下，因為所有在同一個域名或子域名下的cookie會被這個域名下的請求一同發(fā)送鼎兽。另一個好的選擇是使用?Content Delivery Network (CDN).
使用單個頁面的HTTP請求數(shù)最小化答姥。
為Javascript使用Google Closure Compiler或是其它壓縮工具（陳皓注：壓縮Javascript代碼可以讓你的頁面減少網(wǎng)絡(luò)傳輸從而可以得到很快的喧染。注意谚咬，并不是所有的工具都可以正確壓縮Javascript的鹦付，Google的這個工具甚至還可以幫你優(yōu)化你的代碼）
確認(rèn)你的網(wǎng)站有一個favicon.ico文件放在網(wǎng)站的根下蝎困，如/favicon.ico.瀏覽器會自動請求這個文件蚜厉，就算這個圖標(biāo)文件沒有在你的網(wǎng)頁中明顯說明，瀏覽器也會請求捡硅。如果你沒有這個文件秉继，就會出大量的404錯誤祈噪，這會消耗你的服務(wù)器帶寬。（陳皓注：服務(wù)器返回404頁面會比這個ico文件可能還大）
SEO (搜索引擎優(yōu)化)
使用 “搜索引擎喜歡的” URL尚辑，如：使用example.com/pages/45-article-title而不是example.com/index.php?page=45(陳皓注：這里的URL是說Wordpress的辑鲤，后者是默認(rèn)的)
如果你的動態(tài)頁面要使用#，那么請把其改成#!杠茬，而在服務(wù)端月褥，你需要處理$_REQUEST["_escaped_fragment_"]這是Google搜索引擎需要的。換句話說澈蝙，./#!page=1會被Google搜索引擎轉(zhuǎn)成./?_escaped_fragments_=page=1吓坚。（陳皓注：通常來說URL中的#后的東西都不會被傳到服務(wù)器上，所以灯荧，為了要讓Google可以抓取AJAX的東西礁击，你需要使用#!，而Google會把“#!”轉(zhuǎn)成“_escaped_fragment_”來向服務(wù)器發(fā)請求逗载，Twitter的大量的鏈接者是#!的哆窿，比如：https://twitter.com/#!/your_activity）。另外厉斟，用戶也許會使用Firefox 或 Chromium挚躯，history.pushState({"foo":"bar"}, "About", "./?page=1");是一個很不錯的命令。所以擦秽，就算是我們的地址欄上的地址改變了码荔，頁面也不會重新裝載漩勤。這可以讓你使用?而不是#!也能無刷地保住當(dāng)前的動態(tài)的頁面，這可以讓AJAX的請求被瀏覽器記住缩搅。
別使用 “click here” 這樣的鏈接越败。這樣一來，無法SEO硼瓣，而且對于一些需要使用讀屏人來說很不友好（陳皓注：關(guān)于讀屏軟件究飞，可參看本站的“如果看不見你還能編程嗎”）
做一個XML sitemap，并放在網(wǎng)端的根下/sitemap.xml. （陳皓注：這個文件可以讓搜索引擎了解你的網(wǎng)站圖）
當(dāng)你有多個URL指向同一個網(wǎng)頁的使用堂鲤，使用你可以使用Google Webmaster Tools來查看相關(guān)的問題亿傅。
使用Google Webmaster Tools和Yahoo Site Explorer.
安裝Google Analytics(或是別的開源的網(wǎng)站分析工具，如：Piwik).
了解robots.txt和搜索引擎爬蟲是如何工作的瘟栖。
重定向請求 (使用301 重定向網(wǎng)站) 葵擎，如果你要把www.example.com定向到example.com(或是其它的變更) 這樣可以防止Google的rank因為域名的變化發(fā)生改變。（陳皓注：301重定向一般用作域名變更）
知道并不是所有的爬蟲都是好的慢宗，有些爬蟲的行為并不好坪蚁。（陳皓注：比如向你的網(wǎng)站發(fā)大量的請求導(dǎo)致服務(wù)器性能低下）
如果你有一些非文本的內(nèi)容需要在 Google’s sitemap ?中，比如視頻什么的镜沽。Tim Farley的答案，可以讓你看到很多有價值的東西贱田。
技術(shù)
理解什么是HTTP比如 GET, POST, sessions, cookies等缅茉，了解什么是 “stateless” 無狀態(tài)。
讓你的XHTML/HTML和CSS符合W3C 規(guī)范男摧，并確認(rèn)他們都是合格的蔬墩。我們的目標(biāo)是避免瀏覽器的?“quirks mode”，并且可以讓其更容易地能和非標(biāo)準(zhǔn)的瀏覽器工作耗拓，比如讀屏器或移動設(shè)備拇颅。
理解瀏覽器是怎么處理 JavaScript 的。（陳皓：你會看到有些Javascript代碼在頁面上前面乔询，有些則是在后面樟插，所以你需要對其了解清楚為什么是這樣）
了解瀏覽器是怎么裝載 JavaScript，CSS和其它資源的竿刁，了解其對視覺上的影響黄锤。（陳皓注：10年前我做網(wǎng)頁的時候因為HTML還很弱，所以只能使用table來布局食拜，使用table布局的問題就是整個table讀完后頁面才會顯示鸵熟，用戶的視覺體驗并不好）。在某些情況下负甸，你可能需要把你的腳本放在頁面的后面流强。
理解 JavaScript 的 sandbox 是怎么怎么工作的痹届，尤其是你想使用iframes。
請注意 JavaScript 可能會被禁止打月，這樣會讓你的AJAX失效队腐。就算是大多數(shù)用戶都開啟了Javascript功能，但是也可能在一些情況下腳本是不被運行的僵控，比如移動終端上香到，搜索引擎抓網(wǎng)頁的時候也并不會執(zhí)行你的腳本。
學(xué)習(xí)301 和 302 轉(zhuǎn)向的區(qū)別(這也是一個SEO的問題).
盡可能多地學(xué)習(xí)你的部署平臺报破。（比如：操作系統(tǒng)悠就，Web Server：Apache/Nginx，防火墻充易，數(shù)據(jù)庫梗脾，等等）
考慮使用一個Reset Style Sheet.
考慮使用 JavaScript 框架(如：jQuery,MooTools,Prototype,Dojo或YUI 3)，它們會很好的兼容于不同的瀏覽器盹靴。（陳皓注：強(qiáng)烈推薦你看一下本站的開源中最好的WEB開發(fā)資源一文）
把視覺效果和JS框架合在一起討論炸茧，考慮使用一個Service，如：Google Libraries API來裝載框架稿静，這樣可以讓瀏覽器可能早就把這個JS框架已經(jīng)cache了而不需要再從你的網(wǎng)站上下載了梭冠。
Bug fixing
明白你會花20%的時間寫代碼，而80%的時候在維護(hù)改备，所以你要小心編碼控漠。（陳皓注：參看本站的“多些時間可以少些代碼”一文）
設(shè)計一個好的錯誤報告機(jī)制。
設(shè)計一個入口可以讓人們聯(lián)系到你并給你建議和批評悬钳。
為你開發(fā)的東西形成文檔盐捷，這樣可以讓后來的人容易維護(hù)你的軟件和系統(tǒng)。
頻繁備份（也可確保你的這些備份功能正常）Ed Lucas 的回答有一些忠告默勾。你還需要有一個恢復(fù)策略碉渡，而不只是一個備份策略。
使用一個版本控制系統(tǒng)來保存你的代碼母剥，如：Subversion或Git.
別忘了做Acceptance Testing滞诺，使用Selenium能幫到你。
確保你有足夠的日志媳搪，你可以使用 log4j, log4n 或 log4r铭段。如果出了問題，這是可以讓你快速找到問題的方式秦爆。
當(dāng)你寫日志的時候序愚，確保你記錄了你捕獲了處理和未處理異常。報告和分析日志可以讓你知道你網(wǎng)站的問題等限。
這里有多的東西被省略了爸吮，并不是因為那些可能不是有幫助的答案芬膝，而是因為那些東西都太細(xì)節(jié)了，超出了這個問題的范圍形娇，因為這本來就是一個Web開發(fā)需要了解東西的Overview锰霜。我想你可以去看一下其它人的答案，我有時間桐早，我也會補(bǔ)充別人的答案進(jìn)來癣缅。請隨意編輯這個答案，因為可能有些東西忘了哄酝，也有可能有些東西不對友存。
（全文完）
（轉(zhuǎn)載本站文章請注明作者和出處酷 殼 – CoolShell.cn，請勿用于任何商業(yè)用途）
