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

2011/12/7 10:47:24  出處：本站   人氣：21次    字號：小  中  大

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

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

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

接口和用戶體驗

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

最新的 Gecko 引擎 (Firefox)，

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

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

Opera 瀏覽器。

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

多考慮一下人們是怎么來訪問你的網(wǎng)站而不是那些主流的瀏覽器：手機，讀屏軟件和搜索引擎，例如：一些accessibility的東西： WAI 和 Section508, 移動設(shè)備開發(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)站的影響，從而可以改善搜索結(jié)果的質(zhì)量，并且防止垃圾鏈接的蔓延。）

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

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

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

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

安全

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

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

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

對用戶的口令進行Hash，并使用salt，以防止Rainbow 攻擊（陳皓注：Hash算法可用MD5或SHA1等，對口令使用salt的意思是，user 在設(shè)定密碼時，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你可以看到很多文章。關(guān)于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ù)庫連接是安全的。

確保你能了解最新的攻擊技術(shù)，以及你系統(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的，后者是默認的)

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

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

做一個 XML sitemap，并放在網(wǎng)端的根下 /sitemap.xml. （陳皓注：這個文件可以讓搜索引擎了解你的網(wǎ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ā)大量的請求導致服務器性能低下）

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

技術(shù)

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

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

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

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

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

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

學習 301 和 302 轉(zhuǎn)向的區(qū)別 (這也是一個SEO的問題).

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

考慮使用一個 Reset Style Sheet.

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

把視覺效果和JS框架合在一起討論，考慮使用一個Service，如：Google Libraries API 來裝載框架，這樣可以讓瀏覽器可能早就把這個JS框架已經(jīng)cache了而不需要再從你的網(wǎng)站上下載了。

Bug fixing

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

設(shè)計一個好的錯誤報告機制。

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

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

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

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

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

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

當你寫日志的時候，確保你記錄了你捕獲了處理和未處理異常。報告和分析日志可以讓你知道你網(wǎng)站的問題。

這里有多的東西被省略了，并不是因為那些可能不是有幫助的答案，而是因為那些東西都太細節(jié)了，超出了這個問題的范圍，因為這本來就是一個Web開發(fā)需要了解東西的Overview。我想你可以去看一下其它人的答案，我有時間，我也會補充別人的答案進來。請隨意編輯這個答案，因為可能有些東西忘了，也有可能有些東西不對。