在開發(fā)一個運行于現(xiàn)代網(wǎng)絡(luò)的網(wǎng)站時，Web開發(fā)人員需要選擇虛擬主機(jī)平臺和底層數(shù)據(jù)存儲，準(zhǔn)備編寫HTML、CSS和JavaScript的工具，設(shè)計和執(zhí)行方法，以及一些可用的JavaScript庫/框架。任務(wù)分解成這些步驟后，接下來的工作就簡單多了。您可以上網(wǎng)查找文章，瀏覽論壇，并查看可以為網(wǎng)絡(luò)體驗提供更好提示的示例。

　　但是，無論你走哪條路，每一個開發(fā)者犯錯都是必然的。雖然有些錯誤與特定的行為有關(guān)，但有些錯誤是所有網(wǎng)絡(luò)開發(fā)人員都需要面對的挑戰(zhàn)。因此，通過研究、體驗和觀察，我總結(jié)了web開發(fā)人員經(jīng)常犯的10個建站錯誤——以及如何避免這些錯誤。

　　以下幾點沒有特別的順序。

　　1)寫一些過時的HTML

　　錯誤：與我們現(xiàn)在相比，早期的互聯(lián)網(wǎng)對標(biāo)簽的選擇更少。但是舊習(xí)慣很難改，現(xiàn)在很多開發(fā)人員寫HTML就好像還在20世紀(jì)一樣。比如我們使用元素進(jìn)行布局，或者在其他特定的語義標(biāo)簽更合適的時候使用元素，或者在不支持當(dāng)前的HTML標(biāo)準(zhǔn)的時候使用標(biāo)簽，如果有大量的字符實體，就在頁面上空格項。

　　影響：遵循這種過時的HTML規(guī)則可能會導(dǎo)致標(biāo)記過于復(fù)雜，導(dǎo)致不同瀏覽器的行為不同。而且也沒有動力去改進(jìn)瀏覽器，因為沒有必要更新到最新的瀏覽器，比如微軟Edge，甚至連Internet  Explorer版本(11、10、9)都變得沒有必要了。

　　如何避免：停止使用元素進(jìn)行內(nèi)容布局，限制使用元素顯示表格數(shù)據(jù)。例如，您可以去whatwg.org了解當(dāng)前可用的標(biāo)記選項。用HTML來描述內(nèi)容是什么，而不是如何呈現(xiàn)的。

　　2)“顯然在我的瀏覽器里是可行的……”

　　錯誤：開發(fā)人員傾向于偏愛某個特定的瀏覽器，或者討厭某個特定的瀏覽器，可能是因為他們偏向于測試頁面視圖。也有可能是網(wǎng)上找到的代碼示例無法保證它們在其他瀏覽器中的呈現(xiàn)方式。此外，一些瀏覽器對樣式有不同的默認(rèn)值。

　　影響：一個以一個瀏覽器為中心寫的網(wǎng)站，在其他瀏覽器上顯示時，質(zhì)量會很差。

　　如何避免：在開發(fā)過程中測試所有瀏覽器和版本的網(wǎng)頁是不切實際的。但是，偶爾在多個瀏覽器中查看一下網(wǎng)站的外觀是個不錯的方法?，F(xiàn)在不管你喜歡什么平臺，總有免費的工具可用：免費的虛擬機(jī)和網(wǎng)站掃描儀。例如，http://browsershots.org/和https://www.browserstack.com/show的網(wǎng)站可以提供頁面如何在多個瀏覽器/版本/平臺中呈現(xiàn)的快照。Visual  Studio等工具也可以調(diào)用多個瀏覽器來顯示您正在處理的單個頁面。當(dāng)涉及到CSS設(shè)計時，你可以“重置”所有的默認(rèn)值，如meyerweb.com所示。如果你的網(wǎng)站使用的是專門為某個瀏覽器設(shè)計的CSS特性，那么要注意它的引擎前綴，比如-webkit-、-moz-和-ms-。關(guān)于行業(yè)在這方面的發(fā)展趨勢的指導(dǎo)，可以閱讀以下參考文獻(xiàn)：

　　微軟邊緣開發(fā)博客：告別過去，第2:部分告別ActiveX，VBScript，附加事件

　　怪癖：CSS廠商前綴被認(rèn)為是有害的

　　布魯斯勞森：互聯(lián)網(wǎng)瀏覽器支持-網(wǎng)絡(luò)工具包-供應(yīng)商前綴

　　這些參考文獻(xiàn)說明了引擎前綴的創(chuàng)新，也可以點擊這里——。本網(wǎng)站提供了一些關(guān)于如何拋棄引擎前綴的實用建議。

　　3)格式不正確

　　錯誤：提示用戶輸入信息(尤其是輸入文本字段時)，并假設(shè)數(shù)據(jù)將按預(yù)期接收。

　　影響：當(dāng)我們信任用戶輸入時，很多事情會(或者很可能)出錯。如果無法提供所需的數(shù)據(jù)，或者接收到的數(shù)據(jù)與以下數(shù)據(jù)模式不兼容，頁面可能會失敗。更嚴(yán)重的是，有些用戶可能會故意侵犯網(wǎng)站數(shù)據(jù)庫，例如通過注入式攻擊(見OWASP:TOP  10 2013-A1-injects)。

　　如何避免：你首先要做的是確保用戶知道你需要什么樣的數(shù)據(jù)。比如你只要求一個地址，用戶不知道是指工作地址、家庭地址還是郵箱地址！除了具體，還要充分利用HTML提供的數(shù)據(jù)驗證技術(shù)。無論數(shù)據(jù)在瀏覽器端如何驗證，都要確保在服務(wù)器端驗證。不要讓串聯(lián)的T-SQL語句使用來自用戶輸入的數(shù)據(jù)，并且每個字段的類型都沒有得到確認(rèn)。

　　4)臃腫的響應(yīng)結(jié)果

　　錯誤：頁面中充滿了許多高質(zhì)量的圖形和/或圖片，這些圖形和/或圖片是由img元素的高度和寬度屬性縮小的。來自頁面鏈接的文件，比如CSS和JavaScript，非常大。源HTML標(biāo)簽也可能不必要地復(fù)雜和全面。

　　影響：完全渲染頁面耗時太長，以至于部分用戶放棄，甚至直接不耐煩地重新請求整個頁面。在某些情況下，如果頁面處理等待時間過長，就會出現(xiàn)錯誤。如何避免：不要有上網(wǎng)越來越快的僥幸心態(tài)，讓場面臃腫。取而代之的是，把從瀏覽器到你的網(wǎng)站的往返旅程視為一種成本。圖片是臃腫網(wǎng)頁的主要罪犯。為了最大限度地降低圖像成本和減少頁面加載的壓力，您可以嘗試以下三種技術(shù)：

　　捫心自問：“這些數(shù)字真的有必要嗎？”刪除不想要的圖片。

　　使用工具，如縮小O'Matic或RIOT，以減少圖像文件的大小。

　　預(yù)加載圖像。這樣不會增加初始下載的成本，但是可以讓網(wǎng)站其他頁面的圖片加載更快。

　　另一種降低成本的方法是壓縮CSS和JavaScript鏈接文件。有很多工具，比如Minify  CSS，Minify  JS，可以幫你做到。

　　5)創(chuàng)建所謂的“應(yīng)該工作”代碼

　　錯誤：無論是JavaScript還是服務(wù)器上運行的代碼，開發(fā)人員都需要測試確認(rèn)是否可以正常工作，而不是認(rèn)為部署后應(yīng)該可以一直運行。

　　影響：一個沒有正確錯誤檢查的網(wǎng)站對最終用戶來說是一個流氓。不僅會對用戶體驗產(chǎn)生很大影響，而且錯誤消息內(nèi)容的類型也可能會給黑客提供滲透該網(wǎng)站的線索。

　　如何避免：每個人都會犯錯。這種哲學(xué)也適用于編碼。使用JavaScript，我們必須實現(xiàn)好的技術(shù)來預(yù)防和捕捉錯誤。雖然本文描述的是用JavaScript編碼的Windows應(yīng)用程序，但是大部分內(nèi)容也適用于web開發(fā)，很多技巧都很好！另一種使代碼可靠并經(jīng)受住未來變化的方法是單元測試。

　　如果我們足夠小心，我們可以在服務(wù)器端捕捉到代碼的失敗，而不會被用戶發(fā)現(xiàn)。只顯示必要的信息，一定要設(shè)置友好的錯誤頁面，比如HTTP  404s。

　　6)寫分叉代碼

　　錯誤：憑借支持所有瀏覽器和版本的崇高理念，開發(fā)人員決心創(chuàng)建能夠響應(yīng)任何可能情況的代碼。代碼中有成堆的if語句，各個方向都有分支。

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

　　如何避免：實現(xiàn)代碼功能檢測和瀏覽器/版本檢測。功能檢測技術(shù)不僅可以顯著減少代碼量，而且更容易閱讀和管理。可以考慮使用Modernizr這樣的庫，它不僅有助于檢測功能，還能自動幫助那些跟不上HTML5和CSS3的老瀏覽器提供反饋支持。

　　7)無響應(yīng)設(shè)計

　　錯誤：假設(shè)開發(fā)者/設(shè)計者在同尺寸顯示器上開發(fā)網(wǎng)站。影響：在移動設(shè)備或非常大的屏幕上查看網(wǎng)站時，用戶體驗很難看到頁面的重要方面，甚至總是注意不要導(dǎo)航到其他頁面。

　　如何避免：一種反應(yīng)靈敏的思維方式？在網(wǎng)站中使用響應(yīng)性設(shè)計。這里有一些關(guān)于這方面的實用教程，包括響應(yīng)圖片，以及一個非常受歡迎的庫，Bootstrap。

　　8)制作無意義的頁面

　　錯誤：做一個公開內(nèi)容的網(wǎng)頁是有用的，提供任何關(guān)于搜索引擎的線索都是絕對必要的。未實現(xiàn)可訪問性。

　　影響：如果搜索引擎找不到網(wǎng)頁，可能只有很少或者沒有訪問。

　　如何避免：使用SEO(搜索引擎優(yōu)化)和HTML支持可訪問性。關(guān)于SEO，一定要加標(biāo)簽，提供有意義的關(guān)鍵詞和網(wǎng)頁描述。關(guān)于Tech很好，可以借鑒。為了獲得更好的可訪問性體驗，請為每個img和區(qū)域標(biāo)簽提供一個alt='您的圖像描述'屬性。有關(guān)更多建議，請參見關(guān)于技術(shù)。你也可以測試辛西婭賽德的公共網(wǎng)頁，看看它是否與第508節(jié)兼容。

　　9)網(wǎng)站刷新太多

　　錯誤：創(chuàng)建的網(wǎng)站需要為每次交互全面刷新頁面。

　　影響：類似于臃腫的頁面(見# 4)，頁面加載時間的性能會受到影響。用戶體驗缺乏流暢度，每一次交互都可能導(dǎo)致網(wǎng)頁的短時間(或長時間)重置。

　　如何避免：快速避免這種情況的一種方法是確定發(fā)送回服務(wù)器的內(nèi)容是否真的需要。例如，當(dāng)客戶端腳本不依賴于服務(wù)器端資源時，它可以用來提供直接結(jié)果。也可以應(yīng)用AJAX技術(shù)或者進(jìn)一步使用單頁應(yīng)用“SPA”方法。流行的JavaScript庫/框架，比如JQuery、KnockoutJS、AngularJS，可以讓采用這些方法變得容易很多。

　　10)做了太多無用的工作

　　錯誤：開發(fā)人員創(chuàng)建web內(nèi)容需要很長時間。很多時間花在重復(fù)的任務(wù)上，或者你自己寫了很多代碼。

　　影響：最初的網(wǎng)站發(fā)布和后續(xù)更新耗時過長。如果其他開發(fā)人員都在做同樣的工作，但是花費的時間和精力比較少，那么你的開發(fā)價值就明顯低了。手工勞動容易出錯，排除故障需要更多的時間。

　　如何避免：探索你的選擇。考慮在開發(fā)的每個階段使用新的工具和新的過程技術(shù)。比如，你目前使用的代碼編輯器和威震文字、Visual  Studio相比如何？不管你用什么樣的代碼編輯器，最近有沒有好好研究它的功能？也許你可以通過花一點點時間仔細(xì)閱讀文檔，找到新的做事方法，節(jié)省一個又一個小時。例如，在本文中，擴(kuò)展Visual  Studio可以提高web開發(fā)人員的工作效率。不要錯過在線提供的幫助工具！例如，檢查dev.modern.ie上的工具以簡化測試(跨多個平臺和設(shè)備)和故障排除。

　　您還可以通過自動化流程來減少時間和錯誤。這方面的一個例子是使用咕嚕工具，例如，它的自動化功能可以減少文件(見第4點)。另一個例子是Bower，它可以幫助管理庫/框架(參見第9點)。

　　至于web服務(wù)器本身？借助例如微軟Azure  Web  Apps，您可以快速創(chuàng)建一個網(wǎng)站，幾乎所有的開發(fā)場景都可以輕松地擴(kuò)展到您的業(yè)務(wù)中！

　　總結(jié)

　　通過識別這些常見的錯誤，網(wǎng)絡(luò)開發(fā)人員可以避免許多讓他人遭受的挫折。我們不僅要承認(rèn)錯誤，還要知道錯誤的影響，采取措施避免錯誤，這樣才能有更好的開發(fā)業(yè)績，有信心完成任務(wù)！