說到開發1個運行在現代網絡中的網站：Web開發人員需要選擇虛擬主機平臺和底層數據存儲，準備編寫HTML、CSS和JavaScript用的工具，要有設計履行方式，和1些可用的JavaScript庫/框架。在將任務分解為這幾步以后，接下來要做的就簡單多了，可以去網上找文章，閱讀論壇，看看那些能提供更好的Web體驗提示的示例。
但是不論是走哪條路，出錯卻是每個開發人員都不可避免的。雖然有些毛病與某1個具體的行動相干，但有些毛病卻是所有Web開發人員都需要面對的挑戰。因此，通過研究，體驗和視察，我總結了Web開發人員常犯的10個毛病――和如何避免這些毛病。
以下要點沒有特定的順序。
毛病：初期的互聯網比起我們現在，標記的選擇要少很多。但是，舊習難改，現在很多開發人員寫的HTML就好像還身處20世紀1樣。舉例來講，我們使用元素用于布局，當其他特定語義標簽更合適的時候使用或
影響：遵從這類過時的HTML規則可能會致使標記過于復雜，結果是在不同的閱讀器中產生不同的行動。而且沒有了改進閱讀器的動力，由于沒有必要更新到最新的閱讀器，如Microsoft Edge，哪怕是Internet Explorer版本（11、10、9）也變得沒有必要。
如何避免：停止使用
元素，在當前HTML標準不受支持的時候使用或標簽，在頁面上間隔項目，如果有大量 字符實體的話。
毛病：開發人員常常會偏愛某1個特定的閱讀器，或特別討厭某1個，可能主要是由于對測試網頁視圖有所偏見。也有多是由于從網上找到的代碼示例不能保證會如何顯現在其他閱讀器中。另外，1些閱讀器對風格有不同的默許值。
影響：以某1個閱讀器為中心寫的網站，在其他閱讀器中顯示時，其質量將會很差。
如何避免：在開發進程中，在所有閱讀器和版本中測試網頁是不切實際的。不過，每隔1段時間，在多個閱讀器中檢查網站的模樣不失為1個好方法。現在，不管你偏好的是甚么平臺，總有免費的工具可用：免費的虛擬機、網站掃描儀。如http://browsershots.org/和https://www.browserstack.com/show網站可以給出頁面如何顯現在多個閱讀器/版本/平臺中的快照。Visual Studio等工具還可以調用多個閱讀器，來顯示你正在工作的單1頁面。當觸及到CSS設計時，可以參考在meyerweb.com中所示的那樣“重置”所有的默許值。
如果你的網站正在使用的CSS特性是專為某1閱讀器特制的，那末注意它的引擎前綴，如-webkit-，-moz-和-ms-。對行業在這方面的發展趨勢指點，那末可以瀏覽以下參考：
上面這些參考資料解說了引擎前綴的革新，和你還可以點擊這里――這個網站提供了1些如何摒棄引擎前綴的實用建議。
毛病：提示用戶提供信息（特別是在輸入文本字段的時候），并假定數據會如預期接收。
影響：很多事情會（或很有可能將會）出錯，當我們信任用戶輸入的時候。如果沒法提供所需的數據，或接收到的數據不能與下面的數據模式兼容，頁面可能會失敗。更加嚴重的是，有的用戶可能會故意背背網站的數據庫，例如可以通過注入式攻擊（見OWASP：Top 10 2013-A1-Injections）。
如何避免：你首先要做的事是確保用戶清楚你需要甚么類型的數據。比如說，如果你只說要地址，那用戶不知道指的是單位，家庭還是電子郵件的地址！除要具體，還要充分利用現在的HTML提供的數據驗證技術。不管數據在閱讀器端是如何驗證的，確保它始終也在服務器端驗證。不要讓1個串接的T-SQL語句使用來自于用戶輸入的，各個字段的類型沒有經過確認的數據。
毛病：頁面充滿了許多高品質的圖形和/或圖片，這些圖形和/或圖片借助img元素的高度和寬度屬性按比例縮小。來自于頁面鏈接的文件，如CSS和JavaScript，很大。源HTML標記也多是沒必要要的復雜和全面。
影響：完全渲染頁面的時間是如此之久，以致于1些用戶放棄了，或乃至于直接不耐煩地重新要求全部頁面。在某些情況下，如果頁面處理等待太久，會出現毛病。
如何避免：不要抱有現在互聯網接入愈來愈快的僥幸心態――從而允許臃腫的場景。相反，要將從閱讀器到你的網站的來回當為1種本錢。圖象是網頁臃腫的主要罪犯。為了最大限度地減少圖象本錢，減輕頁面加載的壓力，可以試試以下3個技能：
另外一種減少本錢的方式是緊縮CSS和JavaScript鏈接文件。有很多的工具，如Minify CSS和Minify JS都能幫你做到。
毛病：不管是JavaScript，還是在服務器上運行的代碼，開發人員都需要測試并確認它是不是可以正常工作，而不是在部署了以后，就認為它應當就可以從1而終地運行。
影響：不經過適當毛病檢查的網站就是對終究用戶耍流氓。不但會極大地影響用戶體驗，而且其毛病消息內容的類型可能會給黑客線索來滲透這個站點。
如何避免：是人都會出錯，這個哲理一樣適用于編碼。使用JavaScript，1定要實行好的技術來避免并捉住毛病。雖然這篇文章描繪了用JavaScript編碼Windows利用程序，但是大部份的內容也適用于web開發，許多提示都很不錯！另外一種能讓代碼變得可靠又能在未來變化中存活下來的方法是單元測試。
如果我們夠仔細，那末就可以捕捉到服務器真個代碼失敗，而不被用戶發現。只顯示必要的信息，并且1定要確保設置友好的毛病頁面，如HTTP 404s。
毛病：本著支持所有閱讀器和版本的崇高理念，開發人員立志創建可對任意可能情況作出回應的代碼。代碼中if語句成堆，所有方向都有分叉。
影響：隨著閱讀器新版本的更新，代碼文件會變得愈來愈笨拙和難以管理。
如何避免：實現代碼的功能檢測和閱讀器/版本檢測。功能檢測技術不但可以顯著減少代碼量，還更容易于瀏覽和管理。無妨斟酌使用如Modernizr這樣的庫，不但有助于功能檢測，還能自動幫助提供不能跟上HTML5和CSS3速度的舊版閱讀器的反饋支持。
毛病：假定開發/設計人員在相同尺寸的顯示器上開發網站。
影響：當在移動裝備或在非常大的屏幕查看網站時，用戶體驗要末很難看到頁面的重要方面，要末乃至要時刻注意著不導航至其他網頁。
如何避免：響應式的思惟方式。在網站中使用響應式設計。這里有1些關于這方面的實用教程，包括響應式圖片，還有1個非常受歡迎的庫，那就是Bootstrap。
毛病：制作面向公眾內容的網頁才是有用的，絕不能不提供關于搜索引擎的任何線索。沒有實現可訪問性功能。
影響：如果不能讓搜索引擎發現網頁，那末，可能會只有少許或根本沒有訪問。
如何避免：使用SEO（搜索引擎優化）和HTML的支持可訪問性。關于SEO，1定要添加標簽以提供成心義的網頁關鍵字和描寫。 About Tech就寫得很好，可以鑒戒。為了能有更好的可訪問性功能體驗，請對每個img和area標簽提供1個alt="your image description" 屬性。更多建議請見About Tech。你也能夠在Cynthia Says測試公共網頁，看它是不是兼容Section 508。
毛病：創建的網站需要為每個互動而全面刷新頁面。
影響：類似于頁面臃腫（參見＃4），頁面加載時間的性能會遭到影響。用戶體驗缺少流暢性，并且每次互動都可能致使網頁短暫（或長時間）的復位。
如何避免：快速避免這類情況的1個方法就是，通過測定回發到服務器的內容是不是是真正需要的。例如，當不依賴服務器端資源的時候，客戶端腳本可用于提供直接結果。你也能夠利用AJAX技術或進1步使用單頁的利用程序“SPA”方法。流行的JavaScript庫/框架，如JQuery、KnockoutJS和AngularJS，能讓這些方法的采取變得容易很多。
毛病：開發人員花了很長的時間來創建web內容。大量的時間花在了重復的任務上，或自己敲代碼寫了很多。
影響：初始網站的發布和后續的更新時間過于冗雜。如果其他開發人員也在在做一樣的工作，卻用了更少的時間和精力，那末你的開發價值明顯就低了。手動勞動很容易出現毛病，而排除故障毛病需要更多的時間。
如何避免：探索你的選擇。在開發的每個階段斟酌使用新的工具和新的流程技術。例如，你目前使用的代碼編輯器相比Sublime Text和Visual Studio，如何？不管你使用的是甚么樣的代碼編輯器，你最近有好好研究它的功能嗎？或許只投入稍稍1點時間去仔細瀏覽文檔，就能夠發現做事的新方法，為今后節省1個又1個小時的時間。例如，在這篇文章中，擴大Visual Studio可以為web開發人員提高生產效力。
不要錯過網上可用的幫助工具！例如，檢查在dev.modern.ie上的工具以簡化測試（跨多個平臺和裝備）和排除故障。
你也能夠通過實現流程自動化以減少時間和毛病。這方面的例子是使用Grunt工具，例如它的自動化功能可以減小文件（見第4點）。另外一個例子是Bower，可以協助管理庫/框架（參見第9點）。
至于web服務器本身？在例如Microsoft Azure Web Apps的幫助下，你可以快速創建1個網站，幾近所有的開發場景都可以很輕輕松松地范圍化到你的業務中！
通過辨認這些常見的毛病，web開發人員可以免很多讓其他人飽受煎熬的挫折。我們不但需要承認毛病，還應當清楚毛病的影響，并采取措施避免毛病，這樣才能有更好的開發表現――并有信心完成任務！
上一篇 C++網絡通信庫性能大比拼
下一篇 JSP文件下載（不使用jar包）
程序員人生，我編程，我富裕，記住wfuyu網，php教程，php學習，php手冊，CMS模版制作
聲明：本站大部分內容是作者原創，少部分收集于互聯網供大家一起學習，原版權很多不明，如有侵權請聯系本站，謝謝！
粵ICP備14040726號-1?? 2015-2020 程序員人生 版權所有
