Web開發人員常犯的10個錯誤

說到開發一個運行在現代網絡中的網站：Web開發人員須要選擇虛擬主機平臺和底層數據存儲，準備編寫HTML、CSS和JavaScript用的工具，要有設計執行方式，以及一些可用的JavaScript庫/框架。在將任務分解爲這幾步以後，接下來要作的就簡單多了，能夠去網上找文章，瀏覽論壇，看看那些能提供更好的Web體驗提示的示例。

然而無論是走哪條路，犯錯倒是每個開發人員都不可避免的。雖然有些錯誤與某一個具體的行爲相關，但有些錯誤倒是全部Web開發人員都須要面對的挑戰。所以，經過研究，體驗和觀察，我總結了Web開發人員常犯的10個錯誤——以及如何避免這些錯誤。

如下要點沒有特定的順序。

1）寫一些過期的HTML

錯誤：早期的互聯網比起咱們如今，標記的選擇要少得多。然而，舊習難改，如今不少開發人員寫的HTML就好像還身處20世紀同樣。舉例來講，咱們使用<table>元素用於佈局，當其餘特定語義標籤更適合的時候使用<span>或<div>元素，在當前HTML標準不受支持的時候使用<center>或<font>標籤，在頁面上間隔項目，若是有大量&nbsp;字符實體的話。

影響：聽從這種過期的HTML規則可能會致使標記過於複雜，結果是在不一樣的瀏覽器中發生不一樣的行爲。並且沒有了改進瀏覽器的動力，由於沒有必要更新到最新的瀏覽器，如Microsoft Edge，哪怕是Internet Explorer版本（十一、十、9）也變得沒有必要。

如何避免：中止使用<table>元素用於內容佈局，限制使用<table>元素來顯示錶格數據。例如能夠去whatwg.org瞭解當前可用的標記選項。使用HTML去描述內容是什麼，而不是說明內容如何展示。對於如何顯示內容，請使用CSS（http://www.w3.org/Style/CSS/）。

2）「明明在個人瀏覽器中是可行的……」

錯誤：開發人員每每會偏心某一個特定的瀏覽器，或者特別討厭某一個，可能主要是由於對測試網頁視圖有所偏見。也有多是由於從網上找到的代碼示例不能保證會如何呈如今其餘瀏覽器中。此外，一些瀏覽器對風格有不一樣的默認值。

影響：以某一個瀏覽器爲中心寫的網站，在其餘瀏覽器中顯示時，其質量將會不好。

如何避免：在開發過程當中，在全部瀏覽器和版本中測試網頁是不切實際的。不過，每隔一段時間，在多個瀏覽器中檢查網站的樣子不失爲一個好方法。如今，無論你偏好的是什麼平臺，總有免費的工具可用：免費的虛擬機、網站掃描儀。如http://browsershots.org/和https://www.browserstack.com/show網站能夠給出頁面如何呈如今多個瀏覽器/版本/平臺中的快照。Visual Studio等工具還能夠調用多個瀏覽器，來顯示你正在工做的單一頁面。當涉及到CSS設計時，能夠參考在meyerweb.com中所示的那樣「重置」全部的默認值。

若是你的網站正在使用的CSS特性是專爲某一瀏覽器特製的，那麼注意它的引擎前綴，如-webkit-，-moz-和-ms-。對於行業在這方面的發展趨勢指導，那麼能夠閱讀如下參考：

• Microsoft Edge開發博客：A break from the past, part 2: Saying goodbye to ActiveX, VBScript, attachEvent

• QuirksMode.org：CSS vendor prefixes considered harmful

• Bruce Lawson： On Internet Explorer supporting -webkit- vendor prefixes

上面這些參考資料解說了引擎前綴的革新，以及你還能夠點擊這裏——這個網站提供了一些如何摒棄引擎前綴的實用建議。

3）很差的格式

錯誤：提示用戶提供信息（特別是在輸入文本字段的時候），並假設數據會如預期接收。

影響：不少事情會（或者頗有可能將會）出錯，當咱們信任用戶輸入的時候。若是沒法提供所需的數據，或接收到的數據不能與下面的數據模式兼容，頁面可能會失敗。更爲嚴重的是，有的用戶可能會故意違背網站的數據庫，例如能夠經過注入式攻擊（見OWASP：Top 10 2013-A1-Injections）。

如何避免：你首先要作的事是確保用戶清楚你須要什麼類型的數據。好比說，若是你只說要地址，那用戶不知道指的是單位，家庭仍是電子郵件的地址！除了要具體，還要充分利用如今的HTML提供的數據驗證技術。無論數據在瀏覽器端是如何驗證的，確保它始終也在服務器端驗證。不要讓一個串接的T-SQL語句使用來自於用戶輸入的，各個字段的類型沒有通過確認的數據。

4）臃腫的響應結果

錯誤：頁面充滿了許多高品質的圖形和/或圖片，這些圖形和/或圖片藉助img元素的高度和寬度屬性按比例縮小。來自於頁面連接的文件，如CSS和JavaScript，很大。源HTML標記也多是沒必要要的複雜和全面。

影響：徹底渲染頁面的時間是如此之久，以至於一些用戶放棄了，或者甚至於直接不耐煩地從新請求整個頁面。在某些狀況下，若是頁面處理等待過久，會出現錯誤。

如何避免：不要抱有如今互聯網接入愈來愈快的僥倖心態——從而容許臃腫的場景。相反，要將從瀏覽器到你的網站的來回當爲一種成本。圖像是網頁臃腫的主要罪犯。爲了最大限度地減小圖像成本，減輕頁面加載的壓力，能夠試試如下三個技巧：

一、問問你本身：「這些圖形真的有必要嗎？」刪除不須要的圖片。

二、使用例如Shrink O’Matic或RIOT的工具來減小圖像文件大小。

三、預加載圖像。這不會提升初始下載的成本，但可讓網站其餘頁面圖像加載速度更快。

另外一種減小成本的方式是壓縮CSS和JavaScript連接文件。有不少的工具，如Minify CSS和Minify JS都能幫你作到。

5）建立所謂「應該能行」的代碼

錯誤：不管是JavaScript，仍是在服務器上運行的代碼，開發人員都須要測試並確認它是否能夠正常工做，而不是在部署了以後，就認爲它應該就能從一而終地運行。

影響：不通過適當錯誤檢查的網站就是對最終用戶耍流氓。不只會極大地影響用戶體驗，並且其錯誤消息內容的類型可能會給黑客線索來滲透這個站點。

如何避免：是人都會犯錯，這個哲理一樣適用於編碼。使用JavaScript，必定要實施好的技術來防止並抓住錯誤。雖然這篇文章描繪了用JavaScript編碼Windows應用程序，可是大部分的內容也適用於web開發，許多提示都很不錯！另外一種能讓代碼變得可靠又能在將來變化中存活下來的方法是單元測試。

若是咱們夠仔細，那麼就能捕捉到服務器端的代碼失敗，而不被用戶發現。只顯示必要的信息，而且必定要確保設置友好的錯誤頁面，如HTTP 404s。

6）寫分叉代碼

錯誤：本着支持全部瀏覽器和版本的崇高理念，開發人員立志建立可對任意可能狀況做出迴應的代碼。代碼中if語句成堆，全部方向都有分叉。

影響：隨着瀏覽器新版本的更新，代碼文件會變得愈來愈笨拙和難以管理。

如何避免：實現代碼的功能檢測和瀏覽器/版本檢測。功能檢測技術不只能夠顯著減小代碼量，還更易於閱讀和管理。不妨考慮使用如Modernizr這樣的庫，不只有助於功能檢測，還能自動幫助提供不能跟上HTML5和CSS3速度的舊版瀏覽器的反饋支持。

7）非響應式設計

錯誤：假設開發/設計人員在相同尺寸的顯示器上開發網站。

影響：當在移動設備或在很是大的屏幕查看網站時，用戶體驗要麼很難看到頁面的重要方面，要麼甚至要時刻注意着不導航至其餘網頁。

如何避免：響應式的思惟方式。在網站中使用響應式設計。這裏有一些關於這方面的實用教程，包括響應式圖片，還有一個很是受歡迎的庫，那就是Bootstrap。

8）製做無心義的頁面

錯誤：製做面向公衆內容的網頁纔是有用的，毫不能不提供關於搜索引擎的任何線索。沒有實現可訪問性功能。

影響：若是不能讓搜索引擎發現網頁，那麼，可能會只有少許或根本沒有訪問。

如何避免：使用SEO（搜索引擎優化）和HTML的支持可訪問性。關於SEO，必定要添加標籤以提供有意義的網頁關鍵字和描述。 About Tech就寫得很好，能夠借鑑。爲了能有更好的可訪問性功能體驗，請對每個img和area標籤提供一個alt="your image description" 屬性。更多建議請見About Tech。你也能夠在Cynthia Says測試公共網頁，看它是否兼容Section 508。

9）網站過多刷新

錯誤：建立的網站須要爲每個互動而全面刷新頁面。

影響：相似於頁面臃腫（參見＃4），頁面加載時間的性能會受到影響。用戶體驗缺少流暢性，而且每次互動均可能致使網頁短暫（或長時間）的復位。

如何避免：快速避免這種狀況的一個方法就是，經過測定回發到服務器的內容是不是真正須要的。例如，當不依賴服務器端資源的時候，客戶端腳本可用於提供直接結果。你也能夠應用AJAX技術或進一步使用單頁的應用程序「SPA」方法。流行的JavaScript庫/框架，如JQuery、KnockoutJS和AngularJS，能讓這些方法的採用變得容易得多。

10）作了太多的無用功

錯誤：開發人員花了很長的時間來建立web內容。大量的時間花在了重複的任務上，或者本身敲代碼寫了不少。

影響：初始網站的發佈和後續的更新時間過於冗長。若是其餘開發人員也在在作一樣的工做，卻用了更少的時間和精力，那麼你的開發價值顯然就低了。手動勞動很容易出現錯誤，而排除故障錯誤須要更多的時間。

如何避免：探索你的選擇。在開發的每個階段考慮使用新的工具和新的流程技術。例如，你目前使用的代碼編輯器相比Sublime Text和Visual Studio，如何？無論你使用的是什麼樣的代碼編輯器，你最近有好好鑽研它的功能嗎？也許只投入稍稍一點時間去仔細閱讀文檔，就能夠發現作事的新方法，爲從此節省一個又一個小時的時間。例如，在這篇文章中，擴展Visual Studio能夠爲web開發人員提升生產效率。

不要錯過網上可用的幫助工具！例如，檢查在dev.modern.ie上的工具以簡化測試（跨多個平臺和設備）以及排除故障。

你也能夠經過實現流程自動化以減小時間和錯誤。這方面的例子是使用Grunt工具，例如它的自動化功能能夠減少文件（見第4點）。另外一個例子是Bower，能夠協助管理庫/框架（參見第9點）。

至於web服務器自己？在例如Microsoft Azure Web Apps的幫助下，你能夠快速建立一個網站，幾乎全部的開發場景均可以很輕輕鬆鬆地規模化到你的業務中！

總結

經過識別這些常見的錯誤，web開發人員能夠避免不少讓其餘人飽受煎熬的挫折。咱們不只須要認可錯誤，還應該清楚錯誤的影響，並採起措施避免錯誤，這樣纔能有更好的開發表現——並有信心完成任務！