本文是寫給那些想要入門web前端工程的初學(xué)者瑞佩，高手請(qǐng)路過聚磺，也歡迎高手們拍磚。
先說下web前端工程師的價(jià)值炬丸，目前web產(chǎn)品交互越來越復(fù)雜瘫寝，用戶使用體驗(yàn)和網(wǎng)站前端性能優(yōu)化這些都得靠web前端工程師去做web前端工程師是設(shè)計(jì)加開發(fā)的綜合體，web前端工程師是在開發(fā)人員中最直接面向產(chǎn)品稠炬，面向用戶的設(shè)計(jì)人員焕阿，一個(gè)開發(fā)團(tuán)隊(duì)的成果是要靠web前端工程師去展現(xiàn)，因?yàn)橛脩舨粫?huì)去關(guān)心后臺(tái)的處理有多么強(qiáng)大 首启；在設(shè)計(jì)人員中web前端工程師是直接面向開發(fā)人員的設(shè)計(jì)人員暮屡，向開發(fā)人員以一種計(jì)算機(jī)語言的方式傳遞其設(shè)計(jì)理念，web前端工程師在整個(gè)團(tuán)隊(duì)中是很關(guān)鍵的毅桃。
在我眼中一名合格的web前端工程師必須得掌握HTML褒纲、CSS和JavaScript。只懂其中一個(gè)或兩個(gè)還不行钥飞，你必須對(duì)這三門語言都很熟悉莺掠。也不是說必須對(duì)這三門語言都非常精通，但你至少要能夠運(yùn)用它們完成大多數(shù)任務(wù)读宙，而無需地頻繁地尋求別人的幫助彻秆。
這里還是要推薦下我的web前端學(xué)習(xí)群:867726593，不管你是小白還是大牛论悴，小編我都?xì)g迎掖棉，不定期分享干貨，包括小編自己整理的一份最新的web前端資料和0基礎(chǔ)入門教程膀估，歡迎初學(xué)和進(jìn)階中的小伙伴幔亥。在不忙的時(shí)間我會(huì)給大家解惑。
下面說下我眼中web前端工程師要掌握的基礎(chǔ)知識(shí)和技能：
1 網(wǎng)頁的基本結(jié)構(gòu)（HTML + CSS）
HTML是一種標(biāo)記語言察纯，而不是編程語言帕棉，最基本是標(biāo)簽是<html>和<body>，CSS是用來定義如何顯示HTML元素的饼记。對(duì)HTML+CSS很容易入門香伴，但很多人不夠深入，舉幾個(gè)例子：<meta>標(biāo)簽是作什么用的具则？margin-left與left有什么區(qū)別即纲，應(yīng)該在什么情況下使用？再出個(gè)DIV+CSS布局問題：一個(gè)寬度不確定的DIV里面放三個(gè)水平對(duì)齊的DIV博肋，左右兩個(gè)DIV寬度固定為150px低斋，中間那個(gè)DIV充滿剩余的寬度蜂厅。如果這些問題你目前還不知道，對(duì)那個(gè)布局問題幾分鐘內(nèi)不能解決膊畴，說明你對(duì)HTML+CSS還不夠深入掘猿。
2 瀏覽器是怎么展現(xiàn)網(wǎng)頁的
不同內(nèi)核的瀏覽器對(duì)網(wǎng)頁的渲染是不一樣的，目前瀏覽器都有客戶端調(diào)試工具唇跨，下圖展現(xiàn)一個(gè)google首頁在IE9下的加載細(xì)節(jié)：
在做web性能優(yōu)化時(shí)稠通，對(duì)瀏覽器渲染及細(xì)節(jié)要進(jìn)一步了解。說個(gè)比較有用的知識(shí)點(diǎn)：目前瀏覽器并行加載的上限是6买猖，老版本的瀏覽器會(huì)有所不同改橘。
3 網(wǎng)頁的生命周期
不同的web框架下，頁面的生命周期會(huì)有所不同政勃，大體還是一樣：客戶端發(fā)送GET請(qǐng)求唧龄，服務(wù)器返回相應(yīng)頁面，客戶端完成操作及數(shù)據(jù)奸远，然后POST給服務(wù)器。一定要對(duì)數(shù)據(jù)的傳遞(前臺(tái)與后臺(tái),頁面之間)的細(xì)節(jié)了然于心讽挟。
4 DHTML DOM BOM Javascript AJAX
這是Web前端開發(fā)的重中之中懒叛，大多數(shù)時(shí)候我們都在和他們打交道。說幾個(gè)注意點(diǎn)：javascript是單線程編程耽梅，所謂的javascript異步編程只不過是計(jì)劃在未來的某個(gè)時(shí)間上執(zhí)行相應(yīng)事件而已薛窥；詳細(xì)了解DOM事件機(jī)制；客戶端存儲(chǔ)（HTML5中增加了localStorage和sessionStorage）眼姐；javascript不像服務(wù)器端語言那樣嚴(yán)謹(jǐn)诅迷，調(diào)試不是很方便，所以一開始要養(yǎng)成嚴(yán)謹(jǐn)?shù)膉avascript編輯習(xí)慣众旗；javascript很強(qiáng)大很靈活罢杉，不要幻想短時(shí)間內(nèi)熟練（更別說精通）它，并寫些框架贡歧、類庫滩租，初始階段還是先用熟練已成熟的框架（比如jquery）當(dāng)入門；一定要熟練使用客戶端調(diào)試工具利朵。
5 服務(wù)器端語言開發(fā)經(jīng)驗(yàn)律想，PS切圖技術(shù)
Web前端開發(fā)介于設(shè)計(jì)與開發(fā)中間，所以兩端的東西都得懂點(diǎn)绍弟。編輯語言是相通的技即，之前編寫過服務(wù)器語言，對(duì)學(xué)習(xí)javascript是十分有益的樟遣，從圖片轉(zhuǎn)成靜態(tài)HTML頁面而叼，少不了PS切圖技術(shù)身笤。
6 瀏覽器的兼容性
由于歷史原因 ，瀏覽器的兼容性一直都折磨web前端工程師的地方澈歉，雖然有W3組織展鸡，并制定了一些規(guī)范，雖然瀏覽器產(chǎn)商都正在努力改進(jìn)并接近其規(guī)范埃难，但現(xiàn)實(shí)網(wǎng)絡(luò)環(huán)境中各種內(nèi)核莹弊、各種版本的瀏覽器都有一席之地。解決瀏覽器兼容性靠經(jīng)驗(yàn)積累涡尘，可喜的事這方面資料網(wǎng)上有很多忍弛。
7 快速學(xué)習(xí)能力和主動(dòng)學(xué)習(xí)意愿
web前端的發(fā)展很快，從事這一行業(yè)一定要有快速學(xué)習(xí)能力和主動(dòng)學(xué)習(xí)意愿考抄，這樣才能適應(yīng)web產(chǎn)品的要求细疚。在web前端領(lǐng)域沒有絕對(duì)的是與非,解決一個(gè)問題的方法有很多，但我們要找到一個(gè)更合適的方法川梅，找到一個(gè)更合適的方法需要經(jīng)驗(yàn)作積累疯兼，總之web前端入門容易，想熟練很難贫途，需要更多的主動(dòng)學(xué)習(xí)意愿吧彪。
8 良好的溝通能力
優(yōu)秀的前端工程師需要具備良好的溝通能力，因?yàn)槟愕墓ぷ髋c很多人的工作息息相關(guān)丢早，比如項(xiàng)目經(jīng)理姨裸、設(shè)計(jì)師、最終用戶怨酝、開發(fā)工程師傀缩，前端工程師位于這幾類人的交匯點(diǎn)上，這些角色的要求你都得照顧好农猬，平衡這四類人的需求赡艰，拿出一個(gè)比較合適的方案。由此可見溝通能力對(duì)前端工程師要求更高盛险。
最后提供一些好的學(xué)習(xí)資料：
1. 《javascript權(quán)威指南》
2. 《javascript+DOM編程藝術(shù)》
3. 《javascript高級(jí)程序設(shè)計(jì)》
web前端學(xué)習(xí)群：867726593
知識(shí)分享到這里就結(jié)束了瞄摊，學(xué)習(xí)web前端的朋友可以來我的群，里面每天都有對(duì)應(yīng)資料學(xué)習(xí)：680847368苦掘，歡迎初學(xué)和進(jìn)階中的小伙伴换帜。
