18665606093
在開發一個運行于現代網絡的網站時，Web開發人員需要選擇虛擬主機平臺和底層數據存儲，準備編寫HTML、CSS和JavaScript的工具，設計和執行方法，以及一些可用的JavaScript庫/框架。任務分解成這些步驟后，接下來的工作就簡單多了。您可以上網查找文章，瀏覽論壇，并查看可以為網絡體驗提供更好提示的示例。
但是，無論你走哪條路，每一個開發者犯錯都是必然的。雖然有些錯誤與特定的行為有關，但有些錯誤是所有網絡開發人員都需要面對的挑戰。因此，通過研究、體驗和觀察，我總結了web開發人員經常犯的10個建站錯誤——以及如何避免這些錯誤。
以下幾點沒有特別的順序。
1)寫一些過時的HTML
錯誤：與我們現在相比，早期的互聯網對標簽的選擇更少。但是舊習慣很難改，現在很多開發人員寫HTML就好像還在20世紀一樣。比如我們使用元素進行布局，或者在其他特定的語義標簽更合適的時候使用元素，或者在不支持當前的HTML標準的時候使用標簽，如果有大量的字符實體，就在頁面上空格項。
影響：遵循這種過時的HTML規則可能會導致標記過于復雜，導致不同瀏覽器的行為不同。而且也沒有動力去改進瀏覽器，因為沒有必要更新到最新的瀏覽器，比如微軟Edge，甚至連Internet Explorer版本(11、10、9)都變得沒有必要了。
如何避免：停止使用元素進行內容布局，限制使用元素顯示表格數據。例如，您可以去whatwg.org了解當前可用的標記選項。用HTML來描述內容是什么，而不是如何呈現的。
2)“顯然在我的瀏覽器里是可行的……”
錯誤：開發人員傾向于偏愛某個特定的瀏覽器，或者討厭某個特定的瀏覽器，可能是因為他們偏向于測試頁面視圖。也有可能是網上找到的代碼示例無法保證它們在其他瀏覽器中的呈現方式。此外，一些瀏覽器對樣式有不同的默認值。
影響：一個以一個瀏覽器為中心寫的網站，在其他瀏覽器上顯示時，質量會很差。
如何避免：在開發過程中測試所有瀏覽器和版本的網頁是不切實際的。但是，偶爾在多個瀏覽器中查看一下網站的外觀是個不錯的方法?，F在不管你喜歡什么平臺，總有免費的工具可用：免費的虛擬機和網站掃描儀。例如，http://browsershots.org/和https://www.browserstack.com/show的網站可以提供頁面如何在多個瀏覽器/版本/平臺中呈現的快照。Visual Studio等工具也可以調用多個瀏覽器來顯示您正在處理的單個頁面。當涉及到CSS設計時，你可以“重置”所有的默認值，如meyerweb.com所示。如果你的網站使用的是專門為某個瀏覽器設計的CSS特性，那么要注意它的引擎前綴，比如-webkit-、-moz-和-ms-。關于行業在這方面的發展趨勢的指導，可以閱讀以下參考文獻：
微軟邊緣開發博客：告別過去，第2:部分告別ActiveX，VBScript，附加事件
怪癖：CSS廠商前綴被認為是有害的
布魯斯勞森：互聯網瀏覽器支持-網絡工具包-供應商前綴
這些參考文獻說明了引擎前綴的創新，也可以點擊這里——。本網站提供了一些關于如何拋棄引擎前綴的實用建議。
3)格式不正確
錯誤：提示用戶輸入信息(尤其是輸入文本字段時)，并假設數據將按預期接收。
影響：當我們信任用戶輸入時，很多事情會(或者很可能)出錯。如果無法提供所需的數據，或者接收到的數據與以下數據模式不兼容，頁面可能會失敗。更嚴重的是，有些用戶可能會故意侵犯網站數據庫，例如通過注入式攻擊(見OWASP:TOP 10 2013-A1-injects)。
如何避免：你首先要做的是確保用戶知道你需要什么樣的數據。比如你只要求一個地址，用戶不知道是指工作地址、家庭地址還是郵箱地址！除了具體，還要充分利用HTML提供的數據驗證技術。無論數據在瀏覽器端如何驗證，都要確保在服務器端驗證。不要讓串聯的T-SQL語句使用來自用戶輸入的數據，并且每個字段的類型都沒有得到確認。
4)臃腫的響應結果
錯誤：頁面中充滿了許多高質量的圖形和/或圖片，這些圖形和/或圖片是由img元素的高度和寬度屬性縮小的。來自頁面鏈接的文件，比如CSS和JavaScript，非常大。源HTML標簽也可能不必要地復雜和全面。
影響：完全渲染頁面耗時太長，以至于部分用戶放棄，甚至直接不耐煩地重新請求整個頁面。在某些情況下，如果頁面處理等待時間過長，就會出現錯誤。如何避免：不要有上網越來越快的僥幸心態，讓場面臃腫。取而代之的是，把從瀏覽器到你的網站的往返旅程視為一種成本。圖片是臃腫網頁的主要罪犯。為了最大限度地降低圖像成本和減少頁面加載的壓力，您可以嘗試以下三種技術：
捫心自問：“這些數字真的有必要嗎？”刪除不想要的圖片。
使用工具，如縮小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，一定要加標簽，提供有意義的關鍵詞和網頁描述。關于Tech很好，可以借鑒。為了獲得更好的可訪問性體驗，請為每個img和區域標簽提供一個alt='您的圖像描述'屬性。有關更多建議，請參見關于技術。你也可以測試辛西婭賽德的公共網頁，看看它是否與第508節兼容。
9)網站刷新太多
錯誤：創建的網站需要為每次交互全面刷新頁面。
影響：類似于臃腫的頁面(見# 4)，頁面加載時間的性能會受到影響。用戶體驗缺乏流暢度，每一次交互都可能導致網頁的短時間(或長時間)重置。
如何避免：快速避免這種情況的一種方法是確定發送回服務器的內容是否真的需要。例如，當客戶端腳本不依賴于服務器端資源時，它可以用來提供直接結果。也可以應用AJAX技術或者進一步使用單頁應用“SPA”方法。流行的JavaScript庫/框架，比如JQuery、KnockoutJS、AngularJS，可以讓采用這些方法變得容易很多。
10)做了太多無用的工作
錯誤：開發人員創建web內容需要很長時間。很多時間花在重復的任務上，或者你自己寫了很多代碼。
影響：最初的網站發布和后續更新耗時過長。如果其他開發人員都在做同樣的工作，但是花費的時間和精力比較少，那么你的開發價值就明顯低了。手工勞動容易出錯，排除故障需要更多的時間。
如何避免：探索你的選擇?？紤]在開發的每個階段使用新的工具和新的過程技術。比如，你目前使用的代碼編輯器和威震文字、Visual Studio相比如何？不管你用什么樣的代碼編輯器，最近有沒有好好研究它的功能？也許你可以通過花一點點時間仔細閱讀文檔，找到新的做事方法，節省一個又一個小時。例如，在本文中，擴展Visual Studio可以提高web開發人員的工作效率。不要錯過在線提供的幫助工具！例如，檢查dev.modern.ie上的工具以簡化測試(跨多個平臺和設備)和故障排除。
您還可以通過自動化流程來減少時間和錯誤。這方面的一個例子是使用咕嚕工具，例如，它的自動化功能可以減少文件(見第4點)。另一個例子是Bower，它可以幫助管理庫/框架(參見第9點)。
至于web服務器本身？借助例如微軟Azure Web Apps，您可以快速創建一個網站，幾乎所有的開發場景都可以輕松地擴展到您的業務中！
總結
通過識別這些常見的錯誤，網絡開發人員可以避免許多讓他人遭受的挫折。我們不僅要承認錯誤，還要知道錯誤的影響，采取措施避免錯誤，這樣才能有更好的開發業績，有信心完成任務！
添加企業微信
18665606093
