一、基本知識(shí) 我們生活在網(wǎng)際網(wǎng)路時(shí)代，你想知道的任何事情幾乎都能在15分鐘內(nèi)找到相關(guān)資訊?？墒牵苷业劫Y訊并不等于你會(huì)使用它。我認(rèn)為所有前端工程師至少都應(yīng) 該掌握某些基本的知識(shí)，才能有效地完成自己的工作。如果一遇到問題，就停下工作上網(wǎng)四處搜尋解決方案，怎么可能保證按期完成工作呢？聽聽，還有誰在說“我 不知道，但我可以上網(wǎng)搜到?！闭?qǐng)這些同學(xué)把手舉起來，讓大家認(rèn)識(shí)一下（immediately raises a flag for me.）。下面我列出一些基本的知識(shí)點(diǎn)，這些都是我認(rèn)為一名前端工程師（無論工作年頭長(zhǎng)短）在沒有任何外來幫助的情況應(yīng)該知道的。 [list][*] DOM結(jié)構(gòu)——兩個(gè)節(jié)點(diǎn)之間可能存在哪些關(guān)系以及如何在節(jié)點(diǎn)之間任意移動(dòng)。 [*] DOM操作——怎樣新增、移除、移動(dòng)、復(fù)制、建立和查詢節(jié)點(diǎn)。 [*] 事件——怎樣使用事件以及IE和DOM事件模型之間存在哪些主要差別。 [*] XMLHttpRequest——這是什么、怎樣完整地執(zhí)行一次GET請(qǐng)求、怎樣檢測(cè)錯(cuò)誤。 [*] 嚴(yán)格模式與混雜模式——如何觸發(fā)這兩種模式，區(qū)分它們有何意義。 [*] 盒模型——外邊距、內(nèi)邊距和邊框之間的關(guān)系，IE 8以下版本的瀏覽器中的盒模型有什么不同。 [*] 塊級(jí)元素與行內(nèi)元素——怎么用CSS控制它們、它們?cè)鯓佑绊懼車脑匾约澳阌X得應(yīng)該如何定義它們的樣式。 [*] 浮動(dòng)元素——怎么使用它們、它們有什么問題以及怎么解決這些問題。 [*] HTML與XHTML——二者有什么區(qū)別，你覺得應(yīng)該使用哪一個(gè)并說出理由。 [*] JSON——它是什么、為什么應(yīng)該使用它、到底該怎么使用它，說出實(shí)現(xiàn)細(xì)節(jié)來。 [/list] 重申一下，上述這些知識(shí)點(diǎn)都應(yīng)該是你應(yīng)該“想都不用想”的東西。我一開始問的所有問題都是想摸清你對(duì)所有這些領(lǐng)域知識(shí)的掌握程度。雖然上面列出的這些知識(shí)點(diǎn)并沒有面面俱到，但我覺得你至少應(yīng)該掌握這些，才有可能跟我坐到一間辦公室里來。 二、少量提問 我非常贊同面試者問的問題越少越好。反復(fù)問應(yīng)聘者各種問題既不公平，也很無聊。我在任何一次面試中，通常只問三個(gè)大問題，但每個(gè)問題又會(huì)涉及我所能想到的多個(gè)方面。回答每個(gè)大問題一般要經(jīng)過幾個(gè)步驟，這樣我就可以在每個(gè)步驟中穿插著問一些小問題。比如說：

HR一般不會(huì)面試太深的問題，主要是了解一下你之前的工作經(jīng)歷，更多的是你自己描述，中間可能會(huì)問一些初級(jí)的問題，比如，你為什么從上一家單位離職等類似問題。

這樣的布局用絕對(duì)定位實(shí)現(xiàn)最合適，ABC的外層用相對(duì)定位，里邊各列用絕對(duì)定位就可以。至于CBA且B寬度自適應(yīng)，還是用絕對(duì)定位，但只定位C,A分部到兩側(cè)，中間的列margin設(shè)成左右列的寬度就可以。

web前端開發(fā)工程師想要硬氣的跳槽，起碼應(yīng)該達(dá)到以下幾點(diǎn)： 1.掌握扎實(shí)的技術(shù)基礎(chǔ)， 需要掌握技術(shù)包括：HTML、CSS、JavaScript; HTML是Web程式設(shè)計(jì)的基礎(chǔ)，HTML也是一種規(guī)范，一種標(biāo)準(zhǔn)，它通過標(biāo)記符號(hào)來標(biāo)記要顯示的網(wǎng)頁(yè)中的各個(gè)部分。網(wǎng)頁(yè)檔案本身是一種文字檔案，通過在文字檔案中新增標(biāo)記符，可以告訴瀏覽器如何顯示其中的內(nèi)容。 維護(hù)大型的CSS程式碼庫(kù)并非易事，特別是那些隨意散漫未經(jīng)組織的CSS程式碼極易變成一團(tuán)亂麻，所以，應(yīng)該掌握CSS命名規(guī)范，來幫助開發(fā)者編寫優(yōu)質(zhì)的程式碼。 2.深入理解前端工程化和元件開發(fā); 需要熟悉web前端框架—— React、等， React為我們提供了直接易用的，以狀態(tài)為核心的前端應(yīng)用開發(fā)方式，前端工程師應(yīng)該會(huì)分析React內(nèi)部工作原理，討論React中簡(jiǎn)單元件、類元件等渲染流程。 單元測(cè)試是應(yīng)用開發(fā)中不可或缺的部分，日常開發(fā)中會(huì)用到的單元測(cè)試的例子，所以應(yīng)該掌握。 3.熟練掌握Web開發(fā)相關(guān)知識(shí) 至少熟悉一門后端語言，例如、Java、Go等; 內(nèi)部原理視非常重要的，應(yīng)該明白的主程序是如何啟動(dòng)的、如何載入內(nèi)建模組、os包如何實(shí)現(xiàn)等等。 4.對(duì)技術(shù)有熱情，有一定前端架構(gòu)能力或者技術(shù)深度;具備團(tuán)隊(duì)合作意識(shí)強(qiáng)，能夠多團(tuán)隊(duì)協(xié)作開發(fā);具備企業(yè)級(jí)大型前端應(yīng)用開發(fā)經(jīng)驗(yàn)更佳。

前端工程師需要懂得設(shè)計(jì)類程式碼和js，有需要了解一些后臺(tái)語言，例如PHP等。

1.入門階段：能夠解決一些問題的水平。有一定的基礎(chǔ)(比如最常見的HTML標(biāo)簽及其屬性、事件、方法;最常見的CSS屬性;基礎(chǔ)的JavaScript程式設(shè)計(jì)能力)，能夠完成一些簡(jiǎn)單的Web前端研發(fā)需求。 2.進(jìn)階階段：將JavaScript、HTML、CSS之類的編碼幫助手冊(cè)里的每個(gè)方法/屬性都通讀幾遍!只有將基礎(chǔ)打好，以后的路才能走的順暢。 3.入室：最強(qiáng)程式碼，知道所有能夠解決需求的各種方案，能夠選擇使用最優(yōu)秀的方案滿足需求。這個(gè)級(jí)別基本上產(chǎn)品開發(fā)程式設(shè)計(jì)中的程式碼主力。程式設(shè)計(jì)師應(yīng)該能夠肯定的回答：對(duì)于這個(gè)需求而言，我的程式碼就是最優(yōu)秀的程式碼。 4.注重細(xì)節(jié)，注意那些當(dāng)前需求里沒有明文給出的細(xì)節(jié)：程式碼效能的差異、執(zhí)行平臺(tái)(瀏覽器)的差異、需求的隱性擴(kuò)充套件、程式碼的向后相容等等。

web前端工程師是不參與任何的設(shè)計(jì)，直接將網(wǎng)站美工制作的網(wǎng)站效果圖使用ps按照效果圖進(jìn)行切片并使用、css、js等程式碼進(jìn)行網(wǎng)頁(yè)的制作，最終編寫出符合w3c標(biāo)準(zhǔn)的相容各個(gè)主流瀏覽器的靜態(tài)頁(yè)面，同時(shí)還需要按照后臺(tái)開發(fā)人員的要求留下一些后臺(tái)資料的介面。所以說網(wǎng)站前端工程師更多的是程式設(shè)計(jì)而不是設(shè)計(jì)。 UI設(shè)計(jì)師一般是學(xué)美術(shù)或者設(shè)計(jì)出身，精通photoshop、AI、AE等平面設(shè)計(jì)工具，其在網(wǎng)站開發(fā)過程的中的職責(zé)就是按照客戶或者公司的需求設(shè)計(jì)出符合客戶需求和介面或者顏色符合大眾視覺的網(wǎng)站效果，如根據(jù)不同行業(yè)的需求設(shè)計(jì)顏色、設(shè)計(jì)介面風(fēng)格等，其工作的最后成果就是網(wǎng)站的效果圖。

less和sass什么時(shí)候?qū)W都行，1,2天就能學(xué)會(huì)。這個(gè)不著急，沒有什么承上啟下的作用，可以單獨(dú)拿出來學(xué)。 bootstrap就是一個(gè)框架，把最主要的柵格系統(tǒng)看看就好。其他的大概了解能干啥就行，很多公司，是不讓用bootstrap的，而是用原始碼自己寫。這個(gè)用一天的時(shí)間沒啥問題。 和angular比較重要，如果學(xué)會(huì)，算是上了一個(gè)臺(tái)階了。所以重點(diǎn)說說這個(gè)。 angular屬于mvvm框架，一開始覺得angular挺復(fù)雜的，所以想學(xué)一個(gè)簡(jiǎn)單的，輕量級(jí)的，所以決定先學(xué)vue。但是在了解的過程中發(fā)現(xiàn)，很多的專業(yè)名詞，沒聽過，或者理解不透。所以又開始從頭學(xué)習(xí)。在學(xué)習(xí)的過程中又開始迷茫，發(fā)現(xiàn)了很多JS不懂的地方。 所以，又開始深入研究js的dom，函式，ajax，陣列等?？傊昧撕荛L(zhǎng)的時(shí)間，浪費(fèi)了很長(zhǎng)時(shí)間。 最后總結(jié)一下啊。其實(shí)，沒必要鉆那么多牛角尖。 先做著vue的例子，不懂的地方，直接略過，很多時(shí)候，不理解的不懂的東西，用著用著，突然就能明白。照貓畫虎先把VUE的例子跟著做一遍之后，同時(shí)梳理一下涉及到的JS知識(shí)點(diǎn)。能自己用vue做出幾個(gè)小成品的時(shí)候，開始結(jié)合js研究。之后再去涉及angular。 angular差不多有個(gè)大概了解的時(shí)候，反過頭接著學(xué)vue，你會(huì)發(fā)現(xiàn)，又會(huì)發(fā)現(xiàn)很多新東西。 web前端這個(gè)東西特別有意思，當(dāng)你達(dá)到一個(gè)高度，返回來再看以前的技術(shù)，會(huì)發(fā)現(xiàn)，哎呀，竟然又能發(fā)現(xiàn)新大陸。

培訓(xùn)學(xué)校很多，沒有具體的衡量標(biāo)準(zhǔn)的。但是可以從幾方面去選擇： 1 有很多優(yōu)秀導(dǎo)師的 2 培養(yǎng)出很多優(yōu)秀學(xué)員的 3 只做培訓(xùn)的，沒有做其他的 4 做的比較久的。

建議找全程面授課程的地方學(xué)習(xí)，課程體系很重要，現(xiàn)在企業(yè)在用人方面講究全棧的前端工程師人才，所在在課程選擇上要慎重，學(xué)習(xí)內(nèi)容要基于HTML5，要包含pc端+移動(dòng)端+后端。這要才能學(xué)的系統(tǒng)，就業(yè)上才會(huì)有所保障。