摘要：在網(wǎng)站發(fā)布前，開發(fā)者需要關(guān)注有許多的技術(shù)細節(jié)，比如接口設(shè)計、用戶體驗、安全性、Web 標準、性能、SEO 等，倘若一個疏忽就會影響到整體的體驗效果。作為一名 Web 開發(fā)者，哪些技術(shù)細節(jié)需要考慮呢？
　　【編者按】在網(wǎng)站發(fā)布前，開發(fā)者需要關(guān)注有許多的技術(shù)細節(jié)，比如接口設(shè)計、用戶體驗、安全性、Web 標準、性能、SEO 等，倘若一個疏忽就會影響到整體的體驗效果。在Stackexchange上有人提出：作為一名 Web 開發(fā)者，哪些技術(shù)細節(jié)是需要考慮的？作者Hedgehog對該文進行了編譯，這些資源有助于你了解一些關(guān)鍵技術(shù)，比如 HTML、HTTP、XML、CSS、JavaScript、瀏覽器兼容性，減少網(wǎng)站加載時間的技巧、XML 站點地圖、W3C 規(guī)范等。一起來看下：
　　問：對于一個 Web 開發(fā)人員來說，在發(fā)布一個站點之前，他需要處理哪些細節(jié)性的問題。假如 Jeff Atwood 能在站點上忽略了對 HttpOnly cookies，sitemaps 和 cross-site request forgeries 的關(guān)注，那我還能忽略些什么呢？
　　對于一個設(shè)計或提供站點內(nèi)容的人來說，他們總認為站點的可用性及內(nèi)容總比這個平臺重要的多，當然在這個方面，Web 開發(fā)人員沒有什么話語權(quán)。對于一個 Web 開發(fā)人員來說，其更多需要關(guān)注的是站點的穩(wěn)定性，是否表現(xiàn)良好，安全性，是否滿足了其他商業(yè)目標（例如花費不少太高，構(gòu)建時間不少太長，在 Google 提供的搜索結(jié)果中是否有個良好的排名）。
　　我們可以從這個角度上討論這個問題：一個 Web 開發(fā)者在可信網(wǎng)絡(luò)環(huán)境下做了些成成果，并且他打算將這個成果部署到當前這個糟糕的互聯(lián)網(wǎng)環(huán)境上。另外，我也尋找一個更具體的答案而非一個模糊的 "Web 標準 "，我的意思是已經(jīng)了解了 HTTP 上的 HTML、JavaScript、CSS 技術(shù)，且認為你已經(jīng)是一個專業(yè)的 Web 開發(fā)人員。那么，除此之外還有那些標準，在什么環(huán)境下使用？為什么？請?zhí)峁┮粋€鏈接到標準的規(guī)范。
　　答：以下大部分的觀點也許大部分都已知悉，但是其中有少量的觀點你獲取從來沒有看過，別擔心，你不必全部理解他們，或許對你來說你永遠也不需要了解到他們。
　　一、接口設(shè)計及用戶體驗
　　你需要知道各種瀏覽器實現(xiàn)標準不一致，你需要保證你的站點在主流瀏覽器上能夠良好運行。至少需要測試：基于 Gecko 引擎的瀏覽器（例如：Firefox），基于 Webkit 引擎的瀏覽器（例如 Safari 和其他一些手機瀏覽器），Chrome，IE 及 Opera。同時也需要考慮在不同的操作系統(tǒng)上，各種瀏覽器如何渲染你的站點。
　　考慮你的站點將會被如何使用：是在手機端訪問，PC 上的瀏覽器訪問，亦或是搜索引擎。
　　在避免影響用戶的情況下如何發(fā)布更新。是否有一個或者多個測試 / 臨時以便在不打斷站點訪問的情況下進行架構(gòu)、代碼及內(nèi)容的更新。是否有自動化的方式對在線站點進行發(fā)布。這些可以使用一套版本控制系統(tǒng)及自動化構(gòu)建方式來有效實施。
　　不允許向用戶提示不友好的錯誤信息。
　　不要以純文本的方式提供出用戶的 email 地址，因為他們會收到過多的垃圾郵件而死亡。
　　在用戶生成的鏈接上增加 rel="nofollow" 屬性，以避免垃圾郵件。
　　對你的站點建立些限制，當然這應(yīng)該是經(jīng)過深思熟慮的 - 這也屬于安全性范圍。
　　學習如何逐步提高站點功能。
　　  為避免重復(fù)提交，當 POST 成功執(zhí)行后需要進行頁面跳轉(zhuǎn)。
　　  不要忘記考慮輔助功能。它總是一個好主意，且在某些情況下這是一個法律要求。 WAI-ARIA 和 WCAG2 個在這方面的良好資源。
　　不要讓我想該如何進行操作。
　　二、安全性
　　  有很多需要闡述，但是 OWASP 開發(fā)指南中依據(jù)對 Web 站點安全性從頭到腳進行了介紹。
　　  要了解注入特別是 SQL 注入，并學會如何避免他。
　　  永遠不要相信用戶的輸入，也不是來自于請求別的 ( 包括 cookie 和隱藏的表單字段值 ) 。
　　  不要使用單獨類似 MD5 或 SHA 加密策略，在進行散列密碼值時，使用作料或多種作料以防止彩虹攻擊。對于短密碼，采用一個短散列算法處理，例如：bcrypt 或 scrypt。
　　不要使用你想象中的身份認證系統(tǒng)，很容易得到一個微妙的錯誤和不可測試的問題，甚至你自己都不知道會怎么回事。
　　了解處理信用卡規(guī)則。
　　使用 SSL/HTTPS 處理任何敏感數(shù)據(jù)。
　　防止會話劫持。
　　避免跨站點腳本攻擊。
　　避免跨站點請求偽造。
　　避免點擊劫持。
　　確保你的系統(tǒng)安裝了最新的補丁。
　　確保你的數(shù)據(jù)庫連接信息是安全的。
　　了解最新的攻擊技術(shù)以免影響到你的平臺。
　　  閱讀谷歌安全手冊。
　　  閱讀 web 應(yīng)用程序黑客手冊。
　　考慮最小權(quán)限的負責人機制。
　　三、性能
　　如果有必要的話實現(xiàn)緩存策略。理解 Http caching 和 html5 manifest 并在合適的地方使用它們。
　　優(yōu)化圖像 - 不要使用 20 KB 大小的圖像做重復(fù)背景。
　　了解如何 gzip/deflate 內(nèi)容。
　　合并 / 連接多個樣式表或多個腳本文件，以減少瀏覽器連接的數(shù)量，并通過 gzip 來壓縮多個文件中的重復(fù)內(nèi)容。
　　閱覽雅虎卓越性能站點，其中包含大量很棒的指南，例如端到端的性能提升方法，YSlow 工具。Goole page speed 是是一個優(yōu)化參考的好去處。
　　使用 CSS image sprite 技術(shù)減少圖片請求。 ( ps: 前段時間用 node-canvas 做了個本地化的 css-sprite 工具，有需要的可以找我拿源碼 ^_^ ) 。
　　訪問量大的站點可以將內(nèi)容劃分到多個域下，但不要超過 4 個域。
　　靜態(tài)內(nèi)容 ( 例如圖片，css 文件，js 文件及一些靜態(tài)文本 ) 應(yīng)該存放在一個單獨的域下面，并且不能使用 cokies，因為在每次請求時，都會將 cookies 帶上。CDN ( 內(nèi)容分發(fā)網(wǎng)絡(luò) ) 是一個不錯的選擇。
　　減少一個瀏覽器頁面上發(fā)起的 http 請求數(shù)量。
　　使用 JavaScript 文件壓縮技術(shù)。
　　  確保在站點的根目錄下有一個 favicon.ico 文件，即使該文件未被任何使用，流量器也會自動加載它。如果沒有這個文件的話，將會導(dǎo)致大量的 404 錯誤，從而占用你的服務(wù)器帶寬。
　　四、SEO（搜索引擎優(yōu)化）
　　使用搜索引擎友好的的 url，例如：使用 example.com/pages/45-article-title 而非 example.com/index.php?page=45
　　當使用＃動態(tài)內(nèi)容更改＃到＃！然后在服務(wù)器 $_REQUEST [ "_escaped_fragment_" ] 是什么 Googlebot 使用，而不是＃！換句話說，＃！頁 = 1/ 變成 /？_escaped_fragments_= 頁 = 1。此外，對于可能使用 FF.b4 或鉻，history.pushState 用戶（{"foo" 的：" 酒吧 "}"。？/ 頁 =1"，" 關(guān)于 "，）; 是一個偉大的命令。因此，即使在地址欄改變了頁面不會重新加載。這使您可以使用？而不是＃！保持動態(tài)內(nèi)容，并告訴服務(wù)器當您發(fā)送電子郵件，我們是這個頁面后的鏈接，以及 AJAX 并不需要再作額外的要求。（Google 翻譯，沒有完全理解…）
　　不要使用 "click here" 這樣的鏈接，這樣會浪費 SEO 的機會并且也會讓人更加難以理解。
　　要有一個 XML 站點地圖，最好是在默認位置 /sitemap.xml 的。
　　當你有兩個指向不同的地址，可以使用，這個問題也可以從谷歌網(wǎng)站管理員
　　使用 Google Webmaster Tools 和 Bing Webmaster Tools.
　　使用 Google Analytics。
　　了解機器人搜尋算法和搜索引擎爬蟲的工作方式。
　　重定向請求（使用 301 永久移動）要求 www.example.com 到 example.com（或者反過來），以防止分裂谷歌兩個網(wǎng)站之間的排名。
　　你還要知道還有很多惡心的爬蟲程序運作在網(wǎng)絡(luò)上。 ( 以前在做一個百科詞條整理時，對某網(wǎng)站的詞條進行了深度遍歷，但程序運行不久 IP 就被封殺了。 ) 
　　五、技術(shù)點
　　理解 HTTP 協(xié)議，例如：GET，POST，Session，Cookies 以及 " 無狀態(tài) " 的含義。
　　根據(jù) W3C 規(guī)范寫你的 XHTML/ HTML 和 CSS，并確保他們通過驗證。這是為了避免瀏覽器的使用非標準的瀏覽器，如屏幕讀取器和移動設(shè)備的正常工作。
　　了解 JavaScript 在瀏覽器中的運行機制。
　　理解 JavaScript、css 及其他資源在頁面上是如何被加載的，并考慮他們對性能的影響?，F(xiàn)在普遍接受將腳本放在應(yīng)用程序或 html5 底部執(zhí)行。
　　了解 JavaScript 沙箱的工作原理，特別是如果你打算使用 iframe。
　　你要注意到 JavaScript 是可以被禁止的，并且 AJAX 是一個拓展而非基線。很多普通用戶已經(jīng)離開了它，NoScript 越來越受歡迎，移動設(shè)備或許不會像你想象的那樣運行，谷歌將無法運行大部分的的 JavaScript。 ( 不解，noscript 標簽是定義在未能執(zhí)行 js 時的輸出，當是當前 js 橫行的時代，真的還有很多用戶禁用 js 嗎？？？ ) 
　　理解重定向 301 和 302 的區(qū)別。 ( 這也是 SEO 中的一項 ) 
　　盡可能深入了解你的開發(fā)環(huán)境。
　　考慮使用 Reset CSS 或 Normalize.css。
　　考慮 JavaScript 框架（如 jQuery，MooTools，Prototype，Dojo 或 YUI3），這將使用 JavaScript 進行 DOM 操作時，隱藏了很多的瀏覽器差異。
　　考慮到 JS 框架及性能，可以使用一個服務(wù)，如谷歌庫 API 來加載框架，使瀏覽器可以使用它已經(jīng)緩存，而不是從你的網(wǎng)站下載一個副本的框架副本。 ( CDN ) 
　　不要重復(fù)造輪子。做任何事情之前先搜索關(guān)于如何做到這一點的組件或例子。有 99％的可能性有人已經(jīng)做到了和發(fā)布了一個開源版本的代碼。
　　在明確你的需求之前，不要使用 20 個庫去堆砌功能。特別是在客戶端訪問，其最重要的就是讓事情輕便、快速和靈活。
　　六、Bug 修復(fù)
　　你要知道你將要花費 80% 的時間去維護你 20% 時間寫的代碼，所以編碼時請仔細。
　　建立一個良好的錯誤報告解決方案。
　　有一個能讓大家提供建議或提出批評的系統(tǒng)。
　　將未來支持的功能及維護人員記錄在文檔中。
　　頻繁的備份！ （并且確保這些備份是功能性）埃德 · 盧卡斯的回答有一些忠告。有一個恢復(fù)策略，而不只是一個備份策略。
　　有一個版本控制系統(tǒng)來存放文件，例如 Subversion，Mercurial 或 Git。
　　不要忘記做些驗收測試，類似 Selenium 框架可以提供方便。
　　請確保您有足夠的日志記錄在案，例如使用框架 log4j，log4net 或 log4r。如果你的網(wǎng)站發(fā)生了錯誤，你要知道發(fā)生了什么事情。
　　當?shù)卿洉r請務(wù)必同時捕獲處理異常和未處理的異常。報告 / 分析日志的輸出，因為它會告訴你網(wǎng)站中的關(guān)鍵問題。
　　很多知識都省略了，并不是因為他們不是有用的答案，而是它們要么過于詳細，要么超出了范圍，亦或?qū)δ承┤藖碚f過于深入。大家應(yīng)該知道這知識概述，請隨意暢談，因為我可能錯過了一些東西或者也犯了一些錯誤。
　　推薦閱讀：
　　譯文出自：Cnblog
原文地址：http://iphone.myzaker.com/l.php?l=53797e151bc8e03f1d8b4567