公眾號

關注微信公眾號

移動端

創頭條企服版APP

商標注冊云服務辦公孵化推廣通雙創地圖

武漢Web前端開發人員經常出現的10個錯誤，你有出錯過嗎？

千鋒武漢 2020-08-05 17:52 搶發第一評

不論是走哪條路，出錯卻是每個開發人員都不可避免的。雖然有些毛病與某一個具體的行動相干，但有些毛病卻是所有Web開發人員都需要面對的挑戰。因此，通過研究，體驗和視察，我總結了Web開發人員常犯的10個毛病和如何避免這些毛病。幫助你在開發工作中，輕松避開那些不必要的坑！

1、寫一些過時的HTML

錯誤：早期的互聯網比起我們現在，標記的選擇要少得多。然而，舊習難改，現在很多開發人員寫的HTML就好像還身處20世紀一樣。舉例來說，我們使用

元素用于布局，當其他特定語義標簽更適合的時候使用或

元素，在當前HTML標準不受支持的時候使用或標簽，在頁面上間隔項目，如果有大量?字符實體的話。

影響：遵從這種過時的HTML規則可能會導致標記過于復雜，結果是在不同的瀏覽器中發生不同的行為。而且沒有了改進瀏覽器的動力，因為沒有必要更新到最新的瀏覽器，如Microsoft Edge，哪怕是Internet Explorer版本（11、10、9）也變得沒有必要。

如何避免：停止使用

元素用于內容布局，限制使用

元素來顯示表格數據。例如可以去whatwg.org了解當前可用的標記選項。使用HTML去描述內容是什么，而不是說明內容如何展現。

2、“明明在我的瀏覽器中是可行的......”

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

影響：以某一個瀏覽器為中心寫的網站，在其他瀏覽器中顯示時，其質量將會很差。

如何避免：在開發過程中，在所有瀏覽器和版本中測試網頁是不切實際的。不過，每隔一段時間，在多個瀏覽器中檢查網站的樣子不失為一個好方法。現在，不管你偏好的是什么平臺，總有免費的工具可用：免費的虛擬機、網站掃描儀。Visual Studio等工具還可以調用多個瀏覽器，來顯示你正在工作的單一頁面。

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的幫助下，你可以快速創建一個網站，幾乎所有的開發場景都可以很輕輕松松地規模化到你的業務中！