一個web開發人員在發布站點前你需要考慮哪些技術細節

2024-04-27 15:12:08

字體：大中小

來源：轉載

供稿：網友

前日在cnblogs上看到一遍文章《每個程序員都必讀的12篇文章》，其中大多數是E文的。

先譯其中一篇web相關的”每個程序員必知之WEB開發”。

原文：

http://PRogrammers.stackexchange.com/questions/46716/what-technical-details-should-a-programmer-of-a-web-application-consider-before

問：對于一個web開發人員來說，在發布一個站點之前，他需要處理哪些細節性的問題。假如Jeff Atwood能在站點上忽略了對HttpOnly cookies，sitemaps,和cross-site request forgeries的關注，那我還能忽略些什么呢？

對于一個設計或提供站點內容的人來說，他們總認為站點的可用性及內容總比這個平臺重要的多，當然在這個方面，web開發人員沒有什么話語權。對于一個web開發人員來說，其更多需要關注的是站點的穩定性，是否表現良好，安全性，是否滿足了其他商業目標（例如花費不要太高，構建時間不要太長，在google提供的搜索結果中是否有個良好的排名）。

我們可以從這個角度上討論這個問題：一個web開發者在可信網絡環境下做了些成成果，并且他打算將這個成果部署到當前這個糟糕的互聯網環境上。

另外，我也尋找一個更具體的答案而非一個模糊的”web標準”，我的意思是已經了解了HTTP上的HTML、javaScript、CSS技術，且認為你已經是一個專業的web開發人員。那么，除此之外還有那些標準，在什么環境下使用？為什么？請提供一個鏈接到標準的規范。

答：以下大部分的觀點也許大部分都已知悉，但是其中有少量的觀點你獲取從來沒有看過，別擔心，你不必全部理解他們，或許對你來說你永遠也不需要了解到他們。

接口設計及用戶體驗

你需要知道各種瀏覽器實現標準不一致，你需要保證你的站點在主流瀏覽器上能夠良好運行。至少需要測試：基于Gecko引擎的瀏覽器(例如：Firefox)，基于Webkit引擎的瀏覽器(例如Safari和其他一些手機瀏覽器)，Chrome，IE及Opera。同時也需要考慮在不同的操作系統上，各種瀏覽器如何渲染你的站點。考慮你的站點將會被如何使用：是在手機端訪問，pc上的瀏覽器訪問，亦或是搜索引擎。在避免影響用戶的情況下如何發布更新。是否有一個或者多個測試/臨時以便在不打斷站點訪問的情況下進行架構、代碼及內容的更新。是否有自動化的方式對在線站點進行發布。這些可以使用一套版本控制系統及自動化構建方式來有效實施。不允許向用戶提示不友好的錯誤信息。不要以純文本的方式提供出用戶的email地址，因為他們會收到過多的垃圾郵件而死亡。在用戶生成的鏈接上增加rel=”nofollow”屬性，以避免垃圾郵件。對你的站點建立些限制，當然這應該是經過深思熟慮的-這也屬于安全性范圍。學習如何逐步提高站點功能。為避免重復提交，當POST成功執行后需要進行頁面跳轉。不要忘記考慮輔助功能。它總是一個好主意，且在某些情況下這是一個法律要求。 WAI-ARIA和WCAG2個在這方面的良好資源。不要讓我想該如何進行操作。

安全性

這有很多需要闡述，但是OWasp開發指南中依據對web站點安全性從頭到腳進行了介紹。要了解注入特別是SQL注入，并學會如何避免他。永遠不要相信用戶的輸入，也不是來自于請求別的(包括cookie和隱藏的表單字段值)。不要使用單獨類似md5或SHA加密策略，在進行散列密碼值時，使用作料或多種作料以防止彩虹攻擊。對于短密碼，采用一個短散列算法處理，例如：bcrypt或scrypt。不要使用你想象中的身份認證系統，很容易得到一個微妙的錯誤和不可測試的問題，甚至你自己都不知道會怎么回事。了解處理信用卡規則。使用SSL/HTTPS處理任何敏感數據。防止會話劫持。避免跨站點腳本攻擊。避免跨站點請求偽造。避免點擊劫持。確保你的系統安裝了最新的補丁。確保你的數據庫連接信息是安全的。了解最新的攻擊技術以免影響到你的平臺。閱讀谷歌安全手冊。閱讀web應用程序黑客手冊?？紤]最小權限的負責人機制。

性能

如果有必要的話實現緩存策略。理解Http caching和html5 manifest并在合適的地方使用它們。優化圖像-不要使用20 KB大小的圖像做重復背景。了解如何gzip/deflate內容。合并/連接多個樣式表或多個腳本文件，以減少瀏覽器連接的數量，并通過gzip來壓縮多個文件中的重復內容。閱覽雅虎卓越性能站點，其中包含大量很棒的指南，例如端到端的性能提升方法，YSlow工具。Goole page speed是是一個優化參考的好去處。使用CSS image sprite技術減少圖片請求。(ps:前段時間用node-canvas做了個本地化的css-sprite工具，有需要的可以找我拿源碼^_^)。訪問量大的站點可以將內容劃分到多個域下，但不要超過4個域。靜態內容(例如圖片，css文件，js文件及一些靜態文本)應該存放在一個單獨的域下面，并且不能使用cokies，因為在每次請求時，都會將cookies帶上。CDN(內容分發網絡)是一個不錯的選擇。減少一個瀏覽器頁面上發起的http請求數量。使用Javascript文件壓縮技術。確保在站點的根目錄下有一個favicon.ico文件，即使該文件未被任何使用，流量器也會自動加載它。如果沒有這個文件的話，將會導致大量的404錯誤，從而占用你的服務器帶寬。

SEO(搜索引擎優化)

使用搜索引擎友好的的url，例如：使用example.com/pages/45-article-title 而非example.com/index.php?page=45當使用＃動態內容更改＃到＃！然后在服務器$_REQUEST[“_escaped_fragment_”]是什么Googlebot使用，而不是＃！換句話說，＃！頁= 1/變成/？_escaped_fragments_=頁= 1。此外，對于可能使用FF.b4或鉻，history.pushState用戶（{“foo”的：“酒吧”}“。？/頁=1”，“關于”，）;是一個偉大的命令。因此，即使在地址欄改變了頁面不會重新加載。這使您可以使用？而不是＃！保持動態內容，并告訴服務器當您發送電子郵件，我們是這個頁面后的鏈接，以及Ajax并不需要再作額外的要求。（Google翻譯，沒有完全理解…）不要使用”click here”這樣的鏈接，這樣會浪費SEO的機會并且也會讓人更加難以理解。要有一個xml站點地圖，最好是在默認位置/sitemap.xml的。當你有兩個指向不同的地址，可以使用<link rel="canonical".../>，這個問題也可以從谷歌網站管理員工具解決。使用Google Webmaster Tools 和 Bing Webmaster Tools.使用Google Analytics。了解機器人搜尋算法和搜索引擎爬蟲的工作方式。重定向請求（使用301永久移動）要求www.example.com到example.com（或者反過來），以防止分裂谷歌兩個網站之間的排名。你還要知道還有很多惡心的爬蟲程序運作在網絡上。(以前在做一個百科詞條整理時，對某網站的詞條進行了深度遍歷，但程序運行不久IP就被封殺了。)

技術點

理解HTTP協議，例如：GET，POST，session，Cookies以及“無狀態”的含義。根據W3C規范寫你的XHTML/ HTML和CSS，并確保他們通過驗證。這是為了避免瀏覽器的使用非標準的瀏覽器，如屏幕讀取器和移動設備的正常工作。了解JavaScript在瀏覽器中的運行機制。理解JavaScript、css及其他資源在頁面上是如何被加載的，并考慮他們對性能的影響。現在普遍接受將腳本放在應用程序或html5底部執行。了解JavaScript沙箱的工作原理，特別是如果你打算使用iframe。你要注意到JavaScript是可以被禁止的，并且AJAX是一個拓展而非基線。很多普通用戶已經離開了它，NoScript越來越受歡迎，移動設備或許不會像你想象的那樣運行，谷歌將無法運行大部分的的JavaScript。(不解，noscript標簽是定義在未能執行js時的輸出，當是當前js橫行的時代，真的還有很多用戶禁用js嗎？？？)理解重定向301和302的區別。(這也是SEO中的一項)盡可能深入了解你的開發環境。考慮使用Reset CSS或Normalize.css。考慮JavaScript框架（如jQuery，MooTools，Prototype，Dojo或YUI3），這將使用JavaScript進行DOM操作時，隱藏了很多的瀏覽器差異?？紤]到JS框架及性能，可以使用一個服務，如谷歌庫API來加載框架，使瀏覽器可以使用它已經緩存，而不是從你的網站下載一個副本的框架副本。(CDN)不要重復造輪子。做任何事情之前先搜索關于如何做到這一點的組件或例子。有99％的可能性有人已經做到了和發布了一個開源版本的代碼。在明確你的需求之前，不要使用20個庫去堆砌功能。特別是在客戶端訪問，其最重要的就是讓事情輕便、快速和靈活。

Bug修復

你要知道你將要花費80%的時間去維護你20%時間寫的代碼，所以編碼時請仔細。建立一個良好的錯誤報告解決方案。有一個能讓大家提供建議或提出批評的系統。將未來支持的功能及維護人員記錄在文檔中。頻繁的備份！（并且確保這些備份是功能性）埃德·盧卡斯的回答有一些忠告。有一個恢復策略，而不只是一個備份策略。有一個版本控制系統來存放文件，例如Subversion，Mercurial或Git。不要忘記做些驗收測試，類似Selenium框架可以提供方便。請確保您有足夠的日志記錄在案，例如使用框架log4j，log4net或log4r。如果你的網站發生了錯誤，你要知道發生了什么事情。當登錄時請務必同時捕獲處理異常和未處理的異常。報告/分析日志的輸出，因為它會告訴你網站中的關鍵問題。

很多知識都省略了，并不是因為他們不是有用的答案，而是它們要么過于詳細，要么超出了范圍，亦或對某些人來說過于深入。大家應該知道這知識概述，請隨意暢談，因為我可能錯過了一些東西或者也犯了一些錯誤。

-----------------------------------------------------------------------------------------------------------------------------------------------------------------

翻譯完了，大汗淋漓啊，有木有?。?！如有不對之處，請拍磚。

原文：

http://programmers.stackexchange.com/questions/46716/what-technical-details-should-a-programmer-of-a-web-application-consider-before

備注：

HttpOnly Cookie：一種緩解XSS跨站點腳本攻擊的技術；

http://desert3.iteye.com/blog/869080

http://blog.codinghorror.com/protecting-your-cookies-httponly/

Sitemap: 通常以xml文件方式，方便網站管理員通知搜索引擎他們網站上有哪些可供抓取的網頁，以便搜索引擎可以更加智能地抓取網站。

http://blog.codinghorror.com/the-importance-of-sitemaps/

Cross-Site Request Forgeries：跨站請求偽造

http://blog.codinghorror.com/cross-site-request-forgeries-and-you/

OWASP:開放式Web應用程序安全項目（OWASP，Open Web Application Security Project）是一個組織，它提供有關計算機和互聯網應用程序的公正、實際、有成本效益的信息。其目的是協助個人、企業和機構來發現和使用可信賴軟件。