每個程序員都應該了解的知識有哪些?

jopen 11年前發布 | 30K 次閱讀 程序員

 英文鏈接:What should every programmer know about web development?

  以下內容來自于 Stack Overflow 的一個問答中,此問題的答案整理的非常的詳細,且頗具啟發性,整理出來和大家一起分享。由于英語不是很好,如果自身英語成績比較好的,可以看原文。

  問題:那些技術細節是需要程序員把站點開發給公眾之前考慮的?像 Jeff Atwood(Stack Overflow 創始人)這樣的都可以忘了使用 HttpOnly cookies, sitemapscross-site request forgeries,還有哪些可能被遺忘的重要內容?

  答案:從一個 Web 開發者的角度來看,網站的可用性和內容相比平臺的穩定性、性能、安全或者被搜索引擎收錄更加重要,開發人員需要保證的是做出來的網站不要太爛。以下是一些應該注意的點。

  界面和用戶體驗

  1、注意瀏覽器的實現標準上的不一致,確信讓你的網站能夠適當地跨瀏覽器。至少,你的網站需要測試一下下面的瀏覽器:

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

  2、除了瀏覽器,網站還有其他使用方式:手機、屏幕朗讀器、搜索引擎等等。你應該知道在這些情況下,你的網站的運行狀況。例如:一些 Accessibility 的東西: WAISection508。移動設備開發:MobiForge

  3、知道如何在基本不影響用戶使用的情況下升級網站。通常來說,你必須有版本控制系統(CVS、Subversion、Git 等等)和數據備份機制(backup)。 Ed Lucas 的答案 可以讓你了解一些(陳皓注:Ed 說了一些如版本控制,自動化 build (Ant, NAnt 等), ,備份,回滾等機制)

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

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

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

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

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

  9、如果 POST 成功,要在 POST 方法后重定向網址,這樣可以阻止用戶通過刷新頁面重復提交。

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

  安全

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

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

  3、永遠不要相信用戶的輸入(包括 Cookies,因為那也是用戶的輸入)

  4、對用戶的口令進行 Hash,并使用 salt,以防止 Rainbow 攻擊。使用慢一點的 Hash 算法來保存口令,如 bcrypt (被時間檢證過了) 或是 scrypt (更強,但是也更新一些) (1, 2)。你可以閱讀一下 How To Safely Store A Password。The NIST 建議使用 PBKDF2 to hash passwords, 并且 FIPS approved in .NET (具體什么意思我還是不太清楚,大家可以看這里的介紹 here)。避免直接使用 MD5 或 SHA。

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

  6、了解 處理信用卡的一些規則 . (這里也有一個問題你可以查看一下) (有兩上 vendor 可以幫助你,一個是 Authorize.Net 另一個是 PayFlow Pro

  7、使用 SSL/HTTPS 來加密傳輸登錄頁面或是任可有敏感信息的頁面,比如信用卡號等。

  8、知道如何對付 session 劫持。(請參看 wikipedia 的這 Session Hijacking,)

  9、避免 跨站腳本攻擊(XSS)。

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

  11、保持你的系統里的所有軟件更新到最新的 patch。

  12、確保你的數據庫連接是安全的。

  13、確保你能了解最新的攻擊技術,以及你系統的脆弱處。

  14、閱讀 Google 的《瀏覽器安全手冊》(Browser Security Handbook)。

  15、閱讀《網絡軟件的黑客手冊》(The Web Application Hackers Handbook)。

  性能

  1、只要有機會,就使用緩存機制,了解并合理地使用 HTTP caching 以及 HTML5 Manifest

  2、優化圖片使用 ,不要把一個 20KB 的圖片文件,作為重復出現的網頁背景圖案。 不要使用 20KB 圖片來平鋪網頁背景。

  3、學習如何用 gzip/deflate 壓縮內容(deflate 方式更可取)。

  4、將多個樣式表文件或腳本文件,合為一個文件,這樣可以減少瀏覽器的 http 網絡連接數,以及減小 gzip 壓縮后的文件總體積。

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

  6、如果你的網頁用到大量的小體積圖片(比如工具欄),就應該使用 CSS Image Sprite,目的是減少 http 請求數。

  7、大流量的網站應該考慮將網頁對象分散在多個域名。(比如有專門的圖片服務器——圖片相當耗帶寬,或是專門的 Ajax 服務器)

  8、靜態內容(比如圖片、CSS、JavaScript、以及其他 cookie 無關的網頁內容)都應該放在一個不需要使用 cookie 的獨立域名之上。因為域名之下如果有 cookie,那么客戶端向該域名發出的每次 http 請求,都會附上 cookie 內容。這里的一個好方法就是使用”內容分發網絡”(Content Delivery Network,CDN)。

  9、使用單個頁面的 HTTP 請求數最小化。

  10、使用 Google 的 Closure Compiler 壓縮 JavaScript 文件,YUI Compressor 亦可。或是 其它壓縮工具。(Google 的這個工具甚至還可以幫你優化你的代碼)

  11、確保網站根目錄下有 favicon.ico 文件,因為即使網頁中根本不包括這個文件,瀏覽器也會自動發出對它的請求。所以如果這個文件不存在,就會產生大量的 404 錯誤,消耗光你的服務器的帶寬。(服務器返回 404 頁面會比這個 ico 文件可能還大)

  SEO(搜索引擎優化)

  1、使用 “搜索引擎喜歡的” URL,如:使用 example.com/pages/45-article-title 而不是 example.com/index.php?page=45

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

  3、不要使用”點擊這里”之類的超級鏈接,因為這樣等于浪費了一個 SEO 機會,而且降低了”屏幕朗讀器”(screen reader)的使用效果。

  4、創建一個 XML sitemap 文件,它的缺省位置一般是/sitemap.xml(即放在網站根目錄下)。(這個文件可以讓搜索引擎了解你的網站地圖)

  5、當你有多個 URL 指向同一個內容時,在網頁代碼中使用<link rel=”canonical” … />。可以使用 Google Webmaster Tools 來查看相關的問題。

  6、使用 Google 的 Webmaster Tools 和 Yahoo 的 Site Explorer

  7、從一開始就使用 Google Analytics(或者開源的訪問量分析工具 Piwik)。

  8、了解 robots.txt 和搜索引擎爬蟲是如何工作的。

  9、重定向請求 (使用 301 重定向網站) ,如果你要把 www.example.com 定向到 example.com(或是其它的變更) 這樣可以防止 Google 的 rank 因為域名的變化發生改變。

  10、知道并不是所有的爬蟲都是好的,有些爬蟲的行為并不好。(比如向你的網站發大量的請求導致服務器性能低下)

  11、如果你的網站有非文本的內容(比如視頻、音頻等等),你應該參考 Google 的 sitemap 擴展協議Tim Farley 的答案,可以讓你看到很多有價值的東西。

  技術

  1、理解 HTTP 協議,以及諸如 GET、POST、sessions、cookies 之類的概念,包括”無狀態”(stateless)是什么意思。

  2、讓你的 XHTML/HTMLCSS 符合 W3C 規范,使得它們能夠通過檢驗。這可以使你的網頁避免觸發瀏覽器的古怪行為(quirks mode),并且可以讓其更容易地能和非標準的瀏覽器工作,比如讀屏器或移動設備。

  3、理解瀏覽器是怎么處理 JavaScript 的。

  4、理解網頁上的 JavaScript 文件、樣式表文件和其他資源是如何裝載及運行的,考慮它們對頁面性能有何影響。在某些情況下,可能應該將腳本文件放置在網頁的尾部

  5、理解 JavaScript 沙箱(Javascript sandbox)的工作原理,尤其是如果你打算使用 iframe。

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

  7、了解 301 重定向和 302 重定向之間的區別(這也是一個 SEO 相關問題)。

  8、盡可能多地學習你的部署平臺。(比如:操作系統,Web Server:Apache/Nginx,防火墻,數據庫,等等)

  9、考慮使用樣式表重置(Reset Style Sheet)。

  10、考慮使用 JavaScript 框架(比如 jQueryMooToolsPrototype),它們可以使你不用考慮瀏覽器之間的差異。

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

  12、不要重新發明輪子。在做任何事之前尋找一個現有組件或例子。你有 99% 的機會找到別人已經發布的開源版本。

  13、不要一開始就做非常多的功能和組件,特別是在客戶端的 Web 上,你需要保持系統是輕量級,快速,靈活的。

  Bug 修復

  1、明白你會花 20% 的時間寫代碼,而 80% 的時候在維護,所以你要小心編碼。

  2、建立一個有效的錯誤報告機制。

  3、建立某些途徑或系統,讓用戶可以與你接觸,向你提出建議和批評。

  4、為你開發的東西形成文檔,解釋清楚系統是怎么運行的,這樣可以讓后來的人容易維護你的軟件和系統。

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

  6、使用一個版本控制系統來保存你的代碼,如: SubversionGit.

  7、別忘了做 Acceptance Testing,使用 Selenium 能幫到你。

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

  9、當你寫日志的時候,確保你記錄了你捕獲了處理和未處理異常。報告和分析日志可以讓你知道你網站的問題。

  這里有多的東西被省略了,并不是因為那些可能不是有幫助的答案,而是因為那些東西都太細節了,超出了這個問題的范圍,因為這本來就是一個 Web 開發需要了解東西的 Overview。

 本文由用戶 jopen 自行上傳分享,僅供網友學習交流。所有權歸原作者,若您的權利被侵害,請聯系管理員。
 轉載本站原創文章,請注明出處,并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺,歡迎各類分享!