標籤：des style blog class c java
摘要：在網站發布前，開發人員需要關注有許多的技術細節，比如介面設計、使用者體驗、安全性、Web標準、效能、SEO等，倘若一個疏忽就會影響到整體的體驗效果。作為一名Web開發人員，哪些技術細節需要考慮呢？
【編者按】在網站發布前，開發人員需要關注有許多的技術細節，比如介面設計、使用者體驗、安全性、Web標準、效能、SEO等，倘若一個疏忽就會影響到整體的體驗效果。在Stackexchange上有人提出：作為一名Web開發人員，哪些技術細節是需要考慮的？作者Hedgehog對該文進行了編譯，這些資源有助於你瞭解一些關鍵技術，比如HTML、HTTP、XML、CSS、JavaScript、瀏覽器安全色性，減少網站載入時間的技巧、XML網站地圖、W3C規範等。一起來看下：
問：對於一個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處理任何敏感性資料。
- 防止工作階段劫持。
- 避免跨網站指令碼攻擊。
- 避免跨網站請求偽造。
- 避免點擊劫持。
- 確保你的系統安裝了最新的補丁。
- 確保你的資料庫連接資訊是安全的。
- 瞭解最新的攻擊技術以免影響到你的平台。
- 閱讀Google安全手冊。
- 閱讀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網站管理員
- 使用Google Webmaster Tools 和 Bing Webmaster Tools.
- 使用Google Analytics。
- 瞭解機器人搜尋演算法和搜尋引擎爬蟲的工作方式。
- 重新導向請求（使用301永久移動）要求www.example.com到example.com（或者反過來），以防止分裂Google兩個網站之間的排名。
- 你還要知道還有很多噁心的爬蟲程式運作在網路上。(以前在做一個百科詞條整理時，對某網站的詞條進行了深度遍曆，但程式運行不久IP就被封殺了。)
五、技術點
- 理解HTTP協議，例如：GET，POST，Session，Cookies以及“無狀態”的含義。
- 根據W3C規範寫你的XHTML/ HTML和CSS，並確保他們通過驗證。這是為了避免瀏覽器的使用非標準的瀏覽器，如螢幕讀取器和行動裝置的正常工作。
- 瞭解JavaScript在瀏覽器中的運行機制。
- 理解JavaScript、css及其他資源在頁面上是如何被載入的，並考慮他們對效能的影響。現在普遍接受將指令碼放在應用程式或html5底部執行。
- 瞭解JavaScript沙箱的工作原理，特別是如果你打算使用iframe。
- 你要注意到JavaScript是可以被禁止的，並且AJAX是一個拓展而非基準。很多普通使用者已經離開了它，NoScript越來越受歡迎，行動裝置或許不會像你想象的那樣運行，Google將無法運行大部分的的JavaScript。(不解，noscript標籤是定義在未能執行js時的輸出，當是當前js橫行的時代，真的還有很多使用者禁用js嗎？？？)
- 理解重新導向301和302的區別。(這也是SEO中的一項)
- 儘可能深入瞭解你的開發環境。
- 考慮使用Reset CSS或Normalize.css。
- 考慮JavaScript架構（如jQuery，MooTools，Prototype，Dojo或YUI3），這將使用JavaScript進行DOM操作時，隱藏了很多的瀏覽器差異。
- 考慮到JS架構及效能，可以使用一個服務，如Google庫API來載入架構，使瀏覽器可以使用它已經緩衝，而不是從你的網站下載一個副本的架構副本。(CDN)
- 不要重複造輪子。做任何事情之前先搜尋關於如何做到這一點的組件或例子。有99％的可能性有人已經做到了和發布了一個開源版本的代碼。
- 在明確你的需求之前，不要使用20個庫去堆砌功能。特別是在用戶端訪問，其最重要的就是讓事情輕便、快速和靈活。
六、Bug修複
- 你要知道你將要花費80%的時間去維護你20%時間寫的代碼，所以編碼時請仔細。
- 建立一個良好的錯誤報表解決方案。
- 有一個能讓大家提供建議或提出批評的系統。
- 將未來支援的功能及維護個人記錄在文檔中。
- 頻繁的備份！ （並且確保這些備份是功能性）埃德·盧卡斯的回答有一些忠告。有一個恢複策略，而不只是一個備份策略。
- 有一個版本控制系統來存放檔案，例如Subversion，Mercurial或Git。
- 不要忘記做些驗收測試，類似Selenium架構可以提供方便。
- 請確保您有足夠的日誌記錄在案，例如使用架構log4j，log4net或log4r。如果你的網站發生了錯誤，你要知道發生了什麼事情。
- 當登入時請務必同時捕獲處理異常和未處理的異常。報告/分析日誌的輸出，因為它會告訴你網站中的關鍵問題。
很多知識都省略了，並不是因為他們不是有用的答案，而是它們要麼過於詳細，要麼超出了範圍，亦或對某些人來說過於深入。大家應該知道這知識概述，請隨意暢談，因為我可能錯過了一些東西或者也犯了一些錯誤。
推薦閱讀：
- 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）是一個組織，它提供有關電腦和互連網應用程式的公正、實際、有成本效益的資訊。其目的是協助個人、企業和機構來發現和使用可信賴軟體。https://www.owasp.org/index.php/Category:OWASP_Guide_Project
- HTML5 Manifest：離線緩衝http://www.html5rocks.com/zh/tutorials/appcache/beginner/
- deflate：DEFLATE是同時使用了LZ77演算法與哈夫曼編碼（Huffman Coding）的一個無損資料壓縮演算法。http://zh.wikipedia.org/wiki/DEFLATE
- CDN：Content Delivery Network(內容分髮網絡)
- 內容分髮網絡是一種新型網路內容服務體系，其基於IP網路而構建，基於內容訪問與應用的效率要求、品質要求和內容秩序而提供內容的分發和服務。http://baike.baidu.com/view/8689800.htm?fromtitle=CDN&fromid=420951&type=search
- 雅虎網站效能最佳化：https://developer.yahoo.com/performance/rules.html
- Google page speedhttps://developers.google.com/speed/docs/best-practices/rules_intro
- Http 301,302http://blog.csdn.net/ghj1976/article/details/1794684
- Normalize.css 與 Reset CSS區別；Normalize.css與Reset CSS主要為定義瀏覽器統一的預設樣式。http://stackoverflow.com/questions/6887336/what-is-the-difference-between-normalize-css-and-reset-css
- HTML rel canonical 屬性值；rel canonical 屬性值 -- rel="canonical"屬性讓搜尋引擎知道當前網站中的重複或相似網頁中，哪一個頁面才是站長想讓其抓取與收錄的。http://en.wikipedia.org/wiki/Canonical_link_element、http://tools.ietf.org/html/rfc6596
- Google Analytics：企業級的網站分析服務http://www.google.com/analytics/
- Robots.txt(Robots exclusion standard) http://en.wikipedia.org/wiki/Robots_exclusion_standard
http://www.csdn.net/article/2014-05-19/2819818-technical-details-programmer
