在發(fā)布站點(diǎn)前，Web開(kāi)發(fā)者需要關(guān)注哪些技術(shù)細(xì)節(jié)？

【編者按】在網(wǎng)站發(fā)布前，開(kāi)發(fā)者需要關(guān)注有許多的技術(shù)細(xì)節(jié)，比如接口設(shè)計(jì)、用戶體驗(yàn)、安全性、Web標(biāo)準(zhǔn)、性能、SEO等，倘若一個(gè)疏忽就會(huì)影響到整體的體驗(yàn)效果。在Stackexchange上有人提出：作為一名Web開(kāi)發(fā)者，哪些技術(shù)細(xì)節(jié)是需要考慮的？作者Hedgehog對(duì)該文進(jìn)行了編譯，這些資源有助于你了解一些關(guān)鍵技術(shù)，比如HTML、HTTP、XML、CSS、JavaScript、瀏覽器兼容性，減少網(wǎng)站加載時(shí)間的技巧、XML站點(diǎn)地圖、W3C規(guī)范等。一起來(lái)看下：

問(wèn)：對(duì)于一個(gè)Web開(kāi)發(fā)人員來(lái)說(shuō)，在發(fā)布一個(gè)站點(diǎn)之前，他需要處理哪些細(xì)節(jié)性的問(wèn)題。假如Jeff Atwood能在站點(diǎn)上忽略了對(duì)HttpOnly cookies，sitemaps和cross-site request forgeries的關(guān)注，那我還能忽略些什么呢？

對(duì)于一個(gè)設(shè)計(jì)或提供站點(diǎn)內(nèi)容的人來(lái)說(shuō)，他們總認(rèn)為站點(diǎn)的可用性及內(nèi)容總比這個(gè)平臺(tái)重要的多，當(dāng)然在這個(gè)方面，Web開(kāi)發(fā)人員沒(méi)有什么話語(yǔ)權(quán)。對(duì)于一 個(gè)Web開(kāi)發(fā)人員來(lái)說(shuō)，其更多需要關(guān)注的是站點(diǎn)的穩(wěn)定性，是否表現(xiàn)良好，安全性，是否滿足了其他商業(yè)目標(biāo)（例如花費(fèi)不少太高，構(gòu)建時(shí)間不少太長(zhǎng)，在 Google提供的搜索結(jié)果中是否有個(gè)良好的排名）。

我們可以從這個(gè)角度上討論這個(gè)問(wèn)題：一個(gè)Web開(kāi)發(fā)者在可信網(wǎng)絡(luò)環(huán)境下做了些成成果，并且他打算將這個(gè)成果部署到當(dāng)前這個(gè)糟糕的互聯(lián)網(wǎng)環(huán)境上。另外，我也尋找一個(gè)更具體的答案而非一個(gè)模糊的”Web標(biāo)準(zhǔn)”，我的意思是已經(jīng)了解了HTTP上的HTML、JavaScript、CSS技術(shù)，且認(rèn)為你已經(jīng)是一個(gè)專業(yè)的Web開(kāi)發(fā)人員。那么，除此之外還有那些標(biāo)準(zhǔn)，在什么環(huán)境下使用？為什么？請(qǐng)?zhí)峁┮粋€(gè)鏈接到標(biāo)準(zhǔn)的規(guī)范。

答：以下大部分的觀點(diǎn)也許大部分都已知悉，但是其中有少量的觀點(diǎn)你獲取從來(lái)沒(méi)有看過(guò)，別擔(dān)心，你不必全部理解他們，或許對(duì)你來(lái)說(shuō)你永遠(yuǎn)也不需要了解到他們。

一、接口設(shè)計(jì)及用戶體驗(yàn)

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

二、安全性

•  有很多需要闡述，但是OWASP開(kāi)發(fā)指南中依據(jù)對(duì)Web站點(diǎn)安全性從頭到腳進(jìn)行了介紹。
•  要了解注入特別是SQL注入，并學(xué)會(huì)如何避免他。
•  永遠(yuǎn)不要相信用戶的輸入，也不是來(lái)自于請(qǐng)求別的(包括cookie和隱藏的表單字段值)。
•  不要使用單獨(dú)類似MD5或SHA加密策略，在進(jìn)行散列密碼值時(shí)，使用作料或多種作料以防止彩虹攻擊。對(duì)于短密碼，采用一個(gè)短散列算法處理，例如：bcrypt或scrypt。
• 不要使用你想象中的身份認(rèn)證系統(tǒng)，很容易得到一個(gè)微妙的錯(cuò)誤和不可測(cè)試的問(wèn)題，甚至你自己都不知道會(huì)怎么回事。
• 了解處理信用卡規(guī)則。
• 使用SSL/HTTPS處理任何敏感數(shù)據(jù)。
• 防止會(huì)話劫持。
• 避免跨站點(diǎn)腳本攻擊。
• 避免跨站點(diǎn)請(qǐng)求偽造。
• 避免點(diǎn)擊劫持。
• 確保你的系統(tǒng)安裝了最新的補(bǔ)丁。
• 確保你的數(shù)據(jù)庫(kù)連接信息是安全的。
• 了解最新的攻擊技術(shù)以免影響到你的平臺(tái)。
•  閱讀谷歌安全手冊(cè)。
•  閱讀web應(yīng)用程序黑客手冊(cè)。
• 考慮最小權(quán)限的負(fù)責(zé)人機(jī)制。

三、性能

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

四、SEO（搜索引擎優(yōu)化）

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

五、技術(shù)點(diǎn)

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

六、Bug修復(fù)

• 你要知道你將要花費(fèi)80%的時(shí)間去維護(hù)你20%時(shí)間寫(xiě)的代碼，所以編碼時(shí)請(qǐng)仔細(xì)。
• 建立一個(gè)良好的錯(cuò)誤報(bào)告解決方案。
• 有一個(gè)能讓大家提供建議或提出批評(píng)的系統(tǒng)。
• 將未來(lái)支持的功能及維護(hù)人員記錄在文檔中。
• 頻繁的備份！ （并且確保這些備份是功能性）埃德?盧卡斯的回答有一些忠告。有一個(gè)恢復(fù)策略，而不只是一個(gè)備份策略。
• 有一個(gè)版本控制系統(tǒng)來(lái)存放文件，例如Subversion，Mercurial或Git。
• 不要忘記做些驗(yàn)收測(cè)試，類似Selenium框架可以提供方便。
• 請(qǐng)確保您有足夠的日志記錄在案，例如使用框架log4j，log4net或log4r。如果你的網(wǎng)站發(fā)生了錯(cuò)誤，你要知道發(fā)生了什么事情。
• 當(dāng)?shù)卿洉r(shí)請(qǐng)務(wù)必同時(shí)捕獲處理異常和未處理的異常。報(bào)告/分析日志的輸出，因?yàn)樗鼤?huì)告訴你網(wǎng)站中的關(guān)鍵問(wèn)題。

推薦閱讀：

• HttpOnly Cookie：一種緩解XSS跨站點(diǎn)腳本攻擊的技術(shù)；http://desert3.iteye.com/blog/869080；http://blog.codinghorror.com/protecting-your-cookies-httponly/
• Sitemap: 通常以xml文件方式，方便網(wǎng)站管理員通知搜索引擎他們網(wǎng)站上有哪些可供抓取的網(wǎng)頁(yè)，以便搜索引擎可以更加智能地抓取網(wǎng)站。http://blog.codinghorror.com/the-importance-of-sitemaps/
• Cross-Site Request Forgeries：跨站請(qǐng)求偽造 http://blog.codinghorror.com/cross-site-request-forgeries-and-you/
• OWASP:開(kāi)放式Web應(yīng)用程序安全項(xiàng)目（OWASP，Open Web Application Security Project）是一個(gè)組織，它提供有關(guān)計(jì)算機(jī)和互聯(lián)網(wǎng)應(yīng)用程序的公正、實(shí)際、有成本效益的信息。其目的是協(xié)助個(gè)人、企業(yè)和機(jī)構(gòu)來(lái)發(fā)現(xiàn)和使用可信賴軟件。https://www.owasp.org/index.php/Category:OWASP_Guide_Project
• HTML5 Manifest：離線緩存http://www.html5rocks.com/zh/tutorials/appcache/beginner/
• deflate：DEFLATE是同時(shí)使用了LZ77算法與哈夫曼編碼（Huffman Coding）的一個(gè)無(wú)損數(shù)據(jù)壓縮算法。http://zh.wikipedia.org/wiki/DEFLATE
• CDN：Content Delivery Network(內(nèi)容分發(fā)網(wǎng)絡(luò))
• 內(nèi)容分發(fā)網(wǎng)絡(luò)是一種新型網(wǎng)絡(luò)內(nèi)容服務(wù)體系，其基于IP網(wǎng)絡(luò)而構(gòu)建，基于內(nèi)容訪問(wèn)與應(yīng)用的效率要求、質(zhì)量要求和內(nèi)容秩序而提供內(nèi)容的分發(fā)和服務(wù)。http://baike.baidu.com/view/8689800.htm?fromtitle=CDN&fromid=420951&type=search
• 雅虎站點(diǎn)性能優(yōu)化：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區(qū)別；Normalize.css與Reset CSS主要為定義瀏覽器統(tǒng)一的默認(rèn)樣式。http://stackoverflow.com/questions/6887336/what-is-the-difference-between-normalize-css-and-reset-css
• HTML rel canonical 屬性值；rel canonical 屬性值 -- rel="canonical"屬性讓搜索引擎知道當(dāng)前網(wǎng)站中的重復(fù)或相似網(wǎng)頁(yè)中，哪一個(gè)頁(yè)面才是站長(zhǎng)想讓其抓取與收錄的。http://en.wikipedia.org/wiki/Canonical_link_element、http://tools.ietf.org/html/rfc6596
• Google Analytics：企業(yè)級(jí)的網(wǎng)站分析服務(wù)http://www.google.com/analytics/
• Robots.txt(Robots exclusion standard) http://en.wikipedia.org/wiki/Robots_exclusion_standard

譯文出自：Cnblog

生活不易，碼農(nóng)辛苦
如果您覺(jué)得本網(wǎng)站對(duì)您的學(xué)習(xí)有所幫助,可以手機(jī)掃描二維碼進(jìn)行捐贈(zèng)