? ? ? ?有部分同學(xué)和朋友問(wèn)到過(guò)我相關(guān)問(wèn)題，利用周末我就淺淺地談?wù)勎覍?duì)web前端開(kāi)發(fā)的理解和體會(huì)，只能淺淺談?wù)?#xff0c;高手請(qǐng)自動(dòng)跳過(guò)本篇文章。畢竟我現(xiàn)在經(jīng)驗(yàn)并不是很足，連工程師都算不上，更不用說(shuō)大牛了。今天也不談技術(shù)，技術(shù)很多人比我掌握得更好，也大同小異，但是每個(gè)人的理解體會(huì)是不一樣的。

? ? ?對(duì)前端開(kāi)發(fā)的三個(gè)總體理解和體會(huì)

? ? ? ?我對(duì)前端開(kāi)發(fā)的總體體會(huì)有三：

? ? ? ?第一：雜而難，難度甚至超過(guò)了一般的后臺(tái)開(kāi)發(fā)，如果有人覺(jué)得前端開(kāi)發(fā)簡(jiǎn)單只能說(shuō)明他還沒(méi)有入門(mén)。

? ? ? ?第二：web前端開(kāi)發(fā)正在向響應(yīng)式和移動(dòng)端方向大步邁進(jìn)。

? ? ? ?第三：前端工程師其實(shí)就是編程技術(shù)人員，用一句話(huà)來(lái)形容“比UI設(shè)計(jì)懂技術(shù)，比技術(shù)人員更懂交互”，當(dāng)然也有人說(shuō)前端工程師是工程師中的設(shè)計(jì)師，是設(shè)計(jì)師中的工程師。既然是編程工作，那就不會(huì)做一輩子，畢竟太累。認(rèn)真敲幾年代碼然后去賣(mài)水果吧，還望師弟師妹們來(lái)照顧我生意。

? ? ? ?網(wǎng)頁(yè)制作與web前端開(kāi)發(fā)

? ? ? ?前端開(kāi)發(fā)工程師是一個(gè)比較新的職業(yè)，在國(guó)內(nèi)乃至國(guó)際上開(kāi)始受到重視的時(shí)間不超過(guò)幾年?；ヂ?lián)網(wǎng)進(jìn)入2.0時(shí)代后，web開(kāi)發(fā)技術(shù)得到了空前的發(fā)展，尤其是前端技術(shù)。近幾年，隨著用戶(hù)對(duì)體驗(yàn)的要求越來(lái)越高，前端開(kāi)發(fā)技術(shù)難度也越來(lái)越大。曾經(jīng)設(shè)計(jì)和制作不分的職位也終于分為UI設(shè)計(jì)師和web前端開(kāi)發(fā)工程師（前端開(kāi)發(fā)師）兩個(gè)職位，分別向藝術(shù)和技術(shù)的方向縱向發(fā)展。

? ? ? ?從技術(shù)體系上講，前端開(kāi)發(fā)師需要掌握和了解的東西非常多，有些大牛用龐雜來(lái)形容。

? ? ? ?幾年前，還沒(méi)有前端開(kāi)發(fā)的時(shí)候我們叫做網(wǎng)頁(yè)制作，主要內(nèi)容都是靜態(tài)的頁(yè)面，用戶(hù)也是以瀏覽為主，而現(xiàn)在發(fā)生了翻天覆地的變化，網(wǎng)頁(yè)不再只是承載單一的文字和圖片，各種富媒體讓頁(yè)面內(nèi)容更加生動(dòng)，更注重用戶(hù)體驗(yàn)。

? ? ? ?以前會(huì)平面設(shè)計(jì)軟件、DW和簡(jiǎn)單的HTML、CSS、JS就可以制作網(wǎng)頁(yè)，現(xiàn)在只掌握這些已經(jīng)遠(yuǎn)遠(yuǎn)不夠了，如果只掌握這些連工作機(jī)會(huì)都很少。無(wú)論是開(kāi)發(fā)難度，還是開(kāi)發(fā)方式，現(xiàn)在的web前端開(kāi)發(fā)都接近傳統(tǒng)的網(wǎng)站后臺(tái)開(kāi)發(fā)，我覺(jué)得比一般的后臺(tái)開(kāi)發(fā)更復(fù)雜。一個(gè)網(wǎng)站或者移動(dòng)應(yīng)用是否專(zhuān)業(yè)、功能是否強(qiáng)大。服務(wù)器端是用J2EE+Oracle組合還是ASP+Access組合，并沒(méi)有太明顯的區(qū)別，但是，前端的用戶(hù)體驗(yàn)卻給了用戶(hù)直觀(guān)的印象。所以現(xiàn)在不僅僅是網(wǎng)頁(yè)制作，而是web前端開(kāi)發(fā)。大部分人認(rèn)為是web前端開(kāi)發(fā)取代了以前的網(wǎng)頁(yè)制作，我認(rèn)為現(xiàn)在網(wǎng)頁(yè)制作和web前端開(kāi)發(fā)的崗位同時(shí)存在。如果僅僅掌握以前網(wǎng)頁(yè)制作的技術(shù)，那么現(xiàn)在還是叫網(wǎng)頁(yè)制作師（我在招聘網(wǎng)頁(yè)上也看到不少網(wǎng)頁(yè)制作師這個(gè)崗位），并不能稱(chēng)之為web前端工程師。

? ? ? ?Web前端開(kāi)發(fā)一般要掌握哪些技術(shù)和具備哪些條件？

? ? ? ?第一、要掌握曾經(jīng)網(wǎng)頁(yè)制作師掌握的基本技術(shù)。如各種頁(yè)面布局，面向?qū)ο缶幊?#xff0c;JS模塊化編程，設(shè)計(jì)模式，前端MVC等等。

? ? ? ?第二、網(wǎng)站性能優(yōu)化，SEO。如盡量減少HTTP請(qǐng)求次數(shù)、cssSprites圖片整合技術(shù)、合并css與js、運(yùn)用CDN技術(shù)。減少DNS查找次數(shù)、避免重定向等。

? ? ? ?第三、要會(huì)UI設(shè)計(jì)。當(dāng)然在一些相對(duì)較小的公司前端工程師也擔(dān)任著UI設(shè)計(jì)的角色。在大公司雖然有專(zhuān)業(yè)的UI設(shè)計(jì)師，但是前端工程師會(huì)UI設(shè)計(jì)能幫助你更準(zhǔn)確的理解設(shè)計(jì)師的意圖，在原型不完整的時(shí)候也能正確的反饋設(shè)計(jì)缺陷，將問(wèn)題阻擋在設(shè)計(jì)的環(huán)節(jié)，會(huì)大大減少UI bug數(shù)量，比如，設(shè)計(jì)師會(huì)給出理想狀態(tài)下的容器樣式，卻往往忽略了文字溢出折行、長(zhǎng)連續(xù)字符、容器寬高是否適應(yīng)內(nèi)容尺寸變化而變化，溢出部分是作截字還是隱藏等諸多細(xì)節(jié)，因?yàn)樵O(shè)計(jì)師不一定懂“邊界值測(cè)試”的道理，而這些問(wèn)題往往在測(cè)試階段才被發(fā)現(xiàn)，所以，如果能在拿到UI設(shè)計(jì)稿時(shí)就提醒設(shè)計(jì)師補(bǔ)充完整這些場(chǎng)景，自然減少測(cè)試回歸次數(shù)。

? ? ? 第四、至少要會(huì)一門(mén)后臺(tái)編程語(yǔ)言。職業(yè)的特殊性決定了我們需要跟后端工作者頻繁的溝通。如果只顧頁(yè)面實(shí)現(xiàn)，不考慮后臺(tái)，寫(xiě)出來(lái)的頁(yè)面也有一部分是廢棄代碼，在后臺(tái)進(jìn)行數(shù)據(jù)交互的時(shí)候用不了。還有一方面就是從招聘信息可以得知，現(xiàn)在幾乎所有公司前端開(kāi)發(fā)崗位都明確要求會(huì)后臺(tái)語(yǔ)言，在實(shí)際工作中可能也要做客戶(hù)端和服務(wù)器端之間的數(shù)據(jù)交互等。

? ? ? 第五、掌握各種瀏覽器兼容解決辦法。國(guó)內(nèi)和國(guó)際主流瀏覽器種類(lèi)多，內(nèi)核不統(tǒng)一，如以Trident為內(nèi)核的IE、以Gecko為內(nèi)核的FireFox、以Presto為內(nèi)核的Opera、以Webkit為內(nèi)核的google chrome和Safari等，這給我們前端開(kāi)發(fā)增加了很多困難，也是大多數(shù)人頭疼的事情，且不說(shuō)目前市面在有這么多的瀏覽器，就僅僅單一的IE系列家族的問(wèn)題也夠多的了，特別是IE6，IE7。下圖是本月對(duì)上個(gè)月全球?yàn)g覽器市場(chǎng)統(tǒng)計(jì)排行，IE瀏覽器用戶(hù)任然超過(guò)百分之五十。盡管2016年1月起，微軟將停止對(duì)舊版IE瀏覽器的支持?！疚④浵嚓P(guān)原新聞鏈接請(qǐng)猛擊這里】?但是我相信最近很多年之內(nèi)IE低版本瀏覽器還是會(huì)占比較大的比例，消亡還需時(shí)日。

? ? ? 第六、必須學(xué)會(huì)運(yùn)用各種工具進(jìn)行輔助開(kāi)發(fā)。

? ? ? 第七、除了掌握技術(shù)層面的知識(shí)，還有掌握理論層面的知識(shí)。包括渲染原理，代碼的可維護(hù)性，組件的易用性，分層語(yǔ)義模板等等。

? ? ? 第八、要有細(xì)心和耐心。和UI設(shè)計(jì)一樣，我們必須精確到每一個(gè)像素，耐心也體現(xiàn)在多方面，比如讓初期開(kāi)發(fā)者頭疼的兼容問(wèn)題，如果編碼不夠規(guī)范，解決兼容問(wèn)題的時(shí)間遠(yuǎn)遠(yuǎn)超過(guò)了頁(yè)面實(shí)現(xiàn)的時(shí)間。

? ? ? 第九、熱愛(ài)并不斷學(xué)習(xí)新技術(shù)。前端幾乎每天都有新技術(shù)產(chǎn)生，從事這一行，在打牢基礎(chǔ)的情況下要不斷學(xué)習(xí)新技術(shù)。包括開(kāi)發(fā)流程部署，預(yù)處理技術(shù)，前端框架(如RequireJS、ReactJS、AngularJS等等)，移動(dòng)終端，標(biāo)準(zhǔn)規(guī)范等。

? ? ??淺談自己的體會(huì)

? ? ? ?與服務(wù)器端語(yǔ)言先慢后快的學(xué)習(xí)曲線(xiàn)相比，前端開(kāi)發(fā)的學(xué)習(xí)曲線(xiàn)是先快后慢。所以現(xiàn)在有很多學(xué)生或者已從事工作了的人都開(kāi)始想涌入web前端開(kāi)發(fā)的潮流，并自學(xué)成“才”，但我知道大多數(shù)人都停留在會(huì)用的階段，因?yàn)橐氤蔀橐幻嬲膚eb前端開(kāi)發(fā)師每前進(jìn)一步都很難。盡管有的人每天都利用工作之余學(xué)習(xí)，卻還是學(xué)不精，于是處于糾結(jié)迷茫的狀態(tài)。另一方面，正如開(kāi)篇所說(shuō)，這還是一個(gè)比較新的職業(yè)，對(duì)一些規(guī)范和最佳實(shí)踐的研究都處于探索階段，一些新的技術(shù)隨時(shí)都會(huì)閃現(xiàn)出來(lái)，例如：瀏覽器大戰(zhàn)也越來(lái)越白熱化，跨瀏覽器兼容方案依然五花八門(mén)，目前我所在的公司一般要求我們兼容到IE7，以前經(jīng)常遇到這種情況，好不容易把IE各個(gè)版本都兼容了，高興之余又發(fā)現(xiàn)在360瀏覽器上出現(xiàn)了bug，沒(méi)辦法，熬夜奮戰(zhàn)唄。

? ? ? ?前端開(kāi)發(fā)工程師是一個(gè)易學(xué)難精的職業(yè)，我們必須深入、系統(tǒng)地學(xué)習(xí)并掌握前端知識(shí)，如果簡(jiǎn)單地自學(xué)一下就能成為web前端工程師，那我想現(xiàn)在市場(chǎng)上也不會(huì)出現(xiàn)高薪找不到前端工程師的情況了。有經(jīng)驗(yàn)的web前端開(kāi)發(fā)工程師都知道，要精通這一行，必須先精通十行。有一些有經(jīng)驗(yàn)的前端工程師，在不斷尋求新的技能上的突破，最明顯的一點(diǎn)體現(xiàn)是，開(kāi)始關(guān)注“底層協(xié)議”，即HTTP、第三方應(yīng)用、系統(tǒng)對(duì)接、制造工具、工作流程等，這時(shí)思考的重點(diǎn)已經(jīng)脫離了“切頁(yè)面”，變?yōu)椤俺龇桨浮?#xff0c;比如要架設(shè)一個(gè)站點(diǎn)，能夠搭建站點(diǎn)框架，預(yù)見(jiàn)站點(diǎn)后續(xù)（前端）開(kāi)發(fā)中的所有風(fēng)險(xiǎn)，并一一給出解決方案。

? ? ? ?說(shuō)說(shuō)半路出家的危與機(jī)，俗話(huà)說(shuō)，隔行入隔山。每個(gè)行業(yè)自有其道，自然不是想做就做。前端技術(shù)領(lǐng)域半路出家者非常多，我們來(lái)分析一下轉(zhuǎn)行的心理。第一，看到前端技術(shù)入門(mén)簡(jiǎn)單、互聯(lián)網(wǎng)對(duì)前端技術(shù)的需求缺口大；第二，前端技術(shù)所見(jiàn)即所得、感覺(jué)學(xué)習(xí)起來(lái)很快；第三，我身邊的某某轉(zhuǎn)行作前端看上去不錯(cuò)、我似乎也可以；第四，我不喜歡我現(xiàn)在做的工作、想換行業(yè)、正好前端技術(shù)上手較快，就選他吧；當(dāng)然還有第五，我的確了解并喜歡做Web前端，為它付出再多都是值得的。

? ? ? ?新進(jìn)入這一行或者轉(zhuǎn)行者的心態(tài)比較容易走兩個(gè)極端，一是只看到新行業(yè)的好，二是只覺(jué)得原工作很糟糕。但不管是什么行業(yè)，對(duì)自己的職業(yè)規(guī)劃的思考都應(yīng)當(dāng)先行一步。進(jìn)入這一行必須先清晰的回答這些問(wèn)題：

? ? ? 1.我能做什么？

? ? ??2.我不能做什么？

? ? ??3.我的優(yōu)勢(shì)是什么？

? ? ??4.我的劣勢(shì)是什么？

? ? ??5.做這一行對(duì)我有何好處？

? ? ??6.做這一行會(huì)讓我付出何種代價(jià)？

? ? ??7.如何定義成功？

? ? ??因?yàn)槊嬖嚨臅r(shí)候一定會(huì)被這些問(wèn)題所挑戰(zhàn)。如果支支吾吾說(shuō)不清楚，要么是對(duì)自己未來(lái)不負(fù)責(zé)任，要么骨子里就是草根一族，習(xí)慣做什么都蜻蜓點(diǎn)水淺嘗輒止，也難讓人信服你進(jìn)入這一行是一個(gè)權(quán)衡再三看起來(lái)合理的選擇。

? ? ?相關(guān)誤區(qū)解釋

? ? ??有人認(rèn)為前端工程師上班不干別的，就是玩，弄點(diǎn)效果，攢兩頁(yè)面，搞點(diǎn)創(chuàng)新。當(dāng)然這個(gè)表述非常輕巧、甚至有調(diào)侃的味道，web前端工作絕對(duì)不是玩那么簡(jiǎn)單的，更不像曾經(jīng)的網(wǎng)頁(yè)制作那么單一，有時(shí)候會(huì)為一些效果的實(shí)現(xiàn)或優(yōu)化，弄得加班加點(diǎn)。上周還因?yàn)榻鉀Q一個(gè)問(wèn)題花了2天的時(shí)間，慚愧啊。所以前端開(kāi)發(fā)是一項(xiàng)很特殊的工作，前端工程師的工作說(shuō)得輕松，看似輕巧，但做起來(lái)絕對(duì)不是那么的簡(jiǎn)單。在開(kāi)發(fā)過(guò)程中涵蓋的東西非常寬廣，既要從技術(shù)的角度來(lái)思考界面的實(shí)現(xiàn)，規(guī)避技術(shù)的死角，又要從用戶(hù)的角度來(lái)思考，怎樣才能更好地接受技術(shù)呈現(xiàn)的枯燥的數(shù)據(jù)，更好的呈現(xiàn)信息。

? ? ??在入行初期，很多人過(guò)于著迷，從而陷入了迷途。比如有人糾結(jié)于是否將dt、dd的樣式清除從reset.css中拿掉，原因是覺(jué)得這兩個(gè)標(biāo)簽的清除樣式會(huì)耗費(fèi)一些渲染性能；或者是否需要將for循環(huán)改為while循環(huán)以提高js執(zhí)行速度。盡管這些考慮看上去是合理的，但并不是性能的瓶頸所在，也就是說(shuō)，你花了很大力氣重構(gòu)的代碼帶來(lái)的頁(yè)面性能提升，往往還不如將兩個(gè)css文件合成一個(gè)帶來(lái)的提升明顯。就好比用一把米尺量東西，沒(méi)必要精確到小數(shù)點(diǎn)后10位，因?yàn)榫_到小數(shù)點(diǎn)后2位就已經(jīng)是不準(zhǔn)確的了。這種技術(shù)誤區(qū)常常讓人撿了芝麻丟了西瓜。

? ? ?對(duì)自己學(xué)習(xí)和工作的要求

? ? ??N.C.Zakas曾經(jīng)勉勵(lì)過(guò)大家，現(xiàn)在成為了我對(duì)自己的要求和對(duì)已結(jié)確定要走Web前端開(kāi)發(fā)方向的人的建議：熱愛(ài)你的工作。熱愛(ài)跨瀏覽器開(kāi)發(fā)帶來(lái)的挑戰(zhàn)、熱愛(ài)互聯(lián)網(wǎng)技術(shù)的種種異端，熱愛(ài)業(yè)內(nèi)的同行，熱愛(ài)你的工具?；ヂ?lián)網(wǎng)發(fā)展太快了，如果你不熱愛(ài)它的話(huà)，不可能跟上它的步伐。這意味著你必須多閱讀，多動(dòng)手，保證自己的才能與日俱增。要為如何編寫(xiě)易于維護(hù)、高質(zhì)量的前端代碼奮斗。下了班也不能閑著，要做一些對(duì)自己有用的事兒?？梢詤⑴c一些開(kāi)源軟件的開(kāi)發(fā)，讀讀好書(shū)，看看牛人的博客。經(jīng)常參加一些會(huì)議，看看別人都在干什么。要想讓自己快速成長(zhǎng)，有很多事兒可以去做，相信付出一定會(huì)有回報(bào)。

? ? ? ? ?這次就分享到這里，一個(gè)上午就這樣過(guò)去了，餓了，該去做中午飯了。關(guān)于前端開(kāi)發(fā)具體相關(guān)技術(shù)和具體怎么學(xué)習(xí)發(fā)展下次我會(huì)繼續(xù)分享。

? ? ? ? ?最后，因時(shí)間倉(cāng)促，資質(zhì)有限，文中表述僅代表個(gè)人觀(guān)點(diǎn)，不準(zhǔn)確的地方還望見(jiàn)諒，歡迎嚴(yán)厲地指正。

總結(jié)

以上是生活随笔為你收集整理的浅谈web前端开发的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。