Ⅰ 第一次實習面試web前端要注意些什麼
我覺得去面試web前端應該會一些專業技術，要自我介紹的有特點，讓面試官知道你是干什麼的，都會那些東西，不要緊張，要注意禮貌，個人衛生一定要搞好，只要你有web的實力，相信面試官會讓你通過的。
Ⅱ 常見的web前端面試題及答案分享
1、 說下行內元素和塊級元素的區別?行內塊元素的兼容性使用?(IE8 以下)
答：行內元素：會在水平方向排列，不能包含塊級元素，設置width無效，height無效(可以設置line-height)，margin上下無效，padding上下無效。塊級元素：各占據一行，垂直方向排列。從新行開始結束接著一個斷行。兼容性：display:inline-block;*display:inline;*zoom:1。
2、box-sizing常用的屬性有哪些?分別有什麼作用?
答：box-sizing: content-box|border-box|inherit。content-box:寬度和高度分別應用到元素的內容框。在寬度和高度之外繪制元素的內邊距和邊框(元素默認效果)。
border-box:元素指定的任何內邊距和邊框都將在已設定的寬度和高度內進行繪制。通過從已設定的寬度和高度分別減去邊框和內邊距才能得到內容的寬度和高度。
3、Doctype作用?標准模式與兼容模式各有什麼區別?
答：告知瀏覽器的解析器用什麼文檔標准解析這個文檔。DOCTYPE不存在或格式不正確會導致文檔以兼容模式呈現。
標准模式的排版和JS運作模式都是以該瀏覽器支持的最高標准運行。在兼容模式中，頁面以寬松的向後兼容的方式顯示,模擬老式瀏覽器的行為以防止站點無法工作。
4、html5有哪些新特性?如何處理HTML5新標簽的瀏覽器兼容問題?如何區分 HTML 和 HTML5?
答：HTML5 現在已經不是 SGML 的子集，主要是關於圖像，位置，存儲，多任務等功能的增加。
(1)繪畫 canvas;
(2)用於媒介回放的 video 和 audio 元素;
(3)本地離線存儲 localStorage 長期存儲數據，瀏覽器關閉後數據不丟失;
(4)sessionStorage 的數據在瀏覽器關閉後自動刪除;
(5)語意化更好的內容元素，比如 article、footer、header、nav、section;
(6)表單控制項，calendar、date、time、email、url、search;
(7)新的技術webworker, websocket, Geolocation;
IE8/IE7/IE6支持通過document.createElement方法產生的標簽，可以利用這一特性讓這些瀏覽器支持HTML5新標簽，瀏覽器支持新標簽後，還需要添加標簽默認的樣式。當然也可以直接使用成熟的框架、比如html5shim。
以上就是環球青藤小編關於web前端面試題的相關分享，希望對大家有所幫助，想要了解更多相關內容，請及時關注本平台並進行查看!
Ⅲ web前端面試經常問到的面試題有哪些
1、 列舉web性能優化？
1)
減少http請求次數。合並文件、利用css sprite把零散的圖片整合到一張圖上。2)
減少DNS查找。3)
減少從定向。4)
響應時間。使用AJAX進行緩存，減少http請求。5)
延遲載入組件.6)
預載入組件。7)
減少節點的數量。8)
切分組件到多個域。9)
最小化iframe。10)
杜絕http404錯誤。2、 介紹一下XMLHttpRequest對象的常用方式和屬性?
open(「method」,」URL」) 建立對伺服器的調用，第一個參數是HTTP請求方式
可以為GET，POST或任何伺服器所支持的您想調用的方式。
第二個參數是請求頁面的URL。
send()方法，發送具體請求
abort()方法，停止當前請求
readyState屬性 請求的狀態 有5個可取值 0=未初始化 ，1=正在載入
2=以載入，3=交互中，4=完成
responseText 屬性 伺服器的響應，表示為一個串
reponseXML 屬性 伺服器的響應，表示為XML
status 伺服器的HTTP狀態碼，200對應ok 400對應not found
Ⅳ web前端開發面試流程是怎樣的
首先投簡歷，等待hr通知面試，一般情況下先填資料，做測試題，接著開始第一面（一般問經你的個人情況，工作經歷等），資料已經交給技術，等一面通過之後接著二面，二面一般是技術面試，問你開發相關的技術問題（例如布局問題，js,框架之類的），有些公司還需要上機操作（寫一兩個頁面或者開發一個js方法等），有些公司是通過之後直接進行3面有些是改天再進行3面，3面一般就是項目經理或總經理問你一些各種各樣的問題（隨機應變就行，也有一些公司沒有這個環節），如果3面都過了，基本上就是面試成功了，接下來就是4面，也就是人事主管和你談工資待遇等問題了，這個談好之後就會告訴你什麼時候過來上班，要准備什麼東西，當然一般還會有正式的工作邀請函發到你的郵箱。如果沒有3面的公司，那人事這個環節就直接是3面了。
還有一些公司是一面之後等通知，通過的就通知你二面，然後再等通知，然後通過再三面（這樣的公司我一般不會等，太浪費時間）
Ⅳ Web前端5道面試題
1.請說明ECMAScript,JavaScript,Jscript之間的關系?
ECMAScript提供腳本語言必須遵守的規則、
細節和准則，是腳本語言的規范。
比如：ES5，ES6就是具體的一js版本。
JavaScript是ECMAScript的一個分支版本,
JavaScript實現了多數ECMA-262中
描述的ECMAScript規范，但存在少數差異。
JScript是微軟公司對ECMA-262語言規范的
一種實現,除了少數例外(這是為了保持向後兼容),
微軟公司宣稱JScript完全實現了ECMA標准.
關系:
JavaScript和JScript都是ECMAScript的版本分支,
二者在語法上沒有多大的區別;
只不過一個是NetScape公司的,一個是微軟的;
IE系列默認是JScript,其它的則反之用JavaScript。
2.頁面載入過程中可能觸發哪些事件?它們的順序是?
頁面載入時，大致可以分為以下幾個步驟：1)開始解析HTML文檔結構2)載入外部樣式表及JavaScript腳本3)解析執行JavaScript腳本4)DOM樹渲染完成5)載入未完成的外部資源6)頁面載入成功
執行順序:1)documentreadystatechange事件2)documentDOMContentLoaded事件3)windowload事件
3.函數中在聲明變數a前使用a會產生錯誤嗎?為什麼?
不會,JS中能夠進行變數作用域提升,
把所有變數、函數的聲明提升到當前
作用域的最前面,但不進行賦值操作;
所以可能造成獲取的值是undefined。
4.什麼是hash,以及hashchange事件?
先了解下什麼是hash:hash即URL中"#"字元後面的部分。
a)使用瀏覽器訪問網頁時，
如果網頁URL中帶有hash，
頁面就會定位到id(或name)
與hash值一樣的元素的位置;
b)hash還有另一個特點，
它的改變不會導致頁面重新載入如橡尺;
c)hash值瀏如清覽器是不會隨請求發送到伺服器端的;
d)通過window.location.hash屬性獲取和設置hash值。
window.location.hash值的變化會直渣高接
反應到瀏覽器地址欄(#後面的部分會發生變化)，同時，瀏覽器地址欄hash值的變化也會觸發
window.location.hash值的變化，
從而觸發onhashchange事件。
再來了解下什麼是hashchange事件:
a)當URL的片段標識符更改時，
將觸發hashchange事件(跟在#符號後面的URL部分，包括#符號)b)
hashchange事件觸發時，
事件對象會有hash改變前的URL(oldURL)和hash改變後的URL(newURL)兩個屬性。
5.什麼是CDN,CDN對於網站有什麼意義,它有什麼樣的缺點?
CDN又稱為內容分發網路;本意在於
盡可能避開互聯網上有可能影響數據
傳輸速度和穩定性的瓶頸和環節，
使內容傳輸的更快、更穩定。
主要目的:
解決因分布、帶寬、伺服器性能帶來的訪問延遲問題，
適用於站點加速、點播、直播等場景。
使用戶可就近取得所需內容，解決Internet網路擁擠的狀況，
提高用戶訪問網站的響應速度和成功率。
缺點:
a)實施復雜,投資大;
b)目前大部分的CDN還只是對靜態內容加速，
對動態加速效果不好;
而雙線對動態加速的效果跟靜態是一樣的。
Ⅵ Web 前端面試
博客園整理了一下，有好的面試題歡迎大家發在評論區喲
1. 閉包
2. 數組去重
3. 原型和原型鏈
4. call,apply,bind三者的區別？
5. 請介紹常見的 HTTP 狀態碼(至少五個)
6. 深淺拷貝
7. 實現(5).add(3).minus(2)輸出6
8. null和undefined區別
9. MVC和MVVC?
10. Vue生命周期
11. Vue數據雙向綁定原理
12. Vue組件傳參
13. 說說各瀏覽器存在的兼容問題
14. router和route
15. active-class屬於Vue哪一個moles,有什麼作用
16. v-if和v-show
17. computed和watch有什麼區別
18.Vue 組件中 data 為什麼必須是函數
19. vue中子組件調用父組件的方法
20. vue中 keep-alive 組件的作用
21. vue中如何編寫可復用的組件？
22. Vue 如何去除url中的 #
23. Vue 中 key 的作用
24. Vue 中怎麼自定義指令
25. Vue 中怎麼自定義過濾器
26. NextTick 是做什麼的
27. Vue 組件 data 為什麼必須是函數
28. 計算屬性computed 和事件 methods 有什麼區別
29. scoped（死夠撲的）
30. vue如何獲取dom?
31. promise
32. vue常用指令有哪些
33.vue-loader是什麼?使用和用途？
34.css樣式局部化，如何讓css只在當前組件起作用?scss和stytus樣式穿透
閉包指有權訪問另一個函數中變數的函數，
MDN: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Closures
B站視頻： https://www.bilibili.com/video/BV1YJ411R7ap?from=search&seid=18157596230752413126
https://www.jianshu.com/p/9c3547450a52
https://search.bilibili.com/all?keyword=%E5%8E%9F%E5%9E%8B%E9%93%BE%20%E9%BB%91%E9%A9%AC
都是用來改變this指向的
call和apply都是function原型上的方法，每一個函數作為function的實例都可以調用這兩個方法，而這兩個方法都是用來改變this指向的
一般情況下this指向其調用者（）
fun.call(thisArg,arg1,ary2,...)
主要作用可以實現繼承
調用函數，改變this指向
繼承
fun.apply(thisArg,[argsArray])
作用：調用函數，改變函數內部this指向
參數必須是數組
apply主要應用於藉助數學對象等
bind()方法不會調用函數，但可以改變函數內部this指向
fun.bind(thisArg,arg1,arg2,...)
thisArg:在fun函數運行時指定的this值
arg1，arg2:傳遞的其他參數
返回由指定的this值和初始化參數改造的原函數拷貝
call的性能要比apply好一些，尤其當傳遞參數超過3個，後期開發可多用call
時間測試
狀態碼是由 3 位數組成，第一個數字定義了響應的類別，且有五種可能取值:
1xx：指示信息–表示請求已接收，繼續處理。
2xx：成功–表示請求已被成功接收、理解、接受。
3xx：重定向–要完成請求必須進行更進一步的操作。
4xx：客戶端錯誤–請求有語法錯誤或請求無法實現。
5xx：伺服器端錯誤–伺服器未能實現合法的請求。
阮一峰： http://www.ruanyifeng.com/blog/2014/03/undefined-vs-null.html
MVC 是後端中的概念
MVVC中 是前端概念
最終實現V和M數據的同步，因此開發者只需關注業務邏輯，不需要手動操作Dom，mvvm是vue的核心
這兩個不同的結構可以看出兩者的區別，他們的一些屬性是不同的。
active-class 屬於vue-router的樣式方法
當routerlink標簽被點擊時將會應用這個樣式
使用有兩種方法
routerLink標簽內使用
在使用時會有一個Bug
首頁的active會一直被應用
解決辦法
為了解決上面的問題，還需加入一個屬性exact,類似也有兩種方式：
在router-link中寫入exact
在路由js文件,配置active-class
還可以不用exact這種方法去解決，例如
首頁
路由中加入重定向
computed
computed是計算屬性，也就是計算值，它更多用於計算值的場景
computed具有緩存性，computed的值在getter執行後是會緩存的，只有在它依賴的屬性值改變之後，下一次獲取computed的值時重新調用對應的getter來計算
computed適用於計算比較消耗性能的計算場景
watch
watch更多的是[觀察]的作用，類似於某些數據的監聽回調，用於觀察props $emit或者本組件的值，當數據變化時來執行回調進行後續操作
無緩存性，頁面重新渲染時值不變化也會執行
小結
當我們要進行數值計算，而且依賴於其他數據，那麼把這個數據設計為computed
如果你需要在某個數據變化時做一些事情，使用watch來觀察這個數據變化。
去這里看一下blog.csdn.net
vue-router 默認使用 hash 模式，所以在路由載入的時候，項目中的 url 會自帶 #。如果不想使用 #， 可以使用 vue-router 的另一種模式 history
new Router({
mode: 'history',
routes: [ ]
})
需要注意的是，當我們啟用 history 模式的時候，由於我們的項目是一個單頁面應用，所以在路由跳轉的時候，就會出現訪問不到靜態資源而出現 404 的情況，這時候就需要服務端增加一個覆蓋所有情況的候選資源：如果 URL 匹配不到任何靜態資源，則應該返回同一個 index.html 頁面
具體參考 官方API
參考 官方文檔-自定義指令
過濾器也同樣接受全局注冊和局部注冊
具體可參考官方文檔 深入響應式原理
我們可以將同一函數定義為一個 method 或者一個計算屬性。對於最終的結果，兩種方式是相同的
不同點：
讓css只在當前組件中起作用
Ⅶ 面試前端實習生需要什麼條件
最好的方法就是去招聘網站上看看前端實習生的要求和職責，按照企業的需求來，一般都不會錯，摘錄了一個前端崗的招聘需求，照這個來准備就差不錯了，當然實習生可能要求沒這么高，大致差不多：
工作職責：
. 根據開發進度和任務分配，完成相應頁面的開發、編程任務；
. 協助團隊完成相關的測試、上線運營工作;
. 優化代碼並保持良好的瀏覽器兼容性；
. 良好的編碼能力和習慣，能書寫適當的注釋、文檔。
職位要求：
. 有靜態開發加代碼管理經驗；
. 熟悉 HTML/CSS/JavaScript 等 Web 前端開發技術 ；
. 具有良好邏輯思考能力，良好的溝通能力和團隊協作精神，有較強學習能力。
Ⅷ web前端面試怎麼說
面試方法
代碼編寫筆試
問答式
做過最滿意的項目是什麼？
項目背景
為什麼要做這件事情？
最終達到什麼效果？
你處於什麼樣的角色，起到了什麼方面的作用？
在項目中遇到什麼技術問題？具體是如何解決的？
如果再做這個項目，你會在哪些方面進行改善？
描述一個你遇到過的技術問題，你是如何解決的？
這個問題很常見，有沒有遇到過很不常見的問題？比如在網上根本搜不到解決方法的？
是否有設計過通用的組件？
請設計一個 Dialog（彈出層） / Suggestion（自動完成） / Slider（圖片輪播） 等組件
你會提供什麼介面？
調用過程是怎樣的？可能會遇到什麼細節問題？
你最擅長的技術是什麼？
你覺得你在這個技術上的水平到什麼程度了？你覺得最高級別應該是怎樣的？
瀏覽器及性能
這些優化方法背後的原理是什麼？
除了這些常規的，你還了解什麼最新的方法么？
（這個問既考察技術深度又考察技術廣度，其實要答好是相當難的，注意越詳細越好）
一個頁面從輸入 URL 到頁面載入完的過程中都發生了什麼事情？越詳細越好
談一下你所知道的頁面性能優化方法？
如何分析頁面性能？
其它
除了前端以外還了解什麼其它技術么？
對計算機基礎的了解情況，比如常見數據結構、編譯原理等
最近在學什麼？接下來半年你打算學習什麼？
做什麼方面的事情最讓你有成就感？需求設計？規劃？具體開發？
後續想做什麼？3 年後你希望自己是什麼水平？
在之前做過的項目中，有沒有什麼功能或改進點是由你提出來的？
是否有參與和改進其它開源項目
過程遵循 STAR 面試法 。
校招和社招的是不一樣的，校招會更加關注基礎知識，而社招會更加關注之前做過的項目情況。
項目相關
面試其實說白了就是根據一個人之前的經歷，來判斷出後續這人會做得怎樣，如果你之前從沒做成過一件事情，憑什麼讓別人相信你之後能做成呢？因此無論哪裡的面試都會問你之前做過的項目
項目可以是多人協助開發一個產品，也可以是自己個人做過的業余應用，只需介紹 1、2 個就夠了，需要注意的是 1 + 1 != 2，做了兩個平庸的項目不如做了一個好項目。
一般來說會問如下幾方面的問題：
技術相關 - 1 面
技術一面主要判斷對基礎知識的掌握
技術二面主要判斷技術深度及廣度
興趣相關
主動性相關