前端開發(fā)是網(wǎng)站開發(fā)過程中一個(gè)重要的工作環(huán)節(jié)，只有前端代碼做好，我們的網(wǎng)站開發(fā)的后臺(tái)數(shù)據(jù)才能對(duì)接，才能實(shí)現(xiàn)各種功能，才能完美的呈現(xiàn)出來。然而在前端開發(fā)的過程中，由于技術(shù)開發(fā)人員的工作經(jīng)驗(yàn)或者技術(shù)水平問題會(huì)常出現(xiàn)各種錯(cuò)誤，導(dǎo)致耗費(fèi)大量的工作時(shí)間而達(dá)不到應(yīng)用的效果。犯錯(cuò)卻是每一個(gè)開發(fā)人員都不可避免的。雖然有些錯(cuò)誤與某一個(gè)具體的行為相關(guān)，但有些錯(cuò)誤卻是所有Web開發(fā)人員都需要面對(duì)的挑戰(zhàn)。因此，通過研究，體驗(yàn)和觀察，小派總結(jié)了Web開發(fā)人員常犯的10個(gè)錯(cuò)誤——以及如何避免這些錯(cuò)誤。

一、寫一些過時(shí)的HTML

錯(cuò)誤：早期的互聯(lián)網(wǎng)比起我們現(xiàn)在，標(biāo)記的選擇要少得多。然而，舊習(xí)難改，現(xiàn)在很多開發(fā)人員寫的HTML就好像還身處20世紀(jì)一樣。舉例來說，我們使用<table>元素用于布局，當(dāng)其他特定語義標(biāo)簽更適合的時(shí)候使用<span>或元素，在當(dāng)前HTML標(biāo)準(zhǔn)不受支持的時(shí)候使用或，在頁面上間隔項(xiàng)目，如果有大量字符實(shí)體的話。

影響：遵從這種過時(shí)的HTML規(guī)則可能會(huì)導(dǎo)致標(biāo)記過于復(fù)雜，結(jié)果是在不同的瀏覽器中發(fā)生不同的行為。而且沒有了改進(jìn)瀏覽器的動(dòng)力，因?yàn)闆]有必要更新 到最新的瀏覽器，如Microsoft Edge，哪怕是Internet Explorer版本（11、10、9）也變得沒有必要。

如何避免：停止使用元素用于內(nèi)容布局，限制使用元素來顯示表格數(shù)據(jù)。例如可以去whatwg.org了解當(dāng)前可用的標(biāo)記選項(xiàng)。使用HTML去描述內(nèi)容是什么，而不是說明內(nèi)容如何展現(xiàn)。對(duì)于如何顯示內(nèi)容，請(qǐng)使用CSS（http://www.w3.org/Style/CSS/）。

二、“明明在我的瀏覽器中是可行的……”

錯(cuò)誤：開發(fā)人員往往會(huì)偏愛某一個(gè)特定的瀏覽器，或者特別討厭某一個(gè)，可能主要是因?yàn)閷?duì)測(cè)試網(wǎng)頁視圖有所偏見。也有可能是因?yàn)閺木W(wǎng)上找到的代碼示例不能保證會(huì)如何呈現(xiàn)在其他瀏覽器中。此外，一些瀏覽器對(duì)風(fēng)格有不同的默認(rèn)值。

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

如何避免：在開發(fā)過程中，在所有瀏覽器和版本中測(cè)試網(wǎng)頁是不切實(shí)際的。不過，每隔一段時(shí)間，在多個(gè)瀏覽器中檢查網(wǎng)站的樣子不失為一個(gè)好方法?，F(xiàn)在，不管你偏好的是什么平臺(tái)，總有免費(fèi)的工具可用：免費(fèi)的虛擬機(jī)、網(wǎng)站掃描儀。如http://browsershots.org/和https://www.browserstack.com/show網(wǎng)站可以給出頁面如何呈現(xiàn)在多個(gè)瀏覽器/版本/平臺(tái)中的快照。Visual Studio等工具還可以調(diào)用多個(gè)瀏覽器，來顯示你正在工作的單一頁面。當(dāng)涉及到CSS設(shè)計(jì)時(shí)，可以參考在meyerweb.com中所示的那樣“重置”所有的默認(rèn)值。

如果你的網(wǎng)站正在使用的CSS特性是專為某一瀏覽器特制的，那么注意它的引擎前綴，如，和。對(duì)于行業(yè)在這方面的發(fā)展趨勢(shì)指導(dǎo)，那么可以閱讀以下參考：

?Microsoft Edge開發(fā)博客：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

上面這些參考資料解說了引擎前綴的革新，以及你還可以點(diǎn)擊這里——這個(gè)網(wǎng)站提供了一些如何摒棄引擎前綴的實(shí)用建議。

三、不好的格式

錯(cuò)誤：提示用戶提供信息（特別是在輸入文本字段的時(shí)候），并假設(shè)數(shù)據(jù)會(huì)如預(yù)期接收。

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

如何避免：你首先要做的事是確保用戶清楚你需要什么類型的數(shù)據(jù)。比如說，如果你只說要地址，那用戶不知道指的是單位，家庭還是電子郵件的地址！除了 要具體，還要充分利用現(xiàn)在的HTML提供的數(shù)據(jù)驗(yàn)證技術(shù)。不管數(shù)據(jù)在瀏覽器端是如何驗(yàn)證的，確保它始終也在服務(wù)器端驗(yàn)證。不要讓一個(gè)串接的T-SQL語句 使用來自于用戶輸入的，各個(gè)字段的類型沒有經(jīng)過確認(rèn)的數(shù)據(jù)。

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

錯(cuò)誤：頁面充滿了許多高品質(zhì)的圖形和/或圖片，這些圖形和/或圖片借助元素的高度和寬度屬性按比例縮小。來自于頁面鏈接的文件，如CSS和JavaScript，很大。源HTML標(biāo)記也可能是不必要的復(fù)雜和全面。

影響：完全渲染頁面的時(shí)間是如此之久，以致于一些用戶放棄了，或者甚至于直接不耐煩地重新請(qǐng)求整個(gè)頁面。在某些情況下，如果頁面處理等待太久，會(huì)出現(xiàn)錯(cuò)誤。

如何避免：不要抱有現(xiàn)在互聯(lián)網(wǎng)接入越來越快的僥幸心態(tài)——從而允許臃腫的場(chǎng)景。相反，要將從瀏覽器到你的網(wǎng)站的來回當(dāng)為一種成本。圖像是網(wǎng)頁臃腫的主要罪犯。為了最大限度地減少圖像成本，減輕頁面加載的壓力，可以試試以下三個(gè)技巧：

問問你自己：“這些圖形真的有必要嗎？”刪除不需要的圖片。

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

預(yù)加載圖像。這不會(huì)提高初始下載的成本，但可以讓網(wǎng)站其他頁面圖像加載速度更快。

另一種減少成本的方式是壓縮CSS和JavaScript鏈接文件。有很多的工具，如Minify CSS和Minify JS都能幫你做到。

五、創(chuàng)建所謂“應(yīng)該能行”的代碼

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

影響：不經(jīng)過適當(dāng)錯(cuò)誤檢查的網(wǎng)站就是對(duì)最終用戶耍流氓。不僅會(huì)極大地影響用戶體驗(yàn)，而且其錯(cuò)誤消息內(nèi)容的類型可能會(huì)給黑客線索來滲透這個(gè)站點(diǎn)。

如何避免：是人都會(huì)犯錯(cuò)，這個(gè)哲理同樣適用于編碼。使用JavaScript，一定要實(shí)施好的技術(shù)來防止并抓住錯(cuò)誤。雖然這篇文章描繪了用 JavaScript編碼Windows應(yīng)用程序，但是大部分的內(nèi)容也適用于web開發(fā)，許多提示都很不錯(cuò)！另一種能讓代碼變得可靠又能在未來變化中存活 下來的方法是單元測(cè)試。

如果我們夠仔細(xì)，那么就能捕捉到服務(wù)器端的代碼失敗，而不被用戶發(fā)現(xiàn)。只顯示必要的信息，并且一定要確保設(shè)置友好的錯(cuò)誤頁面，如HTTP 404s。

六、寫分叉代碼

錯(cuò)誤：本著支持所有瀏覽器和版本的崇高理念，開發(fā)人員立志創(chuàng)建可對(duì)任意可能情況作出回應(yīng)的代碼。代碼中if語句成堆，所有方向都有分叉。

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

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

七、非響應(yīng)式設(shè)計(jì)

錯(cuò)誤：假設(shè)開發(fā)/設(shè)計(jì)人員在相同尺寸的顯示器上開發(fā)網(wǎng)站。

影響：當(dāng)在移動(dòng)設(shè)備或在非常大的屏幕查看網(wǎng)站時(shí)，用戶體驗(yàn)要么很難看到頁面的重要方面，要么甚至要時(shí)刻注意著不導(dǎo)航至其他網(wǎng)頁。

如何避免：響應(yīng)式的思維方式。在網(wǎng)站中使用響應(yīng)式設(shè)計(jì)。這里有一些關(guān)于這方面的實(shí)用教程，包括響應(yīng)式圖片，還有一個(gè)非常受歡迎的庫，那就是Bootstrap。

八、制作無意義的頁面

錯(cuò)誤：制作面向公眾內(nèi)容的網(wǎng)頁才是有用的，絕不能不提供關(guān)于搜索引擎的任何線索。沒有實(shí)現(xiàn)可訪問性功能。

影響：如果不能讓搜索引擎發(fā)現(xiàn)網(wǎng)頁，那么，可能會(huì)只有少量或根本沒有訪問。

如何避免：使用SEO（搜索引擎優(yōu)化）和HTML的支持可訪問性。關(guān)于SEO，一定要添加標(biāo)簽以提供有意義的網(wǎng)頁關(guān)鍵字和描述。 About Tech就寫得很好，可以借鑒。為了能有更好的可訪問性功能體驗(yàn)，請(qǐng)對(duì)每一個(gè)img和area標(biāo)簽提供一個(gè) 屬性。更多建議請(qǐng)見About Tech。你也可以在Cynthia Says測(cè)試公共網(wǎng)頁，看它是否兼容Section 508。

九、網(wǎng)站過多刷新

錯(cuò)誤：創(chuàng)建的網(wǎng)站需要為每一個(gè)互動(dòng)而全面刷新頁面。

影響：類似于頁面臃腫（參見＃4），頁面加載時(shí)間的性能會(huì)受到影響。用戶體驗(yàn)缺乏流暢性，并且每次互動(dòng)都可能導(dǎo)致網(wǎng)頁短暫（或長時(shí)間）的復(fù)位。

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

十、做了太多的無用功

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

影響：初始網(wǎng)站的發(fā)布和后續(xù)的更新時(shí)間過于冗長。如果其他開發(fā)人員也在在做同樣的工作，卻用了更少的時(shí)間和精力，那么你的開發(fā)價(jià)值顯然就低了。手動(dòng)勞動(dòng)很容易出現(xiàn)錯(cuò)誤，而排除故障錯(cuò)誤需要更多的時(shí)間。

如何避免：探索你的選擇。在開發(fā)的每一個(gè)階段考慮使用新的工具和新的流程技術(shù)。例如，你目前使用的代碼編輯器相比Sublime Text和Visual Studio，如何？不管你使用的是什么樣的代碼編輯器，你最近有好好鉆研它的功能嗎？也許只投入稍稍一點(diǎn)時(shí)間去仔細(xì)閱讀文檔，就可以發(fā)現(xiàn)做事的新方法，為今后節(jié)省一個(gè)又一個(gè)小時(shí)的時(shí)間。例如，在這篇文章中，擴(kuò)展Visual Studio可以為web開發(fā)人員提高生產(chǎn)效率。web前端開發(fā)注重的是實(shí)戰(zhàn)項(xiàng)目，你是真心地想學(xué)好web前端這門技術(shù)可以來這里，前面是五五七，中間是四五六，最后是零零六，每天都會(huì)有web前端的視頻教程更新，不想學(xué)的就不要來

不要錯(cuò)過網(wǎng)上可用的幫助工具！例如，檢查在dev.modern.ie上的工具以簡化測(cè)試（跨多個(gè)平臺(tái)和設(shè)備）以及排除故障。

你也可以通過實(shí)現(xiàn)流程自動(dòng)化以減少時(shí)間和錯(cuò)誤。這方面的例子是使用Grunt工具，例如它的自動(dòng)化功能可以減小文件（見第4點(diǎn)）。另一個(gè)例子是Bower，可以協(xié)助管理庫/框架（參見第9點(diǎn)）。

至于web服務(wù)器本身？在例如Microsoft Azure Web Apps的幫助下，你可以快速創(chuàng)建一個(gè)網(wǎng)站，幾乎所有的開發(fā)場(chǎng)景都可以很輕輕松松地規(guī)模化到你的業(yè)務(wù)中！

總結(jié)

通過識(shí)別這些常見的錯(cuò)誤，web開發(fā)人員可以避免很多讓其他人飽受煎熬的挫折。我們不僅需要承認(rèn)錯(cuò)誤，還應(yīng)該清楚錯(cuò)誤的影響，并采取措施避免錯(cuò)誤，這樣才能有更好的開發(fā)表現(xiàn)——并有信心完成任務(wù)！

更多網(wǎng)站開發(fā)、廣州網(wǎng)站開發(fā)、網(wǎng)站開發(fā)公司等相關(guān)內(nèi)容，歡迎您咨詢派點(diǎn)互動(dòng)！