A. 面試Web前端需要注意什麼會面試哪些問題
將這些問題作為參考。
希望你的面試官有點經驗，不會用以下這樣的問題開場。以防萬一，還是准備一些答案。
1.為什麼選擇程序員這個職業生涯?
2.截至目前，你所從事的項目中最喜歡的是哪個?
3.描述一下你夢想中的研發項目。
另外一些面試官會問一些通用的技術問題，來測試你的技術能力。有可能部分人不知道這些問題是什麼意思，而僅僅是在考察你的能力/競爭力。基於面試官的技術能力級別的不同，你的答案也會有所不同。這些問題簡單易答，因此把這些問題記下來。
1.描述一下創建一個新網頁的過程
2.怎樣減少頁面載入時間?
3.標准和標准體(standards
and
standards
bodies)為什麼重要?
4.你使用怎樣一個過程來組織代碼?
5.你喜歡用什麼工具來測試代碼性能?[page]
既然你從事前端工作，理解CSS會非常重要。因此這里為你准備了一些常見的CSS問題。這是展示你知識儲備的重要開始。這些並不是最尖銳或者重要的問題，如果不能回答出來，將對你很不利。
1.CSS
中的
resetting
和
normalizing
之間的區別有哪些?
2.什麼是floats，它是如何工作的?
3.absolute、relative、fixed
和
static
定位的區別是什麼?
4.解釋visiblity
hidden和display
none之間的區別
5.你是如何修復特定瀏覽器默認樣式的問題?
6.你是否用過網格系統?目的是?
7.如果計算CSS權重?
8.解釋如何優化CSS選擇器。
9.為什麼需要使用預編譯器?
10.你是如何測試網站的跨瀏覽器兼容性?
現在我們最基本的任務完成了。誰都能死記硬背這些答案來應付以上問題。即使是新手前端開發者也能出色地回答大部分問題。然而如果想真正讓你的面試官印象深刻並證明你的功底深厚，就把下面這些問題牢記在心。
1.前端開發的框架是什麼?
2.響應式web
app和原生應用程序的區別是什麼?
3.原生app相對web
app的優點是什麼?
4.客戶端和伺服器端開發的區別是什麼?
5.什麼是SASS和LESS?它們是如何工作的?
面試官會更多關注你是如何表達對這些問題的解釋。他們會追問支持你的答案的工作案例。前面的問題你可能可以通過記憶而過關，你可能還會遇到這些問題的擴展，但這些答案的深度，將讓你與眾不同。通過你參與過的實際項目，來展示你的思考過程。
B. 前端hr面試常問的問題
面試其實就是一個不斷選擇與被選擇的過程(不知道說的對不對)。不同公司的面試方式都有所不同，大多數人都有過多次面試的經歷，前端面試也不外乎那麼一些啦(好像有些廢話的感覺)。
面試之前的小故事
HR會打電話過來我是××公司的，在××上看到你投到我們公司的簡歷，問你何時候有空約一個唄，然後說就星期*吧，既然都打電話請我面試了，好吧，那就約一個!
然後有些人會精心准備，不停刷面試題，整夜整夜的看著HTML/JS/CSS知識點，還有那些最新的、時髦的技術，看看到時候能不能唬住面試官;而有些人對自己胸有成竹，哥那麼多年的前端經驗了，啥項目沒有經歷過，不就一個面試，怕啥呢。
很快或者很慢的來到那天。你打扮的清清爽爽漂漂亮亮的，打扮的好會有加分不，沒錯，第一印象也是挺重要的。途中有些人可能會還一直想著面試官會問啥題目呢，那啥**屬性是什麼來著呢，再次拿出手機默默的看起資料;有些人可能就會想著公司不知道妹子多不多漂亮不呢，環境和福利不知道咋樣，最好別碰到傻逼一樣的面試官哎，不然這以後咋相處好呢。
來到公司，大小公司大家都見多了嘛，也是得看發展是吧，我們也不是膚淺的人，見到前台妹妹，喲，還不錯哦。領你進會議室里，讓你稍等一下，她去通知面試官，過了一會兒，不是面試官進來，那就是前台妹妹給您送來一杯水。面試官踱步向前，咦~，我是繼續坐著呢，還是站著呢，還是站起來顯禮貌一些嗯。
給面試的一般會是Team Leader或者非常資深的工程師。首先會讓你自我介紹下，然後巴拉巴拉介紹自己，途中或者聊到面試官喜歡的`部分那就會中斷問幾個問題吧，介紹完自己，就進入正式的戰鬥了吧，一般會有2-3輪的回合。遇知戰斗詳情，請聽下回分解。
哈哈， 開玩笑。以上瞎編胡造，如有雷同，純屬巧合。
這里就只談談前端技術的戰斗回合吧，寫的不好，請多見諒。
普通型
面試中問題會比較的零碎，html/js/css肯定都會有涉及。知識點不會有太大的規律，可能幾個公司面試下來你遇到的問題一個都不帶重復的。哎，前端的知識點就是乍一看深似海，仔細一看深似黑洞啊。問題好的話，一方面考察了面試人對前端接觸的廣度，深度的話也可以從中接觸到一些。因為面試的時間有限，其實也非常考驗面試官對一個人的洞察能力。
一般如果不是應屆生的話，也就是會跟你交流你之前的項目，你擔當的角色，你遇到的難題，怎麼解決問題，用的框架，與其他工程師的交流溝通協作等等。 這些其實你心裡肯定是有答案的(可能也有懵逼的)，就看你的表達，能不能對上面試官的胃口。
進階型
除了基本的問題，面試中會有一些明顯設計過的題目。針對某幾個知識點，或讓你手寫代碼，或讓你提供演算法或思路。如果之前沒有遇到過這類問題的話其實一下子真的挺難回答，或者直接懵逼了，或者回答不出面試官滿意的答案。這其實對工程師的要求也是比較的高，不能只是單純的切切頁面，用用插件，需要對某一類問題或者模式或者演算法有深入的了解，對問題的解決思路有很好的把握。
演算法可能不是前端工程師的長項，但作為優秀的工程師，對演算法的了解應該會只深不淺。
這種面試的題目既提現了公司對面試者的要求，也相對而言的會有所體現公司的水平。
出題型
題目比較的綜合，會通過郵件發給你，或者有專門的頁面提供，在面試之前讓你2-3天的時間做完。題目可能是很有名的某一類交互，或游戲，或頁面，或公司自己出的一類小東西。
因為非當場面試，所有有比較充足的時間來思考，來寫一些代碼。一般都會完成，所以其實比較的關注點就是對代碼的質量，通過代碼來考察面試者的思路以及代碼**慣等等。
其未知性也比較多，可能因為有些東西可能沒法通過代碼來傳遞，溝通，其他的思路，或者題目的缺陷等等。所以這只是面試途中的一個小部分，大多數人其實都會能做的很好。
直接上機型
還有的就會直接給你某一個交互，或者一張靜態頁面，或者一個布局等等，直接給你台電腦讓你當場寫出來。寫完之後再有所交流，說說自己的想法或者接著談其他的。
當你寫代碼時候，其實暴露的東西也挺多的。你寫的**慣，思路清晰不清晰，對代碼的熟悉程度，可能你平時都是ctrl C + V的，這時候你咋辦呢。
這個可能遇到的比較少，但也會是有的。
結束語
許多面試可能都會結合以上的幾種類型，多方面的考察面試者，其實，大家都懂的。
C. 前端面試會提問到哪些
在面試前端的過程中，有些問題是經常會被提問到的
一、基礎篇
1. 在不使用第三個變數的情況下，如何調換a與b的值？
2. px與em的區別
3. 簡述一下盒模型
4. 頁面導入樣式時，使用link和@import有什麼區別？
5. 簡述一下事件代理
二、HTML常見題目
01、Doctype作用？嚴格模式與混雜模式如何區分？它們有何意義？
02、HTML5為什麼只需要寫？
03、行內元素有哪些？塊級元素有哪些？空(void)元素有哪些？
04、頁面導入樣式時，使用link和@import有什麼區別？
05、介紹一下你對瀏覽器內核的理解？
06、常見的瀏覽器內核有哪些？
07、html5有哪些新特性、移除了哪些元素？如何處理HTML5新標簽的瀏覽器兼容問題？
08、如何區分HTML和HTML5？
09、簡述一下你對HTML語義化的理解？
10、HTML5的離線儲存怎麼使用，工作原理能不能解釋一下？
三、CSS類的題目
01、介紹一下標準的CSS的盒子模型？與低版本IE的盒子模型有什麼不同的？
02、CSS選擇符有哪些？哪些屬性可以繼承？
03、CSS優先順序演算法如何計算？
04、CSS3新增偽類有哪些？
05、如何居中div？如何居中一個浮動元素？如何讓絕對定位的div居中？
06、display有哪些值？說明他們的作用。
07、position的值relative和absolute定位原點是？
08、CSS3有哪些新特性？
09、請解釋一下CSS3的Flexbox(彈性盒布局模型),以及適用場景？
10、用純CSS創建一個三角形的原理是什麼？
四、JavaScript類的題目
01、JavaScript中this是如何工作的
02、請解釋原型繼承的原理。
03、什麼是閉包(closure)，如何使用它，為什麼要使用它？
04、.call 和.apply的區別是什麼？
05、請指出JavaScript 宿主對象(host objects) 和原生對象(native objects) 的區別？
06、請指出以下代碼的區別：function Person(){}、var person = Person()、var person = new Person()？
07、請解釋變數聲明提升(hoisting)。
08、什麼是 「use strict」; ？ 使用它的好處和壞處分別是什麼？
09、什麼是事件循環 (event loop)？
10、請解釋同步 (synchronous) 和非同步 (asynchronous) 函數的區別。
五、開發及性能優化類題目
01、如何規避javascript多人開發函數重名問題？
02、請說出三種減低頁面載入時間的方法.
03、說說你所了解到的Web攻擊技術。
04、說說你說了解的前端性能優化方法？
05、前端開發中，如何優化圖像？圖像格式的區別？
06、瀏覽器是如何渲染頁面的？
07、頁面重構怎麼操作？
08、什麼叫優雅降級和漸進增強？
09、前端需要注意哪些SEO？如何做SEO優化？
10、平時如何管理你的項目？
D. 前端面試中遇到的問題總結
}
.container div {
width: 100px;
height: 100px;
background-color: pink; /* 方便看效果 /
}
單行文本：
text-align:center/line-height等於行高
未知容器的寬高，利用 transform 屬性：
div {
position: absolute; / 相對定位或絕對定位均可 /
width:500px;
height:300px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: pink; / 方便看效果 */
}
缺點：不兼容ie8
4.表格布局(display:table-cell)
優點：寫法容易 如果不指定高度，內容會自動撐開
缺點：如果超出表格高度，其餘表格也需要同時調整高度
5.網格布局
display: grid;
grid-template-rows: 100px;
grid-template-columns: 300px auto 300px;
缺點：需要指定高度
一、左邊固定，右邊自適應的布局
二、右邊固定，左邊自適應的布局
（1）閉包的形式
(2)vue2的形式
function creatAry(m, n) {
var ary = [];
function aryPush(m, n) {
if (ary.length == m)return ary;//遞歸結束條件
ary.push(n);
return aryPush(m, n);//這里必須要寫return，否則輸出為undefined
}
return (aryPush(m, n))
}
console.log(creatAry(3, 4));
*json數組轉object對象
*vue ajax通信
E. hr如何面試web前端工程師，該問哪些技術問題
hr如何面試web前端工程師，該問哪些技術問題
一、基本知識
我們生活在網際網路時代，你想知道的任何事情幾乎都能在15分鍾內找到相關資訊。可是，能找到資訊並不等於你會使用它。我認為所有前端工程師至少都應 該掌握某些基本的知識，才能有效地完成自己的工作。如果一遇到問題，就停下工作上網四處搜尋解決方案，怎麼可能保證按期完成工作呢？聽聽，還有誰在說「我 不知道，但我可以上網搜到。」請這些同學把手舉起來，讓大家認識一下（immediately raises a flag for me.）。下面我列出一些基本的知識點，這些都是我認為一名前端工程師（無論工作年頭長短）在沒有任何外來幫助的情況應該知道的。
[list][*]
DOM結構——兩個節點之間可能存在哪些關系以及如何在節點之間任意移動。
[*]
DOM操作——怎樣新增、移除、移動、復制、建立和查詢節點。
[*]
事件——怎樣使用事件以及IE和DOM事件模型之間存在哪些主要差別。
[*]
XMLHttpRequest——這是什麼、怎樣完整地執行一次GET請求、怎樣檢測錯誤。
[*]
嚴格模式與混雜模式——如何觸發這兩種模式，區分它們有何意義。
[*]
盒模型——外邊距、內邊距和邊框之間的關系，IE 8以下版本的瀏覽器中的盒模型有什麼不同。
[*]
塊級元素與行內元素——怎麼用CSS控制它們、它們怎樣影響周圍的元素以及你覺得應該如何定義它們的樣式。
[*]
浮動元素——怎麼使用它們、它們有什麼問題以及怎麼解決這些問題。
[*]
HTML與XHTML——二者有什麼區別，你覺得應該使用哪一個並說出理由。
[*]
JSON——它是什麼、為什麼應該使用它、到底該怎麼使用它，說出實現細節來。
[/list]
重申一下，上述這些知識點都應該是你應該「想都不用想」的東西。我一開始問的所有問題都是想摸清你對所有這些領域知識的掌握程度。雖然上面列出的這些知識點並沒有面面俱到，但我覺得你至少應該掌握這些，才有可能跟我坐到一間辦公室里來。
二、少量提問
我非常贊同面試者問的問題越少越好。反復問應聘者各種問題既不公平，也很無聊。我在任何一次面試中，通常只問三個大問題，但每個問題又會涉及我所能想到的多個方面。回答每個大問題一般要經過幾個步驟，這樣我就可以在每個步驟中穿插著問一些小問題。比如說：
這個問題牽扯到一組我想要考察的基本知識點：DOM結構、DOM操作、事件處理、XHR和JSON。如果我要求你對換一種處理股票價格的方式，或者 讓你在頁面中顯示其他資訊，就可以把更多的知識點包括進來。對於經驗比較豐富應聘者，我也可以自如地擴充套件要考察的知識范圍，最簡單像JOSN與XML的區 別、安全問題、容量問題，等等。
我還希望應聘者給出的任何解決方案中都不要使用庫。我想看到最原生態的程式碼，你就當頁面中沒有包含任何庫。你說你對哪個庫了解多少多少，但我不能把 關於庫的知識作為評判能力的因素，因為庫是會隨時間變化的。我需要的是真正理解庫背後的機制，特別是能夠徒手寫出一個自己的庫的人。
三、解決問題
做為一名前端工程師，最值得高興的事莫過於解決同一個問題會有很多種不同的方法，而你要做的就是找出最合適的方法來。我在提問的時候，經常會在應聘 者解釋完一種方法後問他們還有沒有第二種方法。此時我會跟他們說，假設你的這個方法由於種種原因被否決了，那麼你還能不能給出另一種方法。這樣做可以達到 兩個目的。
首先，可以測試出他們是否在毫無意義地復述書本中的東西。不能不承認，某些人確實有過目不忘的天賦，聽他們在那裡滔滔不絕地講，你會覺得他們什麼都 明白。可是，只要一跟這些人談到怎麼查詢方案無效的原因，以及能否拿出一個新方案來，他們往往就傻眼了。這時候，如果我聽到「我不明白這個方案為什麼不夠 好」之類的反問，心裡立刻就明白我的問題已經超出了他們的能力范圍，而他們只是想拿自己死記硬背的結論來矇混過關。
其次，可以測試出他們已經掌握的（還是那句話，「想都不用想」）瀏覽器技術知識。如果他們對瀏覽器平台的核心知識有較好的理解，想出解決同一問題的不同方案根本沒有那麼難。
對一名前端工程師來說，這絕對是最重要的能力。前端工程師在工作中遇到本該如此卻並未如此的難題（說你啦，IE6），應該說是一件很平常的事。一個方案無效就無計可施的人，做不了前端工程師。
考核應聘者解決問題能力的另一層原因，與我的個人喜好有關。在搞清楚應聘者知道什麼不知道什麼之後，我就會想著問一個他們知識領域之外的問題。這樣 做的目的，就是想看看他們怎樣運用已有的知識解決新問題。在解決問題的每一步，我也准備了一些提示，以防有人會卡殼打艮（在我面前15分鍾一言不發，對我 評價這個人毫無幫助）。我真正感興趣的，是他們能夠從上一步前進到下一步。我希望看到一個人就在我眼前學到新知識。
注意：所有問題都與瀏覽器技術相關。我不相信出幾道抽象的邏輯題，就能夠考出某人解決Web技術問題的能力。在我看來，這無異於讓素描大師畫肖像（或者讓劉翔跟博爾特同場競技），沒有意義，也得不到任何有價值的資訊。
HR一般不會面試太深的問題，主要是了解一下你之前的工作經歷，更多的是你自己描述，中間可能會問一些初級的問題，比如，你為什麼從上一家單位離職等類似問題。
一道web前端工程師面試題，求解答。
這樣的布局用絕對定位實現最合適，ABC的外層用相對定位，里邊各列用絕對定位就可以。至於CBA且B寬度自適應，還是用絕對定位，但只定位C,A分部到兩側，中間的列margin設成左右列的寬度就可以。
web前端工程師如何才能硬氣的跳槽？
web前端開發工程師想要硬氣的跳槽，起碼應該達到以下幾點：
1.掌握扎實的技術基礎，
需要掌握技術包括：HTML、CSS、JavaScript;
HTML是Web程式設計的基礎，HTML也是一種規范，一種標准，它通過標記符號來標記要顯示的網頁中的各個部分。網頁檔案本身是一種文字檔案，通過在文字檔案中新增標記符，可以告訴瀏覽器如何顯示其中的內容。
維護大型的CSS程式碼庫並非易事，特別是那些隨意散漫未經組織的CSS程式碼極易變成一團亂麻，所以，應該掌握CSS命名規范，來幫助開發者編寫優質的程式碼。
2.深入理解前端工程化和元件開發;
需要熟悉web前端框架—— React、Vue.js等，
React為我們提供了直接易用的，以狀態為核心的前端應用開發方式，前端工程師應該會分析React內部工作原理，討論React中簡單元件、類元件等渲染流程。
Vue.js單元測試是應用開發中不可或缺的部分，日常開發中會用到的Vue.js單元測試的例子，所以應該掌握。
3.熟練掌握Web開發相關知識
至少熟悉一門後端語言，例如Node.js、Java、Go等;
Node.js內部原理視非常重要的，應該明白Node.js的主程序是如何啟動的、如何載入內建模組、os包如何實現等等。
4.對技術有熱情，有一定前端架構能力或者技術深度;具備團隊合作意識強，能夠多團隊協作開發;具備企業級大型前端應用開發經驗更佳。
如何識別一個人是web前端工程師
前端工程師需要懂得設計類程式碼和js，有需要了解一些後台語言，例如PHP等。
如何實現成為web前端工程師的夢想
1.入門階段：能夠解決一些問題的水平。有一定的基礎(比如最常見的HTML標簽及其屬性、事件、方法;最常見的CSS屬性;基礎的JavaScript程式設計能力)，能夠完成一些簡單的Web前端研發需求。
2.進階階段：將JavaScript、HTML、CSS之類的編碼幫助手冊里的每個方法/屬性都通讀幾遍!只有將基礎打好，以後的路才能走的順暢。
3.入室：最強程式碼，知道所有能夠解決需求的各種方案，能夠選擇使用最優秀的方案滿足需求。這個級別基本上產品開發程式設計中的程式碼主力。程式設計師應該能夠肯定的回答：對於這個需求而言，我的程式碼就是最優秀的程式碼。
4.注重細節，注意那些當前需求里沒有明文給出的細節：程式碼效能的差異、執行平台(瀏覽器)的差異、需求的隱性擴充套件、程式碼的向後相容等等。
如何了解web前端工程師和UI設計師
web前端工程師是不參與任何的設計，直接將網站美工製作的網站效果圖使用ps按照效果圖進行切片並使用、css、js等程式碼進行網頁的製作，最終編寫出符合w3c標準的相容各個主流瀏覽器的靜態頁面，同時還需要按照後台開發人員的要求留下一些後台資料的介面。所以說網站前端工程師更多的是程式設計而不是設計。
UI設計師一般是學美術或者設計出身，精通photoshop、AI、AE等平面設計工具，其在網站開發過程的中的職責就是按照客戶或者公司的需求設計出符合客戶需求和介面或者顏色符合大眾視覺的網站效果，如根據不同行業的需求設計顏色、設計介面風格等，其工作的最後成果就是網站的效果圖。
web前端工程師進階學習路線如何走
less和sass什麼時候學都行，1,2天就能學會。這個不著急，沒有什麼承上啟下的作用，可以單獨拿出來學。
bootstrap就是一個框架，把最主要的柵格系統看看就好。其他的大概了解能幹啥就行，很多公司，是不讓用bootstrap的，而是用原始碼自己寫。這個用一天的時間沒啥問題。
node.js和angular比較重要，如果學會，算是上了一個台階了。所以重點說說這個。
angular屬於mvvm框架，一開始覺得angular挺復雜的，所以想學一個簡單的，輕量級的，所以決定先學vue。但是在了解的過程中發現，很多的專業名詞，沒聽過，或者理解不透。所以又開始從頭學習node.js。在學習node.js的過程中又開始迷茫，發現了很多JS不懂的地方。
所以，又開始深入研究js的dom，函式，ajax，陣列等。總之用了很長的時間，浪費了很長時間。
最後總結一下啊。其實，沒必要鑽那麼多牛角尖。
先做著vue的例子，不懂的地方，直接略過，很多時候，不理解的不懂的東西，用著用著，突然就能明白。照貓畫虎先把VUE的例子跟著做一遍之後，同時梳理一下涉及到的JS知識點。能自己用vue做出幾個小成品的時候，開始結合js研究node.js。之後再去涉及angular。
angular差不多有個大概了解的時候，反過頭接著學vue，你會發現，又會發現很多新東西。
web前端這個東西特別有意思，當你達到一個高度，返回來再看以前的技術，會發現，哎呀，竟然又能發現新大陸。
廈門web前端工程師培訓哪家好
培訓學校很多，沒有具體的衡量標準的。但是可以從幾方面去選擇：
1 有很多優秀導師的
2 培養出很多優秀學員的
3 只做培訓的，沒有做其他的
4 做的比較久的。
北京WEB前端工程師培訓哪個好
建議找全程面授課程的地方學習，課程體系很重要，現在企業在用人方面講究全棧的前端工程師人才，所在在課程選擇上要慎重，學習內容要基於HTML5，要包含pc端+移動端+後端。這要才能學的系統，就業上才會有所保障。
F. 前端面試官常問的問題有哪些
1、重繪和重排的關系：
重繪不會引起重排，但重排一定會引起重繪，一個元素的重排通常會帶來一系列的反應，甚至觸發整個文檔的重排和重繪，性能代價是高昂的。
2、重繪的概念：
重繪是一個元素外觀的改變所觸發的瀏覽器行為，例如改變visibility、outline、背景色等屬性。瀏覽器會根據元素的新屬性重新繪制，使元素呈現新的外觀。由於瀏覽器的流布局，對渲染樹的計算通常只需要遍歷一次就可以完成。
但table及其內部元素除外，它可能需要多次計算才能確定好其在渲染樹中節點的屬性值，比同等元素要多花兩倍時間，這就是我們盡量避免使用table布局頁面的原因之一。
3、觸發重排的情況：
頁面渲染初始化時；瀏覽器窗口改變尺寸；元素尺寸改變時；元素位置改變時；元素內容改變時；添加或刪除可見的DOM元素時。
4、rex的缺點：
（1）一個組件所需要的數據，必須_父組件傳過來，而不能像flux中直接從store取。
（2）當一個組件相關數據更新_，即使父組件不需要用到這個組件，父組件還是會重新render,可能會有效率影響，或者需要寫復雜的shouldComponentUpdate進行判斷。
5、對MVC和MVVM的理解：
（1）mvc：View傳送指令到Controller Controller完成業務邏輯後，要求Model改變狀態Model將新的數據發送到View，用戶得到反饋所有通信都是單向的。Angular它採用雙向綁定（data-binding）：View的變動，自動反映在ViewModel，反之亦然。組成部分Model、View、ViewModel
（2）View：UI界面ViewModel：它是View的抽象，負責View與Model之間信息轉換，將View的Command傳送到Model；Model：數據訪問層。
G. 前端開發面試問題工作中遇到最難的是什麼
1）.margin-top,margin-bottom不能正常顯示時一.有時會遇到外層中的子層使用margin-top不管用的情況；這里我們需要在子層的前後加上一個div{height:0;overflow:hidden;}例CSS樣式表中：#box{background-color:#eee;}#boxp{margin-top:
H. 前端常見面試題
前端開發可能問到的問題：
自我介紹（一定要對項目很熟悉）
ui-app web前端技術體系？
響應式怎麼做？
render跟狀態的差異
類組件的生命周期？
阻止冒泡，阻止事件默認行為
文本垂直居中。 line-height設置為元素高度。
用rece講數組中的對象進行合並
解釋localstorage sessionstorage cookie
eventbus滿足event.on('eventname', callback)
display有幾個值？默認值？
position有幾個值？默認值？
div水平垂直居中？
position有哪些值
react相關問題（概念理解、通訊組件等）、react常用內置
React-router
html+css
頁面增刪改查
position的值 absolute relative fixed static
工作中是怎麼聯調和上線的（現場想合適的前後端聯調方式，能和webpack環境切換聯系起來）
antd的Form shouldUpdate增量更新方式，性能優化。
對Hooks的理解
3:操作dom點擊事件向伺服器上傳數據，在上傳未完成之前不可重復操作事件
4:日期格式化，日期不足前兩位補0（2021-06-06 06:06:00）
用css寫一個布局，左側固定寬度，右側自適應
你看
I. 面試Web前端需要注意什麼會面試哪些問題
作為一名HTML5前端工程師，為了工作，為了就業我們免不了要參加各種各樣的面試。為此總結了面試前的注意事項：
第一：注意自己的儀容儀表
面試之前，一定要再次從頭到腳地將自己的儀容儀表檢查一遍。檢查時主要包括，自己的牙縫是不是還有食物殘渣，所以你需要就近找一個衛生間，如果沒有衛生間就近找一個角落也是可以的，但是切記一定不要在大庭廣眾之下。因此，為了給自己整理出著裝的時間請在約定時間前20分鍾到達。
第二：再次檢查面試時所需的資料是否都已帶全
這些資料主要包括：身份證明、學歷文憑證明、個人簡歷、以往作品等等，如果這些東西齊全之後，需要對這些資料做一個整理與排序。因為沒有哪個面試官希望看到面試者拿出一堆「莫名其妙」的東西塞給他，讓他自己再一頁一頁的翻找自己需要的內容，如果說這些資料在面試官手中不小心散落一地，結果可想而知。這樣的求職者在面試官眼中也一定不是一個讓人放心、有條不紊的員工。當然如果檢查時發現資料沒有帶全，也不要緊張。反而你要慶倖幸虧及時檢查，也有足夠的時間組織語言去向面試官解釋。
第三：面試之前將通信工具調成振動或關閉狀態
雖然說面試者與面試官之間是一個平等的關系，但畢竟你是去人家公司求職的，始終處於一個被動的狀態，所以最起碼的尊重還是要做到的。曾經有調查顯示，對於面試過程中接電話或是被電話打斷的求職者，會被HR減分。
第四：等候面試官時，仔細觀察多了解面試公司
在等候面試官時，可以暗自觀察一下公司的大體情況比如員工的著裝風格、公司的LOGO或是貼在牆上的企業文化、公司的環境等等，一來可以在接下來的面試過程中表現出自己對公司的認同感，二來也可以讓自己對求職公司多些了解，以確定是否要接受這里的工作。如果你身邊有公司的資料宣傳架，不妨取一本翻看一下，也會增加HR對你的好感。
第五：放鬆心情，保持自信
面試時一定要保持一定的自信，這樣也會給面試官留下很好的印象。面試只是你步入工作的第一步，即便是失敗了那也是人生重要的經歷。失敗是為了更好的迎接下一個挑戰。
作為一名web前端工程師千萬不要覺得懂技術面試就能萬事大吉了，像以上五點細節性的東西也是一定要掌握的。
面試題系列：
網頁鏈接
J. 你遇到的前端面試題都有什麼
大家好，我是王我。
隨著春節的結束，各個行業也普遍開始了上班的節奏， 不過本人17號才上班。為什麼？因為長得帥的都上班比較晚。 當然，每到新年結束，又迎來了一批招聘者與面試者，我來說說作為一年工作經驗應該知道的面試題。
HTML篇
1.doctype是什麼？有哪些類型？
2.input有哪些新類型？簡要說明其8用法。
3.HTML5有哪些新特性，移除了哪些元素？如何處理HTML5新標簽的瀏覽器兼容問題？如何區分HTML和HTML5？
4.bootstrap響應式的原理是什麼？
5.多移動終端頁面適配是如何實現的？
CSS篇
1.如何實現兩列布局，左邊自適應，右邊固定寬度？
2.用CSS畫一個三角形
3.CSS實現字體大寫
4.display有哪些常用的屬性值？分別是什麼意思？
5.position為absolute，relative，fixed的定點位置
6.用三種方法清除浮動
7.請介紹一下margin塌陷問題
js篇
1.什麼是事件冒泡和捕獲？如何阻止事件冒泡？(分別用原生和jquery實現)
2.js創建對象，至少使用三種方法
3.簡述一下事件穿透以及解決辦法
4.用三種方式判斷變數類型是否是數組
5.如何實現對象的拷貝？
6.什麼是閉包？閉包的優缺點。
7.簡述一下ajax請求的過程。
8.簡述一下new一個人構造函數的人過程。
9.為什麼會有跨域？是怎麼解決跨域問題的？簡述一下原理。
10.js原始數據類型有哪些？
11.學一個函數，判斷一個變數是否是字元串
12.typeof有哪些結果？
13.剪頭函數和普通函數有什麼區別？
14.請用三種方法實現數組去重
15.href和src有什麼區別？
jquery篇
1.attr()和prop()有什麼區別？
2.on和bind有什麼區別？js動態添加的dom元素是通過on還是bind？
3.touch和click有什麼區別？
4.window.onload和jquery的ready有什麼區別？
vue篇
1.簡述一下vue的生命周期及其特點
2.vue雙向綁定的原理是什麼？
3.vue的特點有哪些？和jquery有什麼區別？
4.父子組件之間傳遞數據的方法
5.子組件如何共享數據？
6.一般有什麼工具進行數據交互？
7.webpack的原理是什麼？
8.簡述一下$nextTick的用法
瀏覽器篇
1.cookie、sessionStorage、localStorage的區別是什麼？
2.有用過瀏覽器緩存嗎？簡述一下基本的緩存機制
網路篇
1.http和https之間的區別
2.從伺服器的安全考慮，是使用get請求還是post請求？
3.URL請求的過程有哪些？
項目經驗篇
1.項目中遇到的最大挑戰以及解決辦法
2.常見的網頁優化有哪些？
作為一個面試一年以內工作經驗的前端程序員來說，以上的問題能夠倒答如流月薪6k應該不成問題啦。這些面試題也是我在很多面試中感覺經常被問到的題目。
希望大家年後找工作能夠順順利利， 千萬不要跟我一樣哦，只有帥氣就一無所有了。
大家好，我是王我，中國最帥的前端程序員。
前幾次都是各種培訓公司，各種忽悠就不提了，說說後面4次面試的經歷。
第一次是面一個小公司，不過他們好像沒有厲害的前端，來面我的是個後端，一來沒有問我關於js的知識，直接問我以前做過什麼，有沒有經驗，我本人不會吹牛，簡歷也沒怎麼包裝，就是自己把自學的知識和做的幾個小demo弄在上面，也用github掛在頁面上了，不過他根本不點開看，也不問，問我會不會vue，我當時對框架還不了解，他就說他們需要能直接上手開始寫的，所以我第一個就直接掛了。
第二次面試是一個國企，這個問了很多問題，都很基礎，js數據類型，數組操作，事件，大概就是高程的前面幾章看看就差不多都能答到，然後因為他們主要用jq，所以問了很多jq的操作，關於節點的，動畫的，我看鋒利的jq大概看了3遍，也練過多次，所以我答的很熟。然後問了些布局方面的，bootstrap我了解過，又看過css3，所以這方面也沒啥問題，最後在現場做了個題目，主要就是布局然後通過ajax呈現數據。後面聽介紹我面試的說面試官比較滿意，說我jq很熟，一面就過了。可惜後面電話面試不知怎麼回事可能表現的不夠自信，雖然沒問技術，但是我沒啥自信，把沒項目經驗什麼的也不知怎麼就一五一十交代了，估計因為這個掛掉了。
第三次沒問問題，直接就是一套題開做，我在那做了一個多小時。題目就是按照要求一步一步做一個頁面出來，我也搞忘了我當時卡在哪個地方了，坐在那得時候就是做不出來，沒有設計圖，要根據他的描述自己找個設計圖然後做，我第一次遇到這個有點懵，雖然當時沒做出來，不過回來我自己花了幾個小時把它做了。所以這個也是涼了。
第四個問的比較多，數據類型，數組操作，跨域，ajax，閉包，原型鏈，繼承，深拷貝，淺拷貝，模塊amd cmd，基本都是問的js。然後問了html5的新特性 css3 的新特性，遇到過什麼瀏覽器的兼容性問題，怎麼解決的，以後想往什麼方面發展。這個時候我已經會點vue了，照著做了個小demo，不過後來知道公司用的angularjs，面試官也沒看我做的，問也沒問。。以前聽網上說要帶上自己的項目去面試感覺沒起多大效果。
最後總結下如果面的比較初級的崗位，應該主要問js，原型鏈，繼承，閉包，深淺拷貝，ajax，跨域，然後js的基礎知識，對了還有apply和call也問了，html5的新特性了解下就行。主要就是看你js掌握的程度，如果稍微要求高一點的，暫時還沒面過，等以後面過在來回答
1. cookie session 的用途和區別，以及有效期
1、cookie數據存放在客戶的瀏覽器上，session數據放在伺服器上。
2、cookie不是很安全，別人可以分析存放在本地的COOKIE並進行COOKIE欺騙
考慮到安全應當使用session。
3、session會在一定時間內保存在伺服器上。當訪問增多，會比較佔用你伺服器的性能
考慮到減輕伺服器性能方面，應當使用COOKIE。
4、單個cookie保存的數據不能超過4K，很多瀏覽器都限制一個站點最多保存20個cookie。
2. vue的數據綁定原理，mvvm與mvc的區別
MVVM：
m:model數據模型層 v:view視圖層 vm:ViewModel
vue中採用的是mvvm模式，這是從mvc衍生過來的
MVVM讓視圖與viewmodel直接的關系特別的緊密，就是為了解決mvc反饋不及時的問題
圖片說明一下：
說到MVVM就要說一下雙向綁定和數據劫持的原理，
MVC：
m:model數據模型層 v:view視圖層 c:controller控制器
原理： c層需要控制model層的數據在view層進行顯示
MVC兩種方式，圖片說明：
總結：
mvvm與mvc最大的區別：
MVVM實現了view與model的自動同步，也就是model屬性改變的時候， 我們不需要再自己手動操作dom元素去改變view的顯示，而是改變屬性後該屬性對應的view層會自動改變。
不懂得可以復制鏈接查看：
https://www.pianshen.com/article/3716256399/
3. storage 的區別 sessionStorage localStorage
localStorage 的生命周期是永久性的。假若使用localStorage存儲數據，即使關閉瀏覽器，也不會讓數據消失，除非主動的去刪除數據，使用的方法如上所示。localStorage有length屬性
sessionStorage 的生命周期是在瀏覽器關閉前。也就是說，在整個瀏覽器未關閉前，其數據一直都是存在的。sessionStorage也有length屬性，其基本的判斷和使用方法和localStorage的使用是一致的
有一個文本框 通過v-bind綁定了value屬性 值為myname 是我們在vue實例中定義的屬性
傳統我們獲取文本框值方法 可能通過getElementById找到文本框 然後獲取其value屬性
但是vue中直接通過v-bind綁定了value屬性 所以不需要像之前那樣獲取值
所以在後面的按鈕中獲取name值 直接獲取vue實例對象data裡面的myname屬性即可
【數據為尊 ----數據映射到瀏覽器 如果數據v-model後修改（肯定input）然後到數據在有數據映射到瀏覽器頁面 ----映射關系統稱】
緩存路由組件
使用的是vue的一個組件，參考vue的官方文檔
使用這個東西可以保證我們在切換組件的時候，原來顯示的組件不被銷毀
-----【保障組件的數據不會被切換路由而銷毀數據】
Home是對應的組件對象的名字，不是路由的名字
6.多維數組拍平
數組拍平也稱數組扁平化，就是將數組裡面的數組打開，最後合並為一個數組
一紅六種方法吧……
了解的請看： https://www.cnblogs.com/guan-shan/p/10165737.html
7.跨域的原因 解決方案
跨域是指一個域下的文檔或腳本試圖去請求另一個域下的資源，這里跨域是廣義的。
這樣就可以說同源策略----協議---埠---域名
原生的src和href可以解決跨域
代理可以解決
請求頭也可以攜帶瀏覽器提示的也可以解決
一般都是後端解決跨域問題
【別的需要了解看下方鏈接】
https://blog.csdn.net/qq_41604383/article/details/100770100
8.uniApp兼容問題§ 如果你使用cli創建項目（即項目根目錄是package.json），不管用什麼ide，即便是用HBuilderX，切記cli項目的編譯器是在項目下的，HBuilderX不管怎麼升級都不會影響編譯器版本。你需要手動npm update來升級編譯器。以及如果你想要安裝less、scss等預編譯器，也需要自己npm安裝在項目下，而不是在HBuilderX的插件管理里安裝。
§ 如果你使用離線打包，請注意HBuilderX升級後，真機運行基座和雲打包對應引擎跟隨HBuilderX升級，而你的sdk需要手動升級。sdk的版本升級一般滯後HBuilderX正式版升級一兩天。
§ 如果你使用自定義基座，之前製作的自定義基座是不會跟隨HBuilderX升級的，升級HBuilderX後你應該重新製作新版自定義基座。
§ 如果你使用wgt升級，新版HBuilderX編譯的wgt，運行到之前的runtime上，一定要先測試好，看有沒有兼容性問題。如果有問題，就不要wgt升級，整包升級。
§ 考慮到向下兼容，uni-app編譯器在升級為新的自定義組件模式後，同時保留了對老編譯模式的向下兼容。
在HBuilderX alpha版中，App端一定會使用新編譯器，不理會manifest配置。
在HBuilderX 正式版中，新創建的項目會使用新編譯器，老項目不會強制使用，而是開發者自己在manifest里配置開啟。
§ 如果你使用其他ide開發uni-app，會經常因為拼錯單詞而運行失敗，因為經過webpack編譯一道，很多錯誤反應的不夠直觀，排錯時間很長，不如從開始就依賴有良好提示的HBuilderX，避免敲錯單詞。
§ 雲打包的引擎版本說明
HBuilderX Alpha，只有1套雲打包機，不管你的HBuilderX alpha版本多少，對應的打包機一定是最新的alpha版的客戶端引擎。
HBuilderX正式版，有2套打包機，一個是最新正式版，一個是次新正式版。
中間的緊急更新版本沒有獨立打包機。
舉個例子：
HBuilderX 有1.8.0、1.8.1、1.8.2、1.9.0、1.9.1這幾個正式版。
那麼當前可用的打包機有1.9.1和1.8.2這2台。（即每個大版本的最後一個版本）
除了這2個HBuilderX版本外，其他版本的雲打包都指向最新的1.9.1版對應的打包機。（即只保留2個大版本的雲打包機）
【詳情請看】
https://ask.dcloud.net.cn/article/35845
一、HTML
HTML書寫規范
H5新增標簽
HTML渲染過程
二、CSS
css盒子模型概念
css彈性布局概念
三、JavaScript
事件模型
DOM2級事件模型
閉包
原型鏈
四、移動Web開發
常見的布局方案
移動端前端常見的觸摸相關事件touch、tap、swipe等整理
移動端前端手勢事件
移動端頁面渲染優化
GPU渲染
GPU核心渲染過程
五、調試
常用的調試工具
Chrome控制台調試js使用
移動端測試
六、HTTP網路知識
常見的HTTP狀態碼
不同請求類型的區別
WEB緩存方案
——————————
牛客網（www.nowcoder.com）
- 專業IT筆試面試備考平台
- 最全C++JAVA前端等互聯網技術求職題庫
- 全面提升IT編程能力
- 程序員交友聖地
分享了一些Web前端的面試題，限時一小時，你看看自己能夠答出多少道！
放心，這些面試題都是一些非常基礎的知識，只要你在平時認真聽課、學習了，那麼這些面試題肯定不會難道你。
建議：雖然沒有人監督你，但還是希望你不要去尋找答案，脫離網路，拿起紙筆，你試一下自己究竟能夠答出個什麼水平！有沒有真本領？答案盡在這些面試題里！那麼，你准備好了嗎？OK！計時開始！
一、HTML常見題目01、Doctype作用？嚴格模式與混雜模式如何區分？它們有何意義？
02、HTML5為什麼只需要寫？
03、行內元素有哪些？塊級元素有哪些？空(void)元素有那些？
04、頁面導入樣式時，使用link和@import有什麼區別？
05、介紹一下你對瀏覽器內核的理解？
06、常見的瀏覽器內核有哪些？
07、html5有哪些新特性、移除了那些元素？如何處理HTML5新標簽的瀏覽器兼容問題？
08、如何區分HTML和HTML5？
09、簡述一下你對HTML語義化的理解？
10、HTML5的離線儲存怎麼使用，工作原理能不能解釋一下？
二、CSS類的題目01、介紹一下標準的CSS的盒子模型？與低版本IE的盒子模型有什麼不同的？
02、CSS選擇符有哪些？哪些屬性可以繼承？
03、CSS優先順序演算法如何計算？
04、CSS3新增偽類有那些？
05、如何居中p？如何居中一個浮動元素？如何讓絕對定位的p居中？
06、display有哪些值？說明他們的作用。
07、position的值relative和absolute定位原點是？
08、CSS3有哪些新特性？
09、請解釋一下CSS3的Flexbox(彈性盒布局模型),以及適用場景？
10、用純CSS創建一個三角形的原理是什麼？
三、Java類的題目
01、介紹Java的基本數據類型。
02、說說寫Java的基本規范？
03、Java原型，原型鏈？有什麼特點？
04、Java有幾種類型的值？(堆：原始數據類型和棧：引用數據類型)，你能畫一下他們的內存圖嗎？
05、Java如何實現繼承？
06、Java創建對象的幾種方式？
07、Java作用鏈域？
08、談談This對象的理解。
09、eval是做什麼的？
10、什麼是window對象？什麼是document對象？
OK，一小時到了，這個時間可不算短了，那麼這些面試題你答出了幾道呢？你寫的答案正確了嗎？現在你可以去翻看答案了。
如果你答出了絕大多數的或者是全部的題，並且答案也正確了，那麼恭喜你……
你這時心裡是不是有點小竊喜，認為自己有能力拿高薪了？雖然我也很想這么告訴你，但事實上這只能表明你的基礎扎實，畢竟這只是一些非常基礎的面試題。騷年~繼續努力吧！
如果你只答出了小部分或者答出了大部分題但答案不正確，那麼我只想說：「騷年，你的水平還差的遠呢。」連這么基礎的題你都打不出來，還想拿高薪？回去再練一段時間吧！
扎實的基礎是你拿高薪的重要武器，如果你連基礎都不扎實，那麼想要攻克「高薪」這個厚實的堡壘，那隻是痴人說夢罷了。
1.前端框架類問題，問你會不會用vue react啊
2.語言類，問你一些JavaScript語言的問題
3.項目經驗，讓你講講做過的項目，遇到的問題和解決之道