Web開發(fā)常觸碰的10大常見問題
對(duì)于如何完成同一項(xiàng)任務(wù),擺在我們面前的方案選項(xiàng)似乎無窮無盡,特別是在開發(fā)一套能夠運(yùn)作在現(xiàn)代網(wǎng)絡(luò)環(huán)境之下的網(wǎng)站時(shí)。Web開發(fā)人員首先需要挑選一套Web托管平臺(tái)及底層數(shù)據(jù)存儲(chǔ)機(jī)制,并利用由提供的工具編寫HTML、CSS以及JavaScript代碼,考慮如何實(shí)現(xiàn)設(shè)計(jì)效果以及哪些潛在JavaScript庫/框架可能會(huì)被包含于其中。
一旦選擇被細(xì)化到這一層面,我們就能在網(wǎng)絡(luò)上找到大量相關(guān)文章、論壇以及示例,并借此了解如何打造出更為出色的Web使用體驗(yàn)。然而無論有多少條道路可供選擇,開發(fā)人員都有可能在自己的選項(xiàng)當(dāng)中迷失方向。雖然其中有些錯(cuò)誤與特定方案相關(guān),但也有一些共同的挑戰(zhàn)橫亙?cè)诿恳晃籛eb開發(fā)人員面前。
Web開發(fā)人員最易犯下的十種常見錯(cuò)誤
因此通過一系列研究、經(jīng)驗(yàn)與近期觀察,我整理出了下面這份十大常見錯(cuò)誤清單——目前確實(shí)有很多Web開發(fā)人員還在飽受其困擾,而我也給出了自己的解決意見。
以下這份清單不分先后順序。
1. 編寫陳舊的HTML代碼
錯(cuò)誤: 互聯(lián)網(wǎng)在發(fā)展早期只提供有限的幾種標(biāo)記選項(xiàng),而如今這類選項(xiàng)已經(jīng)變得相當(dāng)豐富。然而某些陳舊的陋習(xí)當(dāng)下仍然存在,而且很多從業(yè)者在編寫HTML代碼時(shí)好像仍然活在上個(gè)世紀(jì)。具體實(shí)例包括使用<table>元素進(jìn)行布局、在更適合使用其它語義標(biāo)簽時(shí)繼續(xù)使用<span>或者<div>元素,還有使用諸如<center>或者<font>等不支持當(dāng)前HTML標(biāo)準(zhǔn)的標(biāo)簽,甚至利用大量 將條目排布在頁面當(dāng)中。
影響: 編寫上述帶有濃郁上世紀(jì)風(fēng)格的HTML代碼可能導(dǎo)致標(biāo)記復(fù)雜程度過高,進(jìn)而在不同瀏覽器中出現(xiàn)彼此相異的運(yùn)行效果。此外,我們也沒有任何理由在微軟Edge甚至是IE新版本(包括IE 9、10與11)當(dāng)中使用此類復(fù)雜的標(biāo)記方式。
如何避免: 不要再使用<table>元素處理內(nèi)容布局了,另外嚴(yán)格限制其在顯示表格數(shù)據(jù)時(shí)的使用頻率。充分了解當(dāng)前有哪些標(biāo)記選項(xiàng)可供使用,具體可以點(diǎn)擊此處查看whatwg.org中的匯總。使用HTML代碼來描述頁面內(nèi)容,而非定義內(nèi)容的顯示方式。要正確顯示設(shè)計(jì)內(nèi)容,請(qǐng)優(yōu)先使用CSS。
2. “在我的瀏覽器中明明沒有問題……”
錯(cuò)誤: 開發(fā)人員可能會(huì)偏愛某款特定瀏覽器或者極度鄙視另一款瀏覽器,而且會(huì)將這種帶有偏見的觀點(diǎn)帶入網(wǎng)頁測(cè)試工作當(dāng)中。在某些情況下,我們甚至有可能將來自網(wǎng)絡(luò)的示例代碼直接納入到項(xiàng)目當(dāng)中,而并沒有測(cè)試其能夠在其它瀏覽器中正確得以渲染。再有,某些瀏覽器會(huì)在樣式方面擁有不同的默認(rèn)值設(shè)定。
影響: 編寫一個(gè)只適用于特定瀏覽器的站點(diǎn)很可能會(huì)給使用其它瀏覽器的用戶帶來非常糟糕的訪問體驗(yàn)。
如何避免: 在開發(fā)過程中針對(duì)每一款瀏覽器及其版本進(jìn)行網(wǎng)頁測(cè)試顯然是不現(xiàn)實(shí)的。不過我們可以每隔特定一段時(shí)間就利用多種瀏覽器來檢查自己的網(wǎng)站是否能夠正常運(yùn)作,這算是種比較理想的折衷辦法。目前無論大家使用哪種首選開發(fā)平臺(tái),都有大量免費(fèi)工具可以幫助各位實(shí)現(xiàn)測(cè)試工作,具體包括免費(fèi)虛擬機(jī)或者站點(diǎn)掃描工具。Browsershots或者BrowserStack等網(wǎng)站還能夠提供快照,幫助我們了解特定頁面在不同瀏覽器/版本/平臺(tái)上擁有怎樣的渲染效果。而Visual Studio等工具也能夠利用不同瀏覽器顯示我們目前正在開發(fā)的單一頁面。當(dāng)利用CSS進(jìn)行設(shè)計(jì)時(shí),請(qǐng)記得對(duì)所有默認(rèn)值進(jìn)行“重新設(shè)定”。
如果大家的站點(diǎn)使用了任何面向單一瀏覽器所創(chuàng)建的特殊CSS功能,那么請(qǐng)留心處理各類提供程序前綴,包括-webkit-、moz-或者-ms-。作為行業(yè)趨勢(shì)指南,我建議大家認(rèn)真查閱下面提供的各參考站點(diǎn)(皆為英文原文):
? 微軟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
雖然以上參考資料已經(jīng)解釋了我們?cè)撊绾伪苊馓峁┏绦蚯熬Y及其相關(guān)理由,但大家也可以點(diǎn)擊此處通過具體建議了解更多解決辦法(英文原文)。
3. 注意調(diào)整格式
錯(cuò)誤: 通過提示的方式向用戶索取信息(特別是以輸入文本字段的方式),并單純假設(shè)該數(shù)據(jù)能夠如預(yù)期般從用戶處獲得。
影響: 在默認(rèn)信任用戶輸入信息時(shí),我們有可能面臨大量意料之外的麻煩。如果所要求的數(shù)據(jù)未能被正確獲得,或者所獲得的數(shù)據(jù)與底層數(shù)據(jù)格式不兼容,那么頁面很可能發(fā)生錯(cuò)誤。更為嚴(yán)重的是,某些針對(duì)網(wǎng)站數(shù)據(jù)庫的故意違反行為甚至足以構(gòu)成注入式攻擊。
如何避免:第一條建議就是要確保用戶能夠清晰地了解到網(wǎng)站要求其輸入哪種數(shù)據(jù)類型。就目前而言,單純給出“請(qǐng)輸入地址”的提示可能代表著用戶需要輸入公司地址、家庭住址甚至是電子郵箱地址!除了作出針對(duì)性說明之外,我們還應(yīng)當(dāng)充分發(fā)揮現(xiàn)代HTML當(dāng)中所提供的數(shù)據(jù)有效性驗(yàn)證技術(shù)。無論數(shù)據(jù)在瀏覽器端是否被視為有效,我們務(wù)必要在服務(wù)器端同樣對(duì)其進(jìn)行驗(yàn)證。永遠(yuǎn)不要在未確認(rèn)字段內(nèi)容符合數(shù)據(jù)類型要求的情況下,允許用戶所輸入的多行索引T-SQL語句使用站點(diǎn)數(shù)據(jù)。
4. 反應(yīng)速度太過緩慢
錯(cuò)誤: 對(duì)于包含有大量高品質(zhì)圖像以及/或者圖片的頁面,我們應(yīng)當(dāng)利用<img>元素對(duì)其高度及寬度屬性進(jìn)行調(diào)整。而來自頁面中的CSS以及JavaScript等文件鏈接往往也體積龐大。另外,源HTML標(biāo)記的存在經(jīng)常會(huì)帶來不必要的復(fù)雜性與加載負(fù)擔(dān)。
影響: 如何某個(gè)頁面的完全渲染時(shí)間過長,那么一部分用戶可能會(huì)放棄訪問甚至不耐煩地重新加載整個(gè)頁面。在某些情況下,如果頁面的處理時(shí)耗太長,甚至可能引發(fā)其它未知錯(cuò)誤。
如何避免: 不要以為互聯(lián)網(wǎng)的傳輸速度越來越快就可以毫無顧忌地設(shè)計(jì)出臃腫的頁面成果。相反,將往返于瀏覽器與站點(diǎn)之間的每一點(diǎn)流量都視為運(yùn)營成本。圖片可以說是頁面臃腫問題的罪魁禍?zhǔn)?,因此為了最大限度降低圖片給頁面帶來的加載成本,請(qǐng)從以下三個(gè)角度進(jìn)行考量:
問問自己:“頁面中所包含的所有圖片都是必要的嗎?”如果答案是否定的,那么去掉那些不必要的圖像。大家也可以點(diǎn)擊此處對(duì)自己的網(wǎng)站進(jìn)行掃描,從而獲取建議以了解哪些圖片可以進(jìn)行壓縮。
利用Shrink O’Matic或者RIOT這類工具來將自己的圖片尺寸控制在最低水平。
采取圖片預(yù)加載方案。這雖然不會(huì)降低初始下載的具體成本,但卻能夠讓站點(diǎn)上其它使用相關(guān)圖片的頁面擁有更出色的載入速度。
另一種降低成本的方式則是壓縮CSS與JavaScript鏈接文件的體積。目前我們可以選擇大量工具來幫助自己完成這項(xiàng)評(píng)估工作,其中包括Minify CSS以及Minify JS。
在結(jié)束第四點(diǎn)錯(cuò)誤之前,我們還得提一句,請(qǐng)?jiān)贖TML當(dāng)中使用<style>或者<script>標(biāo)簽之前做出準(zhǔn)確的判斷(同第一點(diǎn))。
5. 編寫出“應(yīng)該能夠起效”的代碼
錯(cuò)誤: 無論是JavaScript還是運(yùn)行在服務(wù)器端的代碼,作為開發(fā)人員我們都應(yīng)當(dāng)通過測(cè)試來驗(yàn)證其實(shí)際運(yùn)行效果,從而保證其一定能夠在部署之后發(fā)揮預(yù)期作用。大家的代碼在執(zhí)行時(shí)不應(yīng)引發(fā)任何錯(cuò)誤,因?yàn)樵诖酥拔覀円呀?jīng)對(duì)其進(jìn)行了充分測(cè)試。
影響: 包含未經(jīng)測(cè)試代碼的站點(diǎn)很可能以極其糟糕的方式在供最終用戶使用時(shí)產(chǎn)生各類錯(cuò)誤。這不僅會(huì)嚴(yán)重影響到用戶的實(shí)際感受,同時(shí)錯(cuò)誤信息內(nèi)容的具體類型也可能會(huì)向打算入侵站點(diǎn)的黑客透露那些本該受到嚴(yán)格保護(hù)的細(xì)節(jié)線索。
如何避免: 人是不可避免會(huì)犯錯(cuò)的,因此我們應(yīng)當(dāng)將這種哲學(xué)思維帶入編程工作。在JavaScript當(dāng)中,我們應(yīng)當(dāng)確保利用一切最佳技術(shù)手段來避免錯(cuò)誤的發(fā)生,并在其實(shí)際出現(xiàn)后及時(shí)捕捉。另外一種有助于提高代碼質(zhì)量的辦法就是針對(duì)未來可能出現(xiàn)的變更對(duì)代碼進(jìn)行單元測(cè)試。
服務(wù)器端的代碼錯(cuò)誤必須要在用戶尚未察覺時(shí)即被發(fā)現(xiàn)并加以修復(fù)。只向用戶顯示必要的錯(cuò)誤提示,而且請(qǐng)大家再用點(diǎn)心,把自己的HTTP 404錯(cuò)誤頁面設(shè)計(jì)得漂亮一點(diǎn)。
6. 編寫fork代碼
錯(cuò)誤:出于支持所有瀏覽器及其各個(gè)版本的崇高理念,某些開發(fā)人員會(huì)創(chuàng)建不同的代碼來對(duì)應(yīng)每一種可能的運(yùn)行場(chǎng)景。這些代碼以if語句循環(huán)為基礎(chǔ),并針對(duì)各類實(shí)際方向提供對(duì)應(yīng)的fork版本。
影響: 隨著瀏覽器版本的不斷更新,對(duì)fork代碼文件的管理將變得非常復(fù)雜甚至無法實(shí)現(xiàn)。另外正如第一點(diǎn)中所言,這樣做其實(shí)完全沒有必要。
如何避免: 在代碼內(nèi)部進(jìn)行功能檢測(cè),而非針對(duì)瀏覽器/版本著手。功能檢測(cè)技術(shù)方案的出現(xiàn)顯著降低了代碼數(shù)量,而且也保證了代碼更易于閱讀并管理。大家可以考慮利用Modernizr等庫來幫助自己在實(shí)現(xiàn)功能檢測(cè)的同時(shí),以自動(dòng)化方式為那些已經(jīng)無法適應(yīng)HTML 5或者CSS 3的陳舊瀏覽器提供后備支持。
7. 采用非響應(yīng)式設(shè)計(jì)
錯(cuò)誤: 在進(jìn)行站點(diǎn)開發(fā)工作時(shí),假設(shè)用戶擁有與開發(fā)人員/設(shè)計(jì)師相等同的顯示器尺寸。
影響: 當(dāng)在移動(dòng)設(shè)備或者某些超大型屏幕上查看站點(diǎn)時(shí),用戶體驗(yàn)也會(huì)因此受到影響——例如無法查看到頁面中的某些重要方面,甚至無法導(dǎo)航至其它頁面。
如何避免: 將響應(yīng)式設(shè)計(jì)納入開發(fā)考量。在站點(diǎn)當(dāng)中使用響應(yīng)式設(shè)計(jì),甚至以同樣的方式進(jìn)行圖片尺寸調(diào)節(jié),在這方面Bootstrap這款高人氣庫絕對(duì)能夠幫上各位大忙。
8. 構(gòu)建毫無意義的頁面
錯(cuò)誤: 在面向公眾的頁面當(dāng)中包含有實(shí)用性內(nèi)容及信息,但不提供任何與搜索引擎相關(guān)的關(guān)鍵字、標(biāo)簽及提示。不提供無障礙訪問功能。
影響: 在這種情況下,用戶將很難通過搜索引擎找到我們的頁面,這將導(dǎo)致其難以甚至根本無法獲得理想的訪問量。另外頁面內(nèi)容需要經(jīng)過精心設(shè)計(jì),以保證不會(huì)在用戶查看過程中操作其視力。
如何避免: 使用SEO(即搜索引擎優(yōu)化)機(jī)制并支持HTML訪問性。在SEO方面,請(qǐng)確保添加標(biāo)簽以提供包含關(guān)鍵字及相關(guān)描述的有意義頁面內(nèi)容。要實(shí)現(xiàn)更出色的可訪問體驗(yàn),大家可以檢查每一條<img>或者<area>標(biāo)簽之下的alt="your image description"屬性。當(dāng)然,單純做到這些還遠(yuǎn)遠(yuǎn)不夠,大家可以點(diǎn)擊此處訪問了解頁面是否與Section 508相兼容。
9. 開發(fā)出的頁面中包含太多刷新操作
錯(cuò)誤: 創(chuàng)建的站點(diǎn)在每項(xiàng)操作當(dāng)中包含太多頁面刷新步驟。
影響: 與臃腫頁面類似(見第四點(diǎn)),頁面加載時(shí)間這一重要性能指標(biāo)也會(huì)因此受到影響。如果刷新過多,用戶體驗(yàn)將缺乏流暢性,而每次內(nèi)容更新都可能造成頁面的短時(shí)(或者長時(shí))重置。
如何避免: 解決這一問題的便捷方式之一在于檢查各項(xiàng)操作是否真有必要與服務(wù)器端取得聯(lián)系。舉例來說,如果無需依賴服務(wù)器端資源進(jìn)行處理,那么我們可以利用客戶端自身的腳本提供即時(shí)性結(jié)果。當(dāng)然,大家也可以使用AJAX技術(shù)或者更進(jìn)一步,選擇單頁面應(yīng)用SPA方案。目前各類高人氣JavaScript庫/框架都提供眾多能夠簡(jiǎn)化這方面難題的辦法,例如JQuery、KnockoutJS以及AngularJS。
10. 工作強(qiáng)度太大
錯(cuò)誤: 開發(fā)人員可能會(huì)投入太多時(shí)間來創(chuàng)建Web內(nèi)容。這些時(shí)間可能被用于進(jìn)行重復(fù)勞動(dòng),或者簡(jiǎn)單地輸入大量文本內(nèi)容。
影響: 在網(wǎng)站剛剛上線或者進(jìn)行后續(xù)更新時(shí),開發(fā)人員投入其中的時(shí)間往往太過夸張。而當(dāng)有其他開發(fā)者能夠用更短時(shí)間及更少精力實(shí)現(xiàn)同樣的效果時(shí),我們投入的時(shí)間成本將得不到理想的回報(bào)。這種簡(jiǎn)單重復(fù)的體力勞動(dòng)會(huì)導(dǎo)致錯(cuò)誤的出現(xiàn),而診斷錯(cuò)誤往往比開發(fā)項(xiàng)目更耗費(fèi)時(shí)間。
如何避免: 自行尋找解決辦法。我們可以考慮使用新型工具或者新的工作流程技術(shù)來搞定開發(fā)中的每個(gè)階段。舉例來說,大家當(dāng)前正在使用的代碼編輯器與Sublime Text或者Visual Studio相比孰優(yōu)孰劣?無論大家所使用的是哪一款代碼編輯器,您有沒有深入挖掘過其中的功能設(shè)定?也許只需要花點(diǎn)零散時(shí)間認(rèn)真閱讀說明文檔,我們就能找到足以在未來幫自己節(jié)約下數(shù)小時(shí)甚至更長時(shí)間的新用法。
另外不要錯(cuò)過互聯(lián)網(wǎng)上任何可能幫得上忙的現(xiàn)成工具!舉例來說,在dev.modern.ie網(wǎng)站上搜索那些能夠簡(jiǎn)化測(cè)試(涵蓋多種平臺(tái)及設(shè)備)及故障排查工作的工具。
大家也可以通過自動(dòng)化流程降低時(shí)間要求與出錯(cuò)機(jī)率。例如,我們可以使用Grunt等工具來自動(dòng)完成文件體積壓縮等任務(wù)。另外,Bower則可以幫助大家更為高效地管理庫與框架。
那么Web服務(wù)器本身又存不存在優(yōu)化空間?我們可以選擇微軟Azure Web Apps,并借此快速創(chuàng)建出一個(gè)幾乎適用于任何開發(fā)場(chǎng)景的站點(diǎn),這對(duì)于擴(kuò)展業(yè)務(wù)絕對(duì)可算理想方案!
總結(jié)陳詞
通過列舉以上常見錯(cuò)誤,Web開發(fā)人員能夠消除很多曾經(jīng)坑害過無數(shù)前輩們的陷阱。除了意識(shí)到這些陷阱的存在,我們還了解了這些錯(cuò)誤的影響以及解決辦法,并據(jù)此設(shè)計(jì)出一套開發(fā)流程,從而在適合自身習(xí)慣的同時(shí)培養(yǎng)工作信心。
相關(guān)閱讀推薦
-
Web開發(fā)常觸碰的10大常見問題
對(duì)于如何完成同一項(xiàng)任務(wù),擺在我們面前的方案選項(xiàng)似乎無窮無盡,特別是在開發(fā)一套能夠運(yùn)作在現(xiàn)代網(wǎng)絡(luò)環(huán)境之下的網(wǎng)站時(shí)。Web開發(fā)人員首...
-
安裝開發(fā)常見問題
以下是我開發(fā)Android應(yīng)用時(shí),遇到的一些詭異或者常見的問題的解決方法。...
-
開發(fā)一個(gè)app多少錢
不懂APP開發(fā)技術(shù),擔(dān)心被忽悠,為此,企業(yè)往往在開發(fā)手機(jī)APP前都會(huì)關(guān)心手機(jī)app開發(fā)費(fèi)用方面的問題,“APP開發(fā)需要多少錢”也...
開發(fā)服務(wù)類型
熱點(diǎn)文章推薦閱讀
-
網(wǎng)易原創(chuàng)漫畫引發(fā)的營銷靈感
提及漫畫元素和服裝的融合,多數(shù)人都會(huì)想到 cosplay...
-
中山(佛山)電子質(zhì)保說明書系
互聯(lián)網(wǎng)的發(fā)展影響下,特別受到敏感影響的傳統(tǒng)企業(yè)紛紛開始學(xué)...
-
微信小程序更新功能支持推廣小
11月9日晚間,微信官方賬號(hào)“微信公眾平臺(tái)”發(fā)布消息,介...
-
未來3個(gè)數(shù)字營銷熱門職位
商業(yè)世界正進(jìn)入高速轉(zhuǎn)型期,幾年前還被認(rèn)為是「新興頭銜」的...
-
中山二維碼防偽系統(tǒng)電子碼防偽
如今越來越多的產(chǎn)品上都貼有二維碼防偽標(biāo)簽,同時(shí)更是由于微...
-
中山二維碼防偽溯源系統(tǒng)開發(fā)
自微信向品牌方開放二維碼連接功能,二維碼已變成消費(fèi)者非常...